/* ============================================================
   COLNAGO USA — configurator
   ============================================================ */

.cfg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-top:1px solid var(--line);min-height:70vh}

/* ---- preview ---- */
.cfg-view{position:sticky;top:112px;align-self:start;border-right:1px solid var(--line);background:#000}
.cfg-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.cfg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
.cfg-stage img.on{opacity:1}
/* hull tint sits over the photography — indicative, not a render */
.cfg-tint{position:absolute;inset:0;mix-blend-mode:color;opacity:0;transition:opacity .5s,background-color .5s;pointer-events:none}
.cfg-tint.on{opacity:.5}
.cfg-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(8,9,10,.55))}
.cfg-hud{
  position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--line);background:rgba(8,9,10,.82);backdrop-filter:blur(10px);
}
.cfg-hud div{flex:1 1 25%;padding:13px 16px;border-right:1px solid var(--line);min-width:0}
.cfg-hud div:last-child{border-right:0}
.cfg-hud dt{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.cfg-hud dd{font-family:var(--mono);font-size:12.5px;margin-top:5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-badge{
  position:absolute;top:16px;left:16px;z-index:4;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  background:rgba(8,9,10,.72);border:1px solid var(--line);padding:6px 11px;backdrop-filter:blur(8px);
}
.cfg-deckstrip{
  position:absolute;right:16px;top:16px;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(8,9,10,.78);border:1px solid var(--line);padding:8px 12px;
  transition:padding .4s var(--ease),background .4s;
}
.cfg-deckstrip img{width:30px;height:30px;object-fit:cover;border:1px solid var(--line-2);transition:width .4s var(--ease),height .4s var(--ease)}
.cfg-deckstrip span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cfg-deckstrip .lbl{display:block;color:var(--acc);margin-bottom:3px}
/* while the deck step is open the sample becomes the point of the picture */
.cfg-deckstrip.big{
  right:16px;top:16px;width:160px;flex-direction:column;align-items:flex-start;gap:12px;
  padding:14px;background:rgba(8,9,10,.9);border-color:var(--line-2);
}
.cfg-deckstrip.big img{width:132px;height:132px;max-width:none}
.cfg-deckstrip.big span{font-size:10.5px}

/* ---- steps ---- */
.cfg-panel{padding:clamp(26px,3vw,48px) var(--pad) clamp(40px,6vh,80px)}
.cfg-progress{display:flex;gap:6px;margin-bottom:30px;flex-wrap:wrap}
.cfg-progress button{
  flex:1 1 0;min-width:64px;background:transparent;border:0;border-top:2px solid var(--line-2);
  padding:10px 0 0;cursor:pointer;text-align:left;transition:border-color .4s,color .4s;color:var(--dimmer);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}
.cfg-progress button:hover{color:var(--dim)}
.cfg-progress button[aria-current="step"]{border-top-color:var(--acc);color:var(--fg)}
.cfg-progress button.done{border-top-color:var(--acc-2);color:var(--dim)}

.cfg-step{display:none}
.cfg-step.on{display:block;animation:cfgin .5s var(--ease)}
@keyframes cfgin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cfg-step>.idx{display:block;margin-bottom:12px}
.cfg-step h2{margin-bottom:14px}
.cfg-step>p{color:var(--dim);font-size:14.5px;max-width:48ch;margin-bottom:28px}

/* option lists */
.opt-list{display:grid;gap:10px}
.opt-list.cols2{grid-template-columns:1fr 1fr}
.opt{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);padding:16px;transition:border-color .35s,background .35s,transform .35s;
}
.opt:hover{border-color:var(--line-2);transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--acc);background:rgba(24,173,224,.06)}
.opt-thumb{width:56px;height:56px;flex:none;object-fit:cover;border:1px solid var(--line-2);background:#000}
.opt-sw{width:56px;height:56px;flex:none;border:1px solid var(--line-2)}
.opt-tx{flex:1;min-width:0}
.opt-tx b{display:block;font-size:15px;letter-spacing:-.01em}
.opt-tx small{display:block;margin-top:5px;font-size:12.5px;color:var(--dim);line-height:1.5}
.opt-price{font-family:var(--mono);font-size:11.5px;color:var(--dim);white-space:nowrap;padding-top:2px}
.opt[aria-pressed="true"] .opt-price{color:var(--acc)}
.opt-check{width:15px;height:15px;flex:none;border:1px solid var(--line-2);margin-top:3px;position:relative}
.opt[aria-pressed="true"] .opt-check{border-color:var(--acc);background:var(--acc)}
.opt[aria-pressed="true"] .opt-check::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--acc-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt--pick .opt-check{border-radius:50%}
.opt--pick[aria-pressed="true"] .opt-check::after{left:3px;top:3px;width:7px;height:7px;border:0;border-radius:50%;background:var(--acc-ink);transform:none}
.opt-group{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:18px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.opt-group:first-child{margin-top:0}
.opt-group small{font-size:9px;letter-spacing:.12em;color:var(--dimmer)}

/* nav + running total */
.cfg-nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.cfg-total{
  position:sticky;bottom:0;z-index:5;margin-top:30px;
  border:1px solid var(--line);background:rgba(14,17,19,.96);backdrop-filter:blur(10px);
}
.cfg-total-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;flex-wrap:wrap}
.cfg-total-top span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.cfg-total-top b{font-family:var(--mono);font-size:clamp(20px,2.4vw,30px);color:var(--acc);letter-spacing:-.02em}
.cfg-lines{border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.cfg-lines.open{max-height:640px;overflow:auto}
.cfg-lines .lr{display:flex;justify-content:space-between;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px}
.cfg-lines .lr:last-child{border-bottom:0}
.cfg-lines .lr span{color:var(--dimmer);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.cfg-toggle{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);padding:4px}

/* summary step */
.summary{border:1px solid var(--line);background:var(--bg-2)}
.summary .sr{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px}
.summary .sr:last-child{border-bottom:0}
.summary .sr span{color:var(--dimmer);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.summary .sr.grand{background:rgba(24,173,224,.07)}
.summary .sr.grand b{color:var(--acc);font-size:18px}
.share{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.share input{
  flex:1;min-width:200px;background:var(--bg);border:1px solid var(--line);padding:12px 14px;
  font-family:var(--mono);font-size:11px;color:var(--dim);
}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:250;
  background:var(--acc);color:var(--acc-ink);padding:13px 22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .45s var(--ease);
}
.toast.show{transform:translate(-50%,0)}

/* form */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-2);border:1px solid var(--line);padding:14px 16px;
  font-size:15px;color:var(--fg);transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field .err{display:none;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#F2857F;text-transform:uppercase}
.field.invalid input,.field.invalid textarea{border-color:#F2857F}
.field.invalid .err{display:block}
.formnote{margin-top:18px;padding:14px 16px;border:1px solid var(--line);background:var(--bg-2);font-family:var(--mono);font-size:10px;line-height:1.8;color:var(--dimmer);letter-spacing:.05em}

@media (max-width:1080px){
  .cfg{grid-template-columns:1fr}
  .cfg-view{position:relative;top:0;border-right:0;border-bottom:1px solid var(--line)}
  .opt-list.cols2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cfg-hud div{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .cfg-progress button{min-width:0;font-size:0;padding-top:8px}
  .cfg-deckstrip span{display:none}
}

/* ============================================================
   Per-boat configurator additions
   ============================================================ */

/* layered preview: base photo plus per-option overlay artwork */
/* the yard's visualiser artwork is square; give it a square stage so the
   whole boat shows rather than being cropped by a 4:3 frame */
.cfg-stage.is-layered{aspect-ratio:1/1}
.cfg-stage img.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
/* only the bottom layer may carry a background — an overlay with one
   paints an opaque box over every layer beneath it */
.cfg-stage.is-layered img.layer{object-fit:contain;background:transparent}
.cfg-stage.is-layered #layer-base{background:#0b0f12}
.cfg-stage img.layer[hidden]{display:none}
#layer-base{z-index:1}
#layer-trim{z-index:2}
#layer-hull{z-index:3}
#layer-deck{z-index:4}

/* placeholder mode is badged so nobody mistakes it for a render */
.cfg-placeholder{
  position:absolute;top:16px;left:16px;z-index:6;max-width:260px;
  background:rgba(8,9,10,.82);border:1px solid var(--line);padding:9px 12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);line-height:1.7;
}
.cfg-placeholder b{color:var(--acc);display:block;margin-bottom:3px}
.cfg-stage:not(.is-placeholder) .cfg-placeholder{display:none}

/* the finish panel: what the visualiser would show, spelled out */
.cfg-finish{
  position:absolute;right:16px;top:16px;z-index:6;width:186px;
  background:rgba(8,9,10,.88);border:1px solid var(--line);padding:14px;
}
.cfg-finish .ft{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.chip{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.chip:first-of-type{border-top:0}
.chip-sw{width:30px;height:30px;flex:none;border:1px solid var(--line-2);background:#222}
.chip-tx{min-width:0}
.chip-tx span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.chip-tx .chip-name{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--fg);margin-top:2px}

/* swatch grids */
.opt-list.swatches{grid-template-columns:repeat(2,1fr)}
.opt--compact{padding:11px 12px;gap:11px;align-items:center}
.opt--compact .opt-tx b{font-size:13px}
.opt--compact .opt-price{font-size:10.5px}
.opt-sw{width:38px;height:38px;flex:none;border:1px solid var(--line-2);object-fit:cover;display:block}
.opt-sw--pending{background:repeating-linear-gradient(45deg,#2a2f33 0 6px,#1b1f22 6px 12px)}
.opt-tx small.pending{color:var(--dimmer);font-style:italic}

/* boat chooser */
.boatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.boatcard{background:var(--bg-2);display:flex;flex-direction:column;transition:background .4s}
.boatcard:hover{background:var(--bg-3)}
.boatcard .ph{aspect-ratio:4/3;overflow:hidden;background:#000}
.boatcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:brightness(.86)}
.boatcard:hover .ph img{transform:scale(1.04);filter:brightness(1)}
.boatcard .bd{padding:22px;display:flex;flex-direction:column;flex:1}
.boatcard .series{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.boatcard h3{font-size:24px;margin:10px 0 8px;letter-spacing:-.03em}
.boatcard p{color:var(--dim);font-size:13.5px;line-height:1.6;margin-bottom:18px}
.boatcard .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.boatcard .meta b{color:var(--fg)}
.boatcard--cta{background:linear-gradient(160deg,var(--acc-dim),transparent 55%),var(--bg-2)}
.boatcard--cta .bd{padding:clamp(28px,3vw,48px) 22px 22px}
.boatcard--cta .series{margin-top:auto}
.boatcard--cta h3{font-size:clamp(28px,2.4vw,38px)}
.boatcard--cta p{max-width:34ch}
.boatcard--cta .meta{margin-top:auto}
.boatcard--cta .meta b{color:var(--acc)}
.boatcard--cta .a{display:inline-block;transition:transform .4s var(--ease)}
.boatcard--cta:hover .a{transform:translateX(4px)}
@media (max-width:1080px){.boatgrid{grid-template-columns:1fr 1fr}.cfg-finish{position:static;width:auto;margin:0}}
@media (max-width:640px){
  .boatgrid{grid-template-columns:1fr}
  .opt-list.swatches{grid-template-columns:1fr}
  .cfg-placeholder{max-width:180px;font-size:8px}
}

/* ---- published specification, under the preview ---- */
.cfg-spec{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,2vw,32px);
  margin-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--line)}
.cfg-spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.cfg-spec dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
.cfg-spec dd{font-family:var(--mono);font-size:13px;color:var(--fg);text-align:right}
@media (max-width:640px){.cfg-spec{grid-template-columns:1fr}}

/* sending a build to the yard */
.cfg-form{max-width:640px}
.cfg-form-intro{color:var(--dim);font-size:14.5px;max-width:48ch;margin-bottom:22px}
.cfg-form .ff{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.cfg-form .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfg-form label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.cfg-form label span{color:var(--acc);margin-left:4px}
.cfg-form input,.cfg-form textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);
  padding:13px 14px;font-family:inherit;font-size:14.5px;transition:border-color .35s;
}
.cfg-form input:focus,.cfg-form textarea:focus{outline:none;border-color:var(--acc)}
.cfg-form textarea{resize:vertical;min-height:84px}
.cfg-form .ff-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cfg-turnstile:not(:empty){margin:4px 0 18px}
.cfg-form-status{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:14px;min-height:1.2em}
.cfg-form-status.is-bad{color:#E8836F}
.cfg-form-status.is-good{color:var(--ok)}
.cfg-form.is-sent .ff,.cfg-form.is-sent .ff-row,.cfg-form.is-sent .hero-acts,.cfg-form.is-sent #cfg-turnstile{display:none}
@media (max-width:640px){.cfg-form .ff-row{grid-template-columns:1fr}}

/* confirming the address, once the build has already gone */
.cfg-verify{max-width:640px;margin-top:26px;border:1px solid var(--line);background:var(--bg-2);padding:26px}
.cfg-verify .cfg-form-intro{margin-bottom:18px}
.cfg-verify-row{display:flex;gap:12px;flex-wrap:wrap}
.cfg-verify input{
  width:196px;background:var(--bg);border:1px solid var(--line);color:var(--fg);
  padding:13px 14px;font-family:var(--mono);font-size:18px;letter-spacing:.3em;
  text-align:center;transition:border-color .35s;
}
.cfg-verify input:focus{outline:none;border-color:var(--acc)}
.cfg-verify.is-done .cfg-verify-row{display:none}
.cfg-verify-link{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;
  color:var(--acc);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
@media (max-width:640px){.cfg-verify input{width:100%}}

/* the deck in a second colour: off by default, because almost every boat
   is painted one colour and the choice should not look like a decision */
.paintpair{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.paintpair-same{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);line-height:1.5}
.paintpair-same input{flex:none;width:15px;height:15px;margin-top:1px;accent-color:var(--acc)}
.paintpair-same:hover span{color:var(--fg)}
#deck-colour{margin-top:18px}
#deck-colour .opt-group{margin-bottom:10px}

/* the full RAL range, behind the swatches we hold artwork for */
.ralpick{margin-top:16px}
.ralpanel{margin-top:14px;border:1px solid var(--line);background:var(--bg-2);padding:16px}
.ralpanel-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ralpanel input{
  flex:1 1 240px;background:var(--bg);border:1px solid var(--line);color:var(--fg);
  padding:11px 13px;font-family:inherit;font-size:14px;transition:border-color .35s;
}
.ralpanel input:focus{outline:none;border-color:var(--acc)}
.ralpanel-count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.ralgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;max-height:330px;overflow:auto;padding-right:4px}
.ralsw{display:flex;gap:10px;align-items:center;text-align:left;cursor:pointer;background:var(--bg);border:1px solid var(--line);padding:8px;transition:border-color .3s,background .3s}
.ralsw:hover{border-color:var(--line-2)}
.ralsw[aria-pressed="true"]{border-color:var(--acc);background:rgba(24,173,224,.07)}
.ralsw-c{width:34px;height:34px;flex:none;border:1px solid var(--line-2)}
.ralsw-t{min-width:0}
.ralsw-t b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.ralsw-t small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ral-note{margin-top:12px}