.mvsb{--ink:#1c1a17; --ink-2:#4a453e; --ink-3:#6f685e;
  --copper:#A9866A; --copper-d:#8a6a52; --copper-l:#e8dbd0; --brass:#c9b28f;
  --paper:#faf8f5; --card:#fff; --line:#e4ded5;
  --good:#4a7c59; --warn:#b07d3a;}
.mvsb *{box-sizing:border-box}
.mvsb{margin:0;background:var(--paper);color:var(--ink);
  font-family:Jost,system-ui,sans-serif;font-size:17px;line-height:1.6}
.mvsb .wrap{max-width:1080px;margin:0 auto;padding:0 5%}
@media(min-width:900px){
  .mvsb .wrap{padding:0 3%}
}
/* progress rail */
.mvsb .rail{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.mvsb .rail .in{display:flex;gap:0;max-width:1080px;margin:0 auto;padding:0 5%}
@media(min-width:900px){
  .mvsb .rail .in{padding:0 3%}
}
.mvsb .step{flex:1;padding:13px 4px 11px;border-bottom:3px solid transparent;
  font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.09em;font-size:11.5px;font-weight:600;color:#a9a29a;text-align:center;
  transition:color .2s,border-color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvsb .step.on{color:var(--ink);border-bottom-color:var(--copper)}
.mvsb .step.done{color:var(--copper-d);border-bottom-color:var(--copper-l)}
.mvsb main{padding:34px 0 70px}
.mvsb .panel{display:none}
.mvsb .panel.on{display:block}
.mvsb h2{font-size:clamp(22px,3.6vw,30px);font-weight:500;margin:0 0 8px;line-height:1.22}
.mvsb .sub{color:var(--ink-2);margin:0 0 24px;max-width:60ch}
/* option cards */
.mvsb .opts{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 28px}
@media(min-width:620px){
  .mvsb .opts{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .mvsb .opts.four{grid-template-columns:repeat(4,1fr)}
}
.mvsb .opt{background:var(--card);border:1.5px solid var(--line);border-radius:3px;
  padding:16px 16px 15px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:border-color .15s,box-shadow .15s,background .15s;position:relative}
.mvsb .opt:hover{border-color:var(--brass)}
.mvsb .opt.sel{border-color:var(--copper);background:#fdfaf7;box-shadow:inset 0 0 0 1px var(--copper)}
.mvsb .opt .t{font-weight:600;font-size:17px;display:block;margin-bottom:3px}
.mvsb .opt .d{font-size:14.5px;color:var(--ink-3);line-height:1.45;display:block}
.mvsb .opt .tick{position:absolute;top:13px;right:13px;width:20px;height:20px;border-radius:50%;
  background:var(--copper);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:12px;line-height:1}
.mvsb .opt.sel .tick{display:flex}
.mvsb .nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.mvsb button.go{background:var(--ink);color:#fff;border:0;border-radius:2px;padding:14px 26px;
  font:inherit;font-weight:600;font-size:16px;cursor:pointer;letter-spacing:.01em}
.mvsb button.go:hover{background:#332e29}
.mvsb button.go[disabled]{background:#cdc6bd;cursor:not-allowed}
.mvsb button.back{background:none;border:0;color:var(--ink-3);font:inherit;font-size:15.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:14px 4px}
/* build view */
.mvsb .buildgrid{display:grid;grid-template-columns:1fr;gap:26px}
/* grid items default to min-width:auto, so a nowrap price like "R 102 570"
   sets an intrinsic floor and pushes the whole column past the viewport */
.mvsb .buildgrid > *{min-width:0}
@media(min-width:940px){
  .mvsb .buildgrid{grid-template-columns:1fr 340px;gap:34px;align-items:start}
}
.mvsb .piece{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:3px;padding:14px;margin-bottom:11px;align-items:flex-start}
.mvsb .piece .ic{width:52px;height:52px;flex:0 0 52px;border-radius:2px;background:var(--copper-l);
  display:flex;align-items:center;justify-content:center;color:var(--copper-d)}
.mvsb .piece .ic svg{width:40px;height:40px;display:block}
.mvsb .piece .ic{position:relative}
.mvsb .piece .ic.ph{background:#fff;border:1px solid var(--line)}
.mvsb .piece .ic.ph svg{opacity:0}
.mvsb .piece .ic.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;mix-blend-mode:multiply}
.mvsb .piece.steel .ic{background:#e6e8ea;color:#5d6470}
.mvsb .piece .bd{flex:1;min-width:0}
.mvsb .piece .job{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--copper-d);display:block}
.mvsb .piece .nm{font-weight:600;font-size:16.5px;display:block;margin:1px 0 2px;line-height:1.3}
.mvsb .piece .mt{font-size:14px;color:var(--ink-3)}
.mvsb .piece .pr{font-weight:600;font-size:16.5px;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.mvsb .piece .sizerow{margin-top:9px}
.mvsb .piece .sizerow label{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--ink-3);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mvsb .piece .sizerow select{font:inherit;font-family:Jost,sans-serif;font-size:15px;text-transform:none;
  letter-spacing:0;font-weight:500;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:2px;padding:7px 9px;min-width:170px;cursor:pointer}
.mvsb .piece .sizerow select:hover{border-color:var(--brass)}
.mvsb .piece .sizerow select:focus{outline:2px solid var(--copper);outline-offset:1px}
.mvsb .piece .onesize{font-family:Jost,sans-serif;font-size:15px;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--ink-2)}
.mvsb .piece .qtyrow{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.mvsb .piece .qtyrow label{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--ink-3)}
.mvsb .piece .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:2px;overflow:hidden;background:#fff}
.mvsb .piece .stepper button{width:40px;height:40px;border:0;background:#fff;font:inherit;
  font-size:19px;line-height:1;color:var(--ink);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.mvsb .piece .stepper button:hover:not([disabled]){background:#f4efe8;color:var(--copper-d)}
.mvsb .piece .stepper button[disabled]{color:#cdc6bd;cursor:not-allowed}
.mvsb .piece .stepper b{min-width:34px;text-align:center;font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);
  border-right:1px solid var(--line);align-self:stretch;display:flex;
  align-items:center;justify-content:center}
.mvsb .piece .pr em{display:block;font-style:normal;font-size:13px;font-weight:400;
  color:var(--ink-3);margin-top:2px}
.mvsb .piece .acts{display:flex;gap:12px;margin-top:9px}
.mvsb .piece .acts button{background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--copper-d);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mvsb .piece .acts button.rm{color:var(--ink-3)}
.mvsb .piece .flagnote{font-size:13.5px;color:var(--warn);margin-top:5px;line-height:1.4}
.mvsb .piece .mixnote{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.45;
  border-left:2px solid var(--copper);padding-left:9px}
.mvsb .piece .mixnote b{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.09em;font-size:11.5px;font-weight:600;color:var(--copper-d);
  display:block;margin-bottom:1px}
.mvsb .addrow{background:#f4efe8;border:1px dashed var(--brass);border-radius:3px;padding:14px;
  margin-bottom:11px;display:flex;gap:14px;align-items:center}
.mvsb .addrow .bd{flex:1}
.mvsb .addrow .job{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--copper-d);display:block}
.mvsb .addrow .nm{font-weight:500;font-size:16px;color:var(--ink-2)}
.mvsb .addrow button{background:var(--copper);color:#241c16;border:0;border-radius:2px;
  padding:9px 15px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap}
/* the batterie rack */
.mvsb .rack{margin:0 0 22px}
.mvsb .rlab{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:11.5px;font-weight:600;color:var(--ink-3);margin:0 0 10px}
.mvsb .hangrail{position:relative;padding-top:15px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch}
.mvsb .hang .rod{position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--brass),var(--copper),var(--brass));border-radius:2px}
.mvsb .hang{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:0 2px 6px;min-width:min-content}
.mvsb .hang figure{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.mvsb .hang .hook{display:block;width:1.5px;height:15px;background:var(--brass)}
/* a square slot keeps every piece on one scale — max-height would squash the
   largest against its neighbours, and the shots vary in aspect ratio */
.mvsb .hang .slot{position:relative;display:block;width:100%;aspect-ratio:1/1}
.mvsb .hang img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
.mvsb .hang img.cut{mix-blend-mode:multiply}
.mvsb .hang img.photo{border:1px solid var(--line);border-radius:2px;background:#fff;padding:3px}
.mvsb .hang .more{position:absolute;right:0;bottom:2px;background:var(--ink);color:var(--brass);
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;padding:2px 7px;border-radius:2px;line-height:1.35}
/* summary rail */
.mvsb .sum{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:20px 18px;
  position:sticky;top:56px}
.mvsb .sum h3{margin:0 0 3px;font-size:19px;font-weight:600}
.mvsb .sum .cnt{font-size:14.5px;color:var(--ink-3);margin:0 0 16px}
.mvsb .meter{height:8px;background:#efe9e1;border-radius:4px;overflow:hidden;margin:0 0 8px}
.mvsb .meter i{display:block;height:100%;background:var(--copper);width:0;transition:width .35s ease}
.mvsb .ratenow{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.11em;font-size:12px;font-weight:600;color:var(--copper-d);margin:0 0 7px}
.mvsb .tiers{display:flex;justify-content:space-between;font-family:'Barlow Semi Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:600;
  color:#a9a29a;margin:0 0 20px}
.mvsb .tiers span.hit{color:var(--copper-d)}
.mvsb .lines{border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.mvsb .ln{display:flex;justify-content:space-between;gap:10px;font-size:15.5px;margin-bottom:8px;
  color:var(--ink-2)}
.mvsb .ln b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mvsb .ln.save{color:var(--good)}
.mvsb .ln.save b{color:var(--good)}
.mvsb .ln.tot{border-top:1.5px solid var(--ink);margin-top:12px;padding-top:12px;font-size:22px;
  font-weight:500;color:var(--ink)}
.mvsb .ln.tot b{font-size:22px;font-weight:600}
.mvsb .per{font-size:13.5px;color:var(--ink-3);margin:2px 0 0;text-align:right}
.mvsb .ship{font-size:14px;color:var(--good);margin:12px 0 0;font-weight:500}
.mvsb .can{margin:22px 0 0;border-top:1px solid var(--line);padding-top:16px}
.mvsb .can h4{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.11em;font-size:11.5px;font-weight:600;color:var(--ink-3);margin:0 0 10px}
.mvsb .can ul{list-style:none;padding:0;margin:0}
.mvsb .can li{font-size:15px;padding:3px 0 3px 24px;position:relative;color:var(--ink-2)}
.mvsb .can li::before{position:absolute;left:0;top:3px;font-weight:600}
.mvsb .can li.y::before{content:"\2713";color:var(--good)}
.mvsb .can li.n::before{content:"\2014";color:#c4bdb4}
.mvsb .can li.n{color:#a9a29a}
.mvsb button.cta{width:100%;background:var(--ink);color:#fff;border:0;border-radius:2px;
  padding:15px;font:inherit;font-weight:600;font-size:16.5px;cursor:pointer;margin-top:20px}
.mvsb button.cta:hover{background:#332e29}
.mvsb .restart{display:block;width:100%;background:none;border:0;color:var(--ink-3);font:inherit;
  font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  margin-top:12px;padding:6px}
.mvsb .note{background:#fdf8f0;border-left:3px solid var(--warn);padding:13px 15px;margin:0 0 24px;
  font-size:14.5px;color:var(--ink-2);border-radius:0 3px 3px 0}
.mvsb .note b{color:var(--ink)}
.mvsb footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--ink-3);font-size:14px}

/* --- live-site adjustments (the prototype had the page to itself) --- */
.mvsb{background:var(--paper);padding:0 0 10px}
.mvsb .rail{top:0}
.mvsb .wrap{max-width:1180px}
.mvsb .sum{top:64px}
.mvsb .hd2{background:var(--ink);color:#f3efe9;padding:38px 0 32px;margin:0 0 0}
.mvsb .hd2 .eyebrow{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--brass);margin:0 0 9px}
.mvsb .hd2 h1{font-size:clamp(27px,5vw,40px);line-height:1.15;margin:0 0 10px;font-weight:400;color:#fff}
.mvsb .hd2 p{margin:0;color:#c6bfb4;max-width:58ch;font-size:16px}
.mvsb .loading{padding:60px 0;text-align:center;color:var(--ink-3);font-size:16px}
.mvsb .failed{padding:40px 0;color:var(--warn)}
@media(max-width:939px){.mvsb .sum{position:static}}