/* ═══════════════════════════════════════════════════════════
   LUMEXA — configurator
   Extends lumexa.css tokens. --gold is the one reserved accent
   for this tool: active states, the price-surcharge banner,
   and nothing else on the rest of the site.
   ═══════════════════════════════════════════════════════════ */

.cfgr { display:grid; grid-template-columns: 1fr 440px; }

/* ── LEFT: live preview ── */
.cfgr-preview {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: calc(var(--nav-h) + 40px) 48px 40px;
  background: var(--bg-2);
  border-right:1px solid var(--line);
  overflow:hidden;
}
.lamp-frame {
  position:relative; width:100%; max-width:640px; aspect-ratio:16/9;
  overflow:hidden; background:var(--bg-3);
  transition: filter .5s ease;
}
.lamp-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.overlay-finish {
  position:absolute; inset:0; mix-blend-mode:color;
  opacity:0; transition: background .4s ease, opacity .4s ease;
  pointer-events:none;
}
.preview-meta { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:640px; margin-top:22px; }
.preview-model { font-family:var(--serif); font-size:21px; font-weight:500; font-style:italic; color:var(--white); letter-spacing:.01em; }
.preview-badge { font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); border:1px solid var(--line-2); padding:5px 11px; white-space:nowrap; }

.preview-strip { display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:16px; width:100%; max-width:640px; }
.strip-item { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); display:flex; align-items:center; gap:7px; }
.strip-item[hidden] { display:none; }
.strip-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background-size:200% 200%; }

/* ── RIGHT: controls ── */
.cfgr-controls {
  background: var(--bg);
  overflow-y:auto;
  padding: calc(var(--nav-h) + 44px) 44px 90px;
}
.cfgr-controls::-webkit-scrollbar { width:2px; }
.cfgr-controls::-webkit-scrollbar-thumb { background:var(--line-2); }

.cfg-header { margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.brand-tag { font-size:10.5px; font-weight:600; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; }
.cfg-title { font-family:var(--serif); font-size:clamp(26px,2.4vw,32px); font-weight:500; font-style:italic; color:var(--white); line-height:1.18; }
.cfg-title em { color:var(--gold); }
.cfg-sub { margin-top:14px; font-size:13.5px; line-height:1.75; color:var(--ink-soft); max-width:340px; }

.section { margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.section:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }

.sec-label { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.sec-label::after { content:""; flex:1; height:1px; background:var(--line); }
.sec-title { font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); margin-bottom:18px; }

/* ── Shared metallic swatch ── */
.swatch { border-radius:50%; flex-shrink:0; background-repeat:no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 1px 3px rgba(0,0,0,0.5); }

/* ── Finish cards (Natural / Copper / Brass) ── */
.finish-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.finish-card { padding:16px 8px 14px; border:1px solid var(--line); cursor:pointer; text-align:center; transition:all .2s; background:var(--bg-2); }
.finish-card:hover { border-color:var(--line-2); }
.finish-card.active { border-color:var(--gold); background:rgba(200,184,154,0.08); }
.finish-card .swatch { width:52px; height:52px; margin:0 auto 12px; }
.finish-name { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.finish-note { font-size:10px; font-weight:500; color:var(--ink-mute); margin-top:4px; }

/* ── Surcharge banner — the one deliberately loud element ── */
.surcharge-banner {
  margin-top:16px; padding:18px 20px;
  display:flex; align-items:center; gap:16px;
  background: var(--ink); border:1px solid var(--ink);
  transition: background .35s var(--eout), border-color .35s;
}
.sb-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; font-size:12px;
  background: var(--bg); color:var(--ink);
  transition: background .35s, color .35s;
}
.sb-txt { min-width:0; }
.sb-title { font-family:var(--serif); font-weight:500; font-style:italic; font-size:15.5px; color:var(--bg); transition:color .35s; }
.sb-desc { font-size:11.5px; line-height:1.6; color:rgba(13,13,11,0.72); margin-top:3px; transition:color .35s; }
.surcharge-banner.active { background: var(--gold); border-color:var(--gold); }
.surcharge-banner.active .sb-icon { background:var(--gold-ink); color:var(--gold); }

/* ── Light source cards ── */
.source-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.source-card { padding:16px 12px; border:1px solid var(--line); cursor:pointer; text-align:center; transition:all .2s; background:var(--bg-2); }
.source-card:hover { border-color:var(--line-2); }
.source-card.active { border-color:var(--gold); background:rgba(200,184,154,0.08); }
.source-icon { font-family:var(--serif); font-size:22px; color:var(--ink); display:block; margin-bottom:6px; }
.source-name { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.source-sub { font-size:10px; font-weight:500; color:var(--ink-mute); margin-top:4px; }

/* ── Temperature cards ── */
.temp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.temp-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.temp-card { padding:14px 8px 12px; border:1px solid var(--line); cursor:pointer; text-align:center; transition:all .2s; background:var(--bg-2); }
.temp-card:hover { border-color:var(--line-2); }
.temp-card.active { border-color:var(--gold); background:rgba(200,184,154,0.08); }
.temp-orb { width:28px; height:28px; border-radius:50%; margin:0 auto 11px; position:relative; }
.temp-orb::after { content:""; position:absolute; inset:-6px; border-radius:50%; opacity:.28; filter:blur(7px); background:inherit; }
.temp-k { font-family:var(--serif); font-size:16px; color:var(--ink); display:block; }
.temp-desc { font-size:10px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:4px; }

/* ── Dimensions / suspension ── */
.dims-row { display:grid; grid-template-columns:1fr 18px 1fr 18px 1fr; align-items:end; gap:6px; margin-bottom:6px; }
.dim-field label { display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px; }
.dim-field input {
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-2);
  color:var(--ink); font-family:var(--serif); font-size:22px; font-weight:400;
  padding:2px 0 8px; text-align:center; outline:none; transition:border-color .2s; -moz-appearance:textfield;
}
.dim-field input::-webkit-outer-spin-button, .dim-field input::-webkit-inner-spin-button { -webkit-appearance:none; }
.dim-field input:focus { border-color:var(--gold); }
.dim-x { font-family:var(--serif); font-size:20px; color:var(--ink-mute); opacity:.6; padding-bottom:8px; text-align:center; }
.dim-unit, .susp-unit { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); padding-bottom:8px; }
.dim-footnote { font-size:11.5px; font-weight:400; color:var(--ink-soft); font-style:italic; font-family:var(--serif); margin-top:12px; line-height:1.6; }
.susp-row { display:flex; align-items:end; gap:10px; }
.susp-row .dim-field { flex:1; }

/* ── DALI toggle ── */
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.toggle-info { flex:1; }
.toggle-name { font-family:var(--serif); font-size:16px; color:var(--ink); }
.toggle-sub { font-size:10.5px; font-weight:500; letter-spacing:.03em; color:var(--ink-mute); margin-top:4px; }
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:all .3s; }
.toggle-track::before { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:var(--ink-mute); border-radius:50%; transition:all .3s; }
input:checked + .toggle-track { background:rgba(200,184,154,.18); border-color:var(--gold); }
input:checked + .toggle-track::before { transform:translateX(20px); background:var(--gold); }
.dali-note {
  margin-top:14px; padding:12px 16px; border:1px solid rgba(200,184,154,.25);
  font-size:11.5px; font-weight:400; letter-spacing:.01em; color:var(--gold);
  font-style:italic; font-family:var(--serif); line-height:1.6; display:none;
}
.dali-note.show { display:block; }

/* ── Summary ── */
.summary-box { background:var(--bg-2); border:1px solid var(--line); padding:24px; margin-bottom:20px; }
.sum-title { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px; }
.sum-row { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); gap:12px; }
.sum-row:last-child { border-bottom:none; }
.sum-key { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.sum-val { font-family:var(--serif); font-size:14.5px; color:var(--ink); text-align:right; }
.sum-special { color:var(--gold); }

/* ── CTA ── */
.cta-btn {
  display:block; width:100%; padding:18px; text-align:center;
  background:var(--ink); color:var(--bg); border:none;
  font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition: background .25s, color .25s;
}
.cta-btn:hover { background:var(--gold); color:var(--gold-ink); }
.cta-sub { text-align:center; margin-top:12px; font-size:11px; font-weight:400; color:var(--ink-mute); font-style:italic; font-family:var(--serif); }
.cta-note {
  margin-top:14px; padding:14px 16px; border:1px solid rgba(200,184,154,.3); background:rgba(200,184,154,.06);
  font-size:12px; line-height:1.65; color:var(--ink-soft); display:none;
}
.cta-note.show { display:block; }
.cta-note b { color:var(--gold); font-weight:600; }

@media (max-width:900px) {
  .cfgr { grid-template-columns:1fr; }
  .cfgr-preview { position:relative; height:auto; padding:104px 24px 32px; border-right:none; border-bottom:1px solid var(--line); }
  .cfgr-controls { padding:36px 24px 70px; }
}
@media (max-width:480px) {
  .temp-grid { grid-template-columns:repeat(2,1fr); }
  .dims-row { grid-template-columns:1fr 14px 1fr 14px 1fr; }
  .preview-badge { display:none; }
}