/* ============================================================
   煮茶论英雄®茶业 · 手机版样式（只在窄屏生效，桌面端不受影响）
   由 mobile.js 在 <html> 上加 class="mn"，避免影响电脑浏览器。
   ============================================================ */

/* 桌面端默认隐藏手机版组件（窄屏媒体查询内再开启） */
.mn-tabs{display:none}
.mn-toggle{display:none}

/* ---------- 1. 基础 ---------- */
@media (max-width: 860px){
  html.mn{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html.mn body{
    font-size:15px;
    -webkit-tap-highlight-color:rgba(185,138,62,.16);
    overflow-x:hidden;
  }
  html.mn.has-tabs body{
    padding-bottom:calc(62px + env(safe-area-inset-bottom)) !important;
  }
  html.mn img{max-width:100%;height:auto}
  html.mn input,html.mn select,html.mn textarea{font-size:16px !important} /* 防止 iOS 聚焦时自动放大 */

  /* ---------- 2. 顶栏 + 抽屉菜单 ---------- */
  html.mn header{position:sticky;top:0;z-index:120}
  html.mn .nav{
    flex-wrap:nowrap;
    padding:9px 13px;
    gap:8px;
    position:relative;
    align-items:center;
    justify-content:flex-end; /* 首页已把品牌移到首屏正中，顶栏控件统一右对齐 */
  }
  html.mn .logo{
    font-size:1.04rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1 1 auto;
    min-width:0;
  }
  html.mn .nav > nav,
  html.mn .nav-r,
  html.mn .nav-links{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    z-index:130;
    background:#1d4d3b;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    flex-wrap:nowrap;
    padding:4px 14px 14px;
    border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 16px 28px rgba(0,0,0,.24);
    max-height:calc(100vh - 160px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  html.mn header.mn-open .nav > nav,
  html.mn header.mn-open .nav-r,
  html.mn header.mn-open .nav-links{display:flex}
  html.mn .nav > nav a,
  html.mn .nav-r a,
  html.mn .nav-links a{
    display:block;
    margin:0;
    padding:13px 2px;
    font-size:1rem;
    opacity:.96;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  html.mn .nav > nav a:last-child,
  html.mn .nav-r a:last-child,
  html.mn .nav-links a:last-child{border-bottom:none}
  html.mn .nav-r #langBtn,
  html.mn .nav > #langBtn{
    margin-top:12px;
    width:100%;
    padding:11px;
    border-radius:8px;
    font-size:.95rem;
  }
  html.mn .nav > #langBtn{margin-top:0;width:auto;padding:7px 12px;flex:none}

  /* 汉堡按钮 */
  .mn-toggle{
    display:none;
    align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.06);
    color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
    padding:0;
  }
  .mn-toggle:active{background:rgba(255,255,255,.18)}
  html.mn .mn-toggle{display:inline-flex}

  /* ---------- 3. 底部 Tab 栏 ---------- */
  html.mn .mn-tabs{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:9989;
    background:#fff;
    border-top:1px solid #e6e0d3;
    box-shadow:0 -3px 16px rgba(0,0,0,.08);
    padding:5px 2px calc(5px + env(safe-area-inset-bottom));
  }
  html.mn .mn-tabs a{
    flex:1 1 0;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:5px 0 3px;
    text-decoration:none;
    color:#8a8578;
    font-size:.68rem;
    letter-spacing:.3px;
    line-height:1.2;
  }
  html.mn .mn-tabs a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  html.mn .mn-tabs a.on{color:#1d4d3b;font-weight:bold}
  html.mn .mn-tabs a.on svg{stroke:#b98a3e}

  /* ---------- 4. 区块与标题 ---------- */
  html.mn section,
  html.mn .sect-alt .inner{padding:42px 16px}
  html.mn h2{font-size:1.26rem}
  html.mn h2 .line{margin-left:10px}
  html.mn .sub{font-size:.84rem;line-height:1.7}
  html.mn .cat-block{margin-top:40px}
  html.mn footer{padding:26px 16px;font-size:.79rem;line-height:1.9}

  /* ---------- 5. 首页 ---------- */
  html.mn .hero#home{padding:58px 18px 48px}
  html.mn .hero#home h1{font-size:1.66rem;letter-spacing:2px;line-height:1.5}
  html.mn .hero#home p{font-size:.93rem;line-height:1.85;margin-bottom:24px}
  html.mn .hero#home .tag{font-size:.72rem;padding:3px 13px;letter-spacing:1px;margin-bottom:16px}
  html.mn .hero#home .btn{padding:11px 26px;font-size:.92rem}
  html.mn .about-grid,html.mn .visit{grid-template-columns:1fr;gap:22px}
  html.mn .about-text p{font-size:.9rem}
  html.mn .cat-grid{grid-template-columns:1fr;gap:14px}
  html.mn .cat{padding:20px 18px}
  html.mn .cat h3{font-size:1rem}

  /* 场景茶类 / 商品 / 茶讯卡片：手机两列 */
  html.mn .tier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html.mn .tier .tcover{height:104px;font-size:1.9rem}
  html.mn .tier .tb{padding:12px 12px 13px}
  html.mn .tier h3{font-size:.92rem}
  html.mn .tier p{font-size:.74rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html.mn .tier .range{margin-top:9px;font-size:.7rem;flex-direction:column;align-items:flex-start;gap:3px}
  html.mn .tier .cnt{font-size:.66rem}

  html.mn .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html.mn .card .img{height:auto;aspect-ratio:1/1;font-size:2.2rem}
  html.mn .card .body{padding:11px 12px 13px}
  html.mn .card h3{font-size:.9rem;line-height:1.45}
  html.mn .card .desc{font-size:.75rem;line-height:1.55;min-height:0;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.mn .card .meta{font-size:.72rem;gap:7px;flex-wrap:wrap}
  html.mn .card .price{font-size:1.02rem;margin-bottom:9px}
  html.mn .card .btn,html.mn .card button{width:100%;padding:9px 0;font-size:.86rem}
  html.mn .card .tier-tag{font-size:.66rem;padding:2px 8px;left:9px;top:9px}

  html.mn .tier-tabs{gap:8px;margin:18px auto 2px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  html.mn .tier-tab{padding:7px 13px;font-size:.8rem;flex:none}
  html.mn .prod-search{margin:16px auto 4px}
  html.mn .ps-box{padding:9px 14px}

  html.mn .news-grid{grid-template-columns:1fr;gap:14px}
  html.mn .news-card .cover{height:150px}
  html.mn .news-card .nb{padding:14px 15px 16px}
  html.mn .news-card h3{font-size:.95rem}
  html.mn .news-card p{font-size:.8rem}

  html.mn .shops-grid{grid-template-columns:1fr}
  html.mn .gb-form{padding:18px}
  html.mn .gb-list{grid-template-columns:1fr;gap:12px}

  /* ---------- 6. 茶类页 / 商品详情 ---------- */
  html.mn .hero{padding:16px;gap:14px}
  html.mn .hero .hc{width:100%;height:132px;flex:none;font-size:2.4rem}
  html.mn .hero h1{font-size:1.32rem}
  html.mn .hero .hsub{font-size:.85rem}
  html.mn .tier-nav{gap:7px;margin:16px 0 2px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  html.mn .tier-nav a{padding:6px 13px;font-size:.8rem;flex:none}
  html.mn .sec-h{margin:20px 0 12px}
  html.mn .sec-h h2{font-size:1.02rem}
  html.mn .grid .pcard .pimg{height:auto;aspect-ratio:1/1;font-size:2.2rem}
  html.mn .pbody{padding:11px 12px 13px}
  html.mn .pbody h3{font-size:.9rem;line-height:1.45}
  html.mn .pbody .desc{font-size:.74rem;margin-top:5px}
  html.mn .price{font-size:1.02rem}
  html.mn .price small{display:none}
  html.mn .pmeta{font-size:.69rem;flex-wrap:wrap;gap:4px}

  html.mn .crumbs{padding:12px 16px 0;font-size:.78rem}
  html.mn .wrap{padding:12px 14px 40px}
  html.mn .pd{grid-template-columns:1fr;padding:13px;gap:16px}
  html.mn .gal .main{aspect-ratio:1/1;font-size:3.4rem}
  html.mn .gal .thumbs{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  html.mn .gal .thumbs img{width:56px;height:56px;flex:none}
  html.mn .info h1{font-size:1.2rem}
  html.mn .pdprice{padding:11px 14px;margin:10px 0}
  html.mn .pdprice .p{font-size:1.6rem}
  html.mn .buy-row{gap:9px}
  html.mn .buy-row .btn,html.mn .buy-row .btn-outline{flex:1 1 100%;text-align:center;padding:12px 0;font-size:.94rem}
  html.mn .pd-desc,html.mn .pd-rev{padding:17px 15px;margin-top:16px}
  html.mn .pd-desc p{font-size:.88rem}
  html.mn .rel-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  html.mn .rcard .img{height:auto;aspect-ratio:1/1;font-size:2rem}
  html.mn .rcard .b{padding:10px 12px}
  html.mn .rcard h3{font-size:.86rem}
  html.mn .rcard .pr{font-size:.95rem}
  html.mn .rev-form{padding:14px}
  html.mn .rev p{font-size:.86rem}

  /* ---------- 7. 表格（后台/会员订单） ---------- */
  html.mn table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  html.mn table th,html.mn table td{padding:8px 10px;font-size:.82rem}
  html.mn .grid2{grid-template-columns:1fr}
  html.mn .panel{padding:15px}
  html.mn .row{flex-wrap:wrap;gap:8px}
  html.mn .row input,.mn .row button{width:auto}
  html.mn button,html.mn .btn{min-height:40px}

  /* ---------- 8. 悬浮客服按钮（避开底部 Tab 栏） ---------- */
  html.mn #chatFab{
    bottom:calc(76px + env(safe-area-inset-bottom)) !important;
    right:12px !important;
    width:54px !important;
    height:54px !important;
    border-radius:50% !important;
    gap:0 !important;
  }
  html.mn #chatFab .fab-label{display:none !important}
  html.mn #chatFab .fab-ava{width:34px !important;height:34px !important;border-width:2px !important}
  html.mn.mn-product #chatFab{bottom:calc(88px + env(safe-area-inset-bottom)) !important}
  html.mn #chatBox{
    right:10px !important;
    left:10px !important;
    width:auto !important;
    bottom:calc(190px + env(safe-area-inset-bottom)) !important;
    height:min(440px,calc(100vh - 250px)) !important;
  }
  html.mn.mn-product #chatBox{
    bottom:calc(200px + env(safe-area-inset-bottom)) !important;
    height:min(400px,calc(100vh - 280px)) !important;
  }

  /* 顶栏购物车只留图标，给菜单按钮腾位置 */
  html.mn #shopNavCart{margin-left:0 !important;flex:none}
  html.mn #spNavLabel{display:none}
  html.mn #spNavCartLink{font-size:1.05rem !important;margin-left:0 !important;padding:4px}
}

/* ---------- 9. 超小屏（≤ 400px）再收一档 ---------- */
@media (max-width: 400px){
  html.mn body{font-size:14.5px}
  html.mn .hero#home h1{font-size:1.45rem;letter-spacing:1px}
  html.mn .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  html.mn .card .img,html.mn .tier .tcover{aspect-ratio:1/1;height:auto}
  html.mn .card h3{font-size:.85rem}
  html.mn .card .price{font-size:.95rem}
  html.mn .tier p{-webkit-line-clamp:2}
  html.mn .tier .range{font-size:.66rem}
  html.mn .logo{font-size:.98rem}
}

/* ---------- 10. 后台专用 ---------- */
@media (max-width: 860px){
  html.mn.mn-admin header{flex-wrap:wrap;gap:6px;padding:10px 14px}
  html.mn.mn-admin header strong{font-size:.9rem}
  html.mn.mn-admin .wrap{padding:12px 12px 40px}
  html.mn.mn-admin .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    margin-bottom:14px;
  }
  html.mn.mn-admin .tab{flex:none;padding:8px 15px;font-size:.84rem}
  html.mn.mn-admin .panel{padding:14px;border-radius:10px}
  html.mn.mn-admin h2{font-size:1.05rem}
  html.mn.mn-admin .panel table{display:block;overflow-x:auto;white-space:nowrap}
  html.mn.mn-admin .grid2{grid-template-columns:1fr}
  html.mn.mn-admin .chat-wrap{grid-template-columns:1fr}
  html.mn.mn-admin .chat-thread{height:300px}
}