/* Naamketting: het voorbeeld in de hero. De rest van de pagina leunt op atelier.css. */
@font-face{font-family:Birthstone;src:url('fonts/birthstone-latin.woff2') format('woff2');font-display:swap}

.nk-preview{margin:0;padding-bottom:28px}
.nk-stage{position:relative;background:linear-gradient(160deg,#ece7dd,#e0d9cc);border:1px solid var(--line);border-radius:2px;aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden}
.nk-stage svg{width:100%;height:100%;display:block}
.nk-name{font-family:Birthstone,cursive;font-size:118px}
.nk-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-top:16px}
.nk-field{flex:1 1 180px}
.nk-field label,.nk-chain legend{display:block;font:500 .72rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nk-field input{width:100%;min-height:50px;padding:10px 14px;border:1px solid var(--line);border-radius:3px;background:white;font:inherit;font-size:1.05rem;color:var(--ink)}
.nk-field input:focus-visible{outline:3px solid #006eff;outline-offset:2px}
.nk-chain{border:0;margin:0;padding:0;min-width:0}
.nk-chain div{display:flex;gap:8px}
.nk-chain input{position:absolute;opacity:0;pointer-events:none}
.nk-chain label.nk-pill{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:3px;background:white;cursor:pointer;font-size:.92rem;margin:0;text-transform:none;letter-spacing:0;font-family:inherit;color:var(--ink)}
.nk-chain input:checked+label.nk-pill{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nk-chain input:focus-visible+label.nk-pill{outline:3px solid #006eff;outline-offset:2px}
.nk-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.nk-dot--zilver{background:linear-gradient(135deg,#eef0f2,#9aa1a7)}
.nk-dot--goud{background:linear-gradient(135deg,#f0d78f,#b48a3c)}
.nk-hint{font-size:.82rem;color:var(--muted);margin:8px 0 0;min-height:1.3em}
.nk-hint[data-fout]{color:var(--red)}
.nk-preview figcaption{font-size:.78rem;color:var(--muted);padding-top:12px;line-height:1.5}

@media (max-width:700px){
  .nk-chain div{flex-wrap:wrap}
}

/* Fotoplekken op de Amsterdam Laser-pagina's. Tijdelijk: elk vak wordt een
   <img> met dezelfde verhouding zodra de echte foto er is. */
.al-foto{display:grid;place-content:center;gap:.4rem;width:100%;height:100%;padding:1.2rem;text-align:center;
  background:repeating-linear-gradient(-45deg,#efeae0,#efeae0 12px,#e5dfd3 12px,#e5dfd3 24px);border:2px dashed var(--muted);border-radius:2px;color:var(--ink)}
.al-foto strong{font-family:var(--display);font-size:1.8rem;line-height:1.1}
.al-foto span{font-weight:650}
.al-foto small{color:var(--muted);max-width:28ch;margin:0 auto}
.al-foto-hero .al-foto{height:560px}

/* Samenstellen: voorbeeld links, keuzes rechts. */
.nk-samenstellen .nk-preview{display:grid;grid-template-columns:1.1fr .9fr;gap:10px 36px;align-items:start;padding:0}
.nk-samenstellen .nk-stage{grid-row:span 5}
.nk-samenstellen .nk-controls,.nk-samenstellen .pk-opties{margin-top:0}
.nk-kaart-knop{margin-top:8px;justify-self:start}

/* Echt werk: twee foto's naast elkaar. */
.nk-echt__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px}
.nk-echt__grid figure{margin:0;aspect-ratio:4/5}

@media (max-width:900px){
  .nk-samenstellen .nk-preview{grid-template-columns:1fr}
  .nk-samenstellen .nk-stage{grid-row:auto}
  .al-foto-hero .al-foto{height:auto;aspect-ratio:4/5}
}
@media (max-width:700px){.nk-echt__grid{grid-template-columns:1fr}}

/* Bestelformulier (assets/sieraad-bestellen.js), op alle drie de sieradenpagina's. */
.sb-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;max-width:760px}
.sb-vol{grid-column:1/-1}
.sb-veld{display:grid;gap:6px;margin:0}
.sb-veld>span{font:500 .72rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sb-veld input{width:100%;min-height:50px;padding:10px 14px;border:1px solid var(--line);border-radius:3px;background:white;font:inherit;font-size:1rem;color:var(--ink)}
.sb-veld input[type=file]{padding:12px 14px}
.sb-veld input:focus-visible,.sb-check input:focus-visible{outline:3px solid #006eff;outline-offset:2px}
.sb-veld small{font-size:.82rem;color:var(--muted)}
.sb-veld small[data-fout-voor]{color:var(--red)}
.sb-veld small[data-fout-voor]:empty{display:none}
.sb-check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:3px;background:white;cursor:pointer}
.sb-check input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--ink)}
.sb-check small{display:block;margin-top:4px;color:var(--muted);font-size:.85rem}
.sb-prijs{margin:4px 0 0;font-size:1.05rem}
.sb-weg{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sb-form button[disabled]{opacity:.6;cursor:wait}
.sb-status{margin:0;min-height:1.4em;font-size:.95rem;line-height:1.5}
.sb-status[data-soort=fout]{color:var(--red)}
.sb-status[data-soort=goed]{padding:16px 18px;border:1px solid #b7ddc3;border-radius:3px;background:#eff8f2;color:#1b6a37}
.sb-form[data-klaar] .sb-veld,.sb-form[data-klaar] .sb-check,.sb-form[data-klaar] .sb-prijs,.sb-form[data-klaar] button{display:none}
.sb-kaart{max-width:820px;margin:0 auto}
.sb-kaart .sb-form{max-width:none}
@media (max-width:640px){.sb-form{grid-template-columns:1fr}}