/*
	Theme Name: Creditcard-Vergelijk.nl
	Theme URI: https://potrix.nl
	Version: 20260522.49
        Author: ProTrix
	Author URI: https://protrix.nl
	Description: 20260522.49: Top 5 op mobiel compact met aanvraagknop, filter zonder wp_is_mobile (Cache Mobile kan uit), lege categorieën automatisch verborgen, veld "Actie geldig tot" met Rank Math-variabele %ccv_actie%.
	lichter groen: #00c735
	donker groen: #007c20
	licht blauw: #1f7384
	donker blauw: #1a606f
	*/

	/*
	-------------------------------------------------------------- */

body {
font-family:Open Sans,Arial;
font-size:14px;
line-height:1.6;
margin:0;
color:#444
}

fieldset {
border:0;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline
}

a {
color:#0053c7;
text-decoration:none
}

a:active {
    position: relative;
    top: 1px;
}

h1 {
font-size:clamp(20px, 5.3vw, 26px);
margin:15px 0
}

h2 {
font-size:clamp(18px, 4.5vw, 23px);
margin:10px 0
}

h3 {
font-size:clamp(16px, 4.5vw, 20px);
margin:10px 0;
color:#007c20
}

h4 {
margin:0;
color:#0053c7
}

h5 {
margin:0;
font-weight:700
}

ul {
list-style:none;
padding:0 0 20px 30px
}

#content {
margin-top:60px
}

.wrap {
padding:13px 10px
}

.alignright {
float:right;
margin-left:3vw;
margin-top:5px;
border-radius:3vw
}

img.alignright {
height:auto;
width:50%
}

.alignleft {
float:left;
margin-right:3vw;
margin-top:5px
}

.textleft {
text-align:left
}

p a {
color:#333;
text-decoration:none;
border-bottom:2px #0053c7 solid
}

ul li {
list-style:outside url(/wp-content/themes/ccv/images/li.gif);
padding:5px 5px
}

#breadcrum {
font-size:3vw
}

#header {
box-shadow:#555 0 1px 10px;
position:fixed;
z-index:999;
top:0;
width:100%;
background:#00c735;
background:-moz-linear-gradient(top,#007c20 0%,#00c735 47%,#007c20 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#007c20),color-stop(47%,#00c735),color-stop(100%,#007c20));
background:-webkit-linear-gradient(top,#007c20 0%,#00c735 47%,#007c20 100%);
background:-o-linear-gradient(top,#007c20 0%,#00c735 47%,#007c20 100%);
background:-ms-linear-gradient(top,#007c20 0%,#00c735 47%,#007c20 100%);
background:linear-gradient(to bottom,#007c20 0%,#00c735 47%,#007c20 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00621a',endColorstr='#00fb42',GradientType=0);
height:85px;
height:60px
}

#toggle {
color:#fff;
display:block;
float:right;
position:fixed;
right:20px;
top:15px;
z-index:999
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background:#007c20;
color:#fff;
font-size:5vw;
z-index:999
}

.sidenav ul li {
list-style:none
}

.sidenav ul li a {
text-decoration: none;  
display: block;
transition: 0.3s;
color:#fff;
display:block;
font-size:14px;
padding:10px;
width:200px
}

.sidenav a:hover {
  background:#00ae2e;
  color:#000;
border-radius:5px
}

.sidenav .closebtn {
  position: absolute;
  top: 7px;
  right: 20px;
  font-size: 26.18px;
  font-weight:bold;
  color: #FFF;  
}


.sidenav ul,.homenieuws ul,.homenieuws .arrowright a:hover {
padding:0
}

.sidenav .current-menu-item a,.sidenav .current-page-ancestor a {
background:#00ae2e;
color:#000;
border-radius:5px
}

/* Collapsable Creditcards-submenu in het mobiele sidenav (gemount door
   compare.js → enhanceSidenav). Toont alle creditcard-categorieën onder
   één tap op "Creditcards", inclusief een "Alle creditcards"-snelkoppeling. */
.sidenav .ccv-has-sub > a {
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
padding-right:14px;
width:220px;
box-sizing:border-box;
}
.sidenav .ccv-sub-chevron {
display:inline-block;
width:8px;
height:8px;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(45deg);
margin-left:8px;
transition:transform .25s ease;
flex:0 0 auto;
}
.sidenav .ccv-has-sub.is-open .ccv-sub-chevron {
transform:rotate(-135deg);
}
/* Een eventueel native WordPress-submenu (child-items onder "Creditcards")
   verbergen we in het mobiele menu — we bouwen onze eigen uitklapbare lijst.
   Zonder deze regel staat het native submenu altijd open en niet dicht te
   klappen (dat was de bug). */
.sidenav .sub-menu {
display:none;
}
/* Zichtbaarheid van ons eigen submenu expliciet via .is-open i.p.v. het
   [hidden]-attribuut (dat door andere regels overschreven kan worden). */
.sidenav .ccv-sub-list {
display:none;
list-style:none;
margin:0 0 6px 10px;
padding:4px 0 4px 14px;
border-left:2px solid rgba(255,255,255,.25);
}
.sidenav .ccv-has-sub.is-open .ccv-sub-list {
display:block;
}
.sidenav .ccv-sub-list li a {
font-size:13px;
padding:8px 10px;
width:198px;
font-weight:400;
}

/* Vergelijking-link als prominente blauwe knop met X/4-teller-badge. */
.sidenav .ccv-sidenav-vergelijken a {
display:flex;
align-items:center;
justify-content:space-between;
background:#0053c7;
border-radius:8px;
margin:8px 4px;
width:208px;
box-sizing:border-box;
padding:10px 14px;
font-weight:700;
}
.sidenav .ccv-sidenav-vergelijken a:hover,
.sidenav .ccv-sidenav-vergelijken a:focus-visible {
background:#1576ff;
color:#fff;
}
.sidenav .sidenav-teller {
background:rgba(255,255,255,.22);
border-radius:12px;
padding:2px 10px;
font-size:12px;
font-weight:700;
margin-left:8px;
}

.home-lijst {
margin-bottom:5px
}

.home-lijst .item {
padding:10px;
background:-moz-linear-gradient(top,#fff,#efefef);
background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#efefef));
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff',EndColorStr='#efefef',GradientType=0);
border:#ddd solid 1px;
display:block;
margin-top:-1px;
}

.home-lijst img {
float:left;
box-shadow:0 1px 5px #999;
margin-right:3vw
}

.gift {
color:orange;
font-weight: bold;
margin:0
}

.usp {
color:#007c20;
margin:0;
height:20px;
overflow:hidden
}

/* Home Top 5 onder 1024px (variant B): foto 80px, naam, actie/USP max. 2 regels en
   alleen 'Nu aanvragen' rechtsonder. Vergelijken kan op de kaartpagina. Vanaf
   1024px geldt de rij-layout uit rstyle.css. */
@media (max-width:1023px) {
.home-lijst .product {
display:flow-root;
}
.home-lijst img {
width:80px;
height:auto;
margin-right:12px;
}
.home-lijst .product b {
display:block;
line-height:1.3;
}
.home-lijst .gift,
.home-lijst .usp {
height:auto;
margin-top:3px;
font-size:13px;
line-height:1.35;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.home-lijst .compare-checkbox {
display:none;
}
.home-lijst .knop-inschrijven {
margin:8px 0 0;
padding-top:0;
text-align:right;
}
.home-lijst .knop-inschrijven a {
display:inline-block;
padding:7px 12px;
font-size:13px;
}
}

.sectie {
background:#efefef;
padding:20px 10px 60px;
box-shadow:#555 0 1px 10px
}

.home-content img.alignright {
width:auto;
border-radius:0
}

.homenieuws li {
box-shadow:0 0 10px #ccc;
border:solid 1px #ddd;
margin-bottom:20px;
height:108px;
border-radius:10px;
overflow:hidden;
background-color:#fff;
padding:0
}

.homenieuws li img {
float:left;
margin-right:20px;
width:170px;
height:auto
}

.homenieuws .arrowright {
margin-top:25px;
padding:0;
position:absolute;
right:15px
}

.homenieuws .arrowright a {
opacity:.75
}

.homenieuws h4 {
display:flex;
align-items:center;
height:108px;
float:left;
width:30vw
}

.sectiewit {
margin:40px;
overflow: auto;
}

.sectiewit .home-content ul {
padding:0
}
.sectiewit .home-content ul li {
margin-bottom:20px;
padding:0;
list-style:none
}


#footer {
min-height:350px;
clear:both;
background-color:#0053c7;
box-shadow:#555 0 1px 10px;
padding-top:20px
}

.foottext h4,.foottextend h4,.foottextbegin h4 {
margin-bottom:.9rem;
color:#fff
}

#footer .foottext li,#footer .foottextbegin li {
height:20px;
line-height:1.5;
width:270px;
list-style-type:none;
border:none;
margin:5px 0;
overflow:hidden
}
#footer .foottextend .sociallinks li {
width:auto;
margin:0 10px 0 0;
float:left
}

.right-column {
margin:40px 0 0;
padding:0
}

.wpp-list li {
border-bottom:1px solid #dbe9f2;
padding:0;
height:40px;
display:flex;
margin-bottom:2px;
align-items:center
}

.wpp-thumbnail {
box-shadow:0 0 5px #666;
margin:0 10px 0 3px
}

#footer a:hover {
color:#000;
text-decoration:none
}

#footer a {
color:#fff
}

a:hover {
color:#0053c7;
border:0
}

#footer .foottextbegin,#footer .foottext,#footer .foottextend {
padding:20px
}

#footer .foottextbegin {
margin-right:20px
}

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

.ubp {
text-align:left;
margin:20px auto;
width:300px
}

#tabs-container {
display:flow-root;          /* sluit de floats van .tabs-menu en .tab netjes in */
margin:10px 0;
text-align:left
}

.tabs-menu {
height:30px;
float:left;
margin:0;
padding:0
}

.tabs-menu li {
float:left;
background-color:#0053c7;
border-top:1px solid #d4d4d1;
border-right:1px solid #d4d4d1;
border-left:1px solid #d4d4d1;
list-style:none;
border-radius:10px 10px 0 0;
top:0;
position:relative;
margin-right:0
}

.tabs-menu li.current {
background-color:#fff;
border-bottom:1px solid #fff;
z-index:5;
box-shadow:0 -3px 5px #ddd
}

.tabs-menu li a {
padding:5px clamp(6px, .9vw, 12px);
text-transform:uppercase;
color:#fff;
text-decoration:none;
font-size:clamp(12px, 3.5vw, 16px)
}

.tabs-menu li:hover {
background-color:#1576ff;
transition:all .5s
}

.tabs-menu li.current:hover {
background-color:#fff
}

.tabs-menu .current a {
color:#2e7da3
}

.tab {
border:1px solid #d4d4d1;
background-color:#fff;
float:left;
width:100%;
border-radius:0 10px 10px 10px;
padding-bottom:10px;
margin-top:3px
}

.tab-content {
padding:0 5px;
display:none
}

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

#kaartcandy img {
box-shadow:0 0 10px #666;
border-radius:16px
}
#product-sidebar .buttons {
padding-top:20px
}

/* ─────────────────────────────────────────────────────────────────
   Elite cadeau-badge (sticker) — site-wide consistent, ook op mobiel.
   Basis-ontwerp hier (geldt op alle devices); positionering per context.
   ───────────────────────────────────────────────────────────────── */
.actie {
position:absolute;
bottom:8px;
left:8px;
z-index:10;
margin:0;
box-sizing:border-box;
width:86px;
height:86px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:8px;
background:radial-gradient(circle at 35% 28%, #ffe14d, #f5bb12);
color:#4a3400;
font-size:11px;
font-weight:800;
line-height:1.08;
letter-spacing:-.2px;
text-align:center;
word-break:break-word;
overflow:hidden;
box-shadow:0 0 0 3px #fff, 0 5px 13px rgba(150,105,0,.5);
animation:ccv-sticker-slap .55s cubic-bezier(.2,.7,.3,1.35) .12s both;
}
.actie .fa-gift {
font-size:14px;
margin:0 0 2px;
line-height:1;
}
/* "Sticker plak"-effect: knalt groot + gedraaid binnen en zakt met een bounce
   op z'n plek, met een lichte eindrotatie (echte-sticker-look). */
@keyframes ccv-sticker-slap {
0%   { transform:scale(2.6) rotate(16deg); opacity:0; }
55%  { transform:scale(.85) rotate(-7deg); opacity:1; }
78%  { transform:scale(1.08) rotate(3deg); }
100% { transform:scale(1) rotate(-6deg); }
}
@media (prefers-reduced-motion:reduce) {
.actie { animation:none; transform:rotate(-6deg); }
}
/* Wrapper rond de kaart-afbeelding: de badge (position:absolute, links-onder)
   valt hierdoor betrouwbaar op de linkeronderhoek van de kaart — nooit over de
   merknaam/het logo (die staan rechtsboven). */
.ccv-candy-img {
position:relative;
display:inline-block;
line-height:0;
max-width:100%;
}

#productpagina tr:nth-child(even) {
background:#eaf2f8
}

#productpagina .label {
color:#337ab7;
float:left;
display:flex;
align-items:center;
flex-wrap:wrap;
overflow-wrap:anywhere;
min-height:36px;
box-sizing:border-box;
line-height:1.35;
padding:6px 8px;
width:50vw
}

#productpagina .waarde {
max-width:none;
min-width:0;
display:flex;
align-items:center;
flex-wrap:wrap;
overflow-wrap:anywhere;
min-height:36px;
box-sizing:border-box;
line-height:1.35;
padding:6px 8px;
width:37vw;
float:left
}

.knop-inschrijven {
margin-bottom:20px;
padding-top:40px
}

.knop-inschrijven a {
-moz-transition:all .3s;
-webkit-transition:all .3s;
transition:all .3s;
color:#fff;
padding: 10px;
text-transform:uppercase;
text-decoration:none;
background:#c2410c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:10px;
vertical-align:middle
}

#product-sidebar {
margin:40px 1em;
clear:both
}

#product-sidebar .item {
border-bottom:1px solid #dbe9f2
}

#product-sidebar img {
margin:5px 10px 5px 0;
float:left;
box-shadow:0 0 5px #666
}

#product-sidebar .item span {
display:flex;
align-items:center;
height:35px
}

.sortmenu {
margin-bottom:-1px;
background:#f6fbff;
padding:14px 16px;
border-radius:12px 12px 0 0;
border:1px solid #e8edf1;
}

.sortbuttons {
margin:10px 0
}

.sortbuttons form {
float:right
}

button {
    padding:5px 10px;
    border-radius:5px;
    background-color: #007c20;
    color:#fff
}

select {
    padding: 5px;
    border-radius: 5px;
}

.filter-selections {    
    margin-bottom: 20px;    
}

.filter-selections strong {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.filter-selections ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Ruimte tussen filtertags */
}

.filter-selections ul li {
    display: inline-block;
    background-color: #0073aa;
    color: white;
    padding: 2px 8px 2px 15px;
    border-radius: 15px;
    font-size: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-selections ul li a {
    color: white;
    text-decoration: none;
    font-weight: normal;
}

.filter-selections ul li:hover {
    background-color: #005177; /* Kleurverandering bij hover */
}

.filter-selections ul li a .fa-times {
    font-size: 12px;
    margin-left: 5px;
}

.filter-selections ul li:hover .fa-times {
    color: #ff817f; /* Kleur bij hover */
}

#apply-filter {
color:#fff;
background-color:#007c20;
padding:5px 10px;
border-radius:5px;
margin-top:10px
}

a.reset-filters-btn {
    display:inline-block;
    margin-top:20px;
    padding: 4px 10px;
    border-radius: 15px;
    border: solid 1px #0073aa;
    font-size: 12px;
    height: 13px;
    line-height: 1;
}

/* Faceted counts in het eigenschappenfilter: rechts-uitgelijnde badge per
   filter met "(nog) N". Werkt op desktop én mobiel. */
#creditcard-filter label {
    display:flex;
    align-items:center;
    gap:7px;
    margin:3px 0;
}
#creditcard-filter br {
    display:none;
}
#creditcard-filter .facet-count {
    margin-left:auto;
    flex:0 0 auto;
    color:#8a97a3;
    font-size:12px;
    font-weight:400;
}
/* Filter zonder resultaten (en niet aangevinkt): helemaal verbergen. Aangevinkte
   filters blijven altijd staan zodat je ze kunt uitzetten. */
#creditcard-filter label:has(.facet-count--empty):not(:has(input:checked)) {
    display:none;
}

#lijst {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

#content-lijst .item,#content-lijst .infoitem {
border:1px solid #ddd;
margin-bottom:-1px;
padding:20px 10px;
text-align:center;
background:#fff;
background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(47%,rgba(246,246,246,1)),color-stop(100%,rgba(237,237,237,1)));
background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background:-ms-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0)
}

#content-lijst .foto img {
box-shadow:0 0 10px #666;
border-radius:10px;
width: 100%;
height: auto;
}

#content-lijst .foto {
position:relative;
overflow:hidden;
border-radius:10px;
}

#content-lijst .foto img {
display:block;
}

#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;
}

.teksten {
margin-bottom:10px
}

.menu-item-96,#nav #menu-item-201,.sharelinks,.bannerad {
display:none
}

.postcontent {
min-height:130px;
border-bottom:1px solid #ccc;
padding-bottom:10px
}

.thumbnail {
float:right;
margin:0 5px 0 10px;
border-radius:10px
}

.thumbnail img {
height:80px;
width:auto;
border-radius:5px
}

#popout ul li,#footer ul li {
list-style:none
}

.right-column ul.wpp-list,#footer ul,.postcontent p {
margin:0;
padding:0
}

#footer .foottext li a,#footer .foottextbegin li a,#tab-1 {
display:block
}

.kenmerken,#kaartcandy {
text-align:center
}
#post .wp-post-image {
border-radius:10px
}
.widget,.products {
margin-top:40px
}

/* 2026-03-29 SEO/GEO patch */
.ccv-keyfacts {
background:#f6fbff;
border:1px solid #d8e9ef;
border-radius:8px;
padding:18px;
margin:18px 0 24px;
}

.ccv-keyfacts h2 {
font-size:24px;
margin:0 0 14px;
color:#1a606f;
}

.ccv-keyfacts dl {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px;
margin:0;
}

.ccv-keyfacts dl div {
background:#fff;
border:1px solid #e4eef2;
border-radius:6px;
padding:10px 12px;
}

.ccv-keyfacts dt {
font-weight:700;
color:#1a606f;
margin-bottom:4px;
}

.ccv-keyfacts dd {
margin:0;
}

/* Voorkom wees-cel bij oneven aantal feiten: laatste item vult de rij */
.ccv-keyfacts dl > div:last-child:nth-child(odd) {
grid-column:1 / -1;
}

.pagination {
clear:both;
display:flex;
flex-wrap:wrap;
gap:8px;
margin:25px 0 10px;
}

.pagination .page-numbers {
display:inline-block;
padding:8px 12px;
border:1px solid #d5d5d5;
border-radius:4px;
background:#fff;
line-height:1;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background:#007c20;
border-color:#007c20;
color:#fff;
}

/* ============================================================
   Single post — moderne basis (mobile-first, 2026)
   Desktop-verfijning staat in rstyle.css (#single ...)
   ============================================================ */
#single {
margin-bottom:20px;
}

#single #post {
background:#fff;
}

#single .post-header h1 {
color:#13202b;
line-height:1.25;
}

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

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

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

#single .post-hero {
margin:0 0 20px;
border-radius:14px;
overflow:hidden;
line-height:0;
box-shadow:0 6px 18px 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;
}

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

#single .post-body a {
color:#0053c7;
}

#single .post-footer {
margin-top:22px;
padding-top:18px;
border-top:1px solid #eef2f5;
}

#single .relatedposts {
margin-bottom:14px;
}

#single .relatedposts-label {
display:block;
margin-bottom:8px;
font-weight:700;
color:#13202b;
}

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

#single .relatedposts ul li {
list-style:none;
margin:0;
padding:0;
background:#eef6ff;
border:1px solid #d4e6fb;
border-radius:999px;
}

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

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

/* ============================================================
   GEDEELDE MODERNE 2026 LAAG — alle templates (mobile-first)
   Desktop-breedtes/verfijning in rstyle.css
   ============================================================ */

/* --- Content pagina's: #pagina (page / search / infoslug) --- */
#pagina {
background:#fff;
}

#pagina .page-header h1,
#pagina > h1 {
color:#13202b;
line-height:1.25;
}

#pagina .page-header {
margin-bottom:14px;
padding-bottom:14px;
border-bottom:1px solid #eef2f5;
}

.entry-content {
font-size:16px;
line-height:1.75;
color:#33424d;
}

.entry-content h2 {
color:#13202b;
line-height:1.3;
}

.entry-content h3 {
color:#007c20;
line-height:1.35;
}

.entry-content a {
color:#0053c7;
}

.entry-content img {
max-width:100%;
height:auto;
border-radius:10px;
}

/* --- Nieuws-archief: category / tag (.middle-column + .postcontent) --- */
.middle-column {
background:#fff;
}

.middle-column .postpagetitle h1 {
color:#13202b;
margin:0;
}

.middle-column .postpagetitle {
margin-bottom:18px;
padding-bottom:14px;
border-bottom:1px solid #eef2f5;
}

.postcontent {
position:relative;
border:1px solid #e8edf1;
border-bottom:1px solid #e8edf1;
border-radius:14px;
padding:16px;
margin-bottom:16px;
background:#fff;
transition:box-shadow .2s, transform .2s, border-color .2s;
}

.postcontent:hover {
box-shadow:0 8px 22px rgba(20,40,70,.08);
border-color:#d4e6fb;
}

.postcontent .posttitlecat h2 {
font-size:1.15em;
line-height:1.3;
margin:0 0 6px;
}

.postcontent .posttitlecat h2 a {
color:#13202b;
border:0;
}

.postcontent .posttitlecat h2 a:hover {
color:#0053c7;
}

.postcontent .entry-date {
display:inline-block;
float:none;
width:auto;
font-size:11px;
font-weight:600;
color:#1f7384;
background:#eef6ff;
border:1px solid #d4e6fb;
border-radius:999px;
padding:2px 10px;
margin-bottom:8px;
}

.postcontent .read-more {
display:inline-block;
margin-top:6px;
font-weight:600;
color:#0053c7;
border:0;
}

.postcontent .read-more:hover {
color:#003d94;
}

/* --- Zoekresultaten --- */
.search-results .search-intro {
margin:0 0 14px;
color:#6b7a86;
}

.search-list {
list-style:none;
padding:0;
margin:0;
}

.search-list li {
list-style:none;
padding:14px 0;
border-bottom:1px solid #eef2f5;
}

.search-list li a {
display:block;
font-size:1.05em;
font-weight:700;
color:#0053c7;
border:0;
}

.search-snippet {
display:block;
margin-top:4px;
font-size:14px;
color:#6b7a86;
}

.alert-info {
background:#f6fbff;
border:1px solid #d8e9ef;
border-radius:12px;
padding:18px;
}

/* --- 404 --- */
.error-404-content {
background:#fff;
}

.error-404-content .entry-title {
color:#13202b;
}

.error-404-search {
margin:18px 0 24px;
}

.error-404-columns .widget {
margin-top:0;
margin-bottom:24px;
padding:20px;
background:#fff;
border:1px solid #e8edf1;
border-radius:14px;
}

.error-404-columns .widgettitle {
font-size:16px;
margin:0 0 12px;
padding-bottom:10px;
border-bottom:2px solid #00c735;
color:#13202b;
}

/* --- Moderne knoppen (algemeen) --- */
.knop-inschrijven a {
font-weight:700;
}

/* --- Sidebar widgets als kaarten (alle sidebars) --- */
.right-column .widget,
#sidebar .products,
#sidebar > .widget {
background:#fff;
}

/* --- Read-more / focus toegankelijkheid --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline:2px solid #0053c7;
outline-offset:2px;
}

/* Skip-link: verborgen tot toetsenbordfocus */
.skip-link {
position:absolute;
left:-9999px;
top:0;
z-index:100000;
padding:10px 16px;
background:#0053c7;
color:#fff;
border-radius:0 0 8px 0;
font-weight:700;
}

.skip-link:focus {
left:0;
color:#fff;
}

/* ============================================================
   Hero-image kleiner op telefoons — voorkomt dat 't creditcards-
   collage de eerste schermhelft van de category-pagina opeet.
   ============================================================ */
@media (max-width:767px) {
#kop-text img {
max-width:38vw !important;
height:auto !important;
margin:0 0 8px 10px !important;
float:right;
border-radius:8px;
}
}
@media (max-width:400px) {
#kop-text img {
max-width:32vw !important;
}
}

/* ============================================================
   Mobiele listing-rebuild: 1-koloms met foto boven, content
   eronder, en full-width touch-vriendelijke buttons (min 44px).
   Op tablets ≥768px valt dit terug op de bestaande layout.
   ============================================================ */
@media (max-width:1023px) {
#lijst {
gap:12px;
}
#content-lijst .item,
#content-lijst .infoitem {
padding:14px 12px;
text-align:left;
background:#fff;
border-radius:12px;
border:1px solid #e5edf5;
margin-bottom:0;
box-shadow:0 1px 3px rgba(20,40,70,.04);
}

/* De kaart-inhoud vult de volledige (grid-gelijkgetrokken) celhoogte, zodat de
   knoppen via .card-main{flex:1} naar de onderrand zakken en tussen de twee
   kolommen op één lijn uitkomen. */
#content-lijst .item {
display:flex;
}
#content-lijst .item .archivetext {
flex:1 1 auto;
}

#content-lijst .archivetext {
display:flex;
flex-direction:column;
gap:12px;
flex-wrap:nowrap;
}

#content-lijst .foto {
max-width:180px;
margin:0 auto;
flex:0 0 auto;
}
#content-lijst .foto img {
width:100%;
height:auto;
display:block;
border-radius:8px;
box-shadow:0 2px 8px rgba(20,40,70,.12);
}

#content-lijst .card-main {
display:flex;
flex-direction:column;
gap:8px;
flex:1 1 auto;
}

#content-lijst .teksten {
margin:0;
}
#content-lijst .teksten h2 {
margin:0 0 4px;
font-size:16px;
line-height:1.3;
}
#content-lijst .teksten h2 a {
color:#0053c7;
text-decoration:none;
}
#content-lijst .usp,
#content-lijst .gift {
font-size:13px;
line-height:1.4;
color:#33424d;
margin:2px 0;
/* volledig tonen — nooit afkappen in de smalle 2-koloms kaart. De basis-.usp
   heeft height:20px;overflow:hidden — daarom hier expliciet height:auto zodat
   het vakje meegroeit i.p.v. dat de tekst over de fees heen valt. */
height:auto;
white-space:normal;
overflow:visible;
overflow-wrap:anywhere;
}
#content-lijst .gift {
color:#c2410c;
font-weight:600;
}

/* Fees verticaal gestapeld → volledige "Label: waarde" per regel, altijd
   leesbaar (i.p.v. de 3-koloms grid die de waardes afkapte). */
#content-lijst .archivefees {
display:flex;
flex-direction:column;
gap:3px;
padding:8px 10px;
margin:0;
background:#f6fafd;
border-radius:8px;
border-top:0;
font-size:12px;
}
#content-lijst .archivefee1,
#content-lijst .archivefee2,
#content-lijst .archivefee3 {
float:none;
width:auto;
text-align:left;
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.45;
}
/* 'normaal € X' achter een actieprijs (ccv_jaarbijdrage_label): breekt als geheel af. */
.ccv-fee-normaal {
white-space:nowrap;
color:#666;
}

/* Buttons passen zich aan: VERGELIJK + Aanvragen naast elkaar op bredere
   kaarten, Aanvragen wrapt netjes naar een eigen regel op smalle telefoons. */
#content-lijst .buttons {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 10px;
margin-top:2px;
}
#content-lijst .buttons .compare-checkbox {
order:1;
flex:0 1 auto;
}
#content-lijst .buttons .compare-checkbox .styled-check-label {
min-height:44px;
padding:6px 16px;
}
#content-lijst .buttons .knop-inschrijven {
order:2;
flex:1 1 130px;
margin:0;
padding:0;
}
#content-lijst .buttons .knop-inschrijven a {
display:flex;
align-items:center;
justify-content:center;
gap:5px;
width:100%;
min-height:44px;
padding:6px 10px;
box-sizing:border-box;
background:#c2410c;
color:#fff;
border-radius:8px;
font-weight:700;
font-size:13px;
letter-spacing:-.2px;
line-height:1.15;
text-align:center;
/* wrap i.p.v. afkappen: label "NU AANVRAGEN" + pijl past niet op één regel
   in een smalle 2-koloms kaart (<~430px); nu breekt het netjes af i.p.v.
   over de knoprand te lopen. */
white-space:normal;
text-decoration:none;
box-shadow:0 2px 6px rgba(194,65,12,.25);
}
#content-lijst .buttons .knop-inschrijven a:hover {
background:#9a3308;
}
#content-lijst .soft-conversie {
display:none; /* houd de mobiele CTA-strook compact */
}
}

/* ============================================================
   Elite nieuws-/tips-kaartjes op de homepage (.ccv-news-card)
   ============================================================ */

/* Reset op oude .homenieuws-regels: hoogte los, oude beeld/heading floats uit,
   arrowright hidden (verdwenen uit HTML maar defensief opgeruimd). */
.homenieuws li {
padding:0;
border:1px solid #e5edf5;
border-radius:12px;
background:#fff;
box-shadow:0 1px 3px rgba(20,40,70,.05);
margin-bottom:14px;
height:auto;
overflow:hidden;
display:block;
transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.homenieuws li:hover {
box-shadow:0 10px 24px rgba(20,40,70,.12);
transform:translateY(-2px);
border-color:#c9d9e6;
}
.homenieuws .arrowright {
display:none;
}

.ccv-news-card {
display:flex;
gap:18px;
padding:14px;
color:inherit;
text-decoration:none;
align-items:stretch;
}
.ccv-news-thumb {
flex:0 0 180px;
overflow:hidden;
border-radius:8px;
background:#f0f4f8;
aspect-ratio:3/2;
}
.homenieuws li .ccv-news-thumb img {
display:block;
width:100%;
height:100%;
object-fit:cover;
float:none;
margin:0;
transition:transform .3s ease;
}
.homenieuws li:hover .ccv-news-thumb img {
transform:scale(1.04);
}
.ccv-news-body {
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.ccv-news-date {
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
color:#6a7783;
font-weight:500;
letter-spacing:.2px;
}
.ccv-news-date .fa {
color:#00c735;
font-size:12px;
}
.ccv-news-card h4 {
margin:0;
color:#0053c7;
font-size:16px;
font-weight:700;
line-height:1.35;
display:block;
height:auto;
float:none;
width:auto;
padding:0;
}
.ccv-news-excerpt {
color:#33424d;
font-size:13px;
line-height:1.5;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
line-clamp:2;
}
.ccv-news-excerpt p {
margin:0;
display:inline;
}
.ccv-news-cta {
display:inline-flex;
align-items:center;
gap:6px;
margin-top:auto;
padding-top:6px;
color:#0053c7;
font-size:13px;
font-weight:600;
align-self:flex-start;
}
.ccv-news-cta .fa {
font-size:11px;
transition:transform .2s ease;
}
.homenieuws li:hover .ccv-news-cta .fa {
transform:translateX(4px);
}

.ccv-news-all {
float:right;
color:#0053c7;
font-weight:600;
text-decoration:none;
padding:8px 4px;
transition:color .2s;
}
.ccv-news-all .fa {
font-size:11px;
margin-left:4px;
transition:transform .2s;
}
.ccv-news-all:hover {
color:#003d94;
}
.ccv-news-all:hover .fa {
transform:translateX(4px);
}

/* Focus voor toetsenbord-gebruikers */
.ccv-news-card:focus-visible {
outline:2px solid #0053c7;
outline-offset:3px;
border-radius:8px;
}

/* Compact op telefoons: kleiner thumb, geen excerpt, tight spacing */
@media (max-width:767px) {
.ccv-news-card {
gap:12px;
padding:10px;
}
.ccv-news-thumb {
flex:0 0 96px;
}
.ccv-news-card h4 {
font-size:14px;
line-height:1.3;
}
.ccv-news-excerpt {
display:none;
}
.ccv-news-date {
font-size:11px;
}
.ccv-news-cta {
font-size:12px;
padding-top:4px;
}
}

/* Auto-submit filtert al bij het aanvinken; de expliciete "filteren"-knop is
   daardoor overbodig op desktop (blijft op mobiel staan als no-JS fallback). */
@media (min-width:1024px) {
#apply-filter {
display:none;
}
}

/* --- Onderdruk de ▶ play/zoom-overlay die een lightbox/zoom-plugin op de
   kaart-afbeeldingen legt (zit NIET in het thema). We neutraliseren pseudo-
   element-overlays op de afbeeldings-links — de meest voorkomende manier
   waarop zulke plugins de icon-overlay toevoegen. Blijft er toch een ▶ staan,
   dan is het een echt DOM-element van de plugin (dan de plugin-optie uitzetten
   of de exacte class doorgeven). --- */
.foto a::before,
.foto a::after,
#kaartcandy > a::before,
#kaartcandy > a::after,
.vergelijkfoto a::before,
.vergelijkfoto a::after,
.home-lijst .product a::before,
.home-lijst .product a::after,
#kop-text a::before,
#kop-text a::after {
content:none !important;
background:none !important;
display:none !important;
}
@media (max-width:1023px) {
.ccv-keyfacts {
margin:16px 0;
padding:14px;
}
.ccv-keyfacts h2 {
font-size:18px;
margin:0 0 10px;
}
.ccv-keyfacts dl {
grid-template-columns:repeat(2, 1fr);
gap:8px;
}
.ccv-keyfacts dl div {
padding:8px 10px;
}
.ccv-keyfacts dt {
font-size:11px;
}
.ccv-keyfacts dd {
font-size:13px;
font-weight:700;
}
}

/* ============================================================
   Chips op de detailpagina: USP's (.ubp) + VERGELIJK-toggle.
   ============================================================ */
#productpagina .ubp {
display:flex;
flex-wrap:wrap;
gap:8px;
margin:4px 0 20px;
width:auto;
}
#productpagina .ubp .gift,
#productpagina .ubp .usp,
#productpagina .ubp .vw {
display:inline-flex;
align-items:center;
gap:6px;
margin:0;
padding:6px 13px;
border-radius:999px;
font-size:13px;
font-weight:600;
line-height:1.3;
background:#e9f6ec;
color:#1c7c3a;
border:1px solid #cfe8d4;
}
#productpagina .ubp .gift {
background:#fff3e4;
color:#b3560a;
border-color:#ffdcb8;
}
#productpagina .ubp .vw {
background:#fdeef0;
color:#b23a48;
border-color:#f6d3d8;
}
#productpagina .ubp .gift .fa,
#productpagina .ubp .usp .fa,
#productpagina .ubp .vw .fa {
font-size:13px;
}
#productpagina .ubp .vw a {
color:inherit;
text-decoration:underline;
border:0;
}

/* VERGELIJK als chip-toggle (+ → ✓, vult blauw wanneer aangevinkt).
   Container-onafhankelijk: geldt overal waar de .compare-checkbox >
   .styled-check-label markup staat — detailpagina (#kaartcandy), de
   listings (#content-lijst / /aanvragen/) én de homepage (.home-lijst). */
#kaartcandy .compare-checkbox {
padding:0;
text-align:center;
}
.compare-checkbox .styled-check-label {
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
padding:8px 18px;
border-radius:999px;
border:1.5px solid #0053c7;
color:#0053c7;
font-weight:700;
font-size:13px;
letter-spacing:.3px;
line-height:1.2;
box-sizing:border-box;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.compare-checkbox .styled-check-label:hover {
background:#eef4ff;
}
.compare-checkbox .styled-check-label:has(input:checked) {
background:#0053c7;
color:#fff;
}
.compare-checkbox .styled-check-label::before {
content:"\f067";
font-family:'FontAwesome';
font-size:11px;
}
.compare-checkbox .styled-check-label:has(input:checked)::before {
content:"\f00c";
}
.compare-checkbox input {
position:absolute;
opacity:0;
width:1px;
height:1px;
pointer-events:none;
}

/* --- FAQ-accordeon (productpagina, native details/summary) --- */
.ccv-faq {
clear:both;
margin:50px 0 10px;
}

.ccv-faq h2 {
font-size:1.5em;
color:#13202b;
margin:0 0 14px;
}

.ccv-faq-item {
border:1px solid #e8edf1;
border-radius:12px;
margin-bottom:10px;
background:#fff;
overflow:hidden;
}

.ccv-faq-item summary {
list-style:none;
cursor:pointer;
padding:14px 18px;
font-weight:700;
color:#13202b;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}

.ccv-faq-item summary::-webkit-details-marker {
display:none;
}

.ccv-faq-item summary::after {
content:"+";
font-size:20px;
font-weight:700;
color:#007c20;
line-height:1;
flex:0 0 auto;
}

.ccv-faq-item[open] summary::after {
content:"\2212";
}

.ccv-faq-item[open] summary {
border-bottom:1px solid #eef2f5;
}

.ccv-faq-answer {
padding:14px 18px;
color:#33424d;
line-height:1.7;
}

/* Reset voor content die uit de_content in een antwoord belandt. Prefix met
   .ccv-faq zodat de specificiteit (0,2,1) de .home-content ul li{width:48%}-regel
   (0,1,2) verslaat en lijsten binnen antwoorden 1-koloms + netjes ingesprongen zijn. */
.ccv-faq .ccv-faq-answer p {
margin:0 0 10px;
}
.ccv-faq .ccv-faq-answer p:last-child {
margin-bottom:0;
}
.ccv-faq .ccv-faq-answer ul,
.ccv-faq .ccv-faq-answer ol {
margin:8px 0 8px 20px;
padding:0;
}
.ccv-faq .ccv-faq-answer li {
width:auto !important;   /* verslaat .sectiewit .home-content ul li (0,2,2) uit rstyle.css */
float:none !important;
margin:0 0 6px !important;
list-style:disc;
}

/* ============================================================
   Responsive header (device-onafhankelijk i.p.v. wp_is_mobile)
   Mobile-first: topnav + vergelijk-balk verborgen, hamburger zichtbaar.
   Desktop-regels (tonen/verbergen) staan in rstyle.css (min-width:1024px).
   ============================================================ */
#nav {
display:none;
}

.logowrap .logo img {
height:auto;
max-width:100%;
}

/* Bar-drawer is mobile-only; standaard verbergen we 'm. */
.ccv-bar-toggle,
#ccv-bar-drawer {
display:none;
}

/* Compare-UI op mobiel: compacte versie van de vergelijkbalk (alleen de teller/
   knop, geen chips of zoekvelden — die nemen te veel ruimte op een telefoon).
   De VERGELIJK-checkboxes op listings/home/product zijn op mobiel zichtbaar
   zodat een gebruiker rechtstreeks vanaf een lijst kan toevoegen. Het bouwen
   gebeurt via localStorage, het bekijken via /vergelijking/. Een uitschuif-
   drawer (chevron-knop rechts) toont de geselecteerde kaarten boven de bar. */
@media (max-width:1023px) {
/* Verplaats de vergelijkbalk naar de onderkant zodat hij content boven niet
   blokkeert. Position:fixed houdt 'm altijd in beeld tijdens scrollen. */
.contentwrap {
position:fixed;
left:0;
right:0;
bottom:0;
background:#0053c7;
height:38px;
box-shadow:0 -2px 8px rgba(0,0,0,.18);
z-index:1000;
}

/* Reserveer onderaan ruimte zodat de fixed balk geen content of footer
   afdekt. Plus iOS safe-area voor toestellen met home-indicator. */
body {
padding-bottom:calc(38px + env(safe-area-inset-bottom, 0px));
}

#vergelijk-top {
position:relative;
height:38px;
display:flex;
align-items:center;
justify-content:center;
padding:0 12px;
box-sizing:border-box;
}

#vergelijk-top .vergelijk-slots {
display:none;
}

#vergelijk-top .tekst {
margin:0;
}

#vergelijk-top .tekst a {
display:inline-flex;
align-items:center;
gap:8px;
height:30px;
padding:0 18px;
background:#196ce0;
color:#fff;
border-radius:20px;
text-decoration:none;
font-size:13px;
font-weight:700;
box-sizing:border-box;
}
#vergelijk-top .vergelijk-chevron {
font-size:11px;
transition:transform .2s ease;
}
#vergelijk-top .tekst a:hover .vergelijk-chevron,
#vergelijk-top .tekst a:focus-visible .vergelijk-chevron {
transform:translateX(3px);
}

/* Pulse-effect wanneer een kaart is toegevoegd/verwijderd — subtiele feedback */
@keyframes ccv-teller-pulse {
0%   { transform:scale(1);   background:rgba(255,255,255,.22); }
40%  { transform:scale(1.18); background:rgba(255,255,255,.42); }
100% { transform:scale(1);   background:rgba(255,255,255,.22); }
}
#vergelijk-top .vergelijk-teller.is-pulsing {
animation:ccv-teller-pulse .5s ease;
display:inline-block;
padding:1px 8px;
border-radius:10px;
}

#vergelijk-top .vergelijk-teller {
color:#fff;
font-weight:700;
}

/* Chevron-toggle rechts in de bar: opent/sluit de drawer met selectie. */
.ccv-bar-toggle {
display:flex;
align-items:center;
justify-content:center;
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
padding:0;
background:rgba(255,255,255,.15);
border:0;
border-radius:50%;
color:#fff;
cursor:pointer;
transition:background .2s;
}
.ccv-bar-toggle:hover,
.ccv-bar-toggle:focus-visible {
background:rgba(255,255,255,.28);
}
.ccv-bar-toggle-icon {
display:block;
width:10px;
height:10px;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(-135deg);     /* chevron-up */
margin-top:3px;
transition:transform .25s ease;
}
.ccv-bar-toggle[aria-expanded="true"] .ccv-bar-toggle-icon {
transform:rotate(45deg);        /* chevron-down */
margin-top:-3px;
}

/* Drawer-paneel boven de bar. Closed = max-height 0 (volledig onzichtbaar,
   geen flicker bij content-hoogte-verandering). Open = max-height 60vh. */
#ccv-bar-drawer {
display:block;
position:fixed;
left:0;
right:0;
bottom:38px;
z-index:999;
background:#fff;
border-top:1px solid #e5edf5;
box-shadow:0 -6px 20px rgba(0,0,0,.18);
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}
#ccv-bar-drawer.is-open {
max-height:60vh;
overflow-y:auto;
}
.ccv-drawer-head {
display:flex;
align-items:baseline;
justify-content:space-between;
padding:12px 16px 6px;
font-size:13px;
color:#33424d;
}
.ccv-drawer-count {
font-size:12px;
color:#0053c7;
font-weight:700;
}
.ccv-drawer-list {
list-style:none;
margin:0;
padding:4px 8px 12px;
}
.ccv-drawer-list li {
display:flex;
align-items:center;
gap:10px;
padding:8px;
border-radius:10px;
background:#f6fafd;
margin-bottom:6px;
}
.ccv-drawer-list li img {
flex:0 0 auto;
width:42px;
height:auto;
border-radius:4px;
}
.ccv-drawer-list .ccv-drawer-name {
flex:1 1 auto;
min-width:0;
font-size:13px;
font-weight:600;
color:#13202b;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ccv-drawer-list .ccv-drawer-remove {
flex:0 0 auto;
width:28px;
height:28px;
border:0;
border-radius:50%;
background:#dfe7ef;
color:#33424d;
font-weight:700;
cursor:pointer;
font-size:14px;
line-height:1;
}
.ccv-drawer-list .ccv-drawer-remove:hover,
.ccv-drawer-list .ccv-drawer-remove:focus-visible {
background:#ff4d4d;
color:#fff;
}
.ccv-drawer-empty {
margin:0;
padding:18px 18px 22px;
text-align:center;
color:#6a7783;
font-size:13px;
}

}

/* ============================================================
   Modern zoekformulier (2026) — vervangt de oude #search-look
   ============================================================ */
.ccv-search-form {
display:flex;
align-items:stretch;
max-width:100%;
background:#fff;
border:1px solid #d4dde4;
border-radius:999px;
overflow:hidden;
}

.ccv-search-form #search {
flex:1 1 auto;
min-width:0;
height:42px;
padding:0 18px;
border:0;
background:none;
font-size:14px;
color:#33424d;
outline:none;
-webkit-appearance:none;
}

.ccv-search-form #search::placeholder {
color:#8a97a3;
}

.ccv-search-form button {
flex:0 0 auto;
width:46px;
border:0;
background:#0053c7;
color:#fff;
cursor:pointer;
font-size:15px;
display:flex;
align-items:center;
justify-content:center;
transition:background .2s;
}

.ccv-search-form button:hover {
background:#003d94;
}

.ccv-search-form:focus-within {
border-color:#0053c7;
box-shadow:0 0 0 3px rgba(0,83,199,.12);
}

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

/* ============================================================
   Vergelijkpagina op smal scherm (<1024px): horizontaal scrollbare
   tabel met een vastgezette (sticky) labelkolom. We hergebruiken exact
   dezelfde vaste rijhoogtes als desktop (25px rij, 30px sectiekop,
   281px kaartheader, 251px label-topblok) zodat labels en waarden
   perfect blijven uitlijnen tijdens het horizontaal scrollen.
   De pagina is zelfvoorzienend: de "Kies een card"-lijst voegt toe,
   de ✕-knoppen verwijderen — de header-vergelijkbalk is niet nodig.
   ============================================================ */
.vergelijk-notice {
display:none;
}

@media (max-width:1023px) {
.vergelijk-notice {
display:none;
}

#vergelijk {
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
gap:8px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin-top:10px;
padding-bottom:12px;
scroll-snap-type:x mandatory;
scroll-padding-left:156px;
}
#vergelijk .vergelijkkolom,
#vergelijk .kolom {
scroll-snap-align:start;
}

#vergelijk .labelkolom {
position:sticky;
left:0;
z-index:20;   /* boven de cadeau-badge (z-index:10) zodat die er bij horizontaal scrollen ACHTER verdwijnt i.p.v. eroverheen */
flex:0 0 156px;
width:156px;
box-sizing:border-box;
background:#fff;
border:1px solid #eaf2f8;
border-radius:10px;
font-size:12px;
box-shadow:6px 0 10px -6px rgba(20,40,70,.18);
}

/* Cadeau-badge compacter op telefoons (basis 84px is te fors voor de kleine kaart). */
#vergelijk .actie,
#productpagina .actie {
padding:6px;
bottom:6px;
left:6px;
}
#productpagina .actie {
width:72px;
height:72px;
font-size:9.5px;
}
#productpagina .actie .fa-gift {
font-size:12px;
}
/* Vergelijk-kaartjes zijn smal → compactere sticker zodat 'ie de kaart niet bedekt. */
#vergelijk .actie {
width:60px;
height:60px;
font-size:8px;
}
#vergelijk .actie .fa-gift {
font-size:10px;
margin:0 0 1px;
}
/* Review-sterren netjes centreren + verticaal uitlijnen op mobiel (zoals de
   listing-rating), zodat het cijfer en de sterren strak op één lijn staan. */
#kaartcandy .glsr,
#kaartcandy [class*="glsr"],
#kaartcandy [class*="glsr"] [class*="stars"],
#kaartcandy [class*="glsr"] [class*="summary"] {
display:inline-flex;
align-items:center;
justify-content:center;
}
#kaartcandy .glsr {
margin-left:auto;
margin-right:auto;
}

#vergelijk .vergelijkkolom {
flex:0 0 190px;
width:190px;
box-sizing:border-box;
text-align:center;
border:1px solid #eaf2f8;
border-radius:10px;
font-size:12px;
}

#vergelijk .kolom {
flex:0 0 220px;
width:220px;
box-sizing:border-box;
padding:8px;
font-size:12px;
align-self:flex-start;   /* bovenkant lijnt uit met de kaartkolommen */
background:#fff;
border:1px solid #eaf2f8;
border-radius:10px;
}
/* Elite "kies een card"-lijst: schone tikbare kaart-rijen (geen underlines /
   scroll-menu-look) met een +-affordance rechts. */
#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,
#vergelijk .kolom .cards:active {
background:#eaf2ff;
box-shadow:0 1px 5px rgba(20,40,70,.09);
}
#vergelijk .kolom .cards .card-image {
flex:0 0 auto;
}
#vergelijk .kolom .cards .card-image img {
width:40px;
height:auto;
border-radius:4px;
display:block;
}
#vergelijk .kolom .cards p {
margin:0;
flex:1 1 auto;
min-width:0;
font-size:12.5px;
line-height:1.3;
}
#vergelijk .kolom .cards p a {
color:#13202b;
text-decoration:none;
border-bottom:0;   /* overschrijf de globale `p a{border-bottom:2px}` — geen dikke underline */
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%;
}

/* Label-topblok: intro-paragraaf verbergen, compactere h1; vaste hoogte zodat
   de eerste rij uitlijnt met de kaart-header (170 + 30 divider = 200). */
#vergelijk .vergelijktekst {
height:170px;
padding:0 10px;
box-sizing:border-box;
overflow:hidden;
}
#vergelijk .vergelijktekst h1 {
font-size:16px;
margin:8px 0 0;
line-height:1.2;
}
#vergelijk .vergelijktekst p {
display:none;
}

#vergelijk .vergelijkkolomheader {
height:200px;
text-align:center;
overflow:hidden;
}
#vergelijk .vergelijkfoto img {
width:100%;
max-width:170px;
height:auto;
border-radius:6px;
}
#vergelijk .vergelijkkolomheader h3 {
font-size:12px;
line-height:1.25;
margin:4px 6px 0;
}
#vergelijk .vergelijkkolomheader .knop-inschrijven {
margin:6px auto 4px;
}
#vergelijk .vergelijkkolomheader .knop-inschrijven a {
font-size:12px;
padding:6px 10px;
}

/* Sectiekoppen even hoog in beide kolommen (kaart-titel uitgezonderd) */
#vergelijk .labelkolom > h3,
#vergelijk .vergelijkkolom > h3 {
height:30px;
line-height:30px;
margin:0;
padding:0 8px;
font-size:13px;
font-weight:600;
box-sizing:border-box;
overflow:hidden;
}

/* Rijen op mobiel hoger dan desktop (25px → 36px) zodat lange labels naar
   2 regels mogen breken zonder uitlijning te verliezen. Flex-centrering houdt
   1-regelige en 2-regelige cellen verticaal netjes uitgelijnd. */
#vergelijk .label,
#vergelijk .waarde {
min-height:36px;
height:36px;
line-height:1.25;
box-sizing:border-box;
display:flex;
align-items:center;
overflow:hidden;
font-size:12px;
}
#vergelijk .label {
padding:0 8px;
text-align:left;
color:#337ab7;
justify-content:flex-start;
}
#vergelijk .waarde {
padding:0 6px;
text-align:center;
justify-content:center;
}

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

/* Verwijder-kruisje (✕) per kaart-kolom: ronde knop rechtsboven in de header.
   Op desktop staat dit in rstyle.css, op mobiel moest het nog. */
#vergelijk .verwijderbutton {
position:absolute;
top:6px;
right:6px;
margin:0;
padding:0;
z-index:2;
}
#vergelijk .verwijderbutton form {
margin:0;
}
#vergelijk #erase {
background:#588ebb;
border:0;
color:#fff;
font-family:'FontAwesome';
font-size:13px;
font-weight:700;
width:24px;
height:24px;
border-radius:50%;
padding:0;
line-height:1;
cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#vergelijk #erase:hover,
#vergelijk #erase:focus-visible {
background:#ff4d4d;
}
#vergelijk .vergelijkkolom {
position:relative;
}

/* Bottom-bar verbergen op de vergelijkpagina zelf — redundant. */
body.ccv-on-vergelijking .contentwrap,
body.ccv-on-vergelijking #ccv-bar-drawer {
display:none;
}
body.ccv-on-vergelijking {
padding-bottom:0;
}

/* Zebra-striping voor scanbaarheid — rijen lopen recht door label- én
   waardekolommen (zoals brede championship-standings-tabellen). */
#vergelijk .label.even,
#vergelijk .waarde.even {
background:#f4f8fc;
}

/* Scroll-schaduw: rechterrand-fade die aangeeft dat er meer kolommen naar
   rechts staan; verdwijnt zodra je aan het einde bent (of niets te scrollen
   valt). JS (bindVergelijkScrollShadows) zet .at-end / .no-scroll. */
.ccv-vergelijk-wrap {
position:relative;
}
.ccv-vergelijk-wrap::after {
content:"";
position:absolute;
top:0;
bottom:12px;
right:0;
width:34px;
pointer-events:none;
z-index:5;
background:linear-gradient(270deg, rgba(20,40,70,.16), rgba(20,40,70,0));
opacity:1;
transition:opacity .25s ease;
}
.ccv-vergelijk-wrap.at-end::after,
.ccv-vergelijk-wrap.no-scroll::after {
opacity:0;
}
}

/* Nieuws-/tips-excerpt alleen op echte telefoons verbergen (compacter), op tablet+ tonen */
@media (max-width:767px) {
.homenieuws .excerpt {
display:none;
}
}

/* Productpagina op smal scherm (<1024px): kaart-afbeelding + CTA (sidebar) bovenaan */
@media (max-width:1023px) {
/* #kaartcandy (kaart-afbeelding + CTA) bovenaan op mobiel.
   .productomschrijving is de échte flex-container: die bevat zowel .kenmerken
   als #product-sidebar als directe kinderen. #product-sidebar krijgt
   display:contents zodat #kaartcandy én de gerelateerde .products-blokken
   losse flex-items worden en we ze exact kunnen ordenen:
   candy (-1) → kenmerken/info (0) → gerelateerde kaarten (1). */
#productpagina,
#productpagina .productomschrijving {
display:flex;
flex-direction:column;
}
#productpagina #product-sidebar {
display:contents;
}
#productpagina #kaartcandy {
order:-1;
margin:0 auto 18px;   /* auto = horizontaal centreren (met max-width:292px hierboven) */
}
#productpagina .kenmerken {
order:0;
}
#productpagina #product-sidebar .products {
order:1;
margin-top:18px;
}

/* #kaartcandy op mobiel: schone verticale stack — gecentreerde kaart-afbeelding
   met daaronder een full-width CTA die nooit afkapt (fix voor kaarten waar de
   knop naast de afbeelding klemde). */
#productpagina #kaartcandy > a,
#productpagina #kaartcandy > a img {
display:block;
margin:0 auto;
max-width:280px;
width:100%;
height:auto;
}
#productpagina #kaartcandy .buttons {
display:block;
width:100%;
max-width:340px;
margin:12px auto 0;
padding:0;
float:none;
}
#productpagina #kaartcandy .compare-checkbox {
float:none;
text-align:center;
margin:10px 0;
}
#productpagina #kaartcandy .knop-inschrijven {
float:none;
margin:0 0 8px;
}
#productpagina #kaartcandy .knop-inschrijven a {
display:flex;
align-items:center;
justify-content:center;
gap:6px;
width:100%;
box-sizing:border-box;
padding:12px 16px;
white-space:normal;
float:none;
}
}