/*
 * Bundel 1, 1b (O-1011-06): navy eruit, champagne alleen op de koopknop.
 * Laadt alleen met de schakelaar vs_b1_kleur aan (FundamentModule). Werkt met en zonder vs_d_tokens:
 * elke waarde is var(--vs-c-*, <huisstijlwaarde>).
 *
 * Bron per token (WST-HUISSTIJL.md, aanvulling 28-09, R-0928-27):
 *   --vs-c-text #22201E      tekst, gekozen, autoriteit; vervangt navy (r.12 "Deep Espresso", r.38 "uitgefaseerd: navy")
 *   --vs-c-action #C5A880    alleen de primaire actieknop: de koopknop (r.17, r.52); tekst #22201E (7,2:1, r.21)
 *   --vs-c-gold-ink #7A5C34  goud als tekst en dunne lijn op licht (aanvulling: "goud als tekst ... alleen #7A5C34")
 *   --vs-c-line-strong #968C7C  rand van invoer en chip
 *   --vs-c-surface-2 #EFECE6  band, zacht vlak
 *   --vs-c-line #D8D2C7      lichte lijn, ook tekst op de donkere footer (code-chrome.css r.146-148)
 *   tweede knop: wit, 1 px #22201E, tekst #22201E (aanvulling, tabel "tweede knop")
 *
 * Specificiteit html body ... en !important: dit is een laag over bestaande regels, waarvan een deel zelf
 * !important is. De volgorde in de CSS-bundel maakt zo niet uit. Geen eigen --vs-c-* (KleurTokensTest).
 */

/* ---- 1. Los navy (#061B3D) naar Espresso ---- */

/* Afrekenen (checkout-classic.css r.13, r.908; delivery-choice.css r.5): --vs-ch-dark bestaat daar niet,
   dus de terugval navy gold altijd. */
html body.vs-code-checkout { --vs-cko-dark: var(--vs-c-text, #22201E) !important; }
html body .vs-del { --vs-del-dark: var(--vs-c-text, #22201E) !important; }
/* De klasse woocommerce-checkout staat op afrekenen op het formulier, op de betaalpagina (order-pay) op body zelf. */
html body .woocommerce-checkout #order_review,
html body.woocommerce-checkout #order_review { box-shadow: 0 16px 44px rgba(var(--vs-c-text-rgb, 34, 32, 30), .08) !important; }

/* Betaalpagina (order-pay.css r.5, r.41, r.78, r.119). */
html body.woocommerce-order-pay { --vs-op-navy: var(--vs-c-text, #22201E) !important; }
html body.woocommerce-order-pay table.shop_table,
html body.woocommerce-order-pay #payment { box-shadow: 0 14px 40px rgba(var(--vs-c-text-rgb, 34, 32, 30), .07) !important; }
html body.woocommerce-order-pay #payment li.wc_payment_method > label { color: var(--vs-c-text, #22201E) !important; }

/* Betaalknop "Betaal voor bestelling" op order-pay (B-1002-336): champagne met Espresso-tekst, gelijk aan
   "Bestellen en betalen" op afrekenen (checkout-classic.css r.607-627, --vs-cko-cta). order-pay.css r.133-148
   zet hier --vs-op-navy met wit. De klasse woocommerce-order-pay staat op body. */
html body.woocommerce-order-pay #place_order,
html body.woocommerce-order-pay .woocommerce #payment button.button.alt {
    background: var(--vs-c-action, #C5A880) !important;
    color: var(--vs-c-text, #22201E) !important;
    -webkit-text-fill-color: var(--vs-c-text, #22201E) !important;
}
html body.woocommerce-order-pay #place_order:hover,
html body.woocommerce-order-pay #place_order:focus-visible,
html body.woocommerce-order-pay .woocommerce #payment button.button.alt:hover,
html body.woocommerce-order-pay .woocommerce #payment button.button.alt:focus-visible {
    background: var(--vs-c-action-hover, #AE9066) !important;
    color: var(--vs-c-text, #22201E) !important;
    -webkit-text-fill-color: var(--vs-c-text, #22201E) !important;
    filter: none !important;
}
html body.woocommerce-order-pay #place_order:focus-visible,
html body.woocommerce-order-pay .woocommerce #payment button.button.alt:focus-visible { outline: 2px solid var(--vs-c-text, #22201E) !important; outline-offset: 2px !important; }

/* Code-pagina's (CriticalCssModule r.527, page-code.css r.5): koppen op o.a. /offerte-aanvragen/. */
html body .vs-cpage { --vs-cp-dark: var(--vs-c-text, #22201E) !important; }

/* Algemene voorwaarden (AlgemeneVoorwaardenPage r.387, inline <style>). */
html body .vs-avpage { --brand-dark: var(--vs-c-text, #22201E) !important; }

/* Versailles-hub (templates/category-hubs/versailles.html r.4). --navy2 is alleen de hover van de hoofdknop. */
html body .vershub { --navy: var(--vs-c-text, #22201E) !important; --navy2: var(--vs-c-footer, #2E2823) !important; }
/* Het vinkje in de lijst (r.85) staat als data-URI met %23061B3D: dezelfde tekening in Espresso. */
html body .vershub ul.waarom li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%2322201E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }

/* ---- 2. Champagne alleen op de koopknop ---- */

/* De koopknop: champagne met Espresso-tekst (7,2:1). Op de PDP zonder ontwerp D stond hier wit (2,26:1,
   calculator.css r.343-345). */
/* calculator.css r.341-365 heeft (0,3,1) en wit; hier (0,4,3). De groene "toegevoegd"-feedback (.vs-added,
   sidecart.css r.174) is een statuskleur en blijft. */
html body form.cart .single_add_to_cart_button:not(.vs-added),
html body form.cart.vs-calc-active .single_add_to_cart_button:not(.vs-added),
html body .vs-cpdp__mbar-btn--primary {
    background-color: var(--vs-c-action, #C5A880) !important;
    color: var(--vs-c-text, #22201E) !important;
    -webkit-text-fill-color: var(--vs-c-text, #22201E) !important;
}
html body form.cart .single_add_to_cart_button:not(.vs-added):hover,
html body form.cart.vs-calc-active .single_add_to_cart_button:not(.vs-added):hover,
html body form.cart.vs-calc-active .single_add_to_cart_button:not(.vs-added):focus-visible,
html body .vs-cpdp__mbar-btn--primary:hover {
    background: var(--vs-c-action-hover, #AE9066) !important;
    background-color: var(--vs-c-action-hover, #AE9066) !important;
    color: var(--vs-c-text, #22201E) !important;
    -webkit-text-fill-color: var(--vs-c-text, #22201E) !important;
}

/* Tweede knop: wit, 1 px Espresso, Espresso-tekst. Afspraak en offerte in de header, de advies-, AR- en
   home-knoppen, en de accepteerknop van de cookiemelding. */
html body .vs-ch .vs-ch__appt,
html body .vs-ch .vs-ch__offerte,
html body .vs-advies__cta,
html body .vs-cpdp--elite .vs-advies__cta,
html body .vs-cpdp__ar-cta,
html body .vs-sec__btn--navy,
html body .vs-consent__btn--accept {
    background: #fff !important;
    color: var(--vs-c-text, #22201E) !important;
    box-shadow: inset 0 0 0 1px var(--vs-c-text, #22201E) !important;
    filter: none !important;
}
html body .vs-ch .vs-ch__appt:hover,
html body .vs-ch .vs-ch__offerte:hover,
html body .vs-advies__cta:hover,
html body .vs-advies__cta:focus-visible,
html body .vs-cpdp--elite .vs-advies__cta:hover,
html body .vs-cpdp__ar-cta:hover,
html body .vs-sec__btn--navy:hover,
html body .vs-consent__btn--accept:hover { background: var(--vs-c-surface-2, #EFECE6) !important; }

/* Zichtbare focus (WCAG 2.4.7): de hover-kleur alleen (wit naar #EFECE6) is te zwak als focusaanwijzing. */
html body .vs-ch .vs-ch__appt:focus-visible,
html body .vs-ch .vs-ch__offerte:focus-visible,
html body .vs-advies__cta:focus-visible,
html body .vs-cpdp__ar-cta:focus-visible,
html body .vs-sec__btn--navy:focus-visible,
html body .vs-product-card__sample:focus-visible { outline: 2px solid var(--vs-c-text, #22201E) !important; outline-offset: 2px !important; }
html body .vs-consent__btn--accept:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

/* De headervariabelen voor accent (code-chrome.css r.5 en r.7): iconen en accenten goud als lijn. De vlakken
   die --vs-ch-gold gebruiken (afspraak, offerte, tellers) staan hierboven en hieronder apart. */
html body .vs-ch,
html body .vs-cf { --vs-ch-green: var(--vs-c-gold-ink, #7A5C34) !important; --vs-ch-gold-h: var(--vs-c-gold-ink, #7A5C34) !important; }

/* Iconen en hover in header en footer: goud als tekst op licht. */
html body .vs-ch .vs-ch__usps .vs-ch__ic,
html body .vs-ch .vs-ch__phone:not(.vs-ch__phone--wa) .vs-ch__ic,
html body .vs-cf .vs-cf__usp .vs-ch__ic { color: var(--vs-c-gold-ink, #7A5C34) !important; }
html body .vs-ch .vs-ch__toplinks a:hover,
html body .vs-ch .vs-ch__menu a:hover,
html body .vs-ch .vs-ch__menu .current-menu-item > a { color: var(--vs-c-gold-ink, #7A5C34) !important; }

/* Tellers in de header: Espresso-vlak met witte tekst. */
html body .vs-ch .vs-ch__badge {
    background: var(--vs-c-text, #22201E) !important;
    color: #fff !important;
}

/* Labels: zacht vlak met Espresso-tekst. */
html body .vs-product-card__label,
html body .vs-cpdp__ar-badge {
    background-color: var(--vs-c-surface-2, #EFECE6) !important;
    color: var(--vs-c-text, #22201E) !important;
}

/* Dunne lijnen en vinkjes: goud als lijn (#7A5C34). */
html body .vs-home__head-link { border-bottom-color: var(--vs-c-gold-ink, #7A5C34) !important; }
html body .vs-homed__deur-cta { border-bottom-color: var(--vs-c-gold-ink, #7A5C34) !important; }
html body .vs-article__block--garantie { border-left-color: var(--vs-c-gold-ink, #7A5C34) !important; }
html body .vs-sec__check { background: var(--vs-c-gold-ink, #7A5C34) !important; }
html body.vs-dcat .vs-subcat-tile__link { border-left-color: var(--vs-c-gold-ink, #7A5C34) !important; }

/* Gekozen kleurstaal: 2 px Espresso (aanvulling: "Gekozen ... 2 px rand #22201E"). */
html body .vs-product-card__swatch.is-current {
    border-color: var(--vs-c-text, #22201E) !important;
    box-shadow: 0 0 0 1px var(--vs-c-text, #22201E) !important;
}

/* Knop "Gratis staal" op de kaart en de tegelknop: rand van een chip; hover zacht vlak. */
html body .vs-product-card__sample { border-color: var(--vs-c-line-strong, #968C7C) !important; }
html body .vs-product-card__sample:hover,
html body .vs-product-card__sample:focus-visible {
    border-color: var(--vs-c-text, #22201E) !important;
    background: var(--vs-c-surface-2, #EFECE6) !important;
    box-shadow: none !important;
}
html body .vs-subcat-tile__cta { border-color: var(--vs-c-text, #22201E) !important; }
html body .vs-subcat-tile__link:hover .vs-subcat-tile__cta { background: var(--vs-c-surface-2, #EFECE6) !important; }

/* WhatsApp-knop in de footer (donker vlak): lichte lijn en tekst, hover licht vlak. */
html body .vs-cf .vs-cf__wa,
html body .vs-cf .vs-cf__contact .vs-cf__wa {
    color: var(--vs-c-line, #D8D2C7) !important;
    border-color: var(--vs-c-line, #D8D2C7) !important;
}
html body .vs-cf .vs-cf__wa:hover,
html body .vs-cf .vs-cf__contact .vs-cf__wa:hover {
    background: var(--vs-c-line, #D8D2C7) !important;
    color: var(--vs-c-text, #22201E) !important;
}