/* ==========================================================
   Schryft Button Varianten
   ==========================================================
   Gebruik: voeg de class toe in Elementor → Advanced → CSS Classes
   op de Button widget (niet op de sectie).

   .btn-primair      Terracotta gevuld, witte tekst
   .btn-secundair    Terracotta outline, transparante achtergrond
   .btn-groen        Groen gevuld, alleen voor Zuidhorn / duurzaamheid
   .btn-link         Tekstlink met onderlijn, geen vulling

   De class komt op de widget wrapper, vandaar de selector
   .btn-primair .elementor-button  etc.
   ========================================================== */


/* ----------------------------------------------------------
   Gedeelde basis (typografie, radius, padding)
   ---------------------------------------------------------- */

.btn-primair .elementor-button,
.btn-secundair .elementor-button,
.btn-groen .elementor-button,
.btn-link .elementor-button,
.e-loop__load-more .elementor-button,
.e-apply-coupon,
.checkout-button.button.alt.wc-forward,
button#place_order.button.alt {
  font-family: Karla, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  border-style: solid !important;
  border-width: 1px !important;
  padding: 15px 30px !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* Mobiel: klikhoogte 52 px */
@media (max-width: 767px) {
  .btn-primair .elementor-button,
  .btn-secundair .elementor-button,
  .btn-groen .elementor-button,
  .btn-link .elementor-button,
  .e-loop__load-more .elementor-button,
  .e-apply-coupon,
  .checkout-button.button.alt.wc-forward,
  button#place_order.button.alt {
    padding: 17px 30px !important;
  }
}


/* ----------------------------------------------------------
   Focus (alle varianten)
   ---------------------------------------------------------- */

.btn-primair .elementor-button:focus-visible,
.btn-secundair .elementor-button:focus-visible,
.btn-groen .elementor-button:focus-visible,
.btn-link .elementor-button:focus-visible,
.e-loop__load-more .elementor-button:focus-visible,
.e-apply-coupon:focus-visible,
.checkout-button.button.alt.wc-forward:focus-visible,
button#place_order.button.alt:focus-visible {
  outline: 2px solid #557571 !important;
  outline-offset: 2px !important;
}


/* ----------------------------------------------------------
   1. Primair – terracotta gevuld
   ---------------------------------------------------------- */

.btn-primair .elementor-button,
.checkout-button.button.alt.wc-forward,
button#place_order.button.alt {
  background-color: #A3543D !important;
  border-color: #A3543D !important;
  color: #FFFFFF !important;
}

.btn-primair .elementor-button:hover,
.btn-primair .elementor-button:active,
.checkout-button.button.alt.wc-forward:hover,
.checkout-button.button.alt.wc-forward:active,
button#place_order.button.alt:hover,
button#place_order.button.alt:active {
  background-color: #8A452F !important;
  border-color: #8A452F !important;
  color: #FFFFFF !important;
}


/* ----------------------------------------------------------
   2. Secundair – outline terracotta
   ---------------------------------------------------------- */

.btn-secundair .elementor-button,
.e-loop__load-more .elementor-button,
.e-apply-coupon {
  background-color: transparent !important;
  border-color: #A3543D !important;
  color: #A3543D !important;
}

.btn-secundair .elementor-button:hover,
.btn-secundair .elementor-button:active,
.e-loop__load-more .elementor-button:hover,
.e-loop__load-more .elementor-button:active,
.e-apply-coupon:hover,
.e-apply-coupon:active {
  background-color: #A3543D !important;
  border-color: #A3543D !important;
  color: #FFFFFF !important;
}


/* ----------------------------------------------------------
   3. Groen – Zuidhorn en duurzaamheid
   ---------------------------------------------------------- */

.btn-groen .elementor-button {
  background-color: #557571 !important;
  border-color: #557571 !important;
  color: #FFFFFF !important;
}

.btn-groen .elementor-button:hover,
.btn-groen .elementor-button:active {
  background-color: #48645F !important;
  border-color: #48645F !important;
  color: #FFFFFF !important;
}


/* ----------------------------------------------------------
   4. Tekstlink – onderlijn, geen vulling
   ---------------------------------------------------------- */

.btn-link .elementor-button {
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom-color: #C9A697 !important;
  border-radius: 0 !important;
  color: #A3543D !important;
  padding: 0 0 3px 0 !important;
}

.btn-link .elementor-button:hover,
.btn-link .elementor-button:active {
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom-color: #A3543D !important;
  color: #A3543D !important;
}

/* Link variant: geen schaduw, geen knopvorm */
.btn-link .elementor-button:focus-visible {
  outline-offset: 4px !important;
}


/* ==========================================================
   WooCommerce Cart styling
   ========================================================== */

/* Cart tabel: border-collapse separate zodat radius op rijen werkt */
.woocommerce-cart-form table.shop_table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
  background: transparent !important;
}

/* Cart item rij */
.woocommerce-cart-form__cart-item.cart_item td {
  background: #FFFFFF !important;
  border-top: 1px solid #DCD3CB !important;
  border-bottom: 1px solid #DCD3CB !important;
  padding: 20px !important;
}

.woocommerce-cart-form__cart-item.cart_item td:first-child {
  border-left: 1px solid #DCD3CB !important;
  border-radius: 12px 0 0 12px !important;
}

.woocommerce-cart-form__cart-item.cart_item td:last-child {
  border-right: 1px solid #DCD3CB !important;
  border-radius: 0 12px 12px 0 !important;
}

/* Cart productafbeelding */
.woocommerce-cart-form__cart-item .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* Cart tabelkoppen verbergen */
.woocommerce-cart-form table.shop_table thead {
  display: none !important;
}