/* Kraff estimate calculators (prototype 0.2). Instances: .kq-left = cabinet (bottom-left, panel from left), .kq-right = custom furniture (bottom-right, panel from right). Matches kraff.my onepage.css: Manrope, #111 ink, #77756f mute, hairlines, small caps labels */
.kq-pill,.kq-panel{--kq-ink:#111;--kq-mute:#77756f;--kq-rule:#e4e2dd;--kq-bg:#fff;--kq-soft:#f4f3f0;font:400 14px/1.35 Manrope,Inter,Helvetica,Arial,sans-serif;color:var(--kq-ink);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.kq-panel *,.kq-panel *::before,.kq-panel *::after{box-sizing:border-box;margin:0;padding:0}
.kq-panel button,.kq-panel input{font:inherit;color:inherit}
.kq-panel [hidden]{display:none!important}

/* floating pill: desktop bottom-left (cabinet) / bottom-right (furniture); mobile bottom centre */
.kq-pill{position:fixed;z-index:9000;bottom:24px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--kq-ink);color:#fff;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 24px rgba(0,0,0,.18);transition:opacity .25s,transform .25s,background .2s}
.kq-pill:hover{background:#000}
.kq-pill:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.kq-pill-i{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.6);border-radius:50%;font-size:13px;font-weight:500;line-height:1;letter-spacing:0}
.kq-pill.kq-left{left:24px}.kq-pill.kq-right{right:24px}
.kq-on .kq-pill{opacity:0;pointer-events:none;transform:translateY(10px)}

.kq-scrim{position:fixed;inset:0;z-index:9001;background:rgba(17,17,17,.28);opacity:0;pointer-events:none;transition:opacity .3s}
.kq-scrim.kq-open{opacity:1;pointer-events:auto}

/* panel: desktop slides in from its side (cabinet = left, furniture = right) */
.kq-panel{position:fixed;z-index:9002;top:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;background:var(--kq-bg);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s .38s}
.kq-panel.kq-left{left:0;transform:translateX(-102%);box-shadow:10px 0 40px rgba(0,0,0,.12)}
.kq-panel.kq-right{right:0;transform:translateX(102%);box-shadow:-10px 0 40px rgba(0,0,0,.12)}
.kq-panel.kq-open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
.kq-panel.kq-drag{transition:none}

.kq-hd{position:relative;flex:none;padding:26px 64px 18px 28px;border-bottom:1px solid var(--kq-rule)}
.kq-grab{display:none}
.kq-title{font-size:11px;line-height:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kq-sub{margin-top:6px;font-size:12px;color:var(--kq-mute)}
.kq-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;background:none;font-size:26px!important;line-height:1;font-weight:300;cursor:pointer;border-radius:50%}
.kq-x:hover{background:var(--kq-soft)}

.kq-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 28px 24px}
.kq-lbl{font-size:10.5px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kq-mute)}
.kq-empty{padding:28px 0 6px;color:var(--kq-mute);font-size:13px}

.kq-sec{padding:22px 0 20px;border-bottom:1px solid var(--kq-rule)}
.kq-sh{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.kq-sh h3{font-size:11px;line-height:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kq-ssum{margin-left:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.kq-rm{border:0;background:none;font-size:10.5px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--kq-mute);cursor:pointer;padding:4px 0 4px 6px}
.kq-rm:hover{color:var(--kq-ink);text-decoration:underline;text-underline-offset:3px}

.kq-row{padding:12px 0 2px}
.kq-rl{font-size:13px;font-weight:500}
.kq-rv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px}
.kq-rv b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.kq-rv i,.kq-tg i{font-style:normal;color:var(--kq-mute);font-size:11px}
.kq-rv em{font-style:normal;color:var(--kq-mute);font-size:11px;margin-left:4px}
.kq-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}

/* slider: hairline track, black fill, round thumb */
.kq-sl{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.kq-nudge{flex:none;width:28px;height:28px;border:1px solid var(--kq-rule);border-radius:50%;background:#fff;font-size:15px!important;line-height:1;cursor:pointer;color:var(--kq-mute)!important}
.kq-nudge:hover{border-color:var(--kq-ink);color:var(--kq-ink)!important}
.kq-sl input[type=range]{--p:0%;flex:1;min-width:0;height:32px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}
.kq-sl input[type=range]:focus{outline:0}
.kq-sl input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--kq-ink),var(--kq-ink)) 0/var(--p) 100% no-repeat,#d9d7d2}
.kq-sl input[type=range]::-moz-range-track{height:2px;background:#d9d7d2}
.kq-sl input[type=range]::-moz-range-progress{height:2px;background:var(--kq-ink)}
.kq-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:#fff;border:2px solid var(--kq-ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.kq-sl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--kq-ink)}
.kq-sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(17,17,17,.15)}

/* toggles: small square checkbox */
.kq-tg{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:12px;cursor:pointer;user-select:none}
.kq-tg input,.kq-opt input{-webkit-appearance:none;appearance:none;flex:none;width:16px;height:16px;border:1.5px solid var(--kq-ink);background:#fff;display:grid;place-items:center;cursor:pointer}
.kq-tg input:checked{background:var(--kq-ink);box-shadow:inset 0 0 0 2.5px #fff}
.kq-row-i{display:flex;align-items:center;gap:12px;padding:12px 0 0}
.kq-row-i .kq-tg{margin:0;flex:1}
.kq-row-i .kq-rl{flex:1}
.kq-row-i .kq-amt{min-width:72px;text-align:right}

/* steppers */
.kq-step{display:inline-flex;align-items:center;border:1px solid var(--kq-rule);border-radius:999px;height:30px}
.kq-step button{width:30px;height:28px;border:0;background:none;cursor:pointer;font-size:15px!important;color:var(--kq-mute)!important}
.kq-step button:hover{color:var(--kq-ink)!important}
.kq-step span{min-width:18px;text-align:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* countertop */
.kq-ct{margin-top:10px;padding-top:14px;border-top:1px dashed var(--kq-rule)}
.kq-opts{display:grid;gap:2px;margin:8px 0 6px}
.kq-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;font-size:13px;cursor:pointer;border-radius:6px}
.kq-opt:hover{background:var(--kq-soft)}
.kq-opt input{border-radius:50%}
.kq-opt input:checked{background:var(--kq-ink);box-shadow:inset 0 0 0 3px #fff}
.kq-opt input:checked+span{font-weight:600}
.kq-ctlen{transition:opacity .2s}
.kq-ctlen.kq-off>.kq-rv:first-child,.kq-ctlen.kq-off .kq-ctsl,.kq-ctlen.kq-off .kq-add-line{display:none}
.kq-link{border:0;background:none;font-size:11px!important;font-weight:600;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}
.kq-add-line{margin-top:8px}
.kq-add-line>span:first-child{color:var(--kq-mute)}
.kq-op .kq-rl{font-size:12px}

/* add a space */
.kq-add{padding:22px 0 6px}
.kq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kq-chip{height:32px;padding:0 13px;border:1px solid var(--kq-ink);border-radius:999px;background:#fff;font-size:11px!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.kq-chip:hover{background:var(--kq-ink);color:#fff}
.kq-note{margin-top:18px;font-size:11px;color:var(--kq-mute)}

/* footer: running total + send */
.kq-ft{flex:none;padding:14px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--kq-ink);background:#fff}
.kq-free{margin-bottom:10px;padding:8px 10px;background:var(--kq-soft);font-size:11.5px;font-weight:600;line-height:1.35}
.kq-totrow{display:flex;align-items:baseline;justify-content:space-between}
.kq-totrow .kq-lbl{color:var(--kq-ink)}
.kq-sum{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kq-send{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.kq-btn{display:flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:inherit}
.kq-wa{background:var(--kq-ink);color:#fff!important}
.kq-em{border:1px solid var(--kq-ink)}
.kq-btn.kq-dis{opacity:.35;pointer-events:none}
/* coming-soon placeholder panel */
.kq-soonbox{padding:28px 0}
.kq-soonbox p{margin:10px 0 20px;font-size:13px;color:var(--kq-mute)}
.kq-soonbox .kq-btn{display:inline-flex}

/* mobile: pill bottom centre, full-height bottom sheet, swipe down to close */
@media (max-width:768px){
  /* pills stack upwards from just above the Cabinetry room menu bar; --kq-order set per instance */
  .kq-pill.kq-left,.kq-pill.kq-right{left:50%;right:auto;transform:translateX(-50%);bottom:calc(8px + 54px * var(--kq-order,0) + env(safe-area-inset-bottom));text-transform:none;letter-spacing:.02em;font-size:13px;font-weight:600}
  .kq-on .kq-pill{transform:translateX(-50%) translateY(10px)}
  .kq-panel.kq-left,.kq-panel.kq-right{top:auto;left:0;right:0;width:auto;height:calc(100% - 10px);height:calc(100dvh - 10px);border-radius:14px 14px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(102%)}
  .kq-panel.kq-open{transform:none}
  .kq-hd{padding:20px 60px 14px 20px;touch-action:none}
  .kq-grab{display:block;position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#d4d2cc}
  .kq-x{top:8px;right:8px}
  .kq-body{padding:0 20px 20px}
  .kq-ft{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .kq-sum{font-size:24px}
  .kq-form{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.kq-pill,.kq-scrim,.kq-panel{transition:none!important}}
html.kq-on,html.kq-on body{overflow:hidden}

/* 0.7.2 finish selector */
.kq-mat{padding:4px 0 14px;border-bottom:1px solid var(--kq-line,#e6e6e6);margin-bottom:6px}
.kq-matopts{grid-template-columns:1fr;gap:2px}

/* 0.7.5 free drawers */
.kq-gift{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding:8px 10px;border:1px dashed var(--kq-ink);font-size:11.5px;line-height:1.35}
.kq-gift b{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kq-gift span{color:var(--kq-mute)}
.kq-gift.kq-gift-on{background:var(--kq-ink);color:#fff;border-style:solid}
.kq-gift.kq-gift-on span{color:#fff;font-weight:700}

/* 0.7.5 LED note */
.kq-row-i[data-row=led],.kq-row-i[data-row=panel]{flex-wrap:wrap}
.kq-inote{flex-basis:100%;margin:4px 0 0 26px;font-size:11px;line-height:1.4;color:var(--kq-mute)}

/* 0.7.6 lead form */
.kq-form{margin-top:12px}
.kq-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kq-f{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kq-mute)}
.kq-f input{box-sizing:border-box;width:100%;min-width:0;height:40px;padding:0 12px;border:1px solid #cfcfcf;border-radius:8px;font:500 14px/1 Manrope,sans-serif;color:var(--kq-ink);background:#fff;text-transform:none;letter-spacing:0}
.kq-f input:focus{outline:2px solid var(--kq-ink);outline-offset:-1px;border-color:var(--kq-ink)}
.kq-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.kq-sendbtn{width:100%;margin-top:8px;border:0}
.kq-sendbtn:disabled{opacity:.6}
.kq-msg{margin:8px 0 0;font-size:12px;line-height:1.4}
.kq-msg.kq-err{color:#b3261e}
.kq-thanks{margin-top:12px;padding:14px 12px;background:var(--kq-ink);color:#fff;text-align:center;font-size:13px}

/* 0.7.7 mobile: the pill sits in its own strip at the bottom of the screen, below the Cabinetry room tabs;
   the Kraff one page (.split) ends above that strip so the pill never covers photos or tabs. Desktop unchanged. */
@media (max-width:768px){
  body.kraff-onepage .split{bottom:calc(60px + env(safe-area-inset-bottom))}
  body.kraff-onepage{background:#fff}
}

/* 0.7.8 top block: free drawers + estimate + final-measurement note + area tabs (below the header) */
.kq-top{flex:none;padding:12px 28px 0;border-bottom:1px solid var(--kq-ink);background:#fff}
.kq-top .kq-gift{margin-bottom:8px}
.kq-top .kq-free{margin-bottom:8px}
.kq-fnote{margin:2px 0 0;font-size:11px;line-height:1.35;color:var(--kq-mute)}
.kq-tabs{display:flex;gap:6px;margin:12px -28px 0;padding:0 28px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kq-tabs::-webkit-scrollbar{display:none}
.kq-tab{flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:40px;padding:5px 13px;border:1px solid var(--kq-ink);border-radius:10px;background:#fff;cursor:pointer;text-align:left}
.kq-tab span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:14px}
.kq-tab i{font-style:normal;font-size:10.5px;font-weight:600;line-height:13px;color:var(--kq-mute);font-variant-numeric:tabular-nums}
.kq-tab i:empty{display:none}
.kq-tab:hover{background:var(--kq-soft)}
.kq-tab.kq-tab-on{background:var(--kq-ink);color:#fff}
.kq-tab.kq-tab-on i{color:rgba(255,255,255,.75)}
.kq-tab:focus-visible{outline:2px solid var(--kq-ink);outline-offset:2px}
.kq-zero{margin:2px 0 0;font-size:11.5px;color:var(--kq-mute)}
.kq-ft{border-top:1px solid var(--kq-rule)}
.kq-ft .kq-form{margin-top:0}
@media (max-width:768px){
  .kq-top{padding:10px 20px 0}
  .kq-tabs{margin:10px -20px 0;padding:0 20px 10px}
  .kq-tab{min-height:38px;padding:4px 11px}
  .kq-ft .kq-form{margin-top:0}
}
/* 0.7.8b: all 5 area tabs always visible (wrap to 2 rows instead of scrolling) */
.kq-tabs{flex-wrap:wrap;overflow:visible;margin:10px 0 0;padding:0 0 12px}
.kq-tab{flex:1 1 auto;align-items:center;text-align:center;min-height:36px;padding:4px 10px}
@media (max-width:768px){.kq-tabs{margin:10px 0 0;padding:0 0 10px}.kq-tab{min-height:36px;padding:4px 8px}}
/* 0.7.8c: one row of 5 equal tabs; long labels (TV Console, Shoe Rack) wrap onto 2 lines */
.kq-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.kq-tab{min-width:0;min-height:44px;padding:4px 3px;border-radius:9px}
.kq-tab span{font-size:10px;letter-spacing:.04em;line-height:12px;white-space:normal;overflow-wrap:anywhere}
.kq-tab i{font-size:10px;white-space:nowrap}
@media (max-width:768px){.kq-tab{min-height:44px;padding:4px 2px}.kq-tab span{font-size:9.5px;letter-spacing:.03em}.kq-tab i{font-size:9.5px}}
/* 0.7.9: per-tab finish (melamine-only areas), countertop "per ft run" label, general notes */
.kq-matfix{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--kq-ink)}
.kq-lbl-n{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;margin-left:4px}
.kq-notes{margin:18px 0 0;padding:0 0 0 16px;font-size:11.5px;line-height:1.45;color:var(--kq-ink)}
.kq-notes li{margin:0 0 4px}
.kq-notes+.kq-note{margin-top:8px}
/* 0.7.10: choice rows (island depth / exposed sides) */
.kq-row-i.kq-choice{display:block}
.kq-choice>.kq-lbl{margin:0 0 6px}
.kq-choice>.kq-amt{display:block;text-align:right;margin-top:4px}
.kq-choice>.kq-inote{margin-top:6px}
/* 0.7.11: wall questions as picture cards */
.kq-wall .kq-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 6px}
.kq-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:1.5px solid #d9d7d2;border-radius:8px;background:#fff;cursor:pointer;font-size:12.5px;line-height:1.3}
.kq-card:hover{border-color:#999}
.kq-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kq-card:has(input:checked){border-color:var(--kq-ink);box-shadow:0 0 0 1px var(--kq-ink)}
.kq-card input:checked~.kq-ct-l{font-weight:700}
.kq-card input:focus-visible~.kq-pic{outline:2px solid var(--kq-ink);outline-offset:2px}
.kq-pic{display:block;aspect-ratio:320/192}
.kq-pic svg{display:block;width:100%;height:100%}
.kq-ct-l i{display:block;font-style:normal;font-weight:400;color:#777;font-size:11.5px}
.kq-help{margin:2px 0 0;font-size:12px;color:#666;line-height:1.4}
.kq-wall>.kq-lbl{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--kq-ink);line-height:1.35}

/* 0.7.12 optional email copy */
.kq-f-wide{grid-column:1/-1}
.kq-f span em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:var(--kq-mute);margin-left:4px}
.kq-thanks .kq-copy{display:block;margin-top:6px;font-size:12px;opacity:.85}

/* 0.7.16 (Fira 23-Oct-26): compact mobile header + SEND-only footer with a contact bottom sheet */
.kq-gtag,.kq-mnote,.kq-opensheet,.kq-sheethd{display:none}
@media (max-width:768px){
  .kq-hd{padding:14px 56px 8px 20px}
  .kq-hd .kq-sub{display:none}
  .kq-x{top:2px}
  .kq-top{padding:6px 20px 0}
  .kq-top .kq-gift,.kq-top .kq-fnote{display:none}
  .kq-totrow{align-items:center;gap:8px}
  .kq-totrow .kq-lbl{flex:none}
  .kq-gtag:not([hidden]){display:inline-block;margin-right:auto;padding:2px 7px;border-radius:999px;background:var(--kq-ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
  .kq-sum{font-size:21px;line-height:26px;margin-left:auto}
  .kq-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin:6px -20px 0;padding:0 20px 8px}
  .kq-tab{flex:none;flex-direction:row;align-items:center;gap:5px;min-width:0;min-height:30px;padding:3px 10px;border-radius:999px}
  .kq-tab span{font-size:10.5px;letter-spacing:.04em;line-height:13px;white-space:nowrap}
  .kq-tab i{font-size:10px;white-space:nowrap}
  .kq-mnote{display:block;margin:12px 0 0;font-size:11.5px;line-height:1.4;color:var(--kq-mute)}
  .kq-mnote p{margin:0 0 2px}
  /* footer: only SEND until opened */
  .kq-ft{position:relative;padding:8px 20px calc(8px + env(safe-area-inset-bottom))}
  .kq-ft.kq-shut .kq-form{display:none}
  .kq-ft.kq-shut .kq-opensheet{display:block;margin-top:0}
  .kq-ft.kq-sent .kq-opensheet{display:none}
  .kq-ft.kq-sheet{position:absolute;left:0;right:0;bottom:var(--kq-kb,0px);z-index:5;max-height:calc(100% - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px 14px 0 0;border-top:1px solid var(--kq-ink);box-shadow:0 -12px 32px rgba(0,0,0,.18);padding-top:14px}
  .kq-ft.kq-sheet .kq-sheethd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .kq-sheethd b{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .kq-sheetx{width:36px;height:36px;margin:-8px -8px -8px 0;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--kq-ink)}
  .kq-panel.kq-sheeton .kq-body{pointer-events:none;opacity:.45}
  .kq-ft input{font-size:16px} /* stops iOS zooming on focus */
}

/* 0.7.17 (Fira 23-Oct-26): centred "KRAFF CABINET CALCULATOR" title; all room tabs visible (no scroll), name on line 1, price on line 2 */
.kq-hd{padding-left:64px;padding-right:64px;text-align:center}
.kq-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible;flex-wrap:wrap;margin:10px 0 0;padding:0 0 12px}
.kq-tab{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;min-width:0;min-height:40px;padding:4px 3px;border-radius:9px}
.kq-tab span,.kq-tab i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:768px){
  .kq-hd{padding:14px 52px 8px 52px}
  .kq-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:6px 0 0;padding:0 0 8px;overflow:visible}
  .kq-tab{flex:initial;flex-direction:column;gap:0;min-height:38px;padding:3px 2px;border-radius:8px}
  .kq-tab span{font-size:9px;letter-spacing:.02em;line-height:11px;white-space:normal;overflow:visible;text-overflow:clip;word-break:normal;overflow-wrap:normal}
  .kq-tab i{font-size:8.5px;line-height:11px;letter-spacing:-.01em}
}

/* 0.7.18 (Fira 25-Oct-26): 6th tab (Feature Wall) - six columns, still one row at 390px; "What's included" line */
.kq-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.kq-tab{padding:4px 2px}
.kq-tab span{font-size:9.5px;letter-spacing:0;line-height:12px;white-space:normal;overflow:visible;text-overflow:clip}
.kq-incl{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--kq-mut,#6b6b6b)}
@media (max-width:768px){
  .kq-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
  .kq-tab{padding:3px 1px}
  .kq-tab span{font-size:8.5px;letter-spacing:0}
  .kq-tab i{font-size:8px;letter-spacing:-.02em}
  .kq-incl{font-size:11px}
}

/* 0.7.19: 1024px "panel clipped at left edge" hardening (not reproduced in Chromium/WebKit; defensive).
   Panel never wider than the viewport, respects iPad/notch safe area, and on short tablet/laptop screens
   the sticky footer cannot squeeze the scroll body. */
.kq-panel{max-width:100vw;padding-left:env(safe-area-inset-left,0px);overflow-x:hidden}
@media (min-width:769px) and (max-width:1100px){
 .kq-panel{width:min(440px,100vw)}
}
@media (min-width:769px) and (max-height:700px){
 .kq-panel .kq-body,.kq-panel [class*="kq-scroll"]{min-height:120px}
}
.kq-card[hidden]{display:none}

/* 0.7.22 (Fira 29-Oct-26): minimal sticky header + footer at EVERY width (phone, tablet, desktop panel) so the options get the screen.
   Header: small centred title, one line "Estimate [N drawers free -RMx] RM total", 5 slim tab pills on one row.
   Intro + "subject to final measurement" scroll at the top of the body (.kq-mnote); footer = total + "Send estimate", fields in a bottom sheet. */
.kq-hd{padding:9px 48px 5px;text-align:center;border-bottom:0}
.kq-grab{top:4px}
.kq-title{font-size:10.5px;line-height:13px}
.kq-hd .kq-sub{display:none}
.kq-x{top:50%;transform:translateY(-50%)}
.kq-top{padding:2px 16px 0}
.kq-top .kq-gift,.kq-top .kq-fnote{display:none}
.kq-totrow{display:flex;align-items:center;gap:8px;min-height:26px}
.kq-totrow .kq-lbl{flex:none;font-size:10.5px}
.kq-gtag:not([hidden]){display:inline-block;margin-right:auto;padding:2px 7px;border-radius:999px;background:var(--kq-ink);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.kq-sum{font-size:19px;line-height:24px;margin-left:auto}
.kq-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:4px 0 0;padding:0 0 6px;overflow:visible;flex-wrap:nowrap}
.kq-tab{flex:initial;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:30px;padding:2px 2px;border-radius:999px;text-align:center}
.kq-tab span{font-size:8.5px;letter-spacing:.02em;line-height:10px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal}
.kq-tab i{font-size:8px;line-height:9px;letter-spacing:-.01em;white-space:nowrap}
.kq-mnote{display:block;margin:10px 0 0;font-size:11.5px;line-height:1.4;color:var(--kq-mute)}
.kq-mnote p{margin:0 0 2px}
.kq-ft{position:relative;padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
.kq-bar{display:none}
.kq-ft.kq-shut .kq-bar{display:flex;align-items:center;gap:10px}
.kq-bart{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.kq-bart b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.kq-bart small{font-size:9.5px;color:var(--kq-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-ft .kq-opensheet{display:block;flex:none;width:auto;margin:0;min-height:38px;padding:8px 18px;font-size:12px}
.kq-ft.kq-shut .kq-form{display:none}
.kq-ft.kq-sent .kq-opensheet{display:none}
.kq-ft.kq-sheet{position:absolute;left:0;right:0;bottom:var(--kq-kb,0px);z-index:5;max-height:calc(100% - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px 14px 0 0;border-top:1px solid var(--kq-ink);box-shadow:0 -12px 32px rgba(0,0,0,.18);padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:#fff}
.kq-ft.kq-sheet .kq-sheethd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kq-sheethd b{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kq-sheetx{width:36px;height:36px;margin:-8px -8px -8px 0;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--kq-ink)}
.kq-panel.kq-sheeton .kq-body{pointer-events:none;opacity:.45}
@media (max-width:768px){ .kq-ft input{font-size:16px} .kq-hd{padding:12px 44px 4px} }
.kq-panel .kq-tabs{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;flex-wrap:nowrap}
.kq-panel .kq-tab{flex:initial;min-width:0;padding:2px 1px}
.kq-panel .kq-ft .kq-opensheet{min-height:34px;padding:6px 14px;font-size:11px}

/* [Claude 0.8.0 29-Oct-26] live 3D view above the options (calc.js + view3d.js). Sticky at the top of the scrolling body,
   so it stays in sight while the client moves sliders below it. Max ~1/3 of the screen height; "Hide" folds it to a slim bar. */
.kq-3d{position:sticky;top:0;z-index:3;margin:0 -28px;background:#faf9f7;border-bottom:1px solid var(--kq-rule)}
.kq-3d-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 28px}
.kq-3d-bar .kq-lbl{flex:none;color:var(--kq-ink)}
.kq-3d-hint{flex:1;min-width:0;font-size:10.5px;color:var(--kq-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kq-3d-btn{flex:none;height:22px;padding:0 9px!important;border:1px solid var(--kq-rule);border-radius:999px;background:#fff;font-size:9.5px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.kq-3d-btn:hover{border-color:var(--kq-ink)}
.kq-3d-btn:focus-visible{outline:2px solid var(--kq-ink);outline-offset:1px}
.kq-3d-stage{position:relative;height:min(30vh,270px);min-height:150px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.kq-3d-off .kq-3d-stage,.kq-3d-off .kq-3d-hint{display:none}
.kq-3d-2d .kq-3d-hint,.kq-3d-2d [data-v3d=reset]{display:none}
.kq-3d-2d .kq-3d-stage{touch-action:auto;height:auto;min-height:0;max-height:min(30vh,270px)}
.kq-3d-2d.kq-3d-none{display:none}
.kq-3d-c{display:block;cursor:grab;outline:0}
.kq-3d-c:active{cursor:grabbing}
.kq-3d-lab{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kq-3d-t{position:absolute;left:0;top:0;padding:1px 5px;border-radius:3px;background:rgba(250,249,247,.88);font-size:10px;line-height:13px;font-weight:600;color:#4f4d48;white-space:nowrap;font-variant-numeric:tabular-nums}
.kq-3d-note{font-weight:500;color:#8a6a45}
.kq-3d-title{font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kq-ink)}
.kq-3d-empty,.kq-3d-load{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--kq-mute);pointer-events:none}
.kq-3d-svg{display:flex;justify-content:center;padding:4px 0}
.kq-3d-svg svg{display:block;width:auto;height:min(28vh,240px);max-width:100%}
@media (max-width:768px){.kq-3d{margin:0 -20px}.kq-3d-bar{padding-left:20px}.kq-3d-stage{height:min(30vh,250px)}}
@media (max-height:520px){.kq-3d-stage{height:120px;min-height:0}}

/* [Claude 0.8.1 29-Oct-26] countertop in two columns (material | + backsplash), stepped-slider choices, option sub-labels */
.kq-ct2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start}
.kq-ct2-one{grid-template-columns:1fr}
.kq-ctb{padding-top:8px}
.kq-ctb .kq-tg{margin:0;white-space:nowrap}
.kq-tg.kq-dim{opacity:.4;cursor:default}
.kq-osub{font-style:normal;color:var(--kq-mute);font-size:11.5px;font-weight:400}
.kq-chsl .kq-tg{margin:6px 0 0}
.kq-chsl .kq-sl{margin-top:6px}
.kq-chfix{margin:6px 0 0}

/* [Claude 0.8.1] desktop: 3D view floating on the right of the page, frosted glass (item 7). Only while the calculator is open. */
.kq-3d-float{position:fixed;z-index:9003;top:24px;bottom:24px;right:24px;left:calc(min(460px,100vw) + 24px);margin:0;display:flex;flex-direction:column;
  font:400 14px/1.35 Manrope,Inter,Helvetica,Arial,sans-serif;color:#111;--kq-ink:#111;--kq-mute:#6f6d68;--kq-rule:rgba(17,17,17,.12);
  background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.kq-3d-float *,.kq-3d-float *::before,.kq-3d-float *::after{box-sizing:border-box}
.kq-3d-float [hidden]{display:none!important}
html.kq-on .kq-3d-float{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,visibility 0s}
.kq-3d-float.kq-right{left:24px;right:calc(min(460px,100vw) + 24px)}
.kq-3d-float .kq-3d-bar{flex:none;height:44px;padding:0 12px 0 20px;border-bottom:1px solid rgba(17,17,17,.08)}
.kq-3d-float .kq-lbl{font-size:10.5px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.kq-3d-float .kq-3d-btn{height:26px;padding:0 12px!important;background:rgba(255,255,255,.8);font:700 10px/1 Manrope,Inter,Helvetica,Arial,sans-serif!important;letter-spacing:.06em;color:#111;margin-left:6px}
.kq-3d-float .kq-3d-stage{flex:1;height:auto;min-height:0;max-height:none}
.kq-3d-float .kq-3d-t{background:rgba(255,255,255,.8);font-size:11px;line-height:14px}
.kq-3d-float.kq-3d-off{bottom:auto;left:auto;width:auto;border-radius:999px}
.kq-3d-float.kq-3d-off .kq-3d-bar{border-bottom:0}
.kq-3d-float.kq-3d-2d .kq-3d-stage{max-height:none;display:flex;align-items:center;justify-content:center}
.kq-3d-float .kq-3d-svg svg{height:min(60vh,520px)}
@media (min-width:769px) and (max-width:1100px){.kq-3d-float{left:calc(min(440px,100vw) + 20px);right:20px;top:20px;bottom:20px}}
@media (prefers-reduced-motion:reduce){.kq-3d-float{transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.kq-3d-float{background:rgba(250,249,247,.94)}}