/* =====================================================================
   cart.css — WooCommerce winkelwagen, nieuwe stijl.
   Zelfstandig (tokens herhaald op .woocommerce), gescoped op de echte
   cart-classes. Layout: producten links, totalen-kaart rechts.
   ===================================================================== */

.woocommerce-cart .woocommerce {
  --bk-ink:#1D1D1B; --bk-body:#4A4A46; --bk-muted:#8B8B84; --bk-black:#020300;
  --bk-off-1:#F9F9F5; --bk-off-2:#F2F2EC; --bk-green:#2F4F3B; --bk-line:#E6E7E2;
  --bk-radius:16px; --bk-radius-lg:22px; --bk-maxw:1340px;
  --bk-serif:"Lastik",Georgia,serif; --bk-sans:"Geist",system-ui,Arial,sans-serif;
  font-family:var(--bk-sans); color:var(--bk-body);
}

/* geen oude fixed-header compensatie */
.bk main.page-main, .woocommerce-cart main.page-main { padding-top: 0; }
.woocommerce-cart .page__content__shop { padding: 48px 0 96px; }
.woocommerce-cart .page__content__shop .woocommerce {
  max-width: var(--bk-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start;
}
@media (max-width: 900px) {
  .woocommerce-cart .page__content__shop .woocommerce { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- linkerkolom: form + items ---- */
.woocommerce-cart-form { grid-column: 1; margin: 0; }
.woocommerce-cart-form h1 {
  font-family: var(--bk-serif); color: var(--bk-ink); font-size: clamp(34px,4vw,48px);
  line-height: 1.1; margin: 0 0 32px; font-weight: 500;
}
.woocommerce-cart-form__contents { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  align-items: center; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--bk-line);
}
.woocommerce-cart-form__cart-item__left { order: 1; }
.woocommerce-cart-form__cart-item__center { order: 2; display: contents; }
.woocommerce-cart-form__cart-item__right { order: 5; }

.product-thumbnail img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; background: var(--bk-off-2); }
.product-name { grid-column: 2; }
.product-name a { font-family: var(--bk-sans); font-size: 16px; font-weight: 600; color: var(--bk-ink); text-decoration: none; }
.product-name .variation { margin: 4px 0 0; font-size: 13.5px; color: var(--bk-muted); display: flex; flex-wrap: wrap; gap: 4px; }
.product-name .variation dt, .product-name .variation dd { margin: 0; }
.product-name .variation dd p { margin: 0; }
.product-price, .product-subtotal { font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink); font-weight: 500; white-space: nowrap; }
.product-price { grid-column: 3; }
.product-quantity { grid-column: 4; }
.product-subtotal { grid-column: 5; display: none; } /* subtotaal per rij = zelfde als prijs bij qty 1; totalen staan rechts */

/* qty-stepper */
.quantity-wrapper { display: inline-flex; align-items: center; border: 1px solid var(--bk-line); border-radius: 999px; background: #fff; overflow: hidden; }
.quantity-wrapper .quantity-minus, .quantity-wrapper .quantity-plus {
  width: 40px; height: 44px; border: 0; background: transparent; cursor: pointer;
  font-size: 18px; color: var(--bk-ink); display: flex; align-items: center; justify-content: center;
}
.quantity-wrapper .quantity-minus:hover, .quantity-wrapper .quantity-plus:hover { background: var(--bk-off-1); }
.quantity-wrapper .quantity { width: 42px; }
.quantity-wrapper .quantity input.qty {
  width: 42px; height: 44px; border: 0; text-align: center; background: transparent;
  font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink); -moz-appearance: textfield;
}
.quantity-wrapper .quantity input.qty::-webkit-outer-spin-button,
.quantity-wrapper .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* verwijder-knop */
.product-remove .remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: background .15s ease; }
.product-remove .remove:hover { background: var(--bk-off-1); }
.product-remove .remove svg { width: 18px; height: 18px; }

/* ---- cart-actions: coupon + update ---- */
.cart-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.coupon { flex: 1 1 auto; }
.coupon__inner__toggler { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; cursor: pointer; }
.coupon__inner__toggler p { margin: 0; font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink); font-weight: 500; }
.coupon__inner__form { display: flex; gap: 10px; align-items: stretch; max-width: 520px; }
.coupon__inner__form label { display: none; }
.coupon__inner__form input.input-text {
  flex: 1 1 auto; height: 52px; padding: 0 16px; border: 1px solid var(--bk-line); border-radius: 12px;
  background: var(--bk-off-1); font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink);
}
.coupon__inner__form input.input-text:focus { outline: none; border-color: var(--bk-green); background: #fff; }
.coupon__inner__form .button {
  flex: 0 0 auto; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bk-black); color: #fff; font-family: var(--bk-sans); font-size: 15px; font-weight: 500;
}
.coupon__inner__form .button:hover { opacity: .9; }
.cart-actions button[name=update_cart] {
  height: 52px; padding: 0 24px; border: 1px solid var(--bk-line); border-radius: 999px; background: #fff;
  font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink); cursor: pointer;
}
.cart-actions button[name=update_cart]:disabled { opacity: .4; cursor: not-allowed; }

/* ---- rechterkolom: totalen-kaart ---- */
.cart-collaterals { grid-column: 2; }
.cart_totals {
  background: var(--bk-off-1); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); padding: 30px 28px;
}
.cart_totals h2 { font-family: var(--bk-serif); color: var(--bk-ink); font-size: 22px; margin: 0 0 20px; font-weight: 500; }
.cart_totals table.shop_table { width: 100%; border: 0; margin: 0; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { border: 0; padding: 12px 0; font-family: var(--bk-sans); font-size: 15px; text-align: left; }
.cart_totals table.shop_table th { color: var(--bk-body); font-weight: 400; }
.cart_totals table.shop_table td { color: var(--bk-ink); text-align: right; font-weight: 500; }
.cart_totals tr.cart-subtotal th, .cart_totals tr.cart-subtotal td,
.cart_totals tr.shipping th, .cart_totals tr.shipping td { border-bottom: 1px solid var(--bk-line); }
.cart_totals tr.order-total th { font-weight: 600; color: var(--bk-ink); font-size: 16px; }
.cart_totals tr.order-total td strong { font-weight: 600; }
.cart_totals tr.order-total .includes_tax { display: block; font-size: 12.5px; color: var(--bk-muted); font-weight: 400; margin-top: 2px; }
.cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: right; }
.cart_totals .woocommerce-shipping-methods label { font-family: var(--bk-sans); font-size: 15px; color: var(--bk-ink); }

/* afrekenen-knop */
.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout .checkout-button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 56px;
  background: var(--bk-green); color: #fff; border-radius: 14px; text-decoration: none;
  font-family: var(--bk-sans); font-size: 16px; font-weight: 500; transition: opacity .15s ease;
}
.wc-proceed-to-checkout .checkout-button:hover { opacity: .92; }

/* usp-lijst */
.cart-usps-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-usps-list__item { display: flex; align-items: center; gap: 10px; }
.cart-usps-list__item__icon { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.cart-usps-list__item__icon svg { width: 11px; height: 10px; }
.cart-usps-list__item__icon svg path { fill: var(--bk-green); }
.cart-usps-list__item__text { font-family: var(--bk-sans); font-size: 14px; color: var(--bk-body); }

/* betaalmethodes */
.payment-methods { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bk-line); }
.payment-methods ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.payment-methods li { display: flex; }
.payment-methods svg { display: block; height: 24px; width: auto; border-radius: 4px; }