/* Sleeve Customizer 1.7.3‑r7 — panel links, canvas rechts (groot) */
.sc-outer{max-width:1280px;margin:0 auto;padding:0 12px;overflow-x:hidden}
.sc-wrap{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start;justify-items:start;max-width:100%}
.sc-stage{line-height:0;width:100%;display:flex;justify-content:center;align-items:center;max-width:100%}
.sc-canvas{width:100%;max-width:100%;border:1px dashed #cfcfcf;border-radius:10px;background:transparent;touch-action:none;display:block}

.sc-panel{padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff;position:sticky;top:12px;width:100%;box-sizing:border-box;max-height:90svh;overflow:auto}
.sc-field{margin-bottom:.9rem}
.sc-field label{display:block;margin-bottom:.35rem;font-weight:600;font-size:.8rem}
.sc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:.4rem}
.sc-actions button{padding:.6rem .9rem;border-radius:8px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer}
.sc-actions button.primary{background:#111;color:#fff;border-color:#111}
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.sc-toggle-row{display:flex;gap:.4rem;align-items:center}
.sc-toggle-row button{min-width:2.2rem;font-weight:700}
.sc-toggle-row button.on{background:#111;color:#fff;border-color:#111}

@media(max-width:1024px){
  .sc-wrap{grid-template-columns:1fr}
  .sc-stage{order:1}
  .sc-panel{position:relative;top:auto;max-height:none;order:2}
  .sc-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  /* r16: veel kleinere sectietitels op mobiel */
  .sc-section-title{font-size:.65rem; margin-top:.6rem; margin-bottom:.25rem; letter-spacing:.01em}
  .sc-section-title{font-size:.8rem}
  .sc-field label{font-size:.75rem}
  .sc-section-title{font-size:.8rem}
  /* r12: nóg kleinere UI-typografie */
  /* r11: kleinere UI-typografie */
  .sc-outer{padding:0 10px}
  .sc-field label{font-size:.8rem}
  .sc-panel select,.sc-panel input,.sc-actions button{font-size:11px}
  .sc-actions{gap:10px}
  .sc-actions button,
  .sc-panel input[type="text"],
  .sc-panel input[type="number"],
  .sc-panel input[type="color"],
  .sc-panel select{
    width:100%;padding:8px 10px;height:36px;box-sizing:border-box
  }
  .sc-toggle-row{gap:8px}
  .sc-toggle-row button{height:36px}
  .sc-actions button{flex:1 1 auto}
}


/* Sectietitel voor contact */
.sc-section-title{
  margin-top:1.2rem;
  margin-bottom:.4rem;
  font-size:.85rem;
  font-weight:700;
  color:#0b2a40;
}