/* sch.tdgdigital.com — "Wol van de heide." Caprasimo (koppen) + Kumbh Sans (tekst). Maten in rem; >1440 schaalt alles mee. */
@font-face{font-family:Caprasimo;src:url(/fonts/display.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Kumbh;src:url(/fonts/tekst.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --groen:#164c00;--groen-2:#2a6b12;--groen-licht:#cfe0b8;
  --wol:#f4efe6;--wol-2:#e8e0d0;--papier:#fbf9f4;
  --inkt:#1c2116;--inkt-2:#4a4f43;--nacht:#12160e;--nacht-2:#1b2340;
  --heide:#8d5a8f;--heide-licht:#d7b9d4;--stro:#d9b46a;
  --gutter:clamp(1rem,4vw,3rem);--wrap:min(100% - 2*var(--gutter), 92rem);
  --r:.9rem;
  --disp:Caprasimo,'Cooper Black',Georgia,serif;--tekst:Kumbh,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 1.0625rem/1.6 var(--tekst);overflow-x:clip}
::selection{background:var(--groen);color:#fff}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--groen);text-underline-offset:.18em}
a:hover{color:var(--groen-2)}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0 0 .5em;hyphens:manual;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.4rem}
p{margin:0 0 1em;hyphens:manual}
@media (max-width:480px){p,li{hyphens:auto;-webkit-hyphens:auto}.hero-lead{hyphens:manual;-webkit-hyphens:manual}}
:focus-visible{outline:3px solid var(--groen);outline-offset:3px;border-radius:4px}
.voel :focus-visible,.kudde :focus-visible,.lint :focus-visible,.nacht :focus-visible,.hero :focus-visible,.voet :focus-visible,.pfilm :focus-visible{outline-color:#f3e7c4}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:99;background:var(--groen);color:#fff;padding:.7rem 1rem;border-radius:.5rem}
.skip:focus{top:1rem}
.wrap{width:var(--wrap);margin-inline:auto}
.leeskolom{max-width:44rem}
button{font:inherit;color:inherit}

/* labels met herdersstaf */
.label{display:flex;align-items:center;gap:.55rem;font:700 .8rem/1 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--groen);margin:0 0 1.1rem}
.label .staf{width:.62rem;height:1.1rem;flex:0 0 auto}
.label-licht{color:var(--stro)}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.4rem;border-radius:999px;background:var(--groen);color:#fff;
  font:700 1rem/1.1 var(--tekst);text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .2s}
.knop:hover{background:var(--groen-2);color:#fff;transform:translateY(-1px)}
.knop-wol{background:var(--wol);color:var(--groen)}
.knop-wol:hover{background:#fff;color:var(--groen)}
.knop-groot{min-height:3.4rem;padding-inline:2rem;font-size:1.05rem}
.knop-tekst{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--groen);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;padding:.2rem .3rem}
.knop-licht{color:#f3e7c4}
.knop-licht:hover{color:#fff}

/* vachtrand: onregelmatige wolkrullen als bovenrand van een sectie */
.vachtrand{position:absolute;left:0;right:0;top:calc(-1 * clamp(1.1rem,2.4vw,2.2rem) + 1px);width:100%;height:clamp(1.1rem,2.4vw,2.2rem);pointer-events:none}
.sectie-wol{background:var(--wol);position:relative}

/* USP-balk + kop */
.usp{background:var(--groen);color:#eef3e6;font-size:.85rem}
.usp ul{list-style:none;margin:0 auto;padding:.5rem var(--gutter);display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap}
.usp li{display:flex;align-items:center;gap:.45rem}
.usp li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--stro)}
.usp-klok{display:none}
@media (max-width:760px){.usp ul{gap:.3rem 1rem;justify-content:flex-start;flex-wrap:nowrap;overflow:hidden}.usp li:not(:first-child){display:none}}
.kop{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.55rem var(--gutter);background:rgba(251,249,244,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,76,0,.12)}
.kop-logo img{width:3.6rem;height:auto}
.kop-nav ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0}
.kop-nav a{color:var(--inkt);font-weight:600;text-decoration:none;padding:.6rem 0;display:inline-block}
.kop-nav a:hover,.kop-nav a[aria-current]{color:var(--groen);box-shadow:inset 0 -2px var(--groen)}
.kop-zoek{margin-left:auto}
.kop-zoek input{width:15rem;min-height:2.75rem;border:1.5px solid #c9c0ae;border-radius:999px;padding:.5rem 1rem;font:inherit;font-size:.95rem;background:#fff}
.kop-mand{position:relative;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;color:var(--inkt);flex-shrink:0}
.kop-mand:hover{background:var(--wol)}
.mand-n{position:absolute;top:.1rem;right:0;min-width:1.25rem;height:1.25rem;border-radius:1rem;background:var(--groen);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;padding:0 .3rem}
.mand-n.tik{animation:tik .5s}
@keyframes tik{40%{transform:scale(1.45)}}
.menu-knop{display:none;width:2.9rem;height:2.9rem;border:0;background:transparent;cursor:pointer;flex-shrink:0;position:relative}
.menu-knop span:not(.sr){position:absolute;left:.7rem;right:.7rem;height:2px;background:var(--inkt);transition:transform .25s}
.menu-knop span:nth-child(1){top:1.15rem}.menu-knop span:nth-child(2){top:1.7rem}
.menu-knop[aria-expanded=true] span:nth-child(1){transform:translateY(.27rem) rotate(45deg)}
.menu-knop[aria-expanded=true] span:nth-child(2){transform:translateY(-.27rem) rotate(-45deg)}
.lade{position:fixed;inset:0;top:var(--kop-h,4.2rem);z-index:49;background:var(--papier);overflow-y:auto;padding:1.4rem var(--gutter) 3rem}
.lade ul{list-style:none;margin:0;padding:0}
.lade-hoofd a{display:block;font:400 2rem/1.25 var(--disp);color:var(--inkt);text-decoration:none;padding:.3rem 0}
.lade-kop{margin:1.6rem 0 .4rem;font-weight:700;color:var(--groen);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
.lade-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.lade-sub a{display:block;padding:.6rem 0;color:var(--inkt);font-weight:600;text-decoration:none}
.lade-bel{margin-top:1.6rem;line-height:2.2}
@media (max-width:1100px){.kop-nav{display:none}.menu-knop{display:block}.kop-zoek{margin-left:auto}.kop-zoek input{width:11rem}}
@media (max-width:600px){.kop-zoek{display:none}.kop-mand{margin-left:auto}.kop{gap:.6rem}.kop-logo img{width:3.1rem}}

/* HERO */
.hero{position:relative;min-height:min(100svh - 6.5rem,58rem);display:grid;align-items:end;color:#fff;overflow:hidden;background:#3a3a2c;isolation:isolate}
.hero-poster,.hero-poster img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film{opacity:0;transition:opacity 1.2s}
.hero-film.speelt{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,18,8,.25) 0%,rgba(14,18,8,0) 30%,rgba(14,18,8,.12) 55%,rgba(14,18,8,.78) 100%);z-index:1}
.hero-in{position:relative;z-index:2;padding:6rem 0 clamp(6.5rem,12vh,8.5rem)}
.hero-boven{font-weight:700;letter-spacing:.04em;font-size:.9rem;opacity:.92;margin-bottom:.8rem}
.hero-kop{font-size:clamp(3.6rem,11vw,10.5rem);line-height:.92;margin:0 0 1.4rem;text-shadow:0 2px 30px rgba(0,0,0,.25);max-width:12ch}
.hero-kop .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:op .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-kop .w:nth-child(2){animation-delay:.18s}.hero-kop .w:nth-child(3){animation-delay:.36s}
@keyframes op{to{opacity:1;transform:none}}
.hero-lead{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:34rem;line-height:1.5;margin-bottom:1.6rem}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin:0}
.hero-knoppen .knop-tekst{color:#fff}
.hero-onder{position:absolute;z-index:2;left:0;right:0;bottom:clamp(1.1rem,2.4vw,2.2rem);margin:0;padding:.65rem var(--gutter);font-size:.9rem;font-weight:600;background:rgba(18,22,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center}
.hero-onder:empty{display:none}
.hero-onder b{color:var(--stro)}
/* hanglabel: het bestverkochte product hangt als label aan een touwtje, zwaait zacht */
.hanglabel{position:absolute;z-index:3;right:clamp(1rem,5vw,5rem);top:0;width:12.5rem;display:block;color:var(--inkt);text-decoration:none;transform-origin:50% 0;animation:zwaai 5s ease-in-out infinite}
.hl-touw{display:block;width:2px;height:clamp(3rem,10vh,7rem);margin:0 auto;background:#e8dcc0}
.hanglabel>.hl-beeld,.hanglabel>.hl-tekst{background:var(--papier)}
.hl-gat{position:absolute;left:50%;top:calc(clamp(3rem,10vh,7rem) + .55rem);width:.7rem;height:.7rem;margin-left:-.35rem;border-radius:50%;background:#3a3a2c;box-shadow:inset 0 0 0 2px #cdbf9f;z-index:2}
.hl-beeld{display:block;border-radius:1.1rem 1.1rem 0 0;padding:1.6rem .8rem .2rem;clip-path:polygon(22% 0,78% 0,100% 12%,100% 100%,0 100%,0 12%)}
.hl-beeld img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.hl-tekst{display:block;padding:.2rem 1rem 1rem;border-radius:0 0 1rem 1rem;box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.hl-tekst small{display:block;color:var(--groen);font-weight:700;font-size:.75rem}
.hl-tekst small::before{content:"★★★★★ ";color:var(--stro)}
.hl-tekst b{display:block;font:400 1.1rem/1.15 var(--disp);margin:.2rem 0}
.hl-tekst span{font-weight:800}
.hanglabel:hover{animation-play-state:paused}
@keyframes zwaai{0%,100%{transform:rotate(2.2deg)}50%{transform:rotate(-2.2deg)}}
@media (max-width:900px){.hanglabel{width:9.5rem}.hl-tekst b{font-size:.95rem}.hl-tekst{padding:.1rem .7rem .8rem}}
@media (max-width:640px){.hanglabel{display:none}}
@media (max-width:640px){
  .hero{min-height:calc(100svh - 7rem);align-items:end}
  .hero-in{padding:4rem 0 4.6rem}
  .hero-kop{font-size:clamp(3.4rem,19vw,6rem);line-height:.95}
  .hero-kop .w{display:block}
  .hero-boven{font-size:.8rem}
  .hero-knoppen .knop{width:100%}
}
@media (max-height:520px) and (orientation:landscape){.hero{min-height:100svh}.hero-kop{font-size:clamp(2.6rem,11vh,4rem)}.hero-in{padding:3rem 0 3.6rem}.hero-lead{display:none}.hanglabel{width:8rem}.hl-touw{height:1.5rem}.hl-gat{top:2rem}}

/* sectiekoppen */
.sectiekop{max-width:46rem;margin-bottom:2rem}
.sectiekop p{color:var(--inkt-2);font-size:1.1rem}
.sectiekop-rij{max-width:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 1.5rem}
.sectiekop-rij .label{width:100%}
.sectiekop-rij h2{margin:0}

/* productkaarten */
.pk-grid,.pk-rij{list-style:none;margin:0;padding:0;display:grid;gap:2rem 1.4rem}
.pk-grid{grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))}
.pk-rij{grid-template-columns:repeat(4,minmax(0,1fr))}
.pk{position:relative;min-width:0}
.pk-a{display:block;color:var(--inkt);text-decoration:none}
.pk-beeld{display:block;position:relative;aspect-ratio:1;background:#fff;border-radius:var(--r);overflow:hidden}
.pk-beeld img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pk-a:hover .pk-beeld img{transform:scale(1.04)}
.pk-leeg{display:block;aspect-ratio:1;background:var(--wol-2);border-radius:var(--r)}
.pk-naam{display:block;margin:.75rem 0 .2rem;font-weight:600;line-height:1.3}
.prijs b{font-weight:800}
.prijs s{color:#7b7466;margin-right:.3rem}
.prijs small{font-size:.85rem;color:var(--inkt-2)}
.pk-tag{position:absolute;left:.6rem;top:.6rem;background:var(--groen);color:#fff;font-size:.75rem;font-weight:800;padding:.25rem .6rem;border-radius:999px}
.pk-tag-uit{background:#5f5a50}
.pk-uit .pk-beeld img{opacity:.55}
.pk-koop{position:absolute;right:.55rem;top:calc(100% - 2.6rem - var(--naamh,4.2rem));width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--groen);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);transition:transform .2s}
.pk-koop{top:auto;bottom:auto}
.pk .pk-koop{position:absolute;right:.55rem;top:.55rem}
.pk-koop:hover{transform:scale(1.08);background:var(--groen-2)}
@media (max-width:1000px){.pk-rij{grid-template-columns:repeat(3,minmax(0,1fr))}.pk-rij>li:nth-child(n+7){display:none}}
@media (max-width:640px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .9rem}.pk-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .9rem}.pk-naam{font-size:.95rem}}
.pk-rij-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.2rem;padding-bottom:1rem;scrollbar-width:thin}
.pk-rij-scroll>li{flex:0 0 min(15rem,44vw);scroll-snap-align:start;display:block!important}

/* schap */
.schap{padding:clamp(3.5rem,8vw,7rem) 0}
.schap-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.schap-tabs button{display:inline-flex;gap:.45rem;align-items:baseline;min-height:2.9rem;padding:.6rem 1.2rem;border-radius:999px;border:1.5px solid #cbbfa6;background:transparent;cursor:pointer;font-weight:700}
.schap-tabs button small{font-weight:600;color:#7b7466}
.schap-tabs button[aria-selected=true]{background:var(--groen);border-color:var(--groen);color:#fff}
.schap-tabs button[aria-selected=true] small{color:var(--groen-licht)}
.schap-plank{position:relative;padding-bottom:1rem}
.schap-plank .pk-rij{position:relative;padding-bottom:1.8rem}
.schap-plank .pk-rij::after{content:"";position:absolute;left:-1rem;right:-1rem;bottom:0;height:1.1rem;border-radius:.3rem;background:linear-gradient(#b48a5a,#8f6a42);box-shadow:0 10px 18px -10px rgba(60,40,20,.7)}
.schap-plank .knop-tekst{margin-top:1rem}
@media (max-width:640px){.schap-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.schap-tabs button{flex:0 0 auto}}

/* VOEL DE WOL */
.voel{position:relative;background:var(--nacht);color:#f2ecdf;padding:0 0 clamp(2rem,5vw,4rem)}
.voel-doek{position:relative;height:min(78svh,52rem);min-height:24rem;overflow:hidden;cursor:grab;touch-action:pan-y;background:#2a271f}
.voel-doek:active{cursor:grabbing}
.voel-canvas,.voel-val{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voel-doek.gl .voel-val{opacity:0}
.voel-doek::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--nacht));pointer-events:none}
.voel-hint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;pointer-events:none;transition:opacity .6s}
.voel-hint span{display:inline-flex;align-items:center;gap:.6rem;background:rgba(18,22,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.7rem 1.2rem;border-radius:999px;font-weight:700}
.voel-hint span::before{content:"";width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid #f2ecdf;animation:veeg 2.4s ease-in-out infinite}
@keyframes veeg{0%,100%{transform:translateX(-.6rem)}50%{transform:translateX(.6rem)}}
.voel-doek.geaaid .voel-hint{opacity:0}
.voel-in{position:relative;margin-top:-9rem;display:grid;grid-template-columns:1fr 1.25fr;gap:1.5rem 3rem;align-items:end}
.voel-tekst p{max-width:30rem;color:#d9d1c1}
.voel-tekst h2{font-size:clamp(2.6rem,6vw,5rem)}
.voel-stalen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.staal{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;text-align:left;padding:.8rem;border-radius:var(--r);border:1.5px solid rgba(242,236,223,.22);background:rgba(255,255,255,.04);cursor:pointer;min-height:3rem}
.staal[aria-pressed=true]{border-color:#f2ecdf;background:rgba(255,255,255,.1)}
.staal-bol{width:2.4rem;height:2.4rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 50%),var(--k);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.staal-naam{font-size:.95rem;font-weight:700;line-height:1.2}
.staal-naam small{display:block;font-weight:500;font-size:.78rem;color:#bdb4a2}
.staal-prijs{font-size:.85rem;color:#d9d1c1}
.staal-prijs small{color:#bdb4a2}
.voel-knop{grid-column:2;justify-self:start}
.voel-noot{font-size:.8rem;color:#a29a89;margin-top:1.4rem}
@media (max-width:1000px){.voel-in{grid-template-columns:1fr;margin-top:-6rem}.voel-knop{grid-column:1}}
@media (max-width:640px){.voel-doek{height:62svh;min-height:20rem}.voel-stalen{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) .4rem;scrollbar-width:none;scroll-snap-type:x mandatory}.staal{scroll-snap-align:start}.voel-in{margin-top:-4rem}}

/* NACHT / DEKBED */
.nacht{position:relative;background:var(--nacht-2);color:#e8e6f2;padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.nacht .vachtrand{color:var(--nacht-2)!important}
.nacht-sterren{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 32% 8%,#fff6,transparent),radial-gradient(1.5px 1.5px at 72% 22%,#fff9,transparent),radial-gradient(1px 1px at 88% 12%,#fff5,transparent),radial-gradient(1px 1px at 55% 30%,#fff4,transparent),radial-gradient(1.5px 1.5px at 6% 44%,#fff6,transparent);pointer-events:none}
.nacht-in{position:relative}
.nacht-kopblok{max-width:44rem}
.nacht-kopblok p{color:#c5c3d6;font-size:1.1rem}
.nachten{list-style:none;margin:2rem 0 2.4rem;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.nachten button{width:100%;min-height:6.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--r);border:1.5px solid rgba(232,230,242,.18);background:rgba(255,255,255,.04);cursor:pointer;color:#e8e6f2}
.nachten button[aria-pressed=true]{background:#e8e6f2;color:var(--nacht-2);border-color:#e8e6f2}
.nachten .dag{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.nachten .temp{font:400 1.9rem/1 var(--disp)}
.nachten .maan{width:1.1rem;height:1.1rem;border-radius:50%;box-shadow:inset -.32rem -.12rem 0 0 currentColor;transform:rotate(-20deg);opacity:.8}
.nacht-laden{grid-column:1/-1;color:#c5c3d6}
.bed-werk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:center}
.bed-teken svg{width:100%;height:auto;max-height:30rem;aspect-ratio:300/260}
.bed-advies{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.15 var(--disp);margin-bottom:1.2rem;min-height:2.4em}
.keuzerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1.2rem}
.keuzerij button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;padding:.75rem .9rem;border-radius:var(--r);border:1.5px solid rgba(232,230,242,.25);background:transparent;cursor:pointer;min-height:3rem}
.keuzerij button small{font-size:.8rem;opacity:.8}
.keuzerij button[aria-pressed=true]{background:#e8e6f2;color:var(--nacht-2);border-color:#e8e6f2}
.keuzerij button.advies::after{content:"Advies";font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--stro)}
.keuzerij button[aria-pressed=true].advies::after{color:var(--groen)}
.maatrij{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;align-items:center;margin-bottom:1.2rem}
.maatrij>span{font-size:.85rem;font-weight:700;opacity:.85}
.maatrij div{display:flex;flex-wrap:wrap;gap:.4rem}
.maatrij button{min-width:3.4rem;min-height:2.75rem;border-radius:999px;border:1.5px solid rgba(232,230,242,.25);background:transparent;cursor:pointer;font-weight:700}
.maatrij button[aria-pressed=true]{background:#e8e6f2;color:var(--nacht-2)}
.maatrij button:disabled{opacity:.3;cursor:not-allowed}
.bed-prijs{font-size:1.15rem;min-height:1.6em}
.bed-prijs b{font:400 1.8rem var(--disp);margin-right:.4rem}
.bed-noot{font-size:.85rem;color:#a9a7bd;margin-top:.8rem}
@media (max-width:900px){.bed-werk{grid-template-columns:1fr}.bed-teken svg{max-height:20rem;margin-inline:auto}}
@media (max-width:640px){.nachten{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:5.2rem;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) .3rem;scrollbar-width:none}.keuzerij{grid-template-columns:1fr}}

/* KUDDE (film) */
.kudde{position:relative;min-height:min(92svh,56rem);display:grid;align-items:end;color:#fff;overflow:hidden;background:#3b3a2c}
.kudde-film,.lint-film,.pfilm-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kudde::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,6,.05) 30%,rgba(10,14,6,.82))}
.kudde-in{position:relative;z-index:1;padding:5rem 0 clamp(3rem,6vw,5rem);max-width:52rem;margin-left:max(var(--gutter),calc((100% - 92rem)/2))}
.kudde-getal{font:400 clamp(6rem,20vw,16rem)/.8 var(--disp);margin:0 0 .6rem;color:#f4efe6;display:flex;align-items:flex-start}
.kudde-getal small{font-size:.4em;margin-top:.15em}
.kudde h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.kudde p{max-width:40rem;color:#eae5d9}
.rassen{list-style:none;margin:1.2rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.rassen li{font:400 1.25rem/1.4 var(--disp)}
.rassen li:not(:last-child)::after{content:"·";margin-left:1.4rem;color:var(--stro)}
.rassen b{font-weight:400;color:var(--stro)}

/* GENERATIES */
.gen{padding:clamp(4rem,8vw,7rem) 0}
.gen-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.gen-foto{margin:0}
.gen-foto img{border-radius:1.4rem;width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:60% 40%}
figcaption{font-size:.85rem;color:var(--inkt-2);margin-top:.6rem}
.tijd{list-style:none;margin:1.6rem 0;padding:0}
.tijd li{display:grid;grid-template-columns:5.6rem 1fr;gap:1rem;padding:.9rem 0;border-top:1.5px solid #d9cfbb}
.tijd b{font:400 1.7rem/1 var(--disp);color:var(--groen)}
@media (max-width:860px){.gen-in{grid-template-columns:1fr}}

/* LINT (begrazing) */
.lint{position:relative;min-height:min(88svh,54rem);display:grid;align-items:end;color:#fff;overflow:hidden;background:#33402a}
.lint::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,8,.82),rgba(12,18,8,.25) 55%,transparent),linear-gradient(0deg,rgba(12,18,8,.45),transparent 40%)}
.lint-in{position:relative;z-index:1;padding:5rem 0}
.lint-in>div{max-width:36rem}
.lint p{color:#e8e5da}
@media (max-width:640px){.lint::after{background:linear-gradient(0deg,rgba(12,18,8,.9) 15%,rgba(12,18,8,.2) 70%)}}

/* OUTLET + HOEVE */
.outlet{padding:clamp(4rem,7vw,6rem) 0}
.hoeve{display:grid;grid-template-columns:1.2fr 1fr;background:var(--groen);color:#eef3e6}
.hoeve-beeld img{width:100%;height:100%;object-fit:cover;min-height:24rem}
.hoeve-tekst{padding:clamp(2.5rem,6vw,5rem) var(--gutter);align-self:center;max-width:36rem}
.hoeve .label{color:var(--stro)}
.hoeve-adres{font-size:1.15rem;line-height:1.5}
.hoeve-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.hoeve .knop{background:var(--wol);color:var(--groen)}
.hoeve .knop-tekst{color:#fff}
@media (max-width:860px){.hoeve{grid-template-columns:1fr}.hoeve-beeld img{min-height:0;aspect-ratio:3/2}}

/* paginakoppen */
.pkop{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);background:var(--wol)}
.pkop h1{margin-bottom:.3em}
.pkop-intro{font-size:1.15rem;color:var(--inkt-2);max-width:40rem}
.kruimel{font-size:.9rem;margin-bottom:1.2rem;color:var(--inkt-2)}
.kruimel a{color:var(--inkt-2);padding:.6rem 0;display:inline-block}
.kruimel-licht a{color:#eee}
.pfilm{position:relative;min-height:min(72svh,44rem);display:grid;align-items:end;color:#fff;overflow:hidden;background:#3b3a2c}
.pfilm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,6,.1),rgba(10,14,6,.75))}
.pfilm-in{position:relative;z-index:1;padding:4rem 0 4.5rem}
.pfilm-in p{font-size:1.25rem;max-width:34rem}

/* winkel + filters */
.winkel{padding:2.5rem 0 5rem}
.filters{margin-bottom:2rem}
.filter-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.filter-chips button,.subcats a{min-height:2.75rem;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid #cbbfa6;background:transparent;cursor:pointer;font-weight:700;color:var(--inkt);text-decoration:none;display:inline-flex;align-items:center}
.filter-chips button[aria-pressed=true]{background:var(--groen);border-color:var(--groen);color:#fff}
.subcats{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 2rem}
.filter-rij{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.filter-zoek input,.filter-sort select{min-height:2.9rem;border:1.5px solid #c9c0ae;border-radius:.7rem;padding:.5rem .9rem;font:inherit;background:#fff}
.filter-zoek input{width:min(22rem,100%)}
.filter-vink{display:flex;gap:.5rem;align-items:center;min-height:2.75rem;cursor:pointer}
.filter-vink input{width:1.2rem;height:1.2rem;accent-color:var(--groen)}
.filter-n{margin:0 0 0 auto;color:var(--inkt-2);font-size:.95rem}
.pk[hidden]{display:none}
.leeg{padding:2rem 0;font-size:1.1rem}
@media (max-width:640px){.filter-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.filter-chips button{flex:0 0 auto}.filter-zoek,.filter-zoek input{width:100%}.filter-n{margin:0}}

/* product */
.prod{padding:2rem 0 3.5rem}
.prod-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.prod-beeld{position:sticky;top:6rem}
.prod-hoofd{background:#fff;border-radius:1.2rem;overflow:hidden;aspect-ratio:1}
.prod-hoofd img{width:100%;height:100%;object-fit:contain}
.duimen{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;scrollbar-width:none}
.duimen button{flex:0 0 4.6rem;height:4.6rem;padding:0;border:2px solid transparent;border-radius:.6rem;overflow:hidden;background:#fff;cursor:pointer}
.duimen button[aria-current]{border-color:var(--groen)}
.duimen img{width:100%;height:100%;object-fit:contain}
.prod-info h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.ster{color:var(--inkt-2);font-weight:600}
.ster span{color:#c99a2e;letter-spacing:.1em}
.prod-prijs{font-size:1.6rem;margin:.6rem 0 1.2rem}
.prod-kort{color:var(--inkt-2)}
.var{display:block;margin-bottom:1rem}
.var span{display:block;font-weight:700;margin-bottom:.35rem}
.var select{width:100%;max-width:24rem;min-height:3rem;border:1.5px solid #b9b09d;border-radius:.7rem;padding:.5rem .9rem;font:inherit;background:#fff}
.koop{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1.4rem 0}
.aantal{display:inline-flex;align-items:center;border:1.5px solid #b9b09d;border-radius:999px;background:#fff}
.aantal button{width:2.9rem;height:3.2rem;border:0;background:transparent;font-size:1.3rem;cursor:pointer}
.aantal input{width:2.6rem;border:0;text-align:center;font:700 1.05rem var(--tekst);-moz-appearance:textfield;background:transparent}
.aantal input::-webkit-inner-spin-button{-webkit-appearance:none}
.prod-usp{list-style:none;margin:1.6rem 0 0;padding:1.2rem 0 0;border-top:1.5px solid #e1d9c8;color:var(--inkt-2)}
.prod-usp li{display:flex;gap:.6rem;align-items:center;padding:.25rem 0}
.prod-usp li::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--groen);flex:0 0 auto}
.uitverkocht{font-weight:700}
.prod-tekst{padding:clamp(3rem,6vw,5rem) 0}
.prod-tekst h3{font-size:1.25rem;margin-top:1.4em}
.verwant{padding:3.5rem 0 5rem}
.verwant h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.var-fout{color:#a3261b;font-weight:700}
@media (max-width:860px){.prod-in{grid-template-columns:1fr}.prod-beeld{position:static}}

/* pagina's */
.verhaal{padding:clamp(3.5rem,7vw,6rem) 0}
.verhaal-in{display:grid;grid-template-columns:minmax(0,44rem) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.groot{font:400 clamp(1.5rem,2.4vw,2rem)/1.25 var(--disp);color:var(--groen)}
.rassenlijst{list-style:none;margin:0;padding:0}
.rassenlijst li{padding:1.1rem 0;border-top:1.5px solid #d9cfbb;font:400 clamp(1.5rem,2.4vw,2rem)/1.2 var(--disp)}
.rassenlijst span{display:block;font:400 .95rem/1.4 var(--tekst);color:var(--inkt-2);margin-top:.3rem}
.rassenlijst b{font-weight:400;color:var(--groen)}
.keurmerk{background:#fff;border-radius:1.2rem;padding:1.6rem;max-width:20rem}
.keurmerk img{width:8rem}
.fotostrook{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:.5rem;padding:.5rem}
.fotostrook figure,.duo figure{margin:0}
.fotostrook img,.duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:.6rem}
.fotostrook .fs-c img,.fotostrook .fs-d img{aspect-ratio:auto}
@media (max-width:860px){.verhaal-in{grid-template-columns:1fr}.fotostrook{grid-template-columns:1fr 1fr}.fotostrook .fs-c img,.fotostrook .fs-d img{aspect-ratio:4/3}}
.historie{padding:clamp(3rem,6vw,5rem) 0}
.hist-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.hist-foto{margin:0;position:sticky;top:6rem}
.hist-foto img{border-radius:1.4rem}
.tijd-groot li{grid-template-columns:7.5rem 1fr;padding:1.4rem 0;font-size:1.1rem}
.tijd-groot b{font-size:2.6rem}
@media (max-width:860px){.hist-in{grid-template-columns:1fr}.hist-foto{position:static}.tijd-groot li{grid-template-columns:5.5rem 1fr}.tijd-groot b{font-size:2rem}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
.aanvraag{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--heide);color:#fff;position:relative}
.aanv-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.aanv-beelden{position:sticky;top:6rem}
.aanv-beelden figure{margin:0}
.aanv-beelden img{border-radius:1.2rem;width:100%;aspect-ratio:4/3;object-fit:cover}
.aanv-geen{font:400 clamp(2.4rem,5vw,4rem)/1 var(--disp);aspect-ratio:4/3;display:grid;place-items:center;text-align:center;border:2px dashed rgba(255,255,255,.45);border-radius:1.2rem;margin:0;padding:1rem}
.aanvraag .label{color:#fff3c9}
.aanvraag legend{font-weight:700;margin-bottom:.6rem;padding:0}
.aanvraag fieldset{border:0;padding:0;margin:0 0 1.2rem}
.keuzerij-klein{grid-template-columns:repeat(3,minmax(0,1fr))}
.aanvraag .keuzerij button{border-color:rgba(255,255,255,.4);color:#fff;font-weight:700}
.aanvraag .keuzerij button[aria-pressed=true]{background:#fff;color:var(--heide);border-color:#fff}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.velden label,.contact-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:700;font-size:.95rem}
.velden small{font-weight:400;opacity:.85}
.velden input,.contact-form input,.contact-form textarea{min-height:3rem;border:1.5px solid rgba(0,0,0,.25);border-radius:.7rem;padding:.6rem .9rem;font:inherit;background:#fff;color:var(--inkt)}
.pc-uit{min-height:1.5em;margin:1rem 0;font-weight:600}
.form-noot{font-size:.85rem;opacity:.85;margin-top:.8rem}
.aanvraag .knop{background:#fff;color:var(--heide)}
@media (max-width:860px){.aanv-in{grid-template-columns:1fr}.aanv-beelden{position:static}.velden{grid-template-columns:1fr}.keuzerij-klein{grid-template-columns:1fr 1fr}}
.contact{padding:clamp(3rem,6vw,5rem) 0}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.contact dl{display:grid;grid-template-columns:9rem 1fr;gap:.6rem 1rem;margin:1.6rem 0}
.contact dt{font-weight:700}
.contact dd{margin:0}
.contact-form{display:grid;gap:1rem;background:var(--wol);padding:clamp(1.4rem,3vw,2.4rem);border-radius:1.2rem}
@media (max-width:860px){.contact-in{grid-template-columns:1fr}.contact dl{grid-template-columns:1fr}}
.tekstpag{padding:3rem 0 5rem}
.tekstpag h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.4em}
.tekstpag h3{margin-top:1.2em}

/* mandje */
.mand{padding:2.5rem 0 5rem}
.mand-in{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start}
.mand-regel{display:grid;grid-template-columns:5.5rem 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1.5px solid #e1d9c8}
.mand-regel img{width:5.5rem;height:5.5rem;object-fit:contain;background:#fff;border-radius:.6rem}
.mand-regel a{color:var(--inkt);font-weight:700;text-decoration:none}
.mand-regel small{display:block;color:var(--inkt-2)}
.mand-regel .aantal{margin-top:.5rem}
.mand-regel .aantal button{height:2.75rem;width:2.75rem}
.mand-weg{border:0;background:transparent;color:var(--inkt-2);text-decoration:underline;cursor:pointer;min-height:2.75rem}
.mand-som{background:var(--wol);border-radius:1.2rem;padding:1.6rem;position:sticky;top:6rem}
.mand-som dl{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin:0 0 1rem}
.mand-som dd{margin:0;text-align:right}
.mand-totaal{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid #d9cfbb;padding-top:1rem;font-size:1.2rem}
.mand-totaal b{font:400 1.9rem var(--disp)}
.mand-gratis{font-size:.95rem;color:var(--groen);font-weight:700}
.mand-gratis .balk{display:block;height:.45rem;border-radius:1rem;background:#ddd2bd;margin-top:.4rem;overflow:hidden}
.mand-gratis .balk i{display:block;height:100%;background:var(--groen);border-radius:1rem}
.mand-som .knop{width:100%}
@media (max-width:860px){.mand-in{grid-template-columns:1fr}.mand-som{position:static}}

/* toost */
.toost{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:80;background:var(--inkt);color:#fff;padding:.8rem 1.2rem;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);display:flex;gap:1rem;align-items:center;max-width:calc(100% - 2rem)}
.toost a{color:var(--stro);font-weight:700}

/* voet */
.voet{position:relative;background:var(--nacht);color:#cfc9bb;padding:4rem 0 2rem;margin-top:0}
.voet-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
.voet-merk img{width:6.5rem;margin-bottom:1rem}
.voet h2{font:700 .85rem var(--tekst);text-transform:uppercase;letter-spacing:.06em;color:var(--stro);margin-bottom:1rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-block;padding:.35rem 0}
.voet a{color:#f1ece0}
.voet-onder{border-top:1px solid rgba(255,255,255,.1);margin-top:3rem;padding-top:1.4rem;font-size:.85rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.voet-onder p{margin:0}
.voet-betaal{display:flex;gap:.8rem;align-items:center}
.voet-betaal img{height:2.2rem;width:auto;background:#fff;border-radius:.4rem;padding:.2rem .4rem}
@media (max-width:900px){.voet-in{grid-template-columns:1fr 1fr}.voet-merk{grid-column:1/-1}}
@media (max-width:520px){.voet-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
/* breed scherm: het 1440-ontwerp schaalt als geheel mee */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
/* mobiel, ronde 1 */
@media (max-width:640px){
  .hero-onder{position:relative;bottom:auto;margin-bottom:clamp(1.1rem,2.4vw,2.2rem);text-align:left;background:rgba(18,22,14,.7)}
  .hero-in{padding-bottom:1.6rem}
  .schap-plank .pk-rij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 1.8rem;scrollbar-width:none}
  .schap-plank .pk-rij>li{flex:0 0 58%;scroll-snap-align:start;display:block!important}
  .schap-plank .pk-rij::after{position:sticky;display:none}
  .schap-plank{border-bottom:1.1rem solid #9c7548;border-radius:0 0 .3rem .3rem}
  .nachten{grid-auto-columns:6.4rem}
  .kudde::after{background:linear-gradient(180deg,rgba(10,14,6,.1) 10%,rgba(10,14,6,.9) 55%)}
}
@media (max-width:900px){.bed-teken{order:2}.bed-werk{display:flex;flex-direction:column;align-items:stretch}}
select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23164c00' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.5rem!important;font:inherit;color:var(--inkt)}
.var select,.filter-sort select{min-height:3rem;font-size:1rem}
.filter-zoek{flex:0 1 22rem}.filter-zoek input{width:100%}
/* a11y-ronde: veldranden >= 3:1, doorgestreepte prijs donkerder, sterren donkerder, focus op heide wit */
.kop-zoek input,.filter-zoek input,.filter-sort select,.var select,.aantal,.velden input,.contact-form input,.contact-form textarea{border-color:#857b68}
.prijs s{color:#5f594e}
.ster span{color:#8a6510}
.aanvraag :focus-visible{outline-color:#fff}
.voet li a{white-space:nowrap}
.aantal input{height:3.2rem}
.filter-vink input{-webkit-appearance:none;appearance:none;width:2.5rem;height:2.5rem;margin:0;border:1.5px solid #857b68;border-radius:.6rem;background:#fff;display:grid;place-items:center;cursor:pointer}
.filter-vink input:checked{background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6l4.5 4.5L14.5 1.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center;border-color:var(--groen)}
/* tablet/liggend, ronde 2 */
@media (max-width:1100px){.usp ul{flex-wrap:nowrap;justify-content:center;overflow:hidden}.usp li:not(:first-child){display:none}.usp li{white-space:nowrap}}
@media (max-width:380px){.usp{font-size:.78rem}}
@media (max-height:520px) and (orientation:landscape){
  .usp{display:none}.kop{padding-block:.3rem}.kop-logo img{width:2.8rem}.kop-logo{display:block;min-height:2.75rem}
  .hero{min-height:calc(100svh - 3.6rem)}.hanglabel{display:none}.hero-boven{display:none}
  .hero-in{padding:1.5rem 0 4.2rem}.hero-kop{margin-bottom:.8rem}
}