/* Keep the artwork and controls in one bounded editing surface. */
#pack-stage{margin-bottom:18px}#pack-stage .pack-top h2{font-size:24px}
#pack-finish h2{font-size:27px;font-weight:550;margin:0}
body:not(.demo-active) .pack-adjust{padding:0 20px 20px}
body:not(.demo-active) .pack-adjust>.adjust-return{justify-content:flex-end;margin-bottom:12px}
body:not(.demo-active) .pack-adjust>.beta-notice{display:none}
body:not(.demo-active) .editor-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:min(740px,calc(var(--visible-height,100dvh) - 28px));min-height:300px;gap:20px;align-items:stretch;scroll-margin-top:14px}
body:not(.demo-active) .editor-workspace .live-preview-rail{position:relative;inset:auto;display:flex;flex-direction:column;max-height:none;min-height:0;margin:0;padding:16px;overflow:hidden;border-radius:14px}
body:not(.demo-active) .editor-workspace .live-preview-heading{flex:0 0 auto;display:flex;margin-bottom:12px}
body:not(.demo-active) .editor-workspace .live-preview-body{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:0;align-items:stretch}
body:not(.demo-active) .editor-workspace .live-preview-image{width:100%;height:auto;flex:1 1 auto;min-height:0;padding:10px}
body:not(.demo-active) .editor-workspace .live-preview-image canvas{max-width:100%;max-height:100%;min-height:0;min-width:0}
body:not(.demo-active) .editor-workspace .live-preview-info{display:block;flex:0 0 auto;padding:12px 0 0}
body:not(.demo-active) .editor-workspace .live-preview-info p{margin:5px 0;font-size:11px}
body:not(.demo-active) .editor-workspace .live-preview-navigation{display:flex;justify-content:center;gap:12px}
body:not(.demo-active) .editor-workspace .live-preview-hint{display:none}
body:not(.demo-active) .editor-workspace .compare-buttons{margin:8px 0 0;flex:0 0 auto}
body:not(.demo-active) .editor-workspace .pack-preview-tabs{margin:10px 0 0;flex:0 0 auto}
#editor-live-status{font-size:12px;line-height:1.4;color:#294e3b;margin:12px 0 0;flex:0 0 auto;text-align:center}
.editor-controls{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0;background:#fffdf7;border:1px solid #d2d8c7;border-radius:14px;overflow:hidden}
.editor-tabs{display:flex;gap:4px;padding:10px 8px;border-bottom:1px solid #d8ddcf;background:#f0f2e8;overflow-x:auto;flex-shrink:0}
.editor-tabs button{flex:1;white-space:nowrap;font:inherit;font-size:12px;min-height:44px;padding:8px 6px;border:1px solid #b7a36b;border-radius:8px;cursor:pointer}
.editor-tabs button[aria-selected=true]{outline:2px solid #31523c;outline-offset:-3px;font-weight:700}
#editor-context{padding:10px 16px;border-bottom:1px solid #e0e3d7;background:#f4f5ed}
#editor-context p{font-size:12px;line-height:1.55;margin:0;color:#40563e}
#editor-context button{font:inherit;font-size:12px;font-weight:600;min-height:44px;max-width:100%;border:1px solid #b5a071;border-radius:8px;padding:8px 12px;margin-top:8px;cursor:pointer}
body:not(.demo-active) #editor-tool-panel{overflow:auto;overscroll-behavior:contain;min-height:0;padding:18px;scroll-padding:14px;outline-offset:-3px}
body:not(.demo-active) #editor-tool-panel :is(button,input,select,textarea,summary,h2){scroll-margin-block:14px}
body:not(.demo-active) #editor-tool-panel .settings-panel{padding:0;border:0;background:transparent;box-shadow:none}
body:not(.demo-active) #editor-tool-panel .section-heading{padding-top:0;margin-top:0;border:0}
body:not(.demo-active) #editor-tool-panel .step-number{display:none}
body:not(.demo-active) #editor-tool-panel .stage-next{display:none}
body:not(.demo-active) #editor-tool-panel .text-composer{border:0;margin:0;padding:0}
body:not(.demo-active) #editor-tool-panel .text-composer>summary{display:none}
body:not(.demo-active) #editor-tool-panel .text-composer-body{padding:0}
body:not(.demo-active) #editor-tool-panel .text-composer-body>p:first-child{display:none}
body:not(.demo-active) #editor-tool-panel #text-photo-name{margin:8px 0 0}
body:not(.demo-active) #editor-tool-panel #text-scope-note{font-size:11px;margin:6px 0 12px}
body:not(.demo-active) #editor-tool-panel .text-studio-entry{border-top:1px solid #dde2d4;margin-top:18px;padding-top:14px}
.quick-text-style{border-top:1px solid #dbe0d2;margin-top:16px;padding-top:6px}.quick-text-style>summary{min-height:44px;cursor:pointer;display:flex;align-items:center;font-size:13px}.quick-text-style>summary:after{content:'＋';margin-left:auto}
body:not(.demo-active) .editor-workspace:not([data-tool=photos]) #photo-tools,
body:not(.demo-active) .editor-workspace[data-tool=photos] .settings-panel,
body:not(.demo-active) .editor-workspace:not([data-tool=background]) #cutout-panel,
body:not(.demo-active) .editor-workspace[data-tool=background] #settings-form,
body:not(.demo-active) .editor-workspace:not([data-tool=export]) #export-stage,
body:not(.demo-active) .editor-workspace[data-tool=export] #style-stage,
body:not(.demo-active) .editor-workspace[data-tool=text] #style-stage>:not(#text-section),
body:not(.demo-active) .editor-workspace[data-tool=style] #text-section{display:none!important}
body:not(.demo-active) .editor-workspace[data-shop=true] #text-section .text-composer-body,
body:not(.demo-active) .editor-workspace[data-shop=true] :is(#collection-section,#framing-section,#auto-layout-section){display:none!important}
body:not(.demo-active) #editor-tool-panel .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:12px}
body:not(.demo-active) #editor-tool-panel .photo-card{width:auto;min-width:0}
.editor-tabs :focus-visible,#editor-context :focus-visible{outline:3px solid #31523c;outline-offset:-3px}
.demo-active .editor-controls{display:contents}.demo-active .editor-tabs,.demo-active #editor-context,.demo-active #editor-live-status{display:none}
@media(max-width:760px){
 body:not(.demo-active) .pack-adjust{padding:0 10px 14px}
 body:not(.demo-active) .editor-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:210px minmax(0,1fr);gap:10px;height:calc(var(--visible-height,100dvh) - 20px)}
 body:not(.demo-active) .editor-workspace .live-preview-rail{padding:10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:6px}
 body:not(.demo-active) .editor-workspace .live-preview-heading{display:none}
 body:not(.demo-active) .editor-workspace .live-preview-body{display:contents}
 body:not(.demo-active) .editor-workspace .live-preview-image{grid-column:1;grid-row:1/4;height:100%;padding:5px}
 body:not(.demo-active) .editor-workspace .live-preview-info{grid-column:2;grid-row:1;padding:0}
 body:not(.demo-active) .editor-workspace .live-preview-info strong{font-size:12px}
 body:not(.demo-active) .editor-workspace .live-preview-navigation{gap:5px;margin-top:3px}
 body:not(.demo-active) .editor-workspace .compare-buttons{display:none}
 body:not(.demo-active) .editor-workspace #pack-preview-tabs{grid-column:2;grid-row:3;margin:0}
 body:not(.demo-active) .editor-workspace #pack-preview-tabs>span{display:none}
 body:not(.demo-active) .editor-workspace .pack-preview-tabs{display:flex;gap:3px;margin:0;flex-wrap:wrap;padding:0}
 body:not(.demo-active) .editor-workspace .pack-preview-tabs button{font-size:10px;min-height:32px;padding:4px;flex:1}
 #editor-live-status{display:block;grid-column:2;grid-row:2;font-size:10px;text-align:left;margin:0}
 #editor-context{padding:8px 12px}.editor-tabs{padding:7px;gap:3px}.editor-tabs button{font-size:11px;padding:6px}
 body:not(.demo-active) #editor-tool-panel{padding:14px}
 body:not(.demo-active) #editor-tool-panel :is(input,textarea,select){font-size:16px}
}
/* A short window or open keyboard keeps a compact image beside the fields. */
@media(max-height:500px){body:not(.demo-active) .editor-workspace{grid-template-columns:minmax(76px,.55fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px;min-height:170px}}
body.preview-short:not(.demo-active) .editor-workspace{grid-template-columns:minmax(76px,.55fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px;min-height:170px}
body.preview-short:not(.demo-active) .editor-workspace .live-preview-rail{display:flex;padding:6px;gap:0}
body.preview-short:not(.demo-active) .editor-workspace .live-preview-body{display:flex;min-height:0}
body.preview-short:not(.demo-active) .editor-workspace .live-preview-image{flex:1;height:auto}
body.preview-short:not(.demo-active) .editor-workspace .live-preview-info{display:none}
body.preview-short:not(.demo-active) .editor-workspace .live-preview-heading,body.preview-short:not(.demo-active) .editor-workspace .compare-buttons,body.preview-short:not(.demo-active) #editor-live-status{display:none}
body.preview-short:not(.demo-active) .editor-workspace .pack-preview-tabs{flex-wrap:wrap}
body.preview-short:not(.demo-active) .editor-workspace .pack-preview-tabs button{font-size:9px;min-height:28px;padding:3px}
body.preview-short:not(.demo-active) #editor-context{padding:5px 8px}body.preview-short:not(.demo-active) #editor-context p{font-size:10px}
body.preview-short:not(.demo-active) #editor-tool-panel .text-two{grid-template-columns:1fr}
body.preview-short:not(.demo-active) .editor-tabs{padding:4px}.editor-workspace [hidden]{display:none!important}
body.preview-short:not(.demo-active) .editor-workspace [data-preview]:not([aria-pressed=true]){display:none}
body.preview-short:not(.demo-active) #editor-live-status{display:block;font-size:9px;margin-top:6px}