/* Keep the customer canvas first on phones/tablets; advanced options follow. */
.studio-logo-example{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 10px;margin-top:6px;border-radius:8px;background:#edf4ef;color:#244d39;font-size:11px;line-height:1.4}.studio-logo-example button{flex-shrink:0;min-height:36px;font-size:11px}
/* Header and color choices occupy their own rows, never the same sticky top. */
.studio-modal .studio-colorbar{position:relative!important;top:auto!important;z-index:10!important;flex-shrink:0}
.studio-modal .studio-head{z-index:20!important;flex-shrink:0}
.studio-modal .wizard-step-1 #quickRotateLayer{display:inline-flex!important;min-height:44px!important}
#customizerModal .customizer-card.wizard-step-6 .customizer-layout{flex:1!important;min-height:0!important;height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overflow-anchor:none}
#customizerModal .customizer-card.wizard-step-6 #mockupResults button img,
#customizerModal .customizer-card.wizard-step-6 #mockupResults button:first-child img{height:calc(100dvh - 470px)!important;min-height:0!important;max-height:600px!important;width:100%!important;object-fit:contain!important}
@media(max-width:780px){#customizerModal .customizer-card.wizard-step-6 #mockupResults button:first-child{min-height:0!important}#customizerModal .customizer-card.wizard-step-6 #mockupResults button img,#customizerModal .customizer-card.wizard-step-6 #mockupResults button:first-child img{height:calc(100dvh - 390px)!important;min-height:0!important;max-height:440px!important}}
@media(max-width:1099px){
 #customizerModal .wizard-step-1 .customizer-layout{display:flex!important;flex-direction:column!important;overflow-y:auto!important}
 #customizerModal .wizard-step-1 .designer-wrap{order:1!important;width:100%!important;display:flex!important;flex-direction:column!important;padding:10px!important;flex:none!important}
 #customizerModal .wizard-step-1 #studioSettings{order:2!important;display:block!important;width:100%!important;max-height:none!important;overflow:visible!important}
 #customizerModal .wizard-step-1 .designer-stage{display:block!important;order:2!important;height:42dvh!important;min-height:290px!important;max-height:440px!important;border-radius:14px!important}
 #customizerModal .wizard-step-1 .studio-canvas-head{order:1!important;display:block!important;padding:0 0 8px!important}
 #customizerModal .wizard-step-1 .editor-transform-panel{order:3!important;display:block!important;margin-top:8px!important}
 #customizerModal .wizard-step-1 .placement-tab-row{display:none!important}
 #customizerModal .wizard-step-1 .selected-placement-upload{flex-direction:row!important;gap:10px!important;align-items:center!important}
 #customizerModal .wizard-step-1 .selected-placement-copy{min-width:0!important;flex:1}
 #customizerModal .wizard-step-1 .placement-main-actions{width:auto!important;display:flex!important;gap:6px!important}
 #customizerModal .wizard-step-1 .placement-main-upload,#customizerModal .wizard-step-1 .placement-main-text{min-width:44px!important;width:auto!important;padding:10px!important}
 #customizerModal #customPlacementTabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #customizerModal #customPlacementTabs button{min-height:44px!important;margin:0!important;padding:12px!important}
 #customizerModal .designer-zoom-tools{display:flex!important}
}
.all-colors{width:100%;min-height:44px;border:1px solid #d8dfdc;border-radius:8px;background:white;color:#15382a;padding:8px;margin:0 0 12px}
.logo-controls:focus-within{border-color:#34765b}