.cfg-wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; min-height:calc(100vh - var(--header-h)); }
  .cfg-preview{ position:sticky; top:var(--header-h); align-self:start; height:calc(100vh - var(--header-h));
    display:flex; flex-direction:column; transition:background .5s ease; }
  .cfg-preview .pv-top{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px clamp(24px,4vw,64px); position:relative; }
  .cfg-preview .pv-top img{ width:100%; max-width:680px; object-fit:contain; mix-blend-mode:multiply; filter:drop-shadow(0 30px 40px rgba(8,48,95,.25)); transition:opacity .3s; }
  .cfg-preview .badge{ position:absolute; top:28px; left:clamp(24px,4vw,64px); font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--ink-soft); }
  .cfg-preview .badge b{ display:block; font-family:var(--display); font-size:clamp(34px,4vw,54px); color:var(--ink); letter-spacing:.01em; margin-top:4px; }
  .pv-summary{ background:#fff; border-top:1px solid var(--line); padding:20px clamp(24px,4vw,48px); }
  .pv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .pv-chip{ font-family:var(--head); font-size:12px; text-transform:uppercase; letter-spacing:.06em; background:var(--mist); color:var(--ink-soft); padding:7px 12px; border-radius:30px; }
  .pv-chip b{ color:var(--ink); }
  .pv-total{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .pv-total .lab{ font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--ink-soft); }
  .pv-total .amt{ font-family:var(--display); font-size:clamp(34px,4vw,50px); line-height:1; }

  .cfg-options{ padding:clamp(30px,4vw,56px) clamp(24px,4vw,56px) 140px; max-width:760px; }
  .ostep{ padding:30px 0; border-bottom:1px solid var(--line); }
  .ostep:first-child{ padding-top:6px; }
  .ostep .step-n{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--accent); font-weight:700; }
  .ostep h3{ font-family:var(--display); font-size:30px; text-transform:uppercase; margin:6px 0 20px; }

  .opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .opt{ border:2px solid var(--line); border-radius:6px; padding:16px 18px; cursor:pointer; transition:.16s; background:#fff; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .opt:hover{ border-color:var(--blue-bright); }
  .opt.sel{ border-color:var(--accent); background:#f4f8fc; }
  .opt .nm{ font-family:var(--head); font-weight:600; font-size:15.5px; }
  .opt .pr{ font-family:var(--head); font-size:13px; color:var(--ink-soft); white-space:nowrap; }
  .opt .pr.inc{ color:#1b9e5a; }

  .model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .mopt{ border:2px solid var(--line); border-radius:6px; cursor:pointer; overflow:hidden; transition:.16s; background:#fff; }
  .mopt:hover{ border-color:var(--blue-bright); }
  .mopt.sel{ border-color:var(--accent); }
  .mopt .mi{ aspect-ratio:3/2; background:radial-gradient(120% 120% at 50% 20%,#fff,var(--mist) 80%); display:flex; align-items:center; justify-content:center; padding:8px; }
  .mopt .mi img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
  .mopt .mb{ padding:9px 12px; border-top:1px solid var(--line); }
  .mopt .mb .mn{ font-family:var(--display); font-size:18px; text-transform:uppercase; }
  .mopt .mb .mp{ font-family:var(--head); font-size:11.5px; color:var(--ink-soft); }

  .color-grid{ display:flex; flex-wrap:wrap; gap:16px; }
  .copt{ text-align:center; cursor:pointer; width:80px; }
  .copt .cd{ width:62px; height:62px; border-radius:50%; margin:0 auto 8px; border:2px solid var(--line); box-shadow:var(--shadow-sm); transition:.16s; position:relative; }
  .copt.sel .cd{ border-color:var(--accent); transform:scale(1.06); }
  .copt.sel .cd::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; mix-blend-mode:difference; }
  .copt .cl{ font-family:var(--head); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
  .copt .cp{ font-size:10.5px; color:var(--ink-soft); }

  .addons{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .addon{ border:2px solid var(--line); border-radius:6px; padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:.16s; }
  .addon:hover{ border-color:var(--blue-bright); }
  .addon.sel{ border-color:var(--accent); background:#f4f8fc; }
  .addon .box{ width:22px; height:22px; border-radius:5px; border:2px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
  .addon.sel .box{ background:var(--accent); border-color:var(--accent); }
  .addon .nm{ font-family:var(--head); font-weight:600; font-size:14.5px; }
  .addon .pr{ margin-left:auto; font-size:13px; color:var(--ink-soft); white-space:nowrap; }

  .mobile-total{ display:none; }
  @media (max-width:960px){
    .cfg-wrap{ grid-template-columns:1fr; }
    .cfg-preview{ position:static; height:auto; }
    .cfg-preview .pv-top{ min-height:300px; }
    .pv-summary{ display:none; }
    .cfg-options{ max-width:none; padding-bottom:120px; }
    .model-grid{ grid-template-columns:1fr 1fr; }
    .opt-grid, .addons{ grid-template-columns:1fr; }
    .mobile-total{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--ink); color:#fff;
      align-items:center; justify-content:space-between; padding:14px 20px; gap:14px; }
    .mobile-total .amt{ font-family:var(--display); font-size:30px; }
    .mobile-total .lab{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--blue-bright); }
  }