/* Compact camera and controls for the phone studio; the artwork itself is unchanged. */
.mobile-preview-bar,.mobile-preview-caption,.mobile-text-label,.mobile-text-size,.mobile-contrast-note{display:none}
.mobile-preview-window{display:contents}
.mobile-text-options{display:contents}
.studio-flow[data-studio-step=adjust] .selected-artwork{z-index:5}
@media(max-width:1023px){
 .studio-flow.design-dialog{inset:var(--studio-viewport-top,0px) 0 auto;height:min(100dvh,var(--studio-viewport-height,100dvh));max-height:min(100dvh,var(--studio-viewport-height,100dvh))}
 .studio-flow .designer{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:0;gap:0;min-height:0}
 .studio-flow .design-visual,.studio-flow.placing .design-visual{--mobile-preview-height:168px;display:flex;flex-direction:column;justify-content:start;padding:8px 12px 7px;overflow:hidden;min-width:0;min-height:0;background:#edf1f7}
 .studio-flow[data-studio-step=adjust] .design-visual{--mobile-preview-height:210px}
 .studio-flow[data-studio-step=design] .design-visual{--mobile-preview-height:140px}
 .studio-flow[data-studio-step=review] .design-visual{--mobile-preview-height:190px}
 .mobile-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;width:100%;margin-bottom:4px}
 .mobile-preview-bar>span{font-size:11px;font-weight:600;color:#41516b;letter-spacing:.01em}
 .mobile-preview-bar>div{display:flex;gap:2px;padding:3px;border:1px solid #dbe2ee;border-radius:9px;background:#fff}
 .mobile-preview-bar button{min-height:32px;padding:5px 10px;font-size:11px;font-weight:550;border-radius:6px;color:#63718a;white-space:nowrap}
 .mobile-preview-bar [aria-pressed=true]{color:#fff;background:#263e65}
 .mobile-preview-bar button:disabled{display:none}
 .mobile-preview-window{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;width:100%;height:var(--mobile-preview-height);flex:none;border-radius:12px;background:#f7f8fa;border:1px solid #dce3ed}
 .studio-flow .garment-stage,.studio-flow.placing .garment-stage{width:min(100%,var(--mobile-preview-height));height:auto;aspect-ratio:1;flex:none;border:0;background:transparent!important;margin:0;overflow:visible;border-radius:0}
 .studio-flow[data-preview-detail=true] .garment-stage{width:100%;height:auto}
 .studio-flow[data-preview-detail=true] #name-overlay{filter:drop-shadow(.1px .12px .08px #0002)}
 .studio-flow[data-studio-step=adjust][data-preview-detail=true] .art-transform-handle{display:none}
 .studio-flow[data-studio-step=adjust][data-preview-detail=true] .selected-artwork{outline-width:.25px}
 .studio-flow .garment-canvas{will-change:transform}
 .mobile-preview-caption{display:block;width:100%;margin:6px 0 0;text-align:center;font-size:10px;line-height:1.4;color:#53657f}
 .studio-flow .garment-views{margin:0 0 5px;order:-1;flex-wrap:nowrap;overflow-x:auto;justify-content:start;padding:0 1px}
 .studio-flow .garment-views button{flex:none;font-size:11px;min-height:32px}
 .studio-flow .design-controls{width:100%;min-height:0;height:auto;padding:0 16px 18px;scroll-padding-block:54px 18px;overscroll-behavior:contain}
 .studio-flow .design-buy{position:relative;inset:auto;bottom:auto;margin:0;min-height:68px;padding:10px 16px max(10px,env(safe-area-inset-bottom));box-shadow:0 -4px 16px #233e6008;z-index:8}
 .studio-flow .studio-next,.studio-flow .studio-back,.studio-flow .design-buy #add-design{min-height:46px;font-size:14px}
 .studio-flow .studio-stepper{padding:6px 0;min-height:52px;border-bottom-color:#e1e7f0}
 .studio-flow .studio-stepper button{min-height:40px;font-size:11px;gap:5px;color:#5e6d84}
 .studio-flow .studio-stepper button:disabled{color:#9ba4b2}
 .studio-flow .studio-stepper [aria-current=step]{color:#2058db;background:#eaf0ff}
 .studio-flow .studio-step-heading{padding:14px 0 10px}
 .studio-flow .studio-step-heading>p:first-child{display:none}
 .studio-flow .studio-step-heading h2{font-size:24px}
 .studio-flow[data-studio-step=design] .studio-step-heading{display:none}
 .studio-flow .studio-design-tabs{margin:12px 0 12px;padding:3px}
 .studio-flow .studio-design-tabs>button{font-size:13px;min-height:40px;color:#50617c}
 .studio-flow .studio-design-tabs>button[aria-pressed=true]{font-weight:600;color:#2058db}
 .studio-flow[data-studio-step=design][data-editor-panel=name] fieldset[data-editor-pane=name]{display:flex!important;flex-direction:column;gap:0}
 .mobile-text-label{display:flex;align-items:center;justify-content:space-between;order:0;margin-bottom:5px;min-height:24px}
 .mobile-text-label label{font-size:13px!important;font-weight:600;color:#24344e;margin:0!important}
 #mobile-keyboard-done{display:none;font-size:12px;font-weight:600;color:#2058db;min-height:32px;padding:4px 8px}
 .studio-flow #full-name{order:1;min-height:50px;margin:0;border:1.5px solid #aebed7;border-radius:10px;padding:12px 14px;font-size:18px;line-height:1.3;color:#182b49;background:#fff;box-shadow:0 2px 7px #243b5b06;scroll-margin-block:56px 12px}
 .studio-flow #full-name:focus{border-color:#2b62ed;box-shadow:0 0 0 3px #2b62ed18;outline:none}
 .studio-flow .input-meta{order:2;margin:6px 0 9px;font-size:10px;color:#66748a}
 .studio-flow .input-meta>span:last-child{display:none}
 .mobile-text-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;order:3;min-width:0}
 .studio-flow .mobile-picker{margin:0;padding:0 10px;border:1px solid #dbe3ef;border-radius:9px;min-width:0}
 .studio-flow .mobile-picker>summary,.studio-flow .mobile-picker[open]>summary{min-height:50px;padding:8px 0;gap:5px;font-size:11px;color:#5a6980;flex-wrap:wrap;line-height:1.25}
 .studio-flow .mobile-picker summary strong{font-size:12px;color:#233d66;font-weight:600;overflow-wrap:anywhere}
 .studio-flow .mobile-picker summary>span:last-child{font-size:0;margin-left:auto}
 .studio-flow .mobile-picker summary>span:last-child:after{content:'⌄';font-size:16px;color:#5d7394}
 .studio-flow .mobile-picker[open]{grid-column:1/-1;border-color:#8ba9ed}
 .studio-flow .mobile-picker[open] summary>span:last-child:after{content:'⌃'}
 .studio-flow .thread-grid{gap:10px;grid-template-columns:repeat(8,minmax(0,1fr));padding:8px 0 14px}
 .studio-flow .thread-grid button{min-height:30px;min-width:30px}
 .studio-flow .font-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .mobile-text-size{display:flex;align-items:center;justify-content:space-between;gap:12px;order:4;min-height:54px;margin:8px 0;border:1px solid #dbe3ef;border-radius:9px;padding:6px 9px 6px 12px}
 .mobile-text-size>div:first-child{display:flex;align-items:center;gap:10px;font-size:12px;color:#586b86}
 .mobile-text-size output{font-size:13px;color:#203e6d;font-weight:600;font-variant-numeric:tabular-nums}
 .mobile-text-size>div:last-child{display:flex;gap:6px}
 .mobile-text-size button{min-height:40px;min-width:42px;border:1px solid #dbe4f3;border-radius:7px;color:#2458ce;background:#f0f4fc;font-size:21px}
 .mobile-text-size button:disabled{opacity:.4}
 .studio-flow .studio-finish-options{order:5;gap:8px;margin:1px 0 0}
 .studio-flow .studio-finish-options button{min-height:58px;gap:5px;padding:9px 12px;border-radius:9px}
 .studio-flow .studio-finish-options strong{font-size:13px}.studio-flow .studio-finish-options span{font-size:10px;color:#596c88}
 .studio-flow .studio-finish-options [aria-pressed=true]{border-width:1.5px;background:#eef3ff}
 .studio-flow #fit-status{order:7;font-size:12px;line-height:1.5;margin:10px 0 0}
 .studio-flow[data-studio-step=design] #fit-status:not(.warning){display:none}
 .studio-flow #fit-status.warning{color:#8c4319;background:#fff3e6;border:1px solid #f3d6b7;border-radius:8px;padding:10px}
 .mobile-contrast-note:not([hidden]){display:flex;align-items:center;gap:8px;justify-content:space-between;order:4;padding:9px 10px;margin:0 0 8px;background:#fff5e8;border-radius:8px;font-size:11px;line-height:1.4;color:#81521d}
 .mobile-contrast-note button{flex:none;max-width:110px;font-size:11px;line-height:1.35;font-weight:600;color:#234fbb;min-height:40px}
 .studio-flow .design-controls .product-pills{margin-bottom:14px}
 .studio-flow #garment-colours .colour-button{width:32px;height:32px;min-width:32px;min-height:32px}
 .studio-flow .garment-colour-row>div{gap:12px;padding:2px 4px 8px}
 .studio-flow .photo-selection-bar{width:100%;margin:6px 0 0}
 .studio-flow .photo-adjust-tools{margin:10px 0 12px}
 .studio-flow #editor-adjust-panel{padding-top:12px}
 .studio-flow .studio-review-estimate{border:1px solid #dce5f5;background:#edf3ff}
 .studio-flow[data-mobile-keyboard=true] .design-visual{--mobile-preview-height:104px;padding-top:4px;padding-bottom:4px}
 .studio-flow[data-mobile-keyboard=true] .mobile-preview-bar{min-height:30px;margin-bottom:2px}
 .studio-flow[data-mobile-keyboard=true] .mobile-preview-caption{font-size:9px;margin-top:3px}
 .studio-flow[data-mobile-keyboard=true] .design-buy{display:none}
 .studio-flow[data-mobile-keyboard=true] .designer{grid-template-rows:auto minmax(0,1fr)}
 .studio-flow[data-mobile-keyboard=true] .studio-stepper,.studio-flow[data-mobile-keyboard=true] .studio-design-tabs{display:none!important}
 .studio-flow[data-mobile-keyboard=true] #mobile-keyboard-done{display:inline-block}
 .studio-flow[data-mobile-compact=true] .design-visual{--mobile-preview-height:84px}
}
@media(max-width:599px) and (max-height:700px){
 .studio-flow .design-visual{--mobile-preview-height:130px}
 .studio-flow[data-studio-step=design] .design-visual{--mobile-preview-height:104px}
 .studio-flow[data-studio-step=adjust] .design-visual{--mobile-preview-height:150px}
 .studio-flow[data-studio-step=review] .design-visual{--mobile-preview-height:145px}
 .studio-flow .studio-step-heading>p:last-child{margin-top:5px}
}
@media(min-width:600px) and (max-width:1023px) and (max-height:600px){
 .studio-flow .designer{grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);grid-template-rows:minmax(0,1fr) auto}
 .studio-flow .design-visual,.studio-flow.placing .design-visual{grid-column:1;grid-row:1;justify-content:center;--mobile-preview-height:min(220px,42dvh)}
 .studio-flow .design-controls{grid-column:2;grid-row:1;padding-inline:12px}
 .studio-flow .design-buy{grid-column:1/-1;grid-row:2}
 .studio-flow[data-mobile-keyboard=true] .designer{grid-template-rows:minmax(0,1fr)}
}
@media(max-width:359px){
 .studio-flow .design-controls{padding-inline:12px}.mobile-preview-bar button{padding-inline:8px;font-size:10px}.mobile-preview-bar>span{font-size:10px}
 .mobile-text-size>div:first-child{gap:6px;font-size:11px}.mobile-text-size output{font-size:12px}
 .studio-flow .mobile-picker{padding-inline:8px}.studio-flow .mobile-picker>summary{font-size:10px}
 .studio-flow .thread-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}