/*
Theme Name: Politietest
Theme URI: https://politietest.nl
Description: Custom theme voor Politietest.nl - conversiegerichte WooCommerce-shop voor oefenpakketten politiekeuring.
Author: Findit
Version: 2.22.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: politietest
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
    --navy-950: #061426;
    --navy-900: #0A1F3C;
    --navy-700: #16407A;
    --navy-100: #DFE8F3;
    --navy-50:  #F3F6FA;

    --ink:      #0B1E38;
    --body:     #42536B;
    --muted:    #66788F;
    --line:     #E1E8F0;
    --line-2:   #DDE5EE;
    --outline:  #C9D5E4;

    --cta:        #DFEB22;
    --cta-hover:  #C9D51D;
    --cta-text:   #0B1E38;
    --star:       #F5B331;

    --on-navy:        #FFFFFF;
    --on-navy-soft:   #B9C7DB;
    --on-navy-faint:  #8FAFD9;
    --on-navy-micro:  #7E93AC;
    --on-navy-label:  #5F7A9E;
    --on-navy-link:   #C9D6E6;

    --r-btn:   10px;
    --r-card:  14px;
    --r-panel: 18px;
    --r-pill:  999px;

    --container: 1312px;
    --kaart-inset: 44px;   /* inspringing binnen de kaart; pagina's zonder kaart houden dezelfde lijn aan */
    --pad-x: 64px;
    --section-y: 96px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen. Een eigen display-regel op dezelfde
   klasse heeft anders voorrang, waardoor verborgen velden toch zichtbaar
   blijven. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--body);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--cta);
    outline-offset: 3px;
    border-radius: 4px;
}

.pt-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: var(--ink);
    padding: 12px 18px;
    z-index: 999;
    font-weight: 700;
}
.pt-skip:focus { left: 8px; top: 8px; }

.pt-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.pt-container {
    max-width: calc(var(--container) + var(--pad-x) * 2);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

.pt-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.pt-overline {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.pt-overline--on-navy { color: var(--on-navy-faint); }

.pt-h2 { font-size: 40px; line-height: 1.12; text-wrap: pretty; }

/* ============================================================
   Buttons
   ============================================================ */
.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    border-radius: var(--r-btn);
    cursor: pointer;
    border: 0;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    text-align: center;
}

.pt-btn--primary {
    background: var(--cta);
    color: var(--cta-text);
    font-size: 17px;
    padding: 17px 28px;
}
.pt-btn--primary:hover { background: var(--cta-hover); color: var(--cta-text); }

.pt-btn--ghost {
    border: 1.5px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 17px;
    padding: 17px 26px;
    background: transparent;
}
.pt-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.pt-btn--outline {
    border: 1.5px solid var(--outline);
    color: var(--ink);
    font-size: 15.5px;
    padding: 14px 0;
    background: transparent;
    width: 100%;
}
.pt-btn--outline:hover { border-color: var(--ink); color: var(--ink); }

.pt-btn--sm { font-size: 15px; padding: 13px 20px; }
.pt-btn--md { font-size: 16px; padding: 15px 26px; }
.pt-btn--block { display: flex; width: 100%; }

.pt-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-700);
}
.pt-textlink:hover { color: var(--ink); }

/* ============================================================
   Navigatie
   ============================================================ */
.pt-nav {
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pt-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    padding-bottom: 22px;
}
.pt-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}
.pt-wordmark:hover { color: #fff; }
.pt-wordmark span { color: var(--on-navy-faint); }

.pt-nav__links { display: flex; gap: 36px; font-size: 15px; font-weight: 600; }
.pt-nav__links a { color: var(--on-navy-link); }
.pt-nav__links a:hover { color: #fff; }

.pt-nav__right { display: flex; align-items: center; gap: 22px; }
.pt-nav__login { color: var(--on-navy-link); font-size: 15px; font-weight: 600; }
.pt-nav__login:hover { color: #fff; }
.pt-nav__cta { font-size: 15px; padding: 11px 18px; border-radius: 9px; }

.pt-burger {
    display: none;
    flex-direction: column;
    gap: 4.5px;
    padding: 10px 2px;
    background: none;
    border: 0;
    cursor: pointer;
}
.pt-burger span {
    width: 20px; height: 2px;
    background: #fff;
    border-radius: 2px;
    display: block;
}

.pt-mobile-menu { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.pt-hero { background: var(--navy-900); }
.pt-hero__grid {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 72px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 96px;
}
.pt-hero h1 {
    font-size: 68px;
    line-height: 1.03;
    letter-spacing: -.025em;
    color: #fff;
    margin: 20px 0 24px;
    text-wrap: pretty;
}
.pt-hero__sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--on-navy-soft);
    margin: 0 0 36px;
    max-width: 540px;
    text-wrap: pretty;
}
.pt-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.pt-hero__micro { margin-top: 14px; font-size: 13.5px; color: var(--on-navy-micro); }
.pt-hero__proof {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: 14px;
}
.pt-stars { color: var(--star); font-size: 17px; letter-spacing: 3px; }
.pt-hero__proof-text { font-size: 15px; color: #DCE6F2; }
.pt-hero__proof-text b { color: #fff; }

.pt-hero__media { position: relative; min-width: 0; }
.pt-hero__photo {
    width: 100%;
    height: 520px;
    overflow: hidden;
    border-radius: var(--r-card);
}
.pt-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.pt-chip {
    position: absolute;
    top: 16px; right: 16px;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-900);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 8px;
}

.pt-statcard {
    position: absolute;
    right: -20px; bottom: -24px;
    pointer-events: none;
    background: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 16px 40px rgba(6, 20, 38, .35);
    width: 230px;
}
.pt-statcard__n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pt-statcard__k { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }

/* ============================================================
   Trustbalk
   ============================================================ */
.pt-trust {
    display: grid;
    grid-template-columns: repeat(var(--pt-kolommen, 4), 1fr);
    gap: 32px;
    padding-top: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.pt-trust__item { display: flex; align-items: center; gap: 12px; }
.pt-trust__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.pt-trust__s { font-size: 13.5px; color: var(--muted); }
.pt-trust__star { color: var(--star); font-size: 18px; }

/* ============================================================
   Herkenning
   ============================================================ */
.pt-recognise {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 72px;
    align-items: center;
}
.pt-recognise__media { position: relative; }
.pt-recognise__photo { width: 100%; height: 440px; border-radius: var(--r-card); overflow: hidden; }
.pt-recognise__photo img { width: 100%; height: 100%; object-fit: cover; }
.pt-statcard--navy {
    right: -20px; bottom: 28px;
    background: var(--navy-900);
    box-shadow: 0 16px 40px rgba(6, 20, 38, .3);
}
.pt-statcard--navy .pt-statcard__n { color: #fff; font-size: 26px; }
.pt-statcard--navy .pt-statcard__k { color: var(--on-navy-soft); font-size: 13px; }
.pt-recognise h2 { margin: 16px 0 20px; }
.pt-recognise p { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 560px; text-wrap: pretty; }
.pt-recognise .pt-textlink { margin-top: 28px; font-size: 16px; }

/* ============================================================
   Zo werkt het
   ============================================================ */
.pt-how { background: var(--navy-50); }
.pt-center-head { text-align: center; max-width: 640px; margin: 0 auto; }
.pt-center-head h2 { margin: 16px 0 18px; }
.pt-center-head p { font-size: 17px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

.pt-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}
.pt-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
}
.pt-step__n { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--navy-700); }
.pt-step h3 { font-size: 20px; margin: 12px 0 10px; }
.pt-step p { font-size: 15.5px; line-height: 1.6; color: var(--body); }

/* Testomgeving paneel */
.pt-env {
    margin-top: 40px;
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 48px 56px;
}
.pt-env__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--on-navy-faint);
    text-transform: uppercase;
}
.pt-env__label span {
    color: var(--on-navy-label);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.pt-env__stage {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    justify-content: center;
    margin-top: 32px;
}

.pt-browser {
    flex: 1;
    max-width: 760px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.pt-browser__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #EEF2F7;
    padding: 10px 14px;
}
.pt-browser__dot { width: 10px; height: 10px; border-radius: 50%; background: #D3DCE6; }
.pt-browser__url {
    margin-left: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
    color: var(--muted);
    padding: 4px 14px;
}
.pt-browser__body { padding: 24px 28px 26px; }
.pt-quiz__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pt-quiz__cat { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--navy-700); }
.pt-quiz__sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.pt-quiz__meta { display: flex; gap: 8px; }
.pt-pill {
    background: var(--navy-50);
    border-radius: var(--r-pill);
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.pt-pill--dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
}
.pt-progress { height: 6px; background: #E9EEF5; border-radius: var(--r-pill); margin-top: 16px; }
.pt-progress__bar { height: 6px; background: var(--navy-700); border-radius: var(--r-pill); }
.pt-quiz__q { font-size: 15px; font-weight: 600; color: var(--body); margin-top: 24px; }
.pt-quiz__series { font-size: 30px; font-weight: 800; letter-spacing: .03em; color: var(--ink); margin: 8px 0 20px; }
.pt-quiz__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pt-quiz__opt {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 13px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.pt-quiz__opt--on { border-color: var(--ink); background: var(--ink); color: #fff; }
.pt-quiz__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.pt-quiz__skip { font-size: 13.5px; color: var(--muted); text-decoration: underline; }
.pt-quiz__next {
    background: var(--navy-700);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 8px;
}

.pt-phone {
    width: 250px;
    flex: none;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.pt-phone__screen { background: #fff; border-radius: 20px; overflow: hidden; }
.pt-phone__head { padding: 16px 16px 0; }
.pt-phone__cat { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--navy-700); }
.pt-phone__sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pt-phone__progress { height: 4px; background: #E9EEF5; border-radius: var(--r-pill); margin-top: 10px; }
.pt-phone__progress div { height: 4px; background: var(--navy-700); border-radius: var(--r-pill); }
.pt-phone__body { padding: 16px; }
.pt-phone__q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.pt-phone__opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pt-phone__opt {
    border: 1.5px solid var(--line-2);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.pt-phone__opt--on { border-color: var(--ink); background: var(--ink); color: #fff; }
.pt-phone__check {
    background: var(--navy-700);
    color: #fff;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 9px;
    padding: 11px 0;
    margin: 14px 0 6px;
}

.pt-how__cta { text-align: center; margin-top: 40px; }
.pt-how__cta-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* ============================================================
   Producten
   ============================================================ */
.pt-products__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}
.pt-products__head h2 { margin: 16px 0 0; }
.pt-products__intro {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--body);
    max-width: 380px;
    text-wrap: pretty;
}
.pt-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.pt-card {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}
.pt-card:hover {
    box-shadow: 0 12px 32px rgba(10, 31, 60, .10);
    transform: translateY(-2px);
}
.pt-card h3 { font-size: 19px; margin: 18px 0 8px; }
.pt-card p { font-size: 15px; line-height: 1.6; color: var(--body); flex: 1; }
.pt-card__meta { font-size: 13px; font-weight: 600; color: var(--muted); margin: 16px 0 14px; }

.pt-card--navy {
    background: var(--navy-900);
    border: 0;
    transition: none;
}
.pt-card--navy:hover { box-shadow: none; transform: none; }
.pt-card--navy h3 { font-size: 20px; color: #fff; margin: 0 0 10px; }
.pt-card--navy p { color: var(--on-navy-soft); }
.pt-card--navy .pt-btn { align-self: flex-start; margin-top: 20px; }

/* ============================================================
   Statistieken
   ============================================================ */
.pt-stats {
    background: var(--navy-950);
    padding: 72px 0;
}
.pt-stats__grid {
    display: grid;
    grid-template-columns: repeat(var(--pt-kolommen, 4), 1fr);
    gap: 48px;
}
.pt-stats__item { text-align: center; }
.pt-stats__n { font-size: 52px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.pt-stats__k { font-size: 14.5px; color: var(--on-navy-faint); margin-top: 6px; }

/* ============================================================
   Testimonials
   ============================================================ */
.pt-testimonials { background: var(--navy-50); }
.pt-testimonials__score { font-size: 15px; color: var(--body); }
.pt-testimonials__score .pt-stars { font-size: inherit; letter-spacing: 2px; }
.pt-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.pt-quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.pt-quote p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
    flex: 1;
    text-wrap: pretty;
}
.pt-quote__person { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.pt-quote__avatar {
    width: 48px; height: 48px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
}
.pt-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-quote__name { font-size: 15px; font-weight: 800; color: var(--ink); }
.pt-badge {
    display: inline-block;
    background: var(--navy-100);
    color: var(--navy-700);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    margin-top: 5px;
}
.pt-testimonials__more { text-align: center; margin-top: 36px; }
.pt-testimonials__more a { font-size: 15.5px; }

/* ============================================================
   Prijzen
   ============================================================ */
.pt-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
    align-items: stretch;
}
.pt-plan {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
}
.pt-plan--featured {
    border: 2px solid var(--ink);
    box-shadow: 0 20px 48px rgba(10, 31, 60, .14);
}
.pt-plan__badge {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    background: var(--cta);
    color: var(--cta-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.pt-plan__name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.pt-plan__price {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 14px 0 4px;
    line-height: 1.1;
}
.pt-plan__price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 14px 0 4px;
    flex-wrap: wrap;
}
.pt-plan__price-row .pt-plan__price { margin: 0; }
.pt-plan__anchor { font-size: 15px; color: var(--muted); }
.pt-plan__for { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.pt-plan__list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.pt-plan__list li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.5;
}
.pt-plan__list li svg { margin-top: 2px; }
.pt-plan__list li.is-strong { font-weight: 800; }
.pt-plan .pt-btn { margin-top: 26px; }
.pt-plan__micro { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* WooCommerce add-to-cart binnen een prijskaart */
.pt-plan form.cart { margin: 0; display: flex; }
.pt-plan form.cart .quantity { display: none; }
.pt-plan .single_add_to_cart_button { width: 100%; }

/* ============================================================
   Garantie
   ============================================================ */
.pt-guarantee { padding-bottom: var(--section-y); background: #fff; }
.pt-guarantee__box {
    background: var(--navy-950);
    border-radius: 20px;
    padding: 72px 80px;
    position: relative;
    overflow: hidden;
}
.pt-guarantee__watermark {
    position: absolute;
    right: 40px; top: 50%;
    transform: translateY(-50%);
    opacity: .07;
    pointer-events: none;
}
.pt-guarantee__inner { max-width: 640px; position: relative; }
.pt-guarantee h2 {
    font-size: 46px;
    line-height: 1.08;
    color: #fff;
    margin: 18px 0 20px;
}
.pt-guarantee p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--on-navy-soft);
    margin: 0 0 36px;
    text-wrap: pretty;
}
.pt-guarantee__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.pt-guarantee .pt-btn--primary,
.pt-guarantee .pt-btn--ghost { font-size: 16px; padding: 15px 26px; }

/* ============================================================
   FAQ
   ============================================================ */
.pt-faq { padding-bottom: var(--section-y); background: #fff; }
.pt-faq__inner { max-width: 760px; margin: 0 auto; }
.pt-faq__list { margin-top: 44px; border-top: 1px solid var(--line); }
.pt-faq__item { border-bottom: 1px solid var(--line); }
.pt-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    font-size: 17.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}
.pt-faq__q svg { transition: transform .2s; }
.pt-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.pt-faq__a p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--body);
    padding: 0 40px 24px 0;
}
.pt-faq__foot { text-align: center; font-size: 15px; color: var(--body); margin-top: 32px; }
.pt-faq__foot a { font-weight: 700; }

/* ============================================================
   Slot-CTA
   ============================================================ */
.pt-final {
    background: var(--navy-900);
    text-align: center;
}
.pt-final h2 { font-size: 48px; line-height: 1.08; color: #fff; }
.pt-final p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--on-navy-soft);
    margin: 16px auto 36px;
    max-width: 520px;
    text-wrap: pretty;
}
.pt-final__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pt-final__micro { font-size: 13.5px; color: var(--on-navy-micro); margin-top: 18px; }

/* ============================================================
   Footer
   ============================================================ */
.pt-footer {
    background: var(--navy-950);
    padding-top: 64px;
    padding-bottom: 40px;
}
.pt-footer__grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(4, 1fr);
    gap: 40px;
}
.pt-footer__about p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--on-navy-faint);
    margin: 14px 0 0;
    max-width: 300px;
}
.pt-footer__col { display: flex; flex-direction: column; gap: 10px; }
.pt-footer__title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-navy-label);
    margin-bottom: 4px;
}
.pt-footer__col a { font-size: 14.5px; color: var(--on-navy-soft); }
.pt-footer__col a:hover { color: #fff; }
.pt-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 48px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 13px;
    color: var(--on-navy-micro);
    flex-wrap: wrap;
}
.pt-footer__disclaimer {
    font-size: 12.5px;
    line-height: 1.6;
    color: #62778F;
    margin: 14px 0 0;
    max-width: 720px;
}

/* ============================================================
   Sticky CTA (mobiel)
   ============================================================ */
.pt-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(10, 31, 60, .12);
    padding: 12px 16px;
    height: 72px;
    transform: translateY(110%);
    transition: transform .25s ease;
}
.pt-sticky.is-visible { transform: translateY(0); }
.pt-sticky__text { flex: 1; min-width: 0; }
.pt-sticky__t { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pt-sticky__s { font-size: 11.5px; color: var(--muted); }
.pt-sticky .pt-btn {
    flex: none;
    font-size: 14.5px;
    padding: 0 18px;
    height: 46px;
}

/* ============================================================
   Mobiel  (breakpoint 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --pad-x: 20px;
        --section-y: 56px;
    }

    body { font-size: 15px; }

    .pt-h2 { font-size: 27px; line-height: 1.15; }

    /* Navigatie */
    .pt-nav__inner { padding-top: 16px; padding-bottom: 16px; }
    .pt-wordmark { font-size: 16.5px; }
    .pt-nav__links, .pt-nav__right { display: none; }
    .pt-burger { display: flex; }

    .pt-mobile-menu {
        display: none;
        background: var(--navy-900);
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: 8px 20px 20px;
    }
    .pt-mobile-menu.is-open { display: block; }
    .pt-mobile-menu a {
        display: block;
        padding: 13px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--on-navy-link);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .pt-mobile-menu .pt-btn {
        margin-top: 16px;
        width: 100%;
        border-bottom: 0;
        color: var(--cta-text);
    }

    /* Hero */
    .pt-hero__grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 36px;
        padding-bottom: 48px;
    }
    .pt-hero h1 { font-size: 38px; line-height: 1.05; margin: 14px 0 16px; }
    .pt-hero .pt-overline { font-size: 11.5px; }
    .pt-hero__sub { font-size: 15.5px; margin-bottom: 26px; max-width: none; }
    .pt-hero__ctas { flex-direction: column; gap: 10px; }
    .pt-hero__ctas .pt-btn { width: 100%; height: 52px; padding: 0 20px; font-size: 16.5px; }
    .pt-hero__ctas .pt-btn--ghost { font-size: 16px; }
    .pt-hero__micro { text-align: center; font-size: 12.5px; margin-top: 12px; }
    .pt-hero__proof {
        justify-content: center;
        margin-top: 22px;
        padding-top: 0;
        border-top: 0;
        gap: 10px;
    }
    .pt-hero__proof .pt-stars { font-size: 14px; letter-spacing: 2px; }
    .pt-hero__proof-text { font-size: 13.5px; }
    .pt-hero__media { margin-top: 28px; }
    .pt-hero__photo { height: 240px; border-radius: 12px; }
    .pt-chip { top: 12px; right: 12px; font-size: 11px; padding: 6px 10px; border-radius: 7px; }
    .pt-hero .pt-statcard { display: none; }

    /* Trustbalk */
    .pt-trust {
        grid-template-columns: 1fr 1fr;
        gap: 18px 16px;
        padding-top: 22px;
        padding-bottom: 22px;
    }
    .pt-trust__t { font-size: 13.5px; }
    .pt-trust__s { font-size: 12px; }

    /* Herkenning */
    .pt-recognise { grid-template-columns: 1fr; gap: 28px; }
    .pt-recognise__photo { height: 220px; }
    .pt-recognise .pt-statcard--navy {
        position: static;
        width: auto;
        margin-top: -28px;
        margin-left: 16px;
        margin-right: 16px;
        position: relative;
        z-index: 2;
    }
    .pt-recognise h2 { margin: 12px 0 14px; }
    .pt-recognise p { font-size: 15px; }
    .pt-recognise .pt-textlink { margin-top: 20px; font-size: 15px; }

    /* Zo werkt het */
    .pt-center-head p { font-size: 15px; }
    .pt-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
    .pt-step { padding: 22px; }
    .pt-step h3 { font-size: 17.5px; }
    .pt-step p { font-size: 14.5px; }

    .pt-env { padding: 28px 20px; margin-top: 28px; border-radius: 16px; }
    .pt-env__stage { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 22px; }
    .pt-browser { max-width: none; }
    .pt-browser__body { padding: 18px; }
    .pt-quiz__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pt-quiz__series { font-size: 24px; }
    .pt-quiz__options { grid-template-columns: repeat(2, 1fr); }
    .pt-phone { display: none; }
    .pt-how__cta .pt-btn { width: 100%; height: 52px; padding: 0 20px; }

    /* Producten */
    .pt-products__head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pt-products__intro { max-width: none; font-size: 15px; }
    .pt-products__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
    .pt-card { padding: 22px; }

    /* Statistieken */
    .pt-stats {
        grid-template-columns: 1fr 1fr;
        gap: 32px 16px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .pt-stats__n { font-size: 34px; }
    .pt-stats__k { font-size: 13px; }

    /* Testimonials */
    .pt-testimonials__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
    .pt-quote { padding: 22px; }
    .pt-quote p { font-size: 15px; }

    /* Prijzen: Compleet bovenaan */
    .pt-pricing__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
    .pt-plan { padding: 26px; }
    .pt-plan--featured { order: -1; }
    .pt-plan__price { font-size: 38px; }
    .pt-plan .pt-btn { height: 52px; padding: 0 20px; }

    /* Garantie */
    .pt-guarantee__box { padding: 36px 24px; border-radius: 16px; }
    .pt-guarantee h2 { font-size: 30px; margin: 14px 0 14px; }
    .pt-guarantee p { font-size: 15px; margin-bottom: 24px; }
    .pt-guarantee__watermark { display: none; }
    .pt-guarantee__ctas { flex-direction: column; }
    .pt-guarantee__ctas .pt-btn { width: 100%; height: 52px; padding: 0 20px; }

    /* FAQ */
    .pt-faq__list { margin-top: 28px; }
    .pt-faq__q { font-size: 15.5px; padding: 17px 0; gap: 16px; min-height: 44px; }
    .pt-faq__a p { font-size: 14px; padding: 0 24px 18px 0; }

    /* Slot-CTA */
    .pt-final h2 { font-size: 30px; line-height: 1.1; }
    .pt-final p { font-size: 15px; margin: 14px 0 26px; }
    .pt-final__ctas { flex-direction: column; }
    .pt-final__ctas .pt-btn { width: 100%; height: 52px; padding: 0 20px; }
    .pt-final__micro { font-size: 12px; margin-top: 14px; }

    /* Footer */
    .pt-footer { padding-top: 40px; padding-bottom: 96px; }
    .pt-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
    .pt-footer__about { grid-column: 1 / -1; }
    .pt-footer__col a { font-size: 13.5px; }
    .pt-footer__bar { flex-direction: column; gap: 4px; margin-top: 32px; padding-top: 18px; font-size: 11.5px; }
    .pt-footer__disclaimer { font-size: 11px; }

    /* Sticky CTA alleen mobiel */
    .pt-sticky { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .pt-sticky { transition: none; }
}

/* ============================================================
   Oefenomgeving (plugin Politietest Training)
   Hergebruikt de mockup-klassen, zodat de echte test er precies
   zo uitziet als het ontwerp.
   ============================================================ */
.pt-runner { margin: 0; }
.pt-runner .pt-browser { box-shadow: 0 12px 40px rgba(10, 31, 60, .12); }

.pt-runner__laden {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}
.pt-runner__laden .pt-btn { margin-top: 14px; }

.pt-runner .pt-quiz__opt {
    cursor: pointer;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.pt-runner .pt-quiz__opt:hover:not(:disabled) { border-color: var(--navy-700); }
.pt-runner .pt-quiz__opt:disabled { cursor: default; }
.pt-runner .pt-quiz__opt.is-goed {
    border-color: #2E6B51;
    background: #E8F3ED;
    color: #14472F;
}
.pt-runner .pt-quiz__opt.is-fout {
    border-color: #A33B33;
    background: #FBECEA;
    color: #7C2A24;
}

.pt-runner__open { display: flex; gap: 10px; margin-top: 4px; }
.pt-runner__open input {
    flex: 1;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 13px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: #fff;
}
.pt-runner__open input:focus { outline: 2px solid var(--cta); outline-offset: 1px; }

.pt-runner__feedback {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--navy-50);
    border-radius: var(--r-btn);
}
.pt-runner__verdict { font-size: 15px; font-weight: 800; }
.pt-runner__verdict.is-goed { color: #2E6B51; }
.pt-runner__verdict.is-fout { color: #A33B33; }
.pt-runner__uitleg { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 6px; }
.pt-runner__methode { margin-top: 10px; }
.pt-runner__methode summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-700);
}
.pt-runner__methode p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--body);
    margin-top: 8px;
    white-space: pre-line;
}

.pt-runner .pt-quiz__skip,
.pt-runner .pt-quiz__next {
    font-family: inherit;
    border: 0;
    cursor: pointer;
}
.pt-runner .pt-quiz__skip { background: none; }
.pt-runner .pt-quiz__next:disabled { opacity: .4; cursor: default; }

.pt-hint { font-size: 13px; color: var(--muted); font-weight: 600; }
.pt-gap { font-weight: 800; color: var(--navy-700); letter-spacing: .05em; }

.pt-runner__uitslag { padding: 8px 0 4px; }
.pt-uitslag__score { font-size: 26px; font-weight: 800; color: var(--ink); }
.pt-uitslag__score span { color: var(--muted); font-weight: 700; font-size: 18px; }
.pt-uitslag__types { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-uitslag__types li {
    display: grid;
    grid-template-columns: 1fr 120px 52px;
    gap: 12px;
    align-items: center;
    font-size: 14.5px;
    color: var(--ink);
}
.pt-uitslag__bar { background: #E9EEF5; border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.pt-uitslag__bar i { display: block; height: 8px; background: var(--navy-700); border-radius: var(--r-pill); }
.pt-uitslag__cijfer { text-align: right; font-weight: 700; color: var(--muted); font-size: 13.5px; }
.pt-uitslag__vervolg { font-size: 15px; line-height: 1.6; color: var(--body); margin: 20px 0 16px; }

.pt-runner__locked {
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--navy-50);
}
.pt-runner__locked p { font-size: 16px; color: var(--body); margin-bottom: 16px; }

@media (max-width: 1024px) {
    .pt-runner .pt-quiz__options { grid-template-columns: repeat(2, 1fr); }
    .pt-runner__open { flex-direction: column; }
    .pt-uitslag__types li { grid-template-columns: 1fr 70px 46px; font-size: 13.5px; }
    .pt-uitslag__score { font-size: 22px; }
}

/* ---------- Sporttest-planner ---------- */
.pt-fvt { max-width: none; }
.pt-fvt__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pt-fvt__row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; }
.pt-fvt__row label, .pt-fvt__label { font-size: 15px; font-weight: 700; color: var(--ink); }
.pt-fvt__row input[type="number"] {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 11px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    width: 130px;
}
.pt-fvt__keuze { display: flex; gap: 20px; }
.pt-fvt__keuze label { font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.pt-fvt__tijd { display: flex; align-items: center; gap: 8px; }
.pt-fvt__tijd input { width: 84px !important; }
.pt-fvt__form .pt-btn { align-self: flex-start; }

.pt-fvt__uitslag {
    margin-top: 22px;
    background: var(--navy-900);
    border-radius: var(--r-card);
    padding: 26px 28px;
    color: #fff;
}
.pt-fvt__normtijd { font-size: 46px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; }
.pt-fvt__normlabel { display: block; margin-top: 8px; font-size: 14.5px; color: var(--on-navy-soft); }
.pt-fvt__oordeel {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 15.5px;
    font-weight: 600;
}
.pt-fvt__oordeel.is-goed { color: #8FE0B8; }
.pt-fvt__oordeel.is-fout { color: #F5B331; }

.pt-fvt__schema { margin-top: 28px; }
.pt-fvt__schema h3 { font-size: 20px; margin-bottom: 14px; }
.pt-fvt__weken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pt-fvt__weken li {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.pt-fvt__weken li:last-child { border-bottom: 1px solid var(--line); }
.pt-fvt__week { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--navy-700); padding-top: 2px; }
.pt-fvt__weken strong { font-size: 16px; color: var(--ink); }
.pt-fvt__weken p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 4px; }

.pt-fvt__parcours { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.pt-fvt__parcours h3 { font-size: 18px; margin-bottom: 10px; }
.pt-fvt__parcours ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.pt-fvt__bron { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.6; }

@media (max-width: 1024px) {
    .pt-fvt__row { grid-template-columns: 1fr; gap: 8px; }
    .pt-fvt__normtijd { font-size: 38px; }
    .pt-fvt__weken li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Werkboek (psychologie en eindgesprek) ---------- */
.pt-werkboek { max-width: none; }
.pt-werkboek__intro { font-size: 17px; line-height: 1.65; color: var(--body); }
.pt-werkboek__bewaard {
    margin-top: 16px;
    background: #E8F3ED;
    border-left: 3px solid #2E6B51;
    color: #14472F;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
}
.pt-werkboek__login {
    margin-top: 16px;
    background: var(--navy-50);
    border-left: 3px solid var(--navy-700);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
}
.pt-werkboek__blok {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.pt-werkboek__blok h3 { font-size: 22px; }
.pt-werkboek__uitleg { font-size: 15.5px; line-height: 1.65; color: var(--body); margin-top: 10px; }
.pt-werkboek__vraag { margin-top: 22px; }
.pt-werkboek__vraag label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
}
.pt-werkboek__hint { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 4px; }
.pt-werkboek__vraag textarea {
    width: 100%;
    margin-top: 10px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
    resize: vertical;
}
.pt-werkboek__vraag textarea:focus { outline: 2px solid var(--cta); outline-offset: 1px; }
.pt-werkboek__vraag textarea:disabled { background: var(--navy-50); color: var(--muted); }

.pt-werkboek__starr {
    margin-top: 26px;
    background: var(--navy-50);
    border-radius: var(--r-card);
    padding: 22px 24px;
}
.pt-werkboek__starr h4 { font-size: 16.5px; font-weight: 800; color: var(--ink); margin: 0; }
.pt-werkboek__vraag--stap { margin-top: 16px; }
.pt-werkboek__vraag--stap label { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--navy-700); }
.pt-werkboek__vraag--stap textarea { background: #fff; }

.pt-werkboek form > .pt-btn { margin-top: 32px; }

/* ============================================================
   Binnenpagina's: kop, ondergrond en kaart
   ============================================================ */
.pt-pagehead {
    background: var(--navy-900);
    padding-top: 56px;
    padding-bottom: 64px;
}
.pt-pagehead__inner { display: flex; flex-direction: column; gap: 0; }
.pt-pagehead__title {
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
    margin: 16px 0 0;
    text-wrap: pretty;
}
.pt-pagehead__lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--on-navy-soft);
    margin-top: 18px;
    text-wrap: pretty;
}
.pt-pagehead__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.pt-pagehead__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #DCE6F2;
}

/* De lichte ondergrond laat de witte kaart eruit springen */
.pt-page__body {
    background: var(--navy-50);
    padding-top: 48px;
    padding-bottom: 72px;
    border-bottom: 1px solid var(--line);
}
.pt-page__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: 0 1px 2px rgba(10, 31, 60, .04), 0 18px 44px -28px rgba(10, 31, 60, .45);
    padding: 40px var(--kaart-inset);
}
.pt-page__card > *:first-child { margin-top: 0; }

/* De runner staat al in een browserframe: geen kaart in een kaart */
.pt-page__card:has(.pt-runner) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 var(--kaart-inset);
}

/* ============================================================
   Verfijning van de modules
   ============================================================ */
.pt-runner .pt-browser { box-shadow: 0 24px 60px -30px rgba(10, 31, 60, .55); }
.pt-runner .pt-browser__body { padding: 30px 34px 32px; }
.pt-runner .pt-quiz__q { font-size: 16px; }
.pt-runner .pt-quiz__series { font-size: 34px; }
.pt-runner .pt-quiz__opt { padding: 16px 0; font-size: 17px; }
.pt-runner .pt-quiz__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pt-runner__laden { padding: 56px 0; font-size: 16px; }

.pt-runner__feedback { border-left: 3px solid var(--navy-700); }
.pt-runner__feedback:has(.is-goed) { border-left-color: #2E6B51; }
.pt-runner__feedback:has(.is-fout) { border-left-color: #A33B33; }

.pt-runner__uitslag { padding: 26px 0 8px; text-align: center; }
.pt-runner__uitslag .pt-uitslag__types { text-align: left; max-width: 460px; margin-inline: auto; }
.pt-uitslag__score { font-size: 34px; }
.pt-uitslag__vervolg { max-width: 420px; margin-inline: auto; }

.pt-fvt__form { box-shadow: none; border-radius: var(--r-panel); background: var(--navy-50); border-color: var(--line); }
.pt-fvt__uitslag { border-radius: var(--r-panel); }
.pt-fvt__normtijd { font-variant-numeric: tabular-nums; }

.pt-werkboek__blok:first-of-type { margin-top: 26px; padding-top: 0; border-top: 0; }
.pt-werkboek__intro { font-size: 16.5px; color: var(--body); }

@media (max-width: 1024px) {
    :root { --kaart-inset: 20px; }

    .pt-pagehead { padding-top: 34px; padding-bottom: 40px; }
    .pt-pagehead__title { font-size: 30px; }
    .pt-pagehead__lede { font-size: 15.5px; margin-top: 14px; }
    .pt-pagehead__facts { gap: 8px 18px; margin-top: 20px; padding-top: 16px; font-size: 13px; }
    .pt-pagehead__facts li { font-size: 13px; }

    .pt-page__body { padding-top: 28px; padding-bottom: 48px; }
    .pt-page__card { padding: 24px var(--kaart-inset); border-radius: var(--r-card); }

    .pt-runner .pt-browser__body { padding: 20px 18px 22px; }
    .pt-runner .pt-quiz__series { font-size: 26px; }
    .pt-runner .pt-quiz__opt { padding: 14px 0; font-size: 16px; }
    .pt-uitslag__score { font-size: 26px; }
}

/* ---------- Voortgangsdashboard ---------- */
.pt-dash { display: flex; flex-direction: column; gap: 34px; }

.pt-dash__leeg { text-align: center; padding: 20px 0 8px; }
.pt-dash__leeg h3 { font-size: 22px; }
.pt-dash__leeg p { font-size: 16px; color: var(--body); margin: 10px auto 20px; max-width: 46ch; }

.pt-dash__cijfers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}
.pt-dash__cijfer { background: #fff; padding: 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.pt-dash__n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pt-dash__k { font-size: 13.5px; color: var(--muted); }

.pt-dash__advies {
    background: var(--navy-50);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cta);
    border-radius: var(--r-card);
    padding: 24px 26px;
}
.pt-dash__advies h3 { font-size: 21px; margin: 8px 0 8px; }
.pt-dash__advies p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin-bottom: 18px; }

.pt-dash__blok h3 { font-size: 20px; margin-bottom: 14px; }
.pt-dash__types, .pt-dash__sessies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pt-dash__types li {
    display: grid;
    grid-template-columns: 1fr 150px 46px 62px 62px;
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
}
.pt-dash__types li:last-child { border-bottom: 1px solid var(--line); }
.pt-dash__type { font-weight: 700; color: var(--ink); }
.pt-dash__bar { background: #E9EEF5; border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.pt-dash__bar i { display: block; height: 8px; background: var(--navy-700); border-radius: var(--r-pill); }
.pt-dash__pct { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.pt-dash__aantal, .pt-dash__tijd { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.pt-dash__sessies li {
    display: grid;
    grid-template-columns: 130px 1fr 100px;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
}
.pt-dash__sessies li:last-child { border-bottom: 1px solid var(--line); }
.pt-dash__datum { color: var(--muted); font-size: 13.5px; }
.pt-dash__soort { color: var(--ink); font-weight: 600; }
.pt-dash__uitslag { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.pt-dash__simulatie {
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 30px 32px;
}
.pt-dash__simulatie h3 { color: #fff; font-size: 22px; margin: 10px 0 10px; }
.pt-dash__simulatie p { color: var(--on-navy-soft); font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; max-width: 52ch; }

.pt-uitslag__kop {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin: 22px 0 10px;
    text-align: left;
}
.pt-uitslag__types--groot li { font-weight: 600; }

@media (max-width: 1024px) {
    .pt-dash { gap: 26px; }
    .pt-dash__cijfers { grid-template-columns: 1fr 1fr; }
    .pt-dash__n { font-size: 24px; }
    .pt-dash__types li { grid-template-columns: 1fr 60px 46px; row-gap: 4px; font-size: 14px; }
    .pt-dash__aantal, .pt-dash__tijd { display: none; }
    .pt-dash__sessies li { grid-template-columns: 1fr 80px; }
    .pt-dash__datum { grid-column: 1 / -1; }
    .pt-dash__simulatie { padding: 24px 20px; }
}

/* ============================================================
   Afrekenen en account
   ============================================================ */
.pt-checkout-trust { margin: 0 0 20px; }
.pt-checkout-trust__usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}
.pt-checkout-trust__usps li {
    background: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.pt-checkout-trust__usps strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.35; }
.pt-checkout-trust__usps span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* WooCommerce blok-checkout in de huisstijl */
.wc-block-components-title {
    font-family: inherit;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
    border-radius: var(--r-btn) !important;
    border-color: var(--line-2) !important;
    font-family: inherit !important;
    color: var(--ink) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
    outline: 2px solid var(--cta) !important;
    outline-offset: 1px;
    box-shadow: none !important;
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.wc-block-components-button--text) {
    background: var(--cta) !important;
    color: var(--cta-text) !important;
    border-radius: var(--r-btn) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 16.5px !important;
    min-height: 54px;
    border: 0 !important;
    transition: background .15s;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.wc-block-components-button--text):hover {
    background: var(--cta-hover) !important;
}
.wc-block-components-totals-item__value {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    color: var(--ink);
    font-weight: 700;
}
.wc-block-components-sidebar { background: transparent; }
.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--navy-50);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}
.wc-block-components-notice-banner { border-radius: var(--r-btn); font-family: inherit; }

/* Mijn account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    background: var(--navy-50);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 700;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--navy-900);
    color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content { padding-top: 22px; }
.woocommerce-account .woocommerce-MyAccount-content p { font-size: 16px; line-height: 1.65; }

.woocommerce table.shop_table {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}
.woocommerce table.shop_table th { background: var(--navy-50); color: var(--ink); font-weight: 700; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 11px 13px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--cta);
    color: var(--cta-text);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-weight: 700;
    padding: 13px 22px;
    border: 0;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--cta-hover); color: var(--cta-text); }

@media (max-width: 1024px) {
    .pt-checkout-trust__usps { grid-template-columns: 1fr 1fr; }
    .pt-checkout-trust__usps li { padding: 13px 14px; }
    .pt-checkout-trust__usps strong { font-size: 13px; }
    .pt-checkout-trust__usps span { font-size: 11.5px; }
}

/* ============================================================
   Afrekenen: klassieke checkout in de huisstijl
   ============================================================ */
.woocommerce-checkout .pt-page__card { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* Wat je koopt, bovenaan */
.pt-checkout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 26px 30px;
    margin-bottom: 18px;
}
.pt-checkout-item__label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-navy-faint);
}
.pt-checkout-item h2 { font-size: 24px; color: #fff; margin: 8px 0 6px; }
.pt-checkout-item p { font-size: 14.5px; line-height: 1.55; color: var(--on-navy-soft); max-width: 46ch; }
.pt-checkout-item__prijs { text-align: right; flex: none; }
.pt-checkout-item__bedrag { display: block; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.pt-checkout-item__code {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--on-navy-soft);
}
.pt-checkout-item__code a {
    color: var(--cta);
    margin-left: 6px;
}
.pt-checkout-item__was {
    text-decoration: line-through;
    opacity: .55;
    font-weight: 600;
    margin-right: 8px;
}
.pt-checkout-item__btw { display: block; font-size: 12.5px; color: var(--on-navy-faint); margin-top: 4px; }

/* Het formulier zelf */
.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: start;
}
.woocommerce-checkout #customer_details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 30px 32px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review {
    background: var(--navy-50);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 26px 28px;
    position: sticky;
    top: 20px;
}

.woocommerce-checkout h3 { font-size: 18px; margin-bottom: 16px; }
.woocommerce-billing-fields h3 { font-size: 18px; }

.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--muted); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce form .form-row select {
    width: 100%;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 13px 14px;
    height: auto;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--cta); outline-offset: 1px; border-color: var(--line-2); }
.woocommerce form .form-row ::placeholder { color: #9AA7B8; }
.woocommerce form .form-row .description { font-size: 13px; color: var(--muted); margin-top: 5px; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); }
.woocommerce form .form-row-first { float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce-billing-fields__field-wrapper::after { content: ""; display: table; clear: both; }

/* Overzicht rechts */
.woocommerce-checkout table.shop_table {
    border: 0;
    background: transparent;
    font-size: 15px;
    margin: 0;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
    color: var(--ink);
}
.woocommerce-checkout table.shop_table thead { display: none; }
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 19px;
    font-weight: 800;
}
.woocommerce-checkout table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout table.shop_table th { text-align: left; font-weight: 600; }

/* Betaalmethoden */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
    border: 0;
    padding: 18px 0 6px;
    margin: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    background: #fff;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 13px 15px;
    margin-bottom: 9px;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 22px; width: auto; display: inline-block; }
.woocommerce-checkout #payment div.payment_box {
    background: var(--navy-50);
    border-radius: var(--r-btn);
    font-size: 14px;
    color: var(--body);
    margin-top: 10px;
    padding: 12px 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box select {
    width: 100%;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 11px 12px;
    font-family: inherit;
    font-size: 15px;
    margin-top: 8px;
    background: #fff;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout .button.alt {
    width: 100%;
    background: var(--cta);
    color: var(--cta-text);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-weight: 700;
    font-size: 17px;
    padding: 17px 20px;
    margin-top: 8px;
    border: 0;
}
.woocommerce-checkout #place_order:hover { background: var(--cta-hover); color: var(--cta-text); }

/* Kortingscode: aanwezig maar rustig */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 14px; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    padding: 14px 0 0;
    margin: 0;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce form.checkout_coupon {
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    padding: 18px;
    margin-bottom: 16px;
}

/* Meldingen */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border: 1px solid var(--line);
    background: var(--navy-50);
    border-radius: var(--r-btn);
    font-size: 15px;
    color: var(--ink);
    padding: 14px 18px;
}
.woocommerce-error { border-color: #E7C9C6; background: #FCF4F3; }
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { display: none; }

/* Bedankpagina */
.pt-bedankt {
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 34px 36px;
    margin-bottom: 26px;
}
.pt-bedankt h2 { color: #fff; font-size: 28px; }
.pt-bedankt p { color: var(--on-navy-soft); font-size: 16px; margin: 10px 0 22px; }
.pt-bedankt__acties { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-bedankt__acties .pt-btn--outline { width: auto; padding: 14px 22px; border-color: rgba(255,255,255,.35); color: #fff; }
.pt-bedankt__acties .pt-btn--outline:hover { border-color: #fff; color: #fff; }
.pt-btn--auto { width: auto; }

/* Mijn account: training vooraan */
.pt-account-training { margin-bottom: 30px; }
.pt-account-training h2 { font-size: 21px; margin-bottom: 14px; }
.pt-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pt-account-kaart {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 18px 20px;
    transition: box-shadow .2s, transform .2s;
}
.pt-account-kaart:hover { box-shadow: 0 12px 32px rgba(10,31,60,.10); transform: translateY(-2px); }
.pt-account-kaart strong { font-size: 16px; color: var(--ink); }
.pt-account-kaart span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.pt-account-leeg { text-align: center; padding: 30px 20px; background: var(--navy-50); border-radius: var(--r-card); }
/* De alinea is smaller dan het blok door de max-width van 68ch op de
   accountinhoud; zonder auto-marges staat die doos links. */
.pt-account-leeg p { font-size: 16px; margin: 0 auto 16px; }

@media (max-width: 1024px) {
    .pt-checkout-item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
    .pt-checkout-item__prijs { text-align: left; }
    .pt-checkout-item h2 { font-size: 20px; }
    .pt-checkout-item__bedrag { font-size: 28px; }

    .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
    .woocommerce-checkout #customer_details { padding: 22px 20px; }
    .woocommerce-checkout #order_review { position: static; padding: 22px 20px; }
    .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }

    .pt-bedankt { padding: 24px 20px; }
    .pt-bedankt h2 { font-size: 22px; }
    .pt-bedankt__acties { flex-direction: column; }
    .pt-bedankt__acties .pt-btn { width: 100%; }
}

/* Afrekenpagina zonder paginakop: de navy nav loopt direct over in de inhoud */
.pt-page__body--kaal { padding-top: 32px; }
.pt-page__body--kaal .pt-checkout-trust { margin: 26px 0 0; }
.pt-page__body--kaal .pt-checkout-trust__usps { background: var(--line); }

/* ============================================================
   Mijn account
   ============================================================ */

/* Navigatie als zijkolom */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 0;
    padding: 0;
    margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--r-btn);
    background: transparent;
    color: var(--body);
    font-size: 15px;
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--navy-50); color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--navy-900); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { padding-top: 0; }

.pt-account-welkom { margin-bottom: 26px; }
.pt-account-welkom h2 { font-size: 26px; }
.pt-account-welkom p { font-size: 16px; color: var(--body); margin-top: 6px; }

.pt-account-voortgang {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--navy-900);
    border-radius: var(--r-card);
    padding: 20px 22px;
    margin-top: 18px;
}
.pt-account-voortgang strong { color: #fff; font-size: 16.5px; }
.pt-account-voortgang span { color: var(--on-navy-soft); font-size: 14px; line-height: 1.5; }
.pt-account-voortgang:hover strong { color: #fff; }

/* Tabellen en formulieren in het account */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14.5px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td { border: 0; border-bottom: 1px solid var(--line); padding: 13px 16px; }
.woocommerce-account table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info { margin-bottom: 20px; }
.woocommerce-account fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; margin-top: 20px; }
.woocommerce-account legend { font-weight: 800; color: var(--ink); padding: 0 8px; }

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .woocommerce-account .woocommerce-MyAccount-navigation li a { background: var(--navy-50); padding: 9px 14px; border-radius: var(--r-pill); font-size: 14px; }
    .pt-account-welkom h2 { font-size: 22px; }
}

/* ============================================================
   Meldingen (toegevoegd aan winkelwagen, fouten, bevestigingen)
   ============================================================ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper { margin: 0 0 18px; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 1px 2px rgba(10, 31, 60, .04), 0 10px 26px -20px rgba(10, 31, 60, .4);
    padding: 16px 20px;
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
    list-style: none;
}
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
    border-color: #E7C9C6;
    background: #FCF4F3;
}

/* De standaardbolletjes van WooCommerce weg */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before { content: none; display: none; }

/* Eigen markering vooraan */
.woocommerce .woocommerce-message > *:first-child { order: 2; }
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after {
    content: "";
    order: 1;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}
.woocommerce .woocommerce-message::after {
    background-color: #E4F1EA;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B51' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.woocommerce .woocommerce-info::after {
    background-color: var(--navy-100);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316407A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}
.woocommerce .woocommerce-error::after {
    background-color: #FAE7E5;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33B33' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}

/* Het knopje in de melding ("Winkelwagen bekijken") */
.woocommerce .woocommerce-message:focus,
.woocommerce .woocommerce-message:focus-visible,
.woocommerce .woocommerce-info:focus,
.woocommerce .woocommerce-info:focus-visible,
.woocommerce .woocommerce-error:focus,
.woocommerce .woocommerce-error:focus-visible,
.woocommerce-notices-wrapper:focus,
.woocommerce-notices-wrapper:focus-visible { outline: none; }

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
    order: 3;
    margin-left: auto;
    background: var(--cta);
    color: var(--cta-text);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px 18px;
    white-space: nowrap;
}
.woocommerce .woocommerce-message .button:hover { background: var(--cta-hover); color: var(--cta-text); }
.woocommerce .woocommerce-error li { margin: 0; }
.woocommerce .woocommerce-error a { color: var(--navy-700); font-weight: 700; }

@media (max-width: 1024px) {
    .woocommerce .woocommerce-message,
    .woocommerce .woocommerce-info,
    .woocommerce .woocommerce-error { padding: 14px 16px; font-size: 14.5px; }
    .woocommerce .woocommerce-message .button,
    .woocommerce .woocommerce-info .button { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   Uitlijning: elke pagina op dezelfde containerbreedte
   Staat bewust achteraan, zodat deze regels de eerdere breedtes
   en de eigen opmaak van WooCommerce overschrijven.
   ============================================================ */

/* Kop en inhoud volgen de container, net als de secties op de homepage.
   Alleen de regellengte wordt begrensd, niet de container zelf. */
.pt-pagehead__title { max-width: 22ch; }
.pt-pagehead__lede { max-width: 62ch; }

/* De modules vullen de kaart, met een leesbare regellengte voor lopende tekst */
.pt-runner,
.pt-fvt,
.pt-werkboek,
.pt-dash { margin: 0; }

.pt-werkboek__intro,
.pt-werkboek__uitleg,
.pt-werkboek__hint { max-width: 72ch; }
.pt-fvt__parcours p { max-width: 72ch; }

/* ------------------------------------------------------------
   Mijn account: WooCommerce zet zelf float en breedte op de twee
   kolommen. Die moeten uit, anders vecht dat met de grid.
   ------------------------------------------------------------ */
/* WooCommerce zet de twee kolommen zelf met floats neer. Meevechten met een
   grid leverde een omgekeerde indeling op, dus we houden hun model aan en
   geven het alleen andere maten. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 232px;
    border-right: 1px solid var(--line);
    padding-right: 24px;
    margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: calc(100% - 300px);
    margin: 0;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--r-btn);
    background: transparent;
    color: var(--body);
    font-size: 15px;
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--navy-50);
    color: var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--navy-900);
    color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content p { max-width: 68ch; }

@media (max-width: 1024px) {
    .pt-page__card { padding: 24px 20px; }
    .pt-runner .pt-browser { max-width: none; }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none;
        width: 100%;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 20px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li a {
        background: var(--navy-50);
        border-radius: var(--r-pill);
        padding: 9px 14px;
        font-size: 14px;
    }
}

/* Voorbeeldantwoorden in het werkboek */
.pt-werkboek__voorbeeld { margin-top: 10px; }
.pt-werkboek__voorbeeld summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-700);
    padding: 6px 0;
}
.pt-werkboek__voorbeeld summary:hover { color: var(--ink); }
.pt-werkboek__voorbeeld > p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--body);
    background: var(--navy-50);
    border-radius: var(--r-btn);
    padding: 14px 16px;
    margin-top: 6px;
    max-width: 72ch;
}
.pt-werkboek__voorbeeld--starr dl {
    margin: 8px 0 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    padding: 18px 20px;
    max-width: 72ch;
}
.pt-werkboek__voorbeeld--starr dt {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-top: 14px;
}
.pt-werkboek__voorbeeld--starr dt:first-child { margin-top: 0; }
.pt-werkboek__voorbeeld--starr dd {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
}
.pt-werkboek__waarschuwing {
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
    max-width: 72ch;
}
.pt-werkboek__starr-uitleg {
    font-size: 15px;
    line-height: 1.6;
    color: var(--body);
    background: var(--navy-50);
    border-left: 3px solid var(--navy-700);
    border-radius: var(--r-btn);
    padding: 14px 18px;
    margin-top: 18px;
    max-width: 72ch;
}

/* ============================================================
   Leesbaarheid binnen de kaart
   De kaart loopt tot de containerrand, maar lopende tekst wordt
   op regellengte begrensd; anders lees je regels van 140 tekens.
   ============================================================ */
.pt-page__card > p,
.pt-page__card > ul,
.pt-page__card > ol,
.pt-page__card > h2,
.pt-page__card > h3,
.pt-page__card > h4,
.pt-page__card > blockquote,
.pt-entry > p,
.pt-entry > ul,
.pt-entry > ol,
.pt-entry > h2,
.pt-entry > h3 { max-width: 72ch; }

.pt-page__card > p,
.pt-entry > p { margin-bottom: 16px; }
.pt-page__card > h2,
.pt-page__card > h3 { margin-top: 30px; margin-bottom: 10px; }
.pt-page__card > ul,
.pt-page__card > ol { padding-left: 22px; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.pt-page__card > ul li,
.pt-page__card > ol li { line-height: 1.65; }
.pt-page__card img { border-radius: var(--r-card); margin: 8px 0; }

/* Het oefenscherm is zelf al een kaart: die hoort op de kaartrand te
   staan, niet nog eens ingesprongen. */
.pt-page__card:has(.pt-runner) { padding: 0; }
.pt-runner .pt-browser { max-width: none; }

/* Waardebon: rustig regeltje in plaats van een opvallende balk */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin: 0 0 16px; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::after { content: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--navy-700);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.woocommerce form.checkout_coupon {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 20px 22px;
    margin: 0 0 18px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.woocommerce form.checkout_coupon p { margin: 0; }
.woocommerce form.checkout_coupon .form-row-first { flex: 1 1 240px; width: auto; float: none; }
.woocommerce form.checkout_coupon .form-row-last { flex: 0 0 auto; width: auto; float: none; }
.woocommerce form.checkout_coupon .button { padding: 13px 20px; }

/* ============================================================
   Bestelknop: over de volle breedte, met lucht eromheen
   WooCommerce zet de knop in een form-row met eigen padding,
   waardoor hij smaller werd dan de betaalmethoden erboven.
   ============================================================ */
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout #payment .place-order {
    padding: 0;
    margin: 0;
    width: 100%;
    float: none;
}
.woocommerce-checkout #payment ul.payment_methods {
    padding-bottom: 0;
    margin-bottom: 0;
}
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment .button.alt {
    display: block;
    width: 100%;
    margin: 28px 0 0;
    padding: 18px 20px;
    font-size: 17px;
    line-height: 1.2;
}
.pt-checkout-onder {
    margin-top: 26px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    text-align: center;
}

/* De voorwaarden-tekst zit tussen de methoden en de knop; ook lucht geven */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin-top: 20px;
    padding: 0;
}

@media (max-width: 1024px) {
    .woocommerce-checkout #place_order { margin-top: 22px; padding: 16px 18px; }
}

/* ---------- E-mailvraag voor de uitslag van de proeftest ---------- */
.pt-runner__mailpoort {
    padding: 28px 0 8px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.pt-runner__mailpoort h3 { font-size: 21px; line-height: 1.25; }
.pt-runner__mailpoort > p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 10px 0 20px; }
.pt-runner__mailpoort input[type="email"] {
    width: 100%;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 14px 15px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    text-align: center;
}
.pt-runner__mailpoort input[type="email"]:focus { outline: 2px solid var(--cta); outline-offset: 1px; }
.pt-runner__optin {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
    margin: 14px 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    cursor: pointer;
}
.pt-runner__optin input { margin-top: 2px; flex: none; }
.pt-runner__mailfout {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #A33B33;
}
.pt-uitslag__gemaild {
    font-size: 14px;
    color: var(--muted);
    margin-top: 14px;
}

/* ============================================================
   Logo: schild met vinkje plus woordmerk
   ============================================================ */
.pt-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}
.pt-logo:hover { color: inherit; }
.pt-logo__merk { flex: none; }
.pt-logo__tekst { display: flex; flex-direction: column; }
.pt-logo__woord {
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.pt-logo__woord span { color: var(--on-navy-faint); }
.pt-logo__onder {
    font-weight: 700;
    letter-spacing: .3em;
    line-height: 1;
    margin-top: 4px;
    color: var(--on-navy-micro);
    white-space: nowrap;
}
.pt-logo--footer { gap: 10px; }

/* Variant op een lichte ondergrond */
.pt-logo--licht .pt-logo__woord { color: var(--ink); }
.pt-logo--licht .pt-logo__woord span { color: var(--muted); }
.pt-logo--licht .pt-logo__onder { color: var(--muted); }

@media (max-width: 1024px) {
    .pt-logo { gap: 9px; }
    .pt-logo__merk { width: 26px; height: 26px; }
    .pt-logo__woord { font-size: 14.5px !important; }
    .pt-logo__onder { font-size: 8px !important; letter-spacing: .26em; }
}

/* ============================================================
   Blogarchief: kaarten met een echte link naar het artikel
   ============================================================ */
.pt-postlijst {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 860px;
}
.pt-postkaart {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pt-postkaart__datum {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.pt-postkaart__titel { font-size: 21px; line-height: 1.28; margin: 0; }
.pt-postkaart__titel a { color: var(--ink); text-decoration: none; }
.pt-postkaart__titel a:hover { color: var(--cta); }
.pt-postkaart__tekst { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }
.pt-postkaart .pt-textlink { margin-top: auto; padding-top: 6px; }

.pt-terug { margin-top: 22px; }

/* Paginering van het archief */
.pt-page__body .navigation.pagination { margin-top: 26px; }
.pt-page__body .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-page__body .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.pt-page__body .nav-links .page-numbers.current {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}
.pt-page__body .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   WooCommerce zet <wc-order-attribution-inputs> als los kind in
   form.checkout. Als rasteritem pakte dat kolom 2 van de eerste
   rij, waardoor de bestelsamenvatting onder het formulier viel
   in plaats van ernaast. Het element bevat alleen verborgen
   velden, die versturen ook zonder weergave.
   ============================================================ */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs { display: none; }

/* De waardebonknop mag niet met de bestelknop concurreren */
.woocommerce form.checkout_coupon .button {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--outline);
}
.woocommerce form.checkout_coupon .button:hover {
    background: var(--navy-50);
    border-color: var(--navy-700);
    color: var(--ink);
}

/* ============================================================
   Knoppen: gemeten in de render, niet geschat
   Op de afrekenpagina zat 81 px lucht boven de bestelknop en
   bijna niets eronder; op de accountpagina plakte de knop
   tegen de veldenbak. Beide krijgen nu dezelfde maatvoering.
   ============================================================ */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 0; }
/* WooCommerce laat deze knop zweven. Daardoor stond de geruststellende regel
   eronder in werkelijkheid achter de knop te beginnen en deed geen enkele
   marge iets. Dit is de oorzaak van de uitlijning die steeds terugkwam. */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #payment .button.alt {
    float: none;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
}
.pt-checkout-onder { margin-top: 18px; margin-bottom: 0; }
.woocommerce-checkout #order_review { padding-bottom: 30px; }

/* De leesbreedte van 68ch gold ook voor formulierrijen, want WooCommerce zet
   die in <p>-tags. Daardoor waren de invoervelden smaller dan hun kolom. */
.woocommerce-account .woocommerce-MyAccount-content p.form-row { max-width: none; }

/* De browser-fieldset om de wachtwoordvelden viel uit de toon; het is gewoon
   een tweede blok in hetzelfde formulier. */
.woocommerce-EditAccountForm fieldset {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 24px 0 0;
    margin: 30px 0 0;
    min-width: 0;
}
.woocommerce-EditAccountForm legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}
.woocommerce-EditAccountForm > p:last-of-type { margin: 32px 0 0; }
.woocommerce-EditAccountForm button[type="submit"] { margin-top: 0; }

/* ============================================================
   Gereedheidsmeter op de voortgangspagina
   ============================================================ */
.pt-gereed {
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 30px 32px;
    margin-bottom: 26px;
    color: #fff;
}
.pt-gereed--klaar { background: #0E3B2A; }
.pt-gereed__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.pt-gereed__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-navy-faint);
    margin: 0 0 6px;
}
.pt-gereed__titel { font-size: 26px; line-height: 1.15; color: #fff; margin: 0; }
.pt-gereed__score {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.pt-gereed__balk {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
    margin: 18px 0 0;
}
.pt-gereed__balk span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cta);
}
.pt-gereed--klaar .pt-gereed__balk span { background: #4ED18B; }
.pt-gereed__tekst {
    font-size: 15px;
    line-height: 1.6;
    color: var(--on-navy-soft);
    margin: 14px 0 0;
    max-width: 68ch;
}
.pt-gereed__delen {
    list-style: none;
    margin: 24px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 20px;
}
.pt-gereed__delen > li { margin: 0; }
.pt-gereed__deelkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 15px;
    font-weight: 700;
}
.pt-gereed__deelkop a { color: #fff; text-decoration: none; }
.pt-gereed__deelkop a:hover { color: var(--on-navy-faint); }
.pt-gereed__deelkop span { color: var(--on-navy-faint); font-variant-numeric: tabular-nums; }
.pt-gereed__balk--klein { height: 6px; margin-top: 8px; }
.pt-gereed__delen p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--on-navy-soft);
    margin: 8px 0 0;
    max-width: 72ch;
}
.pt-gereed__voetnoot {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--on-navy-micro);
    margin: 22px 0 0;
    max-width: 76ch;
}

@media (max-width: 1024px) {
    .pt-gereed { padding: 22px 20px; }
    .pt-gereed__titel { font-size: 21px; }
    .pt-gereed__score { font-size: 30px; }
}

/* ============================================================
   Winkelwagen
   Deze pagina was nooit opgemaakt omdat de prijskaarten direct
   naar de afrekenpagina gaan. Wie hier toch belandt, hoorde een
   paarse WooCommerce-knop en een afgeknepen bonveld te zien.
   ============================================================ */
.woocommerce-cart .pt-page__card { padding: 34px 36px; }

/* Digitale pakketten hebben geen productfoto; een lege plaatshouder
   is erger dan geen kolom. */
.woocommerce-cart table.shop_table .product-thumbnail,
.woocommerce-cart table.shop_table th.product-thumbnail { display: none; }

.woocommerce-cart table.shop_table {
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 0 0 24px;
}
.woocommerce-cart table.shop_table th {
    background: var(--navy-50);
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 15px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}
.woocommerce-cart table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px;
    font-size: 15px;
    vertical-align: middle;
}
.woocommerce-cart table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce-cart table.shop_table td.product-name a {
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}
.woocommerce-cart table.shop_table td.product-remove a.remove {
    color: var(--muted) !important;
    font-size: 20px;
    line-height: 1;
    background: none !important;
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover { color: #A33B33 !important; }

/* De bonrij: veld en knop op één lijn, met een leesbare breedte */
.woocommerce-cart .coupon {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    float: none !important;
    width: auto !important;
}
.woocommerce-cart .coupon label { display: none; }
.woocommerce-cart .coupon #coupon_code {
    width: 240px;
    min-width: 0;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
}
.woocommerce-cart .actions { padding: 0 !important; }

/* Secundaire knoppen mogen niet met de hoofdknop concurreren */
.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="update_cart"] {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-btn);
    padding: 12px 18px;
    font-weight: 700;
    font-size: 15px;
}
.woocommerce-cart .coupon .button:hover,
.woocommerce-cart button[name="update_cart"]:hover {
    background: var(--navy-50);
    border-color: var(--navy-700);
    color: var(--ink);
}
.woocommerce-cart button[name="update_cart"]:disabled { opacity: .45; }

/* Totalen in hetzelfde paneel als op de afrekenpagina */
.woocommerce-cart .cart-collaterals { width: 100%; float: none; }
.woocommerce-cart .cart_totals {
    width: 100% !important;
    float: none !important;
    max-width: 460px;
    margin-left: auto;
    background: var(--navy-50);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 24px 26px;
}
.woocommerce-cart .cart_totals h2 { font-size: 18px; margin: 0 0 14px; }
.woocommerce-cart .cart_totals table.shop_table {
    border: 0;
    margin: 0 0 18px;
    background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    background: transparent;
    padding: 10px 0;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    font-weight: 500;
}
.woocommerce-cart .cart_totals table.shop_table th { font-weight: 600; color: var(--body); }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td { font-weight: 800; font-size: 17px; }
.woocommerce-cart .cart_totals td { text-align: right; }

/* De hoofdknop hoort oranje te zijn, niet WooCommerce-paars */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    background: var(--cta);
    color: var(--cta-text);
    border-radius: var(--r-btn);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--cta-hover); color: var(--cta-text); }

.woocommerce-cart .cart-empty { font-size: 17px; }

@media (max-width: 1024px) {
    .woocommerce-cart .pt-page__card { padding: 22px 18px; }
    .woocommerce-cart .cart_totals { max-width: none; }
    .woocommerce-cart .coupon #coupon_code { width: 100%; }
}

/* ============================================================
   Cookiebanner
   Accepteren en weigeren staan naast elkaar, even groot en even
   opvallend: de keuze moet echt vrij zijn.
   ============================================================ */
.pt-cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: 0 12px 40px rgba(10, 31, 60, .18);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.pt-cookie__binnen {
    max-width: 780px;
    margin: 0 auto;
    padding: 26px 28px;
}
.pt-cookie__titel { font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.pt-cookie__tekst {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}
.pt-cookie__tekst a { color: var(--navy-700); }

.pt-cookie__keuzes {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.pt-cookie__cat p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--body);
    margin: 6px 0 0 28px;
}
.pt-cookie__namen {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    word-break: break-word;
}
.pt-cookie__schakel {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.pt-cookie__schakel input {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--navy-700);
    cursor: pointer;
}
.pt-cookie__schakel input:disabled { cursor: default; opacity: .55; }
.pt-cookie__catnaam em { font-style: normal; font-weight: 500; color: var(--muted); }

.pt-cookie__knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.pt-cookie__knoppen .pt-btn { flex: 1 1 210px; justify-content: center; }
.pt-cookie__meer {
    flex: none;
    background: none;
    border: 0;
    padding: 12px 6px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy-700);
    text-decoration: underline;
    cursor: pointer;
}
.pt-cookie__meer:hover { color: var(--ink); }
.pt-cookie__bewaar { flex: 1 1 100%; }

/* De link waarmee je je keuze later weer aanpast */
.pt-footer__col button[data-pt-cookievoorkeur] {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: 14.5px;
    line-height: inherit;
    color: var(--on-navy-soft);
    text-align: left;
    cursor: pointer;
}
.pt-footer__col button[data-pt-cookievoorkeur]:hover { color: #fff; }

/* Staat hier en niet bij de andere mobiele regels: die komen eerder in
   het bestand en zouden van de regel hierboven verliezen. */
@media (max-width: 640px) {
    .pt-footer__col button[data-pt-cookievoorkeur] { font-size: 13.5px; }
}

@media (max-width: 640px) {
    .pt-cookie { left: 8px; right: 8px; bottom: 8px; }
    .pt-cookie__binnen { padding: 20px 18px; }
    .pt-cookie__knoppen .pt-btn { flex: 1 1 100%; }
}

/* Weigeren even zwaar in beeld als accepteren: zelfde maat, zelfde
   vlakvulling, andere kleur. Een omlijnde knop naast een gevulde leest
   als tweede keuze, en dat mag hier niet. */
.pt-cookie__weiger {
    background: var(--navy-900);
    color: #fff;
    border: 0;
    font-size: 17px;
    padding: 17px 28px;
}
.pt-cookie__weiger:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pt-cookie__bewaar { background: #fff; }
.pt-cookie__verwijzing {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin: 16px 0 0;
}
.pt-cookie__verwijzing a { color: var(--navy-700); }

/* Tabellen in paginatekst (cookieverklaring) */
.pt-page__card .pt-tabel { display: block; overflow-x: auto; margin: 14px 0 26px; }
.pt-page__card .pt-tabel table,
.pt-page__card table.pt-tabel {
    width: 100%;
    border-collapse: collapse;
}
.pt-page__card table.pt-tabel {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    margin: 14px 0 26px;
    font-size: 14.5px;
}
.pt-page__card table.pt-tabel th {
    background: var(--navy-50);
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.pt-page__card table.pt-tabel td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
    vertical-align: top;
    color: var(--body);
}
.pt-page__card table.pt-tabel tbody tr:last-child td { border-bottom: 0; }
.pt-page__card table.pt-tabel td:first-child {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
}
.pt-page__card > h3 { font-size: 19px; margin-top: 28px; margin-bottom: 8px; }

@media (max-width: 640px) {
    .pt-page__card table.pt-tabel td:first-child { white-space: normal; }
}

/* ============================================================
   Trainingsschema
   ============================================================ */
.pt-schema__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    background: var(--navy-900);
    border-radius: var(--r-panel);
    padding: 28px 32px;
    color: #fff;
    flex-wrap: wrap;
}
.pt-schema__stand { flex: 1 1 320px; min-width: 0; }
.pt-schema__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-navy-faint);
    margin: 0 0 6px;
}
.pt-schema__titel { font-size: 24px; line-height: 1.2; color: #fff; margin: 0 0 16px; }
.pt-schema__balk {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.pt-schema__balk span { display: block; height: 100%; border-radius: 999px; background: var(--cta); }

.pt-schema__telling { flex: none; text-align: right; }
.pt-schema__getal {
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.pt-schema__eenheid { display: block; font-size: 14px; color: var(--on-navy-soft); margin-top: 4px; }
.pt-schema__datum { display: block; font-size: 12.5px; color: var(--on-navy-micro); margin-top: 6px; }

.pt-schema__melding {
    background: var(--navy-50);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    padding: 13px 16px;
    font-size: 14.5px;
    margin: 16px 0 0;
}

/* ---------- instellingen ---------- */
.pt-schema__form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 30px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}
.pt-schema__veld { display: flex; flex-direction: column; gap: 5px; }
.pt-schema__veld label {
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
}
.pt-schema__veld input,
.pt-schema__veld select {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 11px 13px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    min-width: 165px;
}
.pt-schema__veld input:focus,
.pt-schema__veld select:focus { outline: 2px solid var(--cta); outline-offset: 1px; }
.pt-schema__form .pt-btn { padding: 12px 20px; font-size: 15px; width: auto; }

/* ---------- weken ---------- */
.pt-schema__verder {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 34px 0 14px;
}
.pt-week {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 22px 24px;
    margin-bottom: 12px;
}
.pt-week--nu { border-color: var(--outline); box-shadow: 0 1px 2px rgba(10, 31, 60, .04), 0 14px 30px -24px rgba(10, 31, 60, .5); }
.pt-week__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.pt-week__kop h3 { font-size: 18px; margin: 0; color: var(--ink); }
.pt-week--nu .pt-week__kop h3 { font-size: 21px; }
.pt-week__kop span { font-size: 13px; color: var(--muted); }
.pt-week__leeg, .pt-week__samenvatting { font-size: 14.5px; color: var(--muted); margin: 0; }
.pt-week--compact { padding: 15px 24px; }
.pt-week--compact .pt-week__kop { margin-bottom: 5px; }
.pt-week--compact .pt-week__kop h3 { font-size: 15.5px; }

/* ---------- taken ---------- */
.pt-taken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-taak {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    margin: 0;
}
.pt-taak--nadruk { background: var(--navy-50); border-color: var(--outline); }
.pt-taak__icoon { color: var(--navy-700); margin-top: 2px; }
.pt-taak__inhoud { min-width: 0; }
.pt-taak h4 { font-size: 15.5px; margin: 0 0 3px; color: var(--ink); }
.pt-taak__wat { font-size: 14.5px; line-height: 1.55; color: var(--body); margin: 0; }
.pt-taak__waarom { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }
.pt-taak__knop {
    align-self: center;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-700);
    text-decoration: none;
}
.pt-taak__knop:hover { color: var(--ink); }

.pt-schema__voet {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    max-width: 72ch;
}

@media (max-width: 720px) {
    .pt-schema__kop { padding: 22px 20px; }
    .pt-schema__telling { text-align: left; }
    .pt-schema__form { padding: 16px 16px; }
    .pt-schema__veld { flex: 1 1 100%; }
    .pt-schema__veld input, .pt-schema__veld select { width: 100%; min-width: 0; }
    .pt-taak { grid-template-columns: 22px 1fr; }
    .pt-taak__knop { grid-column: 2; margin-top: 6px; }
}
.pt-gereed__schema { font-size: 14.5px; line-height: 1.6; color: var(--on-navy-soft); margin: 20px 0 0; }
.pt-gereed__schema a { color: #fff; font-weight: 700; }
.pt-gereed__schema strong { color: #fff; }

/* ============================================================
   Bestelgegevens op de bedanktpagina en in het account
   Dit was nog helemaal standaard WooCommerce: een ingesprongen
   lijstje, een kale tabel en paarse knoppen.
   ============================================================ */
.woocommerce-order .woocommerce-notice--success {
    font-size: 17px;
    color: var(--ink);
    margin: 0 0 20px;
    padding: 0;
    background: none;
    border: 0;
}
.woocommerce-order .woocommerce-notice--success::before { display: none; }

/* De strook met bestelnummer, datum, e-mail en totaal */
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}
.woocommerce-order ul.woocommerce-order-overview li,
.woocommerce-order ul.order_details li {
    float: none;
    flex: 1 1 150px;
    margin: 0;
    padding: 15px 18px;
    border: 0;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
}
.woocommerce-order ul.woocommerce-order-overview li strong,
.woocommerce-order ul.order_details li strong {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order h2 {
    font-size: 20px;
    margin: 30px 0 14px;
    color: var(--ink);
}
.woocommerce-order .pt-bedankt h2 { color: #fff; margin: 0 0 6px; }

/* De regels van de bestelling */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.shop_table {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 0 0 8px;
    font-size: 15px;
}
.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.shop_table th {
    background: var(--navy-50);
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 13px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}
.woocommerce-order table.woocommerce-table--order-details td,
.woocommerce-order table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
    vertical-align: middle;
    color: var(--body);
}
.woocommerce-order table.woocommerce-table--order-details tfoot th,
.woocommerce-order table.shop_table tfoot th {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    color: var(--body);
    font-weight: 600;
}
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
    font-weight: 800;
    color: var(--ink);
    font-size: 16px;
}
.woocommerce-order table.woocommerce-table--order-details td:last-child,
.woocommerce-order table.woocommerce-table--order-details th:last-child { text-align: right; }
.woocommerce-order .woocommerce-table__product-name a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

/* Betalen en annuleren waren nog WooCommerce-paars */
.woocommerce-order .woocommerce-button,
.woocommerce-order td .button {
    display: inline-block;
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--outline);
    border-radius: var(--r-btn);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 8px;
}
.woocommerce-order .woocommerce-button:hover,
.woocommerce-order td .button:hover {
    background: var(--navy-50);
    border-color: var(--navy-700);
    color: var(--ink);
}
.woocommerce-order .woocommerce-button.pay,
.woocommerce-order .woocommerce-button.button.pay {
    background: var(--cta);
    border-color: var(--cta);
    color: var(--cta-text);
}
.woocommerce-order .woocommerce-button.pay:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

/* Factuuradres */
.woocommerce-customer-details { margin-top: 4px; }
.woocommerce-customer-details address {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 18px 20px;
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    width: 100%;
}
.woocommerce-customer-details .woocommerce-customer-details--email,
.woocommerce-customer-details .woocommerce-customer-details--phone {
    display: block;
    margin-top: 6px;
    color: var(--navy-700);
}

@media (max-width: 720px) {
    .woocommerce-order table.woocommerce-table--order-details th,
    .woocommerce-order table.woocommerce-table--order-details td { padding: 12px 14px; }
}

/* ============================================================
   Downloadpagina van het e-book
   Stond er nog uit 2018 bij: een tabel met kale <button>-tags.
   ============================================================ */
.pt-downloads {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 26px;
}
.pt-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px 20px;
    background: #fff;
}
.pt-download__wat { min-width: 0; }
.pt-download__naam {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}
.pt-download__meta {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    margin-top: 3px;
}
.pt-download__knop {
    flex: none;
    font-size: 15px;
    padding: 12px 22px;
}
.pt-page__card > .pt-download__voet,
.pt-download__voet {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 14px;
}
.pt-download__voet a { color: var(--navy-700); }

/* Het wachtwoordformulier dat WordPress voor de pagina zet */
.pt-page__card .post-password-form { max-width: 460px; }
.pt-page__card .post-password-form p { font-size: 15.5px; }
.pt-page__card .post-password-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
    margin-bottom: 5px;
}
.pt-page__card .post-password-form input[type="password"] {
    width: 100%;
    max-width: 300px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
}
.pt-page__card .post-password-form input[type="password"]:focus { outline: 2px solid var(--cta); outline-offset: 1px; }
.pt-page__card .post-password-form input[type="submit"] {
    margin-top: 12px;
    background: var(--cta);
    color: var(--cta-text);
    border: 0;
    border-radius: var(--r-btn);
    padding: 12px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.pt-page__card .post-password-form input[type="submit"]:hover { background: var(--cta-hover); }

@media (max-width: 560px) {
    .pt-download { align-items: flex-start; }
    .pt-download__knop { width: 100%; text-align: center; justify-content: center; }
}

/* Eigen wachtwoordformulier, in plaats van dat van WordPress */
.pt-wwform { max-width: 420px; }
.pt-wwform__uitleg { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0 0 18px; }
.pt-wwform__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
    margin-bottom: 6px;
}
.pt-wwform input[type="password"] {
    display: block;
    width: 100%;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-btn);
    padding: 13px 15px;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: .06em;
    color: var(--ink);
}
.pt-wwform input[type="password"]:focus { outline: 2px solid var(--cta); outline-offset: 1px; }
.pt-wwform .pt-btn { margin-top: 16px; width: 100%; justify-content: center; }

/* Aanbod midden in een inhoudspagina, zonder de leesbaarheid te breken */
.pt-page__card .pt-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    background: var(--navy-900);
    border-radius: var(--r-card);
    padding: 22px 26px;
    margin: 26px 0;
}
.pt-inline-cta__tekst { min-width: 0; flex: 1 1 320px; }
.pt-inline-cta__tekst strong {
    display: block;
    font-size: 17px;
    color: #fff;
    line-height: 1.3;
}
.pt-inline-cta__tekst span {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--on-navy-soft);
    margin-top: 5px;
}
.pt-inline-cta .pt-btn { flex: none; font-size: 15.5px; padding: 14px 22px; }
/* wpautop wikkelt de knop in een <p>; die mag geen eigen ruimte innemen. */
.pt-inline-cta > p { display: contents; }

@media (max-width: 620px) {
    .pt-page__card .pt-inline-cta { padding: 18px 18px; }
    .pt-inline-cta .pt-btn { width: 100%; justify-content: center; }
}

/* Tabellen in de inhoudspagina's (Coopertest, push-ups, normtijden) */
.pt-page__card > table,
.pt-page__card table:not(.pt-tabel) {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 14px 0 26px;
    font-size: 15px;
}
.pt-page__card table:not(.pt-tabel) th {
    background: var(--navy-50);
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.pt-page__card table:not(.pt-tabel) td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--body);
    font-variant-numeric: tabular-nums;
}
.pt-page__card table:not(.pt-tabel) tbody tr:last-child td { border-bottom: 0; }

/* Op een smal scherm passen de tabellen met normtijden en cookies niet.
   Een tabel kan zelf de scrollcontainer zijn; dan schuift alleen de tabel
   opzij in plaats van de hele pagina. */
@media (max-width: 720px) {
    .pt-page__card table,
    .pt-page__card table.pt-tabel {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pt-page__card table th,
    .pt-page__card table td { white-space: nowrap; }
    .pt-page__card table.pt-tabel td:nth-child(2) { white-space: normal; min-width: 190px; }
}

/* De kop van een onderdeelkaart is een link naar de uitleg; hij hoort er
   wel als kop uit te blijven zien. */
.pt-card__kop a {
    color: inherit;
    text-decoration: none;
}
.pt-card__kop a:hover,
.pt-card__kop a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Citaat in een artikel: een streep in de accentkleur en wat lucht eromheen. */
.pt-page__card blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--cta);
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
}
.pt-page__card blockquote p { margin: 0 0 8px; }
.pt-page__card blockquote p:last-child { margin-bottom: 0; }
.pt-page__card blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 14.5px;
    font-style: normal;
    color: var(--muted);
}

/* Een afbeelding in een artikel mag over de volle kaartbreedte. */
.pt-page__card figure {
    margin: 30px 0;
    max-width: 62ch;
}
.pt-page__card figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-card);
    box-shadow: 0 1px 2px rgba(11, 30, 56, .06), 0 10px 28px -14px rgba(11, 30, 56, .28);
}
.pt-page__card figcaption {
    margin-top: 9px;
    font-size: 14px;
    color: var(--muted);
}

/* Het blok waarmee een onderdeelpagina zijn artikelen aanhaakt. */
.pt-page__card .pt-cluster {
    margin: 34px 0 4px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.pt-page__card .pt-cluster h2 { margin-top: 0; }
.pt-cluster__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.pt-cluster__lijst li { line-height: 1.5; }
.pt-cluster__lijst a { font-weight: 600; }
.pt-cluster__lijst span {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: var(--muted);
}

/* De regel bovenin een artikel die naar de onderdeelpagina wijst. */
.pt-artikel__pijler {
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px;
    color: var(--muted);
}

/* Links in de lopende tekst zichtbaar maken. De streep volgt de kleur van de
   link zelf via currentColor, zodat hij ook op de donkere blokken klopt.
   Knoppen en kaartkoppen blijven eruit: die zijn al herkenbaar. */
.pt-page__card p a:not(.pt-btn):not(.button),
.pt-page__card li a:not(.pt-btn):not(.button),
.pt-page__card td a:not(.pt-btn):not(.button),
.pt-page__card blockquote a:not(.pt-btn):not(.button),
.pt-page__card figcaption a:not(.pt-btn):not(.button) {
    border-bottom: 1px solid currentColor;
    border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
    transition: border-bottom-color .12s ease;
}
.pt-page__card p a:not(.pt-btn):not(.button):hover,
.pt-page__card li a:not(.pt-btn):not(.button):hover,
.pt-page__card td a:not(.pt-btn):not(.button):hover,
.pt-page__card blockquote a:not(.pt-btn):not(.button):hover,
.pt-page__card figcaption a:not(.pt-btn):not(.button):hover {
    border-bottom-color: currentColor;
}

/* Het accountmenu is navigatie en geen lopende tekst; de streep onder de
   contentlinks hoort er dus niet omheen. */
.pt-page__card .woocommerce-MyAccount-navigation li a:not(.pt-btn),
.pt-page__card .pt-cluster__lijst li a:not(.pt-btn),
.pt-page__card .pt-zusjes li a:not(.pt-btn) {
    border-bottom: 0;
}
.pt-page__card .pt-cluster__lijst li a:not(.pt-btn):hover,
.pt-page__card .pt-zusjes li a:not(.pt-btn):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Het honeypotveld staat buiten de flow, niet op display:none: een
   grid-kind dat verdwijnt laat zijn cel achter, en dat is hier eerder
   misgegaan met wc-order-attribution-inputs. */
.pt-hp {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.woocommerce form .form-row[hidden] { display: none; }
.pt-land-open { margin: 0 0 6px; }
.pt-land-open__knop {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.pt-land-open__knop:hover { color: var(--ink); }

/* Bij begrijpend lezen staat de tekst boven de vraag. Hij moet als blok
   te herkennen zijn, want anders leest de vraag als de laatste zin ervan. */
.pt-runner .pt-leestekst {
    background: var(--navy-50);
    border-radius: var(--r-card);
    padding: 16px 18px;
    margin-bottom: 16px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--body);
    max-width: 68ch;
}
.pt-runner .pt-leesvraag { font-weight: 700; color: var(--ink); }

/* Uitleg bij een percentage dat daalde omdat er een vraagtype bij kwam.
   Rustiger dan de stap eronder: het is geen opdracht maar een verklaring. */
.pt-gereed__nieuw {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}
.pt-gereed__nieuw strong { color: var(--ink); font-weight: 600; }

/* Balken op een telefoon */

/* Twee kolommen van 180 px met een icoon en twee regels tekst ernaast
   levert vier woorden per regel op. Onder de 640 px staan ze onder elkaar;
   dat is hoger maar leesbaar, en het is precies wat de balk moet doen. */
@media (max-width: 640px) {
    .pt-trust {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pt-trust__item { align-items: flex-start; }
    .pt-trust__t { font-size: 14.5px; }
    .pt-trust__s { font-size: 13px; }

    /* Drie items in twee kolommen laat er een alleen achter en breekt de
       labels midden in een woord af. Onder elkaar is hoger maar leest wel. */
    .pt-stats__grid { grid-template-columns: 1fr; gap: 26px; }
    .pt-stats__n { font-size: 42px; }
}

/* Initialen in plaats van een foto. Een gezicht bij het citaat van iemand
   anders wekt de indruk dat je die persoon ziet, en dat is precies de
   suggestie die een review niet mag wekken. */
.pt-quote__avatar--letters {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-50);
    color: var(--navy-700);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
}
.pt-testimonials__herkomst {
    margin: 22px auto 0;
    max-width: 68ch;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* De wachttijdentabel staat in een tekstkolom en niet in een kaart, dus hij
   heeft zijn eigen maatvoering nodig. De rechterkolom is het getal waar het
   om gaat en die staat daarom rechts uitgelijnd. */
.pt-wachttijden {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    margin: 20px 0 14px;
    font-size: 15px;
    background: #fff;
}
.pt-wachttijden th {
    background: var(--navy-50);
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}
.pt-wachttijden td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--body);
}
.pt-wachttijden tbody tr:last-child td { border-bottom: 0; }
.pt-wachttijden th:last-child,
.pt-wachttijden td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pt-bron {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 18px;
}

/* De wachttijdentabel is twee smalle kolommen en past ook op een telefoon.
   De algemene regel hierboven zet elke tabel in een kaart op nowrap zodat
   brede tabellen opzij schuiven; hier kapte dat juist de kop af. */
@media (max-width: 720px) {
    .pt-page__card table.pt-wachttijden { display: table; overflow: visible; }
    .pt-page__card table.pt-wachttijden th,
    .pt-page__card table.pt-wachttijden td { white-space: normal; }
    .pt-page__card table.pt-wachttijden td:last-child { white-space: nowrap; }
    .pt-page__card table.pt-wachttijden td:nth-child(2) { min-width: 0; }
    .pt-wachttijden th { font-size: 10.5px; letter-spacing: .06em; }
}