/* ═══════════════════════════════════════════════════════
   PRODUCT DETAIL — Modern Redesign
   Brand: Blue #0e71b8  |  Orange #f07d00
   ═══════════════════════════════════════════════════════ */

/* Reset */
.pd-wrap *, .pd-wrap *::before, .pd-wrap *::after { box-sizing: border-box; }

/* ── Hero ── */
.pd-hero {
    background: #0e71b8;
    color: #fff;
    padding: 44px 0 56px;
    position: relative;
    overflow: visible;
}
.pd-hero-inner { position: relative; z-index: 1; }
.pd-hero h1 {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
/* Hero two-column: text left, "Wat kun je verwachten?" card right */
.pd-hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.pd-hero-left { min-width: 0; }
.pd-verwacht { background: #fff; border-radius: 16px 0 16px 0; padding: 24px 26px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); position: relative; z-index: 3; margin-bottom: 20px; }
.pd-verwacht-title { font-size: 18px; font-weight: 800; color: #0e71b8; margin: 0 0 14px; }
.pd-verwacht ul { list-style: none; margin: 0; padding: 0; }
.pd-verwacht li { display: flex; align-items: flex-start; gap: 12px; color: #1a1a2e; font-size: 15px; font-weight: 600; padding: 9px 0; border-bottom: 1px solid #eef3f8; }
.pd-verwacht li:last-child { border-bottom: none; }
.pd-verwacht-check { flex: 0 0 22px; width: 22px; height: 22px; background: #0e71b8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pd-verwacht-check svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.5; }
@media (max-width: 860px) { .pd-hero-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ── Main layout ── */
.pd-wrap { background: #f5f8fc; }
.pd-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    padding-top: 36px;
    align-items: start;
}
/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */

/* Tablet wide ≤1100px */
@media (max-width: 1100px) {
    .pd-layout { grid-template-columns: 1fr 290px; gap: 20px; }
    .pd-hero h1 { font-size: 30px; }
}

/* Tablet portrait ≤860px — single column, cards stack full-width */
@media (max-width: 860px) {
    .pd-layout { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
    .pd-sidebar { position: static !important; margin-top: 0 !important; display: block; }
    .pd-sidebar-row { display: block; }
    .pd-sidebar > *, .pd-sidebar-row > * { width: 100%; max-width: 100%; }
    /* card sits normally in the flow — no hero overlap on small screens */
    .pd-verwacht { margin-bottom: 16px; box-shadow: 0 4px 20px rgba(14,113,184,0.10); }
    .pd-nav-bar { flex-wrap: wrap; }
}

/* Tablet + mobile: let the cards of both columns share one stack, so the price and
   offerte button can sit right under the photos instead of at the very bottom.
   Order: photos → kenmerken → price → offerte → tabs → FAQ → contact → share → vorige/volgende */
@media (max-width: 860px) {
    .pd-main, .pd-sidebar, .pd-sticky { display: contents !important; }
    .pd-layout > *, .pd-main > *, .pd-sidebar > *, .pd-sticky > *, .pd-sidebar-row > * { margin-bottom: 0 !important; }
    .pd-gallery      { order: -3; }
    .pd-verwacht     { order: -2; }
    .pd-sidebar-row, .pd-sticky > .pd-cta { order: -1; }
    .pd-nav-bar      { order: 1; padding: 8px 0 4px; }
}
@media (max-width: 600px) { .pd-layout { gap: 12px; } }

/* Mobile offerte bar: fixed at the bottom, hidden while the normal offerte button is on screen */
.pd-mbar { display: none; }
@media (max-width: 860px) {
    .pd-mbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
        background: #fff; box-shadow: 0 -6px 24px rgba(14,113,184,0.14);
        transform: translateY(110%); transition: transform 0.25s ease;
    }
    .pd-mbar.is-visible { transform: none; }
    .pd-mbar-price { flex: 1; min-width: 0; line-height: 1.2; }
    .pd-mbar-from { display: block; font-size: 12px; color: #888; }
    .pd-mbar-amount { font-size: 20px; font-weight: 800; color: #0e71b8; white-space: nowrap; }
    .pd-mbar-amount span { color: #f07d00; font-size: 15px; margin-right: 2px; }
    .pd-mbar-btw { font-size: 11px; color: #999; font-weight: 400; margin-left: 4px; }
    .pd-mbar-cta {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
        background: #f07d00; color: #fff !important; text-decoration: none;
        font-size: 15px; font-weight: 700; padding: 13px 18px;
        border-radius: 12px 0 12px 0; box-shadow: 0 4px 14px rgba(240,125,0,0.3);
    }
    .pd-mbar-cta svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; }
    .pd-mbar.no-price .pd-mbar-cta { flex: 1; justify-content: center; }
    body.pd-mbar-on #scroll { bottom: 84px; }
    body { padding-bottom: 72px; }
}

/* Mobile ≤600px — full single column */
@media (max-width: 600px) {
    .pd-hero { padding: 22px 0 28px; }
    .pd-hero h1 { font-size: 22px; line-height: 1.25; }
    .pd-layout { gap: 10px; padding-top: 12px; }
    .pd-sidebar { display: block; }
    .pd-sidebar > * { margin-bottom: 10px; }
    .pd-usp-card { padding: 16px 14px; border-radius: 12px 0 12px 0; }
    .pd-usp-card li { font-size: 13px; gap: 10px; padding: 6px 0; }
    .pd-usp-check { flex: 0 0 20px; width: 20px; height: 20px; }
    .pd-price-card { padding: 16px 14px; border-radius: 12px 0 12px 0; }
    .pd-price-label { font-size: 10px; }
    .pd-price-unit { font-size: 12px; }
    .pd-price-extras-list li { font-size: 13px; }
    .pd-price-btw { font-size: 11px; }
    .pd-cta { font-size: 15px; padding: 14px 16px; }
    .pd-contact-card { padding: 14px 12px; }
    .pd-contact-card strong { font-size: 14px; }
    .pd-contact-card a { font-size: 16px; }
    .pd-thumbs { padding: 10px; gap: 8px; min-height: 66px; }
    .pd-thumb { flex: 0 0 72px; height: 52px; }
    .pd-thumb-yt { flex: 0 0 72px; height: 52px; }
    .pd-card { border-radius: 12px 0 12px 0; }
    .pd-card-head { font-size: 11px; padding: 12px 14px 8px; }
    .pd-content { padding: 14px 14px 12px; font-size: 15px; line-height: 1.65; }
    .pd-content h2 { font-size: 19px; margin-top: 22px; }
    .pd-content h3 { font-size: 17px; margin-top: 20px; }
    .pd-content h4, .pd-content h5, .pd-content h6 { font-size: 15px; }
    .pd-tabs { padding: 0 6px; gap: 0; }
    .pd-tab { flex: 1 1 0; justify-content: center; font-size: 11px; gap: 7px; padding: 14px 6px 12px; letter-spacing: 0.6px; }
    .pd-tab svg { width: 15px; height: 15px; }
    .pd-tab::after { left: 6px; right: 6px; }
    .pd-specs-grid { grid-template-columns: 1fr; }
    .pd-spec-item { padding: 12px 14px; }
    .pd-spec-label { font-size: 10px; }
    .pd-spec-value { font-size: 13px; }
    .pd-spec-mini-item { padding: 8px 14px; font-size: 13px; }
    .pd-faq-q { padding: 13px 14px; font-size: 13px; }
    .pd-faq-a { padding: 0 14px 13px; font-size: 13px; }
    .pd-share-links { gap: 8px; }
    .pd-share-btn { padding: 7px 11px; font-size: 12px; }
    .pd-nav-bar { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .pd-nav-btn { padding: 9px 14px; font-size: 13px; flex: 1; justify-content: center; min-width: 90px; }
    .pd-related { padding: 28px 0 10px; }
    .pd-related-title { font-size: 19px; margin-bottom: 18px; }
    .pd-related-name { font-size: 14px; }
    .pd-related-desc { font-size: 12px; }
    .pd-contact-strip { padding: 22px 16px; flex-direction: column; align-items: center; text-align: center; gap: 16px; border-radius: 14px 0 14px 0; }
    .pd-contact-strip-text h3 { font-size: 17px; }
    .pd-contact-strip-text p { font-size: 13px; }
    .pd-strip-cta { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
}

/* Very small ≤380px */
@media (max-width: 380px) {
    .pd-hero h1 { font-size: 19px; }
    .pd-specs-grid { grid-template-columns: 1fr; }
    .pd-thumb { flex: 0 0 60px; height: 44px; }
    .pd-thumb-yt { flex: 0 0 60px; height: 44px; }
}


/* ── Card base ── */
.pd-card {
    background: #fff;
    border-radius: 16px 0 16px 0;
    box-shadow: 0 2px 20px rgba(14,113,184,0.07);
    overflow: hidden;
    margin-bottom: 24px;
}
.pd-card-head {
    padding: 18px 24px 14px;
    border-bottom: 1px solid #f0f4f8;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0e71b8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pd-card-head svg { width: 17px; height: 17px; fill: none; stroke: #0e71b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Sectietitels zijn nu semantische koppen (h2/h3); moeten er identiek uitzien als de oude <div>. */
h2.pd-card-head, h3.pd-card-head { margin: 0; font-family: inherit; line-height: inherit; }
h2.pd-verwacht-title { font-family: inherit; line-height: inherit; }
h3.pd-price-label { margin: 0 0 6px; font-family: inherit; line-height: inherit; }

/* ── Gallery ── */
.pd-gallery { position: relative; }
.pd-gallery-main {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: #e0ebf5;
    cursor: zoom-in;
}
.pd-gallery-iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: none;
}
.pd-play-btn {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.28);
    cursor: pointer; border: none;
    transition: background 0.2s;
}
.pd-play-btn:hover { background: rgba(0,0,0,0.42); }
.pd-play-icon {
    width: 70px; height: 70px;
    background: rgba(255,255,255,0.93);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.pd-play-icon svg { width: 28px; height: 28px; fill: #0e71b8; margin-left: 4px; }
.pd-thumbs {
    display: flex; gap: 10px; padding: 14px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    background: #f5f8fc; border-top: 1px solid #e8eef5;
    /* prevent content from collapsing */
    flex-wrap: nowrap;
    min-height: 80px;
}
.pd-thumbs::-webkit-scrollbar { height: 4px; }
.pd-thumbs::-webkit-scrollbar-track { background: #e8eef5; border-radius: 2px; }
.pd-thumbs::-webkit-scrollbar-thumb { background: #0e71b8; border-radius: 2px; }
.pd-thumb {
    flex: 0 0 88px; height: 62px;
    object-fit: cover; border-radius: 8px 0 8px 0;
    cursor: pointer; scroll-snap-align: start;
    border: 2px solid transparent;
    transition: border-color 0.18s, transform 0.18s;
    opacity: 0.72;
}
.pd-thumb:hover, .pd-thumb.active { border-color: #f07d00; opacity: 1; transform: scale(1.04); }
.pd-thumb-yt {
    flex: 0 0 88px; height: 62px;
    border-radius: 8px 0 8px 0; overflow: hidden;
    cursor: pointer; scroll-snap-align: start;
    border: 2px solid transparent;
    transition: border-color 0.18s, transform 0.18s;
    position: relative; opacity: 0.72;
}
.pd-thumb-yt:hover, .pd-thumb-yt.active { border-color: #f07d00; opacity: 1; transform: scale(1.04); }
.pd-thumb-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb-yt::after {
    content: "▶";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    background: rgba(0,0,0,0.35);
}

/* ── Tabs (Omschrijving / Extra informatie) ── */
.pd-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f4f8;
}
.pd-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 18px 12px 15px;
    background: none; border: none; cursor: pointer;
    font-family: inherit;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #8a9bb0;
    transition: color 0.18s;
}
.pd-tab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.pd-tab::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0;
    background: #f07d00;
    transform: scaleX(0);
    transition: transform 0.22s ease;
}
.pd-tab:hover { color: #0e71b8; }
.pd-tab.is-active { color: #0e71b8; }
.pd-tab.is-active::after { transform: scaleX(1); }
.pd-tab:focus-visible { outline: 2px solid #0e71b8; outline-offset: -4px; border-radius: 8px 0 8px 0; }
.pd-tab-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: #eaf3fb; color: #0e71b8;
    font-size: 11px; letter-spacing: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.pd-tab.is-active .pd-tab-count { background: #0e71b8; color: #fff; }
.pd-tab-panel[hidden] { display: none !important; }
.pd-tab-panel { animation: pdTabIn 0.25s ease; }
@keyframes pdTabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Content (product description) ──
   Editors / the SEO tool put real headings, lists and links in here, so
   give them calm, body-sized typography instead of the theme defaults. */
.pd-content { padding: 28px 28px 24px; font-size: 17px; line-height: 1.75; color: #444; }
.pd-content > :first-child { margin-top: 0 !important; }
.pd-content > :last-child { margin-bottom: 0 !important; }
.pd-content p { margin: 0 0 16px; }
.pd-content h2, .pd-content h3, .pd-content h4, .pd-content h5, .pd-content h6 {
    font-family: inherit;
    color: #0e71b8;
    font-weight: 700;
    letter-spacing: -0.1px;
    margin: 28px 0 10px;
}
.pd-content h2 { font-size: 22px; line-height: 1.3; }
.pd-content h3 { font-size: 19px; line-height: 1.35; }
.pd-content h4, .pd-content h5, .pd-content h6 { font-size: 17px; line-height: 1.4; color: #1a1a2e; }
.pd-content h2 + h3, .pd-content h3 + h4 { margin-top: 12px; }
.pd-content strong, .pd-content b { color: #1a1a2e; font-weight: 700; }
.pd-content a { color: #f07d00; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.18s; }
.pd-content a:hover { color: #0e71b8; }
.pd-content ul, .pd-content ol { margin: 0 0 18px; padding: 0; }
.pd-content ul li, .pd-content ol li { position: relative; padding-left: 26px; margin: 0 0 6px; list-style: none; }
.pd-content ul li::before {
    content: ""; position: absolute; left: 6px; top: 0.72em;
    width: 7px; height: 7px; border-radius: 50%;
    background: #f07d00;
}
.pd-content ol { counter-reset: pd-ol; }
.pd-content ol li { counter-increment: pd-ol; }
.pd-content ol li::before {
    content: counter(pd-ol) "."; position: absolute; left: 2px; top: 0;
    font-weight: 700; color: #0e71b8;
}
.pd-content blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid #f07d00; color: #555; font-style: italic; }
.pd-content img { max-width: 100%; height: auto; border-radius: 12px 0 12px 0; }
.pd-content hr { border: none; border-top: 1px solid #eef3f8; margin: 24px 0; }

/* ── Specs ── */
.pd-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    background: #fff; /* no divider lines: empty cells in a short last row are just white space */
}
.pd-spec-item {
    background: #fff;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pd-spec-icon {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.pd-spec-icon svg {
    width: 19px; height: 19px;
    fill: none; stroke: #0e71b8; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.pd-spec-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pd-spec-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a2e;
    margin-bottom: 1px;
}
.pd-spec-value {
    font-size: 13px;
    font-weight: 400;
    color: #6b7684;
    line-height: 1.45;
}

/* The two headline facts, as rows in the same rhythm as BTW and
   Beschikbaarheid below them. Two columns looked ragged: with a short value
   on the left and a long one on the right there is no line to read along. */
.pd-price-facts {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18);
}
.pd-price-fact {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 0; min-width: 0; font-size: 14px;
}
.pd-price-fact-icon { flex: 0 0 18px; width: 18px; align-self: center; display: flex; }
.pd-price-fact-icon svg { width: 18px; height: 18px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-price-fact-label { flex: 1; color: rgba(255,255,255,.72); }
.pd-price-fact-value { font-weight: 600; color: #fff; text-align: right; }

/* Remarks and conditions — a closed row per subject, in the same visual
   language as the facts above it. */
.pd-spec-notes { border-top: 1px solid #f0f4f8; }
.pd-spec-note { border-bottom: 1px solid #f0f4f8; background: #fff; }
.pd-spec-note:last-child { border-bottom: none; }
.pd-spec-note > summary {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 20px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #1a1a2e;
}
.pd-spec-note > summary::-webkit-details-marker { display: none; }
.pd-spec-note > summary:hover { background: #f8fbfe; color: #0e71b8; }
.pd-spec-note-label { flex: 1; min-width: 0; }
.pd-spec-note-chevron {
    flex: 0 0 18px; width: 18px; height: 18px;
    fill: none; stroke: #0e71b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s;
}
.pd-spec-note[open] > summary { color: #0e71b8; }
.pd-spec-note[open] .pd-spec-note-chevron { transform: rotate(180deg); }
.pd-spec-note > p {
    margin: 0; padding: 0 20px 16px 56px;
    font-size: 15px; line-height: 1.6; color: #4a5568;
}
@media (max-width: 480px) {
    .pd-spec-note > p { padding-left: 20px; }
}

/* ── FAQ ── */
.pd-faq-list { padding: 8px 0; }
.pd-faq-item {
    border-bottom: 1px solid #f0f4f8;
}
.pd-faq-item:last-child { border-bottom: none; }
.pd-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a2e;
    transition: color 0.18s;
    gap: 12px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.pd-faq-q:hover { color: #0e71b8; }
.pd-faq-icon {
    flex: 0 0 24px; width: 24px; height: 24px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, transform 0.3s;
    font-size: 14px;
    color: #0e71b8;
    font-style: normal;
}
.pd-faq-item.open .pd-faq-icon {
    background: #0e71b8; color: #fff; transform: rotate(45deg);
}
.pd-faq-a {
    padding: 0 24px 18px 24px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    display: none;
}
.pd-faq-item.open .pd-faq-a { display: block; }
.pd-faq-item.open .pd-faq-q { color: #0e71b8; }

/* ── SIDEBAR ── */
.pd-main { min-width: 0; }
.pd-sidebar { position: static; min-width: 0; }
.pd-sidebar-row { display: flex; flex-direction: column; gap: 0; }
/* Sticky sidebar block (price, offerte button, contact, share — one part): the
   sidebar stretches to the height of the main column and JS pads its bottom so the
   block stops level with the bottom of the last card on the left (the FAQ).
   On short screens JS adds .is-compact (tighter spacing). It always sticks just under
   the header, so the price is never hidden behind the menu. */
/* The theme's #page-wrap has overflow:hidden, which kills position:sticky.
   overflow:clip clips the same way without creating a scroll container;
   flow-root keeps the margin containment overflow:hidden used to give. */
#page-wrap { overflow: clip; display: flow-root; }
@media (min-width: 861px) {
    .pd-sidebar { align-self: stretch; }
    .pd-sticky { position: sticky; top: var(--pd-sticky-top, 155px); }
    .pd-sticky > :last-child { margin-bottom: 0; }
    .pd-sticky.is-compact .pd-price-card { padding: 16px 20px; margin-bottom: 12px; }
    .pd-sticky.is-compact .pd-price-amount { font-size: 18px; }
    .pd-sticky.is-compact .pd-price-facts { margin-top: 10px; padding-top: 8px; }
    .pd-sticky.is-compact .pd-price-divider { margin: 10px 0; }
    .pd-sticky.is-compact .pd-price-rows li { padding: 4px 0; }
    .pd-sticky.is-compact .pd-cta { padding: 12px 20px; margin-bottom: 12px; }
    .pd-sticky.is-compact .pd-contact-card { padding: 10px 16px; margin-bottom: 12px; }
    .pd-sticky.is-compact .pd-contact-card strong { margin-bottom: 2px; }
    .pd-sticky.is-compact .pd-card { margin-bottom: 0; }
    .pd-sticky.is-compact .pd-card-head { padding: 11px 20px 9px; }
    .pd-sticky.is-compact .pd-share-links { padding: 10px 20px 12px; gap: 10px; }
    .pd-sticky.is-compact .pd-share-btn { width: 38px; height: 38px; }
}

/* USP Card */
.pd-usp-card {
    background: #0e71b8;
    border-radius: 16px 0 16px 0;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(14,113,184,0.22);
}
.pd-usp-card ul { list-style: none; margin: 0; padding: 0; }
.pd-usp-card li {
    display: flex; align-items: flex-start; gap: 12px;
    color: #fff; font-size: 16px; font-weight: 600;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.pd-usp-card li:last-child { border-bottom: none; }
.pd-usp-check {
    flex: 0 0 22px; width: 22px; height: 22px;
    background: #f07d00;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.pd-usp-check svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.5; }

/* Price Card */
.pd-price-card {
    background: #0e71b8;
    border-radius: 16px 0 16px 0;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(14,113,184,0.28);
}
.pd-price-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.pd-price-rows li {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: rgba(255,255,255,0.78);
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    gap: 8px;
}
.pd-price-rows li:last-child { border-bottom: none; }
.pd-price-rows .pr-val { color: #fff; font-weight: 600; text-align: right; white-space: nowrap; }
.pd-price-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}
.pd-price-main {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 4px;
}
.pd-price-from { font-size: 14px; color: rgba(255,255,255,0.6); }
.pd-price-euro { font-size: 18px; font-weight: 700; color: #f07d00; line-height: 1.3; }
.pd-price-amount { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; }
.pd-price-unit { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.pd-price-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }
.pd-price-extras-list { list-style: none; margin: 0 0 12px; padding: 0; }
.pd-price-extras-list li {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: rgba(255,255,255,0.7);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 8px;
}
.pd-price-extras-list li:last-child { border-bottom: none; }
.pd-price-extras-list .pe-label { flex: 1; }
.pd-price-extras-list .pe-val { color: #f07d00; font-weight: 600; white-space: nowrap; }
/* "op aanvraag" instead of an amount: white like the other text values, not orange. */
.pd-price-extras-list .pe-val-text { color: #fff; }
.pd-price-btw {
    font-size: 12px; color: rgba(255,255,255,0.4);
    margin-top: 6px;
}

/* CTA Button */
.pd-cta {
    display: block; width: 100%;
    background: #f07d00;
    color: #fff;
    font-size: 16px; font-weight: 700;
    padding: 16px 20px;
    border-radius: 12px 0 12px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    margin-bottom: 20px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(240,125,0,0.3);
    position: relative; overflow: hidden;
    letter-spacing: 0.3px;
}
.pd-cta:hover {
    background: #d46a00;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(240,125,0,0.4);
    color: #fff;
}
.pd-cta svg { vertical-align: middle; margin-right: 8px; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }

/* Contact mini card */
.pd-contact-card {
    background: #f5f8fc;
    border: 1px solid #e4edf6;
    border-radius: 12px 0 12px 0;
    padding: 18px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #555;
    text-align: center;
}
.pd-contact-card strong { display: block; font-size: 16px; color: #1a1a2e; margin-bottom: 6px; }
.pd-contact-card a { color: #0e71b8; font-weight: 700; text-decoration: none; font-size: 18px; }
.pd-contact-card a:hover { color: #f07d00; }

/* ── Specs sidebar mini ── */
.pd-specs-mini { padding: 12px 0 4px; }
.pd-spec-mini-item {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f4f8;
    font-size: 14px;
    gap: 12px;
}
.pd-spec-mini-item:last-child { border-bottom: none; }
.pd-spec-mini-key { color: #888; flex: 1; }
.pd-spec-mini-val { font-weight: 600; color: #1a1a2e; text-align: right; }

/* ── Share bar ── */
.pd-share { padding: 20px 0 0; }
.pd-share-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #999; margin-bottom: 14px; }
.pd-share-links { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 20px 18px; }
.pd-share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    padding: 0;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.18s, opacity 0.18s;
    color: #fff;
}
.pd-share-btn svg { width: 19px; height: 19px; fill: #fff; }
.pd-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); color: #fff; }
.pd-share-fb { background: #1877f2; }
.pd-share-wa { background: #25d366; }
.pd-share-mail { background: #0e71b8; }
.pd-share-li { background: #0a66c2; }

/* ── Navigation ── */
.pd-nav-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 24px 0;
    gap: 12px;
}
.pd-nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 10px 0 10px 0;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border: 2px solid #0e71b8;
    color: #0e71b8;
}
.pd-nav-btn:hover { background: #0e71b8; color: #fff; }
.pd-nav-btn.overview { background: #0e71b8; color: #fff; }
.pd-nav-btn.overview:hover { background: #0a5a94; }
.pd-nav-btn.disabled { opacity: 0.3; pointer-events: none; }
.pd-nav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ── Related products ── */
.pd-related { padding: 48px 0 20px; }
.pd-related-title { font-size: 26px; font-weight: 800; color: #0e71b8; margin: 0 0 28px; }
.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}
@media (max-width: 1100px) { .pd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* More than 4 related products: a slider (4 visible on desktop, 2 on tablet) with arrows */
.pd-related-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; }
.pd-related-head .pd-related-title { margin: 0; }
.pd-related-arrows { display: flex; gap: 10px; flex: 0 0 auto; }
.pd-related-arrow {
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #0e71b8; border-radius: 12px 0 12px 0;
    transition: background 0.2s, opacity 0.2s;
}
.pd-related-arrow svg { width: 18px; height: 18px; fill: none; stroke: #0e71b8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pd-related-arrow:hover:not(:disabled) { background: #0e71b8; }
.pd-related-arrow:hover:not(:disabled) svg { stroke: #fff; }
.pd-related-arrow:disabled { opacity: 0.3; cursor: default; }
.pd-related-grid.is-slider {
    display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; overscroll-behavior-x: contain;
    margin: -8px 0 22px; padding: 8px 0 8px;
}
.pd-related-grid.is-slider::-webkit-scrollbar { display: none; }
.pd-related-grid.is-slider .pd-related-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }
@media (max-width: 1100px) {
    .pd-related-grid.is-slider { gap: 18px; }
    .pd-related-grid.is-slider .pd-related-card { flex-basis: calc((100% - 18px) / 2); }
}
/* Mobile: a swipeable row — one card at a time, the next one peeking in, snapping into place */
.pd-related-dots { display: none; }
@media (max-width: 600px) {
    .pd-related-grid {
        display: flex; gap: 14px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding: 0 15px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 0 -15px 6px; padding: 4px 15px 18px;
    }
    .pd-related-grid::-webkit-scrollbar { display: none; }
    .pd-related-card, .pd-related-grid.is-slider .pd-related-card { flex: 0 0 82%; scroll-snap-align: start; }
    .pd-related-grid.is-slider { gap: 14px; margin: 0 -15px 6px; padding: 4px 15px 18px; }
    .pd-related-arrows { display: none; }
    .pd-related-head { margin-bottom: 18px; }
    .pd-related-card:hover { transform: none; }
    .pd-related-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 26px; }
    .pd-related-dots button {
        width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px;
        background: #c9dbea; cursor: pointer; transition: width 0.2s, background 0.2s;
    }
    .pd-related-dots button.is-active { width: 22px; background: #f07d00; }
}

.pd-related-card {
    background: #fff;
    border-radius: 14px 0 14px 0;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(14,113,184,0.07);
    transition: transform 0.22s, box-shadow 0.22s;
    text-decoration: none; color: inherit;
    display: block;
}
.pd-related-card:hover { transform: translateY(-5px); box-shadow: 0 8px 32px rgba(14,113,184,0.15); }
.pd-related-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pd-related-body { padding: 16px; }
.pd-related-name { font-size: 16px; font-weight: 700; color: #0e71b8; margin: 0 0 8px; }
.pd-related-desc { font-size: 13px; color: #777; line-height: 1.5; margin: 0 0 14px; }
.pd-related-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #f07d00;
    text-decoration: none;
}
.pd-related-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform 0.18s; }
.pd-related-card:hover .pd-related-link svg { transform: translateX(3px); }

/* ── Contact strip ── */
.pd-contact-strip {
    background: #0e71b8;
    border-radius: 20px 0 20px 0;
    padding: 40px 48px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
    margin: 0 0 60px;
}
.pd-contact-strip-text h3 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.pd-contact-strip-text p { color: rgba(255,255,255,0.75); font-size: 16px; margin: 0; }
.pd-strip-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: #f07d00; color: #fff;
    font-size: 16px; font-weight: 700;
    padding: 14px 28px;
    border-radius: 12px 0 12px 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.pd-strip-cta:hover { background: #d46a00; color: #fff; }
.pd-strip-cta svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; }

/* ── Formerly inline styles (moved out of the template) ── */
.pd-gallery-stage { position: relative; }
.pd-gallery-stage.is-video .pd-gallery-main,
.pd-gallery-stage.is-video .pd-gallery-empty { display: none; }
.pd-gallery-stage.is-video .pd-gallery-iframe { display: block; }
.pd-gallery-empty {
    width: 100%;
    aspect-ratio: 16/9;
    background: #e0ebf5;
    display: flex; align-items: center; justify-content: center;
    color: #999;
}
.pd-price-note { font-weight: 400; color: rgba(255,255,255,0.55); font-size: 12px; }
.pd-cta-alt { margin-top: 8px; font-size: 13px; }
.pd-cta-alt a { color: #f07d00; font-weight: 700; font-size: 13px; }
.pd-contact-phone { color: #fff; }

/* ── Photo slider: arrows on the main photo + counter ──
   Same look as the related-products arrows: white round button, blue chevron,
   blue on hover. Only rendered when there is more than one photo/video. */
.pd-slide-arrow {
    position: absolute; top: 50%; z-index: 2;
    width: 44px; height: 44px;
    margin-top: -22px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}
.pd-slide-arrow svg { width: 18px; height: 18px; fill: none; stroke: #0e71b8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pd-slide-arrow:hover { background: #0e71b8; transform: scale(1.06); }
.pd-slide-arrow:hover svg { stroke: #fff; }
.pd-slide-arrow:focus-visible { outline: 3px solid #f07d00; outline-offset: 2px; }
.pd-slide-prev { left: 14px; }
.pd-slide-next { right: 14px; }
.pd-slide-count {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    background: rgba(14,113,184,0.88);
    color: #fff; font-size: 12px; font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px 0 10px 0;
    pointer-events: none;
}
.pd-gallery-stage.is-video .pd-slide-count { display: none; }
@media (max-width: 600px) {
    .pd-slide-arrow { width: 36px; height: 36px; margin-top: -18px; }
    .pd-slide-prev { left: 8px; }
    .pd-slide-next { right: 8px; }
}