/* ============================================================
   灵栖俱乐部 · PC 手机栏（2026-09-25）
   PC/宽屏：全站以 480px 手机版居中显示，两侧留白；
   手机端（视口 ≤519px）：.lx-frame 满宽，本文件不改变任何样式。
   断点判断见各主题 CSS 的 @container lxframe 规则。
   ============================================================ */

.lx-frame {
  width: 100%;
  min-height: 100vh;
  /* 容器查询基准：栏内组件按“栏宽”而非浏览器视口宽度响应 */
  container-type: inline-size;
  container-name: lxframe;
  /* 手机端满宽铺底，视觉与原 body 渐变底一致 */
  background: linear-gradient(180deg, var(--lx-bg) 0%, var(--lx-bg-2) 100%);
}

/* ---------- 仅宽屏（PC/平板横屏）生效 ---------- */
@media (min-width: 520px) {
  body {
    /* 两侧留白底色：比栏内略深的中性灰，衬托白栏 */
    background: #d8dde5;
  }
  .lx-frame {
    width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--lx-bg) 0%, var(--lx-bg-2) 100%);
    box-shadow: 0 0 0 1px rgba(36, 52, 78, .05),
                0 10px 44px rgba(36, 52, 78, .14);
  }

  /* 吸底购物车栏 / 商品详情购买栏：对齐居中窄栏 */
  .lx-cartbar,
  .lx-detail__buybar {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
  }

  /* 购物车底部弹层：对齐窄栏 */
  .lx-cart-pop {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translate(-50%, 100%);
    border-radius: 20px 20px 0 0;
  }
  .lx-cart-pop.is-show { transform: translate(-50%, 0); }

  /* 底部 Tab 栏（ui-refresh 容器规则会拉成视口满宽，宽屏下重新对齐窄栏） */
  .lx-tabbar {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
  }

  /* 用户中心侧边抽屉：从窄栏左缘滑入
     （窄栏中心线 = 视口中心线，left:50% 再左移半栏宽即贴左缘） */
  .lx-uc-side {
    left: 50%;
    margin-left: -240px;
  }
  /* 抽屉遮罩：仅覆盖窄栏区域 */
  .lx-uc-side-mask {
    inset: 0 auto 0 50%;
    width: 480px;
    margin-left: -240px;
  }

  /* layer 弹窗：按视口居中计算，中心线与窄栏重合；限制最大宽度不越栏 */
  .layui-layer { max-width: 468px; }

  /* toastr 通知：顶部居中收在窄栏内 */
  #toast-container {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 448px;
  }
}