/* A single scoped phone layout. Layered important declarations retire the older
   competing phone overrides without escalating their repeated-ID selectors. */
#mobileStageExpand{display:none}
@layer studio-stage-tools {
  #stageAddLogo{display:none}
  #customizerModal .arctic-simple[data-simple-step="0"] #stageAddLogo,
  #customizerModal .arctic-simple[data-simple-step="0"] .designer-zoom-tools{
    display:flex!important;position:absolute!important;left:10px!important;right:auto!important;z-index:25!important;
    align-items:center;gap:3px;padding:3px;border:1px solid #d6dfd9;border-radius:12px;background:#fff;color:#1f3d2f;
  }
  #customizerModal .arctic-simple[data-simple-step="0"] #stageAddLogo{
    top:8px!important;bottom:auto!important;min-height:40px;padding:6px 10px;font-size:12px;font-weight:600;
  }
  #customizerModal .arctic-simple[data-simple-step="0"] .designer-zoom-tools{top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;width:auto!important}
  #customizerModal .arctic-simple[data-simple-step="0"] .designer-zoom-tools button{min-width:35px;min-height:36px;padding:3px 6px;font-size:12px}
  #customizerModal .arctic-simple[data-simple-step="0"] #designerZoomValue{display:none}
  @media(max-width:780px){
    #customizerModal .mobile-studio.mobile-stage-expanded #designerStage{touch-action:none!important}
    #customizerModal .mobile-studio.mobile-keyboard[data-simple-step="0"] #stageAddLogo,
    #customizerModal .mobile-studio.mobile-keyboard[data-simple-step="0"] .designer-zoom-tools{display:none!important}
  }
}
@layer studio-mobile-focus {
  @media(max-width:780px){
    #customizerModal .mobile-studio[data-simple-step="0"] #mobileStageExpand{
      display:block!important;position:absolute;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:25;
      min-height:44px;padding:6px 12px;border:1px solid #d6dfd9;border-radius:999px;background:#fff;color:#1f3d2f;font-size:12px;font-weight:600;
    }
    #customizerModal .mobile-studio.mobile-keyboard[data-simple-step="0"] #mobileStageExpand{display:none!important}
    #customizerModal .mobile-studio.mobile-stage-expanded > :not(.customizer-layout),
    #customizerModal .mobile-studio.mobile-stage-expanded .customizer-layout > :not(.designer-wrap),
    #customizerModal .mobile-studio.mobile-stage-expanded .designer-wrap > :not(#designerStage,#studioStageControls){display:none!important}
    #customizerModal .mobile-studio.mobile-stage-expanded .customizer-layout{padding:0!important;overflow:hidden!important}
    #customizerModal .mobile-studio.mobile-stage-expanded .designer-wrap,
    #customizerModal .mobile-studio.mobile-stage-expanded[data-simple-step="0"] #designerStage{height:100%!important;max-height:none!important}
  }
}
@layer studio-mobile {
  @media(max-width:780px){
    body.studio-open #portraitOnlyOverlay{display:none!important}
    #customizerModal .mobile-studio{
      position:fixed!important;inset:auto!important;left:0!important;top:var(--studio-visible-top,0px)!important;
      width:100%!important;max-width:100%!important;height:var(--studio-visible-height,100dvh)!important;
      max-height:var(--studio-visible-height,100dvh)!important;min-height:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important;
      display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:0!important;
    }
    #customizerModal .mobile-studio .studio-head{height:46px!important;min-height:46px!important;padding:2px 10px!important}
    #customizerModal .mobile-studio .studio-title h2{font-size:15px!important;font-weight:600!important}
    #customizerModal .mobile-studio #simpleProgress{display:none!important}
    #customizerModal .mobile-studio #simpleSteps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;flex:none!important;height:42px!important;min-height:42px!important;padding:2px 12px 6px!important;gap:6px!important;background:#fff!important}
    #customizerModal .mobile-studio #simpleSteps button{min-height:34px!important;height:34px!important;padding:4px 8px!important;border-radius:9px!important;font-size:13px!important}
    #customizerModal .mobile-studio .customizer-layout{display:block!important;flex:1 1 0!important;min-height:0!important;height:auto!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;scroll-padding:12px;overflow-anchor:none}
    #customizerModal .mobile-studio .designer-wrap{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;gap:0!important;overflow:visible!important}
    #customizerModal .mobile-studio[data-simple-step="0"] #simpleAreas{order:3!important;margin:0!important;padding:6px 12px!important;max-height:none!important}
    #customizerModal .mobile-studio #simpleSideTabs{order:1!important;flex:none!important}
    #customizerModal .mobile-studio[data-simple-step="0"] #designerStage{order:2!important;flex:none!important;width:100%!important;height:clamp(270px,48dvh,430px)!important;min-height:0!important;max-height:none!important;margin:0!important;border-radius:0!important}
    #customizerModal .mobile-studio #simpleRightPanel{order:3!important;display:flex!important;flex:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important}
    #customizerModal .mobile-studio #simpleRightContent{display:flex!important;flex-direction:column!important;flex:none!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:0!important}
    #customizerModal .mobile-studio #simpleTools{order:0!important;display:flex!important;flex-direction:column!important;width:100%!important;padding:8px 12px!important;background:#fff!important}
    #customizerModal .mobile-studio #simpleTools>*{flex:none!important}
    #customizerModal .mobile-studio .simple-tool-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:0!important}
    #customizerModal .mobile-studio .simple-tool-row button{height:48px!important;min-height:44px!important;padding:3px!important;border-radius:9px!important;font-size:12px!important}
    #customizerModal .mobile-studio #simpleContext{order:1!important;min-height:0!important;max-height:none!important;overflow:visible!important}
    #customizerModal .mobile-studio #simpleTools>.transform-size-control{order:2!important;display:block!important;margin:8px 0 0!important;padding:0!important}
    #customizerModal .mobile-studio #simpleTools[data-active="Text"]>.transform-size-control{display:none!important}
    #customizerModal .mobile-studio #simpleTools input[type="range"]{height:32px!important}
    #customizerModal .mobile-studio #simpleContext #studioColorBar{display:none!important}
    #customizerModal .mobile-studio #simpleTools[data-active="Color"] #simpleContext #studioColorBar{display:flex!important;flex-wrap:wrap!important;height:auto!important;max-height:none!important;overflow:visible!important;margin:8px 0 0!important}
    #customizerModal .mobile-studio #textEditorPanel{position:static!important;padding:8px 0!important;margin:0!important;max-height:none!important;overflow:visible!important}
    #customizerModal .mobile-studio #textEditorPanel textarea{font-size:16px!important;line-height:1.4!important;min-height:64px!important;height:72px!important;scroll-margin:12px}
    #customizerModal .mobile-studio #textEditorPanel input,#customizerModal .mobile-studio #textEditorPanel select{font-size:16px!important;min-height:40px!important}
    #customizerModal .mobile-studio #simpleUpload{order:3!important;display:flex!important;flex-wrap:wrap!important;width:100%!important;margin:0!important;padding:8px 12px!important}
    #customizerModal .mobile-studio #simpleSampleChips{order:4!important;display:block!important;width:100%!important;max-height:none!important;margin:0!important;padding:4px 12px 12px!important}
    #customizerModal .mobile-studio .sample-chips-label{display:block!important;font-size:12px!important;margin-bottom:6px!important}
    #customizerModal .mobile-studio .sample-chips-row{display:flex!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px!important;scroll-snap-type:x proximity}
    #customizerModal .mobile-studio .sample-chips-row button{flex:0 0 48px!important;min-width:48px!important;min-height:48px!important;padding:3px!important;scroll-snap-align:start}
    #customizerModal .mobile-studio .sample-chips-row img{width:38px!important;height:38px!important;object-fit:contain}
    #customizerModal .mobile-studio #simpleMore{position:relative!important;inset:auto!important;width:100%!important;margin:8px 0 0!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;border:1px solid #dfe5e1!important;border-radius:12px!important;padding:12px!important}
    #customizerModal .mobile-studio #simpleMore:not([open]){display:none!important}
    #customizerModal .mobile-studio #simpleMore[open]{display:block!important}
    #customizerModal .mobile-studio #wizardFooter{position:relative!important;inset:auto!important;transform:none!important;order:10!important;display:flex!important;flex:0 0 auto!important;flex-wrap:wrap!important;width:100%!important;height:auto!important;min-height:0!important;gap:8px!important;margin:0!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;background:#fff!important;box-shadow:0 -1px 0 #e2e7e4!important;z-index:30!important}
    #customizerModal .mobile-studio #wizardFooter button{height:46px!important;min-height:46px!important;font-size:14px!important;border-radius:11px!important}
    #customizerModal .mobile-studio #wizardNext{flex:1!important;min-width:0!important;padding:8px!important}
    #customizerModal .mobile-studio #wizardPrev{flex:0 0 auto!important;min-width:80px!important}
    #customizerModal .mobile-studio #wizardNextReason:not([hidden]){display:block!important;flex:1 0 100%!important;order:-1!important;min-height:0!important;margin:0!important;font-size:12px!important}
    #customizerModal .mobile-studio:not([data-simple-step="0"]) #simpleRightPanel{display:none!important}
    #customizerModal .mobile-studio[data-simple-step="1"] #designerStage{display:none!important}
    #customizerModal .mobile-studio[data-simple-step="1"] #mockupResults{order:2!important;display:block!important;flex:none!important;width:100%!important;height:clamp(230px,36dvh,360px)!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important}
    #customizerModal .mobile-studio[data-simple-step="1"] #comfortableColourPanel{order:3!important;display:block!important;flex:none!important;height:auto!important;min-height:0!important;padding:12px!important;margin:0!important}
    #customizerModal .mobile-studio .comfortable-section-head .kicker{display:none!important}
    #customizerModal .mobile-studio .comfortable-section-head h3{font-size:17px!important;margin:0!important}
    #customizerModal .mobile-studio #comfortableColours{display:flex!important;flex-wrap:wrap!important;gap:8px!important;max-height:none!important;overflow:visible!important;margin:10px 0!important}
    #customizerModal .mobile-studio .comfortable-swatch{flex:0 0 58px!important;width:58px!important;min-height:68px!important}
    #customizerModal .mobile-studio .comfortable-mockup-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:10px!important}
    #customizerModal .mobile-studio .comfortable-mockup-actions button{flex:1 1 140px!important;min-height:44px!important;padding:8px!important;font-size:13px!important}
    #customizerModal .mobile-studio #comfortableGallery{display:none!important;flex:none!important;min-height:0!important}
    #customizerModal .mobile-studio #comfortableMockupStatus{margin:8px 0 0!important;padding:0!important;min-height:0!important;white-space:normal!important}
    #customizerModal .mobile-studio #comfortableShowImages:not([hidden]){display:block!important;width:100%!important;min-height:44px!important;margin:8px 0 0!important;border:1px solid #d9e3dd!important;border-radius:10px!important;background:#f4f7f5!important;color:#1f523b!important;font-size:13px!important}
    #customizerModal .mobile-studio[data-simple-step="2"] #simpleQuantities{order:3!important;padding:12px!important}
    #customizerModal .mobile-studio #mobileTextDone{display:none!important}
    #customizerModal .mobile-studio.mobile-keyboard .studio-head{height:40px!important;min-height:40px!important;grid-template-columns:40px minmax(0,1fr) 68px!important}
    #customizerModal .mobile-studio.mobile-keyboard #mobileTextDone{display:block!important;min-width:64px!important;min-height:34px!important;padding:4px 8px!important;border:0!important;border-radius:8px!important;background:#eaf2ed!important;color:#1f523b!important;font-size:13px!important}
    #customizerModal .mobile-studio.mobile-keyboard #designerStage{position:sticky!important;top:0!important;z-index:15!important;height:clamp(64px,calc(var(--studio-visible-height) * .38),148px)!important;min-height:clamp(64px,calc(var(--studio-visible-height) * .38),148px)!important}
    #customizerModal .mobile-studio.mobile-keyboard #simpleAreas,#customizerModal .mobile-studio.mobile-keyboard #simpleSideTabs,#customizerModal .mobile-studio.mobile-keyboard #simpleUpload,#customizerModal .mobile-studio.mobile-keyboard #simpleSampleChips,#customizerModal .mobile-studio.mobile-keyboard #wizardFooter,#customizerModal .mobile-studio.mobile-keyboard #simpleSteps,#customizerModal .mobile-studio.mobile-keyboard #closeCustomizer,#customizerModal .mobile-studio.mobile-keyboard #toggleGuides{display:none!important}
    #customizerModal .mobile-studio.mobile-keyboard #simpleTools{padding-top:4px!important}
    #customizerModal .mobile-studio.mobile-keyboard .simple-tool-row{display:none!important}
  }
}