/* ==========================================================================
   PING SUPPLY - language/currency panel + mobile layout fixes
   文件名：ps-mobile.css
   背景：页面由 ONEBUY 真实 DOM 静态化而来。
         原站的顶栏搜索面板收起时用 opacity-0/invisible，仍占 387px，
         把语言 / 购物车 / 登录 / 注册全部顶出小屏；px-[300px] 也是桌面专用。
   ========================================================================== */

/* 顶栏容器贴合视口：原站 container 的 max-width 比窄屏还宽，
   会把最右边的"注册"按钮挤出屏幕（桌面 1440 下也会裁掉几个像素） */
header .container {
  max-width: 100% !important;
}

/* ---------- 0. 首页四张说明卡的轮播 ----------
   静态化把驱动 JS 去掉了，轨道的 transform 被冻在 translateX(-166.65%) 这个中间态，
   结果四张卡全滑到屏幕外，桌面上那一块直接是空的。
   JS 不会回来，所以干脆摊平：轨道位移归零 + 每张 25%，四张一排放得下（手机上再竖排）。 */
.ps-stack>div.flex {
  transform: none !important;
}

/* 轨道里其实有 12 张：4 张真卡各被克隆 3 份（无限轮播用的）。
   摊平后只留第一组，否则桌面会被撑到 300% 宽。 */
.ps-stack>div.flex>div {
  width: 25% !important;
}

.ps-stack>div.flex>div:nth-child(n+5) {
  display: none !important;
}

/* 左右箭头和底部圆点：没人驱动，留着只会是两枚死按钮 */
.ps-stack>div:not(:first-child) {
  display: none !important;
}

/* 卡片标题：原站 text-2xl(24px) 是按"一次只显示一张"排的，
   摊平后每张只有 312px，24px 会把标题截成 "Free Pre-Check on…"。17px 一行放得下。 */
.ps-stack>div.flex>div h2 {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

/* 首页顶栏是透明的（压在首屏大图上用白字）。
   一旦滚到白色内容区，白字就看不见了 —— 滚起来时给它一个深色底。
   只作用在透明顶栏上，estimation / affiliate 的白底顶栏不受影响。 */
html.ps-scrolled header[class*="bg-transparent"] {
  background-color: rgba(22, 15, 8, .82) !important;
  backdrop-filter: blur(10px);
}

/* ---------- 1. 语言 / 货币：简易页的浮动入口 ---------- */
#psLangFab {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 800;
  background: #fff;
  border: 1px solid #f0e6da;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #33332e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  text-decoration: none;
  white-space: nowrap;
}

#psLangFab:hover {
  color: var(--base-color, #EB6100);
  border-color: var(--base-color, #EB6100);
}

/* ---------- 2. 语言 / 货币面板 ---------- */
#psLangPanel {
  position: absolute;
  z-index: 900;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20, 12, 4, .22);
  border: 1px solid #f0e6da;
  padding: 12px 0 6px;
  font-size: 14px;
  color: #2b2b28;
  max-height: 74vh;
  overflow-y: auto;
}

.ps-lg-head {
  font-size: 14px;
  font-weight: 700;
  color: #1f1f1c;
  padding: 2px 16px 10px;
}

.ps-lg-wrap {
  display: flex;
  gap: 6px;
}

.ps-lg-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
}

.ps-lg-sub {
  font-size: 12px;
  color: #9a9188;
  padding: 4px 10px 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ps-lg-item {
  display: block;
  padding: 9px 10px;
  border-radius: 9px;
  color: #33332e;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-lg-item span {
  color: #a49b91;
  font-size: 12px;
}

.ps-lg-item:hover {
  background: #fff7f0;
  color: var(--base-color, #EB6100);
}

.ps-lg-item.on {
  background: var(--base-color, #EB6100);
  color: #fff;
  font-weight: 600;
}

.ps-lg-item.on span {
  color: #ffe6d2;
}

.ps-lg-note {
  font-size: 12px;
  color: #a49b91;
  padding: 10px 16px 8px;
  border-top: 1px solid #f4ece3;
  margin-top: 8px;
  line-height: 1.5;
}

#psLangScrim {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 10, .35);
  z-index: 880;
}

/* ==========================================================================
   3. 手机端（<= 767px）
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- 3.1 顶栏：把被顶出屏幕的右侧内容收回来 ---- */
  header form[class*="rounded-full"] {
    display: none !important;
  }

  header span[class*="i-material-symbols"] {
    display: none !important;
  }

  header div[class~="gap-4"] {
    gap: .4rem !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  header div[class~="gap-4"]>* {
    flex-shrink: 0 !important;
  }

  header span[class*="min-w-"] {
    min-width: 0 !important;
  }

  /* 语言按钮在手机上只留地球图标，把宽度让给登录 / 注册 */
  #psLangCurLabel {
    display: none !important;
  }

  header .ps-logo {
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  header .ps-logo img {
    width: 28px !important;
    height: 28px !important;
  }

  header .ps-logo span {
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }

  header a[class*="bg-[var(--base-color)]"] {
    padding-left: .7rem !important;
    padding-right: .7rem !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  header .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 3.2 顶部公告条 ----
     这条 banner-ping.svg 是纯橙色渐变装饰，没有任何文字信息。
     手机上被压成 390x90 就只能看见正中间一小截，白白吃掉一屏中最贵的 90px，
     所以手机直接不显示；ps-mobile.js 会把 --banner-top 和固定顶栏一起归零。 */
  .ps-bar {
    display: none !important;
  }

  /* ---- 3.2b 首屏搜索框：Search 按钮在手机上只留放大镜图标 ---- */
  main form button span:not([class*="i-material-symbols"]) {
    display: none !important;
  }

  main form input {
    min-width: 0 !important;
  }

  main form button {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }

  /* ---- 3.3 px-[300px]：桌面专用固定内边距，手机上归零 ---- */
  [class*="px-[300px]"],
  .px-\[300px\] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  [class*="px-[200px]"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 这类区块里"文字 + 配图"横向并排的，手机上改上下排列 */
  [class*="px-[300px]"][class*="flex-row"] {
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  [class*="px-[300px]"]>div {
    max-width: 100% !important;
  }

  /* 普通图片不撑破容器；但排除带定位的图（首屏大图、商品图靠 inline style 铺满） */
  main img:not([data-nimg="fill"]):not([style*="position:absolute"]) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 首屏大图：Next.js 的 fill 图静态化后没有定位，
     被 height:auto 压成 200px 高，导致白色标题落在白色背景上看不见。
     这里强制它铺满整个首屏。 */
  [class*="h-[680px]"] {
    min-height: 620px !important;
  }

  [class*="h-[680px]"]>div[style*="z-index"] {
    position: absolute !important;
    inset: 0 !important;
  }

  /* 只作用于首屏那张大图，别碰搜索框里的 1688 / 淘宝 / 微店小图标 */
  [class*="h-[680px]"]>div[style*="z-index"]>img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  /* 首屏标题：图片铺满后白字可读，补一层阴影更稳 */
  [class*="h-[680px]"] h1 {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
  }

  main [class*="w-[400px]"],
  main [class*="w-[500px]"],
  main [class*="w-[600px]"] {
    max-width: 100% !important;
    width: auto !important;
  }

  /* ---- 3.4 大标题缩字号（text-6xl = 60px 在手机上溢出） ---- */
  main h1,
  main .text-6xl {
    font-size: 30px !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  main .text-5xl {
    font-size: 26px !important;
    line-height: 1.28 !important;
  }

  .text-4xl {
    font-size: 23px !important;
    line-height: 1.3 !important;
  }

  /* ---- 3.5 四张横向说明卡改竖排（由 ps-mobile.js 打标记） ---- */
  /* 手机上四张卡竖排，每张占满一行 */
  .ps-stack>div.flex {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .ps-stack>div.flex>div {
    width: 100% !important;
  }

  /* ---- 3.6 运费估算表单：一行两列改一列 ---- */
  .ps-onerow {
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* ---- 3.7 浮动侧栏隐藏在手机（避免和在线客服气泡叠在一起） ---- */
  div[class*="fixed"][class*="right-6"][class*="flex-col"] {
    display: none !important;
  }

  /* ---- 3.8 底部留白，别让客服气泡压住最后一行 ---- */
  footer {
    padding-bottom: 84px !important;
  }

  /* ---- 3.9 分类按钮触控区放大（>=36px） ---- */
  .ps-cat {
    min-height: 36px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13.5px !important;
  }

  /* ---- 3.10 语言面板在手机上从底部弹出 ---- */
  #psLangPanel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: 76vh;
    z-index: 950;
  }

  .ps-lg-item {
    padding: 11px 10px;
    font-size: 14.5px;
  }
}

/* 触屏设备：hover 才出现的浮层一律不显示，避免"手指划过就常驻" */
@media (hover: none) {
  .ps-nohover {
    display: none !important;
  }
}