/* A small, local finish preview on the existing architectural photograph. */
.photo img{object-position:50% 50%}
.surface-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.surface-map path{fill:#83d5c405;stroke:#e2fff5;stroke-width:1.3;stroke-opacity:.65;vector-effect:non-scaling-stroke;pointer-events:visiblePainted;cursor:pointer;transition:fill .2s,stroke .2s,stroke-width .2s}
.surface-map path.is-selected,.surface-map path.is-hovered{fill:#83d5c421;stroke:#94ecd7;stroke-width:2.3;stroke-opacity:1}
.surface-hotspot{position:absolute;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:7px 12px 7px 8px;border:1px solid #fffef9;background:#fffef9f5;color:var(--ink);font:500 11px/1.2 Arial,Helvetica,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 3px 14px #14232026}
.hotspot-dot{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--ink);color:var(--white);font-size:17px;font-weight:400}
.surface-hotspot[aria-pressed=true]{border-color:#267d6e;background:var(--white)}
.surface-hotspot[aria-pressed=true] .hotspot-dot{background:#267d6e}
.surface-hotspot:hover{border-color:#267d6e}
.surface-hotspot:focus-visible,.scope button:focus-visible,.finish-choice input:focus-visible+span{outline:3px solid #267d6e;outline-offset:4px}
.kitchen .voice{pointer-events:none;z-index:3}
.kitchen .scene-label{z-index:3;pointer-events:none}
.finish-controls{grid-column:1/-1;padding:0 0 13px;border-bottom:1px solid var(--rule);margin-bottom:1px;min-width:0}
.surface-selector{display:flex;gap:18px;margin-bottom:10px}
.surface-selector button{appearance:none;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--body);font:500 12px/1.4 Arial,Helvetica,sans-serif;padding:7px 0;min-height:36px;cursor:pointer}
.surface-selector button[aria-pressed=true]{color:var(--ink);border-color:#267d6e}
.finish-group{padding:0;margin:0;border:0;display:flex;flex-wrap:wrap;gap:8px 18px;min-width:0}
.finish-group[hidden],.surface-map[hidden],.surface-hotspot[hidden],.finish-controls[hidden],.demo-reset[hidden]{display:none}
.finish-group legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.finish-choice{position:relative;display:inline-flex;cursor:pointer}
.finish-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.finish-choice>span{display:flex;gap:8px;align-items:center;padding:5px 9px 5px 5px;border:1px solid transparent;min-height:44px;font-size:12px;line-height:1.3}
.finish-choice input:checked+span{border-color:#267d6e;background:#edf2eb}
.finish-swatch{position:relative;display:block;width:25px;height:25px;border:1px solid #14232025;flex-shrink:0}
.swatch-limestone{background:linear-gradient(125deg,#c9bda7 0%,#ece5d6 45%,#b7ab93 47%,#e3d9c6 54%,#d0c4ae 100%)}
.swatch-soapstone{background:linear-gradient(138deg,#333835 0%,#3e4641 48%,#a1a79b 49%,#454d48 51%,#303732 100%)}
.swatch-oak{background:repeating-linear-gradient(92deg,#b29261 0 3px,#be9e6d 4px 7px,#a98959 8px 9px)}
.swatch-ivory{background:#e7dfce}
.scope .demo-reset{appearance:none;border:0;border-bottom:1px solid #b1beb4;background:transparent;font:400 11px/1.3 Arial,Helvetica,sans-serif;color:var(--body);padding:7px 0;min-height:32px;cursor:pointer}
.scope .demo-reset:disabled{opacity:.6;cursor:default;border-color:transparent}
.scope .scope-top{padding-bottom:8px;margin-bottom:0}
.preview-status{grid-column:1/-1;margin:0;color:var(--body);font-size:11px;min-height:0}
.preview-status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.surface-hotspot{font-size:10px;padding-right:9px;gap:5px}.finish-group{gap:7px}.finish-choice>span{font-size:11px;padding-right:6px}.surface-selector{margin-bottom:6px}}
@media(max-width:760px){.photo img{object-position:50% 50%}.surface-hotspot{font-size:10px;min-height:44px}.finish-group{gap:8px 14px}.finish-choice>span{font-size:12px}.surface-selector button{min-height:40px}.kitchen .scope{gap:9px 14px}.kitchen .scene-label{letter-spacing:1px}.finish-controls{padding-bottom:11px}}
@media(max-width:360px){.surface-hotspot{padding:6px 8px 6px 6px;font-size:9px}.hotspot-dot{width:21px;height:21px}.finish-choice>span{font-size:11px}.finish-group{gap:6px}.kitchen .scope h2{max-width:170px}}
@media(prefers-reduced-motion:reduce){.surface-map path{transition:none}}