/* =====================================================================
   WooCommerce-skin — cart / checkout / mijn account in thema-stijl
   (donker/goud). Overschrijft de WooCommerce-defaults (o.a. paarse knoppen
   en witte velden). Gebruikt de tokens uit global.css.
   ===================================================================== */

/* "In winkelwagen" e.d. dragen de thema-.btn-primary maar WooCommerce kleurt de tekst wit.
   Forceer de donkere tekst — zoals de "Luister het werk"-knop (var(--bg)). */
.woocommerce .btn-primary,
.woocommerce a.btn-primary,
.woocommerce button.btn-primary,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
  color: var(--bg) !important;
}

/* ---- Knoppen ---- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .checkout-button {
  background: var(--gold) !important;
  color: #1a1206 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-family: var(--sans) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 13px 24px !important;
  transition: opacity .2s, background .2s !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--gold-bright) !important;
  color: #1a1206 !important;
  opacity: 1 !important;
}
.woocommerce .button.disabled,
.woocommerce .button[disabled],
.woocommerce button.button:disabled {
  background: var(--gold) !important;
  opacity: .45 !important;
  cursor: not-allowed;
}

/* ---- Formuliervelden ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .quantity input.qty {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 12px !important;
  font-family: var(--sans) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .16) !important;
}
.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce-cart label {
  color: var(--ink-dim) !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important;
  line-height: 1.6 !important;
}
.woocommerce .select2-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.woocommerce .select2-results__option--highlighted {
  background: var(--gold) !important;
  color: #1a1206 !important;
}

/* ---- Tabellen (winkelwagen, totalen, besteloverzicht) ---- */
.woocommerce table.shop_table,
.woocommerce .cart_totals table,
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table_responsive {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce .cart_totals th,
.woocommerce .cart_totals td {
  border-top: 1px solid var(--line-soft) !important;
  color: var(--ink) !important;
}
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tfoot th {
  color: var(--ink) !important;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  color: var(--gold-bright) !important;
  font-family: var(--display) !important;
}

/* ---- Betaalmethoden ---- */
.woocommerce #payment,
.woocommerce-checkout #payment {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
.woocommerce #payment .payment_methods li,
.woocommerce #payment label {
  color: var(--ink) !important;
}
.woocommerce #payment div.payment_box {
  background: var(--bg) !important;
  color: var(--ink-dim) !important;
}
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--bg) !important; }

/* ---- Meldingen (info / success / error) ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce-cart .cart-empty.woocommerce-info {
  background: var(--bg-card) !important;
  border-top-color: var(--gold) !important;
  color: var(--ink-dim) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold) !important; }
.woocommerce-error {
  background: rgba(248, 113, 113, .10) !important;
  border-top-color: #f87171 !important;
  color: #fca5a5 !important;
}
.woocommerce-error::before { color: #f87171 !important; }

/* ---- Links + diversen ---- */
.woocommerce a:not(.button) { color: var(--gold); }
.woocommerce a:not(.button):hover { color: var(--gold-bright); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 { color: var(--ink); }
.woocommerce .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-order { color: var(--ink); }

/* ---- Checkout: het hele invulvlak (factuur + aanvullende info) als kaart ---- */
.woocommerce-checkout #customer_details {
  display: flow-root;            /* bevat de zwevende kolommen */
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 28px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  box-sizing: border-box;
}
.woocommerce-checkout #customer_details h3 {
  color: var(--gold-bright);
  font-family: var(--display);
  margin-top: 0;
}

/* Mijn account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { color: var(--ink-dim); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--gold-bright); }