/* 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: 'Lato', 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: 1440px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

/* Kruimelpad boven het productblok */
.vs-cpdp__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    font-size: 13px;
    color: #8b949c;
}

.vs-cpdp__crumbs a {
    color: #5c676d;
    text-decoration: none;
}

.vs-cpdp__crumbs a:hover { color: #314696; }

.vs-cpdp__crumb-sep { color: #c2c8cf; }

.vs-cpdp__crumb-current { color: #8b949c; }

/* ---- Bovenblok: 2 kolommen ---- */
.vs-cpdp__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.vs-cpdp__left { min-width: 0; }
.vs-cpdp__right { min-width: 0; }
/* Ruimte tussen de galerij en de "Maak je bestelling compleet"-sectie.
   !important nodig: accessories.css zet `margin: 0 0 16px !important` op .vs-accessories. */
.vs-cpdp__left .vs-accessories { margin-top: 28px !important; }
/* Desktop: de linker kolom (galerij + "handig bij te bestellen") blijft sticky
   meescrollen tot de rechter kolom (productinfo + koopblok) is uitgescrolt.
   Werkt omdat .vs-cpdp__top al `align-items: start` heeft (kolom rekt niet mee). */
@media (min-width: 981px) {
    .vs-cpdp__left {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

.vs-cpdp__right .product_title,
.vs-cpdp__right h1 {
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: #1f2a37;
    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 — flex zodat de eenheid ("per m²") op dezelfde regel achter de prijs staat;
   Woo's p.price is anders een block met eigen marge. */
.vs-cpdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 6px 0 10px; font-size: 17px; }
.vs-cpdp__price .price { margin: 0; }
.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; }
.vs-cpdp__price-unit { font-size: 14px; font-weight: 400; color: var(--vs-cpdp-text); margin-left: 2px; }

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

/* Lucht tussen de levertijd-indicator en wat eronder volgt (delivery.css
   zet margin-bottom 0 !important, dus hier overrulen met hogere specificiteit). */
.vs-cpdp__cart .vs-delivery { margin-bottom: 14px !important; }

/* Add-to-cart + groene knop */
.vs-cpdp__cart .single_add_to_cart_button,
.vs-cpdp__cart button.button {
    font-family: 'Lato', 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); }

/* ---- Tabs ---- */
.vs-cpdp__tabs { margin: 40px 0 0; }
.vs-cpdp__tabs .woocommerce-Tabs-panel { padding-top: 16px; }

/* De Woo-tabnavigatie is met één tab ("Beschrijving") pure ruis: verberg 'm
   dan; bij 2+ tabs blijft de navigatie staan maar zonder browser-bullets. */
.vs-cpdp__tabs ul.wc-tabs { list-style: none; margin: 0; padding: 0; }
.vs-cpdp__tabs ul.wc-tabs li:only-child { display: none; }

/* Typografie van het beschrijvingspaneel in huisstijl. */
.vs-cpdp__tabs .woocommerce-Tabs-panel h2 { font-size: 24px; font-weight: 700; color: #1f2a37; margin: 0 0 14px; }
.vs-cpdp__tabs .woocommerce-Tabs-panel h3 { font-size: 17px; color: #1f2a37; margin: 18px 0 8px; }
.vs-cpdp__tabs .woocommerce-Tabs-panel a { color: #314696; font-weight: 600; text-decoration: none; }
.vs-cpdp__tabs .woocommerce-Tabs-panel a:hover { text-decoration: underline; }
.vs-cpdp__tabs .woocommerce-Tabs-panel ul { padding-left: 20px; }
.vs-cpdp__tabs .woocommerce-Tabs-panel ul li::marker { color: #62b959; }

/* Beschrijving: op de brede weergave liepen tekstregels de volle 1440px door
   (onleesbaar lang + oogt leeg). Begrens de inhoud op een prettige leesbreedte
   en geef de tekst iets meer lucht. */
.vs-cpdp__tabs .woocommerce-Tabs-panel h2,
.vs-cpdp__tabs .woocommerce-Tabs-panel h3,
.vs-cpdp__tabs .woocommerce-Tabs-panel p,
.vs-cpdp__tabs .woocommerce-Tabs-panel ul,
.vs-cpdp__tabs .woocommerce-Tabs-panel ol,
.vs-cpdp__tabs .woocommerce-Tabs-panel table {
    max-width: 860px;
}

.vs-cpdp__tabs .woocommerce-Tabs-panel p {
    line-height: 1.75;
}

.vs-cpdp__tabs .woocommerce-Tabs-panel ul li {
    margin: 4px 0;
}

/* ---- Service-/contactband ---- */
.vs-cpdp__service { margin: 48px 0 0; }
.vs-cpdp__service-title {
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1f2a37;
    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: #1f2a37; 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: 'Lato', 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: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1f2a37;
    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; }
    .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__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; }
}