.mrb-cyl-app{clear:both;margin:8px 0 28px;width:100%;font-size:15px;color:#1c1c1c}

/* bovenbalk: aantal cilinders (gelijksluitende set) */
.mrb-topbar{background:#ecf8fb;border:1px solid #d4eef3;border-radius:12px;padding:14px 18px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mrb-topbar-t{font-size:14px;font-weight:700;color:#0a444e;display:flex;align-items:center;gap:6px}
.mrb-topbar-s{font-size:12px;color:#5a7a82;margin-top:2px}
.mrb-topstep button{width:36px;height:36px}
.mrb-topstep span{font-size:18px;min-width:24px}

.mrb-head{font-size:16px;font-weight:700;color:#1c2530;margin:4px 0 12px;display:flex;align-items:center;gap:6px}

/* blauw info-icoon (placeholder; popup volgt) */
.mrb-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#1c8ea3;color:#fff;font-size:10px;font-style:italic;font-weight:700;font-family:Georgia,serif;line-height:1;cursor:help}

/* gedeelde kolom-indeling: preview | buiten | binnen | draaiknop | kleur | aantal | acties */
.mrb-rowgrid{display:grid;grid-template-columns:116px minmax(92px,1fr) minmax(92px,1fr) minmax(120px,1.25fr) auto auto auto;
  gap:14px;align-items:center}

.mrb-header{padding:0 14px;margin-bottom:6px}
.mrb-header>div{font-size:12px;font-weight:600;color:#5a6470;display:flex;align-items:center;gap:5px}

/* per-cilinder regel; actieve regel komt naar voren */
.mrb-cil{border:1px solid #e8e8e8;border-radius:12px;background:#fff;padding:10px 14px;margin-bottom:10px;
  opacity:.82;transition:box-shadow .15s ease,opacity .15s ease,border-color .15s ease}
.mrb-cil.is-active{opacity:1;border-color:#d4eef3;box-shadow:0 10px 26px rgba(20,45,90,.13);position:relative;z-index:2}
.mrb-cil:hover{opacity:1}

/* meerdere identieke cilinders van één configuratie = visueel blok */
.mrb-grp{margin-bottom:5px;border-left:3px solid #e0e6ef}
.mrb-grp.mrb-grp-last{margin-bottom:10px}
.mrb-grp.is-active{border-left-color:#1c8ea3}

.mrb-prev{width:116px}
.mrb-prevwrap{text-align:center}
.mrb-cylcanvas{display:block;margin:0 auto;max-width:100%;height:auto}
.mrb-dimholder{margin-top:3px}
.mrb-dimsvg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.mrb-dim{font-size:13px;fill:#8a8a8a}

.mrb-cell{min-width:0}
.mrb-ml{display:none}
.mrb-sel{width:100%;height:38px;border:1px solid #c4cedd;border-radius:8px;padding:0 8px;background:#fff;font-size:14px;color:#1c1c1c}
.mrb-sel:focus{outline:2px solid #bfe6ee;border-color:#1c8ea3}

.mrb-swatches{display:flex;gap:8px}
.mrb-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #b9c0c9;cursor:pointer;padding:0}
.mrb-swatch.on{box-shadow:0 0 0 2px #1c8ea3}

.mrb-stepper{display:flex;align-items:center;gap:6px}
.mrb-stepper button{width:32px;height:34px;border:1px solid #c4cedd;background:#fff;border-radius:8px;font-size:18px;line-height:1;cursor:pointer;color:#1c1c1c}
.mrb-stepper button:hover{background:#ecf8fb}
.mrb-stepper span{font-size:15px;font-weight:600;min-width:20px;text-align:center}

.mrb-actions{display:flex;gap:6px}
.mrb-act{width:32px;height:32px;border:1px solid #d7dde6;background:#fff;border-radius:8px;color:#7a828c;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.mrb-act:hover{background:#ecf8fb;color:#1c8ea3;border-color:#bfe6ee}

.mrb-addcil{display:inline-flex;align-items:center;gap:9px;background:#ecf8fb;border:2px solid #1c8ea3;color:#12707f;
  border-radius:12px;padding:14px 24px;font-size:15.5px;font-weight:700;cursor:pointer;margin:10px 0 12px;
  box-shadow:0 4px 14px rgba(28,142,163,.16);transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.mrb-addcil::before{content:"+";font-size:20px;font-weight:800;line-height:1;color:#1c8ea3;margin-top:-1px}
.mrb-addcil:hover{background:#dff2f6;border-color:#12707f;box-shadow:0 7px 18px rgba(28,142,163,.26);transform:translateY(-1px)}

.mrb-keys{background:#f1f8f9;border:1px solid #dcebee;border-radius:12px;padding:16px 18px;margin-top:14px}
.mrb-keys-t{font-size:15px;font-weight:700;color:#1c2530;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.mrb-keyrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mrb-keys-inc{font-size:14px;color:#3a4654}
.mrb-keys-inc strong{font-size:20px;font-weight:700;color:#0a444e;margin-right:2px}
.mrb-keys-inc small{display:block;font-size:12px;color:#7a8aa0;margin-top:1px}
.mrb-keys-extra{display:flex;align-items:center;gap:12px}
.mrb-keys-extra>span{font-size:14px;color:#3a4654;font-weight:600;text-align:right}
.mrb-keys-extra small{display:block;font-weight:400;color:#7a8aa0;font-size:12px}
.mrb-keys-extra .mrb-stepper span{font-size:16px}
.mrb-keytotal{font-size:13px;color:#7a8aa0;margin-top:12px;padding-top:10px;border-top:1px solid #dcebee}

@media(max-width:560px){
  .mrb-keyrow{flex-direction:column;align-items:flex-start}
  .mrb-keys-extra{width:100%;justify-content:space-between}
  .mrb-keys-extra>span{text-align:left}
}

.mrb-total{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid #e4e4e4;padding-top:16px;margin-top:18px}
.mrb-totnum span{font-size:13px;color:#5a5a5a;display:block}
.mrb-totnum strong{font-size:28px;font-weight:600}

.mrb-summary{flex:1 1 300px;min-width:240px;display:flex;align-items:center;gap:14px}
.mrb-setimg{width:84px;height:84px;object-fit:contain;flex:0 0 auto;border:1px solid #eceff3;border-radius:10px;background:#fff;padding:4px}
.mrb-sum-txt{min-width:0}
.mrb-sum-line{font-size:15px;color:#1c2530}
.mrb-sum-line strong{font-size:17px;color:#0a444e}
.mrb-sum-dot{margin:0 8px;color:#b2bac3}
.mrb-cert{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:#2f7d49;margin-top:6px;line-height:1.35}
.mrb-cert svg{flex:0 0 auto;margin-top:1px;color:#3a9a55}
.mrb-add{background:#1c8ea3;color:#fff;border:0;border-radius:10px;padding:14px 30px;font-size:16px;font-weight:600;cursor:pointer;line-height:1}
.mrb-add:hover{background:#1c8ea3}

@media(max-width:720px){
  .mrb-header{display:none}
  .mrb-rowgrid,.mrb-rg-tand{grid-template-columns:1fr 1fr;gap:12px}
  .mrb-prev{width:auto;grid-column:1/-1}
  .mrb-cylcanvas{margin:0 auto}
  .mrb-ml{display:block;font-size:11px;color:#8a8a8a;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
  .mrb-actions{grid-column:1/-1;justify-content:flex-end}
}
/* ===== [Claude] extra: teal-vars, knop-trigger, smartlock popup/modal ===== */
.mrb-cyl-app{--teal:#1c8ea3;--teal-d:#1c8ea3;--teal-50:#ecf8fb;--deep:#0a444e;--ink:#123138;--muted:#5a6e74;--line:#dcebee}
.mrb-rowgrid{grid-template-columns:116px minmax(90px,1fr) minmax(90px,1fr) minmax(150px,1.4fr) auto auto}
.mrb-rg-tand{grid-template-columns:116px minmax(74px,.82fr) minmax(74px,.82fr) minmax(112px,1.1fr) minmax(112px,1.1fr) auto auto}
.mrb-prev{position:relative}
.mrb-tandtrig{}
.mrb-knobtrig,.mrb-tandtrig{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;color:var(--ink);text-align:left}
.mrb-knobtrig:hover{border-color:var(--teal)}
.mrb-knobtrig>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrb-knobtrig .mrb-caret{color:var(--teal);font-size:10px}
.mrb-knobtrig.has-smart{border-color:var(--teal);background:var(--teal-50);color:var(--teal-d);font-weight:700}
.mrb-knobtrig.has-smart small{color:var(--teal-d);text-decoration:underline;font-size:11px}
.mrb-knobtrig svg{flex:none;color:var(--teal-d)}
.mrb-smartbadge{position:absolute;right:6px;bottom:6px;background:var(--teal);color:#fff;border-radius:9px;padding:5px;display:inline-flex;box-shadow:0 3px 8px rgba(28,142,163,.45)}
.mrb-smartline{display:flex;align-items:center;gap:8px;background:var(--teal-50);border:1px solid #cdeef3;border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px;color:var(--teal-d)}
.mrb-smartline b{color:var(--ink)}
.mrb-smartrm{margin-left:auto;background:none;border:0;color:#b14a4a;font-size:12px;cursor:pointer;text-decoration:underline}
.mrb-ov{--teal:#1c8ea3;--teal-d:#1c8ea3;--teal-50:#ecf8fb;--deep:#0a444e;--ink:#123138;--muted:#5a6e74;--line:#dcebee;position:fixed;inset:0;background:rgba(8,40,46,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100000;padding:18px;font-family:'Inter',system-ui,sans-serif}
.mrb-pop{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.mrb-pop-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.mrb-pop-h b{font-size:18px;color:var(--deep)}
.mrb-x,.mrb-mx{background:none;border:0;font-size:24px;cursor:pointer;color:var(--muted);line-height:1}
.mrb-pop-cur{background:var(--teal-50);color:var(--teal-d);font-weight:700;padding:11px 20px;font-size:13.5px}
.mrb-pop-body{overflow:auto;padding:8px}
.mrb-kopt{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1.5px solid transparent;border-radius:12px;padding:9px 12px;cursor:pointer;text-align:left;margin-bottom:2px}
.mrb-kopt:hover{background:var(--teal-50)}.mrb-kopt.on{border-color:var(--teal);background:var(--teal-50)}
.mrb-kopt img{width:48px;height:48px;object-fit:contain;flex:none}
.mrb-kopt-t{flex:1}.mrb-kopt-t b{display:block;color:var(--teal-d);font-size:14.5px}.mrb-kopt-t small{color:var(--muted);font-size:12px}
.mrb-kopt-p{background:#eef3f4;color:var(--ink);font-weight:700;font-size:12.5px;padding:6px 10px;border-radius:8px;white-space:nowrap}
.mrb-pop-f{padding:14px;border-top:1px solid var(--line)}
.mrb-smartbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--deep);color:#fff;border:0;border-radius:12px;padding:14px;font-weight:700;cursor:pointer;font-size:14.5px}
.mrb-smartbtn:hover{background:#0c5b66}
/* ===== Smart lock modal — eigen één-scherm-ontwerp ===== */
.mrb-modal{background:#fff;border-radius:22px;width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 90px rgba(8,40,46,.45)}
.mrb-m-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px;background:linear-gradient(135deg,var(--teal) 0%,var(--deep) 100%);color:#fff}
.mrb-m-h-t b{font-family:'Lora',Georgia,serif;font-size:23px;display:block;line-height:1.15;margin-bottom:3px}
.mrb-m-h-t small{color:rgba(255,255,255,.85);font-size:13px}
.mrb-m-h .mrb-mx{color:#fff;opacity:.85;font-size:26px}.mrb-m-h .mrb-mx:hover{opacity:1}
.mrb-m-body{overflow:auto;padding:24px 28px}
.mrb-sec{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16.5px;color:var(--ink);margin:4px 0 16px}
.mrb-sec small{font-weight:500;color:var(--muted);font-size:12.5px}
.mrb-sec-n{width:27px;height:27px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;flex:none}
.mrb-sec.mrb-dim2{opacity:.5}.mrb-sec.mrb-dim2 .mrb-sec-n{background:#b9c7ca}
.mrb-lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.mrb-lcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 14px 16px;cursor:pointer;transition:.15s}
.mrb-lcard:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 14px 28px rgba(28,142,163,.16)}
.mrb-lcard.on{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-50)}
.mrb-lc-img{height:96px;display:flex;align-items:center}.mrb-lc-img img{max-width:96px;max-height:96px;object-fit:contain}
.mrb-lcard b{font-size:14.5px;color:var(--ink);line-height:1.25}
.mrb-lcard ul{list-style:none;margin:2px 0 0;padding:0}
.mrb-lcard li{position:relative;padding-left:16px;font-size:11.5px;color:var(--muted);margin-bottom:3px;text-align:left}
.mrb-lcard li:before{content:'\2713';position:absolute;left:0;color:var(--teal);font-weight:800}
.mrb-lcard .mrb-lc-p{margin-top:auto;padding-top:8px;font-family:'Lora',Georgia,serif;font-weight:700;font-size:19px;color:var(--deep)}
.mrb-lcheck{position:absolute;top:11px;right:11px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.mrb-lcard.on .mrb-lcheck{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.mrb-agrid{display:flex;flex-direction:column;gap:10px}
.mrb-acard{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;transition:.15s;text-align:left}
.mrb-acard:hover{border-color:var(--teal)}
.mrb-acard.on{border-color:var(--teal);background:var(--teal-50)}
.mrb-acard[disabled]{opacity:.5;cursor:not-allowed}
.mrb-acard img{width:54px;height:54px;object-fit:contain;flex:none}
.mrb-ac-mid{flex:1}.mrb-ac-mid b{display:block;font-size:14px;color:var(--ink)}.mrb-ac-mid small{color:var(--muted);font-size:12px}
.mrb-ac-r{display:flex;align-items:center;gap:13px}
.mrb-ac-p{font-weight:700;color:var(--deep);white-space:nowrap}
.mrb-actoggle{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;transition:.15s}
.mrb-acard.on .mrb-actoggle{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.mrb-rec{position:absolute;top:-9px;left:14px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:6px}
.mrb-m-f{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:#f6fafb;border-top:1px solid var(--line)}
.mrb-m-tot{display:flex;flex-direction:column;line-height:1.2}.mrb-m-tot small{color:var(--muted);font-size:12px}.mrb-m-tot strong{font-family:'Lora',Georgia,serif;font-size:23px;color:var(--deep)}
.mrb-done{background:var(--teal);color:#fff;border:0;border-radius:12px;padding:14px 28px;font-weight:700;cursor:pointer;font-size:15px;box-shadow:0 10px 22px rgba(28,142,163,.4)}
.mrb-done:hover{background:var(--teal-d)}
.mrb-done[disabled]{background:#bcd6da;box-shadow:none;cursor:not-allowed}
@media(max-width:680px){.mrb-lgrid{grid-template-columns:1fr;gap:10px}.mrb-lcard{flex-direction:row;text-align:left;align-items:center;gap:14px;padding:14px}.mrb-lc-img{height:auto}.mrb-lc-img img{max-width:64px;max-height:64px}.mrb-lcard b,.mrb-lcard .mrb-lc-p{align-self:center}.mrb-lcard ul{flex:1}.mrb-lcard .mrb-lc-p{margin:0;padding:0}}

/* ===== mobiel: cilinder-preview + maten-rij netjes stapelen =====
   (moet ná de latere .mrb-rowgrid-desktopregel staan, anders wint die door bronvolgorde) */
@media(max-width:720px){
  .mrb-header{display:none}
  .mrb-rowgrid,.mrb-rg-tand{grid-template-columns:1fr 1fr;gap:10px 12px}
  .mrb-prev{width:auto;grid-column:1/-1}
  .mrb-prevwrap{max-width:220px;margin:0 auto}
  .mrb-cylcanvas{margin:0 auto}
  .mrb-cell{grid-column:span 1}
  .mrb-ml{display:block;font-size:11px;color:#8a8a8a;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
  .mrb-actions{grid-column:1/-1;justify-content:flex-end}
  .mrb-cil{padding:12px}
}
@media(max-width:400px){
  .mrb-rowgrid,.mrb-rg-tand{grid-template-columns:1fr}
}

/* ===== [Claude] set-niveau smart lock (Tedee/Nuki) ===== */
.mrb-smart{border:2px solid #1c8ea3;border-radius:14px;background:#f4fbfc;padding:16px 18px;margin-top:16px}
.mrb-smart-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.mrb-smart-ic{flex:none;width:34px;height:34px;border-radius:9px;background:#1c8ea3;color:#fff;display:flex;align-items:center;justify-content:center}
.mrb-smart-h b{display:block;font-size:15px;font-weight:700;color:#0a444e;line-height:1.3}
.mrb-smart-h small{display:block;font-size:12.5px;color:#3a6e74;margin-top:2px}
.mrb-smart-modes{display:grid;gap:8px}
.mrb-slmode{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  padding:11px 13px;border:1px solid #c4cedd;border-radius:10px;background:#fff;cursor:pointer;width:100%}
.mrb-slmode:hover{border-color:#1c8ea3;background:#ecf8fb}
.mrb-slmode.on{border:2px solid #1c8ea3;background:#ecf8fb;padding:10px 12px}
.mrb-slmode-t b{display:block;font-size:14px;font-weight:600;color:#123138}
.mrb-slmode-t small{display:block;font-size:12px;color:#5a6e74;margin-top:1px}
.mrb-slmode-p{font-size:14px;font-weight:700;color:#0a444e;white-space:nowrap}
.mrb-smart-body{margin-top:12px;display:grid;gap:2px}
.mrb-smart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #d7e9ec}
.mrb-smart-rl{font-size:14px;font-weight:600;color:#123138}
.mrb-smart-rl b{font-weight:600}
.mrb-smart-rl small{display:block;font-size:12px;font-weight:400;color:#5a6e74;margin-top:2px}
.mrb-slcolors{display:flex;gap:8px;margin-top:8px}
.mrb-slcol{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#123138;
  padding:6px 10px;border:1px solid #c4cedd;border-radius:8px;background:#fff;cursor:pointer}
.mrb-slcol span{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px #cfcfcf}
.mrb-slcol.on{border:2px solid #1c8ea3;background:#ecf8fb;padding:5px 9px}
.mrb-smart-acc{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #d7e9ec;cursor:pointer}
.mrb-smart-acc input{width:18px;height:18px;flex:none;accent-color:#1c8ea3;cursor:pointer}
.mrb-smart-acc>span{flex:1;font-size:14px;font-weight:600;color:#123138}
.mrb-smart-acc small{display:block;font-size:12px;font-weight:400;color:#5a6e74;margin-top:2px}
.mrb-slrec{display:inline-block;font-size:11px;font-weight:600;font-style:normal;color:#12707f;background:#d7f0f4;border-radius:999px;padding:1px 8px;margin-left:4px}
.mrb-slp{font-size:14px;font-weight:700;color:#0a444e;white-space:nowrap}
.mrb-slstep{flex:none}
/* setkaart: gekoppelde Tedee-onderdelen onder de set */
.mrb-setsmart{margin-top:10px;padding-top:10px;border-top:1px dashed #d7e9ec}
.mrb-setsmart-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#0a444e;margin-bottom:6px}
.mrb-setsmart-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mrb-setsmart-list li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#3a4654}
.mrb-setsmart-list li b{font-weight:600;color:#0a444e;white-space:nowrap}
@media(max-width:720px){
  .mrb-slmode{flex-wrap:wrap}
  .mrb-smart-row{flex-wrap:wrap}
}

/* ===== [Claude] smartlock v2: tegels met afbeelding + cilinder-toewijzing ===== */
.mrb-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid #c4cedd;border-radius:12px;background:#fff;padding:10px 12px}
.mrb-tile:hover{border-color:#1c8ea3;background:#f4fbfc}
.mrb-tile.on{border:2px solid #1c8ea3;background:#ecf8fb;padding:9px 11px}
.mrb-tile-static{cursor:default}
.mrb-tile-static:hover{border-color:#c4cedd;background:#fff}
.mrb-tile-img{flex:none;width:52px;height:52px;border-radius:9px;background:#f4f6f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mrb-tile-img img{width:100%;height:100%;object-fit:contain}
.mrb-tile-ic{color:#1c8ea3}
.mrb-tile-txt{flex:1;min-width:0}
.mrb-tile-txt b{display:block;font-size:14px;font-weight:600;color:#123138}
.mrb-tile-txt small{display:block;font-size:12px;color:#5a6e74;margin-top:1px;line-height:1.35}
.mrb-tile-r{flex:none;display:flex;align-items:center;gap:10px}
.mrb-tile-p{font-size:14px;font-weight:700;color:#0a444e;white-space:nowrap}
/* Kleurkeuze toetsenbord — compacte swatch-knoppen in dezelfde balk */
.mrb-kpcolors{flex:none;display:flex;gap:8px;align-items:center;margin:0 12px}
.mrb-kpcol{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #dcebee;border-radius:9px;padding:7px 12px;cursor:pointer;background:#fff;font-size:13px;font-weight:600;color:#123138;white-space:nowrap}
.mrb-kpcol:hover{border-color:#1c8ea3}
.mrb-kpcol.on{border-color:#1c8ea3;background:#ecf8fb}
.mrb-kpsw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:none}
@media(max-width:640px){.mrb-tile-static{flex-wrap:wrap}.mrb-kpcolors{margin:8px 0 0;order:3;width:100%}}
.mrb-tile-check{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #c4cedd;position:relative}
.mrb-tile.on .mrb-tile-check{border-color:#1c8ea3;background:#1c8ea3}
.mrb-tile.on .mrb-tile-check::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mrb-tilegrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mrb-tilegrid2 .mrb-tile-txt b{font-size:13px}
.mrb-smart-note{background:#ecf8fb;border:1px solid #bfe6ee;border-radius:10px;padding:10px 12px;font-size:13px;color:#123138;line-height:1.5;margin-bottom:12px}
.mrb-smart-note b{color:#0a444e}
.mrb-smart-sub{font-size:12px;font-weight:700;color:#5a6e74;text-transform:uppercase;letter-spacing:.03em;margin:14px 0 8px}
.mrb-smart-body{display:grid;gap:8px}
.mrb-smart-row2{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0}
.mrb-smart-row2>span{font-size:14px;font-weight:600;color:#123138}
.mrb-smart-row2 small{font-weight:400;color:#5a6e74}
/* cilinderrij met Tedee */
.mrb-cil.has-tedee{border:1px solid #bfe6ee;box-shadow:0 0 0 1px #bfe6ee inset}
.mrb-prev{position:relative}
.mrb-prev-tedee{display:flex;align-items:center;justify-content:center}
.mrb-cyltedee{max-width:110px;max-height:96px;width:auto;height:auto}
.mrb-tedbadge{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:700;
  color:#0a444e;background:#d7f0f4;border-radius:999px;padding:3px 9px}
.mrb-knob-ted{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#0a444e;
  background:#ecf8fb;border:1px solid #bfe6ee;border-radius:8px;padding:8px 10px;min-height:38px}
.mrb-tedline{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:#12707f;
  background:#f4fbfc;border-top:1px dashed #bfe6ee;padding-top:8px}
.mrb-tedline b{color:#0a444e;font-weight:600}
@media(max-width:720px){
  .mrb-tilegrid2{grid-template-columns:1fr}
  .mrb-tile-img{width:44px;height:44px}
}
/* [Claude] mobiel: Tedee/Nuki-optietegels — op smalle schermen kneep de rechterkolom
   (prijs / kleurknoppen / stepper) de titel+omschrijving tot een dunne, lelijk
   afbrekende kolom. Bij tegels mét prijs of kleurkeuze krijgt de tekst nu de volle
   breedte en zakt de besturing naar een nette tweede regel (rechts uitgelijnd). */
@media(max-width:600px){
  .mrb-tile:has(.mrb-tile-p),.mrb-tile:has(.mrb-kpcol){flex-wrap:wrap;align-items:center}
  .mrb-tile:has(.mrb-tile-p) .mrb-tile-txt,.mrb-tile:has(.mrb-kpcol) .mrb-tile-txt{flex:1 1 100%}
  .mrb-tile:has(.mrb-tile-p) .mrb-tile-r,.mrb-tile:has(.mrb-kpcol) .mrb-tile-r{flex:1 1 100%;justify-content:flex-end;margin-top:8px;gap:12px}
}

/* ===== [Claude] oplegslot: rij 1 afbeelding + links/rechts-keuze ===== */
.mrb-prev-opleg{display:flex;align-items:center;justify-content:center}
.mrb-prev-opleg img{max-width:112px;max-height:100px;width:auto;height:auto}
.mrb-opleg-hand{margin-top:10px;border-top:1px dashed #bfe6ee;padding-top:10px}
.mrb-opleg-h{font-size:13px;font-weight:600;color:#0a444e;margin-bottom:8px}
.mrb-opleg-h span{font-weight:400;color:#c0392b}
.mrb-handgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px}
.mrb-handtile{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #c4cedd;border-radius:12px;background:#fff;cursor:pointer;text-align:left}
.mrb-handtile:hover{border-color:#1c8ea3;background:#f4fbfc}
.mrb-handtile.on{border:2px solid #1c8ea3;background:#ecf8fb;padding:9px 11px}
.mrb-handtile svg{flex:none;width:56px;height:auto}
.mrb-handtile b{display:block;font-size:14px;font-weight:600;color:#123138}
.mrb-handtile small{display:block;font-size:12px;color:#5a6e74}
.mrb-opleg-req .mrb-handtile{border-color:#e2b4b4}
.mrb-opleg-flash{animation:mrbflash 1.6s}
@keyframes mrbflash{0%,100%{background:transparent}30%{background:#fdecec}}
@media(max-width:720px){.mrb-handgrid{grid-template-columns:1fr}}

/* ===== [Claude] hangslot: vaste (niet-aanpasbare) velden op cilinder 1 ===== */
.mrb-fixedval{display:flex;align-items:center;gap:7px;font-size:14px;color:#5a6e74;background:#f4f6f8;border:1px solid #e2e6ea;border-radius:8px;padding:8px 11px;min-height:38px}
.mrb-fixswatch{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px #b9c0c9;flex:none}

/* ===== [Claude] hangslot als eigen regel + knoppenrij ===== */
.mrb-addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mrb-addhang{background:#1c8ea3;border-color:#1c8ea3;color:#fff}
.mrb-addhang::before{color:#fff}
.mrb-addhang:hover{background:#12707f;border-color:#12707f;color:#fff}
.mrb-hangrow{padding:0}
.mrb-hang-in{display:flex;align-items:center;gap:16px;padding:12px 14px}
.mrb-hang-in .mrb-prev-opleg{width:112px;flex:none;position:relative;display:flex;flex-direction:column;align-items:center}
.mrb-hang-in .mrb-cyltedee{max-width:98px;max-height:90px;width:auto;height:auto}
.mrb-hang-txt{flex:1;min-width:0}
.mrb-hang-txt b{display:block;font-size:15px;font-weight:600;color:#123138}
.mrb-hang-txt small{display:block;font-size:12.5px;color:#5a6e74;margin-top:3px;line-height:1.5}
.mrb-hang-r{display:flex;align-items:center;gap:14px;flex:none}
.mrb-hang-p{font-size:17px;font-weight:700;color:#0a444e;white-space:nowrap}
@media(max-width:720px){
  .mrb-hang-in{flex-wrap:wrap}
  .mrb-hang-txt{flex:1 1 60%}
  .mrb-hang-r{width:100%;justify-content:space-between;border-top:1px solid #eef0f2;padding-top:8px}
}

/* ===== [Claude] tandwiel: sub-kop in de draaiknop-popup ===== */
.mrb-kopt-sub{font-size:12px;font-weight:700;color:#5a6e74;text-transform:uppercase;letter-spacing:.03em;padding:12px 4px 6px;border-top:1px solid #eef0f2;margin-top:6px}

/* ===== [Claude] postlock: maatkeuze 25/29 mm op de regel ===== */
.mrb-plsize{display:flex;gap:8px;margin-top:8px}
.mrb-plbtn{font-size:13px;font-weight:600;color:#123138;padding:6px 14px;border:1px solid #c4cedd;border-radius:8px;background:#fff;cursor:pointer}
.mrb-plbtn:hover{border-color:#1c8ea3;background:#ecf8fb}
.mrb-plbtn.on{border:2px solid #1c8ea3;background:#ecf8fb;padding:5px 13px}

/* [Claude] Serie-tabs voor generieke spoke-landing (knopcilinder, gelijksluitende…) */
.mrb-serietabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.mrb-serietab{-webkit-appearance:none;appearance:none;border:1.5px solid #d3e0e2;background:#fff;color:#0a444e;font-weight:600;font-size:15px;line-height:1.2;padding:10px 18px;border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.mrb-serietab:hover{border-color:#1c8ea3;color:#1c8ea3}
.mrb-serietab.on{background:#0a444e;border-color:#0a444e;color:#fff}

/* [Claude] Spoke-landing (categorie): intro-tekst boven de serie-configurator */
.mrb-spoke{margin:0 0 30px}
.mrb-spoke-h2{font-size:1.7rem;line-height:1.25;color:#0a444e;margin:0 0 .6rem}
.mrb-spoke-intro{max-width:840px;color:#33484a;font-size:16px;line-height:1.65;margin:0 0 24px}
.mrb-spoke-intro p{margin:0 0 .85rem}
.mrb-spoke-intro strong{color:#0a444e}