/* =====================================================================
   BELREUS.NL - designlaag 2028: fonts, typografische schaal en verfijning
   Wordt na style.css en de paginastijlen geladen, vóór responsive.css.
   Fonts: Manrope (koppen) en Inter (tekst en interface), lokaal gehost,
   SIL Open Font License 1.1 (zie assets/fonts/).
   ===================================================================== */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

body { font-size: var(--fs-body); line-height: 1.6; font-feature-settings: "cv11", "ss03"; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); line-height: 1.15; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: var(--fs-page); font-weight: 700; }
h2 { font-size: var(--fs-section); font-weight: 700; }
h3 { font-size: var(--fs-subhead); font-weight: 650; letter-spacing: -.015em; }
h4 { font-weight: 650; }
p { text-wrap: pretty; }
.muted { font-size: var(--fs-small); }
.eyebrow { font-family: var(--font-heading); font-size: var(--fs-meta); font-weight: 700; letter-spacing: .14em; }
.price, .deal-price strong, .mini-price strong, .acc-price, .glance strong, .deal-total strong, .pts, .stat-card strong { font-variant-numeric: tabular-nums; }
.price { font-family: var(--font-heading); font-size: var(--fs-price); font-weight: 700; letter-spacing: -.02em; }
.demo-notice { font-size: var(--fs-meta); padding: 6px 0; }
.demo-badge, .tag { font-family: var(--font); font-weight: 600; letter-spacing: .03em; }

/* ---------- Header: ruime witte laag met zoekfunctie, navy navigatielaag ---------- */
.site-header { background: #fff; backdrop-filter: none; border-bottom: 0; }
.header-inner { gap: var(--sp-5); }
.logo-img { height: 54px; }
.header-search { max-width: none; margin-left: var(--sp-3); }
.header-search input { height: 46px; padding: 0 var(--sp-4); border: 1px solid var(--line-blue); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-size: var(--fs-small); background: #fff; }
.header-search input:focus { border-color: var(--blue); }
.header-search button { width: 54px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.header-actions { gap: var(--sp-1); }
.header-action { gap: 3px; padding: 4px 9px; font-size: var(--fs-meta); font-weight: var(--fw-medium); border-radius: var(--radius-sm); }
.header-action .icon { width: 24px; height: 24px; stroke-width: 1.7; }
.header-cta { min-height: 46px; padding: 10px 20px; font-size: var(--fs-small); border-radius: var(--radius-sm); }
.tag-hot { font-size: .625rem; font-weight: var(--fw-heading); letter-spacing: .02em; background: var(--bf-red); color: #fff; border: 0; padding: 1px 5px; border-radius: 3px; }
@media (max-width: 1240px) {
    .header-inner { gap: var(--sp-3); }
    .site-header .header-action span:not(.fav-count):not(.cmp-count) { display: none; }
    .site-header .header-action { padding: 8px; }
    .header-cta { padding: 10px 16px; }
}
@media (max-width: 900px) {
    .header-action .icon { width: 22px; height: 22px; }
}
@media (max-width: 640px) {
    .logo-img { height: 44px; }
    .header-search { margin-left: 0; }
    .header-search input { height: 44px; }
    .header-search button { width: 50px; }
}

/* ---------- Knoppen en velden ---------- */
.btn { font-family: var(--font); font-weight: 600; font-size: .9375rem; letter-spacing: -.005em; border-width: 1px; }
.btn-deal { background: var(--deal); box-shadow: none; }
.btn-deal:hover { background: var(--deal-hover); box-shadow: none; }
.btn-deal.is-disabled { opacity: .45; }
.btn-lg { font-size: 1rem; }
.field { font-size: var(--fs-meta); font-weight: 600; }
.field input, .field select, .field textarea { font-size: .9375rem; border-width: 1px; height: 46px; }
.link-more { font-size: var(--fs-small); font-weight: 600; }

/* ---------- Kaarten ---------- */
.card, .side-box, .panel, .table-wrap, .filters-row, .sidebar, .offer-row { box-shadow: none; }
.card:hover { transform: none; box-shadow: var(--shadow-hover); border-color: #d5deec; }
.card-media { background: var(--tint); }
.card-title { font-size: var(--fs-product); font-weight: 650; }
.card-brand { font-size: .75rem; font-weight: 600; }
.score { box-shadow: none; }
.score-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; }
.score-top { background: #0d9150; }
.score-good { background: var(--blue); }
.score-ok { background: #b97800; }
.score-low { background: #76839a; }
.tag { font-size: .6875rem; text-transform: none; letter-spacing: 0; }
.tag-deal, .tag-save { background: #fff1ea; color: #b53e07; }
img.product-photo[data-format="cutout"] { filter: drop-shadow(0 10px 16px rgba(11, 31, 66, .14)); }

/* ---------- Bovenbalk ---------- */
.top-bar { background: var(--navy-deep); color: #fff; }
.top-bar ul { list-style: none; display: flex; gap: var(--sp-5); margin: 0 auto; padding-top: 6px; padding-bottom: 6px; font-size: .75rem; font-weight: var(--fw-medium); overflow: hidden; }
.top-bar li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.top-bar .icon { color: #39d07f; stroke-width: 2.4; }
@media (max-width: 640px) { .top-bar li:nth-child(n+3) { display: none; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 0; background: var(--navy-deep); color: rgba(255, 255, 255, .72); font-size: var(--fs-small); }
.site-footer a { color: rgba(255, 255, 255, .86); }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; }
.site-footer .logo { background: #fff; padding: 8px 12px; border-radius: var(--radius-sm); }
.footer-bottom { border-top-color: rgba(255, 255, 255, .14); }
.footer-bottom strong { color: #fff; }
.site-footer h4 { font-family: var(--font); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .06em; }

/* ---------- Pagina's ---------- */
.page-head { background: var(--tint); padding: 44px 0 36px; }
.page-head-deal { background: #fff6f1; }

/* ---------- Homepage ---------- */


.usp-strip { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 0; margin-top: 8px; gap: 8px; }
.usp-strip a { padding: 8px 10px; font-size: var(--fs-meta); }
.usp-strip a:hover { background: var(--tint); box-shadow: none; }
.usp-strip strong { font-weight: 600; font-size: var(--fs-small); }
.usp-strip .icon, .usp-strip li:nth-child(4) .icon { width: 24px; height: 24px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--blue); stroke-width: 1.75; }

.block { margin-top: 48px; }
.block-head { margin-bottom: 20px; }
.block-head h2 { font-size: var(--fs-section); }
.side-box { padding: 22px; min-width: 0; }
.side-box > h3, .block-head h3 { font-size: var(--fs-subhead); }
.brand-row { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 8px; }
.brand-wordmark { font-family: var(--font-heading); font-weight: 700; font-size: .9375rem; }
.chip-tabs button { font-size: var(--fs-meta); font-weight: 500; padding: 6px 12px; border-radius: 999px; }

/* Dealkaart: heel toestel zichtbaar, één duidelijke prijs, rustige details. */
.deal-card { padding: 14px; font-size: var(--fs-meta); }
.deal-card-top { min-height: 28px; }
.deal-card .btn-fav { width: 30px; height: 30px; border: 0; background: none; }
.deal-tags .tag { font-size: .6875rem; padding: 3px 7px; white-space: normal; }
.deal-card .card-media { height: 176px; margin: 2px 0 14px; padding: 0; place-items: center; overflow: visible; background: none; }
.deal-card .card-media svg, .deal-card .card-media img, .deal-card .card-media img.product-photo { height: 176px; width: auto; }
.deal-card .card-media picture { display: contents; }
.deal-card .card-title { font-size: .9375rem; font-weight: 650; line-height: 1.3; margin-bottom: 3px; }
.deal-card .card-specs { font-size: .75rem; margin-bottom: 10px; }
.deal-provider { font-size: var(--fs-meta); }
.deal-provider strong { font-weight: 600; }
.deal-provider .score { transform: none; min-width: 34px; padding: 4px 6px; border-radius: 7px; }
.deal-provider .score-lbl { display: none; }
.deal-provider .score-num { font-size: .875rem; }
.deal-price { margin-top: 10px; }
.deal-price strong { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.deal-price span:not(.demo-badge) { color: var(--muted); font-size: var(--fs-meta); margin-left: 2px; }
.deal-upfront { font-size: .75rem; }
.deal-total { border-top: 1px solid var(--line); margin: 10px 0; padding-top: 9px; font-size: .75rem; }
.deal-total strong { font-weight: 600; }
.checklist { font-size: .75rem; line-height: 1.4; margin-bottom: 14px; }
.deal-card .btn-deal { min-height: 42px; font-size: var(--fs-small); }

.mini-row { font-size: var(--fs-meta); padding: 10px 0; }
.mini-row:not(.sim-row) { grid-template-columns: auto 40px minmax(0, 1fr); row-gap: 1px; }
.mini-row:not(.sim-row) .mini-rank, .mini-row:not(.sim-row) .mini-media { grid-row: span 2; }
.mini-row:not(.sim-row) .mini-price { grid-column: 3; text-align: left; }
.mini-row.no-rank:not(.sim-row) { grid-template-columns: 40px minmax(0, 1fr); }
.mini-row.no-rank:not(.sim-row) .mini-price { grid-column: 2; }
.mini-rank { width: 22px; height: 22px; font-weight: 600; font-size: .75rem; background: var(--tint); color: var(--muted); }
.mini-name { font-weight: 500; }
.mini-price strong { font-weight: 600; }
.mini-price .muted, .sim-row .mini-name .muted { font-size: .75rem; }
.sim-row .mini-name strong { font-weight: 600; }
.btn-xs { min-height: 32px; font-size: .75rem; padding: 4px 10px; }

.glance a { font-size: .75rem; }
.glance strong { font-size: .75rem; font-weight: 600; }
.promo-banner { margin-top: 48px; background: var(--blue); padding: 36px 40px; }
.promo-banner h2 { font-size: var(--fs-section); }
.acc-media { background: var(--tint); box-shadow: none; height: 108px; }
.acc-media img.product-photo { filter: drop-shadow(0 6px 10px rgba(11, 31, 66, .14)); }
.acc-grid a { font-size: .75rem; }
.acc-name { font-weight: 500; }
.acc-price { font-weight: 600; font-size: .875rem; }
.acc-cta { font-size: .75rem; font-weight: 600; }
.news-list a { font-size: var(--fs-small); }
.news-list strong { font-weight: 600; }
.news-meta { font-size: .75rem; }
.why li { font-size: var(--fs-meta); }
.why li strong { font-weight: 600; font-size: var(--fs-small); }
.why .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.alert-bar { margin: 48px 0 56px; background: var(--navy); }
.alert-bar h2 { font-size: 1.25rem; }
.alert-bar-head .icon { color: #fff; stroke-width: 1.5; }
.alert-bar p { font-size: var(--fs-meta); }
.alert-bar .check { font-size: .75rem; font-weight: 400; }

/* ---------- Detailpagina ---------- */
.block-head h2.h3 { font-size: var(--fs-subhead); }
.score-parts li { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
.score-parts .bar { grid-column: 1 / -1; grid-row: 2; height: 6px; }
.tri-grid .calc-result .calc-verdict { align-items: flex-start; gap: 12px; }
.tri-grid .calc-result .calc-verdict strong { text-align: right; font-size: .9375rem; line-height: 1.3; }
.pd-media { background: var(--tint); box-shadow: none; }
.pd-media picture { display: contents; }

@media (max-width: 760px) {
    .block { margin-top: 36px; }
    .promo-banner { padding: 26px 22px; }
    .usp-strip { padding: 14px 0; }
    .deal-card .card-media, .deal-card .card-media svg, .deal-card .card-media img, .deal-card .card-media img.product-photo { height: 150px; }
    .deal-price strong { font-size: 1.3125rem; }
    .deal-total { flex-wrap: wrap; gap: 0 6px; }
}

/* Merklogo's: hoogte via data-attribuut, want de CSP verbiedt inline stijlen. */
.brand-logo[data-brand-h="17"] { --brand-h: 17px; }
.brand-logo[data-brand-h="21"] { --brand-h: 21px; }
.brand-logo[data-brand-h="26"] { --brand-h: 26px; }

.glance strong { white-space: normal; }
@media (max-width: 1180px) {
    .pd-top, .pd-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-top > *, .pd-aside > * { min-width: 0; }
}
@media (max-width: 760px) {
    .pd-top, .pd-aside { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Navigatie met iconen en dropdowns (alle pagina's) ---------- */
.main-nav { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(11, 31, 66, .04); }
.main-nav ul { list-style: none; margin: 0; padding: 0; overflow: visible; }
.nav-list { display: flex; align-items: center; justify-content: space-between; gap: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.main-nav a.nav-top { display: inline-flex; align-items: center; gap: 5px; padding: 11px 6px; border: 0; color: var(--navy); font-size: .84375rem; font-weight: var(--fw-medium); white-space: nowrap; transition: color .12s, box-shadow .12s; }
.nav-top .icon { color: var(--blue); width: 15px; height: 15px; stroke-width: 1.9; flex: none; }
.main-nav a.nav-top:hover { color: var(--blue); text-decoration: none; }
.main-nav a.nav-top.active { color: var(--blue); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--blue); }
.nav-sub-toggle { display: grid; place-items: center; width: 16px; height: 26px; margin-left: -4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; transition: transform .15s, color .12s; }
.nav-sub-toggle .icon { width: 13px; height: 13px; }
.nav-sub-toggle:hover, .has-menu.is-open .nav-sub-toggle { color: var(--blue); }
.has-menu.is-open .nav-sub-toggle { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; z-index: 60; top: 100%; left: 0; min-width: 270px; padding: var(--sp-3); border: 1px solid var(--line-blue); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-float); }
.has-menu.is-open > .nav-menu { display: block; }
.nav-menu-wide { min-width: 540px; }
.nav-menu-wide.nav-menu { grid-template-columns: 1fr 1.1fr; gap: var(--sp-3); }
.has-menu.is-open > .nav-menu-wide { display: grid; }
.nav-col-head { margin: 0 0 6px; padding: 0 8px; color: var(--muted); font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.main-nav a.nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: var(--radius-xs); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: 1.25; white-space: normal; transition: background-color .12s, color .12s; }
.main-nav a.nav-link:hover { background: var(--tint-blue); color: var(--blue); text-decoration: none; }
.nav-link .icon { color: var(--blue); flex: none; stroke-width: 1.75; }
.nav-link small { display: block; color: var(--muted); font-size: .6875rem; font-weight: var(--fw-regular); }
@media (min-width: 901px) {
    .has-menu:hover > .nav-menu, .has-menu:focus-within > .nav-menu { display: block; }
    .has-menu:hover > .nav-menu-wide, .has-menu:focus-within > .nav-menu-wide { display: grid; }
    .has-menu:hover .nav-sub-toggle { color: var(--blue); }
}
@media (max-width: 1319px) { .nav-top .icon { display: none; } }
@media (max-width: 1100px) { .nav-sub-toggle { width: 12px; margin-left: -5px; } .main-nav a.nav-top { font-size: .8125rem; padding: 10px 5px; } }
@media (max-width: 900px) {
    .main-nav { display: none; }
    .main-nav.is-open { display: block; }
    .nav-list { flex-direction: column; align-items: stretch; padding: 6px 0 12px; }
    .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
    .nav-item:last-child { border-bottom: 0; }
    .main-nav a.nav-top { flex: 1; padding: 12px 6px; font-size: var(--fs-body); }
    .nav-top .icon { display: block; width: 18px; height: 18px; }
    .main-nav a.nav-top.active { box-shadow: none; }
    .nav-sub-toggle { width: 44px; height: 44px; margin: 0; }
    .nav-sub-toggle .icon { width: 18px; height: 18px; }
    .nav-menu, .nav-menu-wide { position: static; width: 100%; min-width: 0; padding: 0 0 8px 8px; border: 0; box-shadow: none; }
    .nav-menu-wide.nav-menu { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .main-nav a.nav-link { padding: 9px 8px; font-size: var(--fs-small); }
}

/* ---------- Footer met vijf kolommen en informatieblok ---------- */
.footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--sp-5); padding: var(--sp-7) 20px var(--sp-5); }
.site-footer h4 { margin-bottom: var(--sp-3); }
.site-footer ul { gap: 6px; }
.site-footer li { font-size: var(--fs-meta); }
.site-footer a { transition: color .12s; }
.footer-trust { list-style: none; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) !important; margin: 0 0 var(--sp-5) !important; padding: var(--sp-4) 0 !important; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: .75rem; line-height: 1.4; }
.footer-trust strong { display: block; color: #fff; font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.footer-trust .icon { flex: none; color: var(--electric); stroke-width: 1.75; }
.footer-bottom p { font-size: .75rem; line-height: 1.5; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } .footer-brand p { max-width: 520px; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-trust { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Providerpagina ---------- */
.provider-head .pv-name { display: inline-block; margin-bottom: var(--sp-2); padding: 6px 12px; border: 1px solid var(--line-blue); border-radius: var(--radius-sm); background: #fff; font-family: var(--font-heading); font-weight: 800; color: var(--navy); }
.provider-head { margin: 0; }
.mt-sm { margin-top: var(--sp-3); }
.related-providers { list-style: none; padding: 0; }
.plan-terms { display: block; min-width: 220px; font-size: .75rem; line-height: 1.35; }
.data-table td:nth-last-child(2), .data-table td:nth-last-child(3) { white-space: nowrap; }

/* Sim Only-dealkaarten en cataloguskaarten: zelfde basis als .deal-card */
.deal-grid.deal-grid-wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); height: auto; }
.deal-grid.deal-grid-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deal-grid-wrap .deal-card[hidden] { display: none; }
.deal-card .deal-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.deal-card .tag-promo { background: var(--tint-blue); color: var(--blue); }
.deal-card .tag-catalog { background: var(--tint); color: var(--muted); }
.deal-provider-name { display: inline-flex; min-width: 0; color: var(--navy); }
.deal-provider-name:hover { color: var(--blue); text-decoration: none; }
.deal-provider .pv-name { font-size: .9375rem; white-space: normal; }
.sim-deal-card .card-title { margin-top: 2px; color: var(--muted); font-weight: var(--fw-medium, 500); }
.sim-deal-card .deal-upfront { min-height: 3.6em; line-height: 1.3; }
.sim-media { position: relative; }
.deal-card .sim-media img { height: 150px; width: auto; }
.sim-media-data { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 3px 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(11, 31, 66, .16); color: var(--navy); white-space: nowrap; }
.sim-media-data strong { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.deal-checked { margin: 0 0 var(--sp-2); color: var(--muted); font-size: .6875rem; }
.sim-deal-card .btn-deal::after { content: " \2192"; }
.sim-deal-card .btn-deal { margin-top: auto; }
.catalog-card .card-brand { margin: 0; color: var(--muted); font-size: .75rem; }
.catalog-card .btn { margin-top: auto; }
.catalog-card .card-specs { margin-bottom: var(--sp-2); }
.block-lead { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
.catalog-section { margin-top: var(--sp-5, 32px); }
.catalog-detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--sp-5, 32px); align-items: center; }
.catalog-detail-media { display: grid; place-items: center; min-height: 380px; padding: var(--sp-4, 24px); border-radius: var(--radius-sm); background: radial-gradient(70% 60% at 50% 55%, #fff 0%, var(--tint-blue) 100%); }
.catalog-detail-media img, .catalog-detail-media svg { max-width: 100%; height: 340px; width: auto; }
.catalog-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 1199px) { .deal-grid.deal-grid-wrap { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } }
@media (max-width: 767px) {
    .deal-grid.deal-grid-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .catalog-detail { grid-template-columns: minmax(0, 1fr); }
    .catalog-detail-media { min-height: 280px; }
    .catalog-detail-media img, .catalog-detail-media svg { height: 250px; }
}
.catalog-card .deal-upfront { margin-bottom: var(--sp-2); }