/* TAHE Voor het afrekenen v2.6 - compacte WooCommerce UI */

/* =========================
   TAHE - DEFINITIEVE KNOPPEN & WINKELWAGEN CONTROLS
   Compact, zwart/wit en WooCommerce Blocks-proof
   ========================= */

:root{
  --tahe-action-bg:#111111;
  --tahe-action-hover:#2a2a2a;
  --tahe-action-text:#ffffff;
  --tahe-action-radius:9px;
  --tahe-action-height:44px;
  --tahe-control-height:32px;
}

/* ---------------------------------------------------------
   1. ECHTE ACTIEKNOPPEN
   --------------------------------------------------------- */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.add_to_cart_button,
body .woocommerce button.single_add_to_cart_button,
body .woocommerce a.checkout-button,
body .woocommerce #place_order,
body input[type="submit"],
body button[type="submit"]:not(.wc-block-components-quantity-selector__button),
body a.wp-block-button__link,
body .wp-element-button,
body .wc-block-components-button:not(.wc-block-components-quantity-selector__button),
body .tahe-precheckout .button,
body .tahe-precheckout__checkout,
body .tahe-pc2-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  box-sizing:border-box !important;
  min-height:var(--tahe-action-height) !important;
  height:auto !important;
  padding:10px 18px !important;
  margin-top:0;
  background:var(--tahe-action-bg) !important;
  color:var(--tahe-action-text) !important;
  border:1px solid var(--tahe-action-bg) !important;
  border-radius:var(--tahe-action-radius) !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-decoration:none !important;
  text-align:center !important;
  cursor:pointer !important;
  transform:none !important;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease !important;
}

body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover,
body .woocommerce a.add_to_cart_button:hover,
body .woocommerce button.single_add_to_cart_button:hover,
body .woocommerce a.checkout-button:hover,
body .woocommerce #place_order:hover,
body input[type="submit"]:hover,
body button[type="submit"]:not(.wc-block-components-quantity-selector__button):hover,
body a.wp-block-button__link:hover,
body .wp-element-button:hover,
body .wc-block-components-button:not(.wc-block-components-quantity-selector__button):hover,
body .tahe-precheckout .button:hover,
body .tahe-precheckout__checkout:hover,
body .tahe-pc2-button:hover{
  background:var(--tahe-action-hover) !important;
  border-color:var(--tahe-action-hover) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  transform:translateY(-1px) !important;
}

body .wc-block-components-button .wc-block-components-button__text,
body .wc-block-components-button span,
body .wc-block-cart__submit-button span,
body .wc-block-components-checkout-place-order-button span,
body .woocommerce a.button span,
body .woocommerce button.button span,
body .tahe-pc2-button span{
  color:#ffffff !important;
}

/* Winkelwagen: checkoutknop netjes gecentreerd en niet overdreven breed */
body .wc-block-cart__submit,
body .wc-block-cart__submit-container,
body .woocommerce .wc-proceed-to-checkout{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

body a.wc-block-cart__submit-button,
body .wc-block-cart__submit-button,
body .woocommerce .wc-proceed-to-checkout a.checkout-button{
  width:100% !important;
  max-width:340px !important;
  min-height:44px !important;
  margin:0 auto !important;
  padding:10px 18px !important;
  background:#111111 !important;
  color:#ffffff !important;
  border:1px solid #111111 !important;
  border-radius:7px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

body a.wc-block-cart__submit-button:hover,
body .wc-block-cart__submit-button:hover,
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{
  background:#2a2a2a !important;
  border-color:#2a2a2a !important;
  color:#ffffff !important;
}

/* ---------------------------------------------------------
   2. AANTAL - / 1 / + : COMPACTE EIGEN CONTROL
   --------------------------------------------------------- */
body .wc-block-components-quantity-selector{
  display:inline-grid !important;
  grid-template-columns:28px 34px 28px !important;
  align-items:center !important;
  width:92px !important;
  min-width:92px !important;
  height:var(--tahe-control-height) !important;
  min-height:var(--tahe-control-height) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border:1px solid #d7d7d7 !important;
  border-radius:9px !important;
  box-shadow:none !important;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
body button.wc-block-components-quantity-selector__button{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  background:#111111 !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-transform:none !important;
  transform:none !important;
  cursor:pointer !important;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
body button.wc-block-components-quantity-selector__button:hover{
  background:#2a2a2a !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button svg{
  width:11px !important;
  height:11px !important;
  color:#ffffff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
body input.wc-block-components-quantity-selector__input{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  background:#ffffff !important;
  color:#111111 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:30px !important;
  text-align:center !important;
}

body input.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body input.wc-block-components-quantity-selector__input::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

/* ---------------------------------------------------------
   3. PRULLENBAK / VERWIJDEREN
   --------------------------------------------------------- */
body .wc-block-cart-item__remove-link,
body button.wc-block-cart-item__remove-link{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 0 0 6px !important;
  padding:0 !important;
  background:#111111 !important;
  color:#ffffff !important;
  border:1px solid #111111 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:1 !important;
  text-decoration:none !important;
  transform:none !important;
  cursor:pointer !important;
}

body .wc-block-cart-item__remove-link:hover,
body button.wc-block-cart-item__remove-link:hover{
  background:#2a2a2a !important;
  color:#ffffff !important;
  border-color:#2a2a2a !important;
  box-shadow:none !important;
  transform:none !important;
}

body .wc-block-cart-item__remove-link svg,
body button.wc-block-cart-item__remove-link svg{
  display:block !important;
  width:12px !important;
  height:12px !important;
  color:#ffffff !important;
  fill:none !important;
  stroke:currentColor !important;
}

/* Als WooCommerce het prullenbak-icoon via pseudo-element rendert */
body .wc-block-cart-item__remove-link::before,
body .wc-block-cart-item__remove-link::after{
  color:#ffffff !important;
}

/* ---------------------------------------------------------
   4. FOCUS / DISABLED
   --------------------------------------------------------- */
body .woocommerce a.button:focus-visible,
body .woocommerce button.button:focus-visible,
body input[type="submit"]:focus-visible,
body .wc-block-components-button:focus-visible,
body .wc-block-components-quantity-selector__button:focus-visible,
body .wc-block-cart-item__remove-link:focus-visible,
body .tahe-pc2-button:focus-visible{
  outline:2px solid #555555 !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

body .wc-block-components-button:disabled,
body .wc-block-components-button[aria-disabled="true"],
body button:disabled,
body input[type="submit"]:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* ---------------------------------------------------------
   5. MOBIEL
   --------------------------------------------------------- */
@media(max-width:640px){
  body a.wc-block-cart__submit-button,
  body .wc-block-cart__submit-button,
  body .woocommerce .wc-proceed-to-checkout a.checkout-button,
  body .woocommerce #place_order,
  body .wc-block-components-checkout-place-order-button,
  body .tahe-precheckout__checkout,
  body .tahe-pc2-checkout{
    width:100% !important;
    max-width:100% !important;
  }

  body .wc-block-components-quantity-selector{
    grid-template-columns:28px 34px 28px !important;
    width:92px !important;
    min-width:92px !important;
    height:32px !important;
    min-height:32px !important;
  }

  body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
  body button.wc-block-components-quantity-selector__button{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
  body input.wc-block-components-quantity-selector__input{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:30px !important;
    min-height:30px !important;
    line-height:30px !important;
  }

  body .wc-block-cart-item__remove-link,
  body button.wc-block-cart-item__remove-link{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
}



/* =========================================================
   V2.6 DEFINITIEVE QUANTITY OVERRIDE
   Dezelfde regels worden ook laat inline geplaatst als cache/thema-vangnet.
   ========================================================= */
body .wc-block-cart-item__quantity{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important}
body .wc-block-components-quantity-selector{display:grid!important;grid-template-columns:32px 38px 32px!important;flex:0 0 102px!important;width:102px!important;min-width:102px!important;max-width:102px!important;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;border:1px solid #d6d6d6!important;border-radius:8px!important;box-shadow:none!important}
body .wc-block-components-quantity-selector::before,body .wc-block-components-quantity-selector::after{content:none!important;display:none!important}
body .wc-block-components-quantity-selector>button{all:unset!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0!important;background:#111!important;color:#fff!important;border:0!important;border-radius:0!important;cursor:pointer!important;font-size:0!important}
body .wc-block-components-quantity-selector>button:first-of-type{border-radius:7px 0 0 7px!important}
body .wc-block-components-quantity-selector>button:last-of-type{border-radius:0 7px 7px 0!important}
body .wc-block-components-quantity-selector__button--minus::before,body .wc-block-components-quantity-selector>button:first-of-type::before{content:"−"!important;display:block!important;color:#fff!important;font:600 17px/1 Arial,sans-serif!important}
body .wc-block-components-quantity-selector__button--plus::before,body .wc-block-components-quantity-selector>button:last-of-type::before{content:"+"!important;display:block!important;color:#fff!important;font:600 16px/1 Arial,sans-serif!important}
body .wc-block-components-quantity-selector>button:disabled,body .wc-block-components-quantity-selector>button[aria-disabled="true"]{background:#9b9b9b!important;opacity:1!important;cursor:not-allowed!important}
body .wc-block-components-quantity-selector>input{all:unset!important;box-sizing:border-box!important;display:block!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0!important;background:#fff!important;color:#111!important;border:0!important;box-shadow:none!important;font:600 15px/32px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;text-align:center!important;appearance:textfield!important;-moz-appearance:textfield!important}
body .wc-block-cart-item__remove-link{all:unset!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:0!important;background:#111!important;color:#fff!important;border:1px solid #111!important;border-radius:8px!important;cursor:pointer!important;font-size:0!important}
body .wc-block-cart-item__remove-link svg{width:13px!important;height:13px!important;max-width:13px!important;max-height:13px!important;color:#fff!important;fill:none!important;stroke:currentColor!important}


/* =========================================================
   V2.7 - expliciete DOM-volgorde voor WooCommerce Cart Block
   WooCommerce kan input, minus en plus in een andere bronvolgorde renderen.
   ========================================================= */
body .wc-block-components-quantity-selector{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:30px 34px 30px!important;
  grid-template-rows:30px!important;
  width:96px!important;min-width:96px!important;max-width:96px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  gap:0!important;padding:0!important;overflow:hidden!important;
  border:1px solid #111!important;border-radius:8px!important;background:#fff!important;
}
body .wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus,
body .wc-block-components-quantity-selector>.tahe-q-minus{grid-column:1!important;grid-row:1!important}
body .wc-block-components-quantity-selector>.wc-block-components-quantity-selector__input,
body .wc-block-components-quantity-selector>.tahe-q-input{grid-column:2!important;grid-row:1!important}
body .wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus,
body .wc-block-components-quantity-selector>.tahe-q-plus{grid-column:3!important;grid-row:1!important}
body .wc-block-components-quantity-selector>button.tahe-q-minus,
body .wc-block-components-quantity-selector>button.tahe-q-plus{
  width:30px!important;min-width:30px!important;max-width:30px!important;
  height:30px!important;min-height:30px!important;max-height:30px!important;
  background:#111!important;color:#fff!important;border:0!important;border-radius:0!important;opacity:1!important
}
body .wc-block-components-quantity-selector>button.tahe-q-minus>*,
body .wc-block-components-quantity-selector>button.tahe-q-plus>*{display:none!important}
body .wc-block-cart-item__quantity>.tahe-q-remove,
body button.tahe-q-remove,
body a.tahe-q-remove{
  width:32px!important;min-width:32px!important;max-width:32px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 32px!important;padding:0!important;margin:0!important;border:0!important;
  border-radius:8px!important;background:#111!important;color:#fff!important;box-shadow:none!important
}