@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --wit:#F9FAF9;--salie:#96A099;--perzik:#F0C188;--petrol:#649EA4;--roos:#935A5A;
  --inkt:#26383a;--zacht:#5e6b66;--lijn:#e3e7e4;
  --perzik-licht:#fbeedd;--petrol-licht:#e3eff0;--roos-licht:#f1e4e3;--salie-licht:#eceeec;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Figtree",system-ui,sans-serif;background:var(--wit);color:var(--inkt);line-height:1.6;font-size:16px}
h1,h2,h3,.logo{font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(2.4rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:.98}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700}
h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:4px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.smal{width:min(760px,100% - 48px);margin-inline:auto}
main{min-height:60vh}

/* kop */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;text-decoration:none}
.logo span{color:var(--petrol)}
.menu{display:flex;gap:28px;list-style:none;font-weight:500;font-size:.95rem}
.menu a{color:var(--zacht);text-decoration:none}
.menu a:hover,.menu a[aria-current]{color:var(--inkt)}
.mandknop{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--lijn);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--inkt)}
.mandknop .tel{position:absolute;top:-4px;right:-4px;background:var(--roos);color:#fff;font-size:.72rem;font-weight:600;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:none;place-items:center}
.mandknop .tel.aan{display:grid}
.menuknop{display:none;background:none;border:1px solid var(--lijn);border-radius:999px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer;color:var(--inkt)}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:.97rem;border:1.5px solid var(--inkt);cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s,color .15s,border-color .15s;background:transparent;color:var(--inkt)}
.knop-vol{background:var(--inkt);color:var(--wit)}
.knop-vol:hover{background:var(--petrol);border-color:var(--petrol)}
.knop:not(.knop-vol):hover{background:#fff}
.knop[disabled]{opacity:.45;cursor:not-allowed}
.knoppen{display:flex;gap:10px;flex-wrap:wrap}

/* held */
.held{padding-top:28px}
.held-blok{background:var(--perzik-licht);border-radius:28px;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;min-height:460px}
.held-tekst{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.held h1{margin-bottom:22px}
.held p{font-size:1.12rem;color:var(--zacht);max-width:28em;margin-bottom:30px}
.hangers{display:flex;justify-content:center;align-items:flex-start;gap:24px}
.hanger{display:flex;flex-direction:column;align-items:center;transform-origin:top center;animation:zwaai 3.2s ease-in-out 1 both}
.hanger:nth-child(2){animation-delay:.15s;margin-top:-30px}
.hanger:nth-child(3){animation-delay:.3s;margin-top:20px}
@keyframes zwaai{0%{transform:rotate(9deg)}30%{transform:rotate(-6deg)}55%{transform:rotate(3deg)}80%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.hanger{animation:none}}
.touw{width:2px;height:150px;background:var(--inkt);opacity:.35}
.label{width:128px;height:184px;border-radius:64px 64px 22px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:26px;color:#fff;position:relative;box-shadow:0 24px 40px -24px rgba(38,56,58,.5);text-decoration:none}
.label::before{content:"";position:absolute;top:16px;width:14px;height:14px;border-radius:50%;background:var(--perzik-licht)}
.label b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;font-weight:700;text-align:center;line-height:1.1;padding:0 10px}
.label small{font-size:.76rem;opacity:.85;margin-top:2px}
.voordelen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:28px}
.voordeel{display:flex;gap:14px;align-items:center;font-weight:500}
.voordeel i{width:12px;height:12px;border-radius:50%;background:var(--petrol);box-shadow:0 0 0 7px var(--petrol-licht);margin:0 6px;flex:none}

section{padding-top:96px}
.kopje{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.kopje p{color:var(--zacht);max-width:34em;margin-top:10px}
.lijnlink{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* categorie */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cat{border-radius:24px;padding:32px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;transition:transform .2s}
.cat:hover{transform:translateY(-3px)}
.cat h3{font-size:1.7rem;margin-bottom:8px}
.cat p{color:var(--zacht);max-width:22em}
.cat .lijnlink{align-self:flex-start;margin-top:24px}
.c1{background:var(--perzik-licht)}.c2{background:var(--petrol-licht)}.c3{background:var(--roos-licht)}

/* producten */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filter{border:1.5px solid var(--lijn);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer;color:var(--inkt)}
a.filter{text-decoration:none;display:inline-block}
.filter[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.prod{display:flex;flex-direction:column}
.prod a.beeld{display:grid;place-items:center;aspect-ratio:4/5;border-radius:20px;margin-bottom:14px;position:relative;text-decoration:none;overflow:hidden}
.prod .beeld img{width:100%;height:100%;object-fit:cover}
.prod .tag{position:absolute;top:14px;left:14px;background:#fff;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px}
.prod .merk{font-size:.85rem;color:var(--zacht)}
.prod h3{font-family:"Figtree",sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:0;line-height:1.3}
.prod h3 a{text-decoration:none}
.prod .geur{font-size:.88rem;color:var(--zacht);margin-top:2px}
.prod .rij{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;gap:8px}
.prijs{font-weight:600;font-size:1.05rem}
.klein-knop{border:1.5px solid var(--inkt);background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;color:var(--inkt);white-space:nowrap}
.klein-knop:hover{background:var(--inkt);color:var(--wit)}
.klein-knop[disabled]{opacity:.4;cursor:not-allowed;background:transparent;color:var(--inkt)}

/* productpagina */
.kruimel{font-size:.88rem;color:var(--zacht);padding:24px 0 20px}
.kruimel a{color:var(--zacht)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.product .groot-beeld{border-radius:24px;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
.product .groot-beeld img{width:100%;height:100%;object-fit:cover}
.product h1{font-size:clamp(2rem,4vw,3.3rem);margin:6px 0 14px}
.product .prijs{font-size:1.7rem;margin-bottom:14px;display:block}
.product .kort{color:var(--zacht);font-size:1.08rem;margin-bottom:22px;max-width:34em}
.voorraadregel{font-size:.92rem;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.voorraadregel i{width:9px;height:9px;border-radius:50%;background:var(--open,#2fa37a)}
.voorraadregel.op i{background:var(--roos)}
.aantal{display:inline-flex;align-items:center;border:1.5px solid var(--lijn);border-radius:999px;background:#fff;height:52px}
.aantal button{width:44px;height:100%;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--inkt);border-radius:999px}
.aantal input{width:40px;text-align:center;border:0;font:inherit;font-weight:600;background:none;color:var(--inkt);-moz-appearance:textfield}
.aantal input::-webkit-inner-spin-button{-webkit-appearance:none}
.koop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.feiten{border-top:1px solid var(--lijn);font-size:.94rem}
.feiten div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--lijn)}
.feiten span:first-child{color:var(--zacht)}
.uitleg{max-width:760px;margin-top:72px}
.uitleg h3{margin:34px 0 10px}
.uitleg p,.uitleg li{color:#3c4c4d}
.uitleg ul{padding-left:20px;display:grid;gap:6px}

/* mandje */
.scherm{position:fixed;inset:0;background:rgba(38,56,58,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.scherm.open{opacity:1;pointer-events:auto}
.mand{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--wit);z-index:41;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.mand.open{transform:none}
@media (prefers-reduced-motion:reduce){.mand,.scherm{transition:none}}
.mand-kop{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--lijn)}
.mand-kop h2{font-size:1.5rem}
.sluit{width:40px;height:40px;border-radius:50%;border:1px solid var(--lijn);background:#fff;cursor:pointer;font-size:1.2rem;color:var(--inkt)}
.mand-lijst{flex:1;overflow:auto;padding:8px 24px}
.regel{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--lijn);align-items:center}
.regel .mini{width:64px;height:80px;border-radius:12px;display:grid;place-items:center;overflow:hidden}
.regel .mini img{width:100%;height:100%;object-fit:cover}
.regel b{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.regel small{color:var(--zacht)}
.regel .aantal{height:36px;margin-top:6px}
.regel .aantal button{width:32px}
.regel .aantal input{width:28px}
.regel .weg{background:none;border:0;color:var(--zacht);font:inherit;font-size:.82rem;text-decoration:underline;cursor:pointer;display:block;margin-top:6px}
.mand-voet{padding:20px 24px 28px;border-top:1px solid var(--lijn);display:grid;gap:10px}
.som{display:flex;justify-content:space-between}
.som.totaal{font-weight:700;font-size:1.15rem}
.som small{color:var(--zacht)}
.leeg{padding:40px 0;color:var(--zacht);text-align:center}
.melding{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--inkt);color:var(--wit);padding:12px 20px;border-radius:999px;font-weight:500;z-index:50;transition:transform .25s}
.melding.aan{transform:translate(-50%,0)}

/* formulier */
.afrekenen{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start;padding-top:40px}
.veld{display:grid;gap:6px;margin-bottom:16px}
.veld label{font-weight:600;font-size:.94rem}
.veld input,.veld textarea{font:inherit;color:var(--inkt);background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--petrol);border-color:transparent}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.overzicht{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:24px;position:sticky;top:96px}
.overzicht .regel{grid-template-columns:48px 1fr auto}
.overzicht .regel .mini{width:48px;height:60px}
.fout{color:var(--roos);font-weight:500;margin-top:10px}
.akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;margin:8px 0 20px}
.akkoord input{margin-top:5px;width:18px;height:18px;accent-color:var(--inkt)}

/* tekstpagina */
.tekstpagina{padding-top:48px}
.tekstpagina h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:24px}
.tekstpagina h2{font-size:1.5rem;margin:36px 0 10px}
.tekstpagina p,.tekstpagina li{color:#3c4c4d;margin-bottom:10px}
.tekstpagina ol,.tekstpagina ul{padding-left:22px;margin-bottom:12px}
.tekstpagina table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:.94rem}
.tekstpagina th,.tekstpagina td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--lijn);vertical-align:top}

/* vragen */
.vragen{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
details{border-bottom:1px solid var(--lijn);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--petrol)}
details[open] summary::after{content:"\2013"}
details p{color:var(--zacht);padding-top:10px;max-width:40em}

/* cadeau */
.cadeau{background:var(--roos);color:var(--wit);border-radius:28px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.cadeau-tekst{padding:64px 56px}
.cadeau h2{font-size:clamp(2rem,3.8vw,3.1rem);letter-spacing:-.04em;line-height:1;margin-bottom:18px}
.cadeau p{opacity:.9;max-width:26em;margin-bottom:28px}
.cadeau .knop{border-color:#fff;background:#fff;color:var(--roos)}
.cadeau .knop:hover{background:var(--perzik);border-color:var(--perzik);color:var(--inkt)}
.doos{display:grid;place-items:center;background:#a46a69;padding:32px}
.doos svg{width:70%;max-width:300px}

/* voet */
.voet{margin-top:110px;background:var(--inkt);color:#cfd8d5;padding:64px 0 32px}
.voet .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.voet .logo{color:var(--wit);display:inline-block;margin-bottom:10px}
.voet h4{color:var(--wit);margin-bottom:12px;font-size:.95rem}
.voet ul{list-style:none;display:grid;gap:6px;font-size:.94rem}
.voet a{text-decoration:none}
.voet a:hover{color:var(--perzik)}
.voet .onder{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:20px;font-size:.84rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:980px){
  .menu{display:none;position:absolute;top:74px;left:0;right:0;background:var(--wit);flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--lijn)}
  .menu.open{display:flex}
  .menu a{display:block;padding:12px 0;font-size:1.05rem}
  .menuknop{display:block}
  .held-blok,.cadeau,.product,.afrekenen{grid-template-columns:1fr}
  .hangers{padding-bottom:40px}
  .held-tekst,.cadeau-tekst{padding:44px 28px}
  .prods{grid-template-columns:repeat(2,1fr)}
  .cats,.voordelen{grid-template-columns:1fr}
  .vragen{grid-template-columns:1fr;gap:12px}
  .voet .wrap{grid-template-columns:1fr 1fr}
  .product{gap:28px}
  .overzicht{position:static}
}
@media (max-width:560px){
  .wrap,.smal{width:calc(100% - 32px)}
  .label{width:92px;height:136px}
  .label b{font-size:.95rem}
  .touw{height:90px}
  .hangers{gap:14px}
  .prods{gap:22px 12px}
  .twee{grid-template-columns:1fr}
  .voet .wrap{grid-template-columns:1fr}
}
.prod .beeld svg{width:42%;height:auto}
.product .groot-beeld svg{width:46%;height:auto}
.melding:not(.aan){visibility:hidden}
.prod[hidden]{display:none}

.codeblok{border-top:1px solid var(--lijn);margin-top:18px;padding-top:16px}
.codeblok label{font-weight:600;font-size:.94rem;display:block;margin-bottom:8px}
.coderij{display:flex;gap:8px}
.coderij input{flex:1;min-width:0;font:inherit;text-transform:uppercase;background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:9px 14px;color:var(--inkt)}
.coderij input:focus{outline:2px solid var(--petrol);border-color:transparent}
.codemelding{font-size:.88rem;margin-top:8px;min-height:1.2em}
.codemelding.goed{color:#2f7d5f}.codemelding.fout{color:var(--roos)}
.som.korting span:last-child{color:#2f7d5f}
.verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb-blok{margin-top:110px;background:var(--petrol-licht)}
.nb-binnen{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:56px 0}
.nb-blok h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}
.nb-blok p{color:var(--zacht)}
.nb-form{display:flex;gap:10px;flex-wrap:wrap}
.nb-form input[type=email]{flex:1;min-width:200px;font:inherit;background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:13px 18px;color:var(--inkt)}
.nb-form input:focus{outline:2px solid var(--petrol);border-color:transparent}
.nb-melding{flex-basis:100%;font-size:.92rem;min-height:1.3em}
.nb-blok + .voet{margin-top:0}
.inloghint{color:var(--zacht);margin-bottom:28px}
.accform{max-width:440px}
.accbest{border:1px solid var(--lijn);border-radius:16px;padding:18px 20px;margin-bottom:12px;background:#fff;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.accbest small{color:var(--zacht)}
.status-label{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;margin-left:8px;background:var(--perzik-licht)}
.status-label.verzonden{background:var(--petrol-licht)}
.gevaar{margin-top:56px;border-top:1px solid var(--lijn);padding-top:28px}
.gevaar p{color:var(--zacht);margin-bottom:14px;max-width:36em}
.knop.rood{background:var(--roos);border-color:var(--roos)}
.contactform{margin-top:24px}
@media (max-width:980px){.nb-binnen{grid-template-columns:1fr;gap:18px}}

/* ---------- labels op producten ---------- */
.tags{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:1}
.prod .tags .tag,.tags .tag{position:static;display:inline-flex;align-items:center;gap:5px;background:#fff;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;color:var(--inkt)}
.tag-hardloper{background:var(--perzik)!important}
.tag-nieuw{background:var(--petrol)!important;color:#fff!important}
.tag-aanbieding{background:var(--roos)!important;color:#fff!important}
.tag-bijnaop{background:#fff!important;color:var(--roos)!important}
.tag-op{background:var(--inkt)!important;color:#fff!important}
.product .groot-beeld{position:relative}
.prijs s.oud{color:var(--zacht);font-weight:500;font-size:.82em;margin-right:4px}

/* ---------- sterren en reviews ---------- */
.sterren{color:#d8dcd9;letter-spacing:1px;font-size:.95rem;white-space:nowrap}
.sterren .vol{color:#E0A83E}
.sterren .half{background:linear-gradient(90deg,#E0A83E 50%,#d8dcd9 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sterren.groot{font-size:1.4rem}
.kaart-score{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.85rem;color:var(--zacht)}
.kop-score{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 10px;text-decoration:none;color:var(--zacht);font-size:.92rem}
.reviews{padding-top:72px}
.score-groot{display:flex;align-items:center;gap:10px}
.score-groot b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.6rem}
.score-groot > span:last-child{color:var(--zacht)}
.review-lijst{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.review{border:1px solid var(--lijn);border-radius:18px;padding:18px 20px;background:#fff}
.review p{margin:8px 0}
.review small,.grijs{color:var(--zacht)}
@media (max-width:760px){.review-lijst{grid-template-columns:1fr}}

/* ---------- foto's en voorraadmelding op productpagina ---------- */
.fotostrip{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.duim{width:72px;height:88px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--salie-licht);cursor:pointer}
.duim.aan{border-color:var(--inkt)}
.duim img{width:100%;height:100%;object-fit:cover}
.weerform{border:1px solid var(--lijn);border-radius:16px;padding:16px 18px;margin:18px 0;background:#fff}
.weerform p{margin:0 0 10px}
.weerform .coderij{display:flex;gap:8px}
.weerform input[type=email]{flex:1;font:inherit;padding:10px 14px;border:1px solid var(--lijn);border-radius:999px}
.weerform .codemelding{margin:8px 0 0}
.held-foto{border-radius:28px;overflow:hidden;aspect-ratio:4/3.4}
.held-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- balk bovenaan ---------- */
.balk{background:var(--inkt);color:#fff;text-align:center;font-size:.9rem;font-weight:500;padding:9px 44px;position:relative}
.balk a{color:#fff}
.balk-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;width:32px;height:32px}

/* ---------- popup ---------- */
.pop-achter{position:fixed;inset:0;background:rgba(38,56,58,.45);display:grid;place-items:center;padding:16px;z-index:200;opacity:0;transition:opacity .25s}
.pop-achter.open{opacity:1}
.pop{background:var(--wit);border-radius:24px;max-width:460px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(12px);transition:transform .25s}
.pop-achter.open .pop{transform:none}
.pop.met-foto{max-width:720px;display:grid;grid-template-columns:1fr 1.1fr}
.pop-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pop-binnen{padding:30px 28px 26px;position:relative}
.pop-binnen h2{font-size:1.7rem;margin:0 24px 10px 0;line-height:1.1}
.pop-binnen p{margin:0 0 12px}
.pop-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--salie-licht);font-size:1.3rem;cursor:pointer;color:var(--inkt)}
.pop-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pop-form input{font:inherit;padding:12px 16px;border:1px solid var(--lijn);border-radius:999px;background:#fff}
.pop-melding{margin-top:10px!important;font-weight:500}
.pop-klein{color:var(--zacht);font-size:.82rem}
.pop-code{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px dashed var(--salie);border-radius:14px;padding:10px 12px 10px 16px;margin:6px 0 14px}
.pop-code b{font-size:1.2rem;letter-spacing:.12em}
.pop .knop{width:100%;text-align:center}
@media (max-width:640px){.pop.met-foto{grid-template-columns:1fr}.pop-foto{max-height:180px}}

/* ---------- review geven ---------- */
.rv-blok{border:1px solid var(--lijn);border-radius:20px;padding:22px;margin-bottom:16px;background:#fff}
.rv-kop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rv-kop h2{font-size:1.3rem;margin:0}
.rv-kop .mini{width:48px;height:56px;border-radius:12px;overflow:hidden;display:block}
.rv-kop .mini img{width:100%;height:100%;object-fit:cover}
.kies-sterren{display:flex;gap:4px;margin-bottom:14px}
.kies-sterren button{font-size:2rem;line-height:1;background:none;border:0;cursor:pointer;color:#d8dcd9;padding:2px}
.kies-sterren button.vol{color:#E0A83E}
.rv-blok textarea,.rv-blok input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--lijn);border-radius:14px}
.rv-dank{font-weight:600;color:var(--petrol)}
.tags .tag svg,.prod .beeld .tags svg,.product .groot-beeld .tags svg{width:14px!important;height:14px!important;flex:none}
.tags .tag{white-space:nowrap}

/* ---------- binnenkort (pre-sale) ---------- */
body.bk{min-height:100vh;display:flex;flex-direction:column;background:var(--wit)}
.bk-main{flex:1;display:grid;place-items:center;padding:0 20px 40px}
.bk-blok{max-width:560px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.bk-hangers{display:flex;align-items:flex-start;gap:22px;margin-bottom:28px}
.bk-logo{font-size:1.5rem;margin:0 0 18px}
.bk-logo span{color:var(--petrol)}
.bk-blok h1{font-size:clamp(3rem,9vw,5.2rem);margin:0 0 16px}
.bk-tekst{color:var(--zacht);font-size:1.1rem;line-height:1.55;margin:0 0 28px}
.bk-form{width:100%;justify-content:center}
.bk-code{margin-top:28px;width:100%}
.bk-code summary{cursor:pointer;color:var(--zacht);font-weight:500;list-style:none}
.bk-code summary::-webkit-details-marker{display:none}
.bk-code summary:hover{color:var(--inkt)}
.bk-code .coderij{display:flex;gap:8px;justify-content:center;margin-top:14px}
.bk-code input{font:inherit;padding:12px 16px;border:1px solid var(--lijn);border-radius:999px;background:#fff;text-transform:uppercase;letter-spacing:.06em;min-width:0;flex:1;max-width:260px}
.bk-voet{display:flex;gap:20px;justify-content:center;padding:22px;font-size:.88rem;color:var(--zacht)}
.bk-voet a{color:var(--zacht)}

/* ---------- geurtest ---------- */
.tag-voorjou{background:var(--inkt)!important;color:#fff!important}
.geurtest-label{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol)}
.geurtest-blok{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--petrol-licht);border-radius:28px;padding:40px 44px;text-decoration:none;color:inherit}
.geurtest-blok h2{margin:6px 0 8px}
.geurtest-blok p{margin:0;color:var(--zacht);max-width:36em}
.gt-start,.gt-vraag{text-align:center;padding:24px 0 40px}
.gt-start h1{font-size:clamp(2.4rem,6vw,4rem);margin:12px 0 14px}
.gt-start p{color:var(--zacht);font-size:1.1rem;max-width:34em;margin:0 auto 26px;line-height:1.55}
.gt-start .knoppen{justify-content:center}
.gt-balk{height:6px;background:var(--salie-licht);border-radius:99px;overflow:hidden;margin-bottom:14px}
.gt-balk i{display:block;height:100%;background:var(--petrol);transition:width .3s}
.gt-teller{color:var(--zacht);font-size:.9rem;margin:0 0 8px}
.gt-vraag h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 28px}
.gt-keuzes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gt-keus{font:inherit;font-size:1.05rem;font-weight:500;padding:24px 20px;border-radius:20px;border:1.5px solid var(--lijn);background:#fff;cursor:pointer;color:var(--inkt);min-height:84px;transition:border-color .15s,transform .15s}
.gt-keus:hover,.gt-keus:focus-visible{border-color:var(--inkt);transform:translateY(-2px)}
.gt-terug{background:none;border:0;color:var(--zacht);font:inherit;cursor:pointer;margin-top:22px;text-decoration:underline}
.gt-fam{border-radius:28px;padding:40px 44px;text-align:center}
.gt-fam h1{font-size:clamp(3rem,8vw,5rem);margin:8px 0 10px}
.gt-fam p{max-width:34em;margin:0 auto;font-size:1.1rem;line-height:1.55}
.gt-top{grid-template-columns:repeat(3,1fr)}
.gt-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1.5px solid var(--inkt);border-radius:24px;padding:26px 30px;margin-top:32px;background:#fff}
.gt-cta h3{margin:0 0 6px;font-family:Figtree,sans-serif;letter-spacing:0}
.gt-cta p{margin:0 0 6px;color:var(--zacht)}
.gt-code{font-family:"Bricolage Grotesque",sans-serif;font-size:1.8rem;font-weight:800;letter-spacing:.06em;color:var(--inkt)!important;margin:8px 0!important}
.gt-melding{background:var(--perzik-licht);border-radius:16px;padding:14px 18px;margin:0 0 24px}
@media (max-width:640px){.gt-keuzes,.gt-top{grid-template-columns:1fr}.geurtest-blok,.gt-cta{flex-direction:column;align-items:flex-start;padding:28px}}

/* ---------- keuzeknoppen ---------- */
.bedragen{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin:0 0 8px}
.bedragen legend{font-weight:600;font-size:.94rem;margin-bottom:8px}
.kies{display:inline-flex;cursor:pointer}
.kies input{position:absolute;opacity:0;pointer-events:none}
.kies span{display:block;padding:11px 20px;border:1.5px solid var(--lijn);border-radius:999px;background:#fff;font-weight:500}
.kies input:checked+span{border-color:var(--inkt);background:var(--inkt);color:#fff}
.kies input:focus-visible+span{outline:2px solid var(--petrol);outline-offset:2px}
.puntenblok{border:1px solid var(--lijn);border-radius:16px;padding:14px 16px}
.puntenblok legend{font-weight:600;padding:0 6px}
.puntenblok .kies{display:flex;margin-bottom:6px}
.puntenblok .kies span{border-radius:12px;width:100%;padding:9px 14px}

/* ---------- cadeaubon ---------- */
.cb{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.cb-kaart{position:sticky;top:110px;aspect-ratio:1.6;border-radius:24px;background:var(--inkt);color:var(--wit);padding:30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 50px rgba(38,56,58,.18)}
.cb-kaart .logo{color:var(--wit);font-size:1.4rem}
.cb-kaart .logo span{color:var(--perzik)}
.cb-kaart b{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(2.6rem,6vw,3.6rem);letter-spacing:-.03em;line-height:1}
.cb-kaart small{opacity:.7;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
@media (max-width:760px){.cb{grid-template-columns:1fr;gap:24px}.cb-kaart{position:static}}

/* ---------- abonnement ---------- */
.abo-kop{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-bottom:40px}
.abo-stappen{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
.abo-stappen li{background:var(--perzik-licht);border-radius:18px;padding:16px 20px 16px 58px;position:relative;counter-increment:s}
.abo-stappen li::before{content:counter(s);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.abo-stappen b{display:block}
.abo-form{max-width:820px}
.abo-form h2{font-size:1.5rem;margin:30px 0 14px}
.abo-geuren{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.abo-geur{cursor:pointer}
.abo-geur input{position:absolute;opacity:0;pointer-events:none}
.abo-geur span{display:block;height:100%;padding:14px 16px;border:1.5px solid var(--lijn);border-radius:16px;background:#fff}
.abo-geur span i{display:inline-block;width:12px;height:16px;border-radius:6px 6px 3px 3px;margin-right:8px;vertical-align:-2px}
.abo-geur small{display:block;color:var(--zacht);margin-top:2px}
.abo-geur input:checked+span{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.abo-geur input:disabled+span{opacity:.45;cursor:not-allowed}
.abo-geur input:focus-visible+span{outline:2px solid var(--petrol);outline-offset:2px}
.abo-geur.verrassing{grid-column:1/-1}
.abo-geur.verrassing span{background:var(--petrol-licht)}
.abo-som{display:grid;gap:8px;border-top:1px solid var(--lijn);padding:18px 0;margin-top:10px}
.abo-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.abo-acties select{font:inherit;padding:8px 10px;border:1px solid var(--lijn);border-radius:10px;background:#fff}
@media (max-width:760px){.abo-kop{grid-template-columns:1fr}.abo-geuren{grid-template-columns:1fr 1fr}}

/* ---------- account: punten en geurfamilie ---------- */
.accblokken{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:36px}
.accblok{border:1px solid var(--lijn);border-radius:22px;padding:24px 26px;background:#fff}
.accblok h2{font-size:1.4rem;margin:0 0 6px}
.punten-groot{margin:0 0 6px}
.punten-groot b{font-family:"Bricolage Grotesque",sans-serif;font-size:2.4rem;letter-spacing:-.03em}
.pbalk{position:relative;height:120px;margin:10px 6px 4px}
.pbalk-lijn{position:absolute;left:0;right:0;top:22px;height:10px;border-radius:99px;background:var(--salie-licht);overflow:hidden}
.pbalk-lijn i{display:block;height:100%;background:linear-gradient(90deg,var(--petrol),var(--perzik));border-radius:99px}
.pbalk-stip{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
.pbalk-beeld{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 2px var(--lijn)}
.pbalk-beeld img{width:100%;height:100%;object-fit:cover}
.pbalk-stip.gehaald .pbalk-beeld{box-shadow:0 0 0 3px var(--petrol)}
.pbalk-stip b{font-size:.9rem;margin-top:6px}
.pbalk-stip small{font-size:.76rem;color:var(--zacht);line-height:1.2}
.plog{list-style:none;padding:0;margin:8px 0 0}
.plog li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--lijn);font-size:.92rem}
.accblok details summary{cursor:pointer;color:var(--zacht);font-size:.92rem;margin-top:8px}
.abo-rij{grid-template-columns:1.2fr 1fr 1.4fr!important;align-items:center}
@media (max-width:760px){.accblokken{grid-template-columns:1fr}.abo-rij{grid-template-columns:1fr!important}}
.gt-cta .knop,.geurtest-blok .knop{white-space:nowrap;flex:none}
.veld select{font:inherit;color:var(--inkt);background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}

/* ---------- geurtest: iconen en uitslag ---------- */
.gt-iconen{display:flex;justify-content:center;gap:12px;margin-bottom:22px}
.gt-iconen span{width:62px;height:62px;border-radius:18px;display:grid;place-items:center}
.gt-keuzes{grid-template-columns:repeat(2,1fr)}
.gt-keus{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px}
.gt-keus .gt-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;transition:transform .2s}
.gt-keus:hover .gt-ic{transform:scale(1.06) rotate(-3deg)}
.gt-keus.gekozen{border-color:var(--inkt);background:var(--inkt);color:#fff}
.gt-vraag{animation:gtIn .35s ease}
.gt-vraag.terug{animation:gtTerug .35s ease}
@keyframes gtIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes gtTerug{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gt-vraag,.gt-vraag.terug{animation:none}.gt-keus .gt-ic{transition:none}}
.gt-creator{margin-top:18px;text-align:left;background:#fff;border:1.5px solid var(--inkt);border-radius:18px;padding:16px 18px}
.gt-creator label{font-weight:600;display:block;margin-bottom:8px}
.gt-creator .coderij{display:flex;gap:8px}
.gt-creator input{flex:1;font:inherit;padding:12px 16px;border:1px solid var(--lijn);border-radius:999px;min-width:0}
.gt-duo{grid-template-columns:1fr 1fr;margin-top:28px;max-width:620px;margin-left:auto;margin-right:auto}
.gt-duo .prod,.gt-top .prod{position:relative}
.gt-labelkaart{position:absolute;top:12px;left:12px;z-index:2;background:var(--inkt);color:#fff;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px}
.gt-tips{margin-top:28px;display:grid;gap:10px}
.gt-tips p{background:var(--perzik-licht);border-radius:16px;padding:14px 18px;margin:0}
@media (max-width:640px){.gt-keuzes{grid-template-columns:1fr}.gt-duo{grid-template-columns:1fr 1fr;gap:12px}}

/* ---------- afrekenen: cadeau ---------- */
.cadeaublok{border:1px solid var(--lijn);border-radius:16px;padding:14px 16px 4px;margin:6px 0 18px;background:#fff}
.cadeaublok .akkoord{margin-bottom:10px}
.gt-creator input{text-transform:none;letter-spacing:normal}