/* PadelRadar Rackets — Frontend CSS 2.0.0 */

/* ── Reset & base ────────────────────────────────────────────────────────── */
.pr-page-bg { background: var(--pr-pagina-bg, #f8f8f7); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.pr-container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* ── Kleuren — balkenkleuren altijd hardcoded inline in PHP ─────────────── */
/* CSS klassen als aanvulling voor PDP scores (groot) */
.pr-balk-power        { background: #E24B4A; }
.pr-balk-controle     { background: #378ADD; }
.pr-balk-wendbaarheid { background: #1D9E75; }
.pr-balk-comfort      { background: #7F77DD; }
.pr-balk-spin         { background: #BA7517; }
.pr-balk-sweetspot    { background: #D4537E; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.pr-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.pr-badge-beginner  { background: var(--pr-badge-beginner,  #EAF3DE); color: #1a4a0a; }
.pr-badge-gemiddeld { background: var(--pr-badge-gemiddeld, #E6F1FB); color: #0a3a7c; }
.pr-badge-gevorderd { background: var(--pr-badge-gevorderd, #FAEEDA); color: #5a3000; }
.pr-badge-pro       { background: var(--pr-badge-pro,       #EEEDFE); color: #2a1a6c; }

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.pr-btn {
    display: inline-block; padding: 10px 20px;
    background: var(--pr-knop-kleur, #1a56db); color: #fff;
    border-radius: var(--pr-knop-radius, 6px); text-decoration: none;
    font-size: 13px; font-weight: 500; border: none; cursor: pointer;
    transition: opacity .15s;
}
.pr-btn:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.pr-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; border: 1px solid #ccc; color: #333; background: #f5f5f5; }
.pr-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.pr-breadcrumb { font-size: 12px; color: #666; margin-bottom: 1rem; display: flex; gap: 6px; flex-wrap: wrap; }
.pr-breadcrumb a { color: #666; text-decoration: none; }
.pr-breadcrumb a:hover { color: var(--pr-accent, #1a56db); }

/* ── Contextuele nav ─────────────────────────────────────────────────────── */
.pr-context-nav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 12px; font-size: 13px;
}
.pr-context-nav a { color: #444; text-decoration: none; }
.pr-context-nav a:hover { color: var(--pr-accent, #1a56db); }
.pr-context-nav .pr-context-nav__cta { color: var(--pr-accent, #1a56db); font-weight: 500; margin-left: auto; }
.pr-context-nav span { color: #ddd; }
@media (max-width: 480px) { .pr-context-nav .pr-context-nav__cta { margin-left: 0; } }

/* ── PDP grid ────────────────────────────────────────────────────────────── */
.pr-pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem; }
@media (max-width: 680px) { .pr-pdp-grid { grid-template-columns: 1fr; } }

.pr-pdp-img-main {
    background: #f0f0ee; border-radius: 12px; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pr-pdp-img-main img { max-width: 85%; max-height: 85%; object-fit: contain; }
.pr-pdp-placeholder-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pr-pdp-placeholder-svg svg { width: 85%; height: 85%; border-radius: 8px; }
.pr-pdp-img-placeholder { width: 100%; height: 100%; }

.pr-pdp-merk-badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: var(--pr-accent, #1a56db); background: rgba(26,86,219,.08);
    padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; text-decoration: none;
}
.pr-pdp-titel { font-size: 22px; font-weight: 800; line-height: 1.3; color: #0d0d0d; margin: 0 0 10px; letter-spacing: -.01em; }
.pr-pdp-intro { font-size: 14px; color: #2c2c2a; line-height: 1.7; margin-bottom: 16px; }

.pr-pdp-prijs-wrap { margin-bottom: 14px; }
.pr-pdp-prijs-lbl, .pr-pdp-prijs-was { font-size: 12px; color: #666; display: block; margin-bottom: 2px; }
.pr-pdp-prijs { font-size: 28px; font-weight: 700; color: var(--pr-accent, #1a56db); }

/* ── Affiliate knoppen ───────────────────────────────────────────────────── */
.pr-affiliate-wrap { margin-bottom: 16px; }
.pr-affiliate-lbl { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.pr-aff-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 8px; border: 1px solid #e0e0e0;
    background: #fff; text-decoration: none; color: #111; margin-bottom: 8px;
    transition: border-color .15s;
}
.pr-aff-btn:hover { border-color: var(--pr-accent, #1a56db); text-decoration: none; }
.pr-aff-shop { font-size: 13px; font-weight: 500; color: #111; }
.pr-aff-prijs { font-size: 14px; font-weight: 600; color: var(--pr-accent, #1a56db); }
.pr-aff-arrow { color: #aaa; }

/* Google Shopping knop */
.pr-google-shopping-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 14px; border: 1.5px solid #e0e0e0; border-radius: 8px;
    background: #fff; color: #333; font-size: 13px; font-weight: 500;
    text-decoration: none; margin-bottom: 8px; transition: border-color .15s;
}
.pr-google-shopping-btn:hover { border-color: #4285F4; color: #111; text-decoration: none; }

/* Vergelijk knop */
.pr-vergelijk-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px 14px; border: 1.5px dashed #ddd; border-radius: 8px;
    background: transparent; color: #555; font-size: 13px; cursor: pointer;
    transition: all .15s; margin-top: 4px;
}
.pr-vergelijk-btn:hover { border-color: var(--pr-accent, #1a56db); color: var(--pr-accent, #1a56db); background: #f5f8ff; }

.pr-pdp-niveau { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── PDP specs + scores ──────────────────────────────────────────────────── */
.pr-pdp-specs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 680px) { .pr-pdp-specs-wrap { grid-template-columns: 1fr; } }

.pr-section-titel { font-size: 16px; font-weight: 700; color: #0d0d0d; margin-bottom: 1rem; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.pr-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pr-spec-item { background: #f5f5f5; border-radius: 6px; padding: 8px 10px; }
.pr-spec-sleutel { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.pr-spec-waarde { font-size: 13px; font-weight: 600; color: #0d0d0d; }

.pr-score-rij { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pr-score-lbl { font-size: 12px; color: #444; width: 90px; flex-shrink: 0; }
.pr-score-num { font-size: 12px; font-weight: 600; color: #111; min-width: 28px; text-align: right; }
.pr-balk-track { height: 8px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; flex: 1; }
.pr-balk-vul { height: 100%; border-radius: 4px; }

/* ── Voor wie / koopadvies ───────────────────────────────────────────────── */
.pr-pdp-advies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 680px) { .pr-pdp-advies-grid { grid-template-columns: 1fr; } }
.pr-advies-card { border-radius: 8px; padding: 1rem 1.25rem; border: 1px solid #eee; }
.pr-advies-card--voor { background: #f0faf3; border-color: #b8e6c0; }
.pr-advies-card--niet { background: #fef5f0; border-color: #f5c4b3; }
.pr-advies-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #0d0d0d; }
.pr-advies-card p { font-size: 13px; color: #2c2c2a; line-height: 1.6; margin: 0; }
.pr-pdp-koopadvies { background: #f5f5f5; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-left: 3px solid var(--pr-accent, #1a56db); }
.pr-pdp-koopadvies h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #0d0d0d; }
.pr-pdp-koopadvies p { font-size: 13px; color: #2c2c2a; line-height: 1.6; margin: 0; }
.pr-pdp-content { margin-bottom: 2rem; }
.pr-pdp-content .pr-section-titel { margin-bottom: 1rem; }
.pr-content-body { font-size: 14px; line-height: 1.8; color: #1a1a1a; }
.pr-content-body p { margin-bottom: 1rem; }
.pr-pdp-tech { margin-bottom: 1.5rem; }

/* ── Meer CTA ────────────────────────────────────────────────────────────── */
.pr-pdp-meer-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 14px 18px; margin-top: 1.5rem; flex-wrap: wrap;
}
.pr-pdp-meer-cta span { font-size: 14px; color: #333; }
.pr-pdp-meer-cta a { font-size: 13px; font-weight: 500; color: var(--pr-accent, #1a56db); text-decoration: none; }
.pr-pdp-meer-cta a:hover { text-decoration: underline; }

/* ── Racketkaart ─────────────────────────────────────────────────────────── */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pr-card { background: var(--pr-kaart-bg, #fff); border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.pr-card:hover { border-color: var(--pr-accent, #1a56db); }
.pr-card__link { text-decoration: none; color: inherit; display: block; }
.pr-card__img { background: #f0f0ee; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pr-card__img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pr-card__svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pr-card__svg svg { width: 90%; height: 90%; }
.pr-card__img .pr-badge { position: absolute; top: 8px; left: 8px; }
.pr-card__body { padding: 10px 12px; }
.pr-card__merk { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--pr-accent, #1a56db); margin-bottom: 3px; }
.pr-card__titel { font-size: 13px; font-weight: 600; color: #0d0d0d; margin-bottom: 6px; line-height: 1.3; }
.pr-card__specs { display: flex; gap: 6px; font-size: 10px; color: #555; margin-bottom: 8px; flex-wrap: wrap; }
.pr-card__balken { margin-bottom: 8px; }
.pr-balk-rij { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pr-balk-lbl { font-size: 10px; color: #555; width: 50px; flex-shrink: 0; }
.pr-balk-track { height: 5px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; flex: 1; }
.pr-balk-vul { height: 100%; border-radius: 3px; }
.pr-card__footer { display: flex; align-items: center; justify-content: space-between; }
.pr-card__prijs { font-size: 15px; font-weight: 700; color: var(--pr-accent, #1a56db); }
.pr-card__cta { font-size: 11px; color: #666; }

/* ── Aanbevelingen ───────────────────────────────────────────────────────── */
.pr-aanbevelingen { margin-top: 3rem; border-top: 1px solid #eee; padding-top: 2rem; }
.pr-aanb-blok { margin-bottom: 2rem; }
.pr-aanb-titel { font-size: 18px; font-weight: 800; color: #0d0d0d; margin-bottom: 1rem; letter-spacing: -.01em; }
.pr-aanb-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
@media (max-width: 680px) { .pr-aanb-rij { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; } .pr-mini-kaart { min-width: 140px; } }

.pr-mini-kaart { display: flex; flex-direction: column; gap: 8px; background: #f5f5f5; border-radius: 8px; padding: 10px; text-decoration: none; color: inherit; border: 1px solid #eee; transition: border-color .15s; }
.pr-mini-kaart:hover { border-color: var(--pr-accent, #1a56db); }
.pr-mini-kaart__img { width: 60px; height: 60px; background: #fff; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pr-mini-kaart__img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.pr-mini-kaart__svg { width: 60px; height: 60px; }
.pr-mini-kaart__svg svg { width: 100%; height: 100%; border-radius: 6px; }
.pr-mini-kaart__merk { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--pr-accent, #1a56db); }
.pr-mini-kaart__titel { font-size: 11px; font-weight: 600; color: #0d0d0d; line-height: 1.3; }
.pr-mini-kaart__prijs { font-size: 12px; font-weight: 700; color: var(--pr-accent, #1a56db); }

/* ── Filter balk ─────────────────────────────────────────────────────────── */
.pr-filter-balk { background: #fff; border-radius: 10px; border: 1px solid #e0e0e0; padding: 14px; margin-bottom: 1.25rem; }
.pr-filter-rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pr-filter-lbl { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.pr-filter-pill { font-size: 12px; padding: 5px 12px; border-radius: 20px; border: 1px solid #ddd; background: #fff; color: #555; cursor: pointer; transition: all .15s; }
.pr-filter-pill:hover { border-color: #aaa; }
.pr-filter-pill.actief { background: #E6F1FB; border-color: #1a56db; color: #0a3a7c; font-weight: 500; }
.pr-sort-select { font-size: 12px; border: 1px solid #ddd; border-radius: 6px; padding: 5px 8px; background: #fff; }
.pr-count { font-size: 12px; color: #777; }
.pr-geen-resultaten { padding: 2rem; text-align: center; color: #777; grid-column: 1/-1; }

/* ── Merk header ─────────────────────────────────────────────────────────── */
.pr-merk-header { display: flex; gap: 1.5rem; background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; padding: 1.5rem; margin-bottom: 1.5rem; }
.pr-merk-logo-placeholder { width: 60px; height: 60px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.pr-merk-info h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: #0d0d0d; }
.pr-merk-desc { font-size: 13px; color: #333; line-height: 1.6; margin-bottom: 8px; }

/* ── Archive header ──────────────────────────────────────────────────────── */
.pr-archive-header { margin-bottom: 1.5rem; }
.pr-archive-header h1 { font-size: 26px; font-weight: 800; color: #0d0d0d; margin-bottom: 6px; }
.pr-archive-header p { font-size: 14px; color: #333; }
.pr-merk-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pr-merk-pill { font-size: 12px; padding: 5px 14px; border-radius: 20px; border: 1px solid #ddd; background: #fff; color: #333; text-decoration: none; transition: all .15s; }
.pr-merk-pill:hover { border-color: var(--pr-accent, #1a56db); color: var(--pr-accent, #1a56db); }

/* ── Finder hero banner ──────────────────────────────────────────────────── */
.pr-finder-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: var(--pr-cta-hero-bg, #1a56db); border-radius: 12px;
    padding: 1.5rem 2rem; margin-bottom: 1.5rem; color: #fff;
}
@media (max-width: 680px) { .pr-finder-hero { flex-direction: column; align-items: flex-start; padding: 1.25rem; } }
.pr-finder-hero__links { display: flex; align-items: center; gap: 12px; }
.pr-finder-hero__icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.pr-finder-hero__titel { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.pr-finder-hero__subtitel { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.5; }
.pr-finder-hero__knop { white-space: nowrap; flex-shrink: 0; background: #fff; color: #1a56db; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity .15s; }
.pr-finder-hero__knop:hover { opacity: .9; color: #1a56db; text-decoration: none; }
@media (max-width: 680px) { .pr-finder-hero__knop { width: 100%; text-align: center; } }

/* Tussenbanner */
.pr-mid-banner { grid-column: 1/-1; display: flex; align-items: center; gap: 1rem; background: #f0f6ff; border: 1.5px dashed #b5d4f4; border-radius: 10px; padding: 1rem 1.25rem; }
@media (max-width: 480px) { .pr-mid-banner { flex-direction: column; align-items: flex-start; } }
.pr-mid-banner__icon { font-size: 22px; flex-shrink: 0; }
.pr-mid-banner__tekst { font-size: 13px; color: #333; flex: 1; }
.pr-mid-banner__knop { white-space: nowrap; flex-shrink: 0; background: #1a56db; color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; transition: opacity .15s; }
.pr-mid-banner__knop:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ── Finder pagina ───────────────────────────────────────────────────────── */
.pr-finder-container { max-width: 680px; }
.pr-finder-header { text-align: center; margin-bottom: 2rem; }
.pr-finder-header h1 { font-size: 26px; font-weight: 800; color: #0d0d0d; margin-bottom: 8px; }
.pr-finder-header p { font-size: 14px; color: #333; }
.pr-finder-voortgang-balk { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.pr-finder-voortgang-vul { height: 100%; background: var(--pr-accent, #1a56db); border-radius: 2px; transition: width .4s; }
.pr-finder-voortgang-lbl { font-size: 11px; color: #777; margin-bottom: 2rem; }
.pr-finder-vraag { display: none; }
.pr-finder-vraag.actief { display: block; animation: pr-fade .3s; }
@keyframes pr-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pr-finder-vraag h2 { font-size: 20px; font-weight: 700; color: #0d0d0d; margin-bottom: 1.5rem; text-align: center; }
.pr-finder-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .pr-finder-opties { grid-template-columns: 1fr; } }
.pr-finder-optie { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 1.25rem 1rem; border: 2px solid #e0e0e0; border-radius: 12px; background: #fff; cursor: pointer; text-align: center; transition: all .15s; }
.pr-finder-optie:hover { border-color: var(--pr-accent, #1a56db); background: #f5f8ff; }
.pr-finder-optie.gekozen { border-color: var(--pr-accent, #1a56db); background: #E6F1FB; }
.pr-finder-optie__icoon { font-size: 28px; line-height: 1; }
.pr-finder-optie__titel { font-size: 14px; font-weight: 600; color: #0d0d0d; }
.pr-finder-optie__sub { font-size: 12px; color: #666; }
.pr-finder-resultaten h2 { font-size: 20px; font-weight: 700; color: #0d0d0d; margin-bottom: 8px; }
.pr-finder-sub { font-size: 13px; color: #777; margin-bottom: 1.5rem; }
.pr-finder-resultaat { display: flex; gap: 1rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 1rem; margin-bottom: 12px; }
.pr-finder-resultaat__img { width: 80px; height: 80px; background: #f0f0ee; border-radius: 8px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pr-finder-resultaat__img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.pr-finder-resultaat__svg { width: 80px; height: 80px; }
.pr-finder-resultaat__svg svg { width: 100%; height: 100%; border-radius: 8px; }
.pr-finder-resultaat__merk { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pr-accent, #1a56db); margin-bottom: 3px; }
.pr-finder-resultaat__titel { font-size: 14px; font-weight: 600; color: #0d0d0d; margin-bottom: 6px; }
.pr-finder-resultaat__uitleg { font-size: 12px; color: #333; line-height: 1.6; margin-bottom: 8px; }
.pr-finder-resultaat__footer { display: flex; align-items: center; gap: 10px; }
.pr-finder-resultaat__prijs { font-size: 15px; font-weight: 700; color: var(--pr-accent, #1a56db); }
.pr-finder-opnieuw { display: flex; gap: 10px; margin-top: 1.5rem; flex-wrap: wrap; }

/* Spinner */
.pr-spinner { width: 20px; height: 20px; border: 2px solid #ddd; border-top-color: var(--pr-accent, #1a56db); border-radius: 50%; animation: pr-spin .7s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-spinner-wrap { display: flex; justify-content: center; padding: 2rem; }
.pr-laden { display: flex; align-items: center; gap: 10px; padding: 1.5rem; justify-content: center; color: #777; }

/* ── Vergelijk modal ─────────────────────────────────────────────────────── */
.pr-vergelijk-modal { display: none; }
.pr-vergelijk-modal.open { display: block; }
.pr-vergelijk-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; }
.pr-vergelijk-inner {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 1001; background: #f8f8f7; border-radius: 14px;
    width: min(900px, 95vw); max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
@media (max-width: 680px) { .pr-vergelijk-inner { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; border-radius: 14px 14px 0 0; max-height: 92vh; } }
body.pr-modal-open { overflow: hidden; }

.pr-vergelijk-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #f8f8f7; z-index: 1; }
.pr-vergelijk-header h2 { font-size: 16px; font-weight: 700; margin: 0; color: #0d0d0d; }
.pr-vergelijk-sluit { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.pr-vergelijk-zoek { padding: 1rem 1.5rem; border-bottom: 1px solid #eee; position: relative; }
.pr-vergelijk-zoek input { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; }
.pr-vergelijk-zoek input:focus { border-color: var(--pr-accent, #1a56db); }
.pr-zoek-resultaten { display: none; position: absolute; left: 1.5rem; right: 1.5rem; top: calc(100% - 1rem); background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 10; overflow: hidden; }
.pr-zoek-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .1s; }
.pr-zoek-item:hover { background: #f5f8ff; }
.pr-zoek-item:last-child { border-bottom: none; }
.pr-zoek-merk { font-size: 10px; font-weight: 700; color: var(--pr-accent, #1a56db); text-transform: uppercase; letter-spacing: .04em; min-width: 60px; }
.pr-zoek-naam { font-size: 13px; color: #111; flex: 1; }
.pr-zoek-leeg { padding: 14px; font-size: 13px; color: #999; text-align: center; }

/* Vergelijk tabel */
.pr-verg-headers { display: grid; grid-template-columns: 1fr 80px 1fr; padding: 1rem 1.5rem .5rem; border-bottom: 1px solid #eee; }
.pr-verg-kop { text-align: center; padding: .5rem; }
.pr-verg-kop__img { width: 70px; height: 70px; object-fit: contain; display: block; margin: 0 auto 8px; border-radius: 6px; }
.pr-verg-kop__svg { width: 70px; height: 70px; margin: 0 auto 8px; display: block; }
.pr-verg-kop__svg svg { width: 100%; height: 100%; border-radius: 6px; }
.pr-verg-kop__merk { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pr-accent, #1a56db); margin-bottom: 3px; }
.pr-verg-kop__titel { font-size: 13px; font-weight: 600; color: #0d0d0d; line-height: 1.3; margin-bottom: 8px; }
.pr-verg-kop__koop { display: inline-block; padding: 6px 12px; background: var(--pr-accent, #1a56db); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 500; text-decoration: none; }
.pr-verg-kop__koop:hover { opacity: .88; color: #fff; text-decoration: none; }
.pr-verg-kop__leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; color: #bbb; gap: 6px; font-size: 12px; }

.pr-verg-tabel { padding: .5rem 1.5rem 1.5rem; }
.pr-verg-rij { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; border-bottom: 1px solid #f0f0f0; min-height: 36px; }
.pr-verg-rij:last-child { border-bottom: none; }
.pr-verg-cel { padding: 6px 4px; font-size: 12px; }
.pr-verg-cel--a { text-align: right; font-weight: 600; color: #0d0d0d; padding-right: 10px; }
.pr-verg-cel--label { text-align: center; font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: .04em; }
.pr-verg-cel--b { text-align: left; font-weight: 600; color: #0d0d0d; padding-left: 10px; }
.pr-verg-diff { color: var(--pr-accent, #1a56db) !important; background: rgba(26,86,219,.06); border-radius: 3px; }
.pr-verg-scores-kop { padding: 10px 4px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #aaa; text-align: center; border-top: 1px solid #e8e8e8; margin-top: 4px; }
.pr-verg-rij--score { min-height: 40px; }
.pr-verg-balk { display: flex; align-items: center; gap: 6px; }
.pr-verg-balk--a { justify-content: flex-end; }
.pr-verg-balk--b { justify-content: flex-start; }
.pr-verg-balk .pr-balk-track { width: 80px; flex-shrink: 0; height: 6px; }
.pr-verg-balk-num { font-size: 11px; font-weight: 600; color: #111; min-width: 22px; }
.pr-verg-balk--a .pr-verg-balk-num { text-align: right; }
.pr-verg-balk--b .pr-verg-balk-num { text-align: left; }

/* ── Sticky finder knop ──────────────────────────────────────────────────── */
.pr-finder-sticky {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    background: var(--pr-accent, #1a56db); color: #fff;
    padding: 10px 18px; border-radius: 30px; text-decoration: none;
    font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 999; transition: opacity .15s;
}
.pr-finder-sticky:hover { opacity: .9; color: #fff; text-decoration: none; }
@media (max-width: 480px) { .pr-finder-sticky span { display: none; } .pr-finder-sticky { padding: 12px; } }

/* ── 2-kolommen grid ─────────────────────────────────────────────────────── */
.pr-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 640px) {
    .pr-grid--2 { grid-template-columns: 1fr; }
}

/* Kaart afbeelding in 2-kolom grid — niet te groot */
.pr-grid--2 .pr-card__img { aspect-ratio: 4/3; }
.pr-grid--2 .pr-card__svg svg { max-width: 180px; max-height: 180px; }

/* ── Lijst weergave ──────────────────────────────────────────────────────── */
.pr-grid--lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pr-grid--lijst .pr-card__link { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.pr-grid--lijst .pr-card__img { width: 100px; height: 100px; aspect-ratio: 1; flex-shrink: 0; }
.pr-grid--lijst .pr-card__svg svg { max-width: 80px; max-height: 80px; }
.pr-grid--lijst .pr-card__body { flex: 1; padding: 10px 12px 10px 0; }
.pr-grid--lijst .pr-card__balken { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pr-grid--lijst .pr-balk-rij { flex: 1; min-width: 120px; }

/* ── Weergave toggle knoppen ─────────────────────────────────────────────── */
.pr-weergave-toggle { display: flex; gap: 4px; margin-left: auto; }
.pr-weergave-btn {
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid #ddd; background: #fff; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.pr-weergave-btn.actief { background: var(--pr-accent, #1a56db); color: #fff; border-color: var(--pr-accent, #1a56db); }

/* ── Merk pills ──────────────────────────────────────────────────────────── */
.pr-merk-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.pr-merk-pill {
    font-size: 13px; font-weight: 500;
    padding: 6px 16px; border-radius: 20px;
    border: 1.5px solid #ddd; background: #fff;
    color: #333; text-decoration: none;
    transition: all .15s;
}
.pr-merk-pill:hover { border-color: var(--pr-accent, #1a56db); color: var(--pr-accent, #1a56db); text-decoration: none; }
.pr-merk-pill--actief { background: var(--pr-accent, #1a56db); border-color: var(--pr-accent, #1a56db); color: #fff; }
.pr-merk-pill--actief:hover { color: #fff; opacity: .9; }

/* ── Filter balk bottom rij ──────────────────────────────────────────────── */
.pr-filter-rij--bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Aanbevolen badge op kaart ───────────────────────────────────────────── */
.pr-badge-aanbevolen {
    position: absolute; top: 8px; right: 8px;
    background: #d97706; color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}

/* ── Kaart 3 balken ──────────────────────────────────────────────────────── */
.pr-card__balken--3 .pr-balk-rij { margin-bottom: 3px; }

/* Google Shopping primaire knop */
.pr-google-shopping-btn--primair {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: var(--pr-knop-radius, 6px);
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    transition: all .15s;
    width: 100%;
    margin-bottom: 10px;
}
.pr-google-shopping-btn--primair:hover {
    border-color: #4285F4;
    background: #f8fbff;
    color: #111;
    text-decoration: none;
}

/* Finder slide animatie */
.pr-finder-vraag.pr-slide-uit {
    opacity: 0;
    transform: translateY(-8px);
    transition: all .2s;
}