/* ═══════════════════════════════════════════════════════
   TENEBRA — product surfaces (configurator, collection,
   finance, reserve). Same tokens as the film; the film's
   chrome steps aside once the picture ends.
   ═══════════════════════════════════════════════════════ */

/* the HUD, rail and letterbox belong to the FILM. once the picture is over
   they must get out of the way — telemetry hovering over a booking form is
   the single fastest way to make a premium page look like a template */
body.after .hud,
body.after .rail,
body.after .cine .bar,
body.after .cine .brk,
body.after .hint { opacity: 0 !important; pointer-events: none; }
body.after .topbar-r .rec { opacity: 0; transition: opacity .7s var(--ease); }
.hud, .rail, .cine .bar, .cine .brk { transition: opacity .7s var(--ease); }

.display.md{font-size:clamp(2.1rem,5.4vw,4.6rem);line-height:.96}

/* ── panel shell ────────────────────────────────────── */
.panel{
  position:relative; z-index:2; background:var(--void);
  padding:clamp(5rem,13vh,9rem) clamp(1.6rem,6vw,7rem);
  border-top:1px solid var(--hair);
}
.panel-head{margin-bottom:clamp(2.6rem,6vh,4.4rem);max-width:44rem}
.panel-head .display{margin-top:.2rem}

/* ── configurator ───────────────────────────────────── */
.cfg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.cfg-view{
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
  border:1px solid var(--hair);
}
#cfgHero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:1;transition:opacity .28s var(--ease)}
.cfg-view.swapping #cfgHero{opacity:0}
.cfg-badge{position:absolute;left:1rem;bottom:1rem;font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);text-shadow:0 1px 14px rgba(5,5,5,.95)}

.cfg-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 45%,rgba(5,5,5,.6) 100%)}


.cfg-opts{display:flex;flex-direction:column;gap:1.5rem}
.opt{border:0}
.opt legend{font-size:.53rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dimmer);
  margin-bottom:.7rem;padding:0}
.sw{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:transparent;border:1px solid var(--hair);color:var(--dim);
  font:inherit;font-size:.82rem;letter-spacing:.01em;text-align:left;
  padding:.78rem .9rem;margin-bottom:-1px;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.sw b{font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--dimmer);white-space:nowrap}
.sw:hover{color:var(--bone);border-color:rgba(244,242,239,.26)}
.sw.on{color:var(--bone);border-color:var(--amber);background:rgba(233,161,59,.05);position:relative;z-index:1}
.sw.on b{color:var(--amber-dim)}
.opt[data-group="paint"] .sw{padding-left:2.7rem}
.opt[data-group="paint"] .sw::before{
  content:"";position:absolute;left:.9rem;width:13px;height:13px;border-radius:50%;
  background:var(--c);box-shadow:0 0 0 1px rgba(244,242,239,.22)}
.opt[data-group="paint"] .sw{position:relative}

.deck{font-size:.9rem;line-height:1.65;color:var(--dim);max-width:40ch;margin-top:1.1rem}
.cfg-spec{margin-top:.15rem;letter-spacing:.14em;line-height:1.7}
.cfg-total{border-top:1px solid var(--hair);padding-top:1.5rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.price{font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.02em;color:var(--bone);font-variant-numeric:tabular-nums}
.price b{font-weight:400}
.cfg-total .cta{margin-top:.9rem}

/* Wheel and interior detail tiles, directly under the hero so they are seen.
   Interior can never appear in an exterior shot, so the tile is the only
   place it is shown at all. */
.cfg-left{display:flex;flex-direction:column;min-width:0}
.cfg-details{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;
  background:var(--hair);border:1px solid var(--hair)}
.det{position:relative;background:var(--void);overflow:hidden}
.det img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  opacity:1;transition:opacity .3s var(--ease)}
/* default VISIBLE. The fade is applied while swapping, so a failed handler
   leaves the image on screen rather than hiding it. */
.det.swapping img{opacity:0}
.det figcaption{position:absolute;left:.85rem;bottom:.7rem;font-size:.52rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--dimmer);
  text-shadow:0 1px 12px rgba(5,5,5,.95)}
.det figcaption b{font-weight:400;color:var(--bone);margin-left:.4rem;letter-spacing:.14em}
@media (max-width:900px){.cfg-details{grid-template-columns:1fr}}

/* ── collection ─────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;
  border-block:1px solid var(--hair);padding:1.2rem 0;margin-bottom:2.4rem}
.fgroup{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.flabel{font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer);margin-right:.3rem}
.chip{background:transparent;border:1px solid var(--hair);color:var(--dim);font:inherit;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.42rem .8rem;cursor:pointer;
  transition:.3s var(--ease)}
.chip:hover{color:var(--bone);border-color:rgba(244,242,239,.3)}
.chip.on{color:var(--void);background:var(--bone);border-color:var(--bone)}
.fcount{margin-left:auto;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.fcount b{color:var(--bone);font-weight:400}
.reset{background:transparent;border:0;color:var(--amber);font:inherit;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;margin-left:1rem;padding:0;
  border-bottom:1px solid transparent;transition:.3s}
.reset:hover{border-bottom-color:var(--amber)}

.grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.card{background:var(--void);padding:1.5rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;
  transition:background .35s var(--ease),opacity .3s var(--ease)}
.card b{font-size:1.7rem;font-weight:400;letter-spacing:-.02em;color:var(--bone);line-height:1}
.card p{font-size:.86rem;color:var(--dim);margin-top:.3rem}
.card .st{font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer)}
.card[data-status="Available"] .st{color:var(--amber)}
.card.free{cursor:pointer}
.card.free:hover{background:#0d0d0f}
.card.free:hover b{color:var(--amber)}
.card[hidden]{display:none}
.empty{padding:3rem 0;font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer)}

/* ── finance ────────────────────────────────────────── */
.fin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.fin-in{display:flex;flex-direction:column;gap:2.2rem}
.fld{display:flex;flex-direction:column;gap:.75rem}
.fld > span:first-child{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.fld > span:first-child b{color:var(--bone);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--hair);outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  background:var(--amber);border-radius:50%;cursor:ew-resize;margin-top:0}
input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--amber);border:0;border-radius:50%;cursor:ew-resize}
.seg{display:flex;border:1px solid var(--hair)}
.seg button{flex:1;background:transparent;border:0;border-right:1px solid var(--hair);color:var(--dim);
  font:inherit;font-size:.66rem;letter-spacing:.14em;padding:.62rem .3rem;cursor:pointer;transition:.3s var(--ease)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--bone)}
.seg button.on{background:var(--bone);color:var(--void)}
.fin-out{border:1px solid var(--hair);padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.5rem}
.fin-brk{margin-top:1.6rem;border-top:1px solid var(--hair)}
.fin-brk > div{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--hair)}
.fin-brk dt{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer)}
.fin-brk dd{font-size:.78rem;color:var(--dim);font-variant-numeric:tabular-nums}
.fin-brk dd b{color:var(--bone);font-weight:400}
.note{margin-top:1.2rem;letter-spacing:.14em}

/* ── reserve ────────────────────────────────────────── */
.book{display:flex;flex-direction:column;gap:1.6rem;max-width:56rem}
.book .row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.fi{display:flex;flex-direction:column;gap:.6rem;position:relative}
.fi > span{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.fi input,.fi select{
  background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--bone);
  font:inherit;font-size:.94rem;padding:.6rem 0;outline:0;border-radius:0;
  transition:border-color .35s var(--ease);width:100%;
}
.fi select{appearance:none;cursor:pointer}
.fi option{background:var(--ink);color:var(--bone)}
.fi input:focus,.fi select:focus{border-bottom-color:var(--amber)}
.fi input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.4;cursor:pointer}
.fi .err{font-style:normal;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:#C8202B;min-height:.9rem;opacity:0;transition:opacity .3s}
.fi.bad input,.fi.bad select{border-bottom-color:#C8202B}
.fi.bad .err{opacity:1}
.seg.wide button{padding:.7rem .3rem}
.cta.submit{align-self:flex-start;margin-top:.8rem;background:transparent;cursor:pointer}

.done{border:1px solid var(--amber);padding:clamp(1.8rem,4vw,3rem);max-width:56rem;
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.done .ref{font-size:1.5rem;letter-spacing:.1em;color:var(--bone)}
.done .ref b{font-weight:400;color:var(--amber)}
.done .dim{font-size:.78rem;letter-spacing:.06em;line-height:1.7}
.done .reset{margin:1rem 0 0}

/* ── footer ─────────────────────────────────────────── */
.foot{position:relative;z-index:2;background:var(--void);border-top:1px solid var(--hair);
  padding:clamp(2.4rem,6vh,4rem) clamp(1.6rem,6vw,7rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.foot > div{display:flex;flex-direction:column;gap:.6rem}
.foot .places{flex-direction:row;gap:1.6rem}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .cfg,.fin{grid-template-columns:1fr}
  .book .row{grid-template-columns:1fr}
  .fcount{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sw,.chip,.card,.seg button,
}