/* ============================================================
   电脑端兼容层（顾客端 H5）  2026-09-30
   1) flexible.js 已把 rem 基准封顶在 750px 设计宽度
   2) 本文件把页面内容限制为 750px 居中一列，两侧留背景
   3) .uni-tabbar / 页面头等 fixed 元素跟随居中列
   ============================================================ */
@media (min-width: 751px) {
  html {
    width: 750px !important;
    margin: 0 auto !important;
    background: #e9edf3 !important;
    overflow-x: hidden !important;
  }
  body {
    width: 750px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    box-shadow: 0 0 36px rgba(15, 23, 42, .18);
    min-height: 100vh;
  }
  /* uni-app 的固定定位组件（底部 tabbar、页面头）沿用 --window-* 变量，
     这里把左右边距改成“视口减 750 后的一半”，使它们正好落在居中列内 */
  uni-app {
    --window-left: calc((100vw - 750px) / 2) !important;
    --window-right: calc((100vw - 750px) / 2) !important;
    --window-margin: calc((100vw - 750px) / 2) !important;
  }

  /* uni-app 内置固定组件：直接钉到 750px 居中列（双保险） */
  .uni-tabbar,
  .uni-page-head {
    left: calc((100vw - 750px) / 2) !important;
    right: calc((100vw - 750px) / 2) !important;
  }
  .uni-top-window {
    left: calc((100vw - 750px) / 2) !important;
    right: calc((100vw - 750px) / 2) !important;
    margin: 0 !important;
  }

  /* 弹窗类组件按列居中 */
  .uni-toast, .uni-modal, .uni-sample-toast {
    left: 50% !important;
  }
}