/* ===========================================================================
   De editor. Een eigen stylesheet omdat hij het scherm helemaal overneemt.
   Op een telefoon: mockup boven, gereedschap in een blad eronder.
   Vanaf een tablet: mockup links, gereedschap in een kolom rechts.
   =========================================================================== */

body.is-app{
  height:100dvh;overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
body.is-app .site-header{display:none}

.ed{
  height:100dvh;display:flex;flex-direction:column;
  padding-top:var(--safe-t);
  background:radial-gradient(120% 70% at 50% 0%,var(--sfeer) 0%,var(--ink) 62%);
}

/* ---------------------------------------------------------------- topbar -- */
.ed__bar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(12px);
}
.ed__icon{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line-soft);background:var(--surface);color:var(--text);
  border-radius:13px;cursor:pointer;transition:background var(--t),transform var(--t),opacity var(--t);
}
.ed__icon:hover{background:var(--surface-2);text-decoration:none}
.ed__icon:active{transform:scale(.94)}
.ed__icon[disabled]{opacity:.32;pointer-events:none}

/* De weg terug is de enige knop in deze balk die je uit de editor haalt, en
   hij stond in dezelfde donkere tint als de balk zelf. In de accentkleur is
   hij meteen te vinden. */
.ed__icon--terug{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ed__icon--terug:hover{background:var(--accent-dim);border-color:var(--accent-dim)}

/* Naam en opslagstatus staan op een regel, naast elkaar. Ze stonden onder
   elkaar, en dan kan de naam per definitie niet uitlijnen met het midden van de
   knop ernaast: een blok van twee regels heeft zijn midden tussen die regels
   in. Naast elkaar valt de naam wel samen met het hart van de knop, en zie je
   meteen achter de naam dat er opgeslagen is. */
.ed__title{
  flex:1 1 auto;min-width:0;min-height:42px;
  display:flex;flex-direction:row;align-items:center;gap:9px;padding-inline:2px;
}
.ed__name{
  background:none;border:0;padding:0;flex:1 1 auto;min-width:60px;width:100%;line-height:1.15;
  font-family:var(--font-display);font-size:19px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text);
}
.ed__name::placeholder{color:var(--muted-2)}
.ed__name:focus{outline:none;color:var(--accent)}
/* De status is een klein plaatje achter de naam. Leeg neemt hij geen ruimte in,
   dus de naam schuift niet heen en weer bij elke toetsaanslag. */
.ed__save{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12px;line-height:1;color:var(--muted-2);pointer-events:none;
  transition:color var(--t),opacity var(--t);
}
.ed__save:empty{display:none}
.ed__save.is-saving{color:var(--warn)}
.ed__save.is-saved{
  color:var(--accent-ink);background:var(--accent);font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);
  animation:saved-in 160ms cubic-bezier(.2,.7,.3,1);
}
@keyframes saved-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
@media(max-width:420px){.ed__save.is-saved{padding:4px 8px;font-size:11px}}
.ed__done{min-height:42px;padding:0 18px;font-size:14.5px}

/* ----------------------------------------------------------------- stage -- */
/* flex-basis 0 in plaats van auto: anders bepaalt de canvashoogte mede de
   layout terwijl de layout de canvashoogte bepaalt, en dan loopt hij weg. */
.ed__stage{
  flex:1 1 0;position:relative;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 12px 4px;
}
.ed__guards{
  flex:1 1 0;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding-bottom:20px;
}
.guard{
  position:relative;height:100%;max-height:100%;min-width:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--t),transform var(--t),filter var(--t);
  touch-action:none;
}
.guard canvas{
  height:100%;max-height:100%;width:auto;max-width:100%;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.62));
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.guard[hidden]{display:none}
.ed__guards[data-mode="pair"] .guard:not(.is-active){opacity:.45;transform:scale(.9);cursor:pointer}
.ed__guards[data-mode="pair"] .guard:not(.is-active) canvas{filter:none}
.guard__tag{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;
  font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);background:var(--ink);padding:2px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line-soft);white-space:nowrap;
}
.guard.is-active .guard__tag{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

.ed__flat{display:none;height:100%;position:relative}
.ed.is-flat .ed__guards{display:none}
.ed.is-flat .ed__flat{display:flex;align-items:center;justify-content:center}
.ed__flat canvas{height:100%;max-height:100%;width:auto;border-radius:6px;touch-action:none;
  box-shadow:0 0 0 1px var(--line),0 22px 34px rgba(0,0,0,.5)}
.ed__flat-guides{position:absolute;inset:0;pointer-events:none}

.ed__hint{
  flex:0 0 auto;font-size:12.5px;color:var(--muted-2);text-align:center;
  padding:8px 4px 2px;min-height:30px;transition:opacity var(--t);
}
.ed__hint b{color:var(--muted)}

.ed__stagebar{
  position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:3;
}
.ed__tool{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--glas);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  color:var(--muted);cursor:pointer;transition:all var(--t);
}
.ed__tool:hover{color:var(--text);background:var(--surface-2)}
.ed__tool:active{transform:scale(.92)}
.ed__tool.is-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* --------------------------------------------------------------- zijkant -- */
.ed__sides{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:6px 12px 10px;
}
.seg{display:flex;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-pill);padding:3px;gap:3px}
.seg button{
  border:0;background:none;color:var(--muted);border-radius:var(--r-pill);
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--t);
}
.seg button.is-on{background:var(--accent);color:var(--accent-ink)}
.seg button:active{transform:scale(.96)}

.switch{display:flex;align-items:center;gap:9px;margin-left:auto;cursor:pointer;
  font-size:13px;color:var(--muted);user-select:none}
.switch input{appearance:none;-webkit-appearance:none;margin:0;width:44px;height:26px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
  position:relative;cursor:pointer;transition:background var(--t),border-color var(--t);flex:0 0 auto}
.switch input::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:var(--muted);transition:transform var(--t),background var(--t)}
.switch input:checked{background:var(--kies-vlak);border-color:var(--accent-dim)}
.switch input:checked::after{transform:translateX(18px);background:var(--accent)}

/* ------------------------------------------------------------------ blad -- */
.ed__sheet{
  flex:0 0 auto;background:var(--surface);
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  padding-bottom:var(--safe-b);
  box-shadow:0 -14px 40px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
  max-height:min(46dvh,360px);
  transition:max-height var(--t);
}
/* Ingeklapt: alleen de tabbladen, zodat de mockup het scherm krijgt. */
.ed__sheet.is-collapsed{max-height:112px}
.ed__sheet.is-collapsed .ed__panels{overflow:hidden}
.ed__grip{
  flex:0 0 auto;width:100%;padding:9px 0 3px;background:none;border:0;cursor:pointer;
  display:grid;place-items:center;
}
.ed__grip::before{content:'';display:block;width:38px;height:4px;border-radius:99px;
  background:var(--line);transition:background var(--t)}
.ed__grip:hover::before{background:var(--muted-2)}

.ed__tabs{
  flex:0 0 auto;display:flex;gap:2px;padding:4px 8px 0;
  border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none;
}
.ed__tabs::-webkit-scrollbar{display:none}
.ed__tabs button{
  flex:1 0 auto;border:0;background:none;color:var(--muted);cursor:pointer;
  padding:11px 12px 12px;font-size:13.5px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color var(--t),border-color var(--t);
  min-width:72px;
}
.ed__tabs button.is-on{color:var(--accent);border-bottom-color:var(--accent)}

.ed__panels{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ed__panel{display:none;padding:14px 14px 20px}
.ed__panel.is-on{display:block;animation:panel-in .2s ease-out}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}}

.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1 1 auto}
.ed__label{font-size:12.5px;color:var(--muted);margin:14px 0 7px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.ed__label:first-child{margin-top:0}

/* uploadvlak */
.drop{
  border:1.5px dashed var(--line);border-radius:var(--r-card);
  padding:22px 16px;text-align:center;cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.drop:hover,.drop.is-over{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
/* Staat er al een foto, dan hoeft het uploadvlak niet het halve blad te vullen. */
.drop.is-compact{padding:12px 14px;display:flex;align-items:center;gap:10px;text-align:left}
.drop.is-compact .drop__icon{margin:0}
.drop.is-compact span{display:none}
.drop__icon{color:var(--accent);margin-bottom:8px}
.drop b{display:block;font-size:15px;margin-bottom:2px}
.drop span{font-size:13px;color:var(--muted)}

.thumb{display:flex;gap:12px;align-items:center;
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:14px;padding:10px}
.thumb img{width:62px;height:62px;object-fit:cover;border-radius:10px;flex:0 0 auto;background:var(--surface-2)}
.thumb__meta{min-width:0;flex:1 1 auto;font-size:13px}
.thumb__meta b{display:block;font-size:14px}

.progress{height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:8px}
.progress__bar{height:100%;width:0;background:var(--accent);transition:width .18s linear}

/* schuiven */
.slider{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.slider label{font-size:12.5px;color:var(--muted);width:56px;flex:0 0 auto}
.slider output{font-size:12.5px;color:var(--muted);width:44px;text-align:right;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;height:32px;background:none;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);margin-top:-9px;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:0}

/* kleuren */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.swatch{
  aspect-ratio:1;border-radius:12px;border:2px solid transparent;cursor:pointer;
  position:relative;transition:transform var(--t),border-color var(--t);
  background-clip:padding-box;
}
.swatch:active{transform:scale(.92)}
.swatch.is-on{border-color:var(--accent)}
.swatch.is-on::after{content:'';position:absolute;inset:0;border-radius:9px;
  box-shadow:inset 0 0 0 2px var(--ink)}
.swatch--split{background:none!important}
.swatch--split i{position:absolute;inset:0;border-radius:9px;overflow:hidden;display:flex}
.swatch--split i span{flex:1}

.colorpick{display:flex;align-items:center;gap:10px;margin-top:10px}
.colorpick input[type=color]{width:52px;height:44px;padding:0;border:1px solid var(--line);
  border-radius:12px;background:var(--ink-2);cursor:pointer}

/* AI */
.ai-btn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:14px;
  padding:12px 14px;cursor:pointer;transition:all var(--t);color:var(--text);margin-bottom:8px;
}
.ai-btn:hover{border-color:var(--line);background:var(--surface-2)}
.ai-btn:active{transform:scale(.985)}
.ai-btn[disabled]{opacity:.45;pointer-events:none}
.ai-btn__ico{width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--kies-vlak);color:var(--accent)}
.ai-btn__txt{min-width:0;flex:1 1 auto}
.ai-btn__txt b{display:block;font-size:14.5px;font-weight:600}
.ai-btn__txt span{font-size:12.5px;color:var(--muted);display:block;line-height:1.4}
.ai-btn.is-busy .ai-btn__ico{background:var(--accent);color:var(--accent-ink)}

/* laadscherm over de mockup */
.ed__loading{
  position:absolute;inset:0;z-index:6;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(3px);
}
.ed__loading.is-on{display:flex}
.ed__loading p{margin:0;font-size:14px;color:var(--muted);text-align:center;max-width:26ch}
.ed__loading .btn{margin-top:4px}

/* eindscherm */
.done{
  position:fixed;inset:0;z-index:120;display:none;
  background:radial-gradient(120% 70% at 50% 0%,var(--sfeer-done) 0%,var(--ink) 60%);
  padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  overflow-y:auto;
}
.done.is-on{display:block;animation:panel-in .25s ease-out}
.done__in{max-width:520px;margin-inline:auto;text-align:center}
.done h2{margin-bottom:8px}
.done h2 em{font-style:normal;color:var(--accent)}
.done__img{margin:16px 0;border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.done__link{
  display:flex;align-items:center;gap:8px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:8px;margin:14px 0;flex-wrap:wrap;
}
.done__link input{
  flex:1 1 220px;background:none;border:0;color:var(--muted);font-size:13px;min-width:0;
  padding:6px 8px;text-overflow:ellipsis;
}
.done__link .btn{flex:1 1 130px;min-height:44px}
@media(min-width:520px){
  .done__link{flex-wrap:nowrap;border-radius:var(--r-pill);padding:6px 6px 6px 14px}
  .done__link .btn{flex:0 0 auto}
}
.done__actions{display:grid;gap:9px;margin-top:6px}

/* Op een telefoon vechten zes elementen om 375 pixels, en de naam van het
   ontwerp verliest: die werd halverwege een woord afgekapt. De knoppen worden
   hier iets kleiner en de tussenruimte krapper, puur om de naam ruimte te
   geven. Dat is de enige tekst in deze balk die per ontwerp verschilt. */
@media(max-width:520px){
  .ed__bar{gap:6px;padding:7px 8px}
  .ed__icon{width:38px;height:38px;border-radius:11px}
  .ed__title{min-height:38px}
  .ed__name{font-size:17px}
  .ed__done{min-height:38px;padding:0 14px;font-size:14px}
}

/* ------------------------------------------------------------ vanaf 900 -- */
@media(min-width:900px){
  .ed{flex-direction:row;flex-wrap:wrap;height:100dvh;--edbar-h:67px}
  /* Op een desktop is er ruimte, dus krijgt de balk die ook: hogere knoppen
     zouden hier niet passen, maar lucht eromheen wel. */
  .ed__bar{width:100%;padding:12px 16px;gap:10px}
  .ed__stage{flex:1 1 0;min-width:0;padding:28px}
  .ed__sides{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    background:var(--glas-2);backdrop-filter:blur(10px);border:1px solid var(--line-soft);
    border-radius:var(--r-pill);padding:6px 10px;width:max-content;z-index:4}
  .ed__sides .switch{margin-left:14px}
  .ed__sheet{
    flex:0 0 380px;max-height:none;height:calc(100dvh - var(--edbar-h));
    border-radius:0;border-top:0;border-left:1px solid var(--line);box-shadow:none;
  }
  .ed__grip{display:none}
  .ed__hint{position:absolute;bottom:74px;left:0;right:0}
  /* Ruimte onder de beschermers voor de zwevende hint en de zijkeuze. */
  .ed__guards{padding-bottom:104px}
}
@media(min-width:1280px){ .ed__sheet{flex-basis:420px} }

/* Liggend op een telefoon, of een laag venster: de hint eruit en het blad
   krijgt de ruimte, anders past er niets meer. */
@media(max-height:600px) and (max-width:899px){
  .ed__hint{display:none}
  .ed__guards{padding-bottom:16px}
  .ed__sheet{max-height:56dvh}
}

/* ---------------------------------------------------------- lettertypen -- */
.fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:420px){.fonts{grid-template-columns:repeat(4,1fr)}}
.font-btn{
  border:1.5px solid var(--line-soft);background:var(--ink-2);color:var(--text);
  border-radius:14px;padding:12px 8px 10px;cursor:pointer;text-align:center;
  transition:border-color var(--t),background var(--t),transform var(--t);
}
.font-btn:active{transform:scale(.96)}
.font-btn.is-on{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.font-btn b{display:block;font-size:22px;line-height:1.05;font-weight:inherit}
.font-btn span{display:block;font-size:11px;color:var(--muted);margin-top:5px;
  font-family:var(--font-body);font-weight:400;letter-spacing:0}

/* De maatkaarten in het gereedschapsblad staan altijd onder elkaar: naast
   elkaar wordt de leeftijdsregel onleesbaar smal. */
.ed__panel .sizes{grid-template-columns:1fr}
.ed__panel .size-card{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
.ed__panel .size-card__letter{font-size:30px;width:32px}
.ed__panel .size-card__check{top:50%;transform:translateY(-50%)}

/* In het stappenplan staat elke keuze onder elkaar over de volle breedte. Naast
   elkaar wordt de uitleg onder de kop onleesbaar smal, en dit zijn nu net de
   schermen waar iemand rustig moet kunnen kiezen. */
.wiz .pick--2{grid-template-columns:1fr}

/* Wat lucht boven een vervolgvraag, zodat die niet aan de keuzeknoppen plakt. */
.wiz .ed__label{margin-top:24px}

/* In het stappenplan staan de maten altijd onder elkaar over de volle breedte:
   een rij van drie maakt de leeftijdsregel onleesbaar smal, en dit is nu net de
   stap waar iemand rustig moet kunnen kiezen. */
.wiz .sizes{grid-template-columns:1fr;gap:10px}
.wiz .size-card{
  flex-direction:row;align-items:center;gap:16px;width:100%;padding:16px 18px;min-height:74px;
}
.wiz .size-card__letter{font-size:34px;width:40px}
.wiz .size-card__body{padding-right:30px}
.wiz .size-card__age{font-size:16px}
.wiz .size-card__meta{font-size:13.5px}
.wiz .size-card__check{top:50%;transform:translateY(-50%);width:24px;height:24px}

/* ===========================================================================
   Stappenplan. Staat over de editor heen bij een nieuw ontwerp: eerst een paar
   korte vragen, daarna sta je in de configurator met alles al ingevuld.
   =========================================================================== */
.wiz{
  position:fixed;inset:0;z-index:150;display:none;flex-direction:column;
  background:radial-gradient(130% 80% at 50% 0%,var(--sfeer-wiz) 0%,var(--ink) 58%);
  padding-top:var(--safe-t);
}
.wiz.is-on{display:flex;animation:panel-in .22s ease-out}
/* Gaat het stappenplan meteen bij het laden open, dan hoort er geen overgang
   bij: het komt nergens overheen. Mét die overgang zie je 220 milliseconden lang
   de configurator erdoorheen, en dat leest als een pagina die twee keer laadt. */
.wiz.wiz--direct{animation:none}
/* Zolang het stappenplan open staat hoeft de configurator er niet te zijn. Dat
   scheelt tekenwerk en het sluit uit dat er iets doorheen schemert. */
body.wiz-open .ed__stage,body.wiz-open .ed__sheet{visibility:hidden}

.wiz__bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px}
.wiz__dots{flex:1 1 auto;display:flex;gap:5px;justify-content:center}
.wiz__dot{width:100%;max-width:34px;height:4px;border-radius:99px;background:var(--line);
  transition:background var(--t)}
.wiz__dot.is-done{background:var(--muted-2)}
.wiz__dot.is-on{background:var(--accent)}
.wiz__skip{background:none;border:0;color:var(--muted);font-size:13.5px;cursor:pointer;
  padding:8px 6px;border-radius:10px}
.wiz__skip:hover{color:var(--text)}

.wiz__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 16px 12px;
}
.wiz__in{max-width:520px;margin-inline:auto}
.wiz__count{font-family:var(--font-display);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.wiz h2{font-size:clamp(27px,7.5vw,38px);margin-bottom:8px}
.wiz__lead{color:var(--muted);font-size:15px;margin-bottom:20px}

.wiz__foot{
  flex:0 0 auto;padding:12px 16px calc(14px + var(--safe-b));
  border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--ink) 80%,transparent);
  backdrop-filter:blur(10px);
}
.wiz__foot .wiz__in{display:flex;gap:9px}
.wiz__foot .btn{flex:1 1 auto}

/* grote keuzeknoppen */
.pick{display:grid;gap:10px}
.pick--2{grid-template-columns:1fr 1fr}
/* Op een smal scherm passen twee keuzes naast elkaar niet meer leesbaar. */
@media(max-width:380px){.pick--2{grid-template-columns:1fr}}
.pick-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  border:1.5px solid var(--line-soft);background:var(--surface);color:var(--text);
  border-radius:var(--r-card);padding:16px;cursor:pointer;text-align:left;
  transition:border-color var(--t),background var(--t),transform var(--t);min-height:76px;
  justify-content:center;
}
.pick-btn:active{transform:scale(.985)}
.pick-btn.is-on{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.pick-btn b{font-size:16px;font-weight:600}
.pick-btn span{font-size:13px;color:var(--muted);line-height:1.4}
.pick-btn__art{display:flex;gap:3px;width:100%;height:34px;margin-bottom:7px;
  border-radius:8px;overflow:hidden}
.pick-btn__art i{flex:1;display:block}

/* clubzoeker */
.clubsearch{position:relative;margin-bottom:14px}
.clubsearch input{padding-left:40px}
.clubsearch__ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted-2);pointer-events:none}
.clubs{display:grid;gap:7px;max-height:230px;overflow-y:auto;overscroll-behavior:contain}
.club{
  display:flex;align-items:center;gap:11px;width:100%;
  border:1px solid var(--line-soft);background:var(--ink-2);color:var(--text);
  border-radius:12px;padding:9px 12px;cursor:pointer;text-align:left;
  transition:border-color var(--t),background var(--t);
}
.club:hover{background:var(--surface-2)}
.club.is-on{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.club__cols{display:flex;width:34px;height:26px;border-radius:7px;overflow:hidden;flex:0 0 auto}
.club__cols i{flex:1}
.club__txt{min-width:0}
.club__txt b{display:block;font-size:14.5px;font-weight:600}
.club__txt span{display:block;font-size:12px;color:var(--muted)}
.clubs__empty{color:var(--muted);font-size:13.5px;padding:10px 2px}

/* kleurvak "zelf kiezen" */
.swatch--custom{
  position:relative;overflow:hidden;
  background:conic-gradient(#FF5A5A,#FFD32A,#4BE3A0,#3FA9F5,#A855F7,#FF5A5A)!important;
}
.swatch--custom input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
.swatch--custom::before{
  content:'';position:absolute;inset:5px;border-radius:7px;background:var(--ink-2);
}
.swatch--custom::after{
  content:'+';position:absolute;inset:0;display:grid;place-items:center;
  font-size:20px;font-weight:600;color:var(--text);
}
.swatch--custom.is-on{border-color:var(--accent)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.pattern{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pattern-btn{
  border:1.5px solid var(--line-soft);background:var(--ink-2);border-radius:12px;
  padding:6px;cursor:pointer;transition:border-color var(--t),transform var(--t);
}
.pattern-btn:active{transform:scale(.94)}
.pattern-btn.is-on{border-color:var(--accent)}
.pattern-btn svg,
.pattern-btn canvas{width:100%;height:auto;display:block;border-radius:6px}
.pattern-btn span{display:block;font-size:10.5px;color:var(--muted);margin-top:4px;text-align:center}

/* De voortgangsbalk in het laadscherm over de mockup. */
.ed__progress{width:min(240px,70%);margin-top:2px}
.ed__loading p{white-space:pre-line}
.drop.is-busy{opacity:.5;pointer-events:none}

/* De kiezer is een lijst met groepen; elke groep heeft zijn eigen raster.
   De groepskop staat een niveau lager dan "Patroon", anders lijken het twee
   losse koppen boven elkaar. */
.pattern-groups{display:block}
.pattern-group{
  margin:16px 0 8px;font-size:11.5px;letter-spacing:.10em;color:var(--muted-2);
  text-transform:uppercase;font-weight:600;
}
.pattern-group:first-child{margin-top:2px}


/* -------------------------------------------------- verklaring over de foto --
   Staat in het fotopaneel, direct onder de foto: dat is het moment waarop je
   besluit iemands beeld te gebruiken. Op het eindscherm was het een drempel
   vlak voor de finish, en dat leest als een formaliteit in plaats van als de
   vraag die het is. */
.consent{
  margin-top:14px;padding:12px 13px;border-radius:var(--r-panel);
  background:var(--surface);border:1px solid var(--line-soft);
  transition:border-color var(--t),background var(--t);
}
.consent .check__text{font-size:13px;line-height:1.5;color:var(--muted)}
.consent .check__text b{color:var(--text)}
.consent__log{margin:8px 0 0 30px;font-size:12px;color:var(--ok)}
/* Als iemand toch bij het afronden komt zonder verklaring, wijst dit hem aan. */
.consent.is-asking{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);animation:consent-wink 1.6s ease}
@keyframes consent-wink{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 3px rgba(198,255,61,.25)}}

/* ------------------------------------------------------------- uitgangen -- */
/* Het eindscherm was een doodlopende straat: je had iets afgerond en kon
   daarna nergens heen. */
.done__exits{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.done__exits a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);font-size:14px;
}
.done__exits a:hover{color:var(--text);text-decoration:none}
.done__exits svg{color:var(--accent)}

/* De knop rechtsboven zegt nu wat hij doet in plaats van "Klaar". Op een smal
   scherm past die tekst niet naast de rest van de balk, dus daar staat de korte
   variant; het blijft dezelfde knop op dezelfde plek. */
.ed__done-kort{display:none}
@media(max-width:720px){
  .ed__done-lang{display:none}
  .ed__done-kort{display:inline}
}
/* Op een telefoon zweeft de sheet over het product heen en kon de balk
   wegvallen; hij blijft nu boven alles staan zodat opslaan altijd bereikbaar is. */
@media(max-width:899px){
  .ed__bar{position:sticky;top:0;z-index:12}
}

/* ------------------------------------------------- stappenplan, aanvullend --
   De knop Verder blijft uit tot de vraag beantwoord is. Uitgegrijsd en niet
   verborgen: je moet kunnen zien dat hij er is en dat er nog iets van je
   gevraagd wordt. */
.wiz__foot .btn[disabled]{opacity:.4;pointer-events:none}
.wiz__foot .btn.is-wiebel{animation:wiebel 380ms cubic-bezier(.36,.07,.19,.97)}
@keyframes wiebel{
  10%,90%{transform:translateX(-2px)}
  30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-6px)}
}
/* Een eerder beantwoorde stap is aanklikbaar in de balk bovenin. */
.wiz__dot[role="button"]{cursor:pointer}
.wiz__dot[role="button"]:hover{background:var(--accent-dim)}

/* "Meest gekozen" is een aanwijzing, geen voorselectie: het staat er als klein
   vlaggetje in plaats van als aangevinkte knop. */
.pick-btn{position:relative}
.pick-btn__vlag{
  position:absolute;top:-9px;right:12px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
}
.wiz__na{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}

/* Het nummerraster: tikken in plaats van typen, want op een telefoon is een
   toetsenbord voor twee cijfers meer werk dan twintig knoppen. */
.nummers{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
@media(min-width:420px){.nummers{grid-template-columns:repeat(7,1fr)}}
.nummer{
  min-height:46px;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-display);font-size:18px;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.nummer:hover{border-color:var(--muted-2)}
.nummer.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nummer--zelf{grid-column:span 2;font-size:14px;letter-spacing:.06em}
@media(min-width:420px){.nummer--zelf{grid-column:span 2}}

/* Tot het stappenplan er staat is de configurator onzichtbaar. Zonder dit zag
   je eerst een halve seconde scheenbeschermers en daarna een sprong naar stap
   1: het lijkt alsof je op de verkeerde plek terechtkomt en meteen weggestuurd
   wordt. De klasse komt van de server, dus dit geldt al bij de eerste opmaak,
   en gaat eraf zodra het stappenplan open staat. */
body.is-starting .ed{visibility:hidden}
body.is-starting::after{
  content:'';position:fixed;inset:0;background:var(--ink);z-index:60;
}

/* Hoeveel tekens er nog in passen. Rustig van kleur tot je aan de grens zit;
   dan is het nieuws dat er niets meer bij kan. */
.tekenteller{
  margin:7px 2px 0;text-align:right;
  font-family:var(--mono, ui-monospace, monospace);font-size:12px;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.tekenteller.is-vol{color:var(--warn)}

/* Een logo is vaak wit. Op een lichte miniatuur zie je dan niets, dus daar een
   donker ruitjespatroon achter: zo zie je meteen wat doorzichtig is. */
#logoThumb{
  background-color:#1A222C;
  background-image:
    linear-gradient(45deg, var(--dam) 25%, transparent 25%, transparent 75%, var(--dam) 75%),
    linear-gradient(45deg, var(--dam) 25%, transparent 25%, transparent 75%, var(--dam) 75%);
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
  object-fit:contain;
}

/* ------------------------------------------------ rechten vóór het uploaden --
   De vraag hoort gesteld te worden op het moment dat je een foto kiest, niet
   nadat hij al verstuurd is. Vandaar een venster dat je moet beantwoorden: de
   knop blijft uit tot het vinkje staat, en sluiten betekent dat er niets gaat.
   -------------------------------------------------------------------------- */
.rechten{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--s3) + var(--safe-t)) var(--pad) calc(var(--s3) + var(--safe-b))}
.rechten[hidden]{display:none}
.rechten__achter{position:absolute;inset:0;background:rgba(6,9,13,.72);backdrop-filter:blur(4px)}
.rechten__vak{
  position:relative;width:100%;max-width:480px;max-height:100%;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:var(--s3);
  animation:rechten-in 180ms cubic-bezier(.2,.7,.3,1);
}
@keyframes rechten-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.rechten__kop{margin:0 0 var(--s1);font-size:20px;line-height:1.25}
.rechten__lead{margin:0 0 var(--s2);color:var(--muted)}
.rechten__check{margin-bottom:var(--s2)}
.rechten__klein{margin:0 0 var(--s3);font-size:13px;line-height:1.5;color:var(--muted-2)}
.rechten__knoppen{display:flex;gap:var(--s1);justify-content:flex-end;flex-wrap:wrap}
.rechten__knoppen .btn{flex:1 1 auto;justify-content:center}
@media(min-width:420px){.rechten__knoppen .btn{flex:0 0 auto}}