#studioOverlay{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;outline:none}#studioDrawing{width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}#studioSign,#studioPlaque{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:hidden}#studioSign{width:600px;height:80px;background:#264137;color:#fff9ed;text-align:center;padding:8px;font:42px/1 Georgia,serif;box-shadow:0 2px 3px #0002}#studioSign small{display:block;font:15px/1.5 Arial,sans-serif;letter-spacing:.1em;margin-top:4px}#studioPlaque{width:300px;height:200px;border:3px solid #52644e;background:#f6f5ed08;color:#30462f;font:37px/1.2 Arial,sans-serif;display:grid;place-content:center;text-align:center;text-shadow:0 1px 1px #fff8}#studioPlaque:after{content:'';position:absolute;inset:5px;border:1px solid #a9b29f;transform:rotate(-.6deg)}#studioPlaqueHit{position:absolute;pointer-events:auto;width:64px;height:64px;border:0;background:transparent;transform:translate(-50%,-50%);border-radius:4px}#studioPlaqueHit{cursor:pointer}#studioPlaqueHit:hover{background:transparent;box-shadow:none}#studioFloor{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);border:0;background:transparent;min-width:44px;min-height:44px;padding:0;border-radius:50%;cursor:pointer}#studioFloor:focus-visible{background:transparent;outline:2px solid #dfbd70;outline-offset:1px}#studioShortcut{border:1px solid #bdc8be;background:#f4f6ef;color:#253d33;border-radius:8px;padding:10px 12px;font-size:14px;white-space:nowrap}
.studio-editing #studioOverlay{pointer-events:auto;touch-action:none}.studio-editing #studioDrawing{pointer-events:auto;touch-action:none}.studio-editing #overlays,.studio-editing .scene-caption,.studio-editing .welcome-card{display:none!important}.studio-editing #studioShortcut{background:#244337;color:#fffefa}.studio-available .trial-tag{font-size:12px}
#studioDrawing [data-kind],#studioDrawing [data-measure]{pointer-events:auto;touch-action:none;cursor:grab;outline:none}#studioDrawing [data-measure]{cursor:pointer}#studioDrawing [tabindex]:focus-visible{filter:drop-shadow(0 0 4px #b5870d)}#studioOverlay.is-dragging,#studioOverlay.is-dragging [data-kind]{cursor:grabbing}#studioDrawing text{font-family:Arial,sans-serif}#studioDrawing .studio-wall-hit{cursor:move}
#studioUI{position:absolute;inset:0;z-index:8;pointer-events:none;color:#263f33;font:14px/1.4 Arial,sans-serif}#studioUI *{box-sizing:border-box}#studioUI button,#studioUI select,#studioUI input{font:14px Arial,sans-serif;color:#294537;border:1px solid #c4cec1;background:#fffef8;border-radius:8px;min-height:44px;padding:10px 12px}#studioUI button{cursor:pointer}#studioUI button:disabled{opacity:.4;cursor:default}#studioUI button[aria-pressed=true]{background:#264737;color:#fffef5;border-color:#264737}#studioUI :focus-visible,#studioPlaqueHit:focus-visible{outline:3px solid #c49b37;outline-offset:2px}
.studio-top{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;gap:12px;background:#fffef7f2;border:1px solid #dedfd2;border-radius:12px;padding:10px 14px;pointer-events:auto;box-shadow:0 5px 18px #14281a10}.studio-top>div:first-child{margin-right:auto}.studio-top strong{display:block;font:24px/1.2 Georgia,serif}.studio-top span{display:block;font-size:12px;margin-top:3px;color:#53674f}.studio-range{display:flex;align-items:center;gap:8px}.studio-range select{min-width:100px}#studioHint{position:absolute;top:91px;left:20px;right:20px;margin:0 auto;width:fit-content;max-width:calc(100% - 40px);padding:6px 12px;background:#fffef2ed;border-radius:7px;text-align:center;font-size:13px;color:#40533c;pointer-events:none}
.studio-toolbar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;background:#fffef7f5;border:1px solid #d4dacd;border-radius:12px;box-shadow:0 5px 20px #15251d22;pointer-events:auto;white-space:nowrap}.studio-toolbar button{min-width:76px}#studioContext{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;pointer-events:auto;background:#fffef8f5;border:1px solid #d5d9ca;border-radius:10px;padding:5px 9px;white-space:nowrap}#studioContext strong{margin:0 6px}#studioContext button{min-height:36px;padding:7px 10px;font-size:13px}#studioMessage{position:absolute;bottom:84px;left:15px;right:15px;width:fit-content;max-width:calc(100% - 30px);margin:auto;background:#fffef5ee;color:#385139;border-radius:6px;text-align:center;padding:4px 10px;font-size:13px;pointer-events:none}#studioMessage:empty{display:none}#studioMessage.error{background:#fff1e9;color:#8a3424}#studioSaved{position:absolute;bottom:3px;width:100%;text-align:center;font-size:11px;color:#fff;text-shadow:0 1px 4px #162318;pointer-events:none}
#studioUI .studio-popover{position:absolute;right:20px;top:100px;max-height:calc(100% - 130px);width:310px;max-width:calc(100% - 40px);overflow:auto;background:#fffef8;border:1px solid #cdd5c7;border-radius:12px;padding:16px;box-shadow:0 8px 30px #20352430;pointer-events:auto;z-index:2}.studio-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#studioMeasurements label{display:grid;grid-template-columns:1fr auto;gap:5px;margin:12px 0;font-size:14px}#studioMeasurements input{grid-row:2;grid-column:1;min-width:0;width:100%;font-size:16px}#studioMeasurements label span{grid-row:2;grid-column:2;align-self:center;font-size:12px}#studioMeasurements select{grid-row:2;grid-column:1/3}#studioMeasurements p{font-size:13px;color:#5a6855}#studioMeasurements svg{display:block;width:160px;height:65px;margin:auto}
@media(max-width:800px){.studio-top{top:8px;left:8px;right:8px;gap:7px;padding:8px;flex-wrap:wrap}.studio-top strong{font-size:20px}.studio-top span{font-size:11px}.studio-range{font-size:12px}.studio-range select{min-width:85px;padding:8px}.studio-top button{font-size:12px;padding:8px}#studioHint{top:86px;font-size:12px;max-width:calc(100% - 20px)}.studio-toolbar{bottom:24px;width:max-content;max-width:calc(100% - 16px);gap:4px;padding:6px}.studio-toolbar button{min-width:0;padding:10px;font-size:13px}#studioContext{bottom:112px;max-width:calc(100% - 16px);gap:4px;font-size:13px}#studioContext button{padding:7px}#studioUI .studio-popover{right:8px;top:94px;max-width:calc(100% - 16px)}.studio-available .quiet-link,.studio-available .trial-tag{display:none}.studio-available header{gap:8px}.studio-available .brand{font-size:14px}.studio-available .brand span{font-size:8px}}
@media(max-width:500px){.studio-top>div:first-child{flex:1 1 40%}.studio-range{flex:0 1 auto}.studio-top #studioClose{position:absolute;right:6px;bottom:-46px;background:#fffef8}#studioHint{top:135px;left:8px;right:60px;max-width:calc(100% - 80px);font-size:11px}.studio-top{padding-right:9px}.studio-toolbar button{font-size:12px;padding:8px 6px}.studio-toolbar{gap:3px}#studioContext{bottom:117px}#studioContext strong{margin:0 2px}#studioContext button{font-size:12px}#studioUI .studio-popover{top:145px;max-height:calc(100% - 175px)}}

#studioContext{bottom:auto;top:132px;left:20px;transform:none} @media(max-width:800px){#studioContext{left:10px;top:130px}} @media(max-width:500px){#studioContext{top:183px;left:8px}}

@media(max-width:500px){
  .studio-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .studio-top>div:first-child{margin:0;min-width:0}.studio-top strong{font-size:19px}.studio-top span{font-size:10px}
  .studio-range{justify-content:flex-end}.studio-range select{min-width:82px}

  .studio-top #studioClose{position:static;justify-self:end}
  #studioHint{top:135px;left:8px;right:8px;max-width:calc(100% - 16px)}
  #studioContext{top:190px}
  #studioUI .studio-toolbar{width:calc(100% - 16px)}
  #studioUI .studio-toolbar button{flex:1 1 0;min-width:0;white-space:normal;font-size:12px;line-height:1.2;padding:8px 3px}
}

#studioUI .studio-primary{background:#294d3b;color:#fffef5;border-color:#294d3b;font-weight:600}
#studioContext{top:136px}#studioMessage{bottom:30px}
@media(max-width:800px){.studio-top{gap:5px}.studio-top>div:first-child{flex:1 1 auto}.studio-top strong{font-size:20px}#studioHint{top:138px}#studioContext{top:198px}}
@media(max-width:500px){.studio-top{display:flex;flex-wrap:wrap}.studio-top>div:first-child{flex:1 1 55%}.studio-top #studioClose{margin-left:auto}#studioHint{top:194px}#studioContext{top:255px;gap:3px;font-size:12px}#studioContext button{padding:7px 5px}#studioUI .studio-popover{top:200px;max-height:calc(100% - 225px)}}
#studioLayout{position:absolute;top:140px;left:20px;bottom:32px;width:265px;overflow:auto;pointer-events:auto;background:#fffef8;border:1px solid #d2dacb;border-radius:12px;padding:16px;box-shadow:0 5px 18px #14281a10}#studioLayout h2{font:22px Georgia,serif;margin:0 0 8px}#studioLayout p{font-size:14px;margin:8px 0 14px}#studioLayout label{display:block;margin:10px 0;font-size:14px}#studioLayout select{width:100%;margin-top:5px}#studioItems{display:grid;gap:7px}#studioUI .studio-item-card{display:flex;align-items:center;gap:10px;text-align:left;width:100%;touch-action:none;user-select:none;padding:10px}#studioItems img{width:44px;height:44px;object-fit:contain;background:white;border-radius:5px}#studioItems small{display:block;font-size:12px;color:#62725e;margin-top:4px}#studioLayout details{margin-top:18px;border-top:1px solid #d4dacc;padding-top:12px}#studioLayout summary{cursor:pointer;min-height:35px;font-size:14px}#studioFinishes{display:grid;gap:5px}#studioUI .studio-finish{display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;padding:5px;width:100%}.studio-finish img{width:36px;height:36px;object-fit:cover;border-radius:5px}#studioLayout .studio-plan-note{font-size:12px;color:#5e6a58;line-height:1.5;margin-top:18px}.studio-item-ghost{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:1000;background:#31553d;color:white;padding:12px 20px;border-radius:8px;font:14px Arial;box-shadow:0 4px 16px #0003}
.studio-planning #studioContext{left:310px;top:135px;max-width:calc(100% - 330px)}#studioContext strong{max-width:200px;overflow:hidden;text-overflow:ellipsis}#studioContext{max-width:calc(100% - 40px)}.studio-planning #studioHint{top:91px}.studio-planning #studioMessage{left:305px}.studio-planning #studioSaved{color:#465c41;text-shadow:none}
@media(max-width:899px){#studioLayout{top:auto;bottom:22px;left:8px;right:8px;width:auto;height:165px;padding:10px;display:flex;align-items:flex-start;gap:12px}#studioLayout h2{display:none}#studioLayout>p{display:none}#studioLayout .studio-source{min-width:130px;margin:0;width:130px;flex-shrink:0}#studioItems{display:flex;gap:7px}#studioUI .studio-item-card{width:130px;min-height:90px;flex-shrink:0}#studioLayout details{margin:0;min-width:180px;border:0;padding:0}#studioLayout details[open]{min-width:250px}#studioLayout .studio-plan-note{display:none}.studio-planning #studioContext{top:198px;left:8px;max-width:calc(100% - 16px)}.studio-planning #studioHint{top:138px}.studio-planning #studioMessage{bottom:192px;left:10px}}
@media(max-width:500px){.studio-planning #studioContext{top:250px}.studio-planning #studioHint{top:194px}#studioContext strong{max-width:95px}#studioUI #studioContext button{font-size:12px;padding:7px 5px}#studioLayout{height:155px}#studioLayout .studio-source{width:110px;min-width:110px}}

@media(min-width:501px) and (max-width:899px){
 .studio-top{display:flex;flex-wrap:wrap}.studio-top>div:first-child{flex:1 0 calc(100% - 100px);order:0}.studio-top #studioClose{order:1;margin-left:auto}.studio-range{order:2;margin-right:auto}.studio-top #studioCreate,.studio-top #studioBack{order:3}.studio-top #studioUndo{order:4}
}
@media(max-width:899px){#studioLayout>details{align-self:flex-start}#studioLayout>details[open]{max-height:135px;overflow:auto}#studioItems{align-items:flex-start}}
.studio-planning #studioMessage{top:96px;bottom:auto;left:20px;right:auto;max-width:265px;font-size:12px}
@media(max-width:899px){.studio-planning #studioMessage{top:171px;left:10px;right:10px;max-width:calc(100% - 20px)}}
@media(max-width:500px){.studio-planning #studioMessage{top:145px}}

#studioDrawing .studio-wall-hit,#studioDrawing .studio-wall-edge{cursor:pointer}.studio-wall-edge:focus-visible{filter:drop-shadow(0 0 5px #b5870d)}#studioMeasurements .studio-wheel-hint{background:#edf1e6;padding:10px;border-radius:8px;font-size:14px;color:#354f3f}#studioMeasurements input:focus{border-color:#a6801d;outline:3px solid #dfc67780}#studioContext{flex-wrap:wrap}.studio-planning #studioContext{max-width:calc(100% - 330px)}@media(max-width:899px){.studio-planning #studioContext{max-width:calc(100% - 16px)}}

#studioDrawing .studio-measure{cursor:ns-resize}#studioDrawing .studio-measure.is-active{filter:drop-shadow(0 2px 5px #173b3038)}
/* The layout stays in the showroom; this tray belongs only to the arrangement stage. */
.studio-layout-tabs{display:flex;gap:6px;margin-bottom:12px}.studio-layout-tabs button{flex:1}#studioProductsPane,#studioFinishPane{min-width:0}#studioTryExample{width:100%;margin-top:16px}#studioPaint{border-left:18px solid #e5e2d8}#studioPaintAll{font-size:12px;min-height:34px;padding:7px 8px;width:100%}#studioBoardNote{font-size:12px;margin:8px 0 12px}#studioFinishPane .studio-finish{min-height:44px}#studioFinishes{gap:7px}.studio-cut-wall,.studio-cut-edge{cursor:pointer}.studio-raised-item{cursor:grab}.studio-raised-item:focus-visible{filter:drop-shadow(0 0 4px #ba8c24)}#studioDrawing .studio-raised-item polygon{stroke-linejoin:round}
@media(max-width:899px){#studioLayout{height:235px;display:block;padding:10px;overflow:auto}.studio-layout-tabs{position:sticky;top:-10px;background:#fffef8;z-index:2;padding:2px 0 7px;margin:0 0 8px;max-width:300px}#studioProductsPane{display:flex;align-items:flex-start;gap:12px}#studioLayout #studioProductsPane .studio-source{display:block;width:135px;min-width:135px}#studioItems{display:flex}#studioTryExample{margin:0;min-width:110px;width:110px}#studioFinishPane{display:grid;grid-template-columns:155px minmax(180px,1fr);gap:12px}#studioFinishPane[hidden],#studioProductsPane[hidden]{display:none!important}#studioFinishPane>label{margin:0}#studioWallFinishControls{grid-row:1/3;grid-column:2}#studioWallFinishControls label{margin:0 0 8px}#studioFinishes{grid-column:1;grid-row:2;max-height:260px;overflow:auto}.studio-planning #studioContext{top:192px}.studio-planning #studioMessage{top:auto;bottom:262px;max-width:calc(100% - 20px)}}
@media(max-width:500px){#studioLayout{height:240px}#studioFinishPane{grid-template-columns:130px minmax(150px,1fr)}.studio-planning #studioContext{top:251px}.studio-planning #studioMessage{bottom:268px}#studioContext strong{max-width:130px}#studioExampleBack{max-width:140px}}

@media(min-width:900px){.studio-layout-tabs{position:sticky;top:-16px;z-index:2;background:#fffef8;padding:5px 0 10px}}

#studioRealCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#studioDrawing{position:relative;z-index:1}
.studio-realistic #studioDrawing>.studio-plan-bg,.studio-realistic #studioDrawing>polygon,.studio-realistic #studioDrawing>g:not([data-kind]):not([data-layer]){opacity:0;pointer-events:none}
.studio-realistic #studioDrawing .studio-cut-wall,.studio-realistic #studioDrawing .studio-cut-opening,.studio-realistic #studioDrawing .studio-raised-item{opacity:0}
.studio-realistic #studioDrawing .studio-cut-edge line{stroke-opacity:.1}
.studio-realistic #studioDrawing .studio-cut-edge:focus-visible{opacity:1}
@media(min-width:900px){#studioLayout{width:245px}.studio-planning #studioContext{left:290px}}

#studioRenderStatus{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);padding:7px 12px;background:#fffef5;border-radius:7px;color:#354a3d;font:13px Arial;z-index:2;pointer-events:none}

.studio-realistic #studioDrawing .studio-cut-wall{opacity:1}.studio-realistic #studioDrawing .studio-cut-wall>path{fill-opacity:0;stroke-opacity:0}.studio-realistic #studioDrawing .studio-cut-wall>g{opacity:0}.studio-realistic #studioDrawing .studio-cut-wall[data-selected=true]>path{stroke-opacity:0}

.studio-real-wall-highlight{display:none}.studio-realistic .studio-real-wall-highlight{display:block}

#studioProductTitle{display:block;margin:10px 0;line-height:1.45;font-size:15px}#studioProductSplash h3{font:18px Georgia,serif;margin:16px 0 6px}#studioProductBoards{display:grid;gap:8px}#studioUI #studioProductBoards .studio-finish{min-height:48px;font-size:14px}#studioProductBoards button[aria-pressed=true]{background:#294d3b;color:#fff;border-color:#294d3b;box-shadow:inset 3px 0 #b59a53}
@media(min-width:600px) and (max-width:899px){#studioProductSettings:not([hidden]){display:grid;grid-template-columns:165px minmax(0,1fr);gap:0 14px}#studioProductTitle{grid-column:1;grid-row:1;margin:0}#studioBathHandLabel{grid-column:1;grid-row:2}#studioProductSplash{grid-column:2;grid-row:1/4}#studioProductSplash h3{margin:0;font-size:17px}#studioLayout #studioProductSplashNote{margin:5px 0 8px;line-height:18px}#studioProductBoards{grid-template-columns:1fr 1fr;gap:7px}}

/* Preserve the showroom around the working room while separating the model gently. */
.studio-planning #studioOverlay::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 65% 54%,#efeee9d9 0%,#efeee980 45%,#efeee918 78%);pointer-events:none}
.studio-planning #studioHint,.studio-planning #studioSaved{background:#fffef8ed;border-radius:7px;padding:7px 10px}
#studioUI .studio-paint-field{margin:10px 0;font-size:14px}
#studioUI #studioPaint{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:5px;border:1px solid #bdc9bb;padding:8px;min-height:46px}
#studioPaintName{flex:1;font-size:13px}
.studio-paint-chip{display:inline-block;width:28px;height:28px;border-radius:5px;border:1px solid #0002;flex:none}
#studioPaintOptions{position:fixed;z-index:1000;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#fffef8;border:1px solid #a9b8a5;border-radius:10px;padding:5px;box-sizing:border-box;box-shadow:0 8px 28px #1f372633}
#studioUI #studioPaintOptions button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;min-height:44px;padding:7px;font-size:13px}
#studioUI #studioPaintOptions button[aria-selected="true"]{background:#e9efdf;font-weight:600}
#studioUI #studioPaintOptions button[aria-selected="true"]::after{content:"✓";margin-left:auto}
#studioUI #studioPaintOptions button:focus-visible{outline:2px solid #a58531;outline-offset:-2px;background:#f4edda}
@media(max-width:899px){#studioUI .studio-paint-field{margin:0 0 8px}.studio-planning #studioOverlay::before{background:radial-gradient(ellipse at 50% 45%,#efeee9dc,#efeee970 50%,#efeee918 80%)}}

.studio-planning #studioSaved{width:fit-content;left:50%;transform:translateX(-50%);white-space:nowrap}

.studio-floor-scale{display:block;font-size:11px;color:#68725e;margin-top:3px}
#studioUI .studio-finish[aria-pressed="true"] .studio-floor-scale{color:#e2eadc}

/* A matched-camera showroom is fully opaque; keep the fallback calm while it loads. */
.studio-setting #studioOverlay::before{background:#e9e7df}
.studio-setting .studio-top strong{font-size:22px}
@media(max-width:899px){.studio-setting .studio-top strong{font-size:20px}}

.studio-realistic .studio-cut-opening[data-hidden-wall=true]{opacity:1}
.studio-outline #studioDrawing>.studio-wall-hit polygon{pointer-events:auto}

/* Wall highlights are reserved for room sizing. */
#studioDrawing .studio-wall-feedback{opacity:0;transition:opacity .12s}
.studio-sizing #studioDrawing .studio-wall-hit:hover .studio-wall-surface,
.studio-sizing #studioDrawing .studio-wall-hit:focus-visible .studio-wall-surface{fill:#d3b35324}
#studioDrawing .studio-wall-hit[data-selected=true] .studio-wall-surface{fill:#d3b35330}
.studio-sizing #studioDrawing :is(.studio-wall-hit,.studio-wall-edge):is(:hover,:focus-visible,[data-selected=true]) .studio-wall-feedback{opacity:1}
.studio-sizing .studio-realistic #studioDrawing .studio-cut-wall:is(:hover,:focus-visible)>path{fill:#d3b353;fill-opacity:.12;stroke:#b1974c;stroke-opacity:.7}
.studio-realistic #studioDrawing .studio-cut-wall[data-selected=true]>path{fill:#d3b353;fill-opacity:.1;stroke:#b1974c;stroke-opacity:.8}
.studio-realistic #studioDrawing .studio-cut-edge line{stroke-opacity:.6}
.studio-sizing .studio-realistic #studioDrawing .studio-cut-edge:is(:hover,:focus-visible,[data-selected=true]) line:first-child{stroke:#b1974c;stroke-opacity:1;stroke-width:4}

/* First showroom release: a single clear range, without a redundant selector. */
.studio-top .studio-range{display:flex;align-items:center;min-height:32px;margin:0;padding:6px 10px;border-radius:6px;background:#e9efdf;color:#34553d;font-size:12px;white-space:nowrap}
#studioShortcut{cursor:pointer;min-height:44px}#studioShortcut:disabled{cursor:wait;opacity:.65}
#studioShortcut:focus-visible{outline:3px solid #c49b37;outline-offset:2px}

/* Same physical signage while detailed graphics load, or if WebGL is unavailable. */
#studioSign{height:200px;display:flex;flex-direction:column;justify-content:center;gap:22px;background:#303b3c;font-size:52px}#studioSign small{font-size:24px;letter-spacing:.02em}
#studioPlaque{background:#294d3b;color:#fffdf3;text-shadow:none}
.studio-realistic #studioSign,.studio-realistic #studioPlaque,.studio-realistic .studio-frontage-fallback{visibility:hidden}

/* The lightweight frontage uses the same charcoal and gold as Grand. */
#studioSign{background:#252a2b;color:#c49b67}#studioSign small{color:#f1eee3}#studioPlaque{background:#cbb58d;color:#252a2b;border-color:#776b54}

/* Match Grand's current live plaque, including the shared-column position. */
#studioPlaque{width:296px;height:196px;background:#536354;color:#fffdf5;border:2px solid #806f60;font:26px/1.13 Georgia,serif;padding:22px 16px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:14px}
#studioPlaque small{font:16px/1 Arial,sans-serif;color:#f4f1e8}#studioPlaque:after{display:none}
#studioRetryDetails{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);pointer-events:auto;z-index:3;min-height:44px;padding:10px 16px;border:1px solid #a4b19d;border-radius:8px;background:#fffef5;color:#294537;font:14px Arial,sans-serif;cursor:pointer}
#studioRetryDetails:focus-visible{outline:3px solid #c49b37;outline-offset:2px}

#studioSign[hidden],#studioPlaque[hidden]{display:none!important}

/* Offer reframing only when the resized room reaches the edge. Measuring never moves the camera. */
#studioFitView{position:absolute;right:20px;bottom:32px;pointer-events:auto}
@media(max-width:899px){.studio-planning #studioFitView{bottom:282px;right:12px}}

/* Welcome blind on arrival, projected within the native Studio opening. */
#studioWelcome{position:absolute;left:0;top:0;width:800px;height:666.6667px;transform-origin:0 0;backface-visibility:hidden;overflow:hidden;pointer-events:none}
/* Reuse Grand 3's native closed-frame render, including all four rebates. */
#studioWelcomeSheet{box-sizing:border-box;height:100%;padding:76px 68px 80px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;background:#303737 url('../clarity-v1/pricing/grand-3.webp?revision=pricing-frame-1') center/100% 100% no-repeat;color:#e3c77f;transform:translateY(0);transition:transform .45s cubic-bezier(.4,0,.2,1);font-family:Arial,Helvetica,sans-serif}
#studioWelcome h2{font:normal 66px/1.07 Georgia,serif;letter-spacing:-.02em;margin:26px 0 28px;color:#e3c77f}
#studioWelcome p{font-size:28px;line-height:1.5;margin:0}
#studioWelcome #studioWelcomeInstruction{display:flex;align-items:center;justify-content:center;gap:14px;font-size:25px;font-weight:600;margin:28px 0 37px;width:100%}
#studioWelcomeInstruction .studio-welcome-arrow{display:inline-block;flex:none;font-size:40px;line-height:1;transform:rotate(-25deg);transform-origin:center}
#studioWelcome #studioWelcomeTagline{display:flex;justify-content:center;flex-wrap:wrap;column-gap:38px;row-gap:10px;width:100%}
#studioWelcomeTagline span{white-space:nowrap}
#studioWelcome.is-raising #studioWelcomeSheet{transform:translateY(-101%)}
#studioWelcomeCue{position:absolute;left:0;top:0;width:300px;height:200px;transform-origin:0 0;pointer-events:none;opacity:0;border-radius:3px;background:#dfbd7020;box-shadow:0 0 35px 12px #dfbd7088}
#studioWelcomeCue.is-cued{animation:studio-welcome-plaque 1.1s ease-in-out 1}
@keyframes studio-welcome-plaque{0%,100%{opacity:0}45%,60%{opacity:1}}
#studioReview{box-sizing:border-box;position:absolute;left:0;top:0;width:800px;height:666.6667px;transform-origin:0 0;backface-visibility:hidden;overflow:hidden;pointer-events:auto;color:#e3c77f;font:18px/1.35 Arial,sans-serif;z-index:4;touch-action:pan-y}
#studioReviewSheet{user-select:none;-webkit-user-select:none;position:absolute;inset:0;overflow:hidden;background:#303737 url('../clarity-v1/pricing/grand-3.webp?revision=pricing-frame-1') center/100% 100% no-repeat}
#studioReviewContent{position:absolute;inset:50px 48px 48px;display:flex;flex-direction:column;min-height:0}

#studioReview[hidden]{display:none!important}#studioReview *{box-sizing:border-box}#studioReview h2{font:34px/1.1 Georgia,serif;margin:5px 0 0;color:#e3c77f}#studioReview p{margin:0 0 10px}#studioReview button,#studioReview input{font:inherit;border-radius:4px;min-height:48px;padding:10px 15px;border:1px solid #b49a55}#studioReview button{cursor:pointer;background:#dfbd70;color:#263033;font-weight:600}#studioReview button:disabled{opacity:.55;cursor:default}#studioReview input{background:#252e30;color:#f7edcf;min-width:0}#studioReview input::placeholder{color:#c4c3b7}#studioReview :focus-visible{outline:3px solid #f1d88f;outline-offset:2px}
.studio-review-head{display:flex;align-items:center;gap:14px;padding:10px 8px 16px;border-bottom:1px solid #b49a5560;flex-shrink:0}.studio-review-head>div{flex:1}.studio-review-eyebrow{font-size:12px;letter-spacing:.12em}#studioReview #studioReviewEdit{background:transparent;color:#e3c77f;font-size:16px}
#studioReviewScroll{touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:14px 8px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#b49a55 #252e30;scrollbar-gutter:stable}#studioReviewRange{font-weight:600}#studioReviewProducts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.studio-review-product{padding:12px 0;border-top:1px solid #b49a5530;min-width:0}#studioReview .studio-review-product h3{font:600 14px/1.3 Arial,sans-serif;color:#e3c77f;margin:0 0 10px}.studio-review-choice{display:flex;align-items:center;gap:12px}.studio-review-choice+.studio-review-choice{margin-top:14px}.studio-review-circle{display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #b49a5570;color:#536263}.studio-review-circle img{display:block;width:100%;height:100%;object-fit:contain;padding:8px}.studio-review-product[data-category="bath"] .studio-review-circle img{padding:0;object-fit:cover}.studio-review-circle.is-swatch img{object-fit:cover;padding:0}.studio-review-circle svg{width:42px;height:42px}.studio-review-copy{min-width:0;overflow-wrap:anywhere}.studio-review-copy strong,.studio-review-copy>span{display:block}.studio-review-copy strong{font-size:17px;line-height:1.3;font-weight:600}.studio-review-copy>span{font-size:13px;line-height:1.4;color:#d6d0bb;margin-top:4px}

.studio-review-cue{text-align:center;font-size:13px;padding:8px 5px;flex-shrink:0;color:#dfbd70;border-bottom:1px solid #b49a5560;background:#2b3435}#studioReviewForm{padding:24px 0 14px;border-top:1px solid #b49a5560;margin-top:20px}#studioReviewForm>label{font:24px Georgia,serif}#studioReviewForm>p{font-size:14px;color:#d6d0bb;margin:5px 0 10px}.studio-review-send{display:flex;gap:10px}.studio-review-send input{flex:1}#studioReviewForm>a{color:#d6d0bb;font-size:12px}#studioReviewStatus{font-size:14px;margin:8px 0 4px;line-height:1.35}.studio-review-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){#studioWelcomeSheet{transition:none}#studioWelcomeCue{animation:none!important;display:none}}

/* The walkthrough sits over the room, without catching room gestures. */
#studioTutorial{position:absolute;inset:0;z-index:12;pointer-events:none;color:#f8f1dc;font:14px/1.45 Arial,sans-serif}#studioTutorial[hidden]{display:none!important}#studioTutorialDrawing{position:absolute;width:100%;height:100%;inset:0;overflow:hidden;pointer-events:none}#studioTutorialCard{position:absolute;right:18px;bottom:35px;width:315px;max-width:calc(100% - 32px);box-sizing:border-box;background:#293536f5;border:1px solid #bda365;border-radius:10px;box-shadow:0 6px 22px #0003;padding:14px 16px;pointer-events:auto}#studioTutorial h2{font:23px/1.15 Georgia,serif;color:#e3c77f;margin:9px 0}#studioTutorial p{margin:0 0 12px}.studio-tutorial-heading,.studio-tutorial-actions{display:flex;gap:9px;align-items:center;justify-content:space-between}#studioTutorialCount{font-size:10px;letter-spacing:.12em;color:#e3c77f}#studioTutorial button{font:13px Arial,sans-serif;min-height:44px;padding:8px 12px;cursor:pointer;border-radius:5px;border:1px solid #bda365;background:transparent;color:#f8f1dc}#studioTutorialSkip{margin:-8px -6px -8px 0;border-color:transparent!important}#studioTutorialNext{background:#dfbd70!important;color:#263033!important;font-weight:600!important}#studioTutorial :focus-visible{outline:3px solid #f4dc9a;outline-offset:2px}#studioTutorialProgress{display:flex;gap:5px;margin-right:auto}#studioTutorialProgress i{width:6px;height:6px;border-radius:50%;background:#778077}#studioTutorialProgress i.is-current{background:#e3c77f}.studio-tutorial-running #studioHint{visibility:hidden}.studio-tutorial-target{outline:3px solid #dfbd70!important;outline-offset:4px}.studio-tutorial-wall{fill:#e3c77f13;stroke:#e3c77f;stroke-width:2;stroke-dasharray:7 5}.studio-tutorial-wall.is-sizing{animation:studio-demo-wall 3.5s ease-in-out infinite}.studio-tutorial-finger,.studio-tutorial-mouse{fill:#fff9e8;stroke:#66522a;stroke-width:1.5;stroke-linejoin:round}.studio-tutorial-touch-ring{fill:#e3c77f33;stroke:#e3c77f;stroke-width:2;animation:studio-demo-tap 1.6s infinite}.studio-tutorial-gesture.tap{animation:studio-demo-tap 1.6s infinite}.studio-tutorial-gesture.slide{animation:studio-demo-slide 2s infinite}.studio-tutorial-wheel{stroke:#96732b;stroke-width:4;stroke-linecap:round;animation:studio-demo-slide 1s infinite}.studio-tutorial-product{animation:studio-demo-product 3.5s ease-in-out infinite}.studio-tutorial-arrow{fill:none;stroke:#e3c77f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.is-paused #studioTutorialDrawing *{animation-play-state:paused!important}
#studioPlaqueHit{z-index:5;touch-action:manipulation}#studioPlaqueHit.studio-review-ready{cursor:pointer}#studioPlaqueHit.studio-review-ready:focus-visible{outline:2px solid #80621a;outline-offset:2px;background:transparent}
#studioReview.is-lowering #studioReviewSheet{animation:studio-review-lower .42s cubic-bezier(.25,.6,.3,1) both}
@keyframes studio-review-lower{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes studio-demo-tap{0%,55%,100%{opacity:1;transform:translateY(0)}70%{opacity:.55;transform:translateY(3px)}}
@keyframes studio-demo-slide{0%,20%,100%{transform:translateY(0)}55%,70%{transform:translateY(-23px)}}
@keyframes studio-demo-wall{0%,15%,100%{transform:translateY(0)}55%,75%{transform:translateY(12px)}}
@keyframes studio-demo-product{0%,14%{transform:translate(0,0);opacity:0}22%{opacity:1}75%,88%{transform:translate(var(--studio-demo-x),var(--studio-demo-y));opacity:1}100%{transform:translate(var(--studio-demo-x),var(--studio-demo-y));opacity:0}}
@media(max-width:899px){#studioTutorialCard{right:12px;bottom:22px;width:310px;padding:12px 14px}.studio-planning #studioTutorialCard{bottom:auto;top:135px}#studioTutorial h2{font-size:21px}}
@media(max-width:599px){#studioTutorialCard{left:8px;right:8px;bottom:22px;width:auto;max-width:none;padding:10px 13px}#studioTutorial h2{font-size:21px;margin:6px 0}#studioTutorial p{font-size:13px;margin-bottom:8px}#studioTutorial .studio-tutorial-heading{min-height:26px}#studioTutorialPause{font-size:12px}#studioHelp{font-size:12px!important;padding:8px!important}}
@media(prefers-reduced-motion:reduce){#studioTutorialDrawing *{animation:none!important}#studioReview.is-lowering #studioReviewSheet{animation:none!important}}

/* Colour choices stay with their wall controls and remain open while scrolling. */
#studioUI #studioPaintOptions{position:relative;left:auto;top:auto;width:100%;max-height:240px;margin-top:6px;z-index:3;box-shadow:none}
#studioUI #studioPaintOptions button{min-height:44px}
#studioHiddenWall{margin:8px 0 12px}#studioLayout #studioHiddenWall p{font-size:12px;line-height:1.4;margin:0 0 7px;color:#50654e}
#studioWallPreview{display:block;width:100%;height:90px;max-width:200px;background:#f1f2e9;border-radius:5px}

/* The catalogue uses the same pointer gesture on mouse, pen and touch. */
#studioUI .studio-item-card{cursor:grab;-webkit-user-select:none}
#studioUI .studio-item-card:active{cursor:grabbing}
#studioItems img{-webkit-user-drag:none;user-select:none}
.studio-item-ghost{transform:none;display:flex;align-items:center;gap:10px;width:260px;max-width:calc(100vw - 16px);box-sizing:border-box;padding:10px 12px;border:2px solid #c6a953;background:#fffef8;color:#263a2c;line-height:1.35}
.studio-item-ghost img{width:44px;height:44px;object-fit:contain;border-radius:4px;background:#fff}
.studio-item-ghost small{display:block;margin-top:4px;font-size:12px;font-weight:600}
.studio-item-ghost[data-valid="true"]{border-color:#4d7255}
.studio-item-ghost[data-valid="false"]{border-color:#b5afa0}

/* Compact Studio: give the bathroom the working area; tools open on demand. */
/* A single thumb-sized reel, shown only for the selected wall on touch screens. */
#studioMeasureWheel{position:absolute;z-index:8;bottom:18px;left:50%;transform:translateX(-50%);width:196px;padding:8px 10px 7px;box-sizing:border-box;border:1px solid #bda365;border-radius:12px;background:#293536;color:#fff9e9;box-shadow:0 4px 16px #0003;pointer-events:auto;text-align:center;user-select:none;-webkit-user-select:none}
#studioMeasureWheel[hidden]{display:none!important}.studio-wheel-label{display:block;font-size:12px;color:#e3c77f;line-height:18px}.studio-wheel-reel{position:relative;height:104px;overflow:hidden;touch-action:none;cursor:ns-resize;overscroll-behavior:none;border-radius:6px;outline-offset:2px}
.studio-wheel-reel:focus-visible{outline:2px solid #e3c77f}.studio-wheel-band{position:absolute;inset:35px 2px;border-top:1px solid #dfbd7080;border-bottom:1px solid #dfbd7080;background:#dfbd7010;border-radius:4px;pointer-events:none}
.studio-wheel-numbers{position:absolute;inset:0;pointer-events:none;mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.studio-wheel-numbers span{position:absolute;left:0;right:0;top:36px;line-height:32px;height:32px;font-size:17px;font-variant-numeric:tabular-nums;color:#bfc8c0;transition:transform 120ms ease-out}.studio-wheel-numbers span.is-selected{font-size:23px;font-weight:600;color:#fff5d8}.is-rolling .studio-wheel-numbers span{transition:none}
#studioWheelHelp{display:block;font-size:10px;line-height:13px;color:#d0d5cb}.studio-wheel-open #studioMessage{bottom:182px!important;top:auto!important}.studio-wheel-open #studioTutorialCard{bottom:182px}
@media(min-width:600px) and (max-width:899px){.studio-compact-landscape #studioMeasureWheel{left:9px;bottom:18px;transform:none;width:182px}.studio-wheel-open.studio-compact-landscape #studioContext{bottom:184px}.studio-wheel-open.studio-compact-landscape #studioTutorialCard{bottom:18px;left:210px;right:12px;width:auto}}
@media(prefers-reduced-motion:reduce){.studio-wheel-numbers span{transition:none}}
.studio-actions{display:contents}
#studioCatalogToggle{display:none}
@media(max-width:899px){
 .studio-setting .studio-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;top:8px;left:8px;right:8px;padding:8px}
 .studio-setting .studio-top>div:first-child{margin:0;min-width:0}.studio-setting .studio-top strong{font-size:19px}
 .studio-setting .studio-top span{font-size:11px}.studio-setting .studio-top .studio-range{padding:5px 7px;font-size:11px;min-height:28px}
 .studio-setting .studio-actions{display:flex;grid-column:1/-1;gap:6px;max-width:100%;overflow-x:auto;align-items:center}
 #studioUI .studio-actions button{flex:none;order:0;min-height:44px;font-size:12px;padding:7px 9px;margin:0;white-space:nowrap}
 #studioUI .studio-actions #studioClose{position:static;order:-1;margin:0}
 .studio-setting #studioHint,.studio-setting.studio-planning #studioHint{top:120px;left:8px;right:8px;max-width:calc(100% - 16px);font-size:12px;line-height:1.35;padding:4px 8px}
 .studio-setting #studioContext,.studio-setting.studio-planning #studioContext{top:159px;left:8px;right:auto;max-width:calc(100% - 16px);gap:4px;padding:4px 6px}
 #studioUI #studioContext button{min-height:36px;padding:6px 8px}
 #studioCatalogToggle{display:block;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);pointer-events:auto;white-space:nowrap;z-index:5;background:#294d3b;color:#fffef5;min-height:44px}
 .studio-setting #studioLayout{bottom:72px;left:8px;right:8px;top:auto;width:auto;height:min(235px,42%);visibility:hidden;pointer-events:none;z-index:4}
 .studio-setting #studioLayout.is-open{visibility:visible;pointer-events:auto}
 .studio-setting #studioMessage,.studio-setting.studio-planning #studioMessage{top:auto;bottom:70px;left:8px;right:8px;max-width:calc(100% - 16px);font-size:12px}
 .studio-setting #studioFitView,.studio-setting.studio-planning #studioFitView{bottom:72px;right:12px}
 .studio-setting #studioSaved{bottom:2px;font-size:10px}
}
@media(min-width:600px) and (max-width:899px){
 .studio-setting.studio-compact-landscape .studio-top{left:8px;right:auto;width:184px;display:block;max-height:calc(100% - 145px);overflow-y:auto}
 .studio-setting.studio-compact-landscape .studio-top .studio-range{display:none}.studio-setting.studio-compact-landscape .studio-top>div:first-child{margin-bottom:6px}
 .studio-setting.studio-compact-landscape .studio-actions{flex-wrap:wrap;gap:5px}
 .studio-compact-landscape #studioUI .studio-actions button{min-height:38px;font-size:12px;padding:6px 8px}
 .studio-setting.studio-compact-landscape #studioHint,.studio-setting.studio-planning.studio-compact-landscape #studioHint{top:10px;left:210px;right:12px;max-width:calc(100% - 222px)}
 .studio-setting.studio-compact-landscape #studioContext,.studio-setting.studio-planning.studio-compact-landscape #studioContext{top:auto;bottom:72px;left:8px;max-width:184px}
 .studio-setting.studio-compact-landscape #studioLayout{left:210px;height:min(235px,65%)}
 .studio-compact-landscape #studioCatalogToggle{left:auto;right:16px;transform:none}
 .studio-setting.studio-compact-landscape #studioMessage,.studio-setting.studio-planning.studio-compact-landscape #studioMessage{left:210px;right:12px;max-width:calc(100% - 222px)}
}

@media(min-width:600px) and (max-width:899px){
 .studio-setting.studio-wheel-open.studio-compact-landscape .studio-top{max-height:calc(100% - 196px)}
 .studio-setting.studio-wheel-open.studio-compact-landscape #studioContext{left:210px;top:48px;bottom:auto;max-width:calc(100% - 222px)}
}

/* Catch only the empty area around the phone summary; the form scrolls normally. */
#studioReviewBackdrop{position:absolute;inset:0;z-index:3;border:0;border-radius:0;background:transparent;pointer-events:auto;touch-action:none;padding:0}
#studioReviewBackdrop[hidden]{display:none!important}

/* Finishes need a browsable sheet, not a narrow list nested inside the tray.
   Keep product placement compact; expand only the finish / product options. */
@media(max-width:899px){
 .studio-setting #studioLayout[data-pane="boards"],
 .studio-setting #studioLayout[data-pane="finishes"],
 .studio-setting #studioLayout[data-pane="item"]{
  height:min(520px,75%,calc(100% - 88px));
  padding:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scroll-padding-top:66px;
 }
 #studioLayout .studio-layout-tabs{max-width:none;top:-12px;padding:2px 0 10px}
 #studioLayout #studioFinishPane,
 #studioLayout #studioProductSettings:not([hidden]){display:block;min-width:0}
 #studioLayout #studioFinishPane>label{display:block;margin:0 0 14px}
 #studioLayout #studioWallFinishControls{grid-area:auto;min-width:0}
 #studioLayout #studioFinishes,
 #studioLayout #studioBoardChoices,
 #studioLayout #studioProductBoards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;
  grid-auto-rows:max-content;align-content:start;align-items:stretch;
  max-height:none;overflow:visible;grid-area:auto;padding:4px 2px 12px;
 }
 #studioUI #studioLayout .studio-finish{
  display:block;height:auto;max-height:none;margin:0;overflow:hidden;
  min-width:0;min-height:156px;padding:10px;font-size:14px;line-height:1.4;
  white-space:normal;overflow-wrap:anywhere;touch-action:pan-y;
 }
 #studioLayout .studio-finish img{display:block;width:100%;max-width:100%;height:96px;margin:0 0 10px;object-fit:cover;border-radius:5px}
 #studioLayout .studio-finish>span{display:block;width:100%;min-width:0;white-space:normal;line-height:1.4}
 #studioUI #studioLayout .studio-finish-none{grid-column:1/-1;min-height:44px;justify-content:center}
 #studioLayout .studio-floor-scale{font-size:12px;line-height:1.4;margin-top:6px}
 #studioUI #studioPaintOptions{max-height:none;overflow:visible}
 #studioUI #studioPaintOptions button{min-height:54px;font-size:14px;padding:9px;touch-action:pan-y}
 #studioPaintOptions .studio-paint-chip{width:36px;height:36px}
 #studioLayout #studioProductTitle{margin:4px 0 12px}
 #studioLayout #studioProductSplash h3{margin:14px 0 6px}
}
@media(min-width:600px) and (max-width:899px){
 #studioLayout #studioFinishes,#studioLayout #studioBoardChoices,
 #studioLayout #studioProductBoards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .studio-compact-landscape #studioLayout #studioFinishPane>label{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:10px}
 .studio-compact-landscape #studioFinishTarget{margin-top:0}
}

/* Bath infill uses the existing selection and measurement controls. */
#studioBulkheads{margin-top:18px;border-top:1px solid #d7ddd7;padding-top:10px}
#studioBulkheads h3{font-size:15px;margin:10px 0}#studioBulkheads p,#studioBulkheads small{font-size:12px;line-height:1.5}
.studio-bulkhead-choices{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.studio-bulkhead-choices button{flex:1 1 42%;min-height:44px}
#studioBulkheads button[aria-pressed=true]{border-color:#8b722c;background:#f3ebd2;color:#253e32}
.studio-bulkhead-size{display:grid;gap:8px;margin:14px 0;padding:12px;border:1px solid #d5ddd4;border-radius:10px}
.studio-bulkhead-size>button{text-align:left}.studio-bulkhead-size .studio-bulkhead-choices{margin:0}
.studio-bulkhead-paints summary{padding:12px 0;cursor:pointer}.studio-bulkhead-swatches{display:grid;gap:8px}.studio-bulkhead-swatches button{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px}
.studio-bulkhead-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin:12px 0 18px;align-items:start}
.studio-bulkhead-boards .studio-finish{display:block;height:auto;min-width:0;overflow:hidden;padding:8px;white-space:normal}
.studio-bulkhead-boards img{display:block;width:100%;height:90px;object-fit:cover;margin-bottom:8px}.studio-bulkhead-boards span{display:block;overflow-wrap:anywhere;font-size:13px;line-height:1.4}
.studio-bulkhead-face{cursor:pointer}.studio-realistic .studio-bulkhead-face>polygon{fill-opacity:0;stroke-opacity:0}.studio-realistic .studio-bulkhead-face>g{opacity:0;pointer-events:none}
.studio-realistic .studio-bulkhead-face:is(:hover,:focus-visible,[data-selected=true])>polygon:first-child{fill:#d3b353;fill-opacity:.1;stroke:#b1974c;stroke-opacity:.8}
/* Bath-end preview keeps the working view clear; finishes open only on request. */
#studioBulkheadView[hidden]{display:none!important}
#studioBulkheadView{position:absolute;z-index:9;top:14px;left:18px;right:18px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #bda365;border-radius:10px;background:#293536f5;color:#fff9e9;pointer-events:auto}
#studioBulkheadView strong{font:20px Georgia,serif;margin-right:auto}#studioBulkheadEnds{display:flex;gap:6px}
#studioBulkheadView button{min-height:44px;font-size:14px}#studioBulkheadView button[aria-pressed=true]{background:#ead59b;border-color:#bda365;color:#293536}
.studio-bulkhead-view .studio-top,.studio-bulkhead-view #studioContext,.studio-bulkhead-view #studioHint,.studio-bulkhead-view #studioCatalogToggle,.studio-bulkhead-view #studioFitView{display:none!important}
.studio-bulkhead-view:not(.studio-bulkhead-finishes) #studioLayout{display:none!important}
.studio-bulkhead-view #studioSaved{display:none}.studio-bulkhead-view #studioMessage{bottom:210px;left:12px;right:12px;font-size:14px}
.studio-bulkhead-view #studioLayout{z-index:10;top:82px;bottom:20px;max-height:calc(100% - 102px)}
.studio-bulkhead-view #studioLayout .studio-layout-tabs{display:none!important}
.studio-bulkhead-view #studioMeasureWheel{bottom:16px;left:50%;transform:translateX(-50%)}
@media(max-width:899px){
 #studioBulkheadView{top:8px;left:8px;right:8px;flex-wrap:wrap;padding:8px;gap:5px}
 #studioBulkheadView strong{font-size:18px;flex:1 0 60%}#studioBulkheadDone{margin-left:auto;order:-1}#studioBulkheadView strong{order:-2}
 #studioBulkheadView button{font-size:14px;padding:8px 12px}
 .studio-bulkhead-view #studioLayout{top:auto;bottom:18px;max-height:60%;height:auto}
}
@media(prefers-reduced-motion:no-preference){.studio-bulkhead-view #studioOverlay canvas{animation:studio-close-view .25s ease-out}@keyframes studio-close-view{from{opacity:.2}to{opacity:1}}}
/* Interior trial: retain the familiar catalogue and a single overview switch. */
.studio-inside-view #studioInside{background:#294d3b;color:#fff9e9;border-color:#294d3b}
.studio-inside-view #studioHelp,.studio-inside-view #studioFitView{display:none!important}
.studio-inside-view #studioHint{font-size:14px;pointer-events:none}
.studio-inside-view #studioDrawing{cursor:grab}.studio-inside-view #studioDrawing:active{cursor:grabbing}
.studio-inside-view #studioDrawing>.studio-inside-highlight{opacity:1!important;pointer-events:none!important}
@media(min-width:900px){.studio-inside-view #studioContext{top:auto;bottom:38px;left:300px;right:20px;max-width:calc(100% - 320px);width:fit-content;margin:auto}.studio-inside-view #studioMessage{bottom:92px}}
@media(max-width:899px){.studio-inside-view #studioHint{font-size:12px}.studio-inside-view #studioContext{top:auto!important;bottom:74px;left:8px;right:8px;max-width:calc(100% - 16px);width:fit-content;margin:auto}.studio-inside-view #studioMessage{bottom:125px}.studio-inside-view #studioContext strong{max-width:130px}.studio-inside-view .studio-actions{gap:4px}}
.studio-inside-view .studio-actions #studioInside{order:-2}

/* Inside, the room keeps its full camera frame while tools open over it. */
.studio-inside-view #studioLayout{visibility:hidden;pointer-events:none}
.studio-inside-view #studioLayout.is-open{visibility:visible;pointer-events:auto}
.studio-inside-view #studioCatalogToggle{display:block;position:absolute;bottom:20px;left:20px;transform:none;pointer-events:auto;z-index:5;background:#294d3b;color:#fffef5;min-height:44px}
.studio-inside-view #studioOverlay.studio-placement-blocked .studio-inside-highlight{stroke:#b86142!important}
.studio-inside-view #studioOverlay.studio-looking #studioDrawing,.studio-inside-view #studioOverlay.studio-moving-product #studioDrawing{cursor:grabbing}
@media(min-width:900px){.studio-inside-view #studioContext{left:280px;right:16px;bottom:20px;max-width:calc(100% - 300px)}}
@media(max-width:899px){.studio-inside-view #studioCatalogToggle{left:50%;transform:translateX(-50%)}}

/* Inside-room refinement: a calm, retractable catalogue with legible choices. */
.studio-inside-view #studioHelp:not([hidden]){display:inline-flex!important;align-items:center}
.studio-inside-view #studioUI .studio-review-action{background:#303a38;color:#fff5d9;border-color:#bda365}
.studio-inside-view #studioUndo:disabled{opacity:.45;cursor:default}
.studio-inside-view #studioHint{transition:opacity .3s ease}
.studio-inside-view #studioHint.is-quiet{opacity:0}
.studio-inside-view #studioMessage{top:auto!important;bottom:88px;left:50%;right:auto;transform:translateX(-50%);max-width:min(420px,calc(100% - 32px));width:max-content;padding:9px 14px;border-radius:8px;background:#fffdf5ed;box-shadow:0 3px 14px #0002;font-size:14px;line-height:1.4;text-align:center;pointer-events:none}
.studio-inside-view #studioMessage:empty{display:none}
.studio-inside-view #studioLayout{width:344px;box-sizing:border-box;bottom:78px;padding:16px;border-color:#c5ba9c;box-shadow:0 8px 32px #14221b26;overscroll-behavior:contain;scrollbar-gutter:stable}
.studio-inside-view #studioLayout h2{display:block;font-size:23px;margin-bottom:12px}
.studio-inside-view #studioProductsPane{display:block}
.studio-inside-view #studioLayout #studioProductsPane .studio-source{width:100%;min-width:0;margin:8px 0 16px}
.studio-inside-view #studioLayout select{min-height:44px;font-size:15px}
.studio-inside-view #studioItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.studio-inside-view #studioUI .studio-item-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;min-width:0;height:auto;min-height:0;box-sizing:border-box;margin:0;padding:10px;border:1px solid #d9ddd5;border-radius:9px;background:#fff;white-space:normal;line-height:1.35;overflow:hidden}
.studio-inside-view #studioItems img{width:100%;height:108px;object-fit:contain;border-radius:5px;background:#fff}
.studio-card-copy{display:block;min-width:0}.studio-card-copy strong,.studio-card-finish{display:block}.studio-card-copy strong{font-weight:600}.studio-card-finish{font-size:12px;line-height:1.4;color:#5b635b}.studio-in-room:empty{display:none}
.studio-inside-view .studio-card-copy strong{font-size:14px;line-height:1.4;margin-bottom:4px}
.studio-inside-view .studio-card-finish{font-size:13px;min-height:36px}
.studio-inside-view #studioItems small{font-size:11px;line-height:1.4;margin:6px 0;color:#626b62}
.studio-inside-view .studio-in-room{display:block!important;font-size:11px;min-height:16px;line-height:16px;color:#536445}
.studio-inside-view #studioUI .studio-item-card[data-in-room=true]{border-color:#ac975d;background:#fcfaf2}
.studio-inside-view #studioUI .studio-item-card:is(:focus-visible,.is-held){outline:3px solid #c5a14e;outline-offset:-3px}
@media(hover:hover){.studio-inside-view #studioUI .studio-item-card:hover{border-color:#ad9357;background:#fcfaf2}}
.studio-inside-view #studioTryExample{width:100%;margin-top:16px}
.studio-inside-view #studioLayout .studio-plan-note{display:block;margin:12px 0 2px;line-height:1.5;font-size:12px}
.studio-inside-view #studioContext{gap:7px;padding:8px 10px;box-sizing:border-box}
.studio-inside-view #studioUI #studioContext button{min-height:44px;padding:8px 12px;font-size:14px}
.studio-inside-view #studioContext strong{font-size:14px;white-space:normal;max-width:170px}
.studio-inside-view #studioTutorialCard{top:auto;bottom:90px;right:20px;width:332px}
.studio-inside-view .studio-tutorial-gesture.pan{animation:studio-demo-pan 2.6s ease-in-out infinite}
@keyframes studio-demo-pan{0%,100%{transform:translateX(-30px)}50%{transform:translateX(30px)}}
@media(max-width:899px){
 .studio-inside-view #studioLayout,.studio-inside-view.studio-setting #studioLayout[data-pane]{top:auto;bottom:76px;left:8px;right:8px;width:auto;height:min(560px,62%,calc(100% - 130px));max-height:calc(100% - 130px);padding:14px;overflow-x:hidden;overflow-y:auto;scroll-padding-top:60px}
 .studio-inside-view #studioLayout .studio-layout-tabs{max-width:none;top:-14px;padding-top:5px}
 .studio-inside-view #studioItems{gap:16px}
 .studio-inside-view #studioItems img{height:120px}
 .studio-inside-view #studioMessage{bottom:148px;max-width:calc(100% - 32px)}
 .studio-inside-view #studioTutorialCard{top:auto!important;bottom:80px;left:8px;right:8px;width:auto;max-height:calc(100% - 160px);overflow:auto}
 .studio-inside-view #studioContext{bottom:76px;max-width:calc(100% - 16px)}
 .studio-inside-view #studioUI #studioContext button{padding:8px 10px;font-size:13px}
 .studio-inside-view #studioContext strong{flex:1 0 100%;max-width:none}

}
@media(min-width:600px) and (max-width:899px){.studio-inside-view #studioItems{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-inside-view #studioTutorialCard{left:auto;width:332px}}
@media(max-height:520px) and (min-width:600px){.studio-inside-view #studioLayout,.studio-inside-view.studio-setting #studioLayout[data-pane]{left:8px;right:auto;width:330px;top:80px;bottom:66px;height:auto;max-height:none}.studio-inside-view #studioItems{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-inside-view #studioItems img{height:80px}}
@media(prefers-reduced-motion:reduce){.studio-inside-view #studioHint{transition:none}.studio-inside-view .studio-tutorial-gesture.pan{animation:none}}

.studio-inside-view #studioLayout .studio-plan-note{margin:0 0 14px}

.studio-inside-view.studio-catalog-open #studioContext,.studio-inside-view.studio-catalog-open #studioHint{visibility:hidden}

/* Overview is for checking the room; product choices take customers inside. */
.studio-inside-available.studio-planning #studioLayout{visibility:hidden;pointer-events:none}
.studio-inside-available.studio-planning #studioLayout.is-open{visibility:visible;pointer-events:auto}
.studio-inside-available.studio-planning #studioCatalogToggle{display:block;position:absolute;bottom:20px;left:20px;transform:none;pointer-events:auto;z-index:5;background:#294d3b;color:#fffef5;min-height:44px}
@media(max-width:899px){.studio-inside-available.studio-planning #studioCatalogToggle{left:50%;right:auto;transform:translateX(-50%)}}

/* Keep the reset clear of the touch measurement wheel. */
.studio-editing:not(.studio-planning) #studioFitView{right:16px;bottom:32px;z-index:5}
@media(max-width:899px){.studio-editing:not(.studio-planning) #studioFitView{right:10px;bottom:16px}.studio-wheel-open:not(.studio-planning) #studioFitView{bottom:190px}}

.studio-sizing #studioOverlay,.studio-sizing #studioDrawing .studio-wall-hit,.studio-sizing #studioDrawing .studio-wall-edge{cursor:grab}
.studio-sizing #studioOverlay.is-view-panning,.studio-sizing #studioOverlay.is-view-panning *{cursor:grabbing!important}

/* Adding a window stays visible throughout room sizing, before selecting a wall. */
@media(max-width:899px){#studioUI .studio-actions #studioAddWindow{order:-2}}
.studio-realistic .studio-door-hardware[data-native=true]{display:none}

@keyframes studio-door-corner-fill{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.studio-door-corner-progress{animation:studio-door-corner-fill 750ms linear both}
@media(prefers-reduced-motion:reduce){.studio-door-corner-progress{animation:none;stroke-dashoffset:0}}
#studioDrawing [data-layer=door-corner]{pointer-events:none}

/* Keep the room visible while the camera steps back into the showroom. */
.studio-returning #studioUI,.studio-returning #studioDrawing,.studio-returning #studioPlaqueHit{visibility:hidden}
.studio-returning #studioOverlay{cursor:default}

#studioReview input{user-select:text;-webkit-user-select:text}

/* Bath-end actions stay next to the fitting, outside the product menu. */
#studioBulkheadMarkers{position:absolute;inset:0;pointer-events:none;z-index:3}
#studioBulkheadMarkers[hidden],#studioBulkheadMarkers button[hidden]{display:none!important}
#studioBulkheadMarkers svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
#studioBulkheadMarkers line{stroke:#bda365;stroke-width:1.5}
#studioBulkheadMarkers circle{fill:#e4c578;stroke:#293536;stroke-width:1}
#studioUI .studio-bulkhead-marker{position:absolute;width:140px;min-height:54px;padding:8px 6px;transform:translate(-50%,-50%);pointer-events:auto;touch-action:manipulation;background:#293536f5;color:#fff5da;border:1px solid #d3b775;border-radius:10px;box-shadow:0 3px 12px #0003;text-align:center}
.studio-bulkhead-marker span{display:block;font-size:13px;font-weight:600;line-height:18px;white-space:nowrap}
.studio-bulkhead-marker small{display:block;font-size:11px;line-height:16px;color:#e3c77f}
#studioUI .studio-bulkhead-marker:hover,#studioUI .studio-bulkhead-marker.is-selected{background:#354840;border-color:#efd185}
#studioUI .studio-bulkhead-marker:focus-visible{outline:3px solid #efd185;outline-offset:3px}
@media(min-width:900px){
 .studio-planning:not(.studio-bulkhead-view) #studioMeasureWheel{left:var(--bulkhead-wheel-x,50%);top:var(--bulkhead-wheel-y,auto);bottom:auto;transform:translateX(-50%)}
}
.studio-catalog-open #studioBulkheadMarkers{visibility:hidden}

/* A direct route to attached boards; choices stay spacious on touch screens. */
#studioUI #studioOpenBoards{width:100%;text-align:left;min-height:48px;margin:0 0 14px;border:1px solid #b09a60;background:#f4f0e4;color:#294d3b;white-space:normal;line-height:1.4}
#studioUI #studioOpenBoards[aria-pressed=true]{background:#294d3b;color:#fff}
#studioBoardsPane h3{font:19px Georgia,serif;margin:4px 0 8px}
#studioBoardTargets{display:grid;gap:8px;margin:12px 0}
#studioUI #studioBoardTargets button{min-height:44px;white-space:normal;line-height:1.4;text-align:left}
#studioUI #studioBoardTargets [aria-pressed=true],#studioUI #studioBoardChoices [aria-pressed=true]{background:#294d3b;color:#fff;border-color:#294d3b}
#studioBoardChoices{display:grid;gap:16px;align-items:stretch}
#studioLayout #studioBoardChoices .studio-finish{margin:0;min-width:0}
@media(min-width:900px){#studioBoardChoices .studio-finish{min-height:64px}#studioBoardChoices .studio-finish img{width:64px;height:64px;flex-shrink:0}}

/* Keep the explicit showroom exit easy to find, including on narrow toolbars. */
#studioUI #studioClose{white-space:nowrap;min-height:44px;background:#303a38;color:#fff5d9;border-color:#bda365}
@media(max-width:899px){
 #studioUI .studio-actions #studioClose{position:sticky;left:0;order:-3;z-index:1;flex-shrink:0;box-shadow:6px 0 0 #fffef7}
}

/* Start with recognisable categories; browse products only after choosing one. */
#studioLayout #studioProductsPane{display:block}
#studioCategoryHome[hidden],#studioProductBrowser[hidden]{display:none!important}
#studioLayout #studioCategoryHome h3{margin:4px 0 14px;font:600 16px/1.4 Arial,sans-serif}
#studioCategories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#studioUI #studioCategories .studio-category{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:108px;padding:10px;background:#fff;border:1px solid #c4cec1;border-radius:10px;white-space:normal;touch-action:pan-y}
#studioCategories img{width:100%;height:58px;object-fit:contain;pointer-events:none}
#studioCategories span{font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
#studioUI #studioCategories .studio-category:focus-visible{outline:3px solid #b59750;outline-offset:2px;background:#faf6e9}
@media(hover:hover){#studioUI #studioCategories .studio-category:hover{border-color:#a88b46;background:#faf6e9}}
#studioLayout .studio-category-nav{position:sticky;top:50px;z-index:1;background:#fffef8;padding:0 0 10px}
#studioUI #studioAllCategories{width:100%;min-height:44px;text-align:center;font-size:14px;font-weight:600;border-color:#b9a36c;background:#f7f1e1;color:#294537}
#studioLayout #studioCategoryTitle{margin:12px 0 0;font:22px/1.2 Georgia,serif}
#studioCategoryTitle:focus{outline:none}
@media(max-width:899px){
 #studioLayout[data-pane="products"]{height:min(560px,70%,calc(100% - 130px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
 #studioLayout[data-pane="products"] .studio-layout-tabs{max-width:none}
 #studioLayout #studioTryExample{width:100%;margin-top:16px}
 #studioCategories{gap:10px}
 #studioUI #studioCategories .studio-category{min-height:98px;padding:8px}
 #studioCategories img{height:48px}
 #studioLayout .studio-category-nav{top:50px}
}
@media(min-width:600px) and (max-width:899px) and (min-height:521px){#studioCategories{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:520px) and (min-width:600px){#studioLayout[data-pane="products"]{height:auto}}

/* Keep both collections visible: a choice, not another hidden dropdown. */
.studio-ranges{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #b6c1bc;border-radius:10px;background:#edf1ee;flex-shrink:0}
.studio-ranges button{min-height:44px;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:#27483c;font-size:14px;white-space:nowrap}
.studio-ranges button[aria-pressed="true"]{background:#294e41;color:#fff}
.studio-ranges button:focus-visible{outline:3px solid #d4b65e;outline-offset:2px}
@media(max-width:600px){.studio-ranges{width:100%;box-sizing:border-box}.studio-ranges button{flex:1}.studio-top .studio-actions{flex-wrap:wrap}}

/* Selecting a room surface opens only that surface's choices. */
#studioLayout[data-context]:not([data-context=""]){height:auto;max-height:calc(100% - 220px);bottom:auto;overflow:auto;visibility:hidden;pointer-events:none}
#studioLayout[data-context]:not([data-context=""]).is-open{visibility:visible;pointer-events:auto}
#studioLayout[data-context]:not([data-context=""])>h2,
#studioLayout[data-context]:not([data-context=""])>.studio-layout-tabs,
#studioLayout[data-context]:not([data-context=""])>#studioOpenBoards,
#studioLayout[data-context]:not([data-context=""]) #studioFinishPane>label,
#studioLayout[data-context="wall"] #studioCoverage,
#studioLayout[data-context="wall"] label:has(#studioCoverage),
#studioLayout[data-context]:not([data-context=""]) #studioProductTitle,
#studioLayout[data-context="splashback"] #studioBathHandLabel{display:none!important}
#studioFinishHeading{position:sticky;top:-16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fffef8;padding:10px 0 12px;margin:0 0 10px;border-bottom:1px solid #d2dacb}
#studioLayout #studioFinishTitle{display:block;margin:0;font:22px/1.25 Georgia,serif}
#studioUI #studioFinishDone{min-height:44px;padding:8px 12px;flex-shrink:0}
#studioWallChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
#studioUI #studioWallChoices button{font-size:14px;min-height:48px;white-space:normal}
#studioUI #studioWallChoices button[aria-pressed="true"]{background:#315347;color:#fffdf4;border-color:#315347}
#studioLayout[data-context="wall"][data-wall-finish="paint"] #studioPaint,
#studioLayout[data-context="wall"][data-wall-finish="paint"] #studioBoardNote{display:none}
#studioLayout[data-context="wall"] #studioPaintOptions{max-height:220px;overflow:auto;overscroll-behavior:contain;margin-bottom:12px}
#studioLayout[data-context="wall"] #studioPaintAll{margin-bottom:12px}
#studioLayout[data-context]:not([data-context=""]) #studioFinishPane{display:block}
#studioLayout[data-context]:not([data-context=""]) #studioFinishes{max-height:none;overflow:visible;grid-area:auto}
#studioLayout[data-context]:not([data-context=""]) #studioProductSettings:not([hidden]){display:block}
#studioLayout[data-context]:not([data-context=""]) #studioProductSplash h3{margin:0 0 8px;font-size:16px}
@media(max-width:899px){
 .studio-setting #studioLayout[data-context]:not([data-context=""]),.studio-inside-view #studioLayout[data-context]:not([data-context=""]){top:auto;bottom:76px;left:8px;right:8px;width:auto;height:auto;max-height:min(52%,420px);padding:14px;scroll-padding-top:64px}
 #studioFinishHeading{top:-14px}
 #studioLayout[data-context="wall"] #studioPaintOptions{max-height:180px}
}
@media(max-height:520px) and (min-width:600px){
 .studio-setting #studioLayout[data-context]:not([data-context=""]),.studio-inside-view #studioLayout[data-context]:not([data-context=""]){top:80px;bottom:66px;right:auto;width:330px;max-height:calc(100% - 146px)}
}

#studioFinishHeading[hidden],#studioWallChoices[hidden],#studioFinishes[hidden],#studioPaintOptions[hidden]{display:none!important}
#studioDrawing [data-kind="floor"],#studioDrawing [data-kind="splashback"]{cursor:pointer}

#studioLayout [hidden]{display:none!important}

/* One clear route to the catalogue, leaving the room itself in view. */
#studioHeading[hidden],#studioInside[hidden],#studioCatalogToggle[hidden]{display:none!important}
.studio-planning .studio-top{display:flex;flex-wrap:wrap;justify-content:space-between}
#studioUI #studioCatalogToggle{
 position:absolute;left:auto;right:max(20px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));
 transform:none;width:100px;height:100px;min-height:100px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
 border:1px solid #b7a371;border-radius:50%;background:#294d3b;color:#fff9e8;font:600 13px/1.2 Arial,sans-serif;
 white-space:normal;text-align:center;box-shadow:0 4px 16px #14281a25;pointer-events:auto;z-index:6;touch-action:manipulation;
}
#studioCatalogToggle .studio-catalog-label{display:block;max-width:78px}
#studioCatalogToggle .studio-catalog-icon{display:block;width:22px;height:22px;flex-shrink:0;fill:none;stroke:#e3c77f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#studioCatalogToggle .studio-catalog-close,#studioCatalogToggle[aria-expanded="true"] .studio-catalog-browse{display:none}
#studioCatalogToggle[aria-expanded="true"] .studio-catalog-close{display:block}
#studioUI #studioCatalogToggle:focus-visible{outline:3px solid #e3c77f;outline-offset:4px}
@media(hover:hover){#studioUI #studioCatalogToggle:hover{background:#355b48}}
@media(prefers-reduced-motion:no-preference){
 .studio-planning #studioCatalogToggle[data-attention="true"]{animation:studio-catalog-invitation 4.8s ease-in-out infinite}
 @keyframes studio-catalog-invitation{0%,65%,100%{background:#294d3b;box-shadow:0 4px 16px #14281a25}82%{background:#355946;box-shadow:0 4px 16px #14281a25,0 0 0 5px #d4b97924}}
}
@media(min-width:900px){
 .studio-planning #studioLayout{left:auto;right:20px;bottom:136px}
 .studio-inside-view #studioContext{left:20px;right:136px;max-width:calc(100% - 156px)}
}
@media(max-width:899px){
 #studioUI #studioCatalogToggle{right:max(14px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:94px;height:94px;min-height:94px}
 .studio-planning #studioLayout,.studio-planning.studio-setting #studioLayout[data-pane],.studio-planning.studio-setting #studioLayout[data-context]:not([data-context=""]){bottom:128px;max-height:calc(100% - 220px)}
 .studio-inside-view #studioContext{bottom:128px}
}
.studio-inside-view #studioTutorialCard{bottom:136px}
#studioLayout[data-context="wall"] #studioPaintAll,
#studioLayout[data-context="wall"] .studio-finish-none,
#studioLayout[data-context="splashback"] #studioProductSplash>h3{display:none}

/* One editing card for both views, outside the overhead room footprint. */
#studioDoorPanel{position:absolute;right:18px;top:200px;width:264px;box-sizing:border-box;pointer-events:auto;padding:14px;background:#fffdf5fa;color:#294c3d;border:1px solid #d8c88c;border-radius:18px;box-shadow:0 8px 24px #14281a25;max-height:max(140px,calc(100% - 340px));overflow:auto;z-index:8}
#studioDoorPanel [hidden],#studioDoorPanel[hidden]{display:none!important}
#studioDoorPanel .studio-door-heading{display:flex;align-items:center;justify-content:space-between;font-size:18px}
#studioUI #studioDoorDone{padding:8px 12px;min-height:44px;border:1px solid #c9d1bd;background:#edf0e5;font-size:14px;font-weight:600}
#studioUI #studioOpeningMove{width:100%;min-height:44px;background:#294c3d;color:#fff9e8;margin:4px 0 9px}
#studioOpeningHelp{font-size:12px;line-height:1.4;margin:0 0 10px;color:#5b705f}
#studioDoorPanel .studio-opening-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}
#studioDoorPanel .studio-opening-fields label{font-size:12px;line-height:1.3;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:5px}
#studioDoorPanel input{width:100%;min-width:0;box-sizing:border-box;border:1px solid #acb9a4;border-radius:9px;padding:9px 7px;min-height:44px;font:16px Arial;background:#fff;color:#284837}
#studioDoorPanel input:focus{outline:2px solid #b2953f;outline-offset:1px}
#studioDoorPanel input[aria-invalid=true]{border-color:#ac3c2e}
#studioOpeningError{font-size:12px;line-height:1.4;color:#9c3125;margin:10px 0}
#studioUI #studioDoorHinge{width:100%;margin:12px 0 6px;min-height:44px}
#studioDoorPanel .studio-door-swing{display:flex;gap:5px}
#studioUI #studioDoorPanel .studio-door-swing button{flex:1;min-width:0;padding:8px 4px;min-height:44px;font-size:12px;line-height:1.25;white-space:normal}
#studioDoorPanel button[aria-pressed=true]{background:#294c3d;color:#fff9e8;border-color:#294c3d}
#studioUI #studioDoorPanel #studioRemove,#studioUI #studioDoorRemove{width:100%;margin-top:9px;font-size:12px;min-height:44px}

@media(max-width:799px){
 #studioDoorPanel{top:auto;bottom:max(106px,calc(env(safe-area-inset-bottom) + 94px));left:8px;right:8px;width:auto;padding:9px 12px;max-height:38%;border-radius:16px}
 #studioDoorPanel .studio-opening-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 #studioDoorPanel .studio-opening-fields label{font-size:11px}
 #studioOpeningHelp{margin-bottom:8px}
 #studioUI #studioDoorHinge{margin-top:8px}
 body.studio-opening-selected #studioRoomViews{top:185px;bottom:auto;left:8px;right:8px;flex-direction:row;justify-content:center}
 body.studio-opening-selected #studioMessage{bottom:auto;top:155px}
}
#studioDrawing [data-layer="opening-distances"] *{pointer-events:none}

/* Match the quiet native plaques: no separate gold hover/cue rectangle. */
#studioWelcomeCue{display:none}
#studioReview.is-distant{cursor:pointer;touch-action:none}
#studioReview.is-distant #studioReviewContent{pointer-events:none;user-select:none;-webkit-user-select:none}

/* Product and finish shortcuts unfold above matching corner controls. */
.studio-circle-controls #studioCatalogToggle{display:none!important}
#studioCircleMenus{position:absolute;inset:0;pointer-events:none;z-index:7}
#studioCircleMenus[hidden],#studioCircleMenus [hidden],.studio-bulkhead-view #studioCircleMenus{display:none!important}
.studio-circle-group{position:absolute;top:0;bottom:0;right:max(18px,env(safe-area-inset-right));width:180px;pointer-events:none}
.studio-circle-group[data-side="finishes"]{right:auto;left:max(18px,env(safe-area-inset-left))}
#studioUI .studio-circle-trigger{position:absolute;right:0;bottom:max(24px,env(safe-area-inset-bottom));width:98px;height:98px;min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px;border:2px solid #ebce83;border-radius:50%;background:#294d3b;color:#fff9e8;box-shadow:0 4px 18px #14281a50,0 0 0 4px #dfbf6a66,0 0 18px #e5c46b55;font:600 14px/1.2 Arial,sans-serif;pointer-events:auto;touch-action:manipulation}
#studioUI [data-side="finishes"] .studio-circle-trigger{right:auto;left:0}
.studio-circle-trigger svg{width:24px;height:24px;fill:none;stroke:#ead59b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#studioUI .studio-circle-trigger:is([aria-expanded="true"],[data-active="true"]){background:#385d4a;border-color:#f0d898;box-shadow:0 4px 18px #14281a35,0 0 0 3px #d4b97935}
.studio-circle-choices{position:absolute;right:0;bottom:134px;width:180px;max-height:calc(100% - var(--studio-menu-top,120px) - 134px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px;padding:4px;pointer-events:auto}
#studioUI .studio-circle-choice{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:9px;width:100%;min-height:56px;flex-shrink:0;padding:0;border:0;border-radius:30px;background:transparent;font:600 13px/1.2 Arial,sans-serif;touch-action:pan-y}
#studioUI [data-side="finishes"] .studio-circle-choice{flex-direction:row}
.studio-circle-thumbnail{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;overflow:hidden;border:1px solid #c5b17e;border-radius:50%;background:#fffdf6;box-shadow:0 2px 8px #15251d26}
.studio-circle-thumbnail img{width:100%;height:100%;object-fit:contain;padding:5px;pointer-events:none}
[data-side="finishes"] .studio-circle-thumbnail img{object-fit:cover;padding:0}
.studio-circle-caption{display:block;max-width:106px;padding:7px 9px;background:#fffdf4f5;color:#294537;border:1px solid #d2dacb;border-radius:7px;text-align:center;box-shadow:0 2px 8px #15251d12}
#studioUI .studio-circle-choice:focus-visible,#studioUI .studio-circle-trigger:focus-visible{outline:3px solid #e3c77f;outline-offset:3px}
@media(hover:hover){#studioUI .studio-circle-choice:hover .studio-circle-thumbnail{border-color:#9f8240;box-shadow:0 0 0 3px #d4b97955}#studioUI .studio-circle-trigger:hover{background:#3c634e}}
@media(prefers-reduced-motion:no-preference){
 #studioUI .studio-circle-trigger[aria-expanded="false"]:not([data-active="true"]){animation:studio-circle-invitation 3.2s ease-in-out infinite}
 .studio-circle-choices{animation:studio-circle-reveal .18s ease-out}
 @keyframes studio-circle-invitation{0%,100%{background:#294d3b;border-color:#ebce83;box-shadow:0 4px 18px #14281a50,0 0 0 4px #dfbf6a66,0 0 18px #e5c46b55}50%{background:#4b6548;border-color:#ffe6a3;box-shadow:0 4px 18px #14281a50,0 0 0 10px #e5c46b70,0 0 32px 8px #e9c66890}}
 @keyframes studio-circle-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
}
.studio-circle-controls #studioUI #studioLayout[data-dock="left"]{left:20px;right:auto}
.studio-circle-controls #studioUI #studioLayout[data-dock="right"]{left:auto;right:20px}
.studio-circle-controls #studioUI #studioLayout[data-context="boards"] #studioBoardsPane>h3{display:none}
#studioLayout[data-context="product"] .studio-category-nav,
#studioLayout[data-context="product"] #studioTryExample{display:none}
@media(min-width:900px){.studio-circle-controls.studio-inside-view #studioContext{left:136px;right:136px;max-width:calc(100% - 272px)}}
@media(max-width:899px){
 .studio-circle-group{right:max(12px,env(safe-area-inset-right));width:170px}
 .studio-circle-group[data-side="finishes"]{left:max(12px,env(safe-area-inset-left))}
 #studioUI .studio-circle-trigger{width:90px;height:90px;min-height:90px;bottom:max(22px,env(safe-area-inset-bottom));font-size:13px}
 .studio-circle-choices{width:170px;bottom:124px;max-height:calc(100% - var(--studio-menu-top,120px) - 124px)}
 .studio-circle-controls #studioUI #studioLayout[data-dock]{left:8px;right:8px;width:auto;top:auto;bottom:128px;max-height:calc(100% - var(--studio-menu-top,120px) - 128px);overflow-y:auto}
}
@media(max-height:600px){
 #studioUI .studio-circle-trigger{width:70px;height:70px;min-height:70px;bottom:14px;gap:5px;font-size:12px}
 .studio-circle-trigger svg{width:19px;height:19px}
 .studio-circle-choices{bottom:94px;gap:6px;max-height:max(64px,calc(100% - var(--studio-menu-top,96px) - 94px))}
 #studioUI .studio-circle-choice{min-height:46px}
 .studio-circle-thumbnail{flex-basis:44px;width:44px;height:44px}
 .studio-circle-controls #studioUI #studioLayout[data-dock]{bottom:94px;max-height:max(100px,calc(100% - var(--studio-menu-top,96px) - 94px))}
}

/* Styles expand into the room; their real colour/hand choices open beside them. */
#studioUI #studioLayout[data-visual="true"]{top:var(--studio-menu-top,120px);bottom:136px;height:auto;max-height:calc(100% - var(--studio-menu-top,120px) - 136px);width:min(470px,calc(100% - 40px));padding:10px 12px;background:transparent;border:0;box-shadow:none;overflow:auto;scroll-padding-top:76px}
#studioLayout[data-visual="true"] #studioFinishHeading{top:-10px;gap:16px;width:fit-content;max-width:100%;margin:0 0 18px auto;padding:10px 14px;border:1px solid #d4dacd;border-radius:14px;background:#fffef8f5;box-shadow:0 3px 16px #15251d20}
#studioLayout[data-visual="true"][data-dock="left"] #studioFinishHeading{margin-left:0;margin-right:auto}
#studioLayout[data-visual="true"] .studio-plan-note{display:none}
#studioLayout[data-visual="true"] #studioItems.studio-visual-products{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:20px}
#studioProductFamilies{flex:1;min-width:0}
#studioProductVariants{flex:1;min-width:0;padding-top:0}
.studio-visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;align-items:start}
#studioUI #studioLayout[data-visual="true"] .studio-visual-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-width:0;width:100%;height:auto;min-height:0;padding:0;margin:0;border:0;border-radius:16px;background:transparent;overflow:visible;white-space:normal;touch-action:pan-y;text-align:center;color:#294537}
#studioUI #studioLayout[data-visual="true"] .studio-item-card{touch-action:none}
#studioLayout .studio-choice-image{display:grid;place-items:center;width:min(100%,124px);aspect-ratio:1;border:3px solid #fffdf7;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 4px 18px #11271c30,0 0 0 1px #c6cfbf;flex-shrink:0;pointer-events:none}
#studioLayout #studioItems .studio-choice-image img{width:100%;height:100%;margin:0;padding:10px;object-fit:contain;background:white;border-radius:50%;pointer-events:none}
.studio-choice-copy{display:block;max-width:100%;padding:7px 9px;border:1px solid #d4dacd;border-radius:10px;background:#fffef8f5;box-shadow:0 2px 10px #14281a12;overflow-wrap:anywhere}
.studio-choice-copy strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
#studioLayout #studioItems .studio-choice-copy small{display:block;color:#53654e;font-size:13px;line-height:1.3;margin-top:5px}
#studioLayout .studio-choice-copy .studio-in-room:empty{display:none!important}
#studioUI #studioLayout .studio-visual-choice[aria-pressed="true"] .studio-choice-image,#studioUI #studioLayout .studio-visual-choice[data-in-room="true"] .studio-choice-image{border-color:#b99a51;box-shadow:0 0 0 3px #e7cc8970,0 5px 18px #11271c35}
.studio-variant-heading{background:#fffef8f5;border:1px solid #d4dacd;border-radius:12px;padding:12px;margin-bottom:18px;color:#294537}
#studioLayout .studio-variant-heading h3{margin:0;font:20px/1.25 Georgia,serif}
#studioLayout .studio-variant-heading p{margin:5px 0 0;font-size:14px}
#studioUI .studio-style-back{margin-bottom:10px;min-height:44px}
#studioUI .studio-circle-choice[aria-current="true"] .studio-circle-thumbnail{border:3px solid #c1a251;box-shadow:0 0 0 3px #efdba26b}
#studioLayout[data-visual="true"] #studioFinishes,#studioLayout[data-visual="true"] #studioBoardChoices{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:20px 14px;height:auto;max-height:none;overflow:visible}
#studioUI #studioLayout[data-visual="true"] .studio-finish{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;min-width:0;min-height:0;height:auto;margin:0;padding:0;border:0;background:transparent;text-align:center;color:#294537}
#studioLayout[data-visual="true"] .studio-finish img{width:118px;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:3px solid #fffdf7;border-radius:50%;box-shadow:0 4px 18px #11271c30,0 0 0 1px #c6cfbf}
#studioLayout[data-visual="true"] .studio-finish>span{display:block;padding:7px 9px;border:1px solid #d4dacd;border-radius:10px;background:#fffef8f5;line-height:1.35;font-size:14px;overflow-wrap:anywhere}
#studioLayout[data-visual="true"] .studio-finish[aria-pressed="true"] img{border-color:#b99a51;box-shadow:0 0 0 3px #e7cc8970,0 5px 18px #11271c35}
#studioUI #studioLayout[data-visual="true"] .studio-finish-none{grid-column:1/-1;display:block;width:fit-content;padding:9px 14px;min-height:44px;background:#fffef8f5;border:1px solid #d4dacd;border-radius:10px}
#studioLayout[data-visual="true"] #studioBoardsPane>p{width:fit-content;max-width:100%;padding:8px 12px;background:#fffef8f5;border-radius:10px}
#studioLayout[data-visual="true"] #studioBoardTargets{display:flex;flex-wrap:wrap;gap:8px}
@media(hover:hover){#studioUI #studioLayout .studio-visual-choice:hover .studio-choice-image,#studioUI #studioLayout[data-visual="true"] .studio-finish:hover img{border-color:#d8bd77;box-shadow:0 0 0 3px #e7cc8970,0 5px 18px #11271c35}}
@media(min-width:700px){#studioUI .studio-style-back{display:none}#studioLayout[data-product-detail="variants"] #studioProductFamilies{flex:0 0 260px}#studioProductVariants .studio-visual-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}}
@media(min-width:1100px){
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-dock="right"]{right:214px;left:auto;width:310px}
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="product"][data-product-detail="variants"]{width:min(760px,calc(100% - 252px))}
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-dock="left"]{left:214px;right:auto;width:min(600px,calc(100% - 252px))}
 #studioLayout[data-product-detail="variants"] #studioProductFamilies{flex-basis:280px}
}
@media(max-width:1099px){
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-dock]{left:10px;right:10px;top:var(--studio-menu-top,120px);width:auto;bottom:128px;max-height:calc(100% - var(--studio-menu-top,120px) - 128px)}
 #studioLayout[data-visual="true"] #studioFinishHeading{margin-left:0}
}
@media(min-width:700px) and (max-width:1099px){.studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="product"][data-product-detail="styles"]{left:auto;right:10px;width:470px}}
@media(max-width:699px){
 #studioLayout[data-product-detail="variants"] #studioProductFamilies{display:none}
 #studioLayout[data-visual="true"] #studioItems.studio-visual-products{display:block}
 #studioLayout .studio-choice-image{width:124px;max-width:100%}
 #studioLayout[data-visual="true"] #studioFinishes,#studioLayout[data-visual="true"] #studioBoardChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:600px){.studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-dock]{bottom:94px;max-height:max(100px,calc(100% - var(--studio-menu-top,96px) - 94px))}}
@media(prefers-reduced-motion:no-preference){
 #studioLayout[data-visual="true"] #studioProductVariants:not([hidden]){animation:studio-choice-expand .2s ease-out}
 @keyframes studio-choice-expand{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
}
.studio-choice-dragging #studioLayout[data-visual="true"],.studio-choice-dragging #studioCircleMenus{opacity:0}
.studio-choice-dragging #studioLayout[data-visual="true"],.studio-choice-dragging #studioLayout[data-visual="true"] *, .studio-choice-dragging #studioCircleMenus,.studio-choice-dragging #studioCircleMenus *{pointer-events:none!important}

/* A small, persistent collection stack beside the larger flooring choices. */
#studioUI #studioLayout[data-visual="true"] #studioFinishes.studio-visual-floors{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:start;gap:22px}
#studioUI #studioLayout[data-visual="true"][data-floor-detail="styles"] #studioFinishes.studio-visual-floors{grid-template-columns:minmax(0,1fr)}
#studioLayout #studioFloorFamilies{display:flex;flex-direction:column;gap:14px;min-width:0;align-content:start;position:sticky;top:70px}
#studioUI #studioLayout[data-visual="true"] #studioFloorFamilies .studio-visual-choice{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;border-radius:10px}
#studioLayout #studioFloorFamilies .studio-choice-image{width:64px;height:64px;flex:0 0 64px}
#studioLayout #studioFloorFamilies .studio-choice-copy{padding:6px 8px;min-width:0;font-size:13px;line-height:1.3}
#studioLayout #studioFloorFamilies .studio-choice-copy small{font-size:11px;margin-top:3px}
#studioFloorVariants{min-width:0}
#studioFloorVariants .studio-visual-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
#studioLayout .studio-visual-floors .studio-choice-image img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;margin:0}
#studioLayout #studioRoomPaintColours{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:22px 16px}
#studioLayout .studio-room-paint-chip{width:104px}
#studioLayout .studio-paint-note{width:fit-content;padding:10px 14px;margin:0 0 22px;border-radius:12px;background:#fffef8f5;color:#294537}
#studioLayout[data-visual="true"] #studioRoomPaintColours .studio-choice-copy{font-size:14px;line-height:1.35}
@media(min-width:1100px){
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="floor"][data-floor-detail="variants"]{width:min(760px,calc(100% - 252px))}
}
.studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="floor"][data-floor-detail="styles"]{right:auto;width:220px;max-width:calc(100% - 24px)}
@media(max-width:699px){
 #studioUI #studioLayout[data-visual="true"][data-floor-detail="variants"] #studioFinishes.studio-visual-floors{grid-template-columns:120px minmax(0,1fr);gap:14px}
 #studioLayout[data-floor-detail="variants"] #studioFloorFamilies{gap:16px}
 #studioLayout[data-floor-detail="variants"] #studioFloorFamilies .studio-choice-image{width:48px;height:48px;flex-basis:48px}
 #studioUI #studioLayout[data-visual="true"][data-floor-detail="variants"] #studioFloorFamilies .studio-visual-choice{gap:6px}
 #studioLayout[data-floor-detail="variants"] #studioFloorFamilies .studio-choice-copy{padding:5px;font-size:12px}
 #studioFloorVariants .studio-visual-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
 #studioLayout #studioRoomPaintColours{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.studio-planning #studioDrawing :is(.studio-wall-hit,.studio-wall-edge,.studio-cut-wall,.studio-cut-edge){cursor:grab}

#studioLayout .studio-visual-floors .studio-choice-copy small{display:block;margin-top:4px;font-size:13px;color:#53654e}

/* One board scheme: compact collections, larger finish circles, no wall picker. */
#studioRoomBoardCoverage{border:0;padding:10px 0 18px;margin:0;display:flex;flex-wrap:wrap;gap:8px}
#studioRoomBoardCoverage legend{font-size:14px;font-weight:600;padding:0 0 8px;color:#294537}
#studioRoomBoardCoverage button{min-height:44px;margin:0;border-radius:22px;background:#fffef8f5}
#studioRoomBoardCoverage button[aria-pressed=true]{background:#294d3b;color:#fff;border-color:#294d3b}
#studioUI #studioLayout #studioBoardChoices{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:start;gap:22px}
#studioUI #studioLayout[data-board-detail="styles"] #studioBoardChoices{grid-template-columns:minmax(0,1fr)}
#studioLayout #studioBoardFamilies{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:70px}
#studioUI #studioLayout #studioBoardFamilies .studio-visual-choice{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;border-radius:10px}
#studioLayout #studioBoardFamilies .studio-choice-image{width:64px;height:64px;flex:0 0 64px}
#studioLayout #studioBoardFamilies .studio-choice-copy{padding:6px 8px;min-width:0;font-size:13px;line-height:1.3}
#studioLayout #studioBoardFamilies .studio-choice-copy small{display:block;font-size:11px;margin-top:3px}
#studioBoardVariants{min-width:0}
#studioBoardVariants .studio-visual-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
#studioLayout #studioBoardChoices .studio-choice-image img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;margin:0}
#studioUI #studioBoardChoices .studio-visual-choice[aria-pressed=true]{background:transparent}
#studioLayout[data-context="boards"] #studioBoardsNote{font-size:14px;line-height:1.5}
@media(min-width:1100px){
 .studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="boards"][data-board-detail="variants"]{width:min(760px,calc(100% - 252px))}
}
.studio-circle-controls #studioUI #studioLayout[data-visual="true"][data-context="boards"][data-board-detail="styles"]{right:auto;width:320px;max-width:calc(100% - 24px)}
@media(max-width:699px){
 #studioUI #studioLayout[data-board-detail="variants"] #studioBoardChoices{grid-template-columns:110px minmax(0,1fr);gap:14px}
 #studioLayout[data-board-detail="variants"] #studioBoardFamilies .studio-choice-image{width:44px;height:44px;flex-basis:44px}
 #studioUI #studioLayout[data-board-detail="variants"] #studioBoardFamilies .studio-visual-choice{flex-direction:column;gap:4px;text-align:center}
 #studioLayout[data-board-detail="variants"] #studioBoardFamilies .studio-choice-copy{padding:5px;font-size:12px}
 #studioBoardVariants .studio-visual-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* Full supplier photographs and isolated native renders fill the choice circles. */
.studio-circle-thumbnail{position:relative;flex-basis:64px;width:64px;height:64px;background:#e5e8e5}
.studio-circle-thumbnail img{padding:0;mix-blend-mode:multiply}
#studioLayout .studio-choice-image{position:relative;width:min(100%,150px);background:#e5e8e5}
#studioLayout #studioItems .studio-choice-image img{padding:0;border-radius:0;background:transparent;mix-blend-mode:multiply}
#studioLayout #studioShowerCategories{flex:0 0 100%;min-width:0}
#studioLayout #studioShowerChoices{flex:1;min-width:0}
#studioLayout #studioItems.studio-shower-browser{display:flex;gap:18px;align-items:flex-start;flex-direction:row-reverse}
#studioLayout[data-product-detail="variants"] #studioShowerCategories{flex:0 0 112px;display:flex;flex-direction:column;gap:20px}
#studioLayout[data-product-detail="variants"] #studioShowerCategories .studio-choice-image{width:76px}
#studioLayout #studioShowerCategories .studio-choice-copy strong{font-size:14px}
#studioLayout .studio-shower-target-note{font-size:13px;line-height:1.4;margin:8px 0 0}
#studioLayout .studio-shower-targets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#studioLayout .studio-shower-targets button{font-size:12px;min-height:40px;padding:6px 8px}
#studioLayout .studio-shower-targets [aria-pressed="true"]{background:#315640;color:#fff}
#studioLayout [data-shower-valve]:disabled{opacity:.6}
@media(max-width:600px){
 #studioLayout[data-product-detail="variants"] #studioShowerCategories{flex-basis:82px}
 #studioLayout[data-product-detail="variants"] #studioShowerCategories .studio-choice-image{width:62px}
 #studioLayout #studioItems.studio-shower-browser{gap:10px}
 #studioLayout #studioShowerChoices .studio-visual-grid{gap:16px 8px}
 #studioLayout #studioShowerChoices .studio-choice-copy strong{font-size:13px}
}
@media(max-height:600px){.studio-circle-thumbnail{flex-basis:50px;width:50px;height:50px}}
/* Optional measured outline tools stay outside the product-selection flow. */
#studioOutlineDialog{box-sizing:border-box;border:1px solid #d4d5c1;border-radius:20px;background:#faf7ed;color:#294537;padding:24px;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;font:15px/1.45 Arial,sans-serif;box-shadow:0 20px 80px #15251d50;pointer-events:auto}
#studioOutlineDialog::backdrop{background:#12231a80}#studioOutlineDialog header,#studioOutlineDialog footer{display:flex;align-items:center;justify-content:space-between;gap:10px}#studioOutlineDialog h2{font:26px Georgia,serif;margin:0}#studioOutlineDialog button,#studioOutlineDialog input,#studioOutlineDialog select{box-sizing:border-box;font:16px Arial,sans-serif;min-height:44px;border:1px solid #bbcabb;border-radius:9px;padding:8px 12px;background:#fffef9;color:#294537}#studioOutlineDialog button{cursor:pointer}#studioOutlineDialog .studio-primary{background:#294b3a;color:white}#studioOutlineDialog label{display:block;margin:8px 0}#studioOutlineDialog select,#studioOutlineDialog input{width:100%;margin-top:4px}#studioOutlineDialog label span{font-size:12px;color:#68765e}#studioOutlineDialog svg{width:100%;max-height:225px;display:block;margin:5px 0}#studioOutlineDialog .outline-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}#studioOutlineDialog [hidden]{display:none!important}#studioOutlineDialog [data-error]{color:#913d23}#studioOutlineDialog .outline-note{font-size:12px;color:#596951}#studioOutlineDialog :focus-visible{outline:3px solid #d9ae3f;outline-offset:2px}
#studioRoomViews{position:absolute;top:145px;right:18px;display:flex;gap:6px;pointer-events:auto}#studioRoomViews[hidden]{display:none}#studioRoomViews button{box-shadow:0 2px 12px #17322020;font-size:12px;padding:8px 10px;background:#fffbee}
@media(max-width:600px){#studioRoomViews{top:auto;right:10px;bottom:150px;flex-direction:column}#studioOutlineDialog{padding:17px}#studioOutlineDialog h2{font-size:23px}}
/* A consistent, clearly selected pair of room views. */
#studioRoomViews button[aria-pressed="true"]{background:#294c3d;color:#fff9e8;border-color:#294c3d;box-shadow:0 2px 6px #294c3d24}
body.studio-plan-view #studioOverlay{background:#f3f5ef}
body.studio-plan-view #studioDrawing{display:block!important}
body.studio-plan-view #studioHint{color:#345446;background:#f3f5ef}
body.studio-plan-view #studioFitView{display:none}

#studioOutlineDialog .room-detail-choices{display:grid;gap:10px;margin:18px 0}#studioOutlineDialog .room-detail-choices button{text-align:left;background:#eff2e7;padding:14px 16px;font-weight:600}#studioOutlineDialog .room-detail-choices span{display:block;font-size:13px;font-weight:400;margin-top:5px;color:#66735f}#studioOutlineDialog details{margin:18px 0}#studioOutlineDialog summary{cursor:pointer;padding:8px 0}#studioOutlineDialog [data-home-button]{margin-top:14px;border:0;background:transparent;padding-left:0}#studioDoorRemove{font-size:12px!important;margin-top:7px}

#studioOutlineDialog .studio-sketch h3{font:25px/1.2 Georgia,serif;margin:18px 0 10px}
#studioOutlineDialog .studio-sketch [data-back]{border:0;background:transparent;padding-left:0;margin-top:12px}
#studioOutlineDialog .sketch-file-button{position:relative;display:block;text-align:center;border:2px dashed #729379;border-radius:15px;padding:22px 12px;background:#e7eddb;font-weight:bold;cursor:pointer}
#studioOutlineDialog .sketch-file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
#studioOutlineDialog .sketch-file-button:focus-within{outline:3px solid #d9ae3f}
#studioOutlineDialog .sketch-example{max-width:280px;margin:auto}
#studioOutlineDialog .studio-sketch [data-image]{display:block;max-width:100%;max-height:240px;margin:18px auto;border-radius:12px;object-fit:contain}
#studioOutlineDialog .studio-sketch [data-plan]{max-height:270px;background:#fffdf6;border-radius:14px}
#studioOutlineDialog .studio-sketch [data-status]:not(:empty){padding:15px;background:#fff0bb;border-radius:12px}
#studioOutlineDialog .sketch-confirm{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin:15px 0}
#studioOutlineDialog .sketch-confirm input{width:20px;height:20px;min-height:20px;flex:0 0 20px;padding:0;margin:0;accent-color:#345446}
#studioOutlineDialog .sketch-missing input{border-color:#b38b24;background:#fff5d7}
#studioOutlineDialog .studio-sketch button:disabled{opacity:.45;cursor:not-allowed}
#studioOutlineDialog .studio-sketch footer{margin-top:20px;flex-wrap:wrap}

/* Rendered plan shares the live 3D room. SVG only supplies accessible hit targets. */
.studio-plan-view .studio-realistic .studio-plan-item>rect{fill:transparent;stroke:transparent;pointer-events:all}
.studio-plan-view .studio-realistic .studio-plan-item>text,.studio-plan-view .studio-realistic .studio-plan-item>line{visibility:hidden}
.studio-plan-view .studio-realistic .studio-plan-item:focus-visible>rect{stroke:#bd9427;stroke-width:3}
.studio-plan-view .studio-realistic #studioDrawing>line{stroke-opacity:.25}
.studio-plan-view .studio-realistic #studioDrawing>[data-kind=cupboard]>rect{fill:transparent;stroke:transparent}
.sketch-qr{margin-top:18px;padding:16px;background:#f6f1db;border-radius:18px;text-align:center}.sketch-qr svg{width:190px;height:190px;max-width:100%;background:white;border-radius:6px}.sketch-qr a{overflow-wrap:anywhere}.sketch-qr[hidden]{display:none}

/* Keep the plan and its controls separate on a narrow screen. */
body.studio-plan-view #studioContext{top:115px}
@media(max-width:600px){
 body.studio-plan-view .studio-top .studio-actions{flex-wrap:nowrap}
 body.studio-plan-view #studioHint{top:130px!important;left:8px;right:8px}
 body.studio-plan-view #studioRoomViews{top:185px;bottom:auto;left:8px;right:8px;flex-direction:row;justify-content:center}
 body.studio-plan-view #studioContext{top:auto!important;bottom:130px;left:8px;right:8px;max-width:calc(100% - 16px)}
}

/* Spoken wall builder: scoped so the showroom and product menus retain their layout. */
#studioSpeakDialog{position:fixed;inset:0;width:min(1120px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;border:1px solid #d6decc;border-radius:26px;padding:28px;background:#f7f6ed;color:#294c3d;font:15px Arial,Helvetica,sans-serif;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 80px #12281c44}
#studioSpeakDialog::backdrop{background:#18302499;backdrop-filter:blur(4px)}
#studioSpeakDialog *{box-sizing:border-box}#studioSpeakDialog [hidden]{display:none!important}
#studioSpeakDialog button,#studioSpeakDialog input,#studioSpeakDialog summary{font-family:inherit;color:inherit}
#studioSpeakDialog button{border:1px solid #c8d1bf;border-radius:12px;background:#fffdf4;padding:10px 14px;min-height:44px;cursor:pointer;font-size:14px}
#studioSpeakDialog button:disabled{opacity:.45;cursor:default}#studioSpeakDialog button:hover:not(:disabled){background:#eee9d5}
#studioSpeakDialog :focus-visible{outline:3px solid #b38f25;outline-offset:3px}
#studioSpeakDialog .voice-close{position:sticky;top:0;float:right;font-size:26px;padding:0;width:44px;z-index:2;background:#fffdf4}
#studioSpeakDialog .intro{margin:0 50px 24px 0}#studioSpeakDialog .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#718066;margin:0 0 9px}
#studioSpeakDialog h1{font:normal clamp(28px,3vw,39px)/1.15 Georgia,serif;margin:0 0 10px}#studioSpeakDialog h2{font:normal 25px/1.2 Georgia,serif;margin:0 0 8px}#studioSpeakDialog p{line-height:1.5}
#studioSpeakDialog .intro>p:last-child{font-size:14px;color:#60715b;margin:0}
#studioSpeakDialog .workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,1fr);gap:20px;align-items:start}
#studioSpeakDialog .drawing-card,#studioSpeakDialog .command-card{border:1px solid #dce1d2;background:#fffef8;border-radius:22px;overflow:hidden}
#studioSpeakDialog .drawing-card{position:sticky;top:0}#studioSpeakDialog .drawing-top{padding:20px 22px 0}#studioSpeak-roomInfo{font-size:12px;color:#718166}
#studioSpeak-plan{width:100%;display:block;aspect-ratio:1.5;touch-action:pan-y}
#studioSpeakDialog .direction-caption{text-align:center;font-size:12px;color:#65775b;margin:0 15px 15px}
#studioSpeakDialog .plan-actions{display:flex;gap:4px;justify-content:space-between;padding:9px 12px;border-top:1px solid #e3e6d9}#studioSpeakDialog .plan-actions button{border:0;background:transparent;padding:8px;font-size:12px}
#studioSpeakDialog .command-card{padding:22px}#studioSpeakDialog .step-label{font-size:11px;letter-spacing:1.5px;font-weight:bold;color:#788a69;margin-bottom:9px}
#studioSpeakDialog .command-card>p{font-size:13px;color:#63785c;margin:8px 0 14px}
#studioSpeakDialog .speak{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:16px 0 10px;background:#f3d669;border-color:#dec25d;min-height:64px;border-radius:19px;font-weight:bold}
#studioSpeakDialog .speak:hover:not(:disabled){background:#f8df83}#studioSpeakDialog .speak svg{width:25px;height:30px;stroke:#294c3d;fill:none;stroke-width:2.2}
#studioSpeakDialog .speak[aria-pressed=true]{background:#294c3d;color:#fffdf2;box-shadow:0 0 0 5px #294c3d18}#studioSpeakDialog .speak[aria-pressed=true] svg{stroke:#f3d669}
#studioSpeakDialog .command-card .speech-note{font-size:11px;margin:0 0 15px;text-align:center}
#studioSpeakDialog details{border-top:1px solid #e3e6d9;margin-top:14px;padding-top:12px}#studioSpeakDialog summary{min-height:36px;cursor:pointer;font-size:13px;line-height:1.5;padding:4px 0}
#studioSpeakDialog fieldset{border:0;padding:0;margin:12px 0}#studioSpeakDialog legend{font-size:12px;margin-bottom:7px}#studioSpeakDialog .turns{display:flex;gap:6px}#studioSpeakDialog .turns button{flex:1;padding:9px 6px;font-size:13px}
#studioSpeakDialog .turns button[aria-pressed=true],#studioSpeakDialog .primary{background:#294c3d;color:#fffdf4;border-color:#294c3d}#studioSpeakDialog .primary:hover:not(:disabled){background:#3d6046}
#studioSpeakDialog .length-row{display:flex;align-items:end;gap:8px}#studioSpeakDialog label{font-size:12px;display:block;line-height:1.4}#studioSpeakDialog label>span{color:#75846e}#studioSpeakDialog .length-row label{flex:1;min-width:0}#studioSpeakDialog .length-row button{white-space:nowrap;min-height:46px}
#studioSpeakDialog input[type=number],#studioSpeakDialog input[type=text]{display:block;width:100%;min-width:0;border:1px solid #b8c3ab;border-radius:10px;padding:11px 12px;background:white;color:#294c3d;min-height:46px;font-size:17px;margin-top:5px}
#studioSpeakDialog .heard{padding:14px;border-radius:12px;background:#eef1e6;margin:12px 0}#studioSpeakDialog .heard label{font-size:10px;letter-spacing:1px;margin-bottom:8px}#studioSpeakDialog .heard p{font-size:14px;margin:12px 0}#studioSpeakDialog .heard button{width:100%}#studioSpeakDialog .heard[data-listening=true] button{display:none}
#studioSpeak-message{border-left:3px solid #d1bb60;padding-left:12px}#studioSpeak-message.error{color:#8a4330!important;border-color:#b86848}
#studioSpeakDialog .text-button{border:0;background:transparent;font-size:12px;text-decoration:underline;padding:12px 0;margin-top:8px}#studioSpeakDialog .help p,#studioSpeakDialog .small{font-size:12px;color:#6b7e66}
#studioSpeakDialog .review,#studioSpeakDialog .closure{border-radius:16px;background:#f1eedc;padding:16px;margin-top:16px}#studioSpeakDialog .review h3{font:normal 23px Georgia,serif;margin:0 0 14px}#studioSpeakDialog .review button,#studioSpeakDialog .closure .primary{width:100%;margin-top:12px}
#studioSpeakDialog .closure>button:last-child{display:block;border:0;background:none;margin:6px auto 0}#studioSpeakDialog .check{display:flex;align-items:center;gap:9px;margin:14px 0}#studioSpeakDialog .check input{width:20px;height:20px;accent-color:#294c3d;flex-shrink:0}
#studioSpeakDialog .wall-list ol{padding-left:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px 24px}#studioSpeakDialog .wall-list li{font-size:13px;padding:5px}#studioSpeakDialog .wall-list button{min-height:32px;font-size:11px;padding:5px 9px;margin-left:8px}
@media(max-width:760px){#studioSpeakDialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);padding:17px 12px;border-radius:20px}#studioSpeakDialog .workspace{grid-template-columns:1fr;gap:14px}#studioSpeakDialog .intro{margin-bottom:18px}#studioSpeakDialog .intro>p:last-child{font-size:13px}#studioSpeakDialog .drawing-card{position:static}#studioSpeakDialog .drawing-top{padding:14px 16px 0}#studioSpeakDialog h2{font-size:22px}#studioSpeak-plan{max-height:190px}#studioSpeakDialog .direction-caption{font-size:11px;margin-bottom:8px}#studioSpeakDialog .command-card{padding:17px}#studioSpeakDialog .speak{min-height:58px}#studioSpeakDialog .wall-list ol{grid-template-columns:1fr 1fr}}

/* Keep the next step available while an opening is selected. */
@media(max-width:799px){
 body.studio-opening-selected #studioUI .studio-circle-trigger{width:72px;height:72px;min-height:72px;bottom:max(18px,env(safe-area-inset-bottom));gap:5px;font-size:12px}
 body.studio-opening-selected #studioDoorPanel .studio-door-heading{font-size:16px}
}

@media(max-width:799px){
 #studioDoorPanel .studio-door-options{display:flex;gap:5px;margin-top:8px}
 #studioDoorHand{flex:1;min-width:0}
 #studioDoorPanel .studio-door-swing{flex:2;min-width:0}
 #studioUI #studioDoorPanel #studioDoorHinge{margin:0;height:100%;min-height:44px;font-size:12px;padding:8px 4px}
}

/* Keep the final room measurement easy to find in the spoken-room flow. */
#studioSpeakDialog .ceiling-label{font-size:18px;font-weight:bold}
#studioSpeakDialog .ceiling-label>span{font-size:13px;font-weight:normal}
#studioSpeakDialog #studioSpeak-ceilingHeight{font-size:20px;min-height:52px}
#studioSpeakDialog #studioSpeak-heightHint{margin:8px 0 0}
#studioSpeakDialog #studioSpeak-review{scroll-margin-block:64px}

/* A single typed measurement beside its direction, with a plan that grows. */
#studioSpeakDialog.typed-room-builder .wall-entry{display:flex;align-items:center;gap:14px;margin-top:16px}
#studioSpeakDialog.typed-room-builder .wall-entry>label{flex:1;min-width:0;font-size:14px}
#studioSpeakDialog.typed-room-builder .heading-cue{width:82px;flex-shrink:0;text-align:center;font-size:12px;font-weight:bold}
#studioSpeakDialog.typed-room-builder .heading-cue svg{display:block;width:48px;height:48px;margin:0 auto 5px;color:#b38e1c}
#studioSpeakDialog.typed-room-builder .wall-submit{width:100%;margin-top:4px;min-height:50px;font-size:16px}
#studioSpeakDialog.typed-room-builder .review{margin-top:14px}
#studioSpeakDialog.typed-room-builder input[aria-invalid=true]{border-color:#a5472f}
#studioSpeakDialog.typed-room-builder #studioSpeak-message{margin-bottom:0}
#studioSpeakDialog.typed-room-builder .intro{min-height:80px;margin-right:130px}
@media(max-width:760px){
 #studioSpeakDialog.typed-room-builder{padding:14px 12px}
 #studioSpeakDialog.typed-room-builder h1{font-size:28px}
 #studioSpeakDialog.typed-room-builder .intro{margin-bottom:12px;margin-right:110px;min-height:90px}
 #studioSpeakDialog.typed-room-builder .workspace{gap:10px}
 #studioSpeakDialog.typed-room-builder .drawing-top{display:none}
 #studioSpeakDialog.typed-room-builder #studioSpeak-plan{height:170px;max-height:170px}
 #studioSpeakDialog.typed-room-builder .direction-caption{font-size:12px;margin-bottom:4px}
 #studioSpeakDialog.typed-room-builder .command-card{padding:14px}
 #studioSpeakDialog.typed-room-builder h2{font-size:21px}
 #studioSpeakDialog.typed-room-builder .step-label{margin-bottom:6px}
 #studioSpeakDialog.typed-room-builder .wall-entry{margin-top:10px;gap:10px}
 #studioSpeakDialog.typed-room-builder fieldset{margin:10px 0}
 #studioSpeakDialog.typed-room-builder .wall-list ol{grid-template-columns:1fr}
}


/* The iPhone keyboard changes the visual viewport, which 100dvh alone misses. */
#studioSpeakDialog.typed-room-builder.phone-viewport{box-sizing:border-box;top:calc(var(--room-visible-top,0px) + 6px);bottom:auto;margin:0 auto;max-height:calc(var(--room-visible-height,100dvh) - 12px);scroll-padding:12px}
#studioSpeakDialog.typed-room-builder.keyboard-entry{padding:12px}
#studioSpeakDialog.typed-room-builder.keyboard-entry .intro,
#studioSpeakDialog.typed-room-builder.keyboard-entry .drawing-card,
#studioSpeakDialog.typed-room-builder.keyboard-entry .wall-list,
#studioSpeakDialog.typed-room-builder.keyboard-entry #studioJames,
#studioSpeakDialog.typed-room-builder.keyboard-entry #studioSpeak-nextPrompt{display:none}
#studioSpeakDialog.typed-room-builder.keyboard-entry .workspace{display:block;clear:both}
#studioSpeakDialog.typed-room-builder.keyboard-entry .voice-close{position:absolute;top:8px;right:8px}
#studioSpeakDialog.typed-room-builder.keyboard-entry .command-card{padding:14px;border-radius:16px}
#studioSpeakDialog.typed-room-builder.keyboard-entry .step-label{min-height:24px;padding-right:44px;margin-bottom:0;display:flex;align-items:center}
#studioSpeakDialog.typed-room-builder.keyboard-entry fieldset{margin:8px 0}
#studioSpeakDialog.typed-room-builder.keyboard-entry .wall-entry{margin-top:8px}
#studioSpeakDialog.typed-room-builder.keyboard-entry .review{margin-top:8px;padding:12px}

/* Phone Plan view uses the room area, not the space for unopened controls. */
@media(max-width:799px){
 body.studio-plan-view #studioUI .studio-top{display:flex;flex-wrap:wrap;left:8px;right:8px;top:8px;width:auto;max-height:none;overflow:visible}
 body.studio-plan-view #studioHeading{display:none!important}
 body.studio-plan-view .studio-top .studio-ranges{width:100%;box-sizing:border-box}
 body.studio-plan-view .studio-top .studio-ranges button{flex:1}
 body.studio-plan-view #studioUI .studio-actions{display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto}
 body.studio-plan-view #studioHint{display:none}
 body.studio-plan-view #studioRoomViews{top:calc(var(--studio-plan-toolbar-bottom,120px) + 8px);bottom:auto;left:8px;right:8px;flex-direction:row;justify-content:center}
 body.studio-plan-view #studioContext{top:auto!important;bottom:125px;left:8px;right:8px;max-width:calc(100% - 16px)}
 body.studio-plan-view > #studioJames[data-scope="editor"]{top:auto!important;bottom:18px;left:50%!important;right:auto!important;transform:translateX(-50%)}
 body.studio-plan-view > #studioJames[data-scope="editor"] #studioJamesHelp{top:auto;bottom:calc(100% + 10px);left:50%;right:auto;transform:translateX(-50%);max-height:calc(100dvh - 160px)}
 body.studio-plan-view.studio-opening-selected #studioUI .studio-top{display:none}
 body.studio-plan-view .studio-actions{scrollbar-width:none}
 body.studio-plan-view .studio-actions::-webkit-scrollbar{display:none}
 body.studio-plan-view #studioMessage{top:auto;bottom:112px;left:8px;right:8px;pointer-events:none}
 body.studio-plan-view #studioDoorPanel{bottom:100px;max-height:32%;padding:8px 10px}
 body.studio-plan-view #studioDoorPanel #studioOpeningHelp{display:none}
}

@media(min-width:600px) and (max-width:999px) and (max-height:568px){
 body.studio-plan-view #studioUI .studio-top{left:8px;right:auto;top:8px;width:230px;max-height:calc(100% - 160px);overflow-y:auto;overflow-x:hidden;display:flex;flex-wrap:wrap}
 body.studio-plan-view #studioHeading,body.studio-plan-view #studioHint{display:none!important}
 body.studio-plan-view .studio-top .studio-ranges{width:100%;box-sizing:border-box}
 body.studio-plan-view .studio-top .studio-ranges button{flex:1;min-width:0;font-size:12px;padding:6px}
 body.studio-plan-view #studioUI .studio-actions{display:flex;flex-wrap:wrap;width:100%;overflow-x:hidden}
 body.studio-plan-view #studioRoomViews{top:auto;bottom:105px;left:8px;right:auto;width:230px;flex-direction:row;justify-content:center}
 body.studio-plan-view.studio-opening-selected #studioUI .studio-top{display:none}
 body.studio-plan-view.studio-opening-selected #studioRoomViews{top:8px;bottom:auto}
 body.studio-plan-view #studioDoorPanel{top:62px;bottom:100px;left:8px;right:auto;width:230px;max-height:none;padding:8px;overflow-y:auto}
 body.studio-plan-view #studioOpeningHelp{display:none}
 body.studio-plan-view #studioDoorPanel .studio-opening-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.studio-plan-view #studioContext{top:auto!important;bottom:105px;left:250px;right:8px;max-width:calc(100% - 258px)}
 body.studio-plan-view > #studioJames[data-scope="editor"]{top:auto!important;bottom:10px;left:50%!important;right:auto!important;transform:translateX(-50%);width:66px}
 body.studio-plan-view > #studioJames[data-scope="editor"] .james-circle{width:66px;height:auto}
 body.studio-plan-view > #studioJames[data-scope="editor"] .james-face{width:66px;height:66px}
 body.studio-plan-view > #studioJames[data-scope="editor"] #studioJamesHelp{top:auto;bottom:calc(100% + 10px);left:50%;right:auto;transform:translateX(-50%);max-height:calc(100dvh - 160px)}
 body.studio-plan-view #studioMessage{top:auto;bottom:95px;left:250px;right:8px;pointer-events:none}
}
@media(max-width:999px){
 body.studio-plan-view #showroom{height:100dvh;display:flex;flex-direction:column}
 body.studio-plan-view #showroom>header{flex-shrink:0}
 body.studio-plan-view #stage{flex:1;min-height:0;height:auto}
}
/* Bulkheads remain editable after the typed room builder, in Bay or Plan view. */
#studioBulkheadEditor{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:calc(var(--bulkhead-visible-height,100dvh) - 24px);overflow:auto;border:1px solid #d7c794;border-radius:18px;padding:20px;color:#23372d;background:#fffdf6;box-shadow:0 18px 70px #0006;font:16px/1.4 system-ui,sans-serif;scroll-padding:16px}
#studioBulkheadEditor::backdrop{background:#14271d70}
#studioBulkheadEditor header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#studioBulkheadEditor h2{margin:0;font-size:23px}
#studioBulkheadEditor h3{font-size:17px;margin:16px 0 10px}
#studioBulkheadEditor p{font-size:14px}
#studioBulkheadEditor button{min-height:44px;padding:9px 13px;border:1px solid #b3beb1;border-radius:9px;background:#fffdf6;color:#23372d;font:inherit;cursor:pointer}
#studioBulkheadEditor button[aria-pressed="true"],#studioBulkheadEditor button[type="submit"]{background:#253d30;color:#fff;border-color:#253d30}
#studioBulkheadEditor .bulkhead-ends,#studioBulkheadEditor .bulkhead-fields,#studioBulkheadEditor .bulkhead-secondary{display:flex;gap:10px}
#studioBulkheadEditor .bulkhead-ends[hidden]{display:none}
#studioBulkheadEditor .bulkhead-ends>*,#studioBulkheadEditor .bulkhead-fields>*{flex:1;min-width:0}
#studioBulkheadEditor label{font-size:14px;font-weight:650}
#studioBulkheadEditor input{box-sizing:border-box;display:block;width:100%;margin-top:5px;min-height:46px;padding:10px;border:1px solid #9aa99d;border-radius:8px;background:white;color:#23372d;font:18px system-ui,sans-serif}
#studioBulkheadEditor input:focus-visible,#studioBulkheadEditor button:focus-visible{outline:3px solid #d5ad40;outline-offset:2px}
#studioBulkheadEditor .bulkhead-width-note{font-size:12px;color:#526257}
#studioBulkheadEditor .bulkhead-secondary{margin-top:10px}
#studioBulkheadEditor [role="alert"]{color:#a32f23}
@media(max-width:600px){#studioBulkheadEditor{position:fixed;top:calc(var(--bulkhead-visible-top,0px) + 12px);bottom:auto;margin:0 auto;padding:16px}}
/* A nonmodal card leaves the actual plan visible and tappable while editing. */
#studioBulkheadEditor.is-plan{position:fixed;z-index:50;left:auto;right:16px;top:280px;bottom:auto;width:330px;margin:0;padding:14px;border-radius:14px;box-shadow:0 8px 30px #14271d30}
#studioBulkheadEditor.is-plan h2{font-size:20px}
#studioBulkheadEditor.is-plan>p:not([role="alert"]),#studioBulkheadEditor.is-plan h3,#studioBulkheadEditor.is-plan .bulkhead-width-note,#studioBulkheadEditor.is-plan [data-action="finish"]{display:none}
#studioBulkheadEditor.is-plan .bulkhead-ends{margin:10px 0}
#studioBulkheadEditor.is-plan form:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:10px}
#studioBulkheadEditor.is-plan .bulkhead-fields{grid-column:1/-1}
#studioBulkheadEditor.is-plan .bulkhead-secondary{display:contents}
#studioBulkheadEditor.is-plan button{font-size:13px;padding:7px 10px}
body.studio-bulkhead-plan-edit #studioContext,body.studio-bulkhead-plan-edit #studioHint{display:none!important}
@media(max-width:799px){
 #studioBulkheadEditor.is-plan{width:calc(100% - 16px);left:8px;right:8px;top:auto;bottom:calc(100dvh - var(--bulkhead-visible-top,0px) - var(--bulkhead-visible-height,100dvh) + 8px);max-height:calc(var(--bulkhead-visible-height,100dvh) - 20px);padding:12px}
 body.studio-bulkhead-plan-edit .studio-top,body.studio-bulkhead-plan-edit #studioCircleMenus,body.studio-bulkhead-plan-edit #studioJames{display:none!important}
}

@media(min-width:600px) and (max-width:999px) and (max-height:568px){
 body.studio-bulkhead-plan-edit #studioRoomViews{left:auto;right:8px;top:8px;bottom:auto;width:auto;flex-direction:column}
 #studioBulkheadEditor.is-plan{left:8px;right:auto;top:90px;bottom:auto;width:270px;max-height:calc(var(--bulkhead-visible-height,100dvh) - 100px)}
 body.studio-bulkhead-plan-edit .studio-top,body.studio-bulkhead-plan-edit #studioCircleMenus,body.studio-bulkhead-plan-edit #studioJames{display:none!important}
}

/* Keep Ask James clear of the full-width choices on a phone. */
@media(max-width:599px){
 body.studio-catalog-open > #studioJames[data-scope="editor"]{top:auto!important;bottom:8px;left:50%!important;right:auto!important;transform:translateX(-50%);width:66px}
 body.studio-catalog-open > #studioJames[data-scope="editor"] .james-circle{width:66px}
 body.studio-catalog-open > #studioJames[data-scope="editor"] .james-face{width:66px;height:66px}
 body.studio-catalog-open > #studioJames[data-scope="editor"]:has(.james-options:not([hidden])) .james-label{display:none}
 body.studio-catalog-open > #studioJames[data-scope="editor"] #studioJamesHelp{top:auto;bottom:calc(100% + 10px);left:50%;right:auto;transform:translateX(-50%);max-height:calc(100dvh - 160px)}
}
@media(max-width:599px) and (max-height:600px){
 body.studio-catalog-open > #studioJames[data-scope="editor"]{width:44px}
 body.studio-catalog-open > #studioJames[data-scope="editor"] .james-circle{width:44px}
 body.studio-catalog-open > #studioJames[data-scope="editor"] .james-face{width:44px;height:44px}
 body.studio-catalog-open > #studioJames[data-scope="editor"] .james-options{font-size:10px;min-height:32px;margin-top:4px;padding:4px 2px}
}

/* Phone editing keeps the room, rather than the duplicate showroom header, in view. */
.studio-paint-scroll-hint{display:none}
@media(max-width:599px){
 body.studio-editing #showroom{height:100dvh;display:flex;flex-direction:column}
 body.studio-editing #showroom>header{display:none}
 body.studio-editing #stage{flex:1;min-height:0;height:auto}
 body.studio-planning #studioUI .studio-top{display:flex;flex-wrap:wrap;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));width:auto;gap:6px;padding:6px;max-height:none;overflow:visible}
 body.studio-planning #studioUI .studio-ranges{width:100%;padding:3px;gap:3px}
 body.studio-planning #studioUI .studio-ranges button{flex:1;min-width:0;min-height:44px;padding:7px;font-size:13px}
 body.studio-planning #studioUI .studio-actions{display:flex;flex-wrap:nowrap;width:100%;gap:4px;overflow-x:auto;align-items:stretch}
 body.studio-planning #studioUI .studio-actions button{flex:1 1 0;min-width:0;min-height:44px;padding:5px 4px;font-size:12px;line-height:1.2;white-space:normal}
 body.studio-planning #studioUI .studio-actions #studioUndo{flex:0 0 44px}
 body.studio-planning #studioUI .studio-actions #studioClose{flex:1.25 1 0;position:static;order:-3;margin:0;box-shadow:none;white-space:normal}
 body.studio-plan-view.studio-opening-selected #studioUI .studio-top{display:none}
 #studioUI #studioLayout[data-visual="true"][data-context="paint"]{scrollbar-width:thin;scrollbar-color:#8a9b8c #fffef7}
 #studioLayout[data-context="paint"] #studioFinishHeading{margin-bottom:10px;padding:7px 10px}
 #studioLayout[data-context="paint"] .studio-paint-note{margin-bottom:12px;padding:8px 10px;font-size:12px;line-height:1.35}
 #studioLayout[data-context="paint"] .studio-paint-scroll-hint{display:block;margin-top:6px;font-weight:600;color:#405b48}
 #studioLayout #studioRoomPaintColours{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
 #studioUI #studioLayout[data-visual="true"] #studioRoomPaintColours .studio-visual-choice{gap:4px;min-height:44px}
 #studioLayout #studioRoomPaintColours .studio-room-paint-chip{width:64px;height:64px;max-width:100%;border-width:2px}
 #studioLayout[data-visual="true"] #studioRoomPaintColours .studio-choice-copy{display:flex;align-items:center;justify-content:center;min-height:34px;padding:4px 5px;font-size:12px;line-height:1.25;overflow-wrap:normal}
}