/* Aanvulling op stijl.css (de opmaak van het voorbeeld): kop, aanmelden en inloggen, stappenplan, meldingen,
   zendingen en de volgpagina van de echte shop-in-shop. */

/* links die een knop zijn */
a.knop,a.knop:hover{text-decoration:none}
body[data-view=tralert]{background:var(--ink)}

/* kop van de eigen pagina's */
.demo .rij{flex-wrap:nowrap}
.demo a.mark{text-decoration:none}
.kopRuimte{flex:1 1 auto}
.kopLink{color:var(--ink-text);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.kopLink:hover{color:#fff;text-decoration:underline}
.kopTaal{display:inline-flex;align-items:center;gap:4px;color:var(--ink-muted)}
.kopTaal select{background:transparent;border:1px solid var(--ink-line);color:var(--ink-text);border-radius:5px;padding:4px 6px;font-size:13px}
.kopTaal select option{color:#111}
.demo .knop.klein{padding:7px 12px}

/* testbalk boven een winkel */
.testbalk{background:#fff4d6;border-bottom:1px solid #f0d58a;color:#5c4307;font-size:13.5px}
.testbalk .rij{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:7px}
.testbalk span{display:inline-flex;align-items:center;gap:6px}
.testbalk .link{color:#5c4307}

/* startpagina */
.startheld{background:var(--ink);color:var(--ink-text);padding-block:44px 40px}
.startheld h1{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.6vw,54px);line-height:1.04;color:#fff;max-width:18ch;margin-bottom:14px;text-wrap:balance}
.startheld .lead{max-width:62ch;font-size:16.5px;color:var(--ink-text);opacity:.92;margin-bottom:22px}
.startheld .knoppen{display:flex;gap:10px;flex-wrap:wrap}
.startheld .knop.rand{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent}
.testregel{display:flex;align-items:center;gap:6px;margin-top:18px;color:var(--ink-muted)}
.stappenrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.stapkaart{position:relative;display:grid;gap:8px;align-content:start}
.stapkaart svg{color:var(--trl)}
.stapnr{position:absolute;top:14px;right:16px;font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--line)}
.uitlegstappen{margin:0;padding-left:20px;display:grid;gap:12px}
.uitlegstappen li span{display:block;color:var(--muted)}
.schema{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sblok{flex:1 1 180px;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;display:grid;gap:4px;background:var(--paper)}
.sblok b{display:flex;align-items:center;gap:8px}
.sblok small{color:var(--muted)}
.spijl{display:grid;place-items:center;color:var(--muted)}
.trl-beheer .sblok{background:rgba(255,255,255,.04);border-color:var(--ink-line)}
.trl-beheer .sblok small,.trl-beheer .spijl{color:var(--ink-muted)}
.trl-beheer .regels-lijst b{color:#fff}

/* aanmelden en inloggen */
.pagina.smal{max-width:560px}
.authvak{display:grid;gap:14px}
.authvak .form{grid-template-columns:1fr 1fr}
.authvak .knop.vol{grid-column:1/-1}
.vinkje{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:8px;font-weight:400 !important}
.vinkje input{margin-top:4px}
.melding{border-radius:var(--r-card);padding:10px 14px;font-size:14px;line-height:1.45;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.melding.fout{background:#fbe9e7;color:#8a1f15;border:1px solid #f1c3bd}
.melding.info{background:var(--info-soft);color:var(--info);border:1px solid #c9daf0}
.melding.ok{background:var(--ok-soft);color:var(--ok);border:1px solid #bfe3cf}
.melding .link{font-size:14px}
.trl-beheer .melding.fout{background:rgba(220,80,60,.15);color:#ffb4a8;border-color:rgba(220,80,60,.35)}
.laden{padding-block:40px}
.oktekst{color:var(--ok)}
.fouttekst{color:var(--bad)}
.okicoon.grijs{background:var(--line-2);color:var(--muted)}

/* stappenplan */
.inrichten .stapbol{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:var(--line-2);color:var(--muted);font-weight:700;font-size:12.5px;flex:none}
.inrichten .stapbol.klaar{background:var(--ok-soft);color:var(--ok)}
.inrichten .tab[aria-current="true"] .stapbol{background:var(--brand);color:var(--brand-ink)}
.zijnoot{padding:8px 4px 0}
.stapteller{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:13px;color:var(--muted)}
.stapknoppen{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line);margin-top:6px}
.slugveld{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--card);overflow:hidden}
.slugveld .mono{padding:0 8px;color:var(--muted);white-space:nowrap;background:var(--paper);align-self:stretch;display:flex;align-items:center;border-right:1px solid var(--line);max-width:55%;overflow:hidden;text-overflow:ellipsis}
.slugveld input{border:0 !important;flex:1;min-width:0;border-radius:0 !important}

/* zendingen en verzendformulier */
.zending{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line-2)}
.zending:first-of-type{border-top:0}
.verzendform{flex-wrap:wrap}
.verzendvelden{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.verzendvelden select,.verzendvelden input{border:1px solid var(--line);border-radius:var(--r-btn);padding:8px 10px;background:var(--card);min-width:0}
.verzendvelden input{width:190px}
.payload{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.25);border-radius:8px;padding:12px;font-size:12.5px;color:var(--ink-text);margin:0}
.afwijsform{display:flex;gap:8px;flex-wrap:wrap}
.afwijsform input{flex:1 1 260px;border:1px solid var(--ink-line);background:rgba(255,255,255,.06);color:var(--ink-text);border-radius:var(--r-btn);padding:9px 12px}
.trl-beheer .schakel span{color:var(--ink-text)}
.trl-beheer a{color:#9cc6ff}
.vb:empty{display:none}

/* volgpagina */
.volgstappen{margin:14px 0 18px}

@media (max-width:900px){
  .stappenrij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .demo .rij{flex-wrap:wrap;gap:8px 12px}
  .kopRuimte{display:none}
  .demo .pil{display:none}
  .stappenrij{grid-template-columns:minmax(0,1fr)}
  .authvak .form{grid-template-columns:1fr}
  .verzendvelden{width:100%}
  .verzendvelden input{flex:1 1 140px;width:auto}
  .testbalk .rij{flex-wrap:wrap}
  .spijl{transform:rotate(90deg);width:100%}
}