/* ---- Reset & tokens ---- */
:root{
  --v2-bg: #E2D3E6;
  --v2-pink: #e80b84;
  --v2-purple: #a64bff;
  --v2-border: #dfdae1;
  --v2-text: #1a1330;
}
*{box-sizing:border-box}
body{margin:24px;font-family: var(--wp--preset--font-family--primary, system-ui);color:var(--v2-text)}

/* ---- Layout ---- */
.v2-wrapper{max-width:1060px;margin:0 auto}
.v2-grid{display:grid;grid-template-columns:1fr 360px;gap:28px}
.v2-right{position:sticky;top:20px;align-self:start;background:var(--v2-bg);border-radius:16px;padding:22px;box-shadow:0 12px 24px rgba(0,0,0,.08)}

@media (max-width:920px){.v2-grid{grid-template-columns:1fr}.v2-right{position:static}}

/* ---- Headings ---- */
.v2-h2{font-size:20px;margin:6px 0 14px}
.v2-h2.-smallgap{margin-top:18px}
.v2-h3{margin:0 0 12px;font-size:18px}

/* ---- Steppers ---- */
.v2-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee}
.v2-row.-noborder{border-bottom:0}
.v2-label{font-weight:600}
.v2-stepper{display:inline-flex;gap:10px;align-items:center}
.v2-step{width:34px;height:34px;border-radius:10px;border:1px solid var(--v2-border);background:#f6f1ff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.v2-step:hover{background:#ede3ff}
.v2-input{width:82px;text-align:center;border:1px solid var(--v2-border);border-radius:8px;padding:6px 8px;font-size:16px}
.v2-input-combo{width:100px;border:1px solid var(--v2-border);border-radius:8px;padding:6px 8px;font-size:16px}

/* ---- Tiles ---- */
.v2-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v2-tile{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--v2-border);border-radius:12px;cursor:pointer;transition:box-shadow .2s,border-color .2s,background-color .2s}
.v2-tile:hover{border-color:var(--v2-purple);box-shadow:0 0 0 3px rgba(166,75,255,.12)}
.v2-tile input{width:18px;height:18px;margin:0;accent-color:var(--v2-purple)}
.v2-tile .v2-txt{display:flex;flex-direction:column}
.v2-tile small{opacity:.7;font-weight:500}
.v2-tile.-selected{background:#f4ecff;border-color:var(--v2-purple)}

/* ---- Summary ---- */
.v2-lines{margin-top:8px}
.v2-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--v2-border)}
.v2-line:last-child{border-bottom:0}

.v2-total{background:#fff;border-radius:16px;padding:16px;margin:18px 0;text-align:center;box-shadow:inset 0 0 0 1px var(--v2-border)}
.v2-total-amount{font-size:34px;font-weight:800}
.v2-total-sub{opacity:.85;font-weight:600}

.v2-notes{margin:12px 0 18px;padding-left:18px;font-size:14px;opacity:.85}

/* ---- CTA ---- */
.v2-cta{width:100%;border:1px solid var(--v2-pink);background:var(--v2-pink);color:#fff;padding:12px 16px;border-radius:999px;font-weight:800;cursor:pointer}
.v2-cta:hover{background:#fff;color:var(--v2-pink)}

/* ---- Accessiblity bits ---- */
.v2-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === Secties: streep onder de titel === */
.v2-left .v2-h2{
  position:relative;
  margin:10px 0 18px;     /* iets meer lucht onder de titel */
  padding-bottom:12px;     /* ruimte voor de streep */
}
.v2-left .v2-h2:not(:first-of-type){
  margin-top:32px;         /* extra ruimte tussen secties */
}
/* streep onder de titel */
.v2-left .v2-h2::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: var(--v2-border); /* effen, zoals in je screenshot */
  border-radius:2px;
}

/* (blijft van kracht) roze checkbox wanneer checked */
.v2-tile input[type="checkbox"]{accent-color:var(--v2-purple)}
.v2-tile input[type="checkbox"]:checked{accent-color:var(--v2-pink)}

/* voorkom dat lange woorden uit de tile steken */
.v2-tile{
  align-items:flex-start;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.v2-tile .v2-txt,
.v2-tile span,
.v2-tile small{
  word-break:break-word;
  overflow-wrap:anywhere;
}

@media (max-width: 480px){
  .v2-tiles{
    grid-template-columns:1fr; /* 1 tegel per rij op mobiel */
  }
}

