/* Phone controls use normal page flow rather than nested, shrinking scroll panes. */
.phoneAreaPicker{display:none}
:focus-visible{outline:2px solid #745037;outline-offset:4px}
@media(max-width:900px){
 .designerGrid{gap:18px}
 .designerGrid>div:first-child .copy{margin-bottom:12px}
 .designerGrid #resetPanel{margin-top:12px}
 #renderStage.visualPanel{height:clamp(230px,32svh,290px)!important;top:72px;transition:none}
 .configColumn{height:auto!important;min-height:0;display:block!important}
 .configColumn .ggControls{display:block!important;flex:none!important;height:auto!important;max-height:none;overflow:visible!important;padding:14px}
 .configColumn .ggPane.active{flex:none!important;height:auto!important;max-height:none!important;overflow:visible!important;scrollbar-gutter:auto;padding-right:0;overscroll-behavior:auto}
 .configColumn .ggTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
 .ggTabs button{width:100%;min-height:48px;padding:8px 2px;font-size:11px}
 .phoneAreaPicker{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;font-size:13px;line-height:1.4;margin-bottom:12px}
 .phoneAreaPicker select{width:100%;min-height:44px;border:1px solid #aaa;background:#fff;color:#111;padding:8px;font-size:16px}
 .configColumn .downloadDesign{width:100%;margin-top:14px}
 .ggSwatch{cursor:pointer}.ggSwatch small{font-size:12px!important}
 .ggRange{min-height:44px}.colourWheel{touch-action:none}
 .configColumn .ggTemplateLineThumb{height:95px}
 .ggDimensionSteps button{min-height:36px}
 .scroll{scroll-snap-type:x proximity}.scroll img{scroll-snap-align:start}
 .ghanArrow{min-width:44px;min-height:44px}
 .acc button{min-height:48px}
 .form input,.form textarea{font-size:16px;line-height:1.5}
 .contactLinks a{display:inline-block;min-height:44px;padding:6px 0}
 .walkthroughDialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);overflow:auto}
}
@media(max-width:900px) and (max-height:550px){#renderStage.visualPanel{position:relative;top:auto;height:250px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
/* Avoid large offscreen SVG filter surfaces in mobile WebKit. */
@media(max-width:900px){
 #panelSvg,.realSpace #panelSvg{filter:none!important;transition:none!important}
 #panelSvg .ggProcess{mix-blend-mode:normal!important}
 .frostSample:after,.frostSampleV45:after{backdrop-filter:none!important}
}
.phoneCanvas{display:none}
@media(max-width:900px){.phoneRaster #panelSvg{display:none!important}.phoneRaster .phoneCanvas{display:block;width:auto;max-width:90%;background:rgba(255,255,255,.2);touch-action:pan-y}}