/*
* Responsive CSS
* Versie: 20250113
* Contains media queries for various device widths.
*/

@media screen and (min-width: 1024px) {
    
    
   body {
font-size:14px
}

h1 {
font-size:1.7em
}

h2 {
font-size:1.5em
}

h3 {
font-size:1.3em
}

.wrap,.homenieuws {
width:auto;
max-width:1200px;
box-sizing:border-box;
margin:0 auto;
padding:14px 16px 8px
}

#header {
height:85px
}

#header .logo {
margin:1px 0 8px 0;
float:left
}

.contentwrap {
clear:both;
background:#0053c7;
height:32px;
box-shadow:0 2px 5px #666;
z-index:999
}

#nav {
margin-top:-14px
}
#nav li {
float:left;
text-align:center;
margin:0 20px 0 0;
list-style:none
}

#nav ul li a {
color:#fff;
font-size:18px;
display:block;
letter-spacing:1px;
text-decoration:none;
padding:5px 10px;
line-height:28px
}

#nav ul li a:hover {
color:#1f7384;
background:#FFF;
border-radius:5px;
transition: all 0.3s ease;
}

#nav .current-menu-item a,#nav .current-page-ancestor a {
background:#FFF;
color:#1f7384;
border-radius:5px;
cursor: default
}
.menu-item-96,#nav #menu-item-201,.bannerad {
display:block
}

/* Responsive header desktop (≥1024px): topnav + vergelijk-balk tonen,
   hamburger/sidenav verbergen */
#nav {
display:block;
}

#vergelijk-top {
display:block;
}

#toggle,
#mySidenav {
display:none;
}

/* Vaste header = groene balk (85px) + blauwe vergelijkbalk (32px) = 117px.
   Eén site-wide knop voor de header→breadcrumb afstand: 120px geeft een strakke,
   uniforme ~16px lucht boven de breadcrumb op elke pagina. */
#content {
margin-top:120px
}

#mainhomecontent {
display:flex;
flex-wrap:wrap;
gap:0 40px;
}

#mainhomecontent .home-left-column {
flex:1 1 480px;
min-width:0;
width:auto;
margin-top:10px
}

#mainhomecontent .home-right-column {
flex:1 1 420px;
min-width:0;
width:auto;
padding:0
}

.home-lijst img {
margin-right:15px
}

.home-lijst .usp, .home-lijst .gift {
font-size:14px;
height: 20px
}

.home-lijst .item {
display:flex;
align-items:center;
gap:10px;
height:auto;
min-height:44px;
overflow:visible;
}

.home-lijst .product {
flex:1 1 auto;
min-width:0;
display:block;
}

.home-lijst .knop-inschrijven {
flex:0 0 auto;
width:auto;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:4px;
margin-bottom:0;
padding-top:0;
}

.home-lijst .compare-checkbox {
margin:0;
padding:0;
}

.homenieuws h4 {
display:block;
height:30px;
float:none;
width:auto;
padding-top:10px
}

.homenieuws .excerpt {
overflow:hidden;
width:auto
}

.homenieuws .excerpt p {
margin:0
}

.homenieuws .arrowright {
top:-20px;
position:relative;
margin:0;
float:right
}

.sectiewit .home-content ul li {
float: left;
width: 48%;
margin-right:4%
}
.sectiewit .home-content ul li:nth-child(even) {
margin-right:0
}

#footer .foottextbegin {
float:left;
width:150px;
margin-right:20px
}

#footer .foottext {
float:left;
width:200px;
margin-right:20px
}

#footer .foottextend {
float:left;
width:200px
}

#footer .copyright {
text-align:center;
float:left;
width:100%;
border-top:1px solid #ddd;
padding:20px 0;
margin-top:20px;
color:#fff
}

.breadcrumb_last {
color:#888
}

#productlijst {
width:calc(100% - 330px);
margin:0 30px 40px 0;
box-sizing:border-box;
float:left
}

#lijst {
display:contents;
}

#content-lijst .item,#content-lijst .infoitem {
text-align:left;
padding:10px;
min-height:105px
}

#content-lijst .foto {
float:left;
vertical-align:top;
margin-right:20px;
margin-top:5px;
position:relative;
overflow:hidden;
border-radius:7px
}

#content-lijst .foto img {
box-shadow:0 0 10px #666;
border-radius:7px;
width:150px;
height:94px;
object-fit:contain;
background:#fff;
display:block
}

#content-lijst .teksten h2 {
margin:0 0 5px 0;
font-size:1.3em;
display: inline-block;
}

#content-lijst .teksten {
min-height:79px;
margin-bottom: 0;
}

#content-lijst .foto .glsr {
position:absolute;
left:6px;
bottom:6px;
margin:0;
width:auto;
max-width:calc(100% - 12px);
padding:2px 6px;
border-radius:12px;
background:rgba(255,255,255,.95);
display:inline-flex;
align-items:center;
gap:4px;
font-size:12px;
line-height:1;
z-index:2;
}

#content-lijst .foto .glsr *,
#content-lijst .foto .glsr [class*="rating"],
#content-lijst .foto .glsr [class*="stars"],
#content-lijst .foto .glsr [class*="summary"] {
display:inline-flex;
align-items:center;
margin:0 !important;
line-height:1;
}

#content-lijst .archivefees {
border-top:1px solid #ccc;
font-size:14px;
margin-top:9px;
float:left
}

#content-lijst .archivefee1 {
float:left;
width:228px
}

#content-lijst .archivefee2 {
float:left;
width:190px
}

#content-lijst .archivefee3 {
float:left;
width:190px;
text-align:right
}

#content-lijst .buttons {
text-align:center;
width:160px;
float:right;
margin:-120px 0 0
}
#infopagina #content-lijst .buttons {
margin:-60px 0 0
}

#content-lijst .buttons .knop-inschrijven {
margin-bottom:5px;
padding:0
}

#content-lijst .buttons .compare {
text-align:right;
float:right
}

.knop-inschrijven a {
padding:1px 5px 1px 10px;
float:right
}

.knop-inschrijven a:hover {
    background-color: #9a3412;
    transition: all .3s ease;
}

#content-lijst .soft-conversie {
float:right;
text-align:right;
width:100%;
font-size:14px
}

.compare form #erase {
display:none
}

a.tip {
display:inline;
position:relative;
cursor:help;
text-decoration:none;
display: block
}

#content-lijst a.tip {
    display: contents
}

a.tip:hover,
a.tip:focus-visible {
color: #007c20
}

a.tip:hover:before,
a.tip:focus-visible:before {
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
border-color:#0053c7 transparent;
border-image:none;
border-style:solid;
border-width:0 10px 10px;
content:"";
left:10px;
position:absolute;
z-index:999;
top:19px;
transition: all 0.3s ease;
}

a.tip:hover:after,
a.tip:focus-visible:after {
background:none repeat scroll 0 0 #0053c7;
border-radius:5px;
box-shadow:5px 5px 5px #666;
color:#fff;
content:attr(id);
left:-15px;
line-height:1.5;
padding:5px 10px;
position:absolute;
text-align:left;
width:200px;
z-index:98;
top:27px;
font-size:12px;
white-space:normal;
width:250px;
display:block;
transition: all 0.3s ease;
}

.compare-checkbox {
cursor:pointer;
padding:5px 0;
text-transform:uppercase;
font-weight: bold;
}

#content-lijst .compare-checkbox {
float: right;
}

#sidebar {
width:300px;
box-sizing:border-box;
position:sticky;
top:160px;
padding:0 0 20px;
float:left
}

#sidebar .menu-lijstmenu-container ul li {
margin:0;
width:100%;
border-bottom:1px solid #dbe9f2;
float:left;
list-style:none;
height:25px
}

.products {
float:left;
margin-bottom:40px;
margin-top:10px;
width:100%;
font-size:14px
}

#productpagina {
display:flow-root;
width:100%;
box-sizing:border-box;
color:#666;
margin:10px 0 30px;
border:1px #ddd solid;
box-shadow:5px 5px 5px #ccc;
padding:40px;
border-radius:40px
}

#productpagina h1,#pagina h1,#post h1 {
margin-top:0
}

#productpagina .kenmerken {
margin-right:40px;
float:left;
box-sizing:border-box;
width:calc(100% - 360px)
}

#productpagina .eigenschappen {
padding-bottom:10px;
width:100%
}

.usp {
height:auto
}

#content-lijst .usp {
width:370px
}
.ubp {
margin:0 0 20px;
width:auto
}

.tab-content {
padding:0 20px
}

/* Specs-rijen op de detailpagina hetzelfde ruime ritme geven als de
   vergelijkpagina (#vergelijk .label/.waarde): min. 36px hoog, flex met
   verticaal gecentreerde inhoud, ruimere padding. Zebra (tr:nth-child(even)
   #eaf2f8) en labelkleur (#337ab7) matchten al. Float blijft — nette
   2-koloms rij binnen de tabelcel. */
#productpagina .label,
#productpagina .waarde {
min-height:36px;
box-sizing:border-box;
display:flex;
align-items:center;
flex-wrap:wrap;
overflow-wrap:anywhere;
line-height:1.35
}

#productpagina .label {
width:50%;
padding:6px 10px
}

#productpagina .waarde {
width:48%;
padding:6px 10px
}

#productpagina .entry-date {
font-size:10px
}

#product-sidebar {
width:320px;
box-sizing:border-box;
float:left;
position:sticky;
top:160px;
padding:0 0 20px;
clear:initial;
margin:0
}

#product-sidebar #kaartcandy img {
margin:0;
float:none
}

#product-sidebar #kaartcandy .buttons .knop-inschrijven {
padding-top:20px;
margin-bottom:10px
}

#product-sidebar #kaartcandy .buttons .knop-inschrijven a {
padding:10px 50px;
float:none
}

#vergelijk-top {
margin:0 auto;
width:auto;
max-width:1200px;
box-sizing:border-box;
padding:0 16px;
position:relative;
height:32px;
display:flex;
align-items:center;
gap:10px
}

#vergelijk-top .vergelijk-slots {
display:flex;
align-items:center;
gap:10px;
flex:1 1 auto;
min-width:0;
margin:0;
padding:0;
list-style:none
}

/* Elk slot exact 1/4 (3 x 10px gap), gevuld of leeg: flex:1 1 0 gaf gevulde
   chips (padding 0 6px) 12px meer breedte dan lege zoekslots. */
#vergelijk-top .vergelijk-slots > li {
flex:0 0 calc((100% - 30px) / 4);
min-width:0;
width:auto;
margin:0;
float:none;
height:24px;
box-sizing:border-box;
display:flex;
align-items:center
}

/* Balk-raster = tabel-raster: .tekst is even breed als #vergelijk .labelkolom
   (210px), zodat de 4 slots precies boven de 4 kaartkolommen staan. */
#vergelijk-top .tekst {
font-weight:700;
flex:0 0 210px;
color:#fff;
font-size:12px;
white-space:nowrap;
}

#vergelijk-top .vergelijk-teller {
margin-left:6px;
color:#fff;
font-weight:700;
}

/* Gevulde vergelijk-chip (door js/compare.js gerenderd) */
#vergelijk-top .vergelijk-chip {
display:flex;
align-items:center;
gap:5px;
padding:0 6px;
overflow:hidden;
text-align:left;
}

#vergelijk-top .vergelijk-chip img {
flex:0 0 auto;
height:18px;
width:auto;
border-radius:2px;
}

#vergelijk-top .vergelijk-chip a {
flex:1 1 auto;
min-width:0;
color:#fff;
font-size:11px;
text-decoration:none;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

#vergelijk-top .vergelijk-chip a:hover {
color:#00c735;
transition:all .3s ease;
}

#vergelijk-top .vergelijk-chip .chip-remove {
order:3;
flex:0 0 auto;
margin-left:auto;
background-color:#588ebb;
border:none;
color:#fff;
font-weight:700;
width:16px;
height:16px;
padding:0;
border-radius:50%;
font-size:11px;
line-height:1;
text-align:center;
cursor:pointer;
}

#vergelijk-top .vergelijk-chip .chip-remove:hover {
background-color:red;
transition:all .3s ease;
}

/* Zoek-/autocomplete-slot in de vergelijkbalk */
#vergelijk-top .vergelijk-zoek {
overflow:visible;
position:relative;
padding:0;
}

#vergelijk-top .ccv-add-form {
margin:0;
width:100%;
height:100%;
}

#vergelijk-top .ccv-card-search {
width:100%;
height:100%;
line-height:normal;
border:0;
border-radius:20px;
padding:0 12px;
font-size:11px;
box-sizing:border-box;
background:transparent;
color:#fff;
}

#vergelijk-top .ccv-card-search::placeholder {
color:rgba(255,255,255,.8);
}

#vergelijk-top .ccv-suggest {
position:absolute;
top:calc(100% + 6px);
left:0;
right:0;
margin:0;
padding:0;
list-style:none;
background:#fff;
border:1px solid #d4e6fb;
border-radius:10px;
box-shadow:0 10px 24px rgba(20,40,70,.22);
z-index:1001;
max-height:260px;
overflow:auto;
text-align:left;
}

#vergelijk-top .ccv-suggest li {
display:flex;
align-items:center;
gap:8px;
float:none;
width:auto;
height:auto;
margin:0;
padding:6px 10px;
background:#fff;
color:#13202b;
border:0;
border-bottom:1px solid #eef2f5;
border-radius:0;
font-size:12px;
font-weight:400;
text-align:left;
cursor:pointer;
}

#vergelijk-top .ccv-suggest li img {
width:36px;
height:auto;
border-radius:3px;
flex:0 0 auto;
}

#vergelijk-top .ccv-suggest li span {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

#vergelijk-top .ccv-suggest li:hover,
#vergelijk-top .ccv-suggest li.is-active {
background:#eef6ff;
color:#0053c7;
}

#vergelijk-top .tekst a {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
height:24px;
box-sizing:border-box;
text-decoration: none;
color: #fff;
background-color: #196ce0;
padding: 0 18px;
border-radius: 20px;
transition:background-color .2s;
}
#vergelijk-top .tekst a:hover .vergelijk-chevron,
#vergelijk-top .tekst a:focus-visible .vergelijk-chevron {
transform:translateX(3px);
}
#vergelijk-top .vergelijk-chevron {
font-size:10px;
transition:transform .2s ease;
margin-left:2px;
}

#vergelijk-top #erase {
background-color: #588ebb;
border: none;
float: right;
color: #fff;
font-weight: 700;
width: 17px;
height: 17px;
padding: 0;
border-radius: 50%;
font-size: 12px;
text-align: center;
}

#vergelijk-top ul li {
list-style:none;
text-align:center;
font-size:11px;
float:left;
width:229px;
list-style:none;
padding: 3px 3px 1px 0;
height:20px;
background-color:#196ce0;
overflow:hidden;
border-radius:20px;
margin-left:10px;
color:#fff
}

#vergelijk-top ul li a {
font-weight:400;
color:#fff;
vertical-align:super;
text-decoration:none;
font-size:11px
}

#vergelijk-top ul li a:hover, #vergelijk-top .tekst a:hover {
color: #00c735;
transition: all 0.3s ease;
}

#vergelijk {
width:auto;
margin-top:10px;
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
gap:10px
}

/* Cellen mogen wrappen en groeien; js/compare.js (alignVergelijkRows) synct de
   hoogte van elke rij over de label- én kaartkolommen zodat alles exact uitlijnt
   ook als een label over 2 regels loopt. */
/* Ruimere rijen (meer adem, zoals de mobiele versie): min 36px i.p.v. 25px. */
#vergelijk .waarde {
text-align:center;
min-height:36px;
line-height:1.35;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
padding:6px 8px;
}

#vergelijk .label {
min-height:36px;
line-height:1.35;
border-radius:0;
box-sizing:border-box;
display:flex;
align-items:center;
color:#337ab7;
font-weight:400;
padding:6px 10px;
text-align:left;
}

#vergelijk input {
background:none;
cursor:pointer;
font-family:'FontAwesome' ,"Open Sans";
font-size:18px;
border:1px solid #eaf2f8;
border-radius:0 10px 0 0;
color:#666
}

#vergelijk .verwijderbutton {
margin:0;
text-align:center;
height:25px;
float:right
}

#vergelijk h1 {
font-size:24px
}

#vergelijk .knop-inschrijven {
margin:16px auto;
padding:0;
text-align:center
}

#vergelijk .knop-inschrijven a {
display:inline-block;
padding:8px 14px;
float:none;
white-space:nowrap;
font-size:13px
}

/* Kaartkolommen en de "kies een card"-kolom zijn altijd precies 1/4 van de
   ruimte naast de labelkolom (250px = 210px labelkolom + 4 x 10px gap), ook
   bij minder dan 4 kaarten. Zo lijnen ze exact uit met de slots in #vergelijk-top. */
#vergelijk .kolom {
flex:0 0 calc((100% - 250px) / 4);
min-width:0;
box-sizing:border-box;
font-size:11px;
padding-left:10px
}

#vergelijk .vergelijkkolomheader {
text-align:center;
height:281px
}

#vergelijk .vergelijkkolom {
text-align:center;
flex:0 0 calc((100% - 250px) / 4);
min-width:0;
box-sizing:border-box;
font-size:14px;
margin:0;
border:1px solid #eaf2f8;
border-radius:10px
}

#vergelijk .legeh3 {
height:44px
}

#vergelijk .labelkolom {
flex:0 0 210px;
width:210px;
box-sizing:border-box;
font-size:13px;
border:1px solid #eaf2f8;
border-radius:10px;
height:auto
}

#vergelijk .vergelijktekst {
font-size:12px;
line-height:20px;
padding:0 10px;
height:251px
}

#vergelijk .vergelijkfoto {
padding:0;
max-height:168px
}

#vergelijk .vergelijkfoto img {
width:100%;
max-width:210px;
height:auto;
max-height:166px;
border-radius: 10px
}

#vergelijk h3 {
padding:0 10px;
margin-bottom:5px;
font-size:14px;
font-weight:600
}

/* Sectie-koppen (Info & Kosten / Services / lege kop) deterministisch even hoog
   in zowel de label- als de kaartkolommen, zodat de rijen exact uitlijnen.
   De kaart-titel (h3 in .vergelijkkolomheader) blijft ongemoeid en mag afbreken. */
#vergelijk .labelkolom > h3,
#vergelijk .vergelijkkolom > h3 {
height:30px;
line-height:30px;
margin:0;
padding:0 10px;
font-size:14px;
font-weight:600;
box-sizing:border-box;
overflow:hidden
}

#vergelijk .vergelijkfoto h3 {
margin-top:5px;
font-size:14px;
font-weight:600
}

#vergelijk a.tip:hover:after,
#vergelijk a.tip:focus-visible:after {
width:160px;
transition: all 0.3s ease;
}

#vergelijk .card-image img {
width:25px;
height:auto;
float:left;
margin-right:5px
}

#vergelijk .cards p a {
border:0
}

/* Elite "kies een card"-lijst op desktop — zelfde tikbare kaart-rijen +
   +-affordance als mobiel (geen kale lijst / underlines meer). */
#vergelijk .kolom {
padding:10px;
align-self:flex-start;
}
#vergelijk .kolom .cards {
display:flex;
align-items:center;
gap:10px;
padding:8px;
margin-bottom:5px;
border-radius:10px;
background:#f7fafd;
cursor:pointer;
transition:background .15s ease, box-shadow .15s ease;
}
#vergelijk .kolom .cards:hover {
background:#eaf2ff;
box-shadow:0 1px 5px rgba(20,40,70,.09);
}
#vergelijk .kolom .card-image img {
width:38px;
height:auto;
float:none;
margin:0;
border-radius:4px;
display:block;
}
#vergelijk .kolom .cards p {
margin:0;
flex:1 1 auto;
min-width:0;
font-size:12px;
line-height:1.3;
}
#vergelijk .kolom .cards p a {
color:#13202b;
text-decoration:none;
border-bottom:0;
font-weight:600;
}
#vergelijk .kolom .cards::after {
content:"\f067";
font-family:'FontAwesome';
flex:0 0 auto;
color:#0053c7;
font-size:12px;
width:22px;
height:22px;
line-height:22px;
text-align:center;
background:#e4edfb;
border-radius:50%;
}

#vergelijk .vergelijkkolom .waarde img {
position:relative;
top:3px
}

/* .actie (cadeau-badge) styling staat site-wide in style.css (basis 86px = detail).
   De vergelijk-kolommen zijn smaller, dus daar een compactere sticker. */
#vergelijk .actie {
width:66px;
height:66px;
font-size:9px;
}
#vergelijk .actie .fa-gift {
font-size:11px;
margin:0 0 1px;
}

#pagina {
float:left;
width:calc(100% - 330px);
box-sizing:border-box;
margin:10px 30px 40px 0;
padding:20px;
border:1px solid #ddd;
border-radius:20px
}
#post .relatedposts ul li {
border:2px solid #0053c7;
margin:0 5px 10px;
display:inline-block;
-webkit-transform:skewX(-20deg);
transform:skewX(-20deg);
background:#fff;
border-radius:2px;
font-size:11px;
padding:0
}

.relatedposts ul li a {
color:#000;
padding:.4em .5em;
font-variant:petite-caps
}

.relatedposts ul li a:hover {
color:#fff;
background:#0053c7;
transition:all .2s;
text-decoration:none;
transition: all 0.3s ease;
}

.right-column {
width:300px;
box-sizing:border-box;
padding:0;
float:left;
margin:0;
position:sticky;
top:160px
}

font-size: 11px;
#productlijst #kop-text .wp-post-image,#single .wp-post-image {
box-shadow:5px 5px 5px #666;
float:right;
margin-left:5px;
margin-bottom:10px;
border-radius:10px
}

.entry-date {
float:left;
font-size:12px;
width:100%
}

#search {
border:1px #aaa solid;
background:url(/wp-content/themes/ccv/images/search.png) no-repeat right;
width:200px;
height:25px;
padding-left:5px
}

.middle-column {
float:left;
width:calc(100% - 330px);
box-sizing:border-box;
padding:0 20px 20px;
border:1px solid #ddd;
border-radius:20px;
margin:10px 30px 40px 0
}

.postcontent {
padding-bottom:40px
}

.wpp-list li {
font-size:11px
}

.alignright {
border-radius:10px
}

img.alignright {
width:auto
}

.sortbuttons {
margin:0
}

#nav,.sortbuttons,.menu-sorting-container {
float:right
}

.sectie,#product-sidebar #kaartcandy .buttons {
clear:both
}

#footer,.tabs-menu li a,#product-sidebar #kaartcandy .buttons .soft-conversie a {
font-size:14px
}

#breadcrum,#vergelijk h5 {
font-size:12px
}

.sortmenu,.kenmerken {
text-align:left
}

.filter-selections {
    margin: 10px 0 0;
}

#sidebar .menu-lijstmenu-container ul,ul.wpp-list {
padding:0
}

#vergelijk-top #erase:hover,#vergelijk input:hover,#vergelijk input:active {
color:#fff;
background-color:red;
transition: all 0.3s ease;
}

#vergelijk .even,#vergelijk .labelkolom .even {
background:#eaf2f8
}

@keyframes pop-up {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Maak de knop tijdelijk groter */
    }
    100% {
        transform: scale(1);
    }
}

.highlight {
    animation: pop-up 0.5s ease-in-out; /* Pop-up effect voor 0.5 seconden */
}

/* ============================================================
   Single post — moderne 2026 layout (vult volledige 1200px)
   ============================================================ */
#single {
    display:flex;
    align-items:flex-start;
    gap:32px;
    width:100%;
}

#single #post {
    flex:1 1 auto;
    min-width:0;
    width:auto;
    float:none;
    margin:10px 0 40px;
    padding:36px 40px 32px;
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(20,40,70,.06);
}

#single .post-header {
    margin-bottom:24px;
}

#single #post h1 {
    font-size:2.4em;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.02em;
    color:#13202b;
    margin:0 0 14px;
}

#single .post-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 18px;
    padding-bottom:22px;
    border-bottom:1px solid #eef2f5;
}

#single .post-meta .entry-date,
#single .post-meta .entry-updated {
    display:inline-flex;
    align-items:center;
    gap:7px;
    float:none;
    width:auto;
    font-size:13px;
    color:#6b7a86;
}

#single .post-meta .entry-updated {
    color:#007c20;
    font-weight:600;
}

#single .post-meta i {
    opacity:.8;
}

/* Hero-afbeelding bovenaan i.p.v. ingezweefde thumbnail */
#single .post-hero {
    margin:0 0 28px;
    border-radius:16px;
    overflow:hidden;
    line-height:0;
    box-shadow:0 8px 24px rgba(20,40,70,.10);
}

#single .post-hero img,
#single #post .wp-post-image {
    float:none;
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border-radius:0;
    box-shadow:none;
}

/* Body typografie */
#single .post-body {
    font-size:16px;
    line-height:1.75;
    color:#33424d;
}

#single .post-body h2 {
    font-size:1.7em;
    line-height:1.3;
    font-weight:700;
    color:#13202b;
    margin:1.6em 0 .5em;
    scroll-margin-top:140px;
}

#single .post-body h3 {
    font-size:1.3em;
    line-height:1.35;
    font-weight:700;
    color:#007c20;
    margin:1.4em 0 .4em;
    scroll-margin-top:140px;
}

#single .post-body p {
    margin:0 0 1.1em;
}

#single .post-body a {
    color:#0053c7;
    border-bottom:1px solid rgba(0,83,199,.35);
    transition:border-color .2s, color .2s;
}

#single .post-body a:hover {
    color:#003d94;
    border-bottom-color:#0053c7;
}

#single .post-body ul {
    padding:0 0 1.1em 0;
    margin:0;
    list-style:none;
}

#single .post-body ul li {
    position:relative;
    padding:4px 0 4px 28px;
    list-style:none;
}

#single .post-body ul li:before {
    content:"";
    position:absolute;
    left:4px;
    top:.85em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00c735;
}

#single .post-body table {
    width:100%;
    border-collapse:collapse;
    margin:1.4em 0;
    font-size:15px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 0 0 1px #e8edf1;
}

#single .post-body table td,
#single .post-body table th {
    padding:10px 14px;
    border-bottom:1px solid #eef2f5;
    text-align:left;
}

#single .post-body table tr:nth-child(even) td {
    background:#f7fafc;
}

#single .post-body img {
    max-width:100%;
    height:auto;
    border-radius:12px;
}

/* Footer: tags + share */
#single .post-footer {
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #eef2f5;
}

#single .relatedposts {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

#single .relatedposts-label {
    font-weight:700;
    color:#13202b;
}

#single .relatedposts ul {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
}

/* Moderne pill-tags i.p.v. de oude skew-stijl */
#single #post .relatedposts ul li {
    transform:none;
    -webkit-transform:none;
    background:#eef6ff;
    border:1px solid #d4e6fb;
    border-radius:999px;
    font-size:12px;
    margin:0;
    padding:0;
    overflow:visible;
    transition:background .2s, border-color .2s;
}

#single #post .relatedposts ul li:hover {
    background:#dceafe;
    border-color:#b9d6f7;
}

#single .relatedposts ul li a {
    display:block;
    padding:5px 14px;
    color:#0053c7;
    font-variant:normal;
    font-weight:600;
}

#single .relatedposts ul li a:hover {
    background:transparent;
    color:#003d94;
}

#single .post-share {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

#single .post-share p {
    margin:0;
    font-weight:600;
    color:#6b7a86;
}

/* Sticky sidebar */
#single .right-column {
    position:sticky;
    top:160px;
    width:320px;
    flex:0 0 320px;
    padding:0;
    margin:0;
}

#single .right-column .widget {
    margin-top:0;
    margin-bottom:24px;
    padding:22px;
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(20,40,70,.05);
}

#single .right-column .widget-title,
#single .right-column .widgettitle,
#single .right-column h3 {
    font-size:16px;
    font-weight:700;
    color:#13202b;
    margin:0 0 14px;
    padding-bottom:12px;
    border-bottom:2px solid #00c735;
}

#single .right-column .wpp-list li,
#single .right-column ul li {
    border-bottom:1px solid #eef2f5;
}

/* ============================================================
   Desktop-modernisering overige templates (look & feel 2026)
   ============================================================ */

/* Content-kaarten: pagina + nieuwsarchief */
#pagina,
.middle-column {
    border:1px solid #e8edf1;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(20,40,70,.06);
    padding:32px 36px;
}

.middle-column {
    padding:28px 32px;
}

#pagina .page-header h1,
.middle-column .postpagetitle h1 {
    font-size:2.1em;
    font-weight:800;
    letter-spacing:-.02em;
}

#pagina .entry-content h2,
#single .post-body h2 {
    scroll-margin-top:140px;
}

/* Nieuwslijst-items: thumbnail rechts, titel + datum + excerpt eromheen */
.middle-column .postcontent {
    padding:18px;
    overflow:hidden;
}

.middle-column .postcontent .thumbnail {
    float:right;
    margin:0 0 10px 18px;
    border-radius:10px;
    overflow:hidden;
}

.middle-column .postcontent .thumbnail img {
    height:96px;
    width:auto;
    border-radius:10px;
    display:block;
}

.middle-column .postcontent .posttitlecat {
    min-width:0;
}

.middle-column .postcontent .excerpt {
    margin-top:6px;
}

.middle-column .postcontent .excerpt p {
    margin:0 0 6px;
}

/* Paginatie-navigatie */
.posts-navigation {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #eef2f5;
}

.posts-navigation a {
    display:inline-block;
    padding:8px 16px;
    border:1px solid #d4e6fb;
    border-radius:999px;
    background:#eef6ff;
    color:#0053c7;
    font-weight:600;
}

.posts-navigation a:hover {
    background:#dceafe;
}

/* Sidebar-widgets als kaarten (overige templates) */
.right-column .widget,
#sidebar .products {
    margin-top:0;
    margin-bottom:24px;
    padding:22px;
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(20,40,70,.05);
}

.right-column .widget h3,
.right-column .widget .widgettitle,
#sidebar .products h3,
#sidebar > h3 {
    font-size:16px;
    font-weight:700;
    color:#13202b;
    margin:0 0 14px;
    padding-bottom:12px;
    border-bottom:2px solid #00c735;
}

/* Mobiele filterknop (ccv_filter_toggle_button): op desktop staat het filter in de sidebar */
.ccv-filter-open,
.ccv-filter-slot {
    display:none;
}

/* Kenmerken-filter (eigenschappenfilter) als kaart met schaduw */
#sidebar #creditcard-filter {
    margin:24px 0;
    padding:22px;
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(20,40,70,.05);
}

#sidebar #creditcard-filter h4 {
    margin:0 0 10px;
    color:#13202b;
    font-weight:700;
}

#sidebar #creditcard-filter h4 + label,
#sidebar #creditcard-filter h4 ~ h4 {
    margin-top:0;
}

#sidebar #creditcard-filter h4:not(:first-child) {
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #eef2f5;
}

#sidebar #creditcard-filter label {
    cursor:pointer;
    line-height:1.7;
}

/* "Filter Kenmerken"-kop laten versmelten met de filterkaart (archive-cards) */
#sidebar > h3:has(+ #creditcard-filter) {
    margin:24px 0 0;
    padding:22px 22px 14px;
    background:#fff;
    border:1px solid #e8edf1;
    border-bottom:0;
    border-radius:16px 16px 0 0;
}

#sidebar > h3:has(+ #creditcard-filter) + #creditcard-filter {
    margin-top:0;
    border-top:0;
    border-radius:0 0 16px 16px;
}

/* Sidebar-blokken even breed (width:100% + padding moet in border-box passen) */
#sidebar .products,
#sidebar #creditcard-filter,
#sidebar > h3:has(+ #creditcard-filter) {
    box-sizing:border-box;
    width:100%;
}

/* Geen lege regel boven de widgettitel (interne .widget erft margin-top:40px) */
#sidebar .products .widget {
    margin-top:0;
}

/* Sidebar-blokken netjes onder elkaar (clear voorkomt dat het filterblok
   onder de gefloate Filter Cards schuift) */
#sidebar .products,
#sidebar > h3,
#sidebar #creditcard-filter {
    clear:both;
}

/* Filtermenu: verticale lijst (geen horizontale bar) + scrollbaar, ca. 5,5 items */
#sidebar .products .rekeningenmenu {
    max-height:160px;
    overflow-x:hidden;
    overflow-y:auto;
}

#sidebar .rekeningenmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

#sidebar .rekeningenmenu li {
    float:none;
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border-bottom:1px solid #eef2f5;
}

#sidebar .rekeningenmenu li a {
    display:block;
    padding:5px 2px;
    font-size:13px;
}

/* Pijltje in de aanvraagknop weer wit */
.knop-inschrijven a .fa {
    color:#fff;
}

/* === Flexbox-rebuild listing-kaart: content-proportioneel, geen float/min-height/negatieve-marge hacks === */
#content-lijst .item,
#content-lijst .infoitem {
    border:1px solid #e8edf1;
    margin-bottom:-1px;
    padding:16px;
    min-height:124px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#fff;
    transition:background .2s;
}

#content-lijst .item:hover,
#content-lijst .infoitem:hover {
    background:#f6fbff;
    position:relative;
    z-index:1;
}

#content-lijst .item:last-child,
#content-lijst .infoitem:last-child {
    border-radius:0 0 12px 12px;
}

/* Kaart als flex-rij: foto | middenkolom (tekst + fees) | acties (blijven op één rij) */
#content-lijst .archivetext {
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:12px 18px;
}

#content-lijst .archivetext > .foto {
    flex:0 0 150px;
    margin:0;
    float:none;
}

#content-lijst .archivetext > .card-main,
#content-lijst .archivetext > .teksten {
    flex:1 1 300px;
    min-width:0;
    margin:0;
}

#content-lijst .archivetext .teksten {
    min-height:0;
    margin:0;
}

#content-lijst .archivetext > .buttons,
#infopagina #content-lijst .archivetext > .buttons {
    flex:0 0 168px;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

#content-lijst .archivetext .buttons .knop-inschrijven,
#content-lijst .archivetext .buttons .compare-checkbox,
#content-lijst .archivetext .buttons .compare,
#content-lijst .archivetext .buttons .soft-conversie {
    float:none;
    margin:0;
    width:auto;
}

#content-lijst .archivetext .knop-inschrijven a {
    float:none;
    display:inline-block;
}

/* Fee-rij: nette kolommen, één regel waar ruimte is, anders netjes wrappen */
#content-lijst .archivefees {
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin:12px 0 0;
    padding:12px 0 0;
    border-top:1px solid #eef2f5;
    float:none;
    width:auto;
    font-size:12px;
}

#content-lijst .archivefee1,
#content-lijst .archivefee2,
#content-lijst .archivefee3 {
    float:none;
    width:auto;
    flex:0 1 auto;
    white-space:nowrap;
    text-align:left;
}

#content-lijst .teksten .gift,
#content-lijst .teksten .usp {
    margin:2px 0;
}

/* Aanvraagknop in de lijst én op de homepage: ademruimte, één regel, witte tekst */
#content-lijst .knop-inschrijven a,
.home-lijst .knop-inschrijven a {
    padding:7px 12px;
    white-space:nowrap;
    color:#fff;
}

/* Productdetailpagina (single-creditcard) moderner kader */
#productpagina {
    border:1px solid #e8edf1;
    box-shadow:0 10px 30px rgba(20,40,70,.07);
    border-radius:24px;
}

#productpagina h1 {
    font-size:2.1em;
    font-weight:800;
    letter-spacing:-.02em;
    color:#13202b;
}

/* Tabs moderner */
#tabs-container .tabs-menu li {
    border-radius:10px 10px 0 0;
}

#tabs-container .tab {
    border-color:#e8edf1;
    box-shadow:0 6px 18px rgba(20,40,70,.05);
}

/* USP-lijst (kenmerken) met groene checks */
#productpagina .usp,
#productpagina .ubp .usp {
    color:#13202b;
}

/* Aanvraag-knop opvallender + hover-lift */
.knop-inschrijven a {
    box-shadow:0 4px 12px rgba(255,165,0,.35);
}

.knop-inschrijven a:hover {
    transform:translateY(-1px);
}

/* --- Homepage modern --- */
.home-lijst .item {
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:0;
    transition:background .2s, box-shadow .2s;
}

.home-lijst .item:first-child {
    border-radius:12px 12px 0 0;
}

.home-lijst .item:last-child {
    border-radius:0 0 12px 12px;
}

.home-lijst .item:hover {
    background:#f6fbff;
    box-shadow:inset 3px 0 0 #00c735;
}

.homenieuws li {
    transition:box-shadow .2s, transform .2s;
}

.homenieuws li:hover {
    box-shadow:0 10px 24px rgba(20,40,70,.12);
    transform:translateY(-2px);
}

#mainhomecontent .home-content h1 {
    font-size:2.1em;
    font-weight:800;
    letter-spacing:-.02em;
    color:#13202b;
}

.home-left-column h3,
.sectie .homenieuws h3 {
    color:#13202b;
    font-weight:700;
    padding-bottom:8px;
    border-bottom:2px solid #00c735;
    display:inline-block;
}

/* --- Vergelijk-tabel: lichte moderne touch (layout intact) --- */
#vergelijk .vergelijkkolom {
    box-shadow:0 4px 14px rgba(20,40,70,.06);
    transition:box-shadow .2s;
}

#vergelijk .vergelijkkolom:hover {
    box-shadow:0 10px 24px rgba(20,40,70,.12);
}

}
/* einde @media min-width:1024px */


@media (min-width: 1240px) {

.sectiewit .home-content ul li {
width:49%
}

}