:root{
  --display:"Lucky Bones",Poppins,"Segoe UI",system-ui,sans-serif;
  --body:"Quark",Karla,system-ui,sans-serif;
  --mono:var(--mono);
  --paper:#e6d7b8;           /* beige tafelkleed */
  --card:#f5edda;            /* lichter papier */
  --ink:#3a2a1c;
  --ink-soft:#7d6647;
  --line:#c0a87f;
  --stitch:#b0946a;
  --brick:#c1502e;
  --accent:#1e3a31;          /* volgt de gekozen bodykleur */
  --accent-ink:#ffffff;
  --fold: linear-gradient(160deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.03) 33%,
      rgba(0,0,0,.05) 39%,
      rgba(0,0,0,.40) 44%,
      rgba(0,0,0,.09) 48%,
      rgba(0,0,0,.02) 62%,
      rgba(0,0,0,.13) 100%);
  --r:14px;
  --shadow:3px 3px 0 rgba(58,42,28,.22);
}
*{box-sizing:border-box}
/* Eigen display-regels winnen van de standaard [hidden] van de browser.
   Deze regel zorgt dat verbergen altijd verbergt. */
[hidden]{display:none!important}
body{
  margin:0;color:var(--ink);
  background-color:var(--paper);
  /* geweven linnen */
  background-image:
    repeating-linear-gradient(0deg,  rgba(58,42,28,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(58,42,28,.045) 0 1px, transparent 1px 4px);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,.total,.opt .amount{
  font-family:var(--display);font-weight:600;
  letter-spacing:-.01em;margin:0
}
h1{font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:1}
h2{font-size:1.15rem;margin-bottom:.5rem}
p{margin:.4rem 0}
.eyebrow{
  font-family:var(--mono);font-weight:700;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick);margin:0 0 .7rem
}
.hint{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}

/* ---------- header ---------- */
header{max-width:1180px;margin:0 auto;padding:2.5rem 1.25rem 1.75rem;display:flex;gap:1.75rem;align-items:flex-end;flex-wrap:wrap}
.tag{
  /* Nagemaakt naar het echte geweven labeltje: liggend formaat, ongeveer
     anderhalf keer zo breed als hoog. Woordmerk groot en vet op twee regels,
     de leus eronder op precies één regel over de volle breedte. */
  width:142px;box-sizing:border-box;
  background:#fdfbf6;border:1px solid rgba(58,42,28,.22);border-radius:2px;
  padding:.6rem .45rem .45rem;text-align:center;
  font-family:var(--display);font-weight:700;line-height:1.02;font-size:1.6rem;
  letter-spacing:-.015em;
  transform:rotate(-2deg);box-shadow:3px 4px 0 rgba(58,42,28,.16)
}
.tag small{
  display:block;font-family:var(--body);font-weight:400;font-size:.4rem;
  line-height:1.3;white-space:nowrap;letter-spacing:0;
  color:var(--ink-soft);margin:.45rem auto 0
}
header .claim{font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--ink);max-width:38ch;margin:.7rem 0 .55rem}
header .lede{max-width:54ch;color:var(--ink-soft);font-size:.95rem}
header .lede p{margin:.55rem 0}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem 5rem;display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.wrap{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start;gap:3rem}}

/* ---------- preview ---------- */
.preview{position:sticky;top:1.25rem}
.stage{
  background:var(--card);border:2px dashed var(--stitch);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  padding:1rem 1rem 1.6rem;position:relative;overflow:hidden
}
.stage::before{
  content:"";position:absolute;inset:0;background:var(--accent);opacity:.09;pointer-events:none
}
/* gekartelde rand, zoals met een kartelschaar geknipt */
.stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;
  background:
    linear-gradient(45deg,  var(--paper) 50%, transparent 50%) 0 0/16px 12px repeat-x,
    linear-gradient(-45deg, var(--paper) 50%, transparent 50%) 0 0/16px 12px repeat-x
}
.stage svg{display:block;width:100%;height:auto;position:relative}
.stage .part{cursor:pointer}
.stage .part:hover{opacity:.88}
.readout{
  display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.85rem;color:var(--ink-soft)
}
.readout b{font-weight:700;color:var(--ink)}

/* ---------- keuzeblokken ---------- */
section{margin-bottom:2.5rem}
.opts{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{
  display:block;background:var(--card);border:2px dashed var(--stitch);border-radius:var(--r);
  padding:1rem;cursor:pointer;height:100%
}
.opt input:checked + label{border-style:solid;border-color:var(--ink);box-shadow:var(--shadow)}
.opt input:focus-visible + label{outline:2px solid var(--brick);outline-offset:3px}
.opt .name{font-weight:700;display:block}
.opt .amount{font-size:1.7rem;display:block;margin-top:.1rem}
.chip{display:flex;height:24px;width:70px;border-radius:3px;overflow:hidden;margin-bottom:.7rem;border:1px solid rgba(0,0,0,.15)}
.chip i{display:block;flex:1}
.chip i.s{flex:0 0 18px}

/* segmented */
.seg{display:flex;flex-wrap:wrap;gap:.45rem}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{
  border:2px dashed var(--stitch);background:var(--card);border-radius:100px;
  padding:.4rem 1.1rem;cursor:pointer;font-weight:700;font-size:.95rem
}
.seg input:checked + label{background:var(--ink);color:var(--card);border-style:solid;border-color:var(--ink)}
.seg input:focus-visible + label{outline:2px solid var(--brick);outline-offset:3px}
.row{display:flex;gap:2.5rem;flex-wrap:wrap}

/* ---------- onderdeelkiezer ---------- */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:.75rem;margin-bottom:1rem}
.parts button{
  display:flex;gap:.75rem;align-items:center;text-align:left;font:inherit;cursor:pointer;
  background:var(--card);border:2px dashed var(--stitch);border-radius:var(--r);padding:.7rem
}
.parts button[aria-pressed=true]{border-style:solid;border-color:var(--ink);box-shadow:var(--shadow)}
.parts button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.parts .dot{width:46px;height:32px;border-radius:4px;flex:0 0 auto;background:var(--fold),var(--c,#ccc);border:1px solid rgba(0,0,0,.2)}
.parts .dot.zip{background:
  repeating-linear-gradient(90deg,var(--t) 0 3px,transparent 3px 7px) center/100% 11px no-repeat,
  var(--c,#ccc)}
.parts .lbl{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);font-weight:700}
.parts .val{display:block;font-weight:700}

/* ---------- stofstalen ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1.3rem .9rem}
.grid button{display:block;width:100%;padding:0;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.grid .fabric{
  display:block;aspect-ratio:3/2;border-radius:4px;background:var(--fold),var(--c);
  box-shadow:var(--shadow);position:relative
}
.grid button[aria-pressed=true] .fabric{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink),var(--shadow)}
.grid button[aria-pressed=true] .fabric::after{
  content:"";position:absolute;right:7px;top:7px;width:21px;height:21px;border-radius:50%;
  background:#fffaf0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2a1c' stroke-width='3'><path d='M4 12l6 6L20 6'/></svg>") center/12px no-repeat
}
.grid button:focus-visible .fabric{outline:2px solid var(--brick);outline-offset:4px}
.grid .fabric.zip{background:var(--card);overflow:hidden}
.grid .fabric.zip svg{display:block;width:100%;height:100%;border-radius:inherit}
.grid .ccode{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--ink-soft);margin-top:.05rem}
.grid .cname{display:block;margin-top:.5rem;font-size:.85rem;font-weight:700;line-height:1.25}

/* ---------- formulier ---------- */
label.f{display:block;margin:.8rem 0}
label.f span{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:.3rem}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  width:100%;padding:.65rem .75rem;font:inherit;background:var(--card);
  border:2px dashed var(--stitch);border-radius:8px;color:var(--ink)
}
input:focus,textarea:focus{outline:none;border-style:solid;border-color:var(--ink)}
.fields{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
.fields .full{grid-column:1/-1}
@media(max-width:560px){.fields,.opts{grid-template-columns:1fr}}

.info{
  font-family:var(--body);font-size:.75rem;font-weight:700;cursor:pointer;vertical-align:middle;
  background:none;color:var(--brick);border:1.5px dashed var(--stitch);border-radius:100px;
  padding:.24rem .75rem;margin-left:.5rem;transition:background-color .2s ease,border-color .2s ease
}
.info:active{transform:scale(.96)}
.info:focus-visible{outline:2px solid var(--brick);outline-offset:3px}

dialog#maten{
  border:2px dashed var(--stitch);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.5rem;width:min(600px,92vw);box-shadow:6px 7px 0 rgba(58,42,28,.18)
}
dialog#maten::backdrop{background:rgba(58,42,28,.5)}
dialog#maten[open]{animation:rise .35s cubic-bezier(.2,.8,.3,1) both}
dialog#maten .send{margin-top:.4rem;background:var(--ink);color:var(--card)}
.schema{width:100%;max-width:330px;height:auto;display:block;margin:.8rem auto .2rem}
.schema .lijn{stroke:rgba(58,42,28,.45);stroke-width:2}
.schema .maatpijl{stroke:var(--brick);stroke-width:1.6}
.schema .leider{stroke:var(--brick);stroke-width:1;stroke-dasharray:3 4;opacity:.6}
.schema .maatletter text{font-family:var(--mono);font-weight:700;font-size:15px;fill:var(--brick)}
.maattabel .letter{
  display:inline-block;width:1.35em;font-family:var(--mono);font-weight:700;color:var(--brick)
}
.maattabel th.nu{color:var(--brick)}
details.maatwens{margin-top:1.2rem;border-top:1px dashed var(--line);padding-top:.9rem}
details.maatwens summary{
  cursor:pointer;list-style:none;font-family:var(--mono);font-weight:700;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brick)
}
details.maatwens summary::-webkit-details-marker{display:none}
details.maatwens summary::before{content:"+ "}
details.maatwens[open] summary::before{content:"\2212 "}
.tablewrap{overflow-x:auto;margin:1rem 0 .4rem}
.maattabel{width:100%;min-width:340px;border-collapse:collapse;font-size:.9rem}
.maattabel caption{
  text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brick);font-weight:700;padding-bottom:.45rem
}
.maattabel th,.maattabel td{padding:.45rem .5rem;text-align:left;border-bottom:1px dashed var(--line)}
.maattabel thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.maattabel tbody th{font-weight:500}
.maattabel td{font-family:var(--mono);text-align:center}
.maattabel .nu{background:rgba(193,80,46,.09)}

.checkout{
  border-top:2px dashed var(--ink);margin-top:2rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap
}
.total{font-size:2.3rem;line-height:1.05}
.total small{display:block;font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);font-weight:400}
button.send{
  font-family:var(--body);font-size:1rem;font-weight:700;cursor:pointer;
  border:2px solid var(--ink);border-radius:100px;padding:.8rem 1.7rem;
  background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)
}
button.send:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(58,42,28,.22)}
button.send:active{transform:translate(3px,3px);box-shadow:none}
button.send:focus-visible{outline:2px solid var(--brick);outline-offset:4px}

/* ---------- loader: het label wordt op de stof genaaid ---------- */
html{scroll-behavior:smooth}
#loader{
  position:fixed;inset:0;z-index:99;display:grid;place-items:center;padding:1.5rem;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,  rgba(58,42,28,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(58,42,28,.045) 0 1px, transparent 1px 4px);
  transition:opacity .6s ease,visibility .6s
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loader.done *{animation-play-state:paused}  /* geen naald die op de achtergrond blijft rondjes draaien */
body:has(#loader:not(.done)){overflow:hidden}

.loadwrap{display:grid;justify-items:center;gap:1.5rem;width:min(560px,94vw)}
.patch{
  /* Precies het labeltje uit de kop, maar dan uitvergroot: zelfde verhouding,
     zelfde rand, zelfde verhouding tussen woordmerk en leus. */
  position:relative;width:min(282px,84vw);box-sizing:border-box;
  padding:1.2rem .9rem .85rem;text-align:center;
  background:#fdfbf6;border:1px solid rgba(58,42,28,.22);border-radius:2px;
  transform:rotate(-2deg);box-shadow:5px 6px 0 rgba(58,42,28,.16);
  animation:settle .9s cubic-bezier(.2,.8,.3,1) both
}
.load-title{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(2.1rem,10vw,3.3rem);line-height:1.02;margin:0;
  animation:rise .7s cubic-bezier(.2,.8,.3,1) .25s both
}
.load-slogan{
  font-family:var(--body);font-weight:400;font-size:clamp(.44rem,2.1vw,.76rem);
  line-height:1.3;white-space:nowrap;color:var(--ink-soft);margin:.55rem auto 0;
  animation:rise .7s cubic-bezier(.2,.8,.3,1) .45s both
}

/* ---------- de naaitafel ---------- */
.scene{width:100%;height:auto;display:block}
.naai .body{fill:#efe7d6;stroke:rgba(58,42,28,.32);stroke-width:2}
.naai .deco{fill:var(--brick);opacity:.9}
.naai .metal{fill:#b9b2a4;stroke:rgba(58,42,28,.32);stroke-width:1.4}
.naai .needle{stroke:#8d867b;stroke-width:2.4;stroke-linecap:round}
.naai .wheel{fill:#463f37;stroke:rgba(58,42,28,.4);stroke-width:2}
.naai .wheelin{fill:#b9b2a4}
.naai .spin line{stroke:#8d857a;stroke-width:3.5;stroke-linecap:round}
.naai .spool{fill:var(--brick);stroke:rgba(58,42,28,.32);stroke-width:1.4}
.naai .draad{fill:none;stroke:var(--brick);stroke-width:2;stroke-linecap:round}
.naai .huid{fill:#d3ad84;stroke:rgba(58,42,28,.4);stroke-width:1.5;stroke-linejoin:round}
.naai .palm{fill:#c9a179}
.naai .duim rect{fill:#cfa77e}
.naai .mouwrand{fill:#e8dfc9;stroke:rgba(58,42,28,.38);stroke-width:1.6}
.naai .arm{stroke:#c9a179;stroke-width:33;stroke-linecap:round;fill:none}
.naai .tafel{fill:#c9ab7e}
.naai .tafelrand{stroke:rgba(58,42,28,.3);stroke-width:2}
.naai .lap{fill:#1e3a31}
.naai .naad{fill:none;stroke:#f4ecda;stroke-width:3;stroke-dasharray:9 7;stroke-linecap:round}

/* zij naait: naaldstang, persvoet, hefboom en handwiel lopen op hetzelfde tempo */
.naai .needlebar{animation:pomp var(--tempo) ease-in-out infinite alternate}
.naai .foot     {animation:voet var(--tempo) ease-in-out infinite alternate}
.naai .takeup   {transform-origin:120px 26px;animation:hefboom var(--tempo) ease-in-out infinite alternate}
.naai .spin     {transform-origin:300px 66px;animation:draai calc(var(--tempo) * 2) linear infinite}
.naai .draad    {animation:trilling calc(var(--tempo) * 2) ease-in-out infinite alternate}
/* De handen voeren de stof door: pakken, duwen, loslaten, opnieuw pakken.
   Alles hangt aan --tempo, dus als zij op snelheid trapt gaan de handen mee. */
.naai .handL{animation:voerenL calc(var(--tempo) * 4) ease-in-out infinite}
.naai .handR{animation:voerenR calc(var(--tempo) * 4) ease-in-out infinite;
             animation-delay:calc(var(--tempo) * .55)}
.naai .vinger{animation:vingertje calc(var(--tempo) * 3) ease-in-out infinite alternate}
.naai .v2{animation-delay:calc(var(--tempo) * .35)}
.naai .v3{animation-delay:calc(var(--tempo) * .7)}
.naai .v4{animation-delay:calc(var(--tempo) * 1.05)}
@keyframes pomp    {from{transform:translateY(0)}  to{transform:translateY(24px)}}
@keyframes voet    {from{transform:translateY(0)}  to{transform:translateY(3px)}}
@keyframes hefboom {from{transform:rotate(14deg)}  to{transform:rotate(-10deg)}}
@keyframes draai   {to{transform:rotate(360deg)}}
@keyframes trilling{from{transform:translateY(0)}  to{transform:translateY(-1.5px)}}
@keyframes voerenL{
  0%{transform:translate(0,0)}          /* pakt de stof beet */
  38%{transform:translate(12px,-2px)}   /* duwt hem naar de naald */
  54%{transform:translate(12px,4px)}    /* laat los */
  100%{transform:translate(0,0)}        /* en pakt opnieuw */
}
@keyframes voerenR{
  0%{transform:translate(0,0)}
  40%{transform:translate(10px,2px)}    /* trekt hem er aan de andere kant uit */
  58%{transform:translate(10px,-3px)}
  100%{transform:translate(0,0)}
}
@keyframes vingertje {from{transform:translate(0,0)}   to{transform:translate(-2.5px,1.5px)}}

/* Verander je iets, dan strijken ze het even glad. Dit zit op een eigen laagje
   zodat het niet botst met het verschuiven naar het gekozen onderdeel. */
.stage.stikt .handenwerk{animation:gladstrijken .6s cubic-bezier(.3,1.1,.4,1)}
@keyframes gladstrijken{
  0%{transform:translate(0,0)}
  28%{transform:translate(0,7px) scale(1.03)}
  55%{transform:translate(-5px,2px) scale(1.01)}
  100%{transform:translate(0,0)}
}

/* Je verandert iets: de naald gaat over precies dat onderdeel, en het
   onderdeel zelf wordt even aangestreken. */
.veeg{opacity:0}
.veeg line{
  stroke:var(--stiksel,#fffaf0);stroke-width:4.5;stroke-dasharray:11 8;stroke-linecap:round
}

.stage.wijzig-body  .veeg-romp {animation:veegOmlaag .66s cubic-bezier(.45,0,.55,1)}
.stage.wijzig-zip   .veeg-rits {animation:veegRits .5s cubic-bezier(.45,0,.55,1)}
.stage.wijzig-sleeve .veeg-mouwL{animation:veegLinks .6s cubic-bezier(.4,0,.5,1)}
.stage.wijzig-sleeve .veeg-mouwR{animation:veegRechts .6s cubic-bezier(.4,0,.5,1)}

@keyframes veegOmlaag{
  0%{opacity:0;transform:translateY(40px)} 12%{opacity:1}
  82%{opacity:1} 100%{opacity:0;transform:translateY(320px)}
}
@keyframes veegRits{
  0%{opacity:0;transform:translateY(52px)} 14%{opacity:1}
  80%{opacity:1} 100%{opacity:0;transform:translateY(158px)}
}
@keyframes veegLinks{
  0%{opacity:0;transform:translateX(0)} 12%{opacity:1}
  80%{opacity:1} 100%{opacity:0;transform:translateX(-215px)}
}
@keyframes veegRechts{
  0%{opacity:0;transform:translateX(0)} 12%{opacity:1}
  80%{opacity:1} 100%{opacity:0;transform:translateX(215px)}
}

/* het onderdeel dat verandert komt even omhoog, alsof ze het gladstrijkt */
.stage.wijzig-body  #torso,   .stage.wijzig-body  #collar,
.stage.wijzig-body  #puntL,   .stage.wijzig-body  #puntR,
.stage.wijzig-sleeve #sleeveL,.stage.wijzig-sleeve #sleeveR,
.stage.wijzig-sleeve #cuffL,  .stage.wijzig-sleeve #cuffR{
  animation:aanstrijken .6s cubic-bezier(.3,1.2,.5,1)
}
@keyframes aanstrijken{
  0%{transform:none} 32%{transform:translateY(-6px)}
  62%{transform:translateY(1px)} 100%{transform:none}
}

  18% {opacity:1}
  62% {opacity:1;stroke-dashoffset:0}
  100%{opacity:0;stroke-dashoffset:0}
}
/* en ze trapt er even flink op */
.stage.stikt .naai{--tempo:.15s}

/* de stof schuift door, de steken komen onder de naald vandaan */
.scene .feed{animation:voeren 2.1s linear infinite}
.scene .run{animation:hem 2.1s linear infinite}
@keyframes voeren{from{transform:translateX(-78px)} to{transform:translateX(78px)}}
@keyframes hem {0%{opacity:0} 4%,100%{opacity:1}}
@keyframes dip {from{transform:translateY(-3px)} to{transform:translateY(6px)}}
@keyframes wave{from{transform:rotate(-8deg)}    to{transform:rotate(8deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:rotate(4deg) scale(.94)} to{opacity:1;transform:rotate(-2.5deg) scale(1)}}

/* ---------- bewegingen op de pagina zelf ---------- */
/* alles valt op tafel en stuift wat stof op */
.reveal{position:relative}
html.js .reveal{opacity:0}
html.js .reveal.in{animation:drop .85s cubic-bezier(.3,1.05,.4,1) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes drop{
  0%  {opacity:0;transform:translateY(-80px) scaleY(1.05)}
  52% {opacity:1;transform:translateY(0) scaleY(1)}
  64% {transform:translateY(0) scale(1.018,.95)}
  78% {transform:translateY(-8px) scale(.995,1.02)}
  90% {transform:translateY(0) scale(1,.992)}
  100%{opacity:1;transform:none}
}
html.js .reveal.in::before,html.js .reveal.in::after{
  content:"";position:absolute;bottom:-12px;width:96px;height:36px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(176,148,106,.5),rgba(176,148,106,0));
  opacity:0;pointer-events:none;
  animation:puffL 1s ease-out both;animation-delay:calc(var(--d,0) * 1ms)
}
html.js .reveal.in::before{left:2%}
html.js .reveal.in::after {right:2%;animation-name:puffR}
@keyframes puffL{0%,50%{opacity:0;transform:none}     62%{opacity:.85}
                 100%{opacity:0;transform:translate(-58px,-32px) scale(1.7)}}
@keyframes puffR{0%,50%{opacity:0;transform:none}     62%{opacity:.85}
                 100%{opacity:0;transform:translate(58px,-32px) scale(1.7)}}

/* vezelstof dat door de werkplaats zweeft */
.motes{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;bottom:-24px;left:var(--x);width:var(--s);height:calc(var(--s) * .55);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(104,82,54,.9),rgba(104,82,54,.3) 60%,rgba(104,82,54,0));
  animation:mote var(--t) linear var(--delay) infinite
}
@keyframes mote{
  0%  {opacity:0;transform:translate(0,0) rotate(0deg) scale(.6)}
  12% {opacity:1}
  88% {opacity:.85}
  100%{opacity:0;transform:translate(var(--dx),-108vh) rotate(var(--spin)) scale(1.25)}
}

/* de trui hangt zachtjes te wiegen */
.halsgat{fill:rgba(0,0,0,.34)}
.stage .trui{transform-origin:50% 6%;animation:sway 7.5s ease-in-out infinite}
.stage .trui.valt{animation:truidrop 1.05s cubic-bezier(.3,1.05,.4,1) both,
                  sway 7.5s ease-in-out 1.05s infinite}
@keyframes truidrop{
  0%  {opacity:0;transform:translateY(-300px) rotate(-7deg)}
  55% {opacity:1;transform:translateY(0) rotate(0deg)}
  68% {transform:translateY(0) scale(1.03,.955)}
  82% {transform:translateY(-12px) scale(.995,1.015)}
  100%{opacity:1;transform:none}
}
@keyframes sway{0%,100%{transform:rotate(-.7deg)} 50%{transform:rotate(.7deg)}}

.opt label,.seg label,.parts button,input,textarea,button.send{
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,transform .12s ease
}
.stage .part,.stage .part *{transition:fill .35s ease,stroke .35s ease,opacity .2s ease}
.parts .dot,.chip i{transition:background-color .35s ease}
.grid .fabric{transition:box-shadow .25s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
html.js .grid.in button .fabric{animation:tile .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 14ms)}
@keyframes tile{from{opacity:0;transform:translateY(10px) scale(.94)} to{opacity:1;transform:none}}
.grid button[aria-pressed=true] .fabric::after{animation:pop .32s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0) rotate(-25deg)} to{transform:scale(1) rotate(0)}}
.grid button:active .fabric{transform:scale(.95)}
.seg label:active,.opt label:active,.parts button:active{transform:scale(.98)}

/* ---------- telefoon ---------- */
*{-webkit-tap-highlight-color:transparent}
button,label,input,textarea{touch-action:manipulation}
@media(hover:none){
  .stage .part:hover{opacity:1}
  button.send:hover{background:var(--accent);color:var(--accent-ink);transform:none;box-shadow:var(--shadow)}
}
@media(max-width:899px){
  .wrap{display:block}
  .preview{
    position:sticky;top:0;z-index:5;margin:0 -1.25rem 2rem;padding:.6rem 1.25rem .4rem;
    background:var(--paper);box-shadow:0 10px 18px -12px rgba(58,42,28,.45)
  }
  .stage{padding:.5rem .5rem 1.2rem;transition:padding .28s ease}
  .stage svg{max-height:34vh;transition:max-height .28s ease}
  .preview .hint{display:none}
  .readout{margin-top:.5rem;font-size:.78rem;justify-content:center;gap:1.2rem}
  section,.grid{scroll-margin-top:28vh}

  /* Vier stalen naast elkaar in plaats van twee. Dat halveert de lengte van
     de lijst, en daardoor mag de trui bovenin een stuk groter blijven. */
  .grid{grid-template-columns:repeat(4,1fr);gap:.9rem .5rem}
  .grid .cname{font-size:.68rem;line-height:1.25;margin-top:.35rem}
  .grid .ccode{font-size:.6rem}

  /* Ingeklapt blijft de trui groot genoeg om te zien wat er gebeurt. */
  .preview.klein{padding-bottom:.25rem}
  .preview.klein .stage{padding:.35rem .4rem .5rem}
  .preview.klein .stage svg{max-height:26vh}
  .preview.klein .stage::after{display:none}
  .preview.klein .readout{margin-top:.3rem;font-size:.72rem;gap:1rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}


/* ==================== homepage ==================== */
.top{
  max-width:1180px;margin:0 auto;padding:1.6rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap
}
a.tag{text-decoration:none;color:inherit;display:block}
.navknop{
  font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:2px dashed var(--stitch);border-radius:100px;
  padding:.55rem 1.1rem;transition:border-color .2s ease,box-shadow .2s ease
}
.navknop:hover{border-style:solid;box-shadow:var(--shadow)}

.knop{
  display:inline-block;font-family:var(--body);font-weight:700;font-size:1rem;text-decoration:none;
  background:var(--ink);color:var(--card);border:2px solid var(--ink);border-radius:100px;
  padding:.85rem 1.8rem;box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease
}
.knop:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(58,42,28,.22)}
.knop:active{transform:translate(3px,3px);box-shadow:none}

.beeldvlak img{display:block;width:100%;height:100%;object-fit:cover}
.plek{
  display:grid;place-items:center;text-align:center;width:100%;height:100%;min-height:120px;
  background:repeating-linear-gradient(135deg,rgba(58,42,28,.055) 0 10px,transparent 10px 20px),var(--card);
  color:var(--ink-soft);font-family:var(--mono);font-size:.7rem;line-height:1.7;padding:1rem
}

/* --- hero's, één zichtbaar tegelijk --- */
body[data-hero="vol"] .hero-pola,
body[data-hero="pola"] .hero-vol{display:none}

.hero-vol{
  position:relative;max-width:1180px;margin:.5rem auto 4.5rem;width:calc(100% - 2.5rem);
  min-height:min(74vh,600px);display:grid;align-items:end;overflow:hidden;
  border:2px dashed var(--stitch);border-radius:var(--r)
}
.hero-vol .beeldvlak{position:absolute;inset:0}
.hero-vol .op{
  position:relative;padding:2.6rem 1.8rem 2rem;color:#fffaf0;
  background:linear-gradient(to top,rgba(34,24,14,.86),rgba(34,24,14,.5) 46%,transparent)
}
.hero-vol .op h1{color:#fffaf0}
.hero-vol .op .eyebrow{color:#e6c49b}
.hero-vol .knop{background:#fffaf0;color:var(--ink);border-color:#fffaf0}

.hero-pola{
  max-width:1180px;margin:.5rem auto 4.5rem;padding:0 1.25rem;
  display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:center
}
@media(min-width:900px){.hero-pola{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem}}
.polas{display:flex;justify-content:center;padding:1.6rem 0 .5rem}
.pola{
  position:relative;margin:0;background:#fffaf0;padding:11px 11px 42px;width:min(220px,38vw);
  box-shadow:5px 7px 0 rgba(58,42,28,.16);transform:rotate(var(--rot))
}
.pola + .pola{margin-left:-30px}
.pola .beeldvlak{aspect-ratio:4/5}
.pola figcaption{
  position:absolute;left:0;right:0;bottom:13px;text-align:center;
  font-family:var(--mono);font-size:.66rem;color:var(--ink-soft)
}
.plakband{
  position:absolute;top:-11px;left:50%;width:76px;height:22px;
  transform:translateX(-50%) rotate(-3deg);background:rgba(206,180,128,.6);
  box-shadow:0 1px 0 rgba(58,42,28,.14)
}
.heroregel{max-width:34ch;font-size:1.05rem;margin:.5rem 0 1.4rem}

/* --- secties --- */
.vak{max-width:1180px;margin:0 auto 4.5rem;padding:0 1.25rem}
.vaktitel{font-family:var(--display);font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.05;margin:0 0 .4rem}
.vakregel{color:var(--ink-soft);max-width:54ch;margin:0 0 1.8rem}

.muur{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1.7rem 1.1rem}
.drager{display:block;text-decoration:none;color:inherit}
.drager .beeldvlak{
  aspect-ratio:4/5;border:1.5px dashed var(--stitch);border-radius:6px;overflow:hidden;
  background:var(--card);display:grid;place-items:center;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease
}
.drager:hover .beeldvlak,.drager:focus-visible .beeldvlak{
  border-style:solid;border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-3px)
}
.drager:focus-visible{outline:none}
.drager .beeldvlak svg{width:116%;height:auto}
.drager .wie{font-weight:700;margin:.55rem 0 .1rem}
.drager .maatje{font-family:var(--mono);font-size:.74rem;font-weight:400;color:var(--ink-soft)}
.drager .kleuren{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);line-height:1.5;margin:.45rem 0 0}
.drager .maak{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--brick);margin:.4rem 0 0;opacity:0;transition:opacity .2s ease
}
.drager:hover .maak,.drager:focus-visible .maak{opacity:1}
@media(hover:none){.drager .maak{opacity:1}}

.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1.2rem}
.detail{margin:0}
.detail .beeldvlak{aspect-ratio:1;border:1.5px dashed var(--stitch);border-radius:6px;overflow:hidden}
.detail p{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);line-height:1.6;margin:.6rem 0 0}

.verhaal{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.verhaal{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:2.8rem;align-items:start}}
.verhaal > .beeldvlak{aspect-ratio:4/5;border:1.5px dashed var(--stitch);border-radius:6px;overflow:hidden}
.verhaal .claim{font-weight:700;font-size:1.06rem;line-height:1.4;max-width:38ch;margin:.6rem 0 .55rem}
.verhaal .lede{max-width:54ch;color:var(--ink-soft);font-size:.95rem}
.verhaal .lede p{margin:.55rem 0}

.slot{text-align:center;border-top:2px dashed var(--ink);padding-top:2.6rem}
.slot .vakregel{margin-left:auto;margin-right:auto}

footer{
  max-width:1180px;margin:0 auto;padding:1.6rem 1.25rem 4rem;
  font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px dashed var(--line)
}

/* tijdelijke schakelaar tussen de twee hero's */
.herowissel{
  position:fixed;right:1rem;bottom:1rem;z-index:20;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--ink);color:var(--card);border:0;border-radius:100px;padding:.6rem 1rem;
  box-shadow:var(--shadow)
}

/* verzendstatus */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.misging{
  font-family:var(--mono);font-size:.82rem;color:var(--brick);font-weight:700;
  border:2px dashed var(--brick);border-radius:8px;padding:.7rem .9rem;margin-top:1rem
}
.misging a{color:var(--brick)}
.gelukt{border-top:2px dashed var(--ink);padding-top:2rem}
.gelukt h2{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:.4rem}
.gelukt p{max-width:46ch;color:var(--ink-soft)}
.gelukt pre{
  font-family:var(--mono);font-size:.78rem;line-height:1.6;white-space:pre-wrap;
  background:var(--card);border:2px dashed var(--stitch);border-radius:8px;
  padding:1rem;margin:1.4rem 0;color:var(--ink)
}


/* ==================== winkel dicht ==================== */
.dichtbord{display:flex;justify-content:center;padding:1.2rem 1.25rem 2.6rem}
.hangt{
  width:min(430px,92vw);transform-origin:50% 6px;
  animation:hangen 7s ease-in-out infinite alternate
}
@keyframes hangen{from{transform:rotate(-1.5deg)} to{transform:rotate(1.5deg)}}
.draden{display:block;width:100%;height:84px}
.draden path{stroke:var(--stitch);stroke-width:1.4;fill:none}
.draden circle{fill:var(--ink)}
.bordje{
  margin-top:-6px;background:#fffaf0;border:2px dashed var(--stitch);border-radius:4px;
  padding:1.7rem 1.6rem;text-align:center;box-shadow:5px 6px 0 rgba(58,42,28,.16)
}
.bordkop{font-family:var(--display);font-size:clamp(2rem,7.5vw,3.1rem);line-height:1;margin:0}
.borduitleg{color:var(--ink-soft);max-width:36ch;margin:.8rem auto 0;font-size:.95rem;line-height:1.55}
.bordopent{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  margin:1.2rem 0 0
}
.bordopent b{background:var(--brick);color:var(--card);padding:.16em .45em;font-weight:700}

/* als de winkel dicht is verdwijnt het bestelgedeelte, kiezen mag gewoon */
body.dicht #gegevens,
body.dicht .checkout,
body.dicht #verstuurhint{display:none}

.wachtlijst{border-top:2px dashed var(--ink);margin-top:2.2rem;padding-top:1.7rem}
.wachtlijst h2{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.2rem);margin:.2rem 0 .6rem}
.wachtlijst > p{color:var(--ink-soft);max-width:54ch}
.wachtkeuze{
  font-family:var(--mono);font-size:.82rem;line-height:1.7;background:var(--card);
  border:2px dashed var(--stitch);border-radius:8px;padding:.85rem 1rem;margin:1.2rem 0
}
.wachtlijst .send{margin-top:.2rem}


/* ---------- de lap stof die naar de machine vliegt ---------- */
.vliegend{
  position:fixed;z-index:40;pointer-events:none;border-radius:3px;
  background:var(--fold),var(--c);box-shadow:2px 3px 0 rgba(58,42,28,.28)
}

/* ---------- de rits gaat even open en dicht ---------- */
.zipslider{transform-origin:230px 150px}
.stage.ritst .zipslider{animation:ritsen .85s cubic-bezier(.45,0,.55,1)}
@keyframes ritsen{
  0%{transform:translateY(0)}
  42%{transform:translateY(30px)}
  100%{transform:translateY(0)}
}

/* ---------- zij dommelt weg als je niks doet ---------- */
.stage .naai{transition:none}
.stage.dommelt .naai{--tempo:1.9s}


/* ---------- haar handen gaan naar het onderdeel dat je aanpast ---------- */
.handen{transition:transform .45s cubic-bezier(.3,.8,.4,1)}
.stage.deel-sleeve .handen{transform:translate(-34px,6px)}
.stage.deel-zip .handen{transform:translate(16px,-8px)}


/* ---------- de draad die de nieuwe kleur naar de trui brengt ---------- */
.draadnaar{
  fill:none;stroke:var(--nieuw,#c1502e);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;opacity:0
}
.stage.wijzig-body   .naar-body,
.stage.wijzig-zip    .naar-zip,
.stage.wijzig-sleeve .naar-mouwL,
.stage.wijzig-sleeve .naar-mouwR{animation:draadOmlaag .72s cubic-bezier(.3,.7,.4,1)}
.stage.wijzig-sleeve .naar-mouwR{animation-delay:.06s}

@keyframes draadOmlaag{
  0%  {opacity:0;stroke-dashoffset:420}
  10% {opacity:1}
  52% {opacity:1;stroke-dashoffset:0}
  74% {opacity:1;stroke-dashoffset:0;stroke-width:4.5}
  100%{opacity:0;stroke-dashoffset:0}
}


/* Welke set draden en welke onderdelen meedoen hangt af van de schermbreedte.
   De klasse "eng" zet scene.js op de tekening zelf. */
.draden-naar-trui.eng{display:none}
svg.eng .draden-naar-trui.eng{display:block}
svg.eng .draden-naar-trui.breed{display:none}
svg.eng .garen,
svg.eng .draad{display:none}