/* Layout: product-configurator style (Tesla / Apple) — big door on a quiet stage, a slim option column
   on the right with centered headings, and a price bar pinned to the bottom.
   Deliberately single light theme: the door photos are shot on white. */
:root{
  --bg:#ffffff; --stage:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73; --faint:#86868b;
  --line:#d2d2d7; --soft:#e8e8ed; --blue:#0071e3; --blue-hover:#0077ed; --ok:#1d8a3a; --bad:#d70015;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --r:12px; --top:52px; --bar:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.47; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- header ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; height:var(--top);
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
.top-in{height:100%; max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-left:max(22px, env(safe-area-inset-left,0px)); padding-right:max(22px, env(safe-area-inset-right,0px))}
.brand{font-weight:600; font-size:17px; letter-spacing:.32em; color:var(--ink); text-decoration:none}
.top-note{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px}
.top-note b{color:var(--ink); font-weight:600}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(29,138,58,.15); flex:none}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 440px; align-items:start; max-width:1440px; margin:0 auto}
.stage{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--top));
  height:calc(100vh - var(--top) - var(--bar) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px max(22px, env(safe-area-inset-left,0px)) 20px; min-width:0}
.frame{position:relative; flex:1 1 auto; width:100%; max-width:760px; min-height:0}
.door{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .35s ease}
.door.is-on{opacity:1}
.frame.flip .door{transform:scaleX(-1)}
.caption{margin:14px 0 0; text-align:center; font-size:14px; color:var(--muted)}
.caption b{color:var(--ink); font-weight:600}
.sizes{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin:8px 0 0; font-size:13px; font-variant-numeric:tabular-nums}
.sizes dt{color:var(--faint); display:inline} .sizes dd{display:inline; margin:0 0 0 6px; font-weight:500}
.sizes > *{white-space:nowrap}

.panel{min-width:0; display:flex; flex-direction:column; gap:44px;
  padding:40px max(24px, env(safe-area-inset-right,0px)) 56px 24px; border-left:1px solid var(--soft)}

/* ---------- intro ---------- */
.intro{text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center}
h1{font-size:40px; line-height:1.1; font-weight:600; letter-spacing:-.025em; margin:0; text-wrap:balance}
.specs{margin:0; font-size:14px; color:var(--muted); max-width:34ch}
.ship{margin:4px 0 0; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink);
  background:var(--stage); border-radius:999px; padding:7px 14px}
.ship b{font-weight:600}

/* ---------- steps ---------- */
.step{display:flex; flex-direction:column; gap:14px}
h2{display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em; text-align:center}
.num{order:-1; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--faint)}
.num::before{content:"STEP "}
.picked{font-size:14px; font-weight:400; color:var(--muted); letter-spacing:0; min-height:1em}
.help{margin:-4px auto 0; font-size:13px; color:var(--muted); text-align:center; max-width:36ch}
.badge{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
  background:rgba(0,113,227,.08); border-radius:999px; padding:2px 8px; margin:0 2px 4px 0}
.swap-note{margin:-24px 0 0; font-size:13px; text-align:center; color:var(--ink); background:var(--stage); border-radius:var(--r); padding:10px 14px}

.opts{display:grid; gap:10px}
.designs,.swings,.jambs,.transoms,.brickmolds,.deliveries{grid-template-columns:repeat(2,minmax(0,1fr))}
.glasses{grid-template-columns:repeat(4,minmax(0,1fr))}

.opt-btn{color:var(--ink); text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; cursor:pointer;
  display:flex; flex-direction:column; gap:6px; transition:border-color .2s, box-shadow .2s}
.opt-btn:hover{border-color:var(--faint)}
.opt-btn[aria-checked="true"]{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue)}
.opt-btn:disabled{cursor:not-allowed; opacity:.4}
.opt-btn .nm{font-weight:600; font-size:14px; line-height:1.25}
.opt-btn .ds{font-size:12px; color:var(--muted); line-height:1.35}
.opt-btn .na{font-size:11.5px; color:var(--faint)}
.opt-btn .pr{font-size:13px; font-weight:500; color:var(--ink); margin-top:auto; padding-top:2px}
.opt-btn .pr.free{color:var(--muted)}
.opt-btn .sz{display:grid; grid-template-columns:auto 1fr; gap:2px 8px; font-size:11.5px; line-height:1.4; margin:2px 0 0; font-variant-numeric:tabular-nums}
.opt-btn .sz dt{color:var(--faint)} .opt-btn .sz dd{margin:0; font-weight:500}

/* thumbnails */
.thumb{display:block; width:100%; background:#fff no-repeat; border-radius:8px}
.designs .thumb{aspect-ratio:1/1.2; background-size:200% auto; background-position:50% 45%}
.glasses .opt-btn{padding:8px 8px 10px; text-align:center; align-items:center}
.glasses .thumb{aspect-ratio:1/1.6; background-size:700% auto; background-position:9.5% 42%}
.glasses .ds{font-size:11px}
.transoms .thumb{aspect-ratio:1/1; background-size:contain; background-position:50% 0}

/* colors: bare swatches like a car configurator */
.colors{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px}
.colors .opt-btn{border:0; box-shadow:none; background:none; padding:4px; align-items:center; text-align:center; gap:8px; width:76px}
.colors .opt-btn .nm{font-size:12px; font-weight:400; color:var(--muted)}
.colors .opt-btn[aria-checked="true"] .nm{color:var(--ink); font-weight:600}
.sw{width:46px; height:46px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:box-shadow .2s}
.sw.wood{background-image:repeating-linear-gradient(98deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px)}
.colors .opt-btn[aria-checked="true"] .sw{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--blue)}

/* ---------- summary & price ---------- */
.summary{background:var(--stage); border-radius:18px; padding:24px 20px}
.review{font-size:13.5px; color:var(--muted); text-align:center; line-height:1.55}
.review b{color:var(--ink); font-weight:600}
.review .missing{color:var(--bad)}
.price{display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:14px; font-variant-numeric:tabular-nums; margin-top:6px}
.price .k{color:var(--muted)} .price .v{text-align:right; color:var(--ink)}
.price .sub{border-top:1px solid var(--line); padding-top:10px; margin-top:4px}
.price .tot{font-size:22px; font-weight:600; color:var(--ink); padding-top:6px; letter-spacing:-.02em}

/* ---------- form ---------- */
.send h2{margin-bottom:-4px}
form{display:flex; flex-direction:column; gap:12px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:500; color:var(--muted)}
.opt{font-weight:400; color:var(--faint)}
input,textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; width:100%;
  transition:border-color .2s, box-shadow .2s}
input:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,113,227,.15)}
input[aria-invalid="true"]{border-color:var(--bad)}
textarea{resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.submit{font-weight:500; font-size:17px; color:#fff; background:var(--blue); border:0; border-radius:var(--r); padding:15px 18px; cursor:pointer; margin-top:4px}
.submit:hover{background:var(--blue-hover)}
.submit:disabled{opacity:.6; cursor:progress}
.err{margin:0; color:var(--bad); font-size:13.5px; text-align:center}
.done{text-align:center}
.done h3{font-size:28px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px}
.done p{margin:0 0 18px; color:var(--muted)}
.again{font-weight:500; background:none; border:1px solid var(--blue); color:var(--blue); border-radius:999px; padding:10px 18px; cursor:pointer}

/* ---------- bottom price bar ---------- */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:25;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom,0px)}
.bb-in{height:var(--bar); max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:flex-end; gap:20px;
  padding-left:max(22px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.bb-price{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; min-width:0}
.bb-price b{font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.bb-price span{font-size:12px; color:var(--muted)}
.bb-btn{font-weight:500; font-size:15px; color:#fff; background:var(--blue); border:0; border-radius:999px; padding:12px 26px; cursor:pointer; white-space:nowrap}
.bb-btn:hover{background:var(--blue-hover)}

/* ---------- footer ---------- */
.foot{max-width:1440px; margin:0 auto; border-top:1px solid var(--soft); font-size:12px; color:var(--faint); text-align:center;
  padding:22px max(22px, env(safe-area-inset-right,0px)) 28px max(22px, env(safe-area-inset-left,0px))}
.foot .co{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; align-items:baseline; font-size:13px; color:var(--muted); margin-bottom:6px}
.foot .co b{font-weight:600; letter-spacing:.32em; color:var(--ink)}
.foot .co a{color:var(--blue); text-decoration:none}
.foot p{margin:0}

/* ---------- tablet & phone ---------- */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .stage{top:calc(env(safe-area-inset-top,0px) + var(--top)); z-index:10; height:auto; min-height:0; background:var(--bg);
    padding:10px 16px 8px; border-bottom:1px solid var(--soft)}
  .frame{flex:none; height:34vh; max-width:none}
  .caption{margin-top:6px; font-size:12.5px}
  .sizes{font-size:12px; margin-top:2px}
  .panel{border-left:0; gap:36px; padding:28px max(16px, env(safe-area-inset-right,0px)) 40px max(16px, env(safe-area-inset-left,0px));
    max-width:560px; margin:0 auto; width:100%}
  .bb-in{justify-content:space-between; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
  .bb-price{align-items:flex-start}
}
@media (max-width:520px){
  :root{--bar:70px}
  .top-note{font-size:11.5px}
  .top-note .lbl{display:none}
  h1{font-size:32px}
  .glasses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glasses .thumb{aspect-ratio:1/1.1}
  .swings,.jambs,.brickmolds,.deliveries{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .bb-price b{font-size:19px}
  .bb-btn{padding:11px 18px}
  .sizes{display:none}
}
@media (prefers-reduced-motion:reduce){ .door,.opt-btn,.sw,input,textarea{transition:none} }

/* fixes */
.step,.intro{scroll-margin-top:calc(var(--top) + 20px + env(safe-area-inset-top,0px))}
@media (max-width:980px){ .step,.intro{scroll-margin-top:calc(var(--top) + 34vh + 70px)} }
@media (max-width:520px){
  .top-note{display:none}
  .glasses .thumb{aspect-ratio:2/1}
  .bb-price span{font-size:11px}
}
@media (max-width:980px){ .top{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none} }

/* payment note */
.paynote{margin:0; font-size:13px; color:var(--ok); font-weight:500; max-width:36ch}
.pay-box{max-width:none; text-align:center; background:rgba(29,138,58,.08); color:var(--ink); border-radius:var(--r); padding:12px 14px; font-weight:500}
@media (max-width:980px){ .top-note{font-size:11.5px} }
.ship{display:flex; flex-direction:column; align-items:flex-start; gap:4px; border-radius:var(--r); padding:10px 16px}
.ship span{display:flex; align-items:center; gap:8px; white-space:nowrap}
.ship .dot{display:inline-block}
.specs{max-width:44ch; text-wrap:balance}

/* ---------- readability + logo ---------- */
:root{--muted:#3a3a3c; --faint:#5c5c61; --line:#c7c7cc; --logo:#d0021b}
body{font-size:16px}
.top-note{font-size:13.5px; color:var(--ink)}
.specs{font-size:15.5px; color:var(--ink)}
.ship{font-size:14.5px}
.help{font-size:14.5px; color:var(--muted)}
.picked{font-size:15px}
.num{font-size:12px; color:var(--faint)}
.opt-btn .nm{font-size:15px}
.opt-btn .ds{font-size:13.5px; color:var(--muted)}
.opt-btn .sz{font-size:13px} .opt-btn .sz dt{color:var(--faint)}
.opt-btn .pr{font-size:14px; font-weight:600}
.glasses .ds{font-size:12.5px}
.colors .opt-btn .nm{font-size:13.5px; color:var(--muted)}
.caption{font-size:15px; color:var(--muted)}
.sizes{font-size:14px} .sizes dt{color:var(--faint)} .sizes dd{font-weight:600}
.review{font-size:14.5px}
.price{font-size:15px}
label{font-size:14px; color:var(--ink)}
.opt{color:var(--faint)}
.paynote{font-size:14.5px; font-weight:600; color:#11702d}
.pay-box{color:var(--ink); font-size:15px}
.bb-price span{font-size:13.5px; color:var(--muted)}
.foot{font-size:13.5px; color:var(--muted)}
.foot .co{font-size:14.5px}
.brand,.logo{font-weight:800; letter-spacing:.18em; color:var(--logo)!important; text-decoration:none}
.brand{font-size:22px}
.foot .co b.logo{font-size:22px}
.brand sup,.logo sup{font-size:.45em; letter-spacing:0; font-weight:600; vertical-align:super; margin-left:2px}
@media (max-width:520px){ .bb-price span{font-size:12px} .brand{font-size:19px} }
.foot .co b.logo{letter-spacing:.18em; font-weight:800}
.brand sup,.logo sup{font-size:.55em; top:-.15em}
.opt-btn .sz{grid-template-columns:1fr; gap:0}
.opt-btn .sz dt{margin-top:4px; font-size:12px}
.opt-btn .sz dd{white-space:nowrap; font-size:13.5px}

/* sidelites step */
.sidelites,.slsides{grid-template-columns:repeat(2,minmax(0,1fr))}
.sidelites .thumb{aspect-ratio:1/1; background-size:contain; background-position:50% 0}
.slsides .opt-btn{padding:10px 14px; text-align:center; align-items:center}

/* one-sidelite left/right choice stacked under its card */
.sidelites{align-items:start}
.sl-col{display:flex; flex-direction:column; gap:8px; min-width:0}
.sl-col .slsides{display:flex; flex-direction:column; gap:8px; padding-left:10px; border-left:2px solid var(--blue)}
.sl-col .slsides .opt-btn{padding:10px 12px; text-align:left; align-items:flex-start}
@media (max-width:520px){ .opt-btn .sz dd{white-space:normal; font-size:12.5px} .sl-col .slsides{padding-left:8px} }

/* transom step switched off for one-sidelite units */
.step.off .opts{opacity:.45; filter:grayscale(1); pointer-events:none}
.step.off .opt-btn,.step.off .opt-btn:disabled{opacity:1; border-color:var(--line); box-shadow:none}
.step.off .help{color:var(--ink); font-weight:600}