/* Wisteria 3D garden room designer - styles (split from wisteria-3d-designer.html, unchanged) */
  :root{
    --plum:#4a3f55;--chip-line:rgba(255,255,255,0.26);
    --cream:#f4f1ea;--ink:#2e2733;--muted:rgba(244,241,234,0.62);
    --serif:'Playfair Display',Georgia,serif;--body:'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;}
  .wrap{padding:7% 10%;}
  .eyebrow{text-align:center;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
  .intro{text-align:center;color:var(--muted);font-size:16.5px;max-width:56ch;margin:20px 0 70px 0 !important; line-height:1.6;}
  .calc-heading {font-size: 4.2rem; letter-spacing: 3px}

  .split{display:grid;grid-template-columns:1.12fr 1fr;gap:44px;align-items:center;}

  #stage{position:relative;width:100%;aspect-ratio:13/10;cursor:grab;touch-action:none;}
  .calc-section button{touch-action:manipulation;}
  #stage.drag{cursor:grabbing;}
  #stage canvas{display:block;width:100%!important;height:100%!important;background-color: #6b5f7c;}
  .drawctl{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px;flex-wrap:wrap;}
  .modes{display:flex;gap:6px;}
  .modes button,.reset{
    background:transparent;border:1px solid var(--chip-line);border-radius:3px;color:var(--muted);
    font-family:var(--body);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    padding:6px 10px;cursor:pointer;transition:all .15s;
  }
  .modes button:hover,.reset:hover{color:var(--cream);border-color:var(--cream);}
  .modes button.on{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .zsep{width:1px;height:20px;background:var(--chip-line);margin:0 4px;}
  .zoom{display:flex;gap:6px;}
  .zoom button{
    width:28px;height:28px;border:1px solid var(--chip-line);border-radius:50%;
    background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:all .15s;
  }
  .zoom button:hover{color:var(--cream);border-color:var(--cream);}
  .draghint{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;visibility:hidden;
    background:rgba(24,20,28,0.6);border:1px solid var(--chip-line);border-radius:99px;
    padding:7px 15px;font-size:11px;letter-spacing:.05em;color:var(--cream);white-space:nowrap;
  }
  .draghint.show{visibility:visible;}
  .toast{
    position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:none;
    align-items:center;gap:10px;background:rgba(24,20,28,0.85);border:1px solid var(--chip-line);
    border-radius:99px;padding:8px 8px 8px 16px;font-size:12px;color:var(--cream);white-space:nowrap;max-width:94%;
  }
  .toast.show{display:flex;}
  .toast button{
    border:1px solid var(--chip-line);background:transparent;color:var(--cream);border-radius:99px;
    padding:5px 13px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;
  }
  .toast button:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .toast .tk{width:30px;height:30px;padding:0;font-size:13px;letter-spacing:0;}

  .controls{padding:4px 0;}
  .stage-h{font-family:var(--serif);font-weight:500;font-size:30px;margin:14px 0 12px;}
  .stage-copy{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:28px;max-width:44ch;}

  .panel{display:none;}
  .panel.show{display:block;animation:fadeup .25s ease;}
  @keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .sizegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .sizerow .nm{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
  .sizerow .nm .l{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:12px;}
  .sizerow .nm .v{font-family:var(--serif);font-size:22px;font-variant-numeric:tabular-nums;}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--chip-line);border-radius:99px;outline:none;cursor:pointer;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--cream);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);}
  .scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;}

  .chips{display:flex;flex-wrap:wrap;gap:10px;}
  .chip{
    background:transparent;border:1px solid var(--chip-line);border-radius:4px;color:var(--cream);
    font-family:var(--serif);font-size:16px;padding:12px 18px;cursor:pointer;
    display:flex;align-items:baseline;gap:12px;transition:all .15s;white-space:nowrap;
  }
  .chip .p{font-family:var(--body);font-size:12px;color:var(--muted);}
  .chip .sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.4);align-self:center;}
  .chip:hover{border-color:var(--cream);}
  .chip.sel{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .chip.sel .p{color:rgba(46,39,51,0.65);}
  .grouplbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px;}
  .grouplbl:first-child{margin-top:0;}

  .wsrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.10);}
  .wsrow:first-child{padding-top:0;}
  .wsrow .wsl{font-family:var(--serif);font-size:17px;display:flex;align-items:baseline;gap:10px;}
  .wsrow .wsl .p{font-family:var(--body);font-size:12px;color:var(--muted);}
  .stepper{display:flex;align-items:center;gap:12px;}
  .stepper button{
    width:34px;height:34px;border:1px solid var(--chip-line);border-radius:50%;
    background:transparent;color:var(--cream);font-size:17px;line-height:1;cursor:pointer;transition:all .15s;
  }
  .stepper button:hover{border-color:var(--cream);}
  .stepper button:disabled{opacity:.28;cursor:default;}
  .stepper .count{font-family:var(--serif);font-size:26px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums;}
  .capnote{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;}

  .pcrow{display:flex;align-items:flex-end;gap:10px;max-width:380px;}
  .pcrow .inp{flex:1;}
  .pcbtn{
    flex-shrink:0;padding:12px 20px;border:1px solid var(--chip-line);border-radius:4px;
    background:transparent;color:var(--cream);font-family:var(--body);font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;
  }
  .pcbtn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .pcbtn:disabled{opacity:.5;cursor:default;}
  #locNote.err{color:#e8b5aa;}

  .chips[data-key="elec"]{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:430px;}
  .chips[data-key="elec"] .chip{flex-direction:column;align-items:center;justify-content:center;gap:3px;white-space:normal;text-align:center;padding:13px 10px;}

  .cladstack{flex-direction:column;align-items:flex-start;gap:12px;}
  .cladstack .chip{width:max-content;}
  #hardieWrap{margin:0 0 6px 8px;padding-left:16px;border-left:1px solid var(--chip-line);}
  #hardieWrap .grouplbl{margin-top:2px;}

  .swname{color:var(--cream);text-transform:none;letter-spacing:.02em;font-size:12.5px;}
  .swgrid{display:flex;flex-wrap:wrap;gap:9px;max-width:420px;}
  .swatch{
    position:relative;width:38px;height:38px;border-radius:4px;cursor:pointer;
    border:1px solid rgba(255,255,255,0.22);background-size:cover;background-position:center;
    padding:0;transition:transform .12s,border-color .12s;
  }
  .swatch:hover{transform:scale(1.12);border-color:var(--cream);z-index:2;}
  .swatch.sel{outline:2px solid var(--cream);outline-offset:2px;border-color:var(--cream);}
  .swatch::after{
    content:attr(data-name);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
    background:rgba(24,20,28,0.92);border:1px solid var(--chip-line);border-radius:4px;
    padding:4px 9px;font-size:10.5px;letter-spacing:.04em;color:var(--cream);white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
  }
  .swatch:hover::after,.swatch:focus-visible::after{opacity:1;}
  .swgrid.fl .swatch{width:52px;height:52px;border-radius:5px;}

  .pkg{padding:2px 0;}
  .pkgh{font-family:var(--serif);font-size:17px;display:flex;align-items:baseline;gap:12px;}
  .pkgh .p{font-family:var(--body);font-size:12px;color:var(--muted);}
  .pkgl{list-style:none;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;font-size:12.5px;color:var(--muted);}
  .pkgl li{position:relative;padding-left:22px;}
  .pkgl li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--cream);opacity:.7;}

  .summary{border:1px solid var(--chip-line);border-radius:6px;padding:18px 20px;margin-bottom:22px;font-size:13.5px;}
  .summary .row{display:flex;justify-content:space-between;padding:5px 0;color:var(--muted);}
  .summary .row b{color:var(--cream);font-weight:500;}
  .forms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
  .inp label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
  .inp input,.inp textarea{width:100%;padding:12px 13px;border:1px solid var(--chip-line);border-radius:4px;background:transparent;color:var(--cream);font-family:var(--body);font-size:14.5px;}
  .inp textarea{min-height:96px;resize:vertical;}
  .inp input:focus,.inp textarea:focus{outline:none;border-color:var(--cream);}
  .inp input::placeholder,.inp textarea::placeholder{color:rgba(244,241,234,0.32);}
  .inp input[type=file]{padding:9px 10px;font-size:12.5px;color:var(--muted);}
  .inp input[type=file]::file-selector-button{
    background:transparent;border:1px solid var(--chip-line);border-radius:3px;color:var(--cream);
    font-family:var(--body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    padding:7px 12px;margin-right:12px;cursor:pointer;
  }

  .qpage{display:none;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;}
  .qpage.show{display:grid;animation:fadeup .25s ease;}
  .qside{padding-top:86px;}
  .expectbox{background:#3e3449;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:28px 28px 26px;}
  .xh{font-family:var(--serif);font-weight:500;font-size:23px;margin-bottom:22px;}
  .expect{list-style:none;counter-reset:ex;display:flex;flex-direction:column;gap:20px;}
  .expect li{counter-increment:ex;position:relative;padding-left:48px;font-size:13px;color:var(--muted);line-height:1.6;}
  .expect li b{color:var(--cream);font-weight:500;display:block;font-family:var(--serif);font-size:16.5px;margin-bottom:4px;}
  .expect li::before{
    content:counter(ex);position:absolute;left:0;top:1px;width:32px;height:32px;
    border:1px solid rgba(255,255,255,0.3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:15px;color:var(--cream);
  }
  .inp.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}
  .formerr{display:none;margin-top:14px;font-size:12.5px;color:#e8b5aa;line-height:1.5;}
  .formerr.show{display:block;}
  .ghostbtn{
    margin-top:20px;background:transparent;border:1px solid var(--chip-line);border-radius:4px;
    color:var(--cream);font-family:var(--body);font-size:12.5px;letter-spacing:.04em;
    padding:12px 18px;cursor:pointer;transition:all .15s;
  }
  .ghostbtn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .inp.full{grid-column:1/-1;}
  .submit{width:100%;margin-top:6px;padding:14px;border:none;border-radius:4px;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:14.5px;font-weight:600;cursor:pointer;}
  .submit:hover{filter:brightness(1.04);}
  .thanks{display:none;border:1px solid var(--chip-line);border-radius:8px;padding:30px 30px 26px;background:#3e3449;}
  .thanks.show{display:block;animation:fadeup .25s ease;}
  .thanks .th{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:10px;}
  .thanks p{color:var(--muted);font-size:14px;line-height:1.6;}
  .thanks .ghostbtn{margin-top:22px;}

  .priceblock{margin-top:26px;border-top:1px solid var(--chip-line);padding-top:20px;}
  .priceblock .val{font-family:var(--serif);font-size:46px;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px;}
  .priceblock .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

  .foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
  .nav{background:none;border:none;color:var(--cream);cursor:pointer;font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.03em;opacity:.85;transition:opacity .18s;padding:0;}
  .nav:hover{opacity:1;}
  .nav:disabled{opacity:.25;cursor:default;}
  .nav.next{border:1px solid var(--chip-line);border-radius:4px;font-style:normal;font-family:var(--body);font-size:14px;font-weight:500;padding:13px 22px;}
  .nav.next:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}

  @media(max-width:860px){
    .wrap{padding:12% 10%;}
    .split{grid-template-columns:1fr;gap:26px;}
    .qpage{grid-template-columns:1fr;gap:28px;}
    .qside{padding-top:0;}
    .controls{order:2;}
    .stage-copy{max-width:none;}
    .sizegrid{grid-template-columns:1fr;gap:18px;}
    .forms{grid-template-columns:1fr;}
  }

/* Scope fix when embedded in the theme: the designer no longer owns <body> */
.calc-section{background:#4a3f55;color:#f4f1ea;font-family:'Inter',system-ui,sans-serif;}