/* STUDIO 4 MOBILE: fixed-photo + bottom workstation layout */
@media(max-width:800px){
 html,body{max-width:100%;overflow-x:clip}
 .topbar{display:grid!important;grid-template-columns:minmax(25px,1fr) max-content minmax(105px,1fr)!important;align-items:center;gap:6px;width:100%;padding:0 10px}
 .topbar>a{width:max-content;min-width:0;justify-self:start;line-height:1}
 .topbar .wordmark{width:max-content;min-width:0;justify-self:center;text-align:center;white-space:nowrap;font-size:14px}
 .topbar #export{width:max-content!important;max-width:none!important;min-width:0;justify-self:end;white-space:nowrap;font-size:10px;padding:7px 9px}
 .s4-color-switcher{margin-bottom:10px!important;position:sticky;top:-10px;z-index:3;background:#242426;padding:5px 0}
 .s4-color-switcher button{flex:1 1 auto;text-align:center}
 .s4-sub{margin-top:0;padding-top:8px;border-top:0}
 .s4-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
 .s4-swatches button{width:min(34px,7.4vw)!important;height:min(34px,7.4vw)!important;min-height:26px;justify-self:center}
}
@media(max-width:800px) and (min-height:480px){
 html:has(body.s4-photo-ready),body.s4-photo-ready{height:100%;overflow:hidden!important}
 body.s4-photo-ready .topbar{position:fixed!important;top:0;right:0;left:0;height:58px;z-index:25}
 body.s4-photo-ready main.editor{position:fixed!important;top:58px;right:0;bottom:0;left:0;height:auto!important;width:100%!important;max-width:none!important;min-height:0!important;overflow:hidden!important;display:block!important;padding:0 10px!important;margin:0!important}
 body.s4-photo-ready .workspace{position:relative!important;box-sizing:border-box;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;padding:8px 0 max(6px,env(safe-area-inset-bottom))!important;margin:0!important;overflow:hidden!important}
 body.s4-photo-ready .workspace-heading{position:absolute!important;top:12px;right:10px;z-index:11;width:auto!important;margin:0!important;pointer-events:none}
 body.s4-photo-ready .workspace-heading>div{display:none!important}
 body.s4-photo-ready #uploadButton{pointer-events:auto;min-height:32px;max-width:112px;font-size:10px;padding:4px 9px;border-radius:50px;background:#1b1c1de6;border:1px solid #78654d;color:#ead1a9}
 body.s4-photo-ready #status{position:absolute!important;top:10px;left:10px;right:120px;z-index:12;width:auto;min-height:0;max-height:44px;overflow:hidden;margin:0!important;padding:5px 8px;font-size:10px;text-align:left;pointer-events:none}
 body.s4-photo-ready #status[data-state=idle],body.s4-photo-ready #status[data-state=success]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.s4-photo-ready #viewport{order:10!important;flex:1 1 0!important;min-height:128px!important;max-height:none!important;height:auto!important;width:100%!important;margin:0!important;border-radius:12px;box-shadow:none}
 body.s4-photo-ready .view-toolbar{order:20!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(150px,1.5fr) minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important;gap:5px!important;width:100%!important;min-width:0;margin:0!important;flex-wrap:nowrap}
 body.s4-photo-ready .view-toolbar>.zoom-controls{grid-column:auto!important;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:2px;padding:0!important;border:0!important}
 body.s4-photo-ready .zoom-controls button{height:37px!important;min-height:37px!important;min-width:35px;padding:4px 6px!important}
 body.s4-photo-ready .zoom-controls output{min-width:34px;max-width:43px;text-align:center;font-size:11px}
 body.s4-photo-ready .view-toolbar>button{grid-column:auto!important;min-width:0!important;width:100%!important;min-height:37px!important;height:37px!important;padding:4px 5px!important;font-size:10px!important;white-space:nowrap}
 body.s4-photo-ready #comparison{order:25;flex:0 0 auto;max-height:40px;margin:0}
 body.s4-photo-ready .canvas-hint{display:none!important}
 body.s4-photo-ready .s4-station{order:30!important;flex:0 0 auto!important;box-sizing:border-box;width:100%!important;min-width:0;height:clamp(195px,34dvh,325px)!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:14px!important;margin:0!important;scroll-margin:0!important}
 body.s4-photo-ready .s4-station.collapsed{height:auto!important;min-height:0!important}
 body.s4-photo-ready .s4-station-header{flex:0 0 auto!important;padding:8px 12px!important}
 body.s4-photo-ready .s4-station-header h2{font-size:15px!important;margin:1px 0 0!important}
 body.s4-photo-ready .s4-station-header small{font-size:8px!important}
 body.s4-photo-ready .s4-station-header button{min-height:33px;font-size:11px;padding:4px 10px}
 body.s4-photo-ready .s4-station-content{flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:10px 12px max(18px,env(safe-area-inset-bottom))!important}
 body.s4-photo-ready .s4-dock{order:40!important;position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;flex:0 0 auto!important;display:flex!important;justify-content:space-around!important;flex-wrap:nowrap!important;min-height:0!important;z-index:5!important;width:100%!important;margin:0!important;padding:4px 2px!important;gap:1px!important;border-radius:13px!important}
 body.s4-photo-ready .s4-tool{flex:1 1 0!important;min-width:0!important;min-height:49px!important;padding:3px 1px!important;display:flex!important;align-items:center;justify-content:center;gap:3px!important;white-space:nowrap;font-size:9px!important}
 body.s4-photo-ready .s4-tool-symbol{font-size:19px!important;line-height:1}
 body.s4-photo-ready .s4-station-content #alternatives{max-width:100%!important;width:100%!important;margin:8px 0}
 body.s4-photo-ready .s4-station-content #alternatives[hidden]{display:none!important}
 body.s4-photo-ready .s4-sliderhead{margin-bottom:3px}
 body.s4-photo-ready .s4-sliderhead strong{font-size:14px}
 body.s4-photo-ready .s4-sliderhead output{font-size:18px}
 body.s4-photo-ready .s4-sliderbox input{min-height:34px!important}
 body.s4-photo-ready .s4-chiprow{margin-bottom:9px}
 body.s4-photo-ready .s4-reset{margin-top:9px}
}
@media(max-width:390px) and (min-height:480px){
 body.s4-photo-ready .view-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 body.s4-photo-ready .view-toolbar>.zoom-controls{grid-column:1/-1!important;justify-content:center}
 body.s4-photo-ready #viewport{min-height:100px!important}
 body.s4-photo-ready .s4-station{height:clamp(172px,31dvh,260px)!important}
 body.s4-photo-ready .s4-tool{font-size:8px!important}
}
@media(max-width:800px) and (max-height:479px){body.s4-photo-ready .s4-station-content{max-height:50dvh;overflow:auto}}

@media(max-width:800px){
.topbar{display:flex!important;justify-content:space-between!important;align-items:center!important}
.topbar .wordmark{position:absolute!important;left:50%!important;transform:translateX(-50%);width:100px!important;max-width:100px!important;white-space:nowrap!important;text-align:center}
.topbar #export{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 112px!important;width:112px!important;min-width:112px!important;max-width:112px!important;overflow:visible!important}
}

@media(max-width:800px){.topbar>a{display:inline-flex!important;align-items:center;flex:0 0 30px!important;width:30px!important;min-width:30px!important}.topbar .wordmark{pointer-events:none!important}}
@media(max-width:345px){.topbar .wordmark{width:90px!important;max-width:90px!important;font-size:12px!important}.topbar #export{flex-basis:100px!important;width:100px!important;min-width:100px!important;max-width:100px!important}}

/* Keep one-click background removal accessible on compact phones. */
@media(max-width:390px) and (min-height:480px) and (max-height:650px){
 body.s4-photo-ready[data-s4-tool="ai"] .s4-station{height:210px!important}
 body.s4-photo-ready[data-s4-tool="ai"] #viewport{min-height:110px!important}
}