/* Keep the live mug visible while adjusting a customer's artwork on a phone.
   The existing 3D canvas is retained; no second renderer or print canvas. */
@media (max-width:700px) {
  .cup-site:has(#mug-order #mo-edits:not([hidden])) .cup-to-top {display:none}
  #mug-order:has(#mo-edits:not([hidden])) {
    --mo-mobile-preview-height:clamp(190px,32svh,260px);
    overflow:visible;
  }
  #mug-order:has(#mo-edits:not([hidden])) .mo-steps {border-radius:19px 19px 0 0}
  #mug-order:has(#mo-edits:not([hidden])) .mo-editor>.mo-stage {
    position:sticky;
    top:var(--cup-nav-height,80px);
    z-index:10;
    height:var(--mo-mobile-preview-height);
    min-height:0;
    max-height:none;
    padding:8px 12px 6px;
    margin-top:16px;
    margin-bottom:12px;
    box-shadow:0 8px 18px #100d2626;
  }
  #mug-order:has(#mo-edits:not([hidden])) #mo-model {height:auto;min-height:0;flex:1;min-width:0}
  #mug-order:has(#mo-edits:not([hidden])) .mug3d-stage {height:100%;min-height:0}
  #mug-order:has(#mo-edits:not([hidden])) .mug3d-fallback {padding:6px;gap:4px}
  #mug-order:has(#mo-edits:not([hidden])) .mug3d-flat-body {min-height:0;flex:0 1 auto;max-height:calc(100% - 28px);width:auto;max-width:100%}
  #mug-order:has(#mo-edits:not([hidden])) .mug3d-flat-body canvas {width:100%;height:100%;object-fit:contain}
  #mug-order:has(#mo-edits:not([hidden])) .mug3d-fallback-note {margin:0;font-size:10px;line-height:1.2}
  #mug-order:has(#mo-edits:not([hidden])) #mo-safe-fallback {max-height:100%!important}
  #mug-order:has(#mo-edits:not([hidden])) .mo-stage-top {font-size:10px;min-height:22px}
  #mug-order:has(#mo-edits:not([hidden])) #mo-preview-type {padding:2px 7px}
  #mug-order:has(#mo-edits:not([hidden])) .mo-stage-bottom {gap:4px 10px;min-height:32px}
  #mug-order:has(#mo-edits:not([hidden])) #mo-demo-label,
  #mug-order:has(#mo-edits:not([hidden])) .mo-preview-note {display:none}
  #mug-order:has(#mo-edits:not([hidden])) #mo-view-reset {min-height:32px;padding:4px 6px;font-size:11px!important}
  #mug-order:has(#mo-edits:not([hidden])) #mo-heat button {min-height:32px;padding:4px 10px}
  #mug-order #mo-edits .mo-row {gap:10px}
  #mug-order #mo-edits .mo-row label {font-size:12px;gap:4px}
  #mug-order #mo-edits .mo-row input,
  #mug-order #mo-edits .mo-row select {min-height:44px;padding:8px 10px}
  #mug-order .mo-placement {margin:12px 0 8px}
  #mug-order .mo-placement legend {font-size:13px;margin-bottom:6px}
  #mug-order .mo-placement-options {gap:6px}
  #mug-order .mo-placement-options button {padding:8px;min-height:44px}
  #mug-order .mo-placement p {font-size:11px;line-height:1.4;margin:6px 0 0}
  #mug-order .mo-sliders {margin:6px 0;gap:0}
  #mug-order .mo-sliders label {min-height:44px;gap:10px;font-size:12px}
  #mug-order .mo-sliders input {appearance:none;min-height:44px;width:60%;margin:0;padding:0;touch-action:pan-y;background:transparent;border:0}
  #mug-order .mo-sliders input::-webkit-slider-runnable-track {height:6px;border-radius:6px;background:#ffffff55}
  #mug-order .mo-sliders input::-moz-range-track {height:6px;border-radius:6px;background:#ffffff55}
  #mug-order .mo-sliders input::-webkit-slider-thumb {appearance:none;width:26px;height:26px;margin-top:-10px;border:2px solid #211e34;border-radius:50%;background:#ffda59}
  #mug-order .mo-sliders input::-moz-range-thumb {width:24px;height:24px;border:2px solid #211e34;border-radius:50%;background:#ffda59}
  #mug-order .mo-editor-actions .mo-textbutton {min-height:44px}
  #mug-order #mo-edits :is(input,select,button) {scroll-margin-top:calc(var(--mo-mobile-preview-height,260px) + 8px)}
  #mug-order #mo-flat {scroll-margin-top:calc(var(--mo-mobile-preview-height,260px) + 8px)}
}
/* Small landscape screens use a shallower preview so controls stay reachable. */
@media (max-width:700px) and (max-height:500px) {
  #mug-order:has(#mo-edits:not([hidden])) {--mo-mobile-preview-height:150px}
  #mug-order:has(#mo-edits:not([hidden])) .mo-stage-top {display:none}
}