/* Huisstijl over winkelwagen, checkout en account heen.
 *
 * De checkout is een CartFlows-stap (post type cartflows_step, canvas-
 * template) met de layout "Instant Checkout": twee kolommen, eigen kop, geen
 * menu. Die layout stuurt zijn kleuren via eigen variabelen die per stap in
 * het CartFlows-ontwerpscherm staan, en daar stond het oudroze van het
 * Beauty-template in: #f6edf0 voor de linkerkolom en #d4a6b6 voor knoppen en
 * accenten. Dat loopt volledig buiten de Global Colors van Astra om.
 *
 * Op de specificiteit letten, niet op de vololgorde. Gemeten op de live
 * checkout zet CartFlows ze zo:
 *
 *   :root                                                          (0,1,0)
 *   .wcf-embed-checkout-form                                        (0,1,0)
 *   body .wcf-embed-checkout-form.wcf-embed-...-instant-checkout    (0,2,1)
 *
 * Onze CSS laadt later, maar een lagere specificiteit verliest dan alsnog —
 * daar ging de vorige poging op stuk. Vandaar hieronder (0,1,1), (0,2,2) en
 * (0,3,2): telkens een tik hoger dan wat CartFlows zelf gebruikt.
 */

/* ── CartFlows, globaal ──────────────────────────────────────── */
html:root{
  --wcf-gcp-primary-color:#8A6835;
  --wcf-gcp-secondary-color:#181830;
  --wcf-gcp-text-color:#181830;      /* stond op grijs #5d5b5b */
  --wcf-gcp-accent-color:#8A6835;
}

/* ── CartFlows, de checkoutstap zelf ─────────────────────────── */
html body .wcf-embed-checkout-form.wcf-embed-checkout-form,
html body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout.wcf-embed-checkout-form-instant-checkout{
  --wcf-primary-color:#8A6835;
  --wcf-link-color:#8A6835;
  --wcf-heading-color:#181830;       /* stond op zuiver zwart */
  --wcf-text-color:#181830;

  /* de twee kolommen: links warm papier in plaats van oudroze */
  --wcf-ic-left-column-bg-color:#FAF8F4;
  --wcf-ic-right-column-bg-color:#FFFFFF;
  --wcf-ic-section-border-color:rgba(24,24,48,.18);
  --wcf-ic-button-hover-color:#6E5329;
  --wcf-ic-shipping-shadow-color:rgba(24,24,48,.10);

  /* knoppen */
  --wcf-btn-bg-color:#8A6835;
  --wcf-btn-bg-hover-color:#6E5329;  /* stond op zwart */
  --wcf-btn-text-color:#FFFFFF;
  --wcf-btn-hover-text-color:#FFFFFF;

  /* invoervelden */
  --wcf-field-bg-color:#FFFFFF;
  --wcf-field-border-color:rgba(24,24,48,.18);
  --wcf-field-text-color:#181830;    /* stond op grijs #5d5b5b */
  --wcf-field-label-color:#181830;
  --wcf-field-error-color:#B3261E;
  --wcf-field-error-border-color:#B3261E;
  --wcf-field-error-label-color:#B3261E;

  /* betaalmethodes */
  --wcf-payment-section-bg-color:#FFFFFF;
  --wcf-payment-section-label-color:#181830;
  --wcf-payment-section-desc-bg-color:#F1EDE5;
  --wcf-payment-section-desc-text-color:#181830;
}

/* Koppen in de schreefletter van de site, net als elders. */
html body .wcf-embed-checkout-form h2,
html body .wcf-embed-checkout-form h3,
html body .wcf-embed-checkout-form .wcf-custom-heading{
  font-family:"KBTS Cormorant", Garamond, Georgia, serif;
  font-weight:400;
  color:#181830;
}

/* De aankruisrondjes stonden op het roze van het thema. */
.wcf-embed-checkout-form input[type="radio"],
.wcf-embed-checkout-form input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"]{
  accent-color:#8A6835;
}

/* Het aantal-bolletje bij een regel in het besteloverzicht. */
.wcf-embed-checkout-form .product-quantity,
.wcf-embed-checkout-form .wcf-qty-bubble,
.woocommerce-checkout-review-order-table .product-quantity{
  background-color:#8A6835;
  color:#fff;
}

html:root{
  --kbtsc-goud:#8A6835;                 /* wit erop haalt 5,1:1        */
  --kbtsc-goud-diep:#6E5329;
  --kbtsc-navy:#181830;
  --kbtsc-tekst:#5E6376;
  --kbtsc-lijn:rgba(24,24,48,.18);
  --kbtsc-licht:#F1EDE5;
  --kbtsc-papier:#FAF8F4;
}

/* ── koppen en tekst ─────────────────────────────────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-cart .cart_totals h2,
.woocommerce-account h2, .woocommerce-account h3{
  color:var(--kbtsc-navy);
  font-family:"KBTS Cormorant", Garamond, Georgia, serif;
  font-weight:400;
}
.woocommerce form .form-row label,
.woocommerce-checkout label{ color:var(--kbtsc-navy); }
.woocommerce form .form-row .description,
.woocommerce-checkout .description{ color:var(--kbtsc-tekst); }

/* ── invoervelden ────────────────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection{
  border:1px solid var(--kbtsc-lijn);
  border-radius:3px;
  color:var(--kbtsc-navy);
  background:#fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection{
  border-color:var(--kbtsc-goud);
  outline:2px solid rgba(138,104,53,.22);
  outline-offset:1px;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text{
  border-color:#B3261E;
}

/* ── knoppen ─────────────────────────────────────────────────── */
.woocommerce #place_order,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .cart input.button,
.woocommerce .cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-account button.button,
.wc-block-components-checkout-place-order-button{
  background-color:var(--kbtsc-goud);
  border-color:var(--kbtsc-goud);
  color:#fff;
  letter-spacing:.06em;
}
.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background-color:var(--kbtsc-goud-diep);
  border-color:var(--kbtsc-goud-diep);
  color:#fff;
}

/* ── overzicht van de bestelling ─────────────────────────────── */
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table{
  border-color:var(--kbtsc-lijn);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color:var(--kbtsc-lijn);
  color:var(--kbtsc-navy);
}
.woocommerce table.shop_table thead th{
  background:var(--kbtsc-papier);
  color:var(--kbtsc-navy);
}
.woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce .cart_totals .order-total .amount{
  color:var(--kbtsc-navy);
  font-variant-numeric:tabular-nums;
}
.woocommerce .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; }

/* ── betaalmethodes ──────────────────────────────────────────── */
.woocommerce-checkout #payment{
  background:var(--kbtsc-papier);
  border:1px solid var(--kbtsc-lijn);
  border-radius:4px;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom-color:var(--kbtsc-lijn);
}
.woocommerce-checkout #payment ul.payment_methods li label{
  color:var(--kbtsc-navy);
}
/* De uitleg onder een gekozen methode stond standaard op geelbeige. */
.woocommerce-checkout #payment div.payment_box{
  background:var(--kbtsc-licht);
  color:var(--kbtsc-navy);
}
.woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:var(--kbtsc-licht);
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  accent-color:var(--kbtsc-goud);
}

/* ── meldingen en kortingscode ───────────────────────────────── */
.woocommerce-info, .woocommerce-message{
  background:var(--kbtsc-licht);
  border-top-color:var(--kbtsc-goud);
  color:var(--kbtsc-navy);
}
.woocommerce-info::before, .woocommerce-message::before{ color:var(--kbtsc-goud); }
.woocommerce-error{ border-top-color:#B3261E; }
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce a{ color:var(--kbtsc-goud); }
.woocommerce a:hover{ color:var(--kbtsc-goud-diep); }

/* ── de leverweek uit deze plugin ────────────────────────────── */
.kbts-levering h3{ color:var(--kbtsc-navy); }
.kbts-levering .kbts-ophalen{ color:var(--kbtsc-tekst); font-size:.9rem; }

/* bedrijfsnaam is de eerste regel: iets meer lucht eronder */
#billing_company_field{ margin-bottom:14px; }

/* ── randen die CartFlows hard in zijn CSS heeft staan ───────────
 *
 * Deze drie regels zetten #d4a6b6 rechtstreeks, zonder variabele, dus de
 * kleuren hierboven raken ze niet. Het gaat onder meer om de rand van de
 * bestelknop. Gemeten specificiteit van de plugin: (1,4,0), (0,4,2) en
 * (0,4,1); met html body ervoor komen we daar telkens net boven.
 */
html body .wcf-embed-checkout-form .woocommerce form #payment button,
html body .wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row button,
html body .wcf-embed-checkout-form .woocommerce #order_review .wcf-custom-coupon-field .wcf-submit-coupon.button,
html body .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button,
html body .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button{
  border-color:#8A6835;
}

/* ── de kop van de checkout ──────────────────────────────────────
 *
 * Gemeten met getComputedStyle op de live pagina: de strook met de
 * stappenbalk liet rgb(248,246,248) zien — een paarsroze dat Elementor als
 * pagina-achtergrond op deze stap heeft staan. De balk zelf en de wrappers
 * eromheen zijn allemaal doorzichtig, dus je keek dwars door tot de body.
 *
 * De stappenbalk hoort bij de kop, niet bij het formulier: hij staat nu op
 * hetzelfde wit als de logobalk erboven, en de kleur begint pas bij de
 * kolommen.
 */
html body .wcf-embed-checkout-form .kbts-flow-kop-only{
  background:#fff;
}
html body.cartflows-instant-checkout.cartflows-instant-checkout.cartflows-instant-checkout{
  background-color:#fff;
}