/*
 * Codewoord PREMIUM LIGHT — Jasper-akkoord 2026-08-16, zie
 * 01-OPDRACHTEN/webshop/2026-08-16-PREMIUM-LIGHT-designsysteem-implementeren.md
 * en 03-GEDEELD/BESLISSINGEN.md. Eerste toepassing: de code-productpagina
 * (galerij/rekenmodule/specs/knoppen), vervangt de donkere navy/groen-tint.
 *
 * Werkwijze: de bestaande component-stylesheets (code-pdp.css, calculator.css,
 * product-gallery.css, product-specs.css, samples.css) declareren hun kleuren
 * al als lokale CSS-variabelen op hun eigen containerklasse. Dit bestand
 * herdefinieert die variabelen binnen `body.vs-code-pdp` (de body-class van de
 * code-PDP, geldt dus alleen op de productpagina) — geen kopie van elke regel,
 * de bestaande component-CSS leest zijn eigen tokens gewoon opnieuw in.
 * Uitrol naar de rest van de site is een latere, aparte stap (niet hier).
 */

body.vs-code-pdp {
    --vs-pl-creme: #FAF8F3;
    --vs-pl-ink: #1A1712;
    --vs-pl-white: #FFFFFF;
    --vs-pl-line: #E7E2D8;
    --vs-pl-gold: #D4A056;
    --vs-pl-gold-hover: #BE8C43;
    --vs-pl-dark: #1A1712;
}

/* ---- Paginaondergrond: warme crème i.p.v. kil wit ---- */
body.vs-code-pdp .vs-cpdp {
    background: var(--vs-pl-creme);
}

/* ---- code-pdp.css leest deze vier tokens al site-breed op .vs-cpdp;
   hier alleen de waarden vervangen voor de Premium Light-look. ---- */
body.vs-code-pdp .vs-cpdp {
    --vs-cpdp-text: var(--vs-pl-ink);
    --vs-cpdp-navy: var(--vs-pl-ink);
    --vs-cpdp-green: var(--vs-pl-gold);
    --vs-cpdp-line: var(--vs-pl-line);
    --vs-cpdp-soft: var(--vs-pl-white);
}

/* Native WooCommerce add-to-cart-knop: gedempt goud + donkere tekst
   (was wit-op-groen via --vs-cpdp-green, die nu al goud is — alleen de
   tekstkleur is hier nog hardcoded wit en moet expliciet donker). */
body.vs-code-pdp .vs-cpdp__cart .single_add_to_cart_button,
body.vs-code-pdp .vs-cpdp__cart button.button {
    color: var(--vs-pl-ink) !important;
}
body.vs-code-pdp .vs-cpdp__cart .single_add_to_cart_button:hover {
    background: var(--vs-pl-gold-hover) !important;
    filter: none !important;
}

/* ---- Galerij: witte vlakken met greige rand (kleurechtheid) ---- */
body.vs-code-pdp .vs-gallery {
    --vs-gallery-active: var(--vs-pl-gold);
    --vs-gallery-border: var(--vs-pl-line);
}
body.vs-code-pdp .vs-gallery__main {
    border: 1px solid var(--vs-pl-line) !important;
}

/* ---- Rekenmodule: navy/groen → ink/goud, primaire knop donkere tekst ---- */
body.vs-code-pdp .vs-calculator {
    --vs-calc-accent: var(--vs-pl-ink);
    --vs-calc-accent-soft: var(--vs-pl-white);
    --vs-calc-accent-soft-border: var(--vs-pl-line);
    --vs-calc-cart: var(--vs-pl-gold);
    --vs-calc-cart-hover: var(--vs-pl-gold-hover);
    --vs-calc-muted: var(--vs-pl-ink);
    --vs-calc-text: var(--vs-pl-ink);
}
body.vs-code-pdp .vs-calculator .vs-calculator__stepper,
body.vs-code-pdp .vs-calculator input.vs-calculator__input,
body.vs-code-pdp .vs-calculator .vs-calculator__input {
    border: 1px solid var(--vs-pl-line) !important;
}
/* "In winkelwagen" (primair, goud) → donkere tekst i.p.v. wit;
   "Gratis staal aanvragen" (secundair) → omlijnd goud i.p.v. gevuld navy-soft. */
body.vs-code-pdp .vs-calculator a.vs-button--primary,
body.vs-code-pdp .vs-calculator button.vs-button--primary,
body.vs-code-pdp .vs-calculator .vs-button--primary {
    color: var(--vs-pl-ink) !important;
}
body.vs-code-pdp .vs-calculator a.vs-button--secondary,
body.vs-code-pdp .vs-calculator button.vs-button--secondary,
body.vs-code-pdp .vs-calculator .vs-button--secondary {
    color: var(--vs-pl-gold-hover) !important;
    background: var(--vs-pl-white) !important;
    border: 1.5px solid var(--vs-pl-gold) !important;
}
body.vs-code-pdp .vs-calculator a.vs-button--secondary:hover,
body.vs-code-pdp .vs-calculator button.vs-button--secondary:hover,
body.vs-code-pdp .vs-calculator .vs-button--secondary:hover {
    background: #FBF3E7 !important;
}

/* ---- Sticky koopbalk (mobiel/desktop-hoek): zelfde ink/goud-vertaling.
   Los van .vs-cpdp getokend (position:fixed, niet noodzakelijk een
   afstammeling), maar wel alleen binnen de code-PDP. ---- */
body.vs-code-pdp .vs-sticky-cta {
    border-top-color: var(--vs-pl-line);
    box-shadow: 0 -6px 24px rgba(26, 23, 18, 0.12);
}
body.vs-code-pdp .vs-sticky-cta__price {
    color: var(--vs-pl-ink);
}
body.vs-code-pdp .vs-sticky-cta .vs-button--primary {
    color: var(--vs-pl-ink);
    background: var(--vs-pl-gold);
}
body.vs-code-pdp .vs-sticky-cta .vs-button--primary:hover {
    background: var(--vs-pl-gold-hover);
}
body.vs-code-pdp .vs-sticky-cta .vs-button--secondary {
    color: var(--vs-pl-gold-hover);
    background: var(--vs-pl-white);
    border: 1.5px solid var(--vs-pl-gold);
}
@media (min-width: 1025px) {
    body.vs-code-pdp .vs-sticky-cta {
        border-color: var(--vs-pl-line);
    }
}

/* ---- Specificatietabel: zuiver wit, greige rand, geen grijze streping
   (streping is hier ruis, geen kleurechtheids-doel zoals bij de galerij). ---- */
body.vs-code-pdp .vs-specs {
    --vs-specs-border: var(--vs-pl-line);
    --vs-specs-stripe: var(--vs-pl-white);
    --vs-specs-key: var(--vs-pl-ink);
    --vs-specs-val: var(--vs-pl-ink);
}

/* ---- Proefstaal-CTA (binnen de code-PDP): volgt dezelfde ink/goud-lijn. ---- */
body.vs-code-pdp .vs-cpdp .vs-sample-cta {
    --vs-s-accent: var(--vs-pl-ink);
    background: var(--vs-pl-white) !important;
    border-color: var(--vs-pl-line) !important;
}
body.vs-code-pdp .vs-cpdp .vs-sample-cta__add {
    background: var(--vs-pl-gold) !important;
    color: var(--vs-pl-ink) !important;
}

/* ---- "Praktijktip van de vakman" — bewuste dark-block als autoriteits-break. ---- */
.vs-cpdp__tip {
    margin: 40px 0 0;
    padding: 30px 32px;
    background: var(--vs-pl-dark, #1A1712);
    border-radius: 14px;
}
.vs-cpdp__tip-label {
    display: block;
    margin: 0 0 10px;
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vs-pl-gold, #D4A056);
}
.vs-cpdp__tip-text {
    margin: 0;
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: #fff;
}
@media (max-width: 600px) {
    .vs-cpdp__tip { padding: 22px 20px; }
    .vs-cpdp__tip-text { font-size: 15.5px; }
}