:root{--petrol:#382b27;--petrol2:#6b5149;--sea:#f3eeec;--line:#e2d8d5;--gold:#b08d57;--ink:#5f5f5f;--muted:#8c8c8c;--err:#a3342b;--sale:#a3342b;--head:#6e6e6e;--beige:#e7dfdd;--bar:#333;--knop:#ded3ce;--knop2:#d2c4be}
*{box-sizing:border-box}
html,body{margin:0;background:var(--beige);color:var(--ink);font-family:Karla,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}
.ubar{background:var(--bar);color:#fff;text-align:center;font-size:15px;padding:8px 12px;min-height:38px;overflow:hidden}
.ubar span{display:inline-block;animation:ufade .6s}@keyframes ufade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ubar a{color:#fff}
a{color:var(--petrol2)}
.wrap{max-width:1140px;margin:0 auto;padding:16px 24px 48px;background:#fff;min-height:100vh}
.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.top h1{font-family:Lora,Georgia,serif;font-weight:normal;color:var(--petrol);font-size:25px;margin:0;cursor:pointer;flex:1;min-width:160px}
.top h1 small{font-size:17px;color:var(--muted);display:inline;font-family:Lora,Georgia,serif}
.top h1 small::before{content:"| ";color:var(--line)}
@media (max-width:700px){.top h1 small{display:block;font-size:14px}.top h1 small::before{content:""}}
.search{flex:1;min-width:150px;max-width:320px;font:inherit;padding:7px 11px;border:1px solid var(--line);border-radius:999px}
.cartbtn{background:var(--petrol);color:#fff;border:0;border-radius:10px;padding:9px 14px;font:inherit;cursor:pointer;white-space:nowrap}
.cartbtn b{background:var(--gold);color:#fff;border-radius:10px;padding:0 7px;margin-left:6px}
.cats{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:5px 12px;font:inherit;font-size:14px;cursor:pointer;color:var(--petrol)}
.chip.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.crumbs{font-size:14px;color:var(--muted);margin:4px 0 10px}
.crumbs a{cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card:hover{box-shadow:0 0 0 2px var(--sea)}
.card .im{aspect-ratio:1/1;background:#f4f8f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:8px 10px 10px;font-size:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .pr{margin-top:auto;font-weight:bold;color:var(--petrol)}
.old{text-decoration:line-through;color:var(--muted);font-weight:normal;margin-right:6px}
.sale{color:var(--sale)}
.more{display:block;margin:18px auto;border:1px solid var(--petrol);background:#fff;color:var(--petrol);border-radius:10px;padding:9px 18px;font:inherit;cursor:pointer}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gal .main{aspect-ratio:1/1;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f4f8f8;display:flex;align-items:center;justify-content:center}
.gal .main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.thumbs img{width:62px;height:62px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.thumbs img.on{border-color:var(--gold)}
h2{font-family:Lora,Georgia,serif;font-weight:normal;color:var(--head);font-size:26px;margin:0 0 8px}
h3{font-family:Lora,Georgia,serif;font-weight:normal;color:var(--head);font-size:20px;margin:18px 0 8px}
.price{font-size:22px;font-weight:bold;color:var(--petrol);margin:8px 0}
.text{white-space:pre-line;line-height:1.55;margin-top:14px}
.vars{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.v{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font:inherit;cursor:pointer;color:var(--petrol)}
.v.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.v.out{color:var(--muted);text-decoration:line-through}.v.out.on{background:var(--muted);color:#fff;border-color:var(--muted)}
.heart{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;color:var(--petrol)}
.heart.on{color:var(--sale);border-color:var(--sale)}
.badge{display:inline-block;font-size:12px;background:#eee;color:var(--muted);border-radius:8px;padding:1px 7px}
.wl{border:1px solid var(--line);background:#fff;color:var(--petrol);border-radius:10px;padding:9px 12px;font:inherit;cursor:pointer;white-space:nowrap}
.notify{border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0;background:#fbfaf5}
.notify .row{display:flex;gap:8px}.notify input{flex:1}
.btn{display:inline-block;background:var(--petrol);color:#fff;border:0;border-radius:10px;padding:11px 18px;font:inherit;font-weight:bold;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}
.btn.light{background:#fff;color:var(--petrol);border:1px solid var(--petrol)}
.qty{width:64px;font:inherit;padding:9px;border:1px solid var(--line);border-radius:10px;text-align:center}
.muted{color:var(--muted);font-size:14px}
.err{color:var(--err);background:#fbeeec;border-radius:10px;padding:10px 12px;margin:12px 0}
.ok{background:var(--sea);border-radius:10px;padding:10px 12px;margin:12px 0}
table.c{width:100%;border-collapse:collapse}
table.c td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
table.c td.n{text-align:right;white-space:nowrap}
table.c img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.x{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}
.sum{border-left:3px solid var(--gold);padding:8px 12px;margin:14px 0;background:#fbfaf5}
.sum div{display:flex;justify-content:space-between;gap:10px}
label{display:block;font-size:14px;color:var(--muted);margin:10px 0 4px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;cursor:pointer;color:var(--ink);font-size:15px}
.opt.on{border-color:var(--petrol2);box-shadow:0 0 0 2px var(--sea)}
.opt input{margin-top:3px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:var(--ink);font-size:15px}
.check input{width:20px;height:20px;margin-top:2px;flex:none}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.done{border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;max-width:640px;margin:20px auto}
.coupon{display:flex;gap:8px;margin-top:8px}
.coupon input{flex:1}
@media (max-width:700px){.prod{grid-template-columns:1fr}.two{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr);gap:10px}
.top h1{font-size:21px;order:1;min-width:0;flex:1 1 100%}.top h1 small{font-size:13px;display:inline;margin-left:6px}.wl{order:2}.cartbtn{order:3}.menubtn{order:4}.search{order:5;flex-basis:100%}
.cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-right:-16px}.chip{white-space:nowrap;flex:none}
.card .tx{padding:6px 8px 8px;font-size:13px}table.c td{padding:6px 3px}table.c img{width:40px;height:40px}}
.top{position:sticky;top:0;background:#fff;z-index:5;padding:6px 0}
/* pagina's (zoals de vroegere site): menu, tegels met foto, uitleg, onderverdeling */
.nav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.nav a{color:var(--petrol);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:15px;cursor:pointer;font-family:Montserrat,Arial,sans-serif}
.nav a.on,.nav a:hover{background:var(--sea)}
.snav{display:flex;gap:2px;flex-wrap:wrap;margin:2px 0 8px}
.snav a{color:var(--petrol);text-decoration:none;padding:7px 12px;border-radius:8px;font-size:17px;font-family:Lora,Georgia,serif;cursor:pointer}
.snav a.on,.snav a:hover{background:var(--sea)}
.snav .pijl{font-size:11px;color:var(--muted)}
.snav a.shop{background:var(--petrol);color:#fff;font-weight:600;margin:0 4px}
.snav a.shop:hover{background:#2f2a26;color:#fff}
.hero{position:relative;margin:2px -24px 20px;overflow:hidden}
.hero img{width:100%;height:clamp(220px,36vw,420px);object-fit:cover;display:block}
.hero .ht{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 16px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero .ht b{font-family:Lora,Georgia,serif;font-weight:normal;font-size:clamp(34px,7vw,74px);line-height:1.05}
.hero .ht span{margin-top:8px;font-size:clamp(14px,1.9vw,20px)}
@media (max-width:700px){.hero{margin:2px -14px 16px}}
.menubtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font:inherit;cursor:pointer;color:var(--petrol)}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:flex;justify-content:flex-end}
.drawer>div{background:#fff;width:min(340px,88vw);height:100%;overflow:auto;padding:16px}
.drawer a{display:block;color:var(--petrol);text-decoration:none;padding:7px 4px}
.drawer .sub a{padding-left:18px;font-size:15px;color:var(--ink)}
.page p{margin:0 0 12px;line-height:1.65}.page a{color:var(--petrol2)}
.page h2{margin-top:22px}.page h2:first-child{margin-top:4px}
.page ul{margin:0 0 12px 18px;padding:0}.page li{margin:3px 0;line-height:1.5}
.page figure{margin:14px 0;text-align:center}.page figure img{max-width:min(100%,340px);max-height:240px;width:auto;height:auto;border-radius:12px;display:inline-block;object-fit:contain}
.btn{background:var(--knop);color:var(--petrol);border-radius:999px;padding:12px 26px;font-weight:600;letter-spacing:.2px}
.btn:hover{background:var(--knop2)}
.kols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin:26px 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.kols .kol{display:flex;flex-direction:column;align-items:center;gap:12px}
.kols .kol p{margin:0;line-height:1.65}
.kols .kol img{width:100%;max-width:230px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.kols .kol .btn{align-self:center}
.fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0 20px;justify-items:center}
.fotos img{width:100%;max-width:300px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.fintro{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.fintro p{margin:0 0 10px;color:var(--ink)}
.fintro .fcur{font-style:italic;color:var(--petrol2)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 30px;margin:18px 0}
.fcols h4{font-family:Lora,Georgia,serif;font-weight:normal;color:var(--head);font-size:17px;margin:0 0 10px}
.fcols a,.fcols span{display:block;margin:5px 0;font-size:15px;color:var(--petrol2);text-decoration:none}
.fcols a:hover{text-decoration:underline}
.fbanner{margin:10px 0 18px;text-align:center}
.fbanner img{width:100%;max-width:760px;border-radius:12px;display:inline-block}
.recensies{margin:28px 0 6px;padding-top:22px;border-top:1px solid var(--line)}
.recensies p{font-style:italic;color:var(--ink);margin:0 0 14px}
figure.recfoto{margin:14px 0;text-align:center}
figure.recfoto img{max-width:100%;width:auto;max-height:none;border-radius:10px;border:1px solid var(--line);background:#fff}
.rec{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0;background:#fff;line-height:1.6;text-align:left}
.rec .wie{color:#777;font-size:14px;margin-top:6px}
.rec p{margin:0;font-style:italic}
.sterq{text-align:center;margin:18px auto;max-width:620px}
.sterq .st{color:#d9a441;letter-spacing:3px;font-size:16px}
.sterq p{font-style:italic;margin:6px 0 2px;font-size:17px}
.sterq .wie{color:#777;font-size:14px}
.sectie{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:22px;align-items:start;margin:22px 0;text-align:left}
.sectie .sfoto{display:flex;flex-direction:column;gap:10px}
.sectie .sfoto img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block}
.sectie .sfoto img.breed{aspect-ratio:auto;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line)}
.sectie .stekst h3{margin:0 0 8px}
.sectie .stekst p{margin:0 0 10px;line-height:1.65}
.sectie.omg{grid-template-columns:1fr minmax(150px,230px)}
.sectie.omg .sfoto{order:2}
.sectie.breedfoto,.sectie.omg.breedfoto{grid-template-columns:1fr}
.sectie.breedfoto .sfoto,.sectie.omg.breedfoto .sfoto{order:2}
.sectie.breedfoto .stekst,.sectie.omg.breedfoto .stekst{order:1}
.sectie.breedfoto .sfoto img.breed{max-width:min(100%,760px);margin:0 auto}
.sectie.omg .stekst{order:1}
.sectie .stekst ul{margin:0 0 8px 18px;padding:0}
.agenda{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sectie.metagenda{grid-template-columns:minmax(140px,210px) 1fr minmax(240px,300px)}
.sagenda{text-align:left}
.sagenda .agbij{margin:0 0 8px;font-size:14px;line-height:1.45}
@media (max-width:900px){.sectie.metagenda{grid-template-columns:1fr}.sagenda{margin-top:8px}}
.bkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin:20px 0 26px;text-align:left}
.bkaart img{width:100%;max-height:330px;object-fit:contain;border-radius:10px;display:block;background:var(--sea)}
.bkaart p{margin:10px 0 0;line-height:1.6}
@media (max-width:700px){.sectie,.sectie.omg{grid-template-columns:1fr;gap:12px}.sectie .sfoto{flex-direction:row;justify-content:center;order:0}.sectie .stekst{order:1}.sectie .sfoto img{max-width:150px}.sectie.breedfoto .sfoto img.breed{max-width:100%}}
@supports (grid-template-rows: subgrid){
.kols{grid-auto-rows:auto}
.kols .kol{display:grid;grid-template-rows:subgrid;grid-row:span 3;justify-items:center;gap:14px}
}
.page.mid{text-align:center}
.page.mid ul{display:inline-block;text-align:left}
.page.mid .kols{text-align:center}
@media (max-width:700px){.page figure img{max-height:180px}}
.page .btn,.page a.btn{margin:6px 6px 12px 0;background:#686463;color:#fff;font-family:Montserrat,Arial,sans-serif;font-weight:600;border-radius:8px}.page a.btn:hover{background:var(--petrol)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin:14px 0 22px}
.tile{display:flex;flex-direction:column;gap:6px;text-align:center}
.tile .ti{display:block;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--sea)}
.tile .ti img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tile .ti:hover img{transform:scale(1.04)}
.tile.tboven h3{margin:0 0 8px;order:0}.tile.tboven .ti{order:1}.tile.tboven .cs{order:2}
.tile h3{margin:6px 0 0;font-size:19px}.tile h3 a{color:var(--head);text-decoration:none}.tile .cs{font-size:14px;color:var(--muted)}
.tile .tl a{display:block;color:var(--ink);text-decoration:none;padding:2px 0;font-style:italic}.tile .tl a:hover{color:var(--petrol2);text-decoration:underline}
.foot{margin-top:40px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;justify-content:center}
.foot a{color:var(--muted);text-decoration:none}
@media (max-width:700px){.wrap{padding:12px 14px 40px}.tiles{grid-template-columns:repeat(2,1fr);gap:12px}.tile h3{font-size:17px}.nav{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px}.nav a{white-space:nowrap}}

.embed{margin:18px 0 24px}
.zoekblok{display:flex;justify-content:center;margin:22px 0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}
.zoekblok input{padding:12px 20px;width:60%;max-width:300px;border:2px solid var(--petrol);border-radius:25px 0 0 25px;outline:none;font-size:16px;background:#fff;-webkit-appearance:none}
.zoekblok button{padding:12px 25px;background:var(--petrol);color:#fff;border:2px solid var(--petrol);border-radius:0 25px 25px 0;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease}
.zoekblok button:hover{background:#2a201d;border-color:#2a201d;padding-left:30px}
@media (max-width:600px){.zoekblok input{width:100%}}

.azlijst{margin:14px 0 24px}
.azres{column-width:210px;column-gap:26px}
.azgroep{break-inside:avoid;margin:0 0 16px}
.azgroep h3{margin:0 0 6px;font-size:22px;color:var(--head);font-weight:normal;border-bottom:1px solid var(--line);padding-bottom:4px}
.azgroep a{display:block;color:var(--ink);text-decoration:none;padding:3px 0;line-height:1.4}
.azgroep a:hover{color:var(--petrol2);text-decoration:underline}

.azknop{margin:10px 0 2px}

.vkop{margin:6px 0 14px;font-weight:normal;color:var(--head)}

.pauze{background:#f6efe9;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 12px;color:var(--petrol)}

.rec .rkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px}
.rec .rkop b{color:var(--petrol)}
.rec .rwan{color:var(--muted);font-size:13px;white-space:nowrap}
.rec p{font-style:normal}