/* WallCatcher Foto-uploader, versie 0.2
   Rustig, ruim en licht, in lijn met de winkel: sage #9AA285, warme neutralen,
   ronde hoeken van 12px zoals de knoppen elders. Alles staat onder .wcfu-scherm
   omdat het thema elk button-element zwart kleurt. */

.wcfu-scherm{
  position:fixed; inset:0; z-index:99999;
  background:rgba(38,40,34,.42); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overscroll-behavior:contain;
  animation:wcfu-in .22s ease both;
}
.wcfu-scherm[hidden]{display:none !important}
@keyframes wcfu-in{from{opacity:0}to{opacity:1}}
@keyframes wcfu-op{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}

.wcfu-venster{
  background:#FCFBF9; width:100%; max-width:880px; max-height:100%;
  display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
  box-shadow:0 34px 90px -24px rgba(34,36,30,.45), 0 2px 8px rgba(34,36,30,.08);
  color:#2A2C28; font-size:15px; line-height:1.55;
  animation:wcfu-op .26s cubic-bezier(.2,.7,.3,1) both;
}

/* ── kop ─────────────────────────────────────────────────────────── */
.wcfu-kop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:26px 30px 18px;
}
.wcfu-titel{display:grid; gap:4px; min-width:0}
.wcfu-titel b{font-size:20px; font-weight:400; letter-spacing:.01em}
.wcfu-titel span{font-size:13.5px; color:#77786F}

.wcfu-scherm .wcfu-sluit{
  appearance:none !important; background:#fff !important; border:1px solid #E6E2D9 !important;
  cursor:pointer; box-shadow:none !important; width:38px !important; height:38px !important;
  border-radius:50% !important; padding:0 !important; margin:-2px -4px 0 0; flex:none;
  font-size:17px !important; line-height:1 !important; color:#6E6F66 !important; min-height:0 !important;
  letter-spacing:normal !important; text-transform:none !important; font-weight:400 !important;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.wcfu-scherm .wcfu-sluit:hover{
  background:#9AA285 !important; border-color:#9AA285 !important; color:#fff !important;
  transform:scale(1.06);
}
.wcfu-scherm .wcfu-sluit:hover{background:#F1EFE9; color:#2A2C28}

/* ── vormkeuze ───────────────────────────────────────────────────── */
.wcfu-vormen{display:flex; gap:8px; flex-wrap:wrap; margin:0 30px 14px}
.wcfu-vormen[hidden]{display:none !important}
.wcfu-scherm .wcfu-vorm{
  appearance:none !important; cursor:pointer; background:#fff !important;
  border:1px solid #E6E2D9 !important; color:#6E6F66 !important;
  padding:9px 18px !important; border-radius:20px !important; min-height:0 !important;
  font-family:inherit !important; font-size:13.5px !important; font-weight:400 !important;
  line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important;
  box-shadow:none !important; width:auto !important;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.wcfu-scherm .wcfu-vorm:hover{
  border-color:#9AA285 !important; color:#7D8A6A !important; transform:translateY(-1px);
}
.wcfu-scherm .wcfu-vorm[aria-pressed="true"]{
  background:#9AA285 !important; border-color:#9AA285 !important; color:#fff !important;
}

/* De oversteek naar de set, en vanaf de set terug. Staat in dezelfde strook als
   de vormen maar is geen vorm: je gaat naar een ander product. Vandaar een eigen
   vorm met een pijltje en een streepje ervoor. */
.wcfu-scherm .wcfu-oversteek{
  appearance:none !important; cursor:pointer; background:none !important;
  border:0 !important; color:#7D8A6A !important;
  padding:9px 4px 9px 18px !important; min-height:0 !important; margin-left:6px;
  font-family:inherit !important; font-size:13.5px !important; font-weight:400 !important;
  line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important;
  box-shadow:none !important; width:auto !important; border-radius:0 !important;
  position:relative; text-decoration:none !important;
  transition:color .18s;
}
.wcfu-scherm .wcfu-oversteek::before{
  content:""; position:absolute; left:0; top:50%; width:1px; height:18px;
  margin-top:-9px; background:#E6E2D9;
}
/* Op de set staat hij alleen in de strook, en dan scheidt dat streepje niets. */
.wcfu-scherm .wcfu-oversteek:first-child{padding-left:4px !important; margin-left:0}
.wcfu-scherm .wcfu-oversteek:first-child::before{display:none}
.wcfu-scherm .wcfu-oversteek::after{content:" \2192"}
.wcfu-scherm .wcfu-oversteek:hover{color:#5F6B4E !important; background:none !important}
.wcfu-scherm .wcfu-oversteek:disabled{color:#A8AA9E !important; cursor:default}
.wcfu-scherm .wcfu-oversteek:disabled::after{content:""}

@media (max-width:640px){
  .wcfu-vormen{margin:0 16px 12px}
  .wcfu-scherm .wcfu-oversteek{padding-left:14px !important; margin-left:2px}
}

/* ── het doek ────────────────────────────────────────────────────── */
.wcfu-doek{
  position:relative; margin:0 30px; border-radius:10px; overflow:hidden;
  background:#F3F1EB; touch-action:none; cursor:grab;
  flex:0 1 auto; min-height:240px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(42,44,40,.06);
}
.wcfu-doek.pakt{cursor:grabbing}
.wcfu-doek.sleep{box-shadow:inset 0 0 0 2px #9AA285}
/* Het doek vullen, niet op ware grootte tonen.
   De overlay van de muurcirkel is 800x600 en die van staand, liggend en de set
   1600x1200. Met width:auto bleef er bij de muurcirkel links en rechts een
   streep van het doek over, terwijl staand wel tot de rand liep. Alle vier zijn
   vier staat tot drie, dus op breedte vullen houdt de verhouding.
   object-fit vangt het geval af waarin het venster zo laag is dat de hoogte
   begrenst: dan wordt het beeld kleiner in plaats van uitgerekt. */
#wcfu-canvas{display:block; width:100%; height:auto; max-height:100%; object-fit:contain}

.wcfu-leeg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center;
  padding:40px 28px; background:#F3F1EB;
}
.wcfu-leeg p{margin:0; color:#77786F; font-size:14px; max-width:32ch}
/* Deze knop staat in een kolom, dus flex:1 zou hem over de hele hoogte
   uitrekken. Op een telefoon werd dat een groen blok van een halve pagina. */
.wcfu-scherm .wcfu-leeg .wcfu-actie{flex:0 0 auto; width:auto !important; max-width:100%}

.wcfu-uitleg{
  margin:14px 30px 0; font-size:13px; color:#8A8B81; text-align:center;
}
.wcfu-uitleg[hidden]{display:none !important}

/* ── het voorbeeld downloaden ────────────────────────────────────────
   Rechtsboven in de kop, in de witruimte naast het kruisje. Een rustige link en
   geen knop: Klaar moet de enige opvallende actie blijven. Dit is voor de klant
   die zijn uitsnede wil bewaren of aan iemand wil laten zien. */
.wcfu-scherm .wcfu-download{
  appearance:none !important; margin:6px 4px 0 auto; padding:4px 2px;
  background:none !important; border:0 !important; box-shadow:none !important;
  width:auto !important; min-height:0 !important; flex:none;
  font-family:inherit !important; font-size:13px !important; font-weight:400 !important;
  line-height:1.2 !important; letter-spacing:.01em !important; text-transform:none !important;
  color:#8A8B81 !important; cursor:pointer;
  text-decoration:underline !important; text-underline-offset:3px;
  transition:color .18s ease;
}
.wcfu-scherm .wcfu-download:hover{color:#3D3D34 !important; background:none !important}
.wcfu-download[hidden]{display:none !important}

/* ── laden, op de plek van de foto ───────────────────────────────────
   De klant wacht hier echt op: de foto komt pas in de vorm als het bestand
   compleet op de server staat. Dus geen streepje van drie pixels maar een
   balk die je van een meter afstand nog ziet bewegen. */
/* Een melkwitte laag over het doek.
   Zonder dat staat de tekst zo over de foto die er al ligt, en bij een donker
   beeld is er dan niets van te lezen. Half doorzichtig, zodat je je ontwerp er
   nog doorheen ziet en het duidelijk is dat het er nog staat. */
.wcfu-laden{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px; text-align:center;
  background:rgba(252,251,249,.82);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* Geen doorzichtigheid? Dan liever helemaal dicht dan onleesbaar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wcfu-laden{background:rgba(252,251,249,.94)}
}
.wcfu-laden:not([hidden]){display:flex}
.wcfu-ladenkop{margin:0; font-size:16px; color:#2A2C28; font-weight:500}
.wcfu-ladenbalk{
  width:min(280px,80%); height:8px; border-radius:5px;
  background:#E6E4DC; overflow:hidden;
}
.wcfu-ladenbalk i{
  display:block; height:100%; width:0; border-radius:5px;
  background:#9AA285; transition:width .3s ease;
}
/* Bij het overstekken naar een ander product weten we niet hoe lang het duurt:
   het ontwerp moet nog worden weggeschreven en dan volgt de nieuwe pagina. Een
   percentage zou gelogen zijn, dus loopt de balk heen en weer. */
.wcfu-ladenbalk.bezig i{
  width:40%; transition:none;
  animation:wcfu-heen 1.1s ease-in-out infinite alternate;
}
@keyframes wcfu-heen{from{transform:translateX(-100%)} to{transform:translateX(250%)}}
.wcfu-ladenklein{margin:0; font-size:13px; color:#6E6F66; max-width:32ch}
.wcfu-laden .wcfu-actie{margin-top:4px}

/* ── stille voortgang van de upload ──────────────────────────────── */
.wcfu-status{margin:12px 30px 0; font-size:13px; color:#8A8B81}
.wcfu-status[hidden]{display:none !important}
.wcfu-status i{
  display:block; height:3px; margin-top:7px; border-radius:2px;
  background:#9AA285; width:0; transition:width .25s ease;
}
@media (max-width:640px){.wcfu-status{margin-left:16px; margin-right:16px}}

/* ── melding, alleen als het echt nodig is ───────────────────────── */
.wcfu-hint{
  margin:16px 30px 0; padding:14px 16px 14px 18px; border-radius:10px;
  background:#FDF7E8; border:1px solid #F0E2BE; border-left:3px solid #DC9814;
  font-size:14px; line-height:1.5; color:#6E6A5E;
}
.wcfu-hint b{color:#B07510; font-weight:500}
.wcfu-hint[hidden]{display:none !important}

/* ── bedieningsbalk ──────────────────────────────────────────────── */
.wcfu-bedien{
  display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center;
  padding:22px 30px 26px; margin-top:18px;
  border-top:1px solid #EDEAE2; background:#fff;
}
.wcfu-zoom{display:flex; align-items:center; gap:10px; flex:1 1 200px; min-width:0}
/* De schuif zelf moet meegroeien. Zonder dit houdt hij zijn eigen breedte van
   ongeveer 130 punten en blijft de rest van de rij leeg; op een telefoon liep
   hij daardoor maar tot het midden. */
.wcfu-zoom input[type=range]{flex:1 1 auto; width:100% !important; min-width:0; margin:0}
.wcfu-scherm .wcfu-stap{
  appearance:none !important; border:1px solid #E3DFD5 !important; background:#fff !important;
  color:#6E6F66 !important; width:34px !important; height:34px !important; min-height:0 !important;
  flex:none; border-radius:50% !important; padding:0 !important; box-shadow:none !important;
  font-size:17px !important; line-height:1 !important; cursor:pointer;
  letter-spacing:normal !important; text-transform:none !important; font-weight:400 !important;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.wcfu-scherm .wcfu-stap:hover{
  border-color:#9AA285 !important; background:#9AA285 !important; color:#fff !important;
  transform:scale(1.08);
}
.wcfu-zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:#9AA285; border:3px solid #fff; cursor:grab;
  box-shadow:0 2px 7px rgba(42,44,40,.3);
}
.wcfu-zoom input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#9AA285;
  border:3px solid #fff; cursor:grab; box-shadow:0 1px 4px rgba(42,44,40,.28);
}

/* Verwijderen staat sinds 0.7.3 BINNEN deze rij. Daarvoor stond het ertussen de
   zoomschuif en de knoppen, en zodra de balk te smal werd bleef het als losse
   regel boven de knoppen hangen. Nu breekt de hele groep in één keer af. */
.wcfu-knoppen{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-left:auto; justify-content:flex-end;
}

.wcfu-scherm .wcfu-actie,
.wcfu-scherm .wcfu-stil{
  appearance:none !important; cursor:pointer; min-height:0 !important; width:auto !important;
  font-family:inherit !important; font-weight:400 !important; line-height:1 !important;
  letter-spacing:.01em !important; text-transform:none !important; border-radius:12px !important;
  text-decoration:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             transform .2s ease, box-shadow .2s ease;
}
.wcfu-scherm .wcfu-actie{
  background:#9AA285 !important; color:#fff !important; border:0 !important;
  padding:16px 32px !important; font-size:15px !important;
  box-shadow:0 2px 8px rgba(122,133,100,.28) !important;
}
.wcfu-scherm .wcfu-actie:hover:not(:disabled){
  background:#7D8A6A !important; color:#fff !important;
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 22px -6px rgba(90,100,72,.5) !important;
}
.wcfu-scherm .wcfu-actie:active:not(:disabled){transform:translateY(0) scale(1)}
.wcfu-scherm .wcfu-actie:disabled{
  background:#DCDDD4 !important; color:#fff !important; cursor:default;
  box-shadow:none !important; transform:none;
}
.wcfu-scherm .wcfu-stil{
  background:#fff !important; color:#6E6F66 !important; border:1px solid #E6E2D9 !important;
  padding:15px 22px !important; font-size:14.5px !important; box-shadow:none !important;
}
.wcfu-scherm .wcfu-stil:hover{
  background:#fff !important; color:#7D8A6A !important; border-color:#9AA285 !important;
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 6px 16px -6px rgba(90,100,72,.35) !important;
}
.wcfu-scherm .wcfu-stil:active{transform:none}
.wcfu-scherm .wcfu-actie:focus-visible,
.wcfu-scherm .wcfu-stil:focus-visible,
.wcfu-scherm .wcfu-stap:focus-visible,
.wcfu-scherm .wcfu-sluit:focus-visible{outline:2px solid #2A2C28; outline-offset:2px}

/* ── verwijderen ─────────────────────────────────────────────────── */
.wcfu-scherm .wcfu-wis{
  appearance:none !important; cursor:pointer; background:none !important; border:0 !important;
  color:#9A9488 !important; padding:15px 12px !important; min-height:0 !important;
  margin-right:2px;
  font-family:inherit !important; font-size:14px !important; font-weight:400 !important;
  line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important;
  box-shadow:none !important; width:auto !important; border-radius:12px !important;
  transition:color .18s;
}
.wcfu-scherm .wcfu-wis:hover{color:#A6402A !important; background:none !important}
.wcfu-scherm .wcfu-wis[hidden]{display:none !important}

/* ── akkoord op de rechten ───────────────────────────────────────── */
.wcfu-akkoord{
  display:flex; align-items:flex-start; gap:11px; margin:16px 30px 0;
  padding:14px 16px; border-radius:10px; background:#F6F5F0; border:1px solid #ECE9E0;
  font-size:13.5px; line-height:1.5; color:#5E5F57; cursor:pointer;
}
.wcfu-akkoord[hidden]{display:none !important}
.wcfu-scherm .wcfu-akkoord input[type=checkbox]{
  appearance:none !important; -webkit-appearance:none !important;
  width:20px !important; height:20px !important; flex:none; margin:1px 0 0 !important;
  border:1.5px solid #C9C5B8 !important; border-radius:5px !important; background:#fff !important;
  cursor:pointer; position:relative; transition:background .15s, border-color .15s;
}
.wcfu-scherm .wcfu-akkoord input[type=checkbox]:checked{
  background:#9AA285 !important; border-color:#9AA285 !important;
}
.wcfu-scherm .wcfu-akkoord input[type=checkbox]:checked::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.wcfu-scherm .wcfu-akkoord input[type=checkbox]:focus-visible{outline:2px solid #2A2C28; outline-offset:2px}
.wcfu-akkoord a{color:#7D8A6A; text-decoration:underline; text-underline-offset:2px}

/* ── de knop op de productpagina ─────────────────────────────────── */
a.wcfu-knop{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  padding:16px 20px; margin:0 0 18px; text-decoration:none;
  line-height:1.2; cursor:pointer;
}
a.wcfu-knop:hover{text-decoration:none}

/* ── telefoon ────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* De gele melding nam een kwart van het scherm. Kleinere letter, minder lucht
     eromheen, en de vetgedrukte aanhef op dezelfde regel. */
  .wcfu-hint{
    margin-top:12px; padding:10px 12px 10px 13px; font-size:13px; line-height:1.45;
    border-radius:8px;
  }
  .wcfu-uitleg{font-size:12.5px; margin-top:10px}

  .wcfu-scherm{padding:0; align-items:stretch}
  .wcfu-venster{max-width:none; height:100%; border-radius:0}
  .wcfu-kop{padding:18px 20px 12px}
  .wcfu-titel b{font-size:18px}
  .wcfu-doek{margin:0 16px; flex:1 1 auto}
  .wcfu-hint, .wcfu-uitleg, .wcfu-akkoord{margin-left:16px; margin-right:16px}
  .wcfu-bedien{padding:16px 16px 20px; gap:12px; margin-top:14px}
  .wcfu-zoom{flex:1 1 100%}

  /* Op een telefoon in twee kolommen, met een vaste plek per knop in plaats
     van laten afbreken waar het uitkomt. De volgorde in de HTML is anders dan
     wat hier het prettigst leest, vandaar order. */
  .wcfu-knoppen{
    margin-left:0; width:100%;
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .wcfu-scherm .wcfu-knoppen .wcfu-stil,
  .wcfu-scherm .wcfu-knoppen .wcfu-actie{width:100% !important; padding-left:12px !important; padding-right:12px !important}
  .wcfu-scherm #wcfu-ander{order:1}
  .wcfu-scherm #wcfu-passend{order:2}
  .wcfu-scherm #wcfu-klaar{order:3; grid-column:1 / -1; padding:16px 20px !important}
  .wcfu-scherm .wcfu-wis{order:4; grid-column:1 / -1; padding:10px !important}

}
@media (prefers-reduced-motion:reduce){
  .wcfu-scherm, .wcfu-venster{animation:none}
  .wcfu-ladenbalk.bezig i{animation:none; width:100%}
  *{transition:none !important}
}

/* ── cirkelkeuze bij een set ─────────────────────────────────────────
   Drie gaten in één overlay, dus drie foto's. Deze strook zegt welke cirkel
   je nu bewerkt en welke er nog leeg zijn. Bij een product met één vorm staat
   hij er niet. */
.wcfu-cirkels{display:flex; gap:8px; flex-wrap:wrap; margin:0 30px 14px; align-items:center}
.wcfu-cirkels[hidden]{display:none !important}
.wcfu-scherm .wcfu-cirkel{
  appearance:none !important; cursor:pointer; background:#fff !important;
  border:1px solid #E6E2D9 !important; color:#6E6F66 !important;
  padding:8px 16px 8px 12px !important; border-radius:20px !important; min-height:0 !important;
  font-family:inherit !important; font-size:13.5px !important; font-weight:400 !important;
  line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important;
  box-shadow:none !important; width:auto !important;
  display:inline-flex !important; align-items:center; gap:8px;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.wcfu-scherm .wcfu-cirkel:hover{
  border-color:#9AA285 !important; color:#7D8A6A !important; transform:translateY(-1px);
}
.wcfu-scherm .wcfu-cirkel[aria-pressed="true"]{
  background:#9AA285 !important; border-color:#9AA285 !important; color:#fff !important;
}
/* Het bolletje zegt of er al een foto in zit. Een open rondje is leeg, een
   gevuld rondje met vinkje is klaar. */
.wcfu-scherm .wcfu-cirkel i{
  width:16px; height:16px; border-radius:50%; flex:0 0 16px;
  border:1.5px solid currentColor; opacity:.55; position:relative; font-style:normal;
}
.wcfu-scherm .wcfu-cirkel.gevuld i{opacity:1; background:currentColor}
.wcfu-scherm .wcfu-cirkel.gevuld i::after{
  content:""; position:absolute; left:4.5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(42deg);
}
.wcfu-scherm .wcfu-cirkel[aria-pressed="true"].gevuld i::after{border-color:#9AA285}
.wcfu-cirkels .wcfu-cirkeltekst{font-size:13px; color:#8A8B81; margin-left:2px}
/* Het korte opschrift is er alleen voor smalle schermen. */
.wcfu-scherm .wcfu-cirkel .wcfu-kort{display:none}

/* Volgende cirkel. Staat rechts in dezelfde strook, want hij gaat over de
   cirkels. Onderin bij Klaar maakte hij de balk te vol en viel Verwijderen op
   een eigen regel daarboven. */
.wcfu-scherm .wcfu-volgendecirkel{
  appearance:none !important; cursor:pointer; margin-left:auto;
  background:#fff !important; border:1px solid #9AA285 !important; color:#7D8A6A !important;
  padding:9px 16px !important; border-radius:20px !important; min-height:0 !important;
  font-family:inherit !important; font-size:13.5px !important; font-weight:400 !important;
  line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important;
  box-shadow:none !important; width:auto !important;
  transition:background .18s, color .18s, transform .18s;
}
.wcfu-scherm .wcfu-volgendecirkel:hover{
  background:#9AA285 !important; color:#fff !important; transform:translateY(-1px);
}
.wcfu-scherm .wcfu-volgendecirkel[hidden]{display:none !important}
/* Op een telefoon. Dit blok MOET onder de gewone regels voor de strook staan.
   In 0.9.1 stond het halverwege het bestand; bij gelijke specificiteit wint dan
   de regel die later komt, en dat waren de gewone. Beide opschriften bleven
   daardoor verborgen en Dennis zag alleen lege rondjes. Het controlescript kijkt
   hier nu naar. */
@media (max-width:640px){
  /* De cirkelknoppen even breed naast elkaar, Volgende cirkel eronder. */
  .wcfu-cirkels{
    display:grid; grid-template-columns:repeat(var(--wcfu-kolommen, 3), minmax(0, 1fr));
    gap:6px; margin:0 16px 12px; align-items:stretch;
  }
  .wcfu-scherm .wcfu-cirkel{
    width:100% !important; justify-content:center; gap:6px;
    padding:8px 6px !important; font-size:12.5px !important;
  }
  .wcfu-scherm .wcfu-cirkel .wcfu-lang{display:none}
  .wcfu-scherm .wcfu-cirkel .wcfu-kort{display:inline}
  .wcfu-scherm .wcfu-volgendecirkel{
    grid-column:1 / -1; margin-left:0; width:100%;
    justify-content:center; text-align:center;
  }
  /* De teller staat al bij de bolletjes. Twee keer hetzelfde is een regel te veel. */
  .wcfu-cirkels .wcfu-cirkeltekst{display:none}
}


/* ── De melding ligt óver het doek, niet eronder ─────────────────────────
   Dennis, 15 september: de melding duwde op een telefoon de knoppen onder de
   rand. Nu neemt hij geen ruimte in de rij in. Op de laptop ook, zodat het venster
   daar niet meer verspringt als hij verschijnt. */
.wcfu-doek .wcfu-hint{
  position:absolute; left:14px; right:14px; bottom:14px; margin:0; z-index:3;
  box-shadow:0 6px 18px rgba(42,44,40,.14);
}

/* De korte ondertitel is er alleen voor een telefoon. */
.wcfu-titel .wcfu-sub-kort{display:none}

/* ── Telefoon: alles altijd in één keer in beeld (15 september 2026) ─────────

   Eis van Dennis: nooit scrollen, op elke telefoon alles in één oogopslag zien en
   kunnen doen. Het doek is daarom de enige laag die meegeeft. Alle andere delen
   houden hun eigen hoogte, het doek krijgt precies wat overblijft, zonder
   minimum, en de foto schaalt daarin mee. Het venster kan niet scrollen.

   Budget op het kleinste gangbare scherm, een iPhone SE met de balken van Safari,
   zo'n 550 punten: bij een losse vorm houdt het doek ongeveer 290 punten over, bij
   de set ongeveer 230.

   Dit blok staat onderaan: bij gelijke specificiteit wint de laatste regel. */
@media (max-width:640px){
  .wcfu-scherm{height:100%; height:100dvh}
  .wcfu-venster{height:100%; max-height:100%; overflow:hidden}
  .wcfu-venster > *{flex-shrink:0}
  .wcfu-venster > .wcfu-doek{flex:1 1 0; min-height:0; margin-top:0}
  .wcfu-doek #wcfu-canvas{
    position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain;
  }

  .wcfu-kop{padding:10px 14px 6px; gap:10px}
  .wcfu-titel b{font-size:17px}
  /* Op een telefoon een korte ondertitel, op één regel. Dennis, 15 september:
     alleen over het schuiven, want het zoomen spreekt voor zich met de + en de −.
     Past hij op een heel smal scherm niet, dan wordt hij afgekapt in plaats van
     tegen "Download voorbeeld" aan te lopen. */
  .wcfu-titel{min-width:0}
  .wcfu-titel .wcfu-sub-lang{display:none}
  .wcfu-titel .wcfu-sub-kort{
    display:block; font-size:12.5px; line-height:1.3; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .wcfu-scherm .wcfu-sluit{width:34px !important; height:34px !important}
  .wcfu-vormen, .wcfu-cirkels{margin:0 14px 8px}
  .wcfu-doek{margin-left:14px; margin-right:14px}

  /* Uitlegregel weg: de cirkelknoppen laten al zien welke cirkels gevuld zijn. */
  .wcfu-uitleg{display:none !important}

  .wcfu-doek .wcfu-hint{left:8px; right:8px; bottom:8px; padding:7px 10px 7px 11px; font-size:12px; line-height:1.35}

  .wcfu-akkoord{margin:8px 14px 0; padding:7px 10px; gap:8px; font-size:12px; line-height:1.35}

  /* Onderin twee rijen: zoom met Verwijderen ernaast, en daaronder Andere foto,
     Passend maken en Klaar naast elkaar. De knoppenbak valt weg met
     display:contents, zodat Verwijderen naast de zoomschuif kan staan. Het
     ::after-element is een regeleinde tussen de twee rijen. */
  .wcfu-bedien{
    display:flex; flex-wrap:wrap; column-gap:8px; row-gap:8px; margin-top:8px;
    padding:8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .wcfu-knoppen{display:contents}
  .wcfu-bedien::after{content:""; order:3; flex:0 0 100%; height:0; margin-top:-8px}
  .wcfu-bedien .wcfu-zoom{order:1; flex:1 1 0; min-width:0}
  .wcfu-scherm .wcfu-bedien .wcfu-wis{order:2; flex:0 0 auto; padding:6px 2px !important; font-size:12.5px !important}
  .wcfu-scherm .wcfu-bedien #wcfu-ander{order:4}
  .wcfu-scherm .wcfu-bedien #wcfu-passend{order:5}
  .wcfu-scherm .wcfu-bedien #wcfu-klaar{order:6}
  .wcfu-scherm .wcfu-bedien .wcfu-stil,
  .wcfu-scherm .wcfu-bedien #wcfu-klaar{
    width:auto !important; flex:1 1 0; min-width:0; white-space:normal;
    padding:10px 4px !important; font-size:13px !important; line-height:1.15 !important;
  }
}



/* ── Lange telefoons: de ruimte gebruiken (0.9.8, 15 september 2026) ───────

   In 0.9.6 kreeg het doek alle hoogte die overbleef. De mockups zijn vier bij drie,
   dus op een lange telefoon ontstonden er boven en onder de mockup lege banden.
   Dennis: die ruimte kan beter naar grotere knoppen en tekst.

   Nu is het doek precies zo hoog als de mockup, en krimpt het alleen als er te
   weinig ruimte is. Wat er dan nog over is, gaat half boven het doek en half boven
   de knoppenbalk zitten: de mockup staat in het midden en de knoppen blijven
   onderaan bij de duim. Op een lange telefoon worden knoppen en tekst groter; op
   een kleine telefoon verandert er niets.

   Een browser die aspect-ratio niet kent, zoals iOS 14 en ouder, houdt het gedrag
   van 0.9.6. Anders zou het doek daar geen hoogte krijgen. */
/* De maat van het doek op een telefoon zet de editor zelf, in maatDoek(): precies
   de verhouding van de mockup, even groot met en zonder foto. Tot de editor dat
   gedaan heeft, vult het doek de ruimte die overblijft (regel hierboven). */


/* ── Telefoon: meeschalen met de schermhoogte (0.9.9, 15 september 2026) ─────

   0.9.8 had vaste treden, vanaf 700 en 800 punten schermhoogte. Op de Samsung S24
   Ultra van Dennis is er met de balken van Chrome ongeveer 695 punten zichtbaar:
   net onder de grens. Hij kreeg dus de kleine maten, met witruimte eromheen.

   Nu schaalt alles mee met de zichtbare hoogte (dvh), met een onder- en een
   bovengrens. Op een iPhone SE staat alles op de ondergrens en is het compact; op
   een grote telefoon groeit het tot de bovengrens. Nagerekend:

     S24 Ultra, ~695 punten   losse vorm: ~55 punten over, set: doek ~30 kleiner
     iPhone SE, ~548 punten   losse vorm: ~30 punten over, set: doek ~55 kleiner

   Nergens hoeft er gescrold te worden: het doek is het enige dat krimpt.
   Een oude browser zonder dvh valt terug op de regel ervoor, in vh. */
@media (max-width:640px){
  .wcfu-kop{padding:9px 14px 6px; padding:clamp(6px, 1.3dvh, 14px) 14px clamp(4px, .9dvh, 8px)}
  .wcfu-titel b{font-size:17px; font-size:clamp(15px, 2.9dvh, 21px)}
  .wcfu-titel .wcfu-sub-kort{
    font-size:13px; font-size:clamp(12px, 1.95dvh, 14.5px);
    white-space:normal; overflow:visible; text-overflow:clip;
  }
  .wcfu-scherm .wcfu-sluit{width:clamp(32px, 5.2dvh, 42px) !important; height:clamp(32px, 5.2dvh, 42px) !important}
  .wcfu-scherm .wcfu-download{font-size:clamp(12px, 1.85dvh, 14px) !important}

  /* Rond, Staand, Liggend en Ook als set op één rij. */
  .wcfu-vormen, .wcfu-cirkels{margin:0 14px 10px; margin-bottom:clamp(6px, 1.7dvh, 16px)}
  .wcfu-vormen{gap:6px; flex-wrap:nowrap}
  .wcfu-scherm .wcfu-vorm{
    padding:8px 12px !important; padding:clamp(6px, 1.35dvh, 11px) 12px !important;
    font-size:13.5px !important; font-size:clamp(12.5px, 2.05dvh, 15px) !important;
  }
  .wcfu-scherm .wcfu-oversteek{
    padding-left:10px !important; margin-left:0; white-space:nowrap;
    font-size:13.5px !important; font-size:clamp(12.5px, 2.05dvh, 15px) !important;
  }
  .wcfu-scherm .wcfu-cirkel{
    padding:8px 6px !important; padding:clamp(6px, 1.35dvh, 12px) 6px !important;
    font-size:13px !important; font-size:clamp(12px, 2.05dvh, 15px) !important;
  }
  .wcfu-scherm .wcfu-volgendecirkel{
    padding:8px 16px !important; padding:clamp(6px, 1.35dvh, 12px) 16px !important;
    font-size:13.5px !important; font-size:clamp(12.5px, 2.05dvh, 15px) !important;
  }

  .wcfu-doek .wcfu-hint{font-size:12.5px; font-size:clamp(12px, 1.9dvh, 14px)}

  .wcfu-akkoord{
    margin-top:10px; margin-top:clamp(6px, 1.7dvh, 16px);
    padding:8px 10px; padding:clamp(5px, 1.4dvh, 12px) clamp(8px, 1.6dvh, 14px);
    font-size:12.5px; font-size:clamp(11.5px, 1.95dvh, 14.5px);
  }

  /* Altijd onderaan. In 0.9.9 overschreef een vaste marge hier de automatische,
     en kwam alle overgebleven ruimte onder de knop Klaar terecht. */
  .wcfu-bedien{
    margin-top:auto;
    padding-top:10px; padding-top:clamp(6px, 1.7dvh, 14px);
    row-gap:10px; row-gap:clamp(6px, 1.7dvh, 14px);
  }
  .wcfu-bedien::after{margin-top:-10px; margin-top:calc(-1 * clamp(6px, 1.7dvh, 14px))}
  .wcfu-scherm .wcfu-stap{
    width:36px !important; height:36px !important;
    width:clamp(32px, 5.8dvh, 46px) !important; height:clamp(32px, 5.8dvh, 46px) !important;
  }
  .wcfu-scherm .wcfu-bedien .wcfu-wis{font-size:13px !important; font-size:clamp(12.5px, 2dvh, 15px) !important}
  .wcfu-scherm .wcfu-bedien .wcfu-stil,
  .wcfu-scherm .wcfu-bedien #wcfu-klaar{
    padding:11px 4px !important; padding:clamp(8px, 2.1dvh, 17px) 4px !important;
    font-size:14px !important; font-size:clamp(13px, 2.15dvh, 17px) !important;
  }
}

/* Vanaf 600 punten hoogte weer zoals eerst: Andere foto en Passend maken naast
   elkaar, Klaar groot eronder. Daaronder, zoals een iPhone SE, blijven de drie
   naast elkaar staan, want die extra rij kost daar te veel van het doek. */
@media (max-width:640px) and (min-height:600px){
  .wcfu-scherm .wcfu-bedien .wcfu-stil{flex:1 1 calc(50% - 5px)}
  .wcfu-scherm .wcfu-bedien #wcfu-klaar{
    flex:1 1 100%;
    padding:13px 20px !important; padding:clamp(9px, 2.4dvh, 18px) 20px !important;
    font-size:15px !important; font-size:clamp(14px, 2.3dvh, 18px) !important;
  }
}

/* Heel smalle telefoon, rond 320 punten breed: dan passen Rond, Staand, Liggend
   en Ook als set niet op één rij, en zou Ook als set afgekapt worden. Daar mag de
   rij weer doorlopen naar een tweede regel. */
@media (max-width:360px){
  .wcfu-vormen{flex-wrap:wrap}
}