/* ==========================================================================
   东方商城系统 · 手机端样式（< 768px）
   /assets/css/mobile.css
   单栏布局 + 底部 Tab 导航。要放在 style.css 后面加载。
   ========================================================================== */

@media (max-width:767px){

  :root{--head-h:52px;--tab-h:56px;}

  body{font-size:14.5px;background:#F4F6F8;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));}

  .wrap{padding:0 12px;}
  .main{padding:12px 0 20px;}
  .row{display:block;}
  .col-side{display:none;}

  .card{border-radius:10px;margin-bottom:12px;}
  .card-hd{padding:12px 14px;}
  .card-hd h2,.card-hd h3{font-size:15px;}
  .card-bd{padding:14px;}

  /* ---------- 顶部 ---------- */
  .header{position:sticky;top:0;}
  .header-in{height:var(--head-h);gap:10px;}
  .logo{font-size:16.5px;}
  .logo img{height:26px;}
  .logo .dot{width:24px;height:24px;font-size:13px;border-radius:6px;}
  .nav{display:none;}                 /* 顶部导航收到底部 Tab 里 */
  .header-right .btn-user span{display:none;}
  .btn-user{padding:4px;border:0;}
  .search{max-width:none;}
  .search input{height:34px;font-size:14px;}
  .search button{width:27px;height:27px;top:3.5px;}
  .header .search{display:none;}      /* 顶部不放搜索，首页有大搜索框 */
  .header-in .header-right{gap:6px;}

  .search-big input{height:42px;}
  .search-big button{width:34px;height:34px;}

  .notice-bar{padding:8px 12px;font-size:13px;border-radius:8px;}

  /* ---------- 轮播 ---------- */
  .banner{border-radius:10px;margin-bottom:14px;}
  .banner-item img{height:160px;}
  .banner-item .cap{padding:18px 14px 12px;font-size:13.5px;}
  .banner-nav{display:none !important;}
  .banner-dots{bottom:9px;}

  /* ---------- 分类导航 ---------- */
  .cate-nav{grid-template-columns:repeat(4,1fr);gap:8px;}
  .cate-nav a{padding:13px 5px 11px;border-radius:10px;}
  .cate-nav .ico{width:38px;height:38px;font-size:17px;margin-bottom:7px;border-radius:10px;}
  .cate-nav .ico img{width:22px;height:22px;}
  .cate-nav .nm{font-size:12.5px;}
  .cate-nav .ct{display:none;}

  /* ---------- 商品列表 ---------- */
  .goods-list{gap:10px;}
  .goods-list.g1,.goods-list.g2,.goods-list.g3{grid-template-columns:repeat(2,1fr);}
  .goods-list.g4{grid-template-columns:1fr;}
  .goods-item{border-radius:10px;}
  .goods-item .info{padding:9px 10px 10px;}
  .goods-item .nm{font-size:13.5px;height:40px;}
  .goods-item .price{font-size:17px;}
  .goods-item .sold{font-size:11.5px;}
  /* 两列卡片太窄，价格+原价+库存挤一行会错位，让库存单独占一行 */
  .goods-list.g1 .meta,
  .goods-list.g2 .meta,
  .goods-list.g3 .meta{flex-wrap:wrap;row-gap:4px;}
  .goods-list.g1 .sold,
  .goods-list.g2 .sold,
  .goods-list.g3 .sold{width:100%;text-align:right;margin-left:0;}
  .goods-list.g4 .pic{width:88px;flex:0 0 88px;}
  .goods-list.g4 .nm{font-size:14.5px;}

  /* ---------- 吸顶筛选条 ---------- */
  .sort-bar{
    top:var(--head-h);border-radius:0;border-left:0;border-right:0;margin:0 -12px 12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0;
  }
  .sort-bar::-webkit-scrollbar{display:none;}
  .sort-bar a{padding:11px 15px;font-size:14px;flex:0 0 auto;}
  .sort-bar a.on::after{left:15px;right:15px;bottom:5px;}
  .sort-bar .tail{display:none;}

  .page-title{margin-bottom:10px;}
  .page-title h1{font-size:17px;}

  /* ---------- 商品详情 ---------- */
  .goods-detail{display:block;}
  .gd-pic{width:100%;flex:none;margin:0 -14px 16px;width:calc(100% + 28px);}
  .gd-pic .big{border-radius:0;aspect-ratio:1;}
  .gd-info h1{font-size:17.5px;}
  .gd-price{font-size:26px;}
  .gd-price-box{padding:13px 14px;}
  .gd-row > label{width:60px;flex:0 0 60px;font-size:13.5px;}
  .gd-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);margin:0;gap:9px;
    box-shadow:0 -2px 12px rgba(20,40,60,.07);
  }
  .gd-actions .btn{flex:1;height:44px;}
  body.has-buybar{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
  body.has-buybar .tabbar{display:none;}

  .detail-tabs a{padding:12px 16px;font-size:14.5px;}
  .detail-tabs a.on::after{left:16px;right:16px;}
  .detail-body{padding:16px 14px;}

  /* ---------- 表单 ---------- */
  .input,.select{height:42px;font-size:15px;}   /* 16px 以下 iOS 会缩放，42 高度配 15px 观感更稳 */
  .btn{height:42px;}
  .btn.lg{height:46px;}
  .cap-row img{width:100px;height:42px;}

  /* ---------- 订单 / 个人中心 ---------- */
  .order-item{padding:13px 14px;}
  .order-hd{font-size:12.5px;gap:8px;}
  .order-bd .pic{width:48px;height:48px;}
  .order-ft{justify-content:flex-start;flex-wrap:wrap;}
  .user-hd{padding:20px 16px;border-radius:10px;flex-wrap:wrap;}
  .user-hd .av{width:50px;height:50px;font-size:19px;}
  .user-hd .money{margin-left:auto;}
  .user-hd .money b{font-size:21px;}
  .grid-menu{grid-template-columns:repeat(4,1fr);}
  .grid-menu a{padding:16px 6px;}
  .grid-menu .ico{font-size:19px;}
  .grid-menu .t{font-size:12.5px;}

  .art-list li{padding:13px 14px;gap:10px;}
  .art-list .t{font-size:14.5px;}
  .art-list .d{font-size:12px;}
  .art-body{padding:16px 14px;}
  .art-body h1{font-size:18px;}

  .card-box{font-size:13px;padding:12px 14px;}

  /* ---------- 弹层 ---------- */
  .modal{padding:0;align-items:flex-end;}
  .modal-box{
    width:100%;border-radius:14px 14px 0 0;max-height:88vh;
    animation:sheet .28s cubic-bezier(.2,.8,.3,1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes sheet{from{transform:translateY(100%);}to{transform:none;}}
  .modal-ft{position:sticky;bottom:0;background:#fff;}

  .to-top{right:14px;bottom:calc(var(--tab-h) + 16px);width:38px;height:38px;}

  /* ---------- 页脚 ---------- */
  .footer{padding:22px 0 18px;margin-top:20px;font-size:12.5px;}
  .footer-nav{gap:14px;margin-bottom:10px;}

  /* ---------- 底部 Tab 导航 ---------- */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:500;
    height:calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--muted);font-size:11px;position:relative;transition:color .16s;
  }
  .tabbar a .ico{font-size:20px;line-height:1;}
  .tabbar a.on{color:var(--c1);}
  .tabbar a.on .ico{transform:translateY(-1px);}
  .tabbar a:active{opacity:.6;}
}

/* 超小屏 ------------------------------------------------------------------ */
@media (max-width:359px){
  .cate-nav{grid-template-columns:repeat(3,1fr);}
  .goods-item .price{font-size:16px;}
  .tabbar a{font-size:10px;}
}

/* 横屏手机 / 小平板过渡 --------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  .goods-list.g1,.goods-list.g2{grid-template-columns:repeat(3,1fr);}
  .cate-nav{grid-template-columns:repeat(5,1fr);}
}

/* 底部导航的购物车角标 */
.tabbar .ico{position:relative;display:inline-block;}
.tabbar .tb-badge{
    position:absolute;top:-4px;right:-9px;
    min-width:15px;height:15px;line-height:15px;padding:0 4px;
    background:#B33A2B;color:#fff;border-radius:8px;
    font-size:10px;font-style:normal;text-align:center;font-weight:600;
}