/* ===== jk-kern.css =====
   Gedeelde stijl voor de "naam + datum op canvas"-tools (kapstok, klok,
   groeimeter — geboortebord bewust nog apart gehouden, zie overdracht).
   Wat per product verschilt (kaart-vorm, preview-vorm) staat als CSS-variabele
   met een neutrale standaardwaarde; elk product-bestand zet er in zijn eigen
   kleine <style>-blok alleen de afwijkende variabelen overheen. */

:root{
  --card-aspect: 2.4;       /* kaart-thumbnail verhouding op het themascherm */
  --card-radius: 0;         /* 50% voor een ronde thumbnail (klok) */
  --preview-radius: 14px;   /* vorm van het grote voorbeeld */
  --preview-maxw: 100%;     /* klok is rond en compact: max-width kleiner */
}

*{margin:0;padding:0;box-sizing:border-box}
/* Strak binnen het scherm (iPhone): één element breder dan de viewport en de
   pagina opent "uitgezoomd" met zijwaartse speling — dus principieel dichtzetten. */
html,body{overflow-x:hidden;max-width:100%}
body{background:#f7f4f1;font-family:Arial,Helvetica,sans-serif;color:#1a1a1a;min-height:100vh}
button{cursor:pointer;font-family:inherit}
input{font-family:inherit}
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#fff;border-bottom:1px solid #ede8e0;max-width:100%}
.nav > div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.grid7{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.card{border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;box-shadow:0 4px 14px rgba(0,0,0,0.08);transition:transform .15s;background:#fff}
.card:hover{transform:scale(1.02)}
.card img{width:100%;aspect-ratio:var(--card-aspect);object-fit:cover;display:block;background:#e8dfd4;border-radius:var(--card-radius)}
.card .naam{padding:9px 10px;font-size:13px;text-align:center;color:#5a4a44}
.two{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
/* Langwerpige producten (groeimeter): .stretch maakt de voorbeeld-kolom exact
   zo hoog als het paneel ernaast -- canvas schaalt daarbinnen mee (contain),
   dus de HELE afbeelding is zichtbaar zonder losse berekening. Alleen op
   desktop zinvol; op mobiel wordt .two toch al display:block (zie hieronder). */
.two.stretch{align-items:stretch}
@media(max-width:820px){
  .two{display:block}
  .nav{position:static}
  /* HEMA-patroon (mobiel): product vult het scherm, bediening in schuifpanelen
     vanaf de onderrand, vaste actiebalk met werkwoorden. Geldt voor alle
     kern-producten; de groeimeter houdt zijn editor-crop (alleen het tekstdeel
     in beeld) en krijgt daarbinnen gewoon de sheets en de balk. */
  .m-editor{padding-bottom:104px}
  .m-editor .paneel{background:none;box-shadow:none;padding:0;border-radius:0}
  body.m-app{height:100dvh;overflow:hidden}
  body.m-app .m-editor{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .m-editor .preview-wrap:not(.editor-crop):not(.editor-crop-r){max-width:min(92vw, calc((100dvh - 330px) * var(--bh,1)))}
  .m-editor .paneel > *:not(.m-sheet){display:none}
  .m-sheet{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:120;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.28);padding:14px 16px 16px;transform:translateY(130%);transition:transform .28s ease;max-height:60vh;overflow-y:auto;visibility:hidden}
  .m-sheet.open{transform:translateY(0);visibility:visible}
  .sheet-kop{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
  .sheet-kop b{font-size:14px;color:#6b6257}
  .sheet-sluit{background:#f0ece6;border:0;border-radius:50%;width:32px;height:32px;font-size:15px;color:#6b6257;cursor:pointer}
  .actiebalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;background:#fff;border-top:1px solid #eee3d8;padding:7px 4px calc(7px + env(safe-area-inset-bottom));justify-content:space-around}
  .actiebalk button{background:none;border:0;font-size:11px;color:#6b6257;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;font-family:inherit;cursor:pointer;min-width:0}
  .actiebalk button .ico{font-size:21px;line-height:1}
  .actiebalk button.aan{color:#b4302a;font-weight:700}
  .actiebalk button.klaarknop{color:#fff;background:#8a9b7a;border-radius:12px;padding:8px 12px;font-weight:700;font-size:12.5px;flex-direction:row;gap:5px;white-space:nowrap}
}
.sheet-klaar{background:#8a9b7a;color:#fff;margin-top:14px}
@media(min-width:821px){ .actiebalk,.sheet-kop,.m-alleen{display:none} }
.preview-wrap{position:relative;width:100%;max-width:var(--preview-maxw);margin:0 auto;border-radius:var(--preview-radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.14);background:#e8dfd4}
.preview-wrap canvas{width:100%;display:block}
.m-editor .preview-wrap canvas{touch-action:none}
/* Hint-tekst blijft (verplaatst naar onder het grote voorbeeld) — het
   zoomvenster zelf is 12 aug verwijderd: de klant sleept nu rechtstreeks
   op het grote voorbeeld, dat is met het handvat-model precies zo nauwkeurig. */
.zoom-hint{font-size:12px;color:#8a8478;margin-top:6px}
@media(min-width:821px){
  /* Desktop-helft van .stretch: hoogte van de kolom doorgeven aan preview-wrap,
     canvas schaalt op zijn hoogte (niet breedte) zodat het geheel in beeld blijft. */
  .two.stretch .prev-col, .two.stretch .prev-sticky{height:100%}
  .two.stretch .preview-wrap{height:100%;display:flex;align-items:center;justify-content:center}
  .two.stretch .preview-wrap canvas{width:auto;height:100%;max-width:100%}
}
@media(max-width:820px){
  /* Mobiel-helft van .editor-crop: alleen het bovenste stuk (bijv. tekstzone
     van de groeimeter) tonen. Custom property i.p.v. inline max-height, want
     een inline style wint altijd van een stylesheet-@media-regel. */
  .preview-wrap.editor-crop{max-height:var(--crop-h);overflow:hidden}
  /* Horizontale tegenhanger (kapstok): alleen het RECHTERdeel tonen, flink
     uitvergroot. --crop-x = linkergrens (fractie), --crop-frac = zichtbaar deel. */
  .preview-wrap.editor-crop-r{overflow:hidden}
  .preview-wrap.editor-crop-r canvas{width:calc(100% / var(--crop-frac,0.45)) !important;transform:translateX(calc(var(--crop-x,0.55) * -100%))}
  .m-alleen{display:block}
}
.paneel{background:#fff;border-radius:14px;padding:20px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
label{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8a8478;font-weight:600;margin:14px 0 6px}
label.first{margin-top:0}
input[type=text]{width:100%;padding:11px 13px;border-radius:9px;border:2px solid #e8e0d6;font-size:16px;outline:none;background:#fff}
.btn{width:100%;background:#c3c6b6;color:#333;border:0;border-radius:11px;padding:14px;font-size:15px;font-weight:700;margin-top:16px}
.btn.ghost{background:#e9e7dc;color:#6c7a5f;width:auto;padding:9px 16px;margin:0 0 14px}
.btn:disabled{background:#cbb8b5}
.status-msg{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:13px;display:none}
.status-msg.err{display:block;background:#fdecea;color:#a32219;border:1px solid #f3c4bf}
.status-msg.ok{display:block;background:#e7f6ea;color:#1f6b34;border:1px solid #bfe6c8}
.pbar-wrap{background:#efe7e4;border-radius:8px;height:14px;overflow:hidden;margin-top:14px;display:none}
.pbar{height:100%;width:0;background:#a3a88e;border-radius:8px;transition:width .25s ease}
.pbar-label{font-size:12.5px;color:#5a4a44;margin-top:6px;text-align:center;display:none}
.naw-row{display:flex;gap:10px}
.font-row{display:flex;gap:7px;flex-wrap:wrap}
.font-btn{padding:7px 12px;border-radius:9px;border:2px solid #e8e0d6;background:#fff;font-size:14px}
.font-btn.active{border-color:#8a9b7a;background:rgba(138,155,122,.08)}
.bg-pill{border:2px solid #e8e0d6;background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;color:#5a5248;cursor:pointer;flex:0 0 auto}
.bg-pill.active{border-color:#8a9b7a;color:#8a9b7a;font-weight:700}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid #e8e0d6;padding:0;overflow:hidden;position:relative;display:block;flex:0 0 auto;cursor:pointer;background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.swatch::before{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(closest-side,#fff 58%,transparent 62%);color:#5a5248;font-weight:700;font-size:15px;pointer-events:none;z-index:1}
.swatch input{position:absolute;inset:-6px;width:200%;height:200%;border:0;padding:0;cursor:pointer;opacity:0;z-index:2}
.kd{width:30px;height:30px;border-radius:50%;border:2px solid #e8e0d6;flex:0 0 auto;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kd.aan{border-color:#8a9b7a;box-shadow:0 0 0 2px rgba(138,155,122,.25)}