/* =========================================================================
   iPhone.nl theme — main.css
   Tokens en maten overgenomen uit de originele site (Bootstrap 3-basis):
   accent #5d9cec, tekst #333 14px, footer #202020, copyright #111,
   typebalk #F3F3F3, breekpunten 768/992/1200, containers 750/970/1170.
   ========================================================================= */

/* ---- Fonts ---- */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/roboto-v15-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/roboto-v15-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/roboto-v15-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/roboto-v15-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	font-display: block;
	src: url('../fonts/fontawesome-webfont.woff2') format('woff2');
}

:root {
	--inl-accent: #5d9cec;
	--inl-accent-dark: #0084cc;
	--inl-text: #333;
	--inl-text-muted: #777;
	--inl-nav-link: #444;
	--inl-border: #e7e7e7;
	--inl-footer-bg: #202020;
	--inl-footer-text: #f9f9f9;
	--inl-copy-bg: #111;
	--inl-typebar-bg: #f3f3f3;
	--inl-header-h: 90px;
	--inl-typebar-h: 30px;
}

/* ---- Reset / basis ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	/* Live: body { font-family:"Roboto",helvetica,arial; line-height:1.7; color:#666; font-size:14px } */
	font-family: 'Roboto', helvetica, arial, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666;
	background-color: #fff;
}
/* Live-cascade (gemeten met CSS.getMatchedStylesForNode op www.iphone.nl):
   .h1..h6,h1..h6 { font-weight:500; line-height:1.1; color:inherit }
   .h1,.h2,.h3,h1,h2,h3 { margin-top:20px; margin-bottom:10px }
   h2,h3,h4,h5 { font-size:24px; font-weight:300; color:#333; padding-top:20px }
   h1 { font-size:22px; line-height:1.5; font-weight:300; color:#000 }
   (De latere regel `h1,h2,h3,h4{line-height:1.5}` in css.min.php is dood door
   een overtollige `}` ervoor en matcht op live dus niet.) */
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; margin: 20px 0 10px; }
h4, h5, h6 { margin-top: 10px; }          /* live: .h4,.h5,.h6,h4,h5,h6{margin:10px 0} */
/* Let op: live geeft h1 GEEN padding-top — die zit alleen in `h2,h3,h4,h5`. */
h1 { font-size: 22px; line-height: 1.5; font-weight: 300; color: #000; }
h2, h3, h4, h5 { font-size: 24px; font-weight: 300; color: var(--inl-text); padding-top: 20px; }
h6 { font-size: 12px; }
h4 { font-size: 14px; line-height: 18px; font-weight: 400; color: var(--inl-text); margin-bottom: 0; }
h3 a, h4 a { color: #222; }
h2 a:hover, h3 a:hover, h4 a:hover { color: var(--inl-accent); text-decoration: none; }
a { color: var(--inl-accent); text-decoration: none; transition: all 0.2s ease-in-out; }
a:hover { color: #538bd2; text-decoration: underline; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
p { margin: 0 0 10px; }
ol, ul { margin-top: 0; margin-bottom: 10px; } /* live (Bootstrap-basis) */
/* Live (Bootstrap-reset): formuliercontrols erven het lettertype van body,
   anders vallen knoppen terug op Arial. */
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

/* ---- Iconen (Font Awesome 4-subset) ---- */
.fa {
	display: inline-block;
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.fa-2x { font-size: 2em; }
.fa-bars::before { content: '\f0c9'; }
.fa-search::before { content: '\f002'; }
.fa-angle-right::before { content: '\f105'; }
.fa-chevron-right::before { content: '\f054'; }
.fa-mobile::before { content: '\f10b'; }
.fa-clock-o::before { content: '\f017'; }
.fa-user::before { content: '\f007'; }
.fa-tag::before { content: '\f02b'; }
.fa-eye::before { content: '\f06e'; }
.fa-th::before { content: '\f00a'; }
.fa-th-list::before { content: '\f00b'; }
.fa-align-justify::before { content: '\f039'; }
.fa-sort::before { content: '\f0dc'; }
.fa-filter::before { content: '\f0b0'; }
.fa-instagram::before { content: '\f16d'; }
.fa-twitter-square::before { content: '\f081'; }
.fa-facebook-square::before { content: '\f082'; }
.fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; }
.fa-ul > li { position: relative; }
.fa-li {
	position: absolute;
	left: -2.14285714em;
	width: 2.14285714em;
	top: 0.14285714em;
	text-align: center;
}

/* ---- Grid (Bootstrap 3-compatibele subset) ---- */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.row { margin-left: -15px; margin-right: -15px; }
.row::before, .row::after { display: table; content: ' '; }
.row::after { clear: both; }
[class*='col-'] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-xs-6 { float: left; width: 50%; }
.col-xs-12 { float: left; width: 100%; }
@media (min-width: 768px) {
	.col-sm-3 { float: left; width: 25%; }
	.col-sm-4 { float: left; width: 33.33333333%; }
	.col-sm-5 { float: left; width: 41.66666667%; }
	.col-sm-6 { float: left; width: 50%; }
	.col-sm-8 { float: left; width: 66.66666667%; }
	.col-sm-12 { float: left; width: 100%; }
}
@media (min-width: 992px) {
	.col-md-4, .col-md-6, .col-md-8, .col-md-12 { float: left; }
	.col-md-4 { width: 33.33333333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.66666667%; }
	.col-md-12 { width: 100%; }
}
.text-center { text-align: center; }
/* De live homepage zet .col-md-8/.col-md-4 RECHTSTREEKS in .container (zonder .row),
   waardoor het grid daar 1140px breed is i.p.v. 1170px: col-md-8 = 760px op x=142,5
   en col-md-4 = 380px op x=902,5. Alle andere live-pagina's gebruiken wel een .row.
   Gemeten: live `/` .container .col-md-8 -> x=143 w=760; `/contact` -> x=128 w=780. */
body.home .site-content > main + .container > .row { margin-left: 0; margin-right: 0; }

/* Zichtbaarheidshelpers (Bootstrap 3-conventie) */
.hidden-xs { display: block; }
li.hidden-xs { display: list-item; }
.visible-xs { display: none !important; }
@media (max-width: 767px) {
	.hidden-xs, li.hidden-xs { display: none !important; }
	.visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: auto;
	height: auto;
	clip: auto;
	background: #fff;
	color: var(--inl-accent);
	padding: 10px 16px;
}

/* ---- Header ---- */
/* Live: #header{height:130px;background:rgba(255,255,255,1);box-shadow:0 0 4px rgba(0,0,0,.5);
   border-top:2px solid rgb(92,135,207)} — GEEN zichtbare onderrand
   (.navbar{border:1px solid transparent} + .navbar-fixed-top{border-width:0 0 1px}). */
.header {
	background-color: #fff;
	border-top: 2px solid rgb(92, 135, 207);
	border-bottom: 1px solid transparent;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.navbar-fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
}
.header .container { position: relative; }
.header .container::after { display: table; content: ' '; clear: both; }
.header div.logo {
	float: left;
	padding-top: 11px;
	padding-right: 10px;
	margin: 0;
}
.header div.logo img { height: 58px; width: auto; } /* live: img.logo-size{height:58px} */

/* Live: .navbar-left{float:left!important} op .main-nav. Zonder die float valt de
   margin-top:28px samen met de container (margin collapse) en zakt de hele
   headerinhoud 28px omlaag (gemeten: logo op y=28 i.p.v. y=2). */
.main-nav { float: left; margin-top: 28px; margin-left: 8px; }
.main-nav .nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav .nav > .nav-item {
	float: left;
	position: relative;
	border-bottom: 2px solid transparent;
}
.main-nav .nav > .nav-item:hover { border-bottom-color: var(--inl-accent); }
/* Live: .nav>li>a{padding:15px 5px} + .navbar-nav>li>a{line-height:20px}
   + .header.navbar-fixed-top .main-nav .nav .nav-item a{color:#444;margin-right:10px;font-weight:400} */
.main-nav .nav > .nav-item > a {
	display: block;
	color: var(--inl-nav-link);
	font-weight: 400;
	line-height: 20px;
	margin-right: 10px;
	padding: 15px 5px;
	-webkit-font-smoothing: antialiased;
}
.main-nav .nav > .nav-item > a:hover { text-decoration: none; color: var(--inl-accent); }
/* V-01: live toont GEEN chevrons voor topniveau-items op desktop
   (live verbergt ze via #firstDropdownI en laat ze bij de rest weg);
   in dropdowns wel, in grijs (#bbb) — .thirdLevel weer zonder op desktop. */
@media (min-width: 768px) {
	.main-nav .nav > .nav-item > a .fa-angle-right { display: none; }
	.dropdown-menu .thirdLevel a .fa-angle-right { display: none; }
}
/* live: .dropdown-menu i{color:#BBBBBB;margin-right:5px}. Het pijltje is per
   menu een andere maat: 18px in de gewone dropdowns (Info), 13px in de
   megamenu's Modellen/Abonnementen/Los toestel en 12px bij Providers. */
.dropdown-menu .nav-item a .fa { color: #bbb; margin-right: 5px; font-size: 18px; }
#modellenDropdownMenu .fa-angle-right,
#abonnementenDropdownMenu .fa-angle-right,
#losToestelDropdownMenu .fa-angle-right { font-size: 13px; }
#providersDropdownMenu .fa-angle-right { font-size: 12px; }
.main-nav .caret,
.iphone-type-navbar .caret {
	display: inline-block;
	width: 0;
	height: 0;
	/* Bootstrap/live: 2px. Met 4px werd elk dropdown-item 2px breed en schoof de
	   hele balk op, waardoor het rechts uitgelijnde Providers-menu 19px verschoof. */
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

/* Dropdown / megamenu */
.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 220px;
	margin: 0;
	padding: 5px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
/* Hover-dropdowns vanaf tablet (768px), net als live — niet pas vanaf 992px. */
@media (min-width: 768px) {
	.nav-item.dropdown:hover > .dropdown-menu,
	.nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
}
.nav-item.dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu .nav-header h3 {
	font-size: 15px;
	color: var(--inl-accent);
	margin: 8px 15px 4px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 4px;
}
/* Live: li padding 2px 0, marge 0 5px, met een vaste scheidingslijn #f0f0f0. */
.dropdown-menu .nav-item { padding: 2px 0; margin: 0 5px; border-bottom: 1px solid #f0f0f0; }
.dropdown-menu .nav-item a {
	display: block;
	/* Live: padding 2px 15px met 10px marge rechts, regelhoogte 1.42857. */
	padding: 2px 15px;
	margin-right: 10px;
	font-size: 13px;
	line-height: 1.42857143;
	color: var(--inl-text-muted);
	white-space: nowrap;
}
.dropdown-menu .nav-item a:hover { color: var(--inl-accent); text-decoration: none; }
/* Live begrenst de menuhoogte met een ladder op vensterhóógte, niet met vh.
   Boven 900px hoog geldt géén maximum, waardoor het modellenmenu daar volledig
   uitklapt (gemeten: 1119px) in plaats van een schuifbalk te krijgen. */
.scrollable-menu { height: auto; overflow-x: hidden; }
@media (max-height: 400px) { .scrollable-menu { max-height: 200px; } }
@media (min-height: 401px) and (max-height: 500px) { .scrollable-menu { max-height: 300px; } }
@media (min-height: 501px) and (max-height: 600px) { .scrollable-menu { max-height: 400px; } }
@media (min-height: 601px) and (max-height: 700px) { .scrollable-menu { max-height: 500px; } }
@media (min-height: 701px) and (max-height: 800px) { .scrollable-menu { max-height: 600px; } }
@media (min-height: 801px) and (max-height: 900px) { .scrollable-menu { max-height: 700px; } }
@media (max-width: 767px) { .scrollable-menu { max-height: none; } }

/* Derde niveau: Info | Los toestel | Abonnementen */
.dropdown-menu .has-third { position: relative; }
.dropdown-menu .thirdLevel {
	top: 0;
	left: 100%;
	border-radius: 0 4px 4px 0;
}
@media (min-width: 768px) {
	.dropdown-menu .has-third:hover > .thirdLevel,
	.dropdown-menu .has-third:focus-within > .thirdLevel { display: block; }
}

/* Zoekveld in nav — live: icoon (fa-search, #5d9cec, 18px) dat een
   rechts uitgelijnde dropdown van 500px met het zoekveld opent (klik). */
.nav-search > a { cursor: pointer; }
.nav-search > a .fa-search { color: var(--inl-accent); font-size: 18px; } /* live: .rightAlignSearch i */
.dropdown-menu-right { left: auto; right: 0; }
@media (min-width: 768px) { .searchDropdown { width: 500px; } }
.nav-search .dropdown-menu { display: none; }
.nav-search.open > .dropdown-menu { display: block; }
.searchbox { margin: 0; padding: 3px 0; } /* live in dropdown: margin 0 */
/* Live: .searchbox-input { border:0; border-bottom:1px solid #E0E0E0; width:150px;
   padding:4px; font-size:13px; border-radius:2px } — in dropdown 90% breed. */
.searchbox-input {
	border: 0;
	border-bottom: 1px solid #e0e0e0;
	border-radius: 2px;
	padding: 4px;
	font-size: 13px;
	width: 150px;
}
.dropdown-menu .searchbox-input { width: 90%; margin-left: 10px; }
.searchbox-input:focus { outline: 0; border-bottom-color: var(--inl-accent); }
/* Zoekknop als icoontje (live: .searchbox button{color:#5d9cec;background:#fff;border:0}) */
.nav-search .search-form { display: flex; align-items: center; }
.nav-search .search-form label { flex: 1; }
.nav-search .search-submit {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	border: 0;
	background: #fff;
	color: var(--inl-accent);
	font-size: 0;
	padding: 4px 8px;
	cursor: pointer;
}
.nav-search .search-submit::before { content: '\f002'; font-family: 'FontAwesome'; font-size: 14px; }

/* Mobiele bediening — live: icon-only knoppen in blauw (rgb(92,135,207)), geen kader */
.mobile-menu-controls { display: none; }
.mobile-nav-btn, .mobile-search-btn {
	background: none;
	border: 0;
	color: rgb(92, 135, 207);
	font-size: 26px;
	padding: 6px 8px;
	cursor: pointer;
}
.mobile-search { padding: 8px 15px; background: #fff; border-top: 1px solid var(--inl-border); }
.mobile-search .searchbox-input { width: 100%; }

/* ---- Typebalk ----
   Live staat de balk BINNEN .container, dus 1140px breed op x=142,5 (bij 1440).
   In dit thema is #iphone-type-menu een broer van .container; die krijgt daarom
   dezelfde containermaten. Live: .iphone-type-navbar{margin-top:90px;height:30px;
   border-color:#e7e7e7;background:#F3F3F3;border-radius:5px;overflow-y:hidden}
   — border-color zonder border-width, dus GEEN zichtbare rand. */
#iphone-type-menu {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 768px)  { #iphone-type-menu { width: 750px; } }
@media (min-width: 992px)  { #iphone-type-menu { width: 970px; } }
@media (min-width: 1200px) { #iphone-type-menu { width: 1170px; } }
.iphone-type-navbar {
	margin-top: 0;
	height: var(--inl-typebar-h);
	border: 0;
	border-color: var(--inl-border);
	background-color: var(--inl-typebar-bg);
	border-radius: 5px;
	overflow: hidden;
}
/* De "Meer"-lijst staat als position:absolute BINNEN deze balk, op top:100% —
   dus buiten de 30px hoge balk, en de overflow hierboven sneed hem weg. Het
   menu opende wel (de hover-regel bij .nav-item.dropdown werkt), je zag alleen
   niets. Ook live's overflow-y:hidden knipt hier: zodra een as niet visible is,
   gedraagt de andere zich als auto.
   De overflow blijft daarom staan voor de ruststand (zo houdt de balk zijn
   afgeronde hoeken), en gaat alleen open zolang er met de balk wordt
   gewerkt. Daarmee is de balk in rust pixelgelijk aan de vorige versie. */
.iphone-type-navbar:hover,
.iphone-type-navbar:focus-within { overflow: visible; }
/* :not(.dropdown-menu) is essentieel: zonder die uitzondering wint deze regel
   (specificiteit 0,1,1) van .dropdown-menu{display:none} (0,1,0) en verschijnt de
   inhoud van het "Meer"-menu permanent ín de balk — live toont 7 modellen + Meer
   (elk 12,5% breed), zonder de uitzondering werden het er 12. */
.iphone-type-navbar ul:not(.dropdown-menu) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	white-space: nowrap;
}
.iphone-type-navbar li.nav-item { margin: 0 10px; border-radius: 5px; position: relative; }
/* Live: .iphone-type-navbar li a{color:#777;padding:5px} — lettergrootte erft
   van body (14px); alleen op tablet zet live 13px. */
.iphone-type-navbar li a {
	display: block;
	color: var(--inl-text-muted);
	padding: 5px;
	line-height: 20px;
}
.iphone-type-navbar li a:hover { background-color: #bebebe; color: #fefefe; text-decoration: none; }
.iphone-type-navbar li.active a { font-weight: bold; color: var(--inl-accent); }
.iphone-type-navbar .dropdown-menu { min-width: 160px; }
/* "Meer" is het laatste item op de balk, dus een lijst die vanaf zijn linkerrand
   naar rechts uitklapt loopt eraf. Gemeten met Playwright: 40px buiten beeld bij
   768, 24px bij 800 en 18px bij 992; vanaf 1200 paste hij wel. Dat viel niet op
   zolang de lijst door de overflow van de balk werd afgeknipt — nu hij zichtbaar
   is, moet hij rechts uitlijnen. */
.iphone-type-navbar .iphone-type-meer > .dropdown-menu { left: auto; right: 0; }
/* Live: items vullen de balk — ul 100% breed, items elk 12.5% gecentreerd */
@media (min-width: 768px) {
	.iphone-type-navbar ul:not(.dropdown-menu) { width: 100%; }
	.iphone-type-navbar li.nav-item { margin: 0 0 0 12px; text-align: center; }
}
@media (min-width: 992px) {
	.iphone-type-navbar li.nav-item { width: 12.5%; flex: 0 0 12.5%; margin: 0; }
	/* main.js verhuist modellen naar "Meer" zolang
	   som(breedtes) > nav.clientWidth - meer.offsetWidth - 8.
	   Bij items van exact 12,5% valt de 7e er door die marge van 8px net buiten
	   en toonde de balk 6 modellen + Meer i.p.v. de 7 + Meer van live. Een ul die
	   12px smaller is dan de balk maakt de 7e wél passend; de items blijven
	   onderling gelijk (12,5%) en de rij staat gecentreerd. */
	.iphone-type-navbar > ul:not(.dropdown-menu) { width: calc(100% - 12px); }
}

@media (min-width: 768px) and (max-width: 991px) {
	.iphone-type-navbar li a { padding-left: 2px; padding-right: 1px; font-size: 13px; }
}

/* Live reserveert een vaste kophoogte en zet de typebalk daarbinnen op
   margin-top:90px (desktop) / 75px (tablet):
   #header{height:130px} + .iphone-type-navbar{margin-top:90px;height:30px}
   @768-991: #header{height:110px} + .iphone-type-navbar{margin-top:75px} */
@media (min-width: 992px) {
	.header { height: 130px; }
	.header > .container { height: 90px; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.header { height: 110px; }
	.header > .container { height: 75px; }
}

/* ---- Pagina-indeling ----
   Live zet de vrijloop onder de vaste kop als margin-top op <main> zelf
   (main.noimage{margin-top:130px}; @768-991 115px; @max-767 190px). Dat is niet
   hetzelfde als padding op een wrapper: de 20px bovenmarge van de eerste kop
   klapt bij live IN die marge, bij padding komt hij er bovenop (gemeten: main
   op y=210 i.p.v. 190 op mobiel). Alle sjablonen beginnen met <main>. */
.site-content { padding-top: 0; }
main { display: block; margin-top: calc(var(--inl-header-h) + var(--inl-typebar-h) + 10px); }
main.noimage { display: block; }

/* Lined heading — exact live:
   h2.lined,h3.lined,h4.lined,h5.lined { font-size:12px; color:#999; width:100%;
   text-align:center; border-bottom:1px dotted #E0E0E0; line-height:0.1em;
   margin:20px 0 20px; display:block }  .lined span { background:#fff; padding:0 10px; color:#999 } */
h2.lined, h3.lined, h4.lined, h5.lined {
	display: block;
	width: 100%;
	font-size: 12px;
	font-weight: 300;
	color: #999;
	text-align: center;
	border-bottom: 1px dotted #e0e0e0;
	line-height: 0.1em;
	margin: 20px 0;
	padding-top: 20px;
}
.lined span { background: #fff; padding: 0 10px; color: #999; }
.lined span a { color: #999; }

/* ---- Nieuwskaarten ---- */
/* Live: .thumbnail { padding:0; border:0; border-radius:0; line-height:1.7 } — GEEN kader.
   .item.list-group-item { float:none; width:100%; background:#fff; margin-bottom:0 }
   .list-group-item { border:0; padding:0 15px }
   .item.list-group-item .thumbnail { margin-bottom:25px; padding-left:15px; padding-right:15px }
   .item.list-group-item .caption { padding:9px 9px 0 20px }
   .list-group-item .thumbnail .backgroundImg { background-position:top; height:200px;
   background-size:contain; margin-top:14px; border-radius:5px } */
/* Live: #products draagt .group-item{padding-top:15px;padding-bottom:15px}
   en #products{margin-bottom:0;padding-bottom:0} -> netto 15px boven. */
#products { margin-bottom: 0; padding-top: 15px; padding-bottom: 0; }
.item { padding-left: 5px; padding-right: 5px; }
.item.list-group-item {
	float: none;
	width: 100%;
	background-color: #fff;
	border: 0;
	margin-bottom: 0;
	padding: 0 15px;
}
.item .thumbnail {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 20px;
	background: #fff;
	line-height: 1.7;
	display: block;
}
.item.list-group-item .thumbnail { margin-bottom: 25px; padding-left: 15px; padding-right: 15px; }
.item.list-group-item .caption { padding: 9px 9px 0 20px; color: #666; }
.backgroundImg { background-repeat: no-repeat; background-size: cover; }
/* Live plaatst hier een <img class="backgroundImg2"> in een .col-md-4.col-no-padding:
   .col-no-padding{padding:0} en
   .backgroundImg2{max-height:200px;border-top-left-radius:5px;border-top-right-radius:5px;
   margin-top:14px;object-fit:cover}. De live-thumbnails zijn 800x400 (2:1), dus de
   hoogte volgt de breedte tot maximaal 200px. Gemeten live: 243,3 x 121,7 px. */
.list-group-item .thumbnail .backgroundImg {
	padding-left: 0;
	padding-right: 0;
	background-position: center;
	background-size: cover;
	aspect-ratio: 2 / 1;
	max-height: 200px;
	margin-top: 14px;
	border-radius: 5px 5px 0 0;
}
/* Gestapeld (<992): de thumbnail vult de volle kolombreedte, net als live.
   Op desktop blijft de aspect-ratio 2/1 gelden voor de smalle col-md-4 links. */
@media (max-width: 991px) {
	.list-group-item .thumbnail .backgroundImg {
		width: 100%;
		aspect-ratio: auto;
		height: 200px;
		max-height: 200px;
	}
}
.backgroundImg.no-image { background-color: #f3f3f3; }
/* Live: .blogitem-title { font-size:22px; color:#333; font-weight:500; line-height:1.5;
   margin-top:0; padding-top:0; margin-bottom:10px } — links via h3 a: #222 */
.blogitem-title { font-size: 22px; color: var(--inl-text); font-weight: 500; line-height: 1.5; margin-top: 0; padding-top: 0; margin-bottom: 10px; }
.blogitem-title a { color: #222; }
.blogitem-title a:hover { color: var(--inl-accent); text-decoration: none; }
.blogitem-summary { margin-top: -5px; } /* kleur/formaat erven van body (#666/14px) */
/* Live: ul.blogitem-date { padding-top:10px; color:#999; font-weight:400; font-size:12px;
   text-transform:uppercase }  ul.blog-cat idem met font-weight:300
   li's: inline-block; margin-left:-5px; padding:0 20px 0 5px; i { margin-right:5px } */
.blogitem-date, .blog-cat {
	display: block;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
}
.blogitem-date { padding-top: 10px; font-weight: 400; }
.blog-cat { font-weight: 300; }
.blogitem-date > li, .blog-cat > li {
	display: inline-block;
	margin-left: -5px;
	padding-right: 20px;
	padding-left: 5px;
}
.blogitem-date .fa, .blog-cat .fa { margin-right: 5px; }
.blog-cat a:hover { text-decoration: none; }
/* Labels — samenstelling van live .label + .label-transparent + .label-nieuws + .label-xl:
   inline-block; 12px; fw400; uppercase; padding 5px 8px; radius .25em;
   kleur/rand #5d9cec; hover: wit op #5d9cec; transition .5s */
.label {
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	text-transform: uppercase;
	padding: 5px 8px;
	margin-right: 3px;
	margin-bottom: 10px;
	border: 1px solid #e0e0e0;
	color: #444;
	transition: 0.5s;
}
.label i, .label .fa { margin-right: 5px; }
.label-nieuws { color: var(--inl-accent); border-color: var(--inl-accent); }
.label-nieuws:hover, a:hover .label-nieuws { color: #fff; background-color: var(--inl-accent); border-color: var(--inl-accent); }

/* ---- Artikelkop (live-waarden, voor de artikelopmaak van fase 3) ----
   .banner: foto 355px cover/top-center; titel-overlay zwart 75%; datumbalk blauw 75%. */
.banner {
	width: 100%;
	height: 355px;
	position: relative;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}
.blog-title {
	color: #fff;
	font-size: 32px;
	line-height: 44px;
	font-weight: 200;
	background-color: rgba(0, 0, 0, 0.75);
	padding: 5px 10px;
	display: inline-block;
	margin: 0;
	position: absolute;
	bottom: 35px;
}
/* Live laat de bootstrap-ondermarge van 10px staan; omdat de balk absoluut met
   bottom:2px staat, schuift die marge hem 10px omhoog. */
ul.blog-date {
	list-style: none;
	background-color: rgba(93, 156, 236, 0.75);
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	padding: 1px 10px;
	display: inline-block;
	margin: 0 0 10px;
	position: absolute;
	bottom: 2px;
}
ul.blog-date a { color: #fff; }
ul.blog-date a:hover { color: #f0f0f0; }
ul.blog-date > li { display: inline-block; margin-left: -5px; padding-right: 20px; padding-left: 5px; }
ul.blog-date i { margin-right: 5px; }
.blog-summary { font-style: italic; font-size: 15px; font-weight: 600; margin: 20px 0 10px; }
@media (max-width: 767px) {
	.blog-title { font-size: 26px; line-height: 30px; bottom: 55px; }
}

/* ---- Nieuwsfilterbalk ---- */
/* Live is dit een gewone .row (negatieve gutters van -15px); met margin:… 0 …
   verschoof de hele balk 15px naar rechts en werden de kolommen 30px smaller. */
.news-filter { margin: 0 -15px; text-align: center; }
/* De filterknoppen dragen lange labels; zonder deze regels duwen ze de
   archiefpagina op smalle schermen breder dan de viewport. */
.news-filter .btn-group { max-width: 100%; }
.news-filter .btn-group > .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) {
	.news-filter [class*='col-'] { padding-left: 8px; padding-right: 8px; }
	.news-filter .btn-group > .btn { font-size: 12px; padding: 6px 8px; }
}
/* Live zet alleen .filterTxt{font-size:13px}; kleur en marge erven van body (#666). */
.news-filter .filterTxt { font-size: 13px; }
#filterNieuws .fa-tag::before { content: '\f0b0'; } /* live toont een trechter-icoon in de filterknop */
/* Live .btn = Bootstrap-basis + custom: font-size:13px; uppercase; radius 2px;
   font-weight:bold; white-space:normal; transition .4s */
.btn {
	display: inline-block;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.42857143;
	text-align: center;
	text-transform: uppercase;
	white-space: normal;
	vertical-align: middle;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #fff;
	color: var(--inl-text);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.4s ease-in-out;
}
.btn:hover { background: #e6e6e6; color: var(--inl-text); text-decoration: none; }
/* Live: .btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}
   staat VOOR de custom .btn{font-size:13px;border-radius:2px}, dus .btn-sm houdt
   13px met line-height 1.5 (gemeten hoogte 31,5px). */
.btn-sm { padding: 5px 10px; line-height: 1.5; }
.btn.active, .btn[aria-pressed='true'] { background: #e6e6e6; border-color: #adadad; color: var(--inl-text); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
/* Live: Bootstrap .btn-primary + custom { background:#5d9cec; border-color:#5d9cec } */
.btn-primary { color: #fff; background-color: var(--inl-accent); border-color: var(--inl-accent); }
.btn-primary:hover, .btn-primary:focus { color: #fff; background-color: #286090; border-color: #204d74; text-decoration: none; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }
/* Pagina's met dealszijbalk (page-contact.php): live toont op smalle schermen
   alleen het horizontale vergelijkerblok bovenaan, niet de zijbalkvariant. */
@media (max-width: 767px) {
	.page-met-zijbalk .vergelijkerBlokSider { display: none; }
}
/* Live laat de bovenmarge van de kop uit dat blok gewoon samenvallen met de
   marge van <main>; de clearfix uit article.css blokkeert dat en duwde de hele
   mobiele pagina 20px omlaag (kop y=210 i.p.v. 190). */
.page-met-zijbalk #homeVergelijkerWrap::before { display: none; }
/* Live zet de "Terug naar …"-knop onder aan de vergelijkerpagina's in een
   <center>; die tag ging bij de content-import verloren, waardoor de knop links
   uitlijnde. Gemeten live /iphone-abonnementen-vergelijken: knop x=538 w=349
   binnen de kolom x=143 w=1140 — dus horizontaal gecentreerd. */
.page-content a.btn-large {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.btn-group { position: relative; display: inline-block; }
.btn-group .btn + .btn { margin-left: -1px; }
/* Live (Bootstrap): alleen de buitenste knoppen van een groep houden ronde hoeken. */
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group .dropdown-menu { left: 50%; transform: translateX(-50%); text-align: left; max-height: 60vh; overflow-y: auto; }
.btn-group:hover > .dropdown-menu, .btn-group:focus-within > .dropdown-menu { display: block; }
.btn-group .dropdown-menu a { display: block; padding: 5px 15px; font-size: 13px; color: var(--inl-text-muted); white-space: nowrap; }
.btn-group .dropdown-menu a:hover { color: var(--inl-accent); text-decoration: none; }
.btn-group .dropdown-menu .active > a { color: var(--inl-accent); font-weight: 500; }
.btn-group .dropdown-menu .count { color: #aaa; font-size: 11px; }

/* Weergavevarianten van de artikellijst */
#products.view-compact .backgroundImg { display: none; }
#products.view-compact .caption { width: 100%; }
#products.view-compact .blogitem-summary { display: none; }
@media (min-width: 992px) {
	#products.view-grid .item { width: 50%; }
	#products.view-grid .backgroundImg { width: 100%; min-height: 160px; }
	#products.view-grid .caption { width: 100%; }
	#products.view-grid .blogitem-summary { display: none; }
}

/* Live gebruikt op het nieuwsarchief een gewone <h1>: 22px / line-height 1.5,
   hoogte 33px (gemeten op /iphone-nieuws). Met 24px brak de titel over twee
   regels en schoof de hele lijst 34px omlaag. */
.archive-title { margin-bottom: 10px; } /* live: h1-standaard */
.archive-description { color: var(--inl-text-muted); margin-bottom: 15px; }
.archive-count p, .search-count { color: var(--inl-text-muted); font-size: 13px; }
.error-search, .search-again { margin: 15px 0 25px; }
.error-search .searchbox-input, .search-again .searchbox-input { width: 100%; max-width: 420px; }

/* Paginanavigatie */
.pagenavi { margin: 20px 0; }
.pagenavi .nav-links { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.pagenavi .page-numbers {
	padding: 4px 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	color: var(--inl-accent);
}
.pagenavi .page-numbers.current { background: var(--inl-accent); color: #fff; border-color: var(--inl-accent); }

/* Zijbalk deals — live: #siderBlokNav{width:100%;margin-bottom:10px} li{width:50%}
   li a{color:#444}  actieve/hover tab: border-bottom:2px solid #F49600 (oranje) */
#siderBlokNav { list-style: none; width: 100%; margin: 0 0 10px; padding: 0; display: flex; }
#siderBlokNav .nav-item { width: 50%; text-align: center; border-bottom: 2px solid transparent; }
#siderBlokNav a { display: block; padding: 10px 15px; color: #444; }
#siderBlokNav a:hover { background: none; text-decoration: none; }
#siderBlokNav .nav-item.active, #siderBlokNav .nav-item:hover { border-bottom-color: #f49600; }

/* ---- Footer ---- */
footer.site-footer {
	background-color: var(--inl-footer-bg);
	margin-top: 40px;
	padding-top: 20px;
	color: var(--inl-footer-text);
	font-size: 14px;
}
/* Live: footer h3{color:#5d9cec} — grootte/marges komen van h2,h3,h4,h5
   (24px/300/padding-top:20px) en .h1,.h2,.h3,h1,h2,h3{margin-top:20px}. */
footer.site-footer h3 { color: var(--inl-accent); }
/* Live: footer ul li{color:#5d9cec} — verder geen extra marges op li of kolom. */
footer.site-footer ul li { color: var(--inl-accent); }
footer.site-footer a { color: #eee; }
footer.site-footer a:hover { color: var(--inl-accent); }
.social-links a { margin-right: 8px; }
.dark {
	background-color: var(--inl-copy-bg);
	padding: 20px 15px;
	margin-top: 20px;
	color: #666;
	border-top: 1px dotted #666;
}
.dark a { color: #888; }

/* ---- Back to top ----
   Live: a.back-to-top{width:60px;height:60px;right:20px;bottom:80px;text-indent:-9999px;
   background:url("../img/top.png") no-repeat center 43%;border-radius:30px}.
   top.png is 38x38 px, afgerond vierkant #454545 met een witte chevron omhoog —
   dus geen blauwe cirkel van 60px maar een donkergrijs blokje van 38px. */
.back-to-top {
	display: none;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 80px;
	width: 60px;
	height: 60px;
	background: none;
	color: #fff;
	text-align: center;
	font-size: 0;
}
.back-to-top::before {
	content: '\f106';
	font-family: 'FontAwesome';
	font-size: 16px;
	display: block;
	width: 38px;
	height: 38px;
	line-height: 38px;
	margin: 9px auto 0;
	background: #454545;
	border-radius: 6px;
}
.back-to-top.visible { display: block; }
@media (max-width: 1024px) { .back-to-top { bottom: 20px; } }

/* ---- Responsive: tablet en mobiel ---- */
@media (max-width: 991px) {
	.main-nav { margin-top: 18px; }
	.main-nav .nav > .nav-item > a { padding: 8px 3px 10px; margin-right: 6px; font-size: 13px; }
	/* live @768-991: main.noimage{margin-top:115px} -> 75 + 30 + 10 */
	:root { --inl-header-h: 75px; }
}

/* Desktop + tablet (>=768): logo + menu op één rij houden, net als live. Met
   floats paste het geheel bij smalle breedtes (768-1024) op enkele pixels na in
   de container en viel het menu daardoor onder het logo (float-drop). Flexbox
   met nowrap dwingt één rij af; de floats binnen het menu blijven werken. Bij
   brede schermen is het resultaat identiek aan de oude float-opmaak. */
@media (min-width: 768px) {
	.header > .container { display: flex; align-items: flex-start; flex-wrap: nowrap; }
	.header div.logo { float: none; flex: 0 0 auto; }
	/* Menu houdt zijn eigen inhoudsbreedte (niet krimpen), anders wrapt de
	   zoekknop; flex-nowrap houdt logo + menu op één rij ook als het krap zit. */
	.main-nav { float: none; flex: 0 0 auto; }
}

@media (max-width: 767px) {
	/* Live mobiel (gemeten op 375): #header 95px hoog, "Vergelijk"-balk op y=69
	   met hoogte 110 (menuFix.css) en main.noimage op y=190. */
	:root { --inl-header-h: 70px; --inl-typebar-h: 110px; }
	.header { height: 95px; }
	.header > .container { height: 57px; }
	#iphone-type-menu-nav { margin-top: 10px; } /* live: @max-767 .iphone-type-navbar{margin-top:10px} */
	/* Toestel- en vergelijkerpagina's: live laadt daar menuFix.css niet en toont
	   de "Vergelijk"-balk niet — kop 65px, main.margin-top 70px (gemeten op live). */
	body.vergelijkerpagina #iphone-type-menu-nav { display: none !important; }
	body.vergelijkerpagina .header { height: 65px; }
	body.vergelijkerpagina main { margin-top: 70px; }
	/* Live gebruikt op het artikel main.newsItemMain: 130px desktop, 170px mobiel
	   (i.p.v. de 190px van main.noimage). */
	body.single-post main { margin-top: 170px; }
	/* Live mobiel: logo gecentreerd (float:none; margin auto), 40px hoog */
	.header div.logo { float: none; text-align: center; padding: 4px 0 0; margin: 0 auto; }
	.header div.logo img { height: 40px; padding-top: 3px; }
	.main-nav { margin: 0; }
	.mobile-menu-controls { display: block; }
	.mobile-nav-btn { position: absolute; right: 10px; top: 4px; }
	.mobile-search-btn { position: absolute; right: 56px; top: 4px; }

	/* Offcanvas menu links */
	.navmenu {
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 300px;
		max-width: 85vw;
		background: #fff;
		border-right: 1px solid var(--inl-border);
		overflow-y: auto;
		transition: transform 0.3s ease;
		z-index: 1040;
		padding: 15px;
	}
	body.nav-open .navmenu { transform: translateX(300px); }
	.main-nav .nav > .nav-item {
		float: none;
		border-bottom: 1px solid #f0f0f0;
	}
	.main-nav .nav > .nav-item > a { padding: 12px 5px; font-size: 15px; }
	.dropdown-menu {
		position: static;
		box-shadow: none;
		border: 0;
		padding-left: 15px;
		min-width: 0;
	}
	.dropdown-menu .thirdLevel { position: static; }
	.dropdown-menu .nav-item a { white-space: normal; }
	.nav-search { display: none; }

	/* Live mobiel: modellen-typebalk verborgen; in de plaats het "Vergelijk"-paneel */
	#iphone-type-menu { display: none; }
	.iphone-type-navbar {
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		height: auto;
		min-height: 0;
		overflow: visible;
		/* Randen mogen de balk niet buiten het scherm duwen. */
		max-width: 100%;
		border-left: 0;
		border-right: 0;
	}
	/* Live: menuFix.css zet @max-767 .iphone-type-navbar{height:110px} — de balk
	   is dus iets hoger dan de inhoud (33 + 36 + 36 = 105 px). Hier min-height
	   in plaats van height: zodra een label over twee regels valt, past 110px
	   niet meer en liep de inhoud over de tekst eronder heen. */
	#iphone-type-menu-nav { min-height: 110px; }
	#iphone-type-menu-nav,
	#iphone-type-menu-mobiel {
		max-width: 100%;
		overflow-x: hidden;
	}
	#iphone-type-menu-nav ul:not(.dropdown-menu) {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		max-width: 100%;
		/* De desktopvariant hierboven zet white-space: nowrap om de balk op één
		   regel te houden. Dat werkt alleen zolang alles naast elkaar past. Hier
		   staan de labels in twee kolommen van 50%, en "Abonnementen zonder
		   toestel" past daar niet op één regel in: de tekst liep dan over het
		   buuritem heen. Op mobiel mag het dus gewoon afbreken. */
		white-space: normal;
	}
	#iphone-type-menu-nav .nav-item a { overflow-wrap: anywhere; }
	/* Live: @max-767 .nav-item{padding-top:3px;padding-bottom:3px} */
	#iphone-type-menu-nav .nav-item { width: 50%; margin: 0; padding: 3px 0; text-align: center; }
	/* Live: @max-767 .nav-item{padding-top:3px;padding-bottom:3px} + #iphone-type-menu-header{font-weight:600};
	   kleur erft van body (#666), gemeten hoogte 33,2 px. */
	#iphone-type-menu-nav #iphone-type-menu-header { width: 100%; font-weight: 600; padding: 3px 0; font-size: 16px; }
	#iphone-type-menu-nav ul:nth-child(2) { border-bottom: 1px solid #c3c3c3; }
	#iphone-type-menu-nav ul:nth-child(2) .nav-item:first-child,
	#iphone-type-menu-nav ul:nth-child(3) .nav-item:first-child { border-right: 1px solid #c3c3c3; }
	/* Live: @max-767 .nav>li>a{padding:5px 5px} + #iphone-type-menu-nav li a{color:#5d9cec;padding-left:0;padding-right:0} */
	#iphone-type-menu-nav .nav-item a { display: block; padding: 5px 0; font-size: 13px; line-height: 20px; color: var(--inl-accent); }
	#iphone-type-menu-nav .nav-item a:hover { background: none; color: var(--inl-accent); }

	/* Live mobiel: body 16px; kaartafbeelding cover/center 140px; paddings weg */
	body { font-size: 16px; }
	.item.list-group-item .thumbnail { padding-left: 0; padding-right: 0; }
	.item.list-group-item .caption { padding: 0; }
	.list-group-item .thumbnail .backgroundImg {
		background-size: cover;
		background-position: center;
		height: 140px;
	}
	.blogitem-title { padding-top: 20px; }
}
/* Live verkleint de typebalklinks nog verder op zeer smalle schermen:
   @max-450 {padding-left:2px;padding-right:2px}  @max-400 {font-size:11px;padding:5px 0} */
@media (max-width: 450px) { #iphone-type-menu-nav .nav-item a { padding-left: 2px; padding-right: 2px; } }
@media (max-width: 400px) { #iphone-type-menu-nav .nav-item a { font-size: 11px; padding-left: 0; padding-right: 0; } }

/* Body-scroll blokkeren als offcanvas open is */
body.nav-open { overflow: hidden; }
body.nav-open::after {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1035;
}
/* De header is .navbar-fixed-top: position:fixed mét z-index 1030, en vormt
   daarmee een eigen stacking context. Het offcanvas-menu zit binnen die header,
   dus de z-index 1040 van .navmenu telt alleen bínnen de header en niet ten
   opzichte van de pagina. De verduistering hierboven staat op 1035 in de
   wortelcontext en kwam daardoor over de hele header heen te liggen — het menu
   werd zwart in plaats van de pagina erachter. Zolang het menu open is tilt de
   header zichzelf boven de verduistering uit; de skip-link (2000) blijft daar
   nog steeds boven en .back-to-top (999) wordt nog steeds verduisterd. */
body.nav-open .header { z-index: 1045; }

/* ---- Navigatiedetails, gemeten in de originele CSS-bundel ---- */

/* Verticale scheidingslijn tussen logo en menu (live: li.divider). */
li.divider {
	padding: 15px 5px 35px;
	margin-right: 15px;
	border-right: 1px solid #e0e0e0;
	float: left;
	list-style: none;
}
@media (max-width: 991px) { li.divider { display: none; } }

/* Driehoekje onder een geopend menu-item, zoals live. */
.main-nav .nav > .nav-item { position: relative; }
.main-nav .nav .nav-item > .caretDiv { position: absolute; left: 0; right: 0; bottom: 0; }
.main-nav .nav .nav-item:hover > .caretDiv::after,
.main-nav .nav .nav-item:focus-within > .caretDiv::after {
	content: '';
	display: block;
	width: 0;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--inl-accent);
	border-left: 6px solid transparent;
	position: absolute;
	bottom: -2px;
	left: 50%;
	margin-left: -6px;
}

/* "Meer" in de typebalk heeft op live een pijltje. */
.iphone-type-meer > a .caret { margin-left: 5px; }

/* ---- Modellen-megamenu: drie kolommen, exact zoals live ----
   Gemeten in de originele bundel: #nieuwsDropdownMenu{min-width:640px},
   h3{font-size:16px;font-weight:600;color:#717171;margin:4px 0},
   .navDS a{font-weight:600;font-size:13px}, .multi-column-dropdown li a{color:#333}. */
#modellenDropdownMenu {
	/* Gemeten op live: paneel 769px breed met kolommen van 256px op
	   x=303/560/816 en binnenruimte 5px 0. De hoogte komt van .scrollable-menu. */
	min-width: 769px;
	padding: 5px 0;
	overflow-x: hidden;
}
#modellenDropdownMenu .mega-col {
	float: left;
	width: 33.3333%;
	/* Live: .col-sm-4 met padding 0 5px 0 15px. */
	padding: 0 5px 0 15px;
	box-sizing: border-box;
}
#modellenDropdownMenu::after { content: ''; display: table; clear: both; }
#modellenDropdownMenu h3 {
	/* Gemeten op live: 18px/600 #717171, marge 20px 0 10px, geen randlijn. */
	font-size: 18px;
	font-weight: 600;
	color: #717171;
	/* De 5px links laat de kop gelijklopen met de regels eronder (live x=323). */
	margin: 20px 5px 10px;
	padding: 0;
	border-bottom: 0;
}
#modellenDropdownMenu .multi-column-dropdown {
	list-style: none;
	margin: 0 0 6px;
	/* Live begint de eerste regel 5px onder de kop. Dat moet padding zijn:
	   een marge zou samenvallen met de ondermarge van de h3. */
	padding: 5px 0 0;
}
#modellenDropdownMenu .multi-column-dropdown > li {
	/* Live: li padding 2px 0, marge 0 5px, onderrand 1px #f0f0f0. */
	border-bottom: 1px solid #f0f0f0;
	padding: 2px 0;
	margin: 0 5px;
}
#modellenDropdownMenu .multi-column-dropdown > li:hover { background-color: #fcfcfc; }
#modellenDropdownMenu .model-naam,
#modellenDropdownMenu .multi-column-dropdown > li > a {
	/* Live zet de modelnaam als inline anker (gemeten breedte 84px voor
	   "iPhone 17", niet de volle kolom) met padding 2px 15px 2px 0. */
	display: inline;
	font-weight: 600;
	font-size: 13px;
	color: #777;
	white-space: normal;
	padding: 2px 15px 2px 0;
	margin: 0 10px 0 0;
}
#modellenDropdownMenu .model-naam:hover,
#modellenDropdownMenu .multi-column-dropdown > li > a:hover {
	color: var(--inl-accent);
	text-decoration: none;
}
/* De twee doorverwijzingen onder de modelnaam, op één regel met een streepje. */
#modellenDropdownMenu .model-links,
#providersDropdownMenu .model-links {
	display: block;
	font-size: 12px;
	/* Live: de verwijzingen staan 9px ingesprongen, 34px onder de modelnaam. */
	padding-left: 9px;
	/* De rij is 65px hoog: 10px boven de verwijzingen, 5px eronder. */
	margin-top: 10px;
	margin-bottom: 5px;
	/* De twee verwijzingen horen op één regel te blijven, ook als de kolom
	   krap wordt; anders valt "Abonnementen" onder "Los toestel |". */
	white-space: nowrap;
}
#modellenDropdownMenu .model-links a,
#modellenDropdownMenu .model-links .model-scheiding,
#providersDropdownMenu .model-links a,
#providersDropdownMenu .model-links .model-scheiding {
	display: inline;
	white-space: nowrap;
	color: var(--inl-text-muted);
	/* De algemene dropdown-regel geeft ankers padding én 10px marge rechts;
	   op de verwijzingsregel heeft live geen van beide. */
	padding: 0;
	margin: 0;
	font-size: 12px;
}
#modellenDropdownMenu .model-links a:hover,
#providersDropdownMenu .model-links a:hover { color: var(--inl-accent); text-decoration: none; }
.model-scheiding { color: #ccc; margin: 0 4px; }
/* In het modellenmenu staat het streepje binnen het anker, met alleen de spatie
   uit de opmaak ernaast — geen extra marge (live: x=396 direct na x=391). */
#modellenDropdownMenu .model-links .model-scheiding { margin: 0; }
#modellenDropdownMenu .fa-angle-right { color: #bbb; margin-right: 5px; }

/* Op mobiel onder elkaar, binnen het offcanvas-menu. */
@media (max-width: 767px) {
	#modellenDropdownMenu { min-width: 0; width: 100%; max-height: none; }
	#modellenDropdownMenu .mega-col { float: none; width: 100%; padding: 0; }
}

/* Tablet (768-991): de megamenu's houden hun kolomopmaak maar worden smaller
   zodat ze binnen het venster passen — live doet hetzelfde (op 820px ~640px
   i.p.v. de 769px van desktop). De kolommen (33/50%) schalen mee. */
@media (min-width: 768px) and (max-width: 991px) {
	#modellenDropdownMenu,
	#abonnementenDropdownMenu,
	#losToestelDropdownMenu,
	#providersDropdownMenu {
		min-width: 0;
		width: calc(100vw - 180px);
		max-width: 769px;
	}
}


/* Providers-dropdown: twee kolommen, zelfde opmaak als het modellenmenu. */
/* Gemeten op live: menu 650px breed met kolommen van 325px, bovenrand 2px
   #5d9cec, hoeken alleen onderaan rond, padding 5px 0, en rechts uitgelijnd
   op de navigatiebalk in plaats van op het menu-item. */
.main-nav #navDropdown { position: relative; }
/* De menu-items zweven; zonder deze regel is de lijst 0px hoog en landt een
   dropdown met `top:100%` bovenaan de header in plaats van eronder. */
.main-nav #navDropdown::after { content: ''; display: block; clear: both; }
.main-nav #navDropdown > .providerDropdown { position: static; }
#providersDropdownMenu {
	min-width: 650px;
	padding: 5px 0;
	left: auto;
	/* Live laat de rechterrand 13px binnen die van de balk vallen (x=430..1080). */
	right: 13px;
	margin-top: -3px;
	border-top: 2px solid var(--inl-accent);
	border-radius: 0 0 4px 4px;
}
#providersDropdownMenu::after { content: ''; display: table; clear: both; }
#providersDropdownMenu .mega-col { float: left; width: 50%; padding: 0 5px 0 15px; box-sizing: border-box; }
#providersDropdownMenu h3 {
	/* Gemeten op live, gelijk aan het modellenmenu. */
	font-size: 18px;
	font-weight: 600;
	color: #717171;
	margin: 20px 5px 10px;
	padding: 0;
	border-bottom: 0;
}
#providersDropdownMenu .multi-column-dropdown { list-style: none; margin: 0; padding: 5px 0 0; }
#providersDropdownMenu .multi-column-dropdown > li { border-bottom: 1px solid #f5f5f5; padding: 2px 0; margin: 0 5px; }
#providersDropdownMenu .multi-column-dropdown > li:hover { background-color: #fcfcfc; }
#providersDropdownMenu .model-naam { display: inline; font-weight: 600; font-size: 13px; color: #777; padding: 2px 15px 2px 0; }
#providersDropdownMenu .model-naam:hover { color: var(--inl-accent); text-decoration: none; }
/* Live springt de verwijzingen hier 17px in (in het modellenmenu 9px). */
/* Live: verwijzingen 17px ingesprongen, 32px onder de naam, rijafstand 61px. */
#providersDropdownMenu .model-links { display: block; font-size: 12px; padding-left: 17px; margin-top: 7px; white-space: nowrap; }
/* Elke verwijzing staat op live in een eigen zwevend li. Dat zweven wordt niet
   opgeheven, waardoor een provider zonder verwijzingen (Odido) naast de vorige
   regel uitkomt in plaats van eronder — dat gedrag hoort erbij. */
/* Live: naamregels ruimen de zwevende verwijzingen op; een provider zonder
   verwijzingen (Odido) doet dat niet en komt dus naast de vorige regel uit. */
#providersDropdownMenu .multi-column-dropdown > li.navDS { clear: both; }
#providersDropdownMenu .multi-column-dropdown > li.provider-link {
	float: left;
	display: block;
	border-bottom: 0;
	font-size: 12px;
	padding: 2px 0 3px 9px;
	margin: 2px 5px 5px 13px;
}
#providersDropdownMenu .multi-column-dropdown > li.provider-link > a {
	display: inline;
	font-size: 12px;
	color: var(--inl-text-muted);
	padding: 0;
	margin: 0;
	white-space: nowrap;
}
#providersDropdownMenu .multi-column-dropdown > li.provider-link-solo { padding-left: 5px; }
#providersDropdownMenu .multi-column-dropdown > li.provider-link > a > .hidden-xs { display: inline; }
/* Een provider zonder verwijzingen (Odido): live zet die naam als inline anker,
   zodat hij naast de zwevende regel erboven uitkomt in plaats van eronder. */
#providersDropdownMenu .multi-column-dropdown > li:not(.navDS):not(.provider-link) > a {
	display: inline;
	font-size: 13px;
	font-weight: 400;
	color: #777;
	padding: 2px 15px 2px 0;
	margin: 0 10px 0 0;
}
#providersDropdownMenu .multi-column-dropdown > li.provider-link > a:hover { color: var(--inl-accent); text-decoration: none; }
#providersDropdownMenu .thirdLevel { display: block; position: static; height: 0; min-width: 0; padding: 0; margin: 0; border: 0; box-shadow: none; }
#providersDropdownMenu .model-links a,
#providersDropdownMenu .model-links .model-scheiding { display: inline; white-space: nowrap; }
/* De algemene .hidden-xs staat op display:block; binnen een link moet het label
   inline blijven, anders breekt "zonder toestel" naar een eigen regel. */
#providersDropdownMenu .model-links a > .hidden-xs { display: inline; }
#providersDropdownMenu .model-links a { color: var(--inl-text-muted); }
#providersDropdownMenu .model-links a:hover { color: var(--inl-accent); text-decoration: none; }
#providersDropdownMenu .model-scheiding { color: #ccc; margin: 0 4px; }
#providersDropdownMenu .fa-angle-right { color: #bbb; margin-right: 5px; }
/* Rechts uitlijnen zodat het menu niet buiten beeld valt. */
@media (min-width: 992px) { #providersDropdownMenu { left: auto; right: 13px; } }
@media (max-width: 767px) {
	#providersDropdownMenu { min-width: 0; width: 100%; }
	#providersDropdownMenu .mega-col { float: none; width: 100%; padding: 0; }
}

/* Abonnementen- en losse-toestellenmenu: zelfde kolomopmaak als het
   modellenmenu (live: #abonnementenDropdownMenu h3{font-size:14px;font-weight:600}). */
/* Beide menu's beginnen op de bestaande site links op x=294 met een breedte
   van 769px — ze hangen dus aan de navigatiebalk en niet onder hun eigen
   menu-item. De 15px erbij vangt de schuifbalk van Chromium op, zodat de
   kolommen op 256 (drie) respectievelijk 384 (twee) uitkomen. */
.main-nav #navDropdown > .abonnementenDropdown,
.main-nav #navDropdown > .losToestelDropdown { position: static; }
#abonnementenDropdownMenu,
#losToestelDropdownMenu {
	/* Vaste breedte: met alleen min-width duwen de lange labels het menu
	   breder dan de bestaande site. 784 = 769 zichtbaar + 15 schuifbalk.
	   De 17px links brengt de rand op x=294, gelijk aan live. */
	width: 769px;
	min-width: 0;
	max-width: none;
	left: 17px;
	right: auto;
	/* Live laat het menu 2px over de balk vallen; onze lijst is 1px hoger. */
	margin-top: -3px;
	padding: 5px 0;
	overflow-x: hidden;
}
/* Het toestellenmenu is kort genoeg om niet te schuiven; daar hoort de
   schuifbalkcompensatie dus niet bij en is 769 de juiste breedte. */
#losToestelDropdownMenu { width: 769px; }
#abonnementenDropdownMenu::after,
#losToestelDropdownMenu::after { content: ''; display: table; clear: both; }
/* Live: deze twee kolommen hebben padding 0 15px (het modellenmenu 0 5px 0 15px). */
#abonnementenDropdownMenu .mega-col { float: left; width: 33.3333%; padding: 0 15px; box-sizing: border-box; }
#losToestelDropdownMenu .mega-col { float: left; width: 50%; padding: 0 15px; box-sizing: border-box; }
#abonnementenDropdownMenu h3,
#losToestelDropdownMenu h3 {
	/* Gemeten op live: 18px/600 #717171, marge 20px 0 10px, geen randlijn. */
	font-size: 18px;
	font-weight: 600;
	color: #717171;
	margin: 20px 0 10px;
	padding: 0;
	border-bottom: 0;
	line-height: 1.1;
}
#abonnementenDropdownMenu .multi-column-dropdown,
#losToestelDropdownMenu .multi-column-dropdown { list-style: none; margin: 0; padding: 0; }
#abonnementenDropdownMenu .multi-column-dropdown > li,
#losToestelDropdownMenu .multi-column-dropdown > li { border-bottom: 1px solid #f0f0f0; padding: 2px 0; margin: 0; }
#abonnementenDropdownMenu .multi-column-dropdown > li > a,
#losToestelDropdownMenu .multi-column-dropdown > li > a {
	/* Live: inline anker zonder eigen padding, kleur #777 — rijafstand 29px. */
	display: inline;
	font-size: 13px;
	color: #777;
	padding: 0;
	margin: 0;
	white-space: normal;
}
#abonnementenDropdownMenu .multi-column-dropdown > li > a:hover,
#losToestelDropdownMenu .multi-column-dropdown > li > a:hover {
	color: var(--inl-accent);
	background-color: #fcfcfc;
	text-decoration: none;
}
#abonnementenDropdownMenu .fa-angle-right,
#losToestelDropdownMenu .fa-angle-right { color: #bbb; margin-right: 5px; }
@media (max-width: 767px) {
	#abonnementenDropdownMenu, #losToestelDropdownMenu { min-width: 0; width: 100%; max-height: none; }
	#abonnementenDropdownMenu .mega-col, #losToestelDropdownMenu .mega-col { float: none; width: 100%; padding: 0; }
}

/* ---- Tabbalken boven de vergelijkers ----
   Gemeten op live (/kpn-abonnementen-vergelijken): ul zonder onderrand,
   marge 20px 0; li zweeft; a padding 8px 4px, 14px/600, #333 en in de actieve
   tab #5d9cec; hoekstraal 4px 4px 0 0. */
.nav-tabs {
	display: block;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}
.nav-tabs.clear-margin-bottom { margin: 20px 0 0; }
.nav-tabs::after { content: ''; display: table; clear: both; }
.nav-tabs > li { float: left; position: relative; }
.nav-tabs > li > a {
	display: block;
	padding: 8px 4px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover { color: var(--inl-accent); text-decoration: none; }
.nav-tabs > li.active > a { color: var(--inl-accent); }
.nav-tabs > li.dropdown > .dropdown-menu { top: 100%; left: 0; min-width: 180px; }
@media (min-width: 992px) {
	.nav-tabs > li.dropdown:hover > .dropdown-menu,
	.nav-tabs > li.dropdown:focus-within > .dropdown-menu { display: block; }
}
.nav-tabs .providerTabMenuDropdown .nav-item,
.nav-tabs .providerTabMenuDropdown li { padding: 2px 0; margin: 0 5px; border-bottom: 1px solid #f0f0f0; }
.nav-tabs .providerTabMenuDropdown a {
	display: block;
	padding: 2px 15px;
	font-size: 13px;
	font-weight: 400;
	color: var(--inl-text-muted);
	white-space: nowrap;
}
.nav-tabs .providerTabMenuDropdown a:hover { color: var(--inl-accent); text-decoration: none; }


/* Live geeft de thumbnailkolom van een nieuwskaart deze klasse. */
.col-no-padding { padding-left: 0; padding-right: 0; }

/* ---- Koopgids op /kopen ----
   Gemeten op live: kaart .col-sm-4.koopgidsItem 390px breed op x=116/506/896,
   afbeelding zweeft links (132px, marge 0 20px 10px 0), kleurbolletjes in een
   inline lijst van 20px, geheugenmaten gescheiden door " / ", en twee knoppen
   over de volle breedte. */
.koopgids { margin-bottom: 20px; }
.koopgidsItem { margin-bottom: 20px; }
.koopgidsImgP { float: left; width: 132px; margin: 0 20px 10px 0; }
.koopgidsIMG { max-width: 100%; height: auto; }
.koopgidsColorsUl,
.koopgidsMemoryUl { list-style: none; margin: 0 0 10px; padding: 0; }
.koopgidsColorsUl > li { display: inline-block; width: 20px; }
.koopgidsMemoryUl > li,
.koopgidsMemoryUl > span { display: inline-block; }
.koopgidsPrijs { margin: 0 0 10px; }
.koopgidsItem .btn.koopgidsButton { display: block; width: 100%; padding: 6px 12px; text-align: center; }
.koopgidsItem .btn.koopgidsButton + .btn { margin-top: 6px; }
.koopgidsLink, .koopgidsLink:hover { color: #fff; text-decoration: none; }
.koopgidsItem > p { margin: 0 0 10px; }