/* VS — Code-productpagina (parallel, lijkt op de Elementor-PDP) */
.vs-cpdp {
    --vs-cpdp-text: #5c676d;
    --vs-cpdp-navy: #314696;
    --vs-cpdp-green: #62b959;
    --vs-cpdp-line: #e6e9ef;
    --vs-cpdp-soft: #f5f7fa;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vs-cpdp-text);
    font-size: 17px;
    line-height: 1.7;
}
.vs-cpdp * { box-sizing: border-box; }
.vs-cpdp__container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

/* Breadcrumb: in dezelfde 1500px-container als header/content (stond full-width) */
.vs-cpdp__breadcrumb {
    max-width: 1500px;
    margin: 0 auto;
    padding: 16px 20px 0;
    font-size: 13.5px;
    color: var(--vs-cpdp-text);
}
.vs-cpdp__breadcrumb a { color: inherit; text-decoration: none; }
.vs-cpdp__breadcrumb a:hover { color: var(--vs-cpdp-navy); }

/* ---- Bovenblok: 2 kolommen ---- */
.vs-cpdp__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
/* De kolommen staan EXPLICIET in het raster, want in de HTML staat het
   koopblok voorop (zie CodePdpModule::renderBody: de cross-sell besloeg 74%
   van <main> vóór onze eigen H1). Zonder deze twee regels zou de galerij naar
   rechts springen. */
.vs-cpdp__left { min-width: 0; grid-column: 1; grid-row: 1; }
.vs-cpdp__right { min-width: 0; grid-column: 2; grid-row: 1; }

.vs-cpdp__right .product_title,
.vs-cpdp__right h1 {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: #262c52;
    margin: 0 0 12px;
}
.vs-cpdp__divider {
    height: 1px;
    background: var(--vs-cpdp-line);
    margin: 16px 0;
}

/* Prijsgarantie-CTA */
.vs-cpdp__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    border: 1px solid var(--vs-cpdp-line);
    border-radius: 12px;
    background: var(--vs-cpdp-soft);
    text-decoration: none;
    color: var(--vs-cpdp-navy);
    transition: border-color .15s ease, background .15s ease;
}
.vs-cpdp__cta:hover { border-color: #c9d2e6; background: #eef1f8; }
.vs-cpdp__cta-ic {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--vs-cpdp-navy);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.vs-cpdp__cta-txt { display: flex; flex-direction: column; line-height: 1.3; }
.vs-cpdp__cta-txt strong { font-size: 15px; }
.vs-cpdp__cta-txt span { font-size: 14px; color: var(--vs-cpdp-text); }

/* Prijs */
.vs-cpdp__price { margin: 6px 0 10px; font-size: 17px; }
.vs-cpdp__price .price,
.vs-cpdp__price bdi { color: var(--vs-cpdp-navy); font-weight: 700; }
.vs-cpdp__price del,
.vs-cpdp__price del bdi { color: var(--vs-cpdp-text); font-weight: 400; opacity: .8; }
.vs-cpdp__price ins { text-decoration: none; }

/* A-merken-USP */
.vs-cpdp__usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    color: #262c52;
    font-weight: 600;
    font-size: 15px;
}
.vs-cpdp__usp-ic { color: var(--vs-cpdp-green); display: inline-flex; }

.vs-cpdp__excerpt { margin: 0 0 18px; }
.vs-cpdp__excerpt p { margin: 0 0 10px; }

/* ---- Kenmerkenregel (onder de titel) ----
   Hier stond het kaartje "In het kort": twaalf regels als tabel tussen de prijs
   en de koopknop, 518 px hoog op mobiel en 357 px op de laptop. Het duwde de
   knop onder de vouw en herhaalde de spectabel die verderop toch al staat.
   Nu drie of vier korte kenmerken op één regel, in de kleur van de lopende
   tekst: genoeg om een vloer op te kiezen, niet genoeg om de aandacht van het
   koopblok weg te trekken. Geen kader, geen kop, geen achtergrond. */
.vs-kenmerken {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: -4px 0 12px;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vs-cpdp-text);
}
.vs-kenmerken__item {
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    list-style: none;
}
.vs-kenmerken__item::before { content: none; }
/* De scheiding is een puntje ACHTER een kenmerk, niet ervóór. Met een ::before
   op het volgende kenmerk begint een afgebroken regel met een los bolletje, en
   dat leest als een opsommingsteken; zo blijft het puntje aan het eind van de
   vorige regel hangen, zoals in een broodkruimel. Het laatste kenmerk krijgt er
   geen. */
.vs-kenmerken__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    margin-left: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    transform: translateY(-3px);
}

/* Add-to-cart + groene knop */
.vs-cpdp__cart .single_add_to_cart_button,
.vs-cpdp__cart button.button {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background: var(--vs-cpdp-green);
    border: 0;
    border-radius: 8px;
    padding: 14px 24px;
    text-transform: none;
    cursor: pointer;
    transition: filter .15s ease;
}
.vs-cpdp__cart .single_add_to_cart_button:hover { filter: brightness(.95); }
.vs-cpdp__cart .quantity input { height: 48px; border-radius: 8px; border: 1px solid var(--vs-cpdp-line); }

/* ---- Contentblokken onder het bestelblok ----
   Heetten "tabs", maar het waren nooit tabbladen: WooCommerce' tabbalk werkt
   alleen met zijn eigen stylesheet en script, en die laden wij geen van beide.
   De blokken staan onder elkaar met een eigen kop, dus dat is nu ook wat de
   HTML zegt (de kale ankerlijst erboven is weg). */
.vs-cpdp__tabs { margin: 40px 0 0; }

.vs-cpdp__blok + .vs-cpdp__blok {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--vs-cpdp-line, #e2e5ea);
}

/* Bewust GEEN eigen opmaak voor de eerste kop in een blok: de beschrijving
   begint bij de meeste producten met een eigen h2 ("Zo staat Emerald brown bij u
   in de kamer"), en een selector op :first-child zou juist díe kop verkleinen.
   De koppen volgen de gewone artikelopmaak van het thema. */
.vs-cpdp__blok .woocommerce-Reviews-title {
    margin: 0 0 12px;
}

/* ---- Service-/contactband ---- */
.vs-cpdp__service { margin: 48px 0 0; }
.vs-cpdp__service-title {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #262c52;
    text-align: center;
    margin: 0 0 24px;
}
.vs-cpdp__service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 24px;
}
.vs-cpdp__service-card {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--vs-cpdp-line);
    border-radius: 14px;
    background: #fff;
}
.vs-cpdp__service-ic { color: var(--vs-cpdp-green); flex: 0 0 auto; }
.vs-cpdp__service-card strong { display: block; color: #262c52; font-size: 16px; }
.vs-cpdp__service-card span { font-size: 14.5px; }

.vs-cpdp__service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0 0 32px;
}
.vs-cpdp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: var(--vs-cpdp-navy);
    border-radius: 8px;
    padding: 12px 22px;
    text-decoration: none;
    transition: filter .15s ease;
}
.vs-cpdp__btn:hover { filter: brightness(1.08); }
.vs-cpdp__btn--ghost { background: #fff; color: var(--vs-cpdp-navy); border: 1.5px solid var(--vs-cpdp-navy); }
.vs-cpdp__btn--wa { background: #25d366; }

.vs-cpdp__contact {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 28px;
    border-radius: 16px;
    background: var(--vs-cpdp-soft);
}
.vs-cpdp__contact-body h3 {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #262c52;
    font-size: 20px;
    margin: 0 0 12px;
}
.vs-cpdp__contact-body h3 + .vs-cpdp__btn { margin-bottom: 24px; }
.vs-cpdp__contact-line { margin: 4px 0; }
.vs-cpdp__contact-line a { color: var(--vs-cpdp-navy); font-weight: 700; text-decoration: none; }
.vs-cpdp__contact-body .vs-cpdp__btn--wa { margin-top: 14px; }
.vs-cpdp__contact-photo { aspect-ratio: 1 / 1; }
.vs-cpdp__contact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
/* CLS: reserveer ruimte voor de galerij-hoofdfoto (vierkant) ongeacht laadmoment */
.vs-cpdp .vs-gallery__main,
.vs-cpdp .vs-gallery__main-btn { aspect-ratio: 1 / 1; }
.vs-cpdp .vs-gallery__main img,
.vs-cpdp .vs-gallery__main-img { width: 100%; height: 100%; object-fit: cover; }
/* Alle losse content-afbeeldingen krijgen hoogte-auto zonder sprong */
.vs-cpdp img { max-width: 100%; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .vs-cpdp__top { grid-template-columns: 1fr; gap: 28px; }
    /* Eén kolom: de galerij blijft bovenaan en het koopblok eronder, precies
       zoals het was. Alleen de HTML-volgorde is omgedraaid. */
    .vs-cpdp__left { grid-column: 1; grid-row: 1; }
    .vs-cpdp__right { grid-column: 1; grid-row: 2; }
    .vs-cpdp__contact { grid-template-columns: 1fr; }
    .vs-cpdp__contact-photo { order: -1; max-width: 260px; }
}
@media (max-width: 600px) {
    .vs-cpdp__container { padding: 18px 14px 36px; }
    .vs-cpdp__breadcrumb { padding: 12px 14px 0; }
    .vs-cpdp__right h1, .vs-cpdp__right .product_title { font-size: 24px; }
    .vs-cpdp__service-grid { grid-template-columns: 1fr; }
    .vs-cpdp__service-title { font-size: 22px; }
}

/* Vergelijk-pill weg op de PDP (Ricks besluit; vergelijken blijft op de kaarten) */
.vs-compare-pill--pdp { display: none !important; }

/* Pakketkorting op de PDP: dezelfde voortgangsbalk als in winkelwagen en
   zijlade (opmaak in pakket.css); hier alleen de ruimte boven de balk. */
.vs-pakket-wrap { margin: 18px 0 0; }
.vs-pakket-wrap .vs-pakketbar { margin: 0; }

/* Stapelregel onder het prijsblok: de MEGA Korting zit al in de prijs, de 5%
   pakketkorting kan er nog bij. Eigen regel over de volle breedte, want het
   prijsblok is een flex-rij met de prijs links en de kortingsbadge rechts. */
.vs-cpdp__stapel {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4a5263;
}

/* Voorwaarde bij plakplinten: alleen samen met een vloer (DLV 4e71558). */
.vs-plakplint-regel {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--vs-color-primary, #4056b4);
    background: #f7f8fb;
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4a5263;
}