/*
Theme Name: Keuzegemak
Description: Rustig thema voor top 3 productlijsten met affiliate-links.
Version: 1.1.0
Text Domain: keuzegemak
*/
:root{--bg:#F7F5F1;--ink:#1B2540;--navy:#232F55;--mute:#5A6480;--line:#E2DFD8;--gold:#C9A24B;--ph:#EDEBE6;--serif:"Lora",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.site-header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 1.4rem var(--serif)}
.brand svg{width:34px;height:34px;display:block}
.site-header nav a{color:var(--mute);text-decoration:none;margin-left:28px}
.site-header nav a:hover{color:var(--ink)}
.hero{text-align:center;padding:110px 0 90px}
.hero h1{font:500 clamp(2.6rem,8vw,5.2rem)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 24px}
.hero p{color:var(--mute);font-size:1.2rem;max-width:34em;margin:0 auto 48px}
.search{max-width:440px;margin:0 auto}
.search input{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;text-align:center;font:400 1.25rem var(--sans);padding:14px 0;color:var(--ink);border-radius:0}
.search input:focus{outline:0;border-color:var(--navy)}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding:56px 0 20px}
.head h1,.head h2{font:500 2.4rem var(--serif);margin:0}
.head span{color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;padding:40px 0 90px}
.card{border-top:1px solid var(--line);padding-top:28px;text-decoration:none;display:block}
.card .top{display:flex;justify-content:space-between;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.card .num{font-family:var(--serif);color:var(--mute);letter-spacing:0;font-size:1rem}
.card:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
.card h3{font:500 1.9rem/1.2 var(--serif);margin:22px 0 12px}
.card p{color:var(--mute);margin:0}
.back{display:inline-block;margin-top:48px;color:var(--mute);text-decoration:none;font-size:.95rem}
.title{font:500 clamp(2.2rem,5vw,3.4rem)/1.1 var(--serif);letter-spacing:-.01em;margin:24px 0 16px}
.intro{color:var(--mute);max-width:38em;font-size:1.05rem;margin:0}
.products{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:48px 0 24px}
.prod{padding:36px;border-left:1px solid var(--line);display:flex;flex-direction:column}
.prod:first-child{border-left:0;padding-left:0}
.prod:last-child{padding-right:0}
.pimg{aspect-ratio:1;background:var(--ph);object-fit:cover;width:100%;display:block;margin-bottom:32px}
.rank{display:flex;align-items:baseline;gap:12px}
.rank b{font:400 2.4rem/1 var(--serif);color:#8A90A3}
.rank span{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--navy)}
.prod h2{font:500 1.35rem var(--serif);margin:12px 0 2px}
.price{color:var(--mute);margin:0 0 14px}
.prod p.desc{margin:0 0 18px}
.list{list-style:none;padding:14px 0 0;margin:0 0 14px;border-top:1px solid var(--line);font-size:.95rem}
.list li{padding-left:20px;position:relative}
.list.plus li::before{content:"+";position:absolute;left:0}
.list.min li::before{content:"\2013";position:absolute;left:0;color:var(--gold)}
.cta{margin-top:auto;padding-top:24px}
.btn{display:block;text-align:center;background:var(--navy);color:#fff;text-decoration:none;font-weight:500;padding:14px 18px}
.btn:hover{background:#151d3a}
.disclosure{color:var(--mute);font-size:.85rem;max-width:44em;margin:0 0 40px}
.entry{max-width:44em;padding-bottom:80px}
.entry h2,.entry h3{font-family:var(--serif);font-weight:500}
.site-footer{border-top:1px solid var(--line);margin-top:40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 0;color:var(--mute);font-size:.95rem}
.foot .brand{color:var(--ink)}
.empty{padding:60px 0;color:var(--mute)}
@media(max-width:860px){
.grid,.products{grid-template-columns:1fr}
.prod,.prod:first-child,.prod:last-child{border-left:0;border-top:1px solid var(--line);padding:32px 0}
.prod:first-child{border-top:0}
.hero{padding:70px 0 60px}
.foot{flex-direction:column;text-align:center}
}

.site-header nav a{margin-left:0}
.site-header nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:28px 0 0}
.chips a{border:1px solid var(--line);padding:7px 16px;border-radius:999px;text-decoration:none;color:var(--mute);font-size:.95rem}
.chips a:hover{color:var(--ink);border-color:var(--mute)}
.chips a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.hero .chips{justify-content:center;padding-top:40px}
.cimg{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:20px;background:var(--ph)}
.crumb{margin:40px 0 0;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.crumb a{color:var(--navy);text-decoration:none}
.more{color:var(--mute);text-decoration:none}
.post{max-width:720px;margin:0 auto;padding-bottom:80px}
.post .meta{color:var(--mute);font-size:.95rem;margin:0}
.post .feat{width:100%;height:auto;display:block;margin:32px 0}
.post .entry{max-width:none;padding-bottom:0;font-size:1.1rem;line-height:1.75}
.post .entry img{max-width:100%;height:auto}
.post .entry a{color:var(--navy)}
.pagination{padding:0 0 80px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{padding:8px 14px;border:1px solid var(--line);text-decoration:none}
.page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:860px){.bar{height:auto;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:14px}}