.elementor-5764 .elementor-element.elementor-element-7bbd7e03{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-7bbd7e03 *//* ==========================================================================
   vezels.nl — Winkelwagen
   Emerald Amber design system — afgestemd op het Blocksy-thema
   Volledige stylesheet. Vervang het hele blok bij een volgende wijziging.
   Meldingen (succes, info, fout) staan in de sitebrede CSS.
   ========================================================================== */

:root {
  --vz-bosgroen: #0B3D2E;
  --vz-emerald:  #00A860;
  --vz-amber:    #E8A33D;
  --vz-mint:     #EAF6EF;
  --vz-inkt:     #12241B;
  --vz-lijn:     #D8E4DC;
  --vz-wit:      #FFFFFF;
  --vz-grijs:    #5A6B62;
  --vz-rood:     #B3261E;

  --vz-radius:   14px;
  --vz-focus:    0 0 0 3px rgba(0, 168, 96, .35);
}

/* --------------------------------------------------------------------------
   1. Basis
   -------------------------------------------------------------------------- */

.woocommerce-cart .woocommerce {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--vz-inkt);
}

.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cross-sells h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vz-bosgroen);
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   2. Producttabel
   -------------------------------------------------------------------------- */

.woocommerce-cart table.shop_table {
  border: none;
  border-collapse: collapse;
}

.woocommerce-cart table.shop_table thead th {
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vz-bosgroen);
  border-bottom: 1px solid var(--vz-lijn);
  padding-bottom: .75rem;
}

.woocommerce-cart table.shop_table td {
  border-top: none;
  border-bottom: 1px solid var(--vz-lijn);
  padding: 1.25rem .75rem;
  vertical-align: middle;
}

/* De actierij draagt geen inhoud, dus ook geen scheidingslijn */
.woocommerce-cart table.shop_table td.actions {
  border-bottom: none !important;
  padding-top: 1.5rem;
}

.woocommerce-cart table.shop_table td.product-name a {
  font-weight: 600;
  color: var(--vz-bosgroen);
  text-decoration: none;
}

.woocommerce-cart table.shop_table td.product-name a:hover {
  color: var(--vz-emerald);
  text-decoration: underline;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
  border-radius: var(--vz-radius);
  background: var(--vz-mint);
}

/* --------------------------------------------------------------------------
   3. Aantal-.elementor-5764 .elementor-element.elementor-element-7bbd7e03 (Blocksy)
   Blocksy gebruikt .ct-increase / .ct-decrease, niet .plus / .minus.
   In de HTML staat de volgorde: plus, min, label, <br>, invoerveld.
   De <br> telt als flex-item en moet weg; de rest zetten we met `order`
   in de logische volgorde min — cijfer — plus.
   -------------------------------------------------------------------------- */

.woocommerce-cart .quantity {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  width: auto !important;
  max-width: none !important;
  height: 2.75rem;
  padding: 0 !important;
  border: 1px solid var(--vz-lijn);
  border-radius: var(--vz-radius);
  background: var(--vz-wit);
  overflow: hidden;
}

/* De regelafbreking en het schermlezerlabel uit de flexstroom halen */
.woocommerce-cart .quantity br {
  display: none !important;
}

.woocommerce-cart .quantity .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.woocommerce-cart .quantity .ct-decrease {
  order: 1;
}

.woocommerce-cart .quantity input.qty {
  order: 2;
}

.woocommerce-cart .quantity .ct-increase {
  order: 3;
}

.woocommerce-cart .quantity .ct-increase,
.woocommerce-cart .quantity .ct-decrease {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: static !important;
  flex: 0 0 2.5rem !important;
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--vz-bosgroen) !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background .15s ease;
}

.woocommerce-cart .quantity .ct-increase:hover,
.woocommerce-cart .quantity .ct-decrease:hover {
  background: var(--vz-mint) !important;
}

.woocommerce-cart .quantity input.qty {
  flex: 0 0 2.75rem !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vz-inkt) !important;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.75rem;
  text-align: center !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

/* --------------------------------------------------------------------------
   4. Knoppen
   Vaste hoogte in plaats van min-height: Blocksy telt er anders eigen
   regelhoogte bovenop, waardoor de knop hoger uitvalt dan ingesteld.
   -------------------------------------------------------------------------- */

/* 4a. Primair — Doorgaan naar afrekenen */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button.alt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100%;
  height: 3.25rem !important;
  min-height: 0 !important;
  padding: 0 1.25rem !important;
  margin: 0;
  background: var(--vz-bosgroen) !important;
  color: var(--vz-wit) !important;
  font-family: "Inter", sans-serif;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--vz-bosgroen) !important;
  border-radius: var(--vz-radius);
  transition: background .15s ease, border-color .15s ease;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
.woocommerce-cart .wc-proceed-to-checkout a.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button.alt:focus {
  background: var(--vz-emerald) !important;
  border-color: var(--vz-emerald) !important;
  color: var(--vz-wit) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
  outline: none;
  box-shadow: var(--vz-focus);
}

/* Er staat een <br> in de HTML van de knop. In een flexbox telt die als
   volwaardig item en duwt hij de tekst uit het midden. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button br,
.woocommerce-cart .wc-proceed-to-checkout a.button.alt br {
  display: none !important;
}

/* Blocksy zet een pijl achter .wc-forward — die willen we hier niet */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before {
  content: none !important;
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0;
  margin-top: 1.25rem;
}

/* 4b. Secundair — Update winkelwagen */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
  box-sizing: border-box !important;
  height: 3.25rem !important;
  min-height: 0 !important;
  padding: 0 1.5rem !important;
  background: var(--vz-wit) !important;
  color: var(--vz-bosgroen) !important;
  font-family: "Inter", sans-serif;
  font-size: .9375rem !important;
  font-weight: 600;
  line-height: 1 !important;
  border: 1px solid var(--vz-lijn) !important;
  border-radius: var(--vz-radius);
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.woocommerce-cart button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart button[name="update_cart"]:focus:not(:disabled),
.woocommerce-cart button[name="update_cart"]:active:not(:disabled),
.woocommerce-cart input[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart input[name="update_cart"]:focus:not(:disabled),
.woocommerce-cart input[name="update_cart"]:active:not(:disabled) {
  background: var(--vz-mint) !important;
  color: var(--vz-bosgroen) !important;
  border-color: var(--vz-bosgroen) !important;
}

.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart input[name="update_cart"]:disabled {
  background: var(--vz-wit) !important;
  color: var(--vz-grijs) !important;
  border-color: var(--vz-lijn) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.woocommerce-cart button[name="update_cart"]:focus-visible {
  outline: none;
  box-shadow: var(--vz-focus);
}

/* De knop blijft in de HTML staan omdat het JavaScript hem aanklikt om de
   winkelwagen bij te werken. Alleen visueel verbergen dus — display:none
   zou hem onklikbaar kunnen maken. */
.woocommerce-cart td.actions button[name="update_cart"],
.woocommerce-cart td.actions input[name="update_cart"] {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none;
}

/* 4d. Terugkoppeling na automatisch bijwerken
   Wordt door het JavaScript-snippet aangestuurd. */
.vz-cart-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.5rem;
  padding: 0;
  color: var(--vz-grijs);
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity .25s ease;
}

.vz-cart-status.is-visible {
  opacity: 1;
}

.vz-cart-status::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border: 2px solid var(--vz-lijn);
  border-top-color: var(--vz-emerald);
  border-radius: 50%;
  animation: vz-spin .6s linear infinite;
}

.vz-cart-status.is-done {
  color: var(--vz-bosgroen);
}

.vz-cart-status.is-done::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border: none;
  border-radius: 0;
  animation: none;
  background: var(--vz-emerald);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
}

@keyframes vz-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vz-cart-status::before { animation: none; }
  .vz-cart-status { transition: none; }
}

/* 4c. Tertiair — Product verwijderen */
.woocommerce-cart td.product-remove {
  text-align: right;
  vertical-align: middle;
}

.woocommerce-cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  vertical-align: middle !important;
  color: var(--vz-bosgroen) !important;
  font-size: 1.25rem;
  line-height: 1 !important;
  opacity: .55;
  transition: opacity .15s ease, color .15s ease;
}

.woocommerce-cart td.product-remove a.remove:hover {
  opacity: 1;
  color: var(--vz-rood) !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   5. Totalenblok
   -------------------------------------------------------------------------- */

.woocommerce-cart .cart_totals {
  background: var(--vz-wit);
  border: 1px solid var(--vz-lijn);
  border-radius: var(--vz-radius);
  padding: 1.75rem;
}

/* De totalentabel is geen echte tabel meer. De verzendrij mist een tweede
   kolom, waardoor elke poging om binnen de tabelopmaak uit te lijnen strandde.
   Als blok met flexrijen bestaat dat probleem niet: elke rij zet zijn label
   links en zijn bedrag rechts, ongeacht hoeveel cellen erin zitten. */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody {
  display: block;
  width: 100%;
}

.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--vz-lijn);
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  display: block;
  width: auto;
  min-width: 0;
  padding: .875rem 0;
  border-bottom: none;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  border-bottom: none;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  font-size: 1.125rem;
  color: var(--vz-bosgroen);
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  font-weight: 700;
}

.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-cart .cart_totals small {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--vz-grijs);
}

/* De verzendrij bevat maar één cel; die verdeelt kop en bedrag zelf. */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
  display: flex;
  flex: 1 1 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--vz-inkt);
}

.woocommerce-cart .cart_totals .ct-shipping-heading {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: right;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods label {
  margin: 0;
  font-weight: 400;
}

/* De regel over bij te werken verzendopties voegt niets toe bij één
   vast tarief voor heel Nederland. */
.woocommerce-cart .cart_totals p.woocommerce-shipping-destination {
  display: none !important;
}

/* Btw-vermelding op een eigen regel onder het totaal, niet ernaast */
.woocommerce-cart .cart_totals tr.order-total td small.includes_tax {
  display: block;
  margin-top: .375rem;
  text-align: right;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--vz-grijs);
}

/* --------------------------------------------------------------------------
   6. Meldingen
   De opmaak van meldingen staat in de sitebrede CSS. Hier alleen de ruimte
   rond het meldingenblok in de winkelwagen.
   -------------------------------------------------------------------------- */

.woocommerce-cart .woocommerce-notices-wrapper {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   7. Lege winkelwagen
   -------------------------------------------------------------------------- */

.woocommerce-cart .cart-empty {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  color: var(--vz-bosgroen);
}

/* Padding boven en onder in plaats van een vaste hoogte: dan is de ruimte
   rond de tekst per definitie gelijk, ongeacht de regelhoogte van het
   lettertype. */
.woocommerce-cart .return-to-shop a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: 1rem 1.75rem !important;
  background: var(--vz-bosgroen) !important;
  color: var(--vz-wit) !important;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2 !important;
  border: 1px solid var(--vz-bosgroen) !important;
  border-radius: var(--vz-radius);
  text-decoration: none;
}

.woocommerce-cart .return-to-shop a.button br {
  display: none !important;
}

.woocommerce-cart .return-to-shop a.button:hover {
  background: var(--vz-emerald) !important;
  border-color: var(--vz-emerald) !important;
  color: var(--vz-wit) !important;
}

/* --------------------------------------------------------------------------
   8. Waardebon
   Uitschakelen doe je in WooCommerce → Instellingen → Algemeen.
   Onderstaande regel is alleen een vangnet als het veld toch verschijnt.
   -------------------------------------------------------------------------- */

.woocommerce-cart .coupon {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Mobiel
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Producttabel: kopregel weg, elke productrij een eigen blok.
     De rij wordt een grid met vaste plekken, zodat aantal, prijs en
     prullenbak niet meer afhangen van hoe het thema de cellen stapelt. */
  .woocommerce-cart table.shop_table thead {
    display: none;
  }

  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table tbody {
    display: block;
    width: 100%;
  }

  .woocommerce-cart table.shop_table tbody tr.cart_item {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    grid-template-areas:
      "thumb naam    verwijder"
      "thumb aantal  prijs";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    width: 100%;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--vz-lijn);
  }

  /* Blocksy bouwt op mobiel een eigen blok binnen td.product-name, met een
     tweede aantalvak, een maalteken, de prijs en een prullenbak erin. Wij
     plaatsen die onderdelen zelf via het grid hieronder, dus dat blok gaat uit.
     Zonder deze regel zie je alles dubbel. */
  .woocommerce-cart table.shop_table .product-mobile-actions {
    display: none !important;
  }

  /* Alleen de vijf cellen die we plaatsen krijgen een display-waarde. */
  .woocommerce-cart table.shop_table tbody tr.cart_item > td.product-thumbnail,
  .woocommerce-cart table.shop_table tbody tr.cart_item > td.product-name,
  .woocommerce-cart table.shop_table tbody tr.cart_item > td.product-quantity,
  .woocommerce-cart table.shop_table tbody tr.cart_item > td.product-subtotal,
  .woocommerce-cart table.shop_table tbody tr.cart_item > td.product-remove {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    text-align: left;
  }

  /* Kolomnamen die het thema via data-title herhaalt */
  .woocommerce-cart table.shop_table tbody tr.cart_item > td::before,
  .woocommerce-cart table.shop_table tbody tr.cart_item > td::after {
    content: none !important;
    display: none !important;
  }

  .woocommerce-cart table.shop_table td.product-thumbnail {
    grid-area: thumb;
  }

  .woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 68px;
    height: auto;
  }

  .woocommerce-cart table.shop_table td.product-name {
    grid-area: naam;
    align-self: end;
  }

  .woocommerce-cart table.shop_table td.product-name a {
    font-size: .9375rem;
    line-height: 1.35;
  }

  /* De prijs per stuk staat in een aparte alinea die het thema op mobiel
     verbergt. In deze opmaak past hij juist wel onder de productnaam. */
  .woocommerce-cart table.shop_table td.product-name p.price {
    display: block !important;
    margin: 4px 0 0;
    color: var(--vz-grijs);
    font-size: .8125rem;
  }

  .woocommerce-cart table.shop_table td.product-quantity {
    grid-area: aantal;
    justify-self: start;
  }

  .woocommerce-cart table.shop_table td.product-subtotal {
    grid-area: prijs;
    justify-self: end;
    text-align: right;
    font-weight: 600;
    color: var(--vz-bosgroen);
  }

  .woocommerce-cart table.shop_table td.product-remove {
    grid-area: verwijder;
    justify-self: end;
    align-self: start;
  }

  .woocommerce-cart table.shop_table td.product-remove a.remove {
    width: 2.25rem;
    height: 2.25rem;
  }

  .woocommerce-cart table.shop_table td.actions {
    display: block;
    padding: 1rem 0 0;
    border: none;
  }

  /* Aantalvak iets compacter zodat het naast de prijs past */
  .woocommerce-cart .quantity {
    height: 2.5rem;
  }

  .woocommerce-cart .quantity .ct-increase,
  .woocommerce-cart .quantity .ct-decrease {
    flex: 0 0 2.25rem !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    height: 2.5rem !important;
  }

  .woocommerce-cart .quantity input.qty {
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 2.5rem;
  }

  /* Totalenblok: het thema herhaalt hier de kolomnaam via data-title,
     wat "Subtotaal: Subtotaal € 21,93" oplevert. */
  .woocommerce-cart .cart_totals table.shop_table td::before,
  .woocommerce-cart .cart_totals table.shop_table td::after {
    content: none !important;
    display: none !important;
  }

  .woocommerce-cart .cart_totals {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .woocommerce-cart button[name="update_cart"],
  .woocommerce-cart input[name="update_cart"] {
    width: 100%;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    height: 3.5rem !important;
    font-size: 1.0625rem !important;
  }
}/* End custom CSS */