/* ============================================================
   Esinparts 移动端美化层 (mobile-ui.css)
   仅在 ≤767px 生效；桌面端零影响。
   依赖页面自身 Tailwind/UnoCSS 工具类，选择器均按线上真实 DOM 编写。
   ============================================================ */

/* ---------- 底部操作条（默认隐藏，移动端显示） ---------- */
.wbm-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: #fff;
  border-top: 1px solid #e8ebf0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wbm-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 3px 0 3px;
  font-size: 9.5px;
  line-height: 1;
  color: #475569;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wbm-bar a:active { background: #f1f5f9; }
.wbm-bar a svg { width: 17px; height: 17px; }
.wbm-bar .wbm-cta {
  background: #0589f3;
  color: #fff;
  font-weight: 700;
}
.wbm-bar .wbm-cta:active { background: #0470cc; }
@media (max-width: 767px) {
  .wbm-bar { display: flex; }
}

/* ---------- 移动端主体 ---------- */
@media (max-width: 767px) {

  /* 基础 */
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
  body { overflow-x: hidden !important; -webkit-tap-highlight-color: transparent; }
  #app { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
  #app img { max-width: 100%; }
  #app table { max-width: 100%; }
  #app ::selection { background: #0589f333; }

  /* ---------- 顶部 header ---------- */
  header.sticky { box-shadow: 0 1px 10px rgba(15, 23, 42, .07); }
  header.sticky .h-16 { height: 54px; }
  header.sticky .h-8 { height: 30px !important; width: 44px !important; border-radius: 8px !important; }
  header.sticky .h-8 > span { font-size: 12.5px !important; }
  header.sticky a > span.text-xl {
    font-size: 13.5px !important;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw;
  }
  header.sticky button.p-2 { padding: 8px !important; }
  header.sticky #translate button { padding: 5px 8px !important; font-size: 12px !important; }

  /* ---------- 分类横滑条（sticky top-16） ---------- */
  #app .sticky.top-16 { top: 54px; }
  #app .sticky.top-16 nav { padding-top: 8px; padding-bottom: 8px; }
  #app .sticky.top-16 button { padding: 6px 12px !important; font-size: 13px !important; }

  /* ---------- 首页 hero 轮播 ---------- */
  #app .h-\[500px\] {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 236px;
    border-radius: 0;
  }

  /* ---------- 区块节奏 ---------- */
  #app section.mx-auto.px-4 { padding-top: 26px; padding-bottom: 4px; }
  #app section.mx-auto.px-4 > .mb-12 { margin-bottom: 14px; }
  #app section h2.text-3xl { font-size: 21px !important; margin-bottom: 4px; }
  #app section .mb-12 > p { font-size: 13px !important; line-height: 1.55; }

  /* ---------- 分类卡片：单列 → 双列紧凑卡（仅限区块内，不影响页脚） ---------- */
  #app section .grid.gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #app section .grid.gap-6 > div {
    border-radius: 12px;
    border: 1px solid #eef1f5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 10px rgba(16, 24, 40, .05);
  }
  #app section .grid.gap-6 > div img { height: 96px !important; }
  #app section .grid.gap-6 > div > div { padding: 9px 10px 11px !important; }
  #app section .grid.gap-6 h3 {
    font-size: 13px !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #app section .grid.gap-6 > div > div > p { display: none; } /* 与标题重复的描述文字 */
  #app section .grid.gap-6 > div > div > .mb-3 { margin-bottom: 4px !important; }
  #app section .grid.gap-6 a {
    margin-top: 6px !important;
    padding: 7px 4px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* ---------- 数据统计：4 竖排 → 2×2 ---------- */
  #app section.bg-gray-900 { padding-top: 26px; padding-bottom: 26px; }
  #app .grid.gap-8 { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
  #app .grid.gap-8 .text-3xl { font-size: 24px !important; margin-bottom: 2px; }
  #app .grid.gap-8 .text-gray-400 { font-size: 12.5px; }

  /* ---------- 图集（EXHIBITION / OUR FACTORY） ---------- */
  .company-profile-container { padding: 24px 14px 6px !important; }
  .company-profile-container .image-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .company-profile-container .gallery-item { border-radius: 10px !important; }
  .company-profile-container .section-title { font-size: 18px !important; }
  .company-profile-container .section-subtitle { font-size: 12px !important; }
  .company-profile-container .about-content { font-size: 14px; }

  /* ---------- 右下角浮动按钮（让位给底部操作条） ---------- */
  #app .fixed.bottom-8.right-8 { display: none !important; }

  /* ---------- 商品详情页 ---------- */
  #app .grid.gap-12 { gap: 14px !important; margin-bottom: 20px !important; }
  #app .h-96 { height: auto !important; aspect-ratio: 1 / 1; }
  #app .h-20 { height: 58px !important; width: 58px !important; }
  #app .space-y-4 > * + * { margin-top: 10px !important; }

  /* ---------- 页脚（配合 JS 手风琴） ---------- */
  footer.footer { padding: 6px 0 14px !important; }
  footer.footer .grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  footer.footer .grid > div { border-bottom: 1px solid #334155; padding: 2px 0 6px; }
  footer.footer .grid > div[data-wbm-flat] { border-bottom: 0; padding: 8px 0 2px; }
  footer.footer .grid > div[data-wbm-flat] h3 { display: none; }
  footer.footer .grid > div:last-child { border-bottom: 0; }
  footer.footer h3 {
    margin-bottom: 0 !important;
    padding: 10px 0;
    font-size: 14.5px !important;
    position: relative;
    cursor: pointer;
    white-space: normal !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent;
  }
  footer.footer h3::after {
    content: "";
    position: absolute;
    right: 2px; top: 14px;
    width: 7px; height: 7px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  footer.footer .wbm-open h3::after { transform: rotate(-135deg); top: 18px; }
  footer.footer .wbm-acc-b { display: none; }
  footer.footer .wbm-open .wbm-acc-b { display: block; padding: 2px 0 8px; }
  footer.footer .wbm-acc-b .mb-2 { font-size: 13px; }
  footer.footer .text-sm { font-size: 12px !important; }

  /* ---------- 通用触控 ---------- */
  #app a, #app button { touch-action: manipulation; }
}

/* ---------- 极小屏（≤360px） ---------- */
@media (max-width: 360px) {
  header.sticky a > span.text-xl { font-size: 12px !important; }
  #app .grid.gap-6 > div img { height: 84px !important; }
}

/* ---------- 搜索浮层 ---------- */
.wbm-search {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 100;
  display: none;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
}
.wbm-search.wbm-on { display: block; }
.wbm-search .wbm-row { display: flex; gap: 8px; }
.wbm-search input {
  flex: 1;
  height: 40px;
  border: 2px solid #0589f3;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  outline: none;
  background: #f8fafc;
}
.wbm-search .wbm-go {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #0589f3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.wbm-search .wbm-cancel {
  height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 14px;
}
/* 仅移动端启用搜索浮层 */
@media (min-width: 768px) {
  .wbm-search { display: none !important; }
}