/* Salamander Select: Pro Cabinets. Look follows the official Select Pro Cabinets tool (dark header, light grey
   panel, coral accent, serif titles, photo cards) in our own CSS. No web fonts are loaded (the content security
   policy allows only same-origin files); the stacks below fall back to Georgia and the system sans.
   FONT NOTE: the official site uses Mokoko (titles) and Proxima Nova (text), both licensed. Zilla Slab and Mulish
   (OFL) are the free stand-ins the other Select apps use; self-host them in public/fonts to match exactly. */
:root{--ink:#211f1d;--muted:#57534e;--accent:#d16d61;--accent-soft:#e0786b;--accent-dark:#b85a4f;--border:#dcd8d3;--paper:#f3f3f3;--dark:#272523;--white:#fff;
  --font:'Mulish','Proxima Nova',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;--display:'Zilla Slab','Mokoko',Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.5 var(--font)}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.topbar{background:var(--dark);color:#fff}
.topbar-inner{max-width:1300px;margin:0 auto;padding:0 20px;min-height:79px;display:flex;align-items:center;gap:16px}
.brand img{display:block;height:40px;width:auto;max-width:100%}
.beta-tag{font:700 10px var(--font);letter-spacing:2px;text-transform:uppercase;border:1px solid #6b6764;border-radius:3px;padding:2px 6px;color:#d8d3ce}
.ghost-btn{margin-left:auto;white-space:nowrap;background:none;border:1px solid #8a8580;color:#fff;font:600 11px var(--font);letter-spacing:2px;text-transform:uppercase;padding:9px 14px}
.ghost-btn:hover{background:#3a3734}
main{min-height:60vh;background:var(--paper)}

/* wizard shell */
.sdc{max-width:1300px;margin:0 auto;padding:32px 40px 56px;background:var(--paper)}
.sdc-toolbar{display:flex;align-items:center;gap:16px;justify-content:space-between}
.sdc-progress{display:flex;flex-direction:column;gap:6px;margin-right:auto}
.round-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-size:24px;line-height:1;display:grid;place-items:center;padding:0 0 3px}
.round-btn:disabled{visibility:hidden}
.step-label{color:var(--accent-soft);font:700 12px var(--font);letter-spacing:.3px}
.bars{display:flex;gap:5px}.bars span{width:30px;height:3px;background:#d9d5d0}.bars span.on{background:var(--accent-soft)}
.outline-btn{border:1px solid var(--ink);background:#fff;padding:9px 16px;font:700 11px var(--font);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.outline-btn:hover{background:#f0eeec}
.outline-btn[aria-expanded=true]{background:var(--ink);color:#fff}
.primary-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:13px 22px;font:700 13px var(--font);letter-spacing:.3px}
.primary-btn:hover{background:var(--accent-dark)}
.primary-btn:disabled{opacity:.5;cursor:default}
.drawer{background:#fff;border:1px solid var(--border);margin-top:14px;padding:12px 18px}
.drawer ol{list-style:none;margin:0;padding:0}
.drawer li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #eee}.drawer li:last-child{border:0}
.drawer .tick{width:18px;color:var(--accent);font-weight:700}
.drawer button{background:none;border:0;text-align:left;padding:0;display:block}
.drawer strong{display:block;font:600 14px var(--font)}.drawer span.sub{color:#8a847e;font-size:13px}
.drawer li.here{background:#fbeeec}.drawer li.here .tick{color:var(--accent)}
.sdc-step{margin:26px auto 0;max-width:1100px}
.step-title{font:400 27px/1.25 var(--display);text-align:center;color:#3d3936;margin:4px 0 12px}
.step-desc{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 24px}

/* photo cards (function, depth, bays, finish) */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:24px}
.cards>*{min-width:0}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-left:auto;margin-right:auto}
.pcard{background:#fff;border:1px solid var(--border);padding:0;text-align:left;display:flex;flex-direction:column;position:relative;color:var(--ink)}
.pcard:hover:not(:disabled),.pcard.selected{border-color:var(--accent)}
.pcard .pimg{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;overflow:hidden}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
.pcard .plabel{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 4px;font:400 21px var(--display)}
.pcard .plabel::after{content:'\203A';font:300 26px var(--font);color:#9a948e}
.pcard.selected .plabel{color:var(--accent)}
.pcard .pcap{padding:0 16px;font:600 11px var(--font);letter-spacing:2px;text-transform:uppercase;color:#8a847e}
.pcard .pdesc{font-size:14px;color:var(--muted);padding:6px 16px 16px;line-height:1.5}
.pcard .badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font:700 10px var(--font);letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px}
.pcard.disabled,.pcard:disabled{opacity:.55;border-style:dashed;cursor:default}
.pcard .cta{margin:0 16px 16px;align-self:flex-start;background:var(--accent);color:#fff;border:0;font:700 12px var(--font);padding:7px 12px}
.finish-card .pimg{aspect-ratio:21/9}.finish-card .fnote{padding:0 16px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:#8a847e;font-style:italic}
.finish-card .fast{font:700 10px var(--font);letter-spacing:2px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:5px 9px;font-style:normal;white-space:nowrap}
.swatch-white{background:linear-gradient(#fff 55%,#e9e6e1)}

/* display step */
.seg{display:flex;justify-content:center;margin:0 auto 22px;max-width:860px}
.seg button{flex:1;border:1px solid var(--border);background:#fff;padding:14px 18px;font:600 15px var(--font);margin-left:-1px;display:flex;gap:10px;align-items:center;justify-content:center}
.seg button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-soft);color:#fff}
.sizes{display:grid;gap:18px;grid-template-columns:repeat(5,minmax(0,1fr))}
.size-cell{display:flex;flex-direction:column;gap:8px}
.size-card{background:#fff;border:1px solid var(--border);padding:0;color:var(--ink);text-align:center;display:flex;flex-direction:column}
.size-card:hover,.size-card.selected{border-color:var(--accent)}
.size-card .pimg{aspect-ratio:1/1;overflow:hidden;display:block}.size-card .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.size-card .snum{font:400 34px var(--display);padding:10px 0 0}
.size-card .scam{padding:4px 0 14px;font:600 13px var(--font);color:var(--muted)}
.size-card.selected .snum,.size-card.selected .scam{color:var(--accent)}
.size-card .rec{font:700 9px var(--font);letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.cam-btn{background:#fff;border:1px solid var(--border);padding:11px 8px;font:600 13px var(--font);color:var(--muted)}
.cam-btn:hover,.cam-btn.selected{border-color:var(--accent);color:var(--accent)}
.mrow{display:none}
.footnote{text-align:center;font-style:italic;color:#7a746e;font-size:14px;margin:22px auto 0;max-width:640px}
.promo{background:#e9e9e9;margin:26px auto 0;max-width:860px;padding:0}
.promo>button{width:100%;background:none;border:0;display:flex;align-items:center;gap:16px;padding:18px 24px;text-align:left}
.promo .ptitle{font:700 12px var(--font);letter-spacing:3px;color:var(--accent);text-transform:uppercase}
.promo .plus{margin-left:auto;width:22px;height:22px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);display:grid;place-items:center;font-size:16px;line-height:1}
.promo .pbody{padding:0 24px 22px}
.promo .big{font:600 12px var(--font);border:1px solid #7a746e;padding:4px 7px;white-space:nowrap}
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.feature{background:#fff;border:1px solid var(--border)}.feature img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.feature div{padding:10px 12px}.feature strong{display:block;font:600 14px var(--font)}.feature span{font-size:13px;color:var(--muted)}
.also{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.also img{width:52px;height:36px;object-fit:cover;border:1px solid var(--border)}
.link-btn{background:none;border:0;color:var(--accent);text-decoration:underline;padding:0;font:600 14px var(--font)}
.build-yourself{text-align:center;margin-top:30px;color:var(--muted)}
.notice{background:#fff;border:1px solid var(--border);padding:12px 16px;margin:16px auto;max-width:900px}

/* build screen */
.build{max-width:1300px;margin:0 auto;padding:36px 28px 40px}
.build-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:28px;align-items:start}
.viewer{position:relative;aspect-ratio:16/10;min-height:300px;background:#efece7;border:1px solid var(--border);overflow:hidden}
.viewer-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#8a847e;text-align:center;padding:20px;pointer-events:none}
.viewer .photo-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewer-tools{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:14px;color:var(--muted)}
.units{display:flex;align-items:center;gap:8px}.units button{border:0;background:#e6e3df;padding:6px 14px;border-radius:14px;font-size:13px}.units button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);color:var(--ink)}
.switch{display:flex;gap:10px;align-items:center;cursor:pointer}.switch input{position:absolute;opacity:0}.switch i{width:40px;height:22px;border-radius:11px;background:#c9c5c0;position:relative;transition:.15s}.switch i::after{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}.switch input:checked+i{background:var(--accent)}.switch input:checked+i::after{left:20px}.switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.design-card,.edit-card{background:#fff;border:1px solid var(--border);padding:22px 24px}
.design-title{font:400 26px var(--display);margin:0 0 10px}
.model-code{font:700 15px var(--font);color:var(--accent);margin:0 0 6px;word-break:break-all}
.design-sub{color:#8a847e;margin:0 0 14px;font-size:15px}
.rows{margin:0}.rows .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #e6e3df}.rows dt{font:500 11px var(--font);letter-spacing:.5px;text-transform:uppercase;color:#8a847e;padding-top:3px}.rows dd{margin:0;text-align:right;font:700 15px var(--font)}
.lead-time{background:#faf6f4;border-left:3px solid var(--accent);padding:10px 12px;font-size:14px;margin:14px 0 0;color:var(--muted)}
.edit-card{margin-top:14px}.edit-card h2{font:700 11px var(--font);letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:18px 0 8px}.edit-card h2:first-child{margin-top:0}
.opt-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--border);background:#fff;padding:10px 12px;min-width:84px;text-align:left}
.opt strong{display:block;font:700 14px var(--font)}.opt small{color:#8a847e;font-size:11px}
.opt:hover:not(:disabled),.opt.selected{border-color:var(--accent)}.opt.selected strong{color:var(--accent)}
.opt:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.6)}
.size-slider{display:flex;gap:4px;flex-wrap:wrap}.size-slider .opt{min-width:56px;text-align:center}
.edit-note{background:#fff5f4;border:1px solid #f1c9c3;color:#a33a2b;font-size:13px;padding:8px 10px;margin-top:10px}
.build-actions{display:grid;gap:10px;margin-top:16px}
.build-actions .primary-btn{width:100%;padding:16px;font-size:14px}
.build-actions .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.build-actions .plain-btn{border:1px solid var(--ink);background:#fff;padding:14px;font:700 14px var(--font)}.build-actions .plain-btn:hover{background:#f0eeec}
.build-actions .plain-btn.on{background:var(--ink);color:#fff}
.results{background:#fff;border:1px solid var(--border);padding:22px 24px;margin-top:16px}
.price-label{font:600 11px var(--font);letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.price-amount{font:400 40px/1.1 var(--display);margin:4px 0}.price-amount small{font:400 16px var(--font);color:#9a948e}
.price-quoted{font:400 24px var(--display);margin:4px 0}
.freight{font-size:13px;color:#9a948e;margin:0 0 16px}
.dl-card{display:flex;align-items:center;gap:14px;border:1px solid var(--border);padding:12px 14px;margin-bottom:10px}
.dl-card .badge2{background:#f0eeec;font:700 11px var(--font);padding:8px 10px;border-radius:3px}
.dl-card .info{flex:1}.dl-card .info strong{display:block;font-size:14px}.dl-card .info span{font-size:13px;color:#8a847e}
.dl-card .dl-btn{background:var(--accent);color:#fff;border:0;padding:9px 16px;font:700 12px var(--font)}
.fineprint{max-width:1300px;margin:24px auto 0;color:var(--muted);font-size:14px}.fineprint summary{cursor:pointer;font-weight:600}
.have-code{max-width:1300px;margin:0 auto;padding:0 28px 28px}.have-code form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}.have-code input{border:1px solid var(--border);padding:9px 12px;width:170px;background:#fff;text-transform:uppercase}#code-msg{margin:6px 0 0;color:#a33a2b;font-size:13px;min-height:1em}

/* dialogs */
dialog{border:0;padding:28px 30px;max-width:540px;width:calc(100% - 28px);box-shadow:0 18px 60px rgba(0,0,0,.35);background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(30,28,26,.55)}
dialog h2{font:700 26px/1.2 var(--font);margin:0 0 8px}
.eyebrow{font:700 11px var(--font);letter-spacing:2px;color:var(--accent);margin:0 0 6px}
.dialog-sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .wide{grid-column:1/-1}
.form-grid label{font:600 13px var(--font);color:var(--muted);display:flex;flex-direction:column;gap:4px}
.form-grid input:not([type=checkbox]),.form-grid textarea{border:1px solid #cfcac5;padding:10px 11px;background:#fff;font:400 15px var(--font);color:var(--ink);width:100%}
.form-grid label.check{flex-direction:row;align-items:center;gap:8px;font-weight:500}.form-grid input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.form-grid input.bad,.form-grid textarea.bad{border-color:#c0392b;background:#fff7f6}
.specify-fields{display:grid;gap:12px}.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-error{color:#a33a2b;font-size:14px;min-height:1.2em;margin:10px 0 0}
.fine{font-size:12px;color:#8a847e;margin:6px 0 14px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.code-big{font:700 30px var(--display);letter-spacing:3px;text-align:center;margin:8px 0}
#share-link{width:100%;border:1px solid #cfcac5;padding:10px;font:400 14px var(--font)}
.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.gallery figure{margin:0}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border)}.gallery figcaption{font-size:12px;color:var(--muted);margin-top:3px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2926;color:#fff;padding:11px 16px;font-size:14px;max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}#toast.show{opacity:1}
.foot{background:#fff;text-align:center;color:#8a847e;font-size:13px;padding:26px 16px 70px;border-top:1px solid #eee}.foot img{display:block;margin:0 auto 8px;filter:grayscale(1)}.foot p{margin:0}

@media (max-width:900px){
  .build-grid{grid-template-columns:1fr}
  .sizes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.c3,.cards.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@media (max-width:640px){
  .topbar-inner{padding:0 14px;min-height:64px;gap:10px}.brand img{height:28px}.beta-tag{display:none}
  .ghost-btn{padding:8px 10px;font-size:10px;letter-spacing:1px}
  .sdc{padding:18px 14px 40px}.build{padding:18px 14px 28px}
  .step-title{font-size:23px}
  .cards{grid-template-columns:1fr 1fr;gap:12px}.cards.c3,.cards.c4{grid-template-columns:1fr 1fr}.cards.c2{grid-template-columns:1fr}
  .pcard .plabel{font-size:18px;padding:10px 12px 2px}.pcard .pdesc{padding:4px 12px 12px;font-size:13px}
  .cards.stack{grid-template-columns:1fr}
  .sizes{grid-template-columns:1fr;gap:10px}
  .size-cell .size-card,.size-cell .cam-btn.no{display:none}
  .mrow{display:grid;grid-template-columns:78px 1fr 1fr;gap:8px;align-items:stretch;background:#fff;border:1px solid var(--border);padding:8px}
  .mrow .msize{font:400 28px var(--display);display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1}.mrow .msize small{font:700 8px var(--font);letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin-top:3px}
  .mrow .cam-btn{padding:12px 6px}
  .seg button{padding:12px 8px;font-size:14px}
  .design-card,.edit-card,.results{padding:18px 16px}
  .build-actions .row2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  dialog{padding:22px 18px}
  .outline-btn{padding:8px 10px;letter-spacing:1px}
  .viewer{min-height:240px;aspect-ratio:4/3}
}