/* =============================================================
   天亿塑料 · 移动端 / 微信内置浏览器兼容层
   -------------------------------------------------------------
   必须在 style.css、products.css、categories.css 等业务样式之后引入。
   微信 iOS 走 WKWebView、安卓走 X5(Chromium)，以下行为与桌面不一致：

   1. 系统字号缩放会放大正文，撑破卡片与表格   → 锁定 text-size-adjust
   2. 聚焦 input 时字号 < 16px 会强制放大整页且不还原 → 移动端提到 16px
   3. 刘海屏 / 底部横条遮挡固定元素             → viewport-fit=cover + safe-area
   4. 微信地址栏改变可视高度，100vh 失真        → 叠加 dvh 版本
   5. 横向滑动列表易触发「右滑返回上一页」       → overscroll-behavior-x:contain
   6. 点击出现半透明灰块、双击缩放页面           → tap-highlight + touch-action
   7. 老内核无 backdrop-filter，半透明导航透出内容 → 不透明兜底
   8. 老内核无 aspect-ratio，图片区高度塌成 0    → 最小高度兜底
   9. 长按二维码需能识别，禁止全局禁用 callout
   ============================================================= */

/* ---------- 1. 禁止微信 / 系统自动放大字号 ---------- */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ---------- 2. 触控基线 ---------- */
body{
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-x:none;
}
@media (hover:none) and (pointer:coarse){
  a,button,input,textarea,select,label,
  .bc,.mat-item,.mat-all,.chip,.tax-chip,.page-btn{touch-action:manipulation}
}

/* ---------- 3. 微信内输入框字号不小于 16px（iOS 聚焦不缩放） ---------- */
@media (max-width:820px){
  .searchbar input,
  .tax-search input,
  .qm input,.qm textarea,.qm select{
    font-size:16px;
  }
  /* 16px 会让占位文字变长，微调以保持单行不截断 */
  .searchbar input::placeholder,
  .tax-search input::placeholder{font-size:15px}
}

/* iOS 会给 type=search 套原生圆角与内阴影，统一重置为本站样式 */
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  background-clip:padding-box;
}
/* 保留清除按钮可用，但去掉系统给它的额外留白 */
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}

/* ---------- 4. 安全区：底部固定元素避开 iPhone 横条 ---------- */
@supports (bottom:env(safe-area-inset-bottom)){
  .toast{bottom:calc(28px + env(safe-area-inset-bottom))}
  .qm{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  @media (max-width:900px){
    /* 移动端悬浮条固定在左下角，只需抬高避开横条；勿动 top，否则会覆盖更早的 top:auto */
    .hang{bottom:calc(16px + env(safe-area-inset-bottom))}
  }
  @media (max-width:760px){
    .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  }
}

/* viewport-fit=cover 后内容会铺到刘海区，顶部深色条需要让出状态栏高度 */
@supports (padding-top:env(safe-area-inset-top)){
  .promo{padding-top:env(safe-area-inset-top)}
}

/* 手机横放时，左右刘海不能压住正文 */
@media (orientation:landscape) and (max-height:520px){
  .wrap{
    padding-left:calc(var(--pad) + env(safe-area-inset-left,0px));
    padding-right:calc(var(--pad) + env(safe-area-inset-right,0px));
  }
}

/* ---------- 5. 弹窗高度：微信地址栏使 100vh 偏大，补 dvh ---------- */
.qm__card{
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
}
@media (max-width:760px){
  .qm{padding:16px}
  .qm__card{
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    border-radius:22px;
  }
}

/* ---------- 6. 横向滚动：滑动列表不触发微信返回，且滚动更顺 ---------- */
.tax-chips,
.mat-list,
.breadcrumb,
.hot-tags{
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* 隐藏横向滚动条（微信 X5 会画出粗条） */
.tax-chips::-webkit-scrollbar,
.mat-list::-webkit-scrollbar,
.breadcrumb::-webkit-scrollbar{height:0;display:none}

/* ---------- 7. 老内核兜底：无 backdrop-filter 时导航改不透明 ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:#fff}
  .nav.is-stuck{background:#fff}
  .qm__scrim{background:rgba(20,20,24,.66)}
  .tax-bar{background:#fff}
}

/* ---------- 8. 老内核兜底：无 aspect-ratio 时锁定媒体区高度 ---------- */
@supports not (aspect-ratio:1/1){
  .mcard__ph{height:186px}
  .featured__media{height:238px}
  .about-intro__media{height:300px}
  .gallery .media{height:190px}
  .wh__media{height:320px}
  .news-card__thumb{height:156px}
  .pkg__slides,
  .pkg__thumbs .media,
  .page-hero__media{min-height:170px}
  @media (max-width:760px){
    .mcard__ph{height:150px}
    .featured__media,
    .about-intro__media,
    .news-card__thumb{height:200px}
    .wh__media{height:230px}
    .gallery .media{height:150px}
  }
}

/* ---------- 9. 微信内禁用平滑滚动（部分版本会滚动到一半卡住） ---------- */
@media (hover:none){
  html{scroll-behavior:auto}
}

/* ---------- 10. 二维码长按识别：确保不被覆盖层挡住 ---------- */
img[src*="qr"],
img[alt*="二维码"],
[data-qr] img{
  -webkit-touch-callout:default;
  touch-action:auto;
  pointer-events:auto;
}

/* ---------- 11. 极窄屏（<340px，如 iPhone SE 一代 / 安卓小屏） ---------- */
@media (max-width:340px){
  .wrap{padding-inline:16px}
  .brandrow__grid{grid-template-columns:minmax(0,1fr)}
  .bc__logo{height:32px;min-width:36px;padding:0 7px}
  .bc__logo img{max-width:76px;max-height:28px}
}