/*  ╔══════════════════════════════════════════════════════════════╗
    ║  淘淘衣橱 · 移动端视口适配                                    ║
    ║  Lightweight mobile overrides — NO transform scaling.        ║
    ║  Pages render at their natural CSS width on real devices.    ║
    ║  Include AFTER mobile-frame.css on every page.               ║
    ╚══════════════════════════════════════════════════════════════╝  */

/* On real mobile devices: strip desktop preview chrome,
   let the page flow naturally at the device width. */
@media (max-width: 500px) {
  html {
    background: transparent !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body {
    display: block !important;
    background: transparent !important;
    place-items: unset !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Let the mobile frame shrink to fit narrow phones */
  [data-mobile-frame] {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    flex: none !important;
  }

  .status-bar,
  .ios-status,
  .safe-top {
    height: env(safe-area-inset-top, 0px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}