/* Door builder page */
.hero{background:var(--navy-900);color:var(--white);padding:var(--sp-6) 0 var(--sp-7);
  background-image:radial-gradient(900px 400px at 85% 120%,rgba(176,141,87,.16),transparent 60%),linear-gradient(150deg,var(--navy-900),var(--navy-700))}
.hero .main{margin:0 auto}
.hero h1{font-size:var(--fs-2xl);max-width:18ch;margin-bottom:var(--sp-2)}
.hero .lede{color:var(--steel-200);max-width:56ch;font-size:var(--fs-lg);margin:0}
.hero .kpis{display:flex;gap:var(--sp-6);margin-top:var(--sp-5);flex-wrap:wrap}
.hero .kpi{display:flex;flex-direction:column}
.hero .kpi b{font-size:var(--fs-lg);font-family:var(--mono);font-weight:600}
.hero .kpi span{font-size:var(--fs-xs);color:var(--steel-300);text-transform:uppercase;letter-spacing:.1em}

.builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:var(--sp-6);margin-top:calc(-1 * var(--sp-6))}
@media(max-width:1080px){.builder{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:var(--sp-4)}
.step{scroll-margin-top:80px}
.step .card{position:relative}
.step-no{position:absolute;top:var(--sp-5);right:var(--sp-5);font-family:var(--mono);font-size:var(--fs-xs);color:var(--steel-300)}
.step h2{display:block;margin-bottom:var(--sp-1);padding-right:3rem}
.step .sub{color:var(--ink-3);font-size:var(--fs-sm);margin-bottom:var(--sp-4);max-width:60ch}
.step.is-done h2::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;font-size:12px;margin-right:var(--sp-2);vertical-align:2px}

/* option pills & tiles */
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pill-btn{font:inherit;font-size:var(--fs-sm);font-weight:600;min-height:42px;padding:0 var(--sp-4);border-radius:var(--r-sm);border:var(--bw) solid var(--steel-200);background:var(--white);color:var(--ink);cursor:pointer;transition:all .15s var(--ease)}
.pill-btn:hover{border-color:var(--ink)}
.pill-btn[aria-checked="true"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.pill-btn:disabled{opacity:.4;cursor:default}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.tile{font:inherit;text-align:left;border:var(--bw) solid var(--steel-200);background:var(--white);border-radius:var(--r-md);padding:var(--sp-3);cursor:pointer;display:flex;flex-direction:column;gap:var(--sp-2);transition:all .15s var(--ease)}
.tile:hover{border-color:var(--ink)}
.tile[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tile .t-name{font-weight:700;font-size:var(--fs-sm)}
.tile .t-sub{font-size:var(--fs-xs);color:var(--ink-3)}
.tile svg.plan{width:100%;height:auto}
.tiles-elev{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tile svg.elev{width:100%;height:auto;display:block}
.tile .elev .fr{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.tile .elev .lf{fill:#D9E6F0;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.tile .elev .td{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}
.tile .elev .hd{fill:var(--ink)}
.tile .elev .gd{stroke:var(--steel-200);stroke-width:1}
.tile .t-code{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.06em}
.tile .dgm{stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tile .dgm-a{stroke:var(--accent);fill:var(--accent-soft)}
.tile .dgm-soft{stroke:var(--steel-200)}
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.swatch{font:inherit;border:var(--bw) solid var(--steel-200);background:var(--white);border-radius:var(--r-md);padding:var(--sp-2);cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);min-width:190px;text-align:left}
.swatch[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.swatch .chip{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.12);flex:none;background-size:cover}
.swatch .s-name{font-weight:600;font-size:var(--fs-sm)}
.swatch .s-ral{font-size:var(--fs-xs);color:var(--ink-3);font-family:var(--mono)}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.sizes input{font-family:var(--mono);font-size:var(--fs-lg);min-height:52px}
.range-hint{font-size:var(--fs-xs);color:var(--ink-3);font-family:var(--mono)}
.err-line{color:var(--bad);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.opt-row{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-top:1px solid var(--steel-100)}
.opt-row:first-child{border-top:none}
.opt-row .lbl{font-size:var(--fs-sm);font-weight:600}
.stepper{display:inline-flex;align-items:center;border:var(--bw) solid var(--steel-200);border-radius:var(--r-sm)}
.stepper button{font:inherit;width:42px;height:42px;border:none;background:transparent;cursor:pointer;font-size:var(--fs-lg)}
.stepper button:disabled{opacity:.3}
.stepper .val{min-width:44px;text-align:center;font-family:var(--mono);font-weight:600}
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);border-radius:0 var(--r-sm) var(--r-sm) 0;margin-top:var(--sp-3)}
.face-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.face-row h3{font-size:var(--fs-sm);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}

/* right column */
.preview{position:sticky;top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.view-tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.view-tabs button{font:inherit;font-size:var(--fs-xs);font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--steel-200);background:var(--white);cursor:pointer}
.view-tabs button[aria-pressed="true"]{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
#svgHolder svg{width:100%;height:auto;display:block}
#drawMsg{color:var(--ink-3);font-size:var(--fs-sm);text-align:center;padding:var(--sp-6)}
.price-card .p-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--steel-300)}
.price-card .p-ex{font-size:var(--fs-2xl);font-weight:700;font-family:var(--mono);line-height:1.1;margin:var(--sp-1) 0}
.price-card .p-vat{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--steel-200);padding:2px 0}
.price-card .p-vat .p-inc{color:var(--white);font-weight:600}
.lines{margin-top:var(--sp-3);border-top:1px solid var(--navy-600);padding-top:var(--sp-3);font-size:var(--fs-sm)}
.lines .ln{display:flex;justify-content:space-between;gap:var(--sp-3);padding:3px 0;color:var(--steel-200)}
.lines .ln span:last-child{font-family:var(--mono);color:var(--white)}
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4)}
.basket .b-item{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2);padding:var(--sp-3) 0;border-top:1px solid var(--steel-100);font-size:var(--fs-sm)}
.basket .b-item:first-child{border-top:none}
.basket .b-title{font-weight:600}
.basket .b-sub{color:var(--ink-3);font-size:var(--fs-xs)}
.basket .b-price{font-family:var(--mono);text-align:right}
.basket .b-total{display:flex;justify-content:space-between;font-weight:700;padding-top:var(--sp-3);border-top:2px solid var(--ink);margin-top:var(--sp-2)}
.xsec-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-3)}
.xsec-row figure{margin:0;text-align:center}
.xsec-row img{width:100%;height:auto;border:1px solid var(--steel-100);border-radius:var(--r-sm);background:#fff}
.xsec-row figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}

/* 3D fold */
.f3d-scene{perspective:1400px;perspective-origin:50% 40%;display:grid;place-items:center;padding:var(--sp-4) 0;overflow:hidden;
  background:linear-gradient(180deg,#F5F7F9 0%,#E4E9EF 100%);border-radius:var(--r-md)}
.f3d-stage{position:relative;transform-style:preserve-3d;transform:rotateX(-6deg) rotateY(-12deg)}
.f3d-wall{position:absolute;inset:-24px;background:#DDE3EA;border:1px solid #C3CEDA;transform:translateZ(-1px)}
.f3d-frame{position:absolute;inset:0;border:12px solid #383e42;box-sizing:border-box;background:linear-gradient(180deg,rgba(11,20,32,.06),rgba(11,20,32,.12))}
.f3d-leaves{position:absolute;inset:0;transform-style:preserve-3d}
.f3d-leaf{position:absolute;transform-style:preserve-3d;box-sizing:border-box;border:1px solid rgba(0,0,0,.25);box-shadow:0 2px 6px rgba(11,20,32,.2);transition:none}
.f3d-glass{position:absolute;inset:14%  9%;background:linear-gradient(135deg,rgba(210,228,240,.55),rgba(160,190,215,.35) 60%,rgba(230,240,248,.6));border:1px solid rgba(0,0,0,.15)}
.f3d-glass[data-glazed]{background:linear-gradient(135deg,rgba(190,215,235,.85),rgba(140,175,205,.6) 60%,rgba(220,235,248,.9))}
.f3d-handle{position:absolute;top:50%;width:5px;height:34px;margin-top:-17px;border-radius:3px;background:var(--accent,#B08D57);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.f3d-leaf.is-edge{box-shadow:6px 0 14px rgba(11,20,32,.35)}
.f3d-plan{width:100%;height:60px;display:block;margin-top:var(--sp-2)}
.f3d-ctl{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.f3d-range{flex:1;accent-color:var(--accent)}
.f3d-pct{font-size:var(--fs-xs);color:var(--ink-3);min-width:80px;text-align:right}

/* sticky mobile price bar */
#stickyBar{display:none}
@media(max-width:1080px){
  .preview{position:static}
  #stickyBar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--navy-900);color:var(--white);padding:var(--sp-3) var(--sp-4);gap:var(--sp-3);align-items:center;z-index:20;box-shadow:0 -4px 20px rgba(11,20,32,.3)}
  #stickyBar .sb-price{font-family:var(--mono);font-weight:700;font-size:var(--fs-lg);flex:1}
  body{padding-bottom:72px}
}