/* Mobile-only stability layer for the five-step card designer. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body {
    zoom: 1 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  main > .studio:has(#studio-editor:not([hidden])) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--mgc-mobile-editor-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--mgc-mobile-editor-height, 100dvh) !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  main > .studio:has(#studio-editor:not([hidden])) ~ * {
    display: none !important;
  }

  #studio-editor:not([hidden]) {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  #studio-editor .studio-workspace,
  #studio-editor .editor-grid {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #studio-editor .canvas-stage {
    position: static !important;
    inset: auto !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: min(51dvh, 430px) !important;
    padding: 7px 8px 8px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #studio-editor .mobile-workflow-bar {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
    background: rgba(255, 253, 248, .98) !important;
  }

  #studio-editor .mobile-workflow-bar > button {
    min-width: 74px !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
    touch-action: manipulation !important;
  }

  #studio-editor .mobile-workflow-bar ol {
    min-width: 0 !important;
  }

  #studio-editor .mobile-workflow-bar li {
    min-width: 0 !important;
    touch-action: manipulation !important;
  }

  #studio-editor .mobile-workflow-bar li span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(7px, 2.25vw, 10px) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
  }

  #studio-editor .mobile-canvas-step {
    min-width: 0 !important;
    margin-bottom: 5px !important;
    padding: 7px 9px !important;
  }

  #studio-editor .mobile-canvas-step span {
    min-width: 64px !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
  }

  #studio-editor .mobile-canvas-step b {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(15px, 4.4vw, 19px) !important;
  }

  #studio-editor .mobile-step-guidance {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  #studio-editor .card-canvas,
  #studio-editor[data-active-step] .card-canvas {
    flex: 0 1 auto !important;
    width: min(78vw, 360px) !important;
    max-width: 100% !important;
    aspect-ratio: 85.6 / 53.98 !important;
    margin-inline: auto !important;
  }

  #studio-editor .control-panel,
  #studio-editor[data-active-step] .control-panel {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 12px calc(28px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-block: 12px calc(110px + env(safe-area-inset-bottom)) !important;
  }

  #studio-editor .editor-panel.active {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: min-content !important;
    padding-bottom: 24px !important;
  }

  #studio-editor input[type="text"],
  #studio-editor input[type="email"],
  #studio-editor input[type="password"],
  #studio-editor select,
  #studio-editor textarea {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  #studio-editor .text-settings,
  #studio-editor #textSettings {
    display: grid !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  #studio-editor #textSettings > label,
  #studio-editor #textSettings input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #studio-editor .mobile-stage-confirm:not([hidden]),
  #studio-editor .mobile-chip-confirm:not([hidden]) {
    min-height: 50px !important;
    margin-bottom: 4px !important;
    touch-action: manipulation !important;
  }

  #studio-editor .upload-control {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 86px !important;
    touch-action: manipulation !important;
  }

  #studio-editor .upload-copy {
    min-width: 0 !important;
  }

  #studio-editor .upload-copy strong,
  #studio-editor .upload-copy small,
  #studio-editor .upload-copy em {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .preview-dialog {
    box-sizing: border-box !important;
    width: min(94vw, 680px) !important;
    max-width: 94vw !important;
    max-height: var(--mgc-mobile-editor-height, 92dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .preview-actions.final-actions {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* Phone preview: keep the occasions and product cards inside the viewport. */
@media (max-width: 560px) {
  .my-gold-cards,
  .my-gold-cards > #occasions,
  .occasions,
  .occasions .collection-browser,
  .occasions .collection-categories,
  .occasions .template-pair-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .my-gold-cards > #occasions {
    margin: 18px 0 0 !important;
    padding: 24px 0 0 !important;
    overflow: hidden !important;
  }

  .occasions .collection-browser {
    padding-inline: 4px !important;
    overflow: hidden !important;
  }

  .occasions .collection-categories {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 3px 8px !important;
  }

  .occasions .collection-categories button,
  .occasions .template-pair,
  .occasions .pair-visuals,
  .occasions .pair-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .occasions .template-pair-grid[data-category="birthday"] {
    gap: 22px !important;
    padding: 0 5px 12px !important;
  }

  .occasions .template-pair-grid[data-category="birthday"] .pair-visuals {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Final compact mobile QA layer. */
@media (max-width:760px) {
  #studio-editor .mobile-primary-tools {
    display:block!important;
    width:100%!important;
    padding:7px 9px!important;
    overflow:visible!important;
  }
  #studio-editor .mobile-primary-tools > .design-actions {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:4px!important;
  }
  #studio-editor .mobile-primary-tools > .design-actions button {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:5px 6px!important;
  }
  #studio-editor .mobile-primary-tools > .design-actions button i{width:24px!important;height:24px!important;min-width:24px!important}
  #studio-editor .mobile-primary-tools > .design-actions button span{min-width:0!important}
  #studio-editor .mobile-primary-tools > .design-actions button b{display:block!important;overflow-wrap:anywhere!important;white-space:normal!important;font-size:9px!important;line-height:1.05!important}
  #studio-editor .mobile-workflow-bar{overflow:visible!important}
  #studio-editor .mobile-workflow-bar ol{min-width:0!important;padding:1px 2px 3px!important;scroll-padding-inline:2px!important}
  #studio-editor .desktop-text-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0 0 8px!important;
  }
  #studio-editor .desktop-text-list button{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:0 6px!important;
    min-width:0!important;
    min-height:42px!important;
    padding:5px 6px!important;
    border:1px solid #dfd1b9!important;
    border-radius:10px!important;
    background:#fffdf8!important;
    text-align:left!important;
  }
  #studio-editor .desktop-text-list button>b{grid-row:1/3!important;display:grid!important;width:24px!important;height:24px!important;place-items:center!important;align-self:center!important;border-radius:50%!important;background:#efe1c7!important;color:#795116!important;font-size:10px!important}
  #studio-editor .desktop-text-list button>span{min-width:0!important;overflow:hidden!important;font-size:10px!important;font-weight:850!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #studio-editor .desktop-text-list button>small{font-size:8px!important;color:#8c7d68!important}
  #studio-editor .desktop-text-list button.active{border-color:#ad7620!important;background:#fff2d7!important}
  #studio-editor .editor-panel[data-editor-panel="check"]>.panel-preview-button{display:none!important}
}

@media (max-width: 380px) {
  #studio-editor .canvas-stage {
    max-height: min(49dvh, 390px) !important;
  }

  #studio-editor .card-canvas,
  #studio-editor[data-active-step] .card-canvas {
    width: min(76vw, 320px) !important;
  }

  #studio-editor .mobile-workflow-bar {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  #studio-editor .canvas-stage {
    max-height: 58dvh !important;
  }

  #studio-editor .card-canvas,
  #studio-editor[data-active-step] .card-canvas {
    width: min(52vw, 390px) !important;
  }
}