/* Kitchen visualizer — the 3D kitchen stays in view while the steps scroll beside it (below it on phones). */
.kv { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: var(--space-3); align-items: start; }
.kv-view { position: sticky; top: 84px; order: 2; }
.kv-stage { position: relative; height: min(68vh, 620px); border-radius: 6px; overflow: hidden; background: #d9dde2; touch-action: none; }
.kv-stage canvas { display: block; }
.kv-tools { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 2; }
.kv-tools button { font: 500 12px var(--font-body); padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: var(--basalt); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kv-tools button:focus-visible { outline: 2px solid var(--basalt); outline-offset: 2px; }
.kv-caption { margin: .6rem 0 0; font: 500 13px var(--font-body); color: var(--basalt); }
.kv-note { margin: .2rem 0 0; font-size: 12px; color: var(--slate); }
.kv-no3d { padding: 2rem; text-align: center; color: var(--slate); }

.kv-panel { order: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.kv-step { min-width: 0; }
.kv-step h2 { font-size: var(--step-1, 1.25rem); margin: 0 0 .7rem; display: flex; align-items: center; gap: .6rem; }
.kv-step h2 span { font: 500 12px var(--font-mono); width: 24px; height: 24px; border-radius: 50%; background: var(--basalt); color: var(--limestone); display: inline-grid; place-items: center; flex: none; }
.kv-hint { font-size: 14px; color: var(--slate); margin: 0 0 .7rem; }

.kv-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv-shape { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--mist); background: var(--porcelain); border-radius: 6px; cursor: pointer; color: var(--basalt); }
.kv-shape svg { grid-row: span 2; width: 34px; height: 34px; color: var(--slate); }
.kv-shape b { font-size: 14px; } .kv-shape small { font-size: 12px; color: var(--slate); line-height: 1.3; }
.kv-shape.on { border-color: var(--basalt); box-shadow: inset 0 0 0 1px var(--basalt); }
.kv-shape.on svg { color: var(--brass); }
.kv-check { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; font-size: 14px; }

.kv-wall { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.kv-wall > span { flex: 1; }
.kv-wall input { width: 4.2em; padding: 6px 8px; border: 1px solid var(--mist); border-radius: 4px; font: inherit; background: #fff; }
.kv-wall select { padding: 6px 8px; border: 1px solid var(--mist); border-radius: 4px; font: inherit; background: #fff; }

.kv-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kv-sw { padding: 0; border: 1px solid var(--mist); border-radius: 6px; overflow: hidden; background: var(--porcelain); cursor: pointer; text-align: left; color: var(--basalt); }
.kv-sw img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.kv-sw span { display: block; font-size: 11px; padding: 5px 6px; line-height: 1.25; }
.kv-sw.on, .kv-tile.on { border-color: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt); }

.kv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kv-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.kv-tile { padding: 0; border: 1px solid var(--mist); border-radius: 6px; overflow: hidden; background: var(--porcelain); cursor: pointer; scroll-snap-align: start; color: var(--basalt); text-align: left; }
.kv-tile img { width: 100%; height: 72px; object-fit: cover; display: block; }
.kv-tile span { display: block; font-size: 10.5px; padding: 4px 5px; line-height: 1.2; height: 2.6em; overflow: hidden; }
.kv-go .btn { width: 100%; }
.kv-sw:focus-visible, .kv-tile:focus-visible, .kv-shape:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (max-width: 860px) {
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv-view { order: 0; top: 60px; z-index: 5; background: var(--limestone); padding-bottom: 6px; }
  .kv-stage { height: 42vh; }
  .kv-panel { order: 1; }
}
@media (max-width: 420px) { .kv-swatches { grid-template-columns: repeat(4, 1fr); gap: 6px; } .kv-sw span { font-size: 10px; } }
.kv-dlg .ag-picked { align-items: center; }
.kv-dlg .ag-picked img { width: 150px; height: 100px; object-fit: cover; border-radius: 4px; }
.kv-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 500 14px var(--font-body); color: var(--slate); }
.kv-place { margin-bottom: 14px; }
.kv-place .kv-wall { margin-bottom: 4px; }
.kv-place select { padding: 6px 8px; border: 1px solid var(--mist); border-radius: 4px; font: inherit; font-size: 14px; background: #fff; }
.kv-place input[type="range"] { width: 100%; accent-color: var(--brass); margin: 2px 0; }
.kv-pos { display: block; font-size: 12px; color: var(--slate); }
.kv-warn { margin: .4rem 0 0; padding: 6px 10px; font-size: 13px; background: #fff3d6; border-left: 3px solid var(--brass); color: var(--basalt); }
.kv-island { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--mist); }
.kv-sub { font: 600 15px var(--font-body); margin: 14px 0 8px; }
.kv-add { display: flex; flex-wrap: wrap; gap: 6px; }
.kv-open select { padding: 5px 6px; border: 1px solid var(--mist); border-radius: 4px; font: inherit; font-size: 13px; background: #fff; }
.kv-del { border: 0; background: none; color: var(--slate); font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.kv-del:hover, .kv-del:focus-visible { background: var(--mist); color: var(--basalt); }
.kv-wall small { color: var(--slate); font-size: 12px; }
/* cabinet editor: each wall as an elevation — uppers above bases, at their real places */
.kv-legend { font-size: 12px; color: var(--slate); margin: 0 0 6px; }
.kv-elev { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 12px; color: var(--slate); }
.kv-elev > div { display: grid; gap: 4px; min-width: 0; }
.kv-cabs { position: relative; height: 44px; min-width: 0; background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(0,0,0,.03) 6px, rgba(0,0,0,.03) 7px); border-bottom: 1px solid var(--mist); }
.kv-cabs.up { height: 34px; }
.kv-cab { position: absolute; top: 0; bottom: 0; min-width: 0; padding: 1px 0; border: 1px solid var(--mist); border-radius: 3px; background: var(--porcelain); color: var(--basalt); cursor: pointer; display: grid; place-content: center; overflow: hidden; line-height: 1.1; }
.kv-cab b { font-size: 11px; font-weight: 600; } .kv-cab small { font-size: 9.5px; color: var(--slate); }
.kv-cab.app { background: #e6e7e8; } .kv-cab.open { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #f0ece3 4px, #f0ece3 8px); }
.kv-cab.thin { background: var(--mist); border: 0; cursor: default; }
.kv-cab.on { border-color: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt); }
.kv-cab:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.kv-cabpanel { margin-top: 10px; padding: 10px 12px; background: var(--porcelain); border: 1px solid var(--mist); border-radius: 6px; }
.kv-cabhead { margin: 0 0 8px; font-size: 14px; } .kv-cabhead small { display: block; color: var(--slate); font-size: 12px; }
.kv-cabpanel select { padding: 5px 6px; border: 1px solid var(--mist); border-radius: 4px; font: inherit; font-size: 13px; background: #fff; }
/* countertop edge profiles */
.kv-edges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.kv-edge { display: grid; justify-items: start; gap: 1px; padding: 8px; border: 1px solid var(--mist); border-radius: 6px; background: var(--porcelain); color: var(--basalt); cursor: pointer; text-align: left; }
.kv-edge svg { width: 44px; height: 32px; margin-bottom: 2px; }
.kv-edge path { fill: #d9d4ca; stroke: var(--basalt); stroke-width: 1.2; stroke-linejoin: round; }
.kv-edge b { font-size: 13px; } .kv-edge small { font-size: 11px; color: var(--slate); line-height: 1.2; }
.kv-edge.on { border-color: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt); }
.kv-edge.on path { fill: var(--brass-lt); }
.kv-edge:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.kv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.kv-tiles .kv-tile img { height: 56px; }
/* hardware */
.kv-hw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.kv-hwbtn { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--mist); border-radius: 6px; background: var(--porcelain); color: var(--basalt); cursor: pointer; font-size: 13px; text-align: left; }
.kv-hwbtn svg { width: 30px; height: 30px; flex: none; }
.kv-hwbtn svg .door { fill: #efece6; stroke: var(--mist); }
.kv-hwbtn.on, .kv-finish.on { border-color: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt); }
.kv-finishes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kv-finish { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--mist); border-radius: 6px; background: var(--porcelain); color: var(--basalt); cursor: pointer; font-size: 13px; text-align: left; }
.kv-finish i { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.kv-hwbtn:focus-visible, .kv-finish:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* sink */
.kv-sinkopts { margin: -4px 0 14px; padding-left: 12px; border-left: 3px solid var(--mist); }
.kv-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.kv-exact summary { cursor: pointer; font-size: 13px; color: var(--basalt); margin: 4px 0 8px; }
/* wall paint */
.kv-paints { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.kv-paint { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--mist); border-radius: 6px; background: var(--porcelain); color: var(--basalt); cursor: pointer; font-size: 11px; text-align: center; }
.kv-paint i { width: 100%; height: 30px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.kv-paint.on { border-color: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt); }
.kv-anypaint input { width: 100%; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.kv-paint:focus-visible, .kv-anypaint:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }
/* crown molding */
.kv-crowns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.kv-crownsvg { width: 36px; height: 30px; flex: none; }
.kv-crownsvg path { fill: #efece6; stroke: var(--basalt); stroke-width: 1.2; stroke-linejoin: round; }
.kv-hwbtn.on .kv-crownsvg path { fill: var(--brass-lt); }
/* door style */
.kv-doorstyles { margin-bottom: 8px; }
.kv-doorsvg { width: 26px; height: 34px; flex: none; }
.kv-doorsvg rect { fill: #efece6; stroke: var(--basalt); stroke-width: 1.2; }
.kv-doorsvg rect.in { fill: #e2ddd3; }
.kv-hwbtn.on .kv-doorsvg rect { fill: var(--brass-lt); } .kv-hwbtn.on .kv-doorsvg rect.in { fill: #b8955f; }
.kv-doorstyles small { color: var(--slate); font-size: 11px; }
/* toe kick */
.kv-kicksvg { width: 34px; height: 32px; flex: none; }
.kv-kicksvg .cab { fill: #efece6; stroke: var(--basalt); stroke-width: 1.1; }
.kv-kicksvg .dark { fill: #3a3833; stroke: var(--basalt); stroke-width: 1.1; }
.kv-kicksvg .floor { stroke: var(--slate); stroke-width: 1.4; }
.kv-hwbtn.on .kv-kicksvg .cab { fill: var(--brass-lt); }
.kv-anykick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kv-anykick input { width: 22px; height: 18px; border: 0; padding: 0; background: none; cursor: pointer; }

/* "More options": the detailed choices, closed until the customer opens them. */
.kv-more { margin-top: 14px; border-top: 1px solid var(--mist); }
.kv-more > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px 0 4px; font: 600 15px var(--font-body); color: var(--basalt); }
.kv-more > summary::-webkit-details-marker { display: none; }
.kv-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--basalt); border-radius: 50%; font: 500 14px/1 var(--font-body); }
.kv-more[open] > summary::before { content: "–"; }
.kv-more > summary small { flex-basis: 100%; padding-left: 28px; font: 400 13px var(--font-body); color: var(--slate); }
.kv-more > summary:focus-visible { outline: 2px solid var(--basalt); outline-offset: 2px; }