/* ============================================================
   AXLIGHTER 商品详情页布局修正 · 2026-11-05
   必须在 css/app.min.css 之后加载（新文件名，绕开 hCDN 同名缓存）。

   无头浏览器实测（视口 1366 / 900 / 681 / 680 / 480 / 320 / 249）：
   ① ≥681px（电脑端）：chat.20261009a.js 注入
        #axlChatBtn{position:fixed;right:18px;bottom:18px;width:56px;z-index:2147483000}
      而 .detail 只有 z-index:200 → 气泡浮在详情页之上，正好压住底部
      「Order now」按钮（实测 1366/900/681 三个宽度 chatOverlapsOrder 全 true）。
      ≤680px 时 app.min.css 里有 !important 上移规则，不重叠 —— 所以是纯电脑端 bug。
   ② ≥681px：.detail-switch 下 .ds-btn{flex:1} 让「上一个/下一个」各撑到
      628px 宽（1366 视口），被拉成超宽长条，观感就是「放大」。
   ============================================================ */

/* ---------- ① 客服气泡：详情页打开时抬到底部下单栏之上，保留客服入口 ---------- */
@supports selector(:has(*)) {
  body:has(#detailPage:not([hidden])) #axlChatBtn {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    width: 46px !important; height: 46px !important;
  }
  body:has(#detailPage:not([hidden])) #axlChatPanel {
    bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* 不支持 :has() 的老浏览器：全局上移兜底，宁可气泡高一点也不挡下单 */
@supports not selector(:has(*)) {
  #axlChatBtn  { bottom: 92px !important; }
  #axlChatPanel{ bottom: 156px !important; }
}
/* 窄屏沿用 app.min.css 原有的 80px 上移规则，别被兜底带偏 */
@media (max-width:680px) {
  #axlChatBtn{
    bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    width:46px!important;height:46px!important;
  }
  #axlChatPanel{
    bottom:calc(136px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* ---------- ② 上 / 下一个：固定尺寸、左右横排，不被拉满或放大 ---------- */
.detail-nav{
  width:40px!important; height:40px!important;
  min-width:40px!important; min-height:40px!important;
  max-width:40px!important; max-height:40px!important;
  flex:0 0 40px!important;
  font-size:1.6rem!important;
  top:50%!important;
}
.detail-prev{left:12px!important;  right:auto!important}
.detail-next{right:12px!important; left:auto!important}
.detail-switch{flex-direction:row!important;flex-wrap:nowrap!important}

/* 电脑端：两个切换按钮改成常规宽度，不再各占半屏 */
@media (min-width:681px) {
  .detail-switch{justify-content:flex-start}
  .detail-switch .ds-btn{flex:0 1 240px!important;max-width:240px}
  /* 底部下单栏再留一点右侧余量：即使气泡未生效也点得到 Order now */
  .detail-bar{padding-right:24px}
}