/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* ==========================================================================
   优品商城系统 · 手机端样式（< 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;}
  /* 手机上最多两列，选了几列都一样；选 1（一行一个）就老老实实一列 */
  .goods-list.gc1{grid-template-columns:1fr;}
  .goods-list.gc2,.goods-list.gc3,.goods-list.gc4,
  .goods-list.gc5,.goods-list.gc6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .goods-item{border-radius:10px;}
  .goods-item .info{padding:9px 10px 10px;}
  .goods-item .nm{font-size:12.5px;height:38px;}
  .goods-item .price{font-size:17px;}
  .goods-item .sold{font-size:11.5px;}
  /* 两列卡片太窄，价格+原价+库存挤一行会错位，让库存单独占一行 */
  .goods-list.gc2 .meta,.goods-list.gc3 .meta,
  .goods-list.gc4 .meta,.goods-list.gc5 .meta,.goods-list.gc6 .meta{flex-wrap:wrap;row-gap:4px;}
  .goods-list.gc2 .sold,.goods-list.gc3 .sold,
  .goods-list.gc4 .sold,.goods-list.gc5 .sold,.goods-list.gc6 .sold{width:100%;text-align:right;margin-left:0;}
  .goods-list.gc1 .pic{width:88px;flex:0 0 88px;}
  .goods-list.gc1 .nm{font-size:13.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;}

  /* 个人中心：顶部横滑菜单 + 两列统计 */
  .uc-menu{border-radius:10px;}
  .uc-menu a{padding:11px 14px;font-size:13.5px;gap:8px;}
  .uc-stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;}
  .uc-stat{padding:13px 14px;}
  .uc-stat .t{font-size:12.5px;}
  .uc-stat .v{font-size:19px;}

  .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;}

  /* ---------- 支付弹窗 ---------- */
  .paym-box{width:100%;}
  .paym-box .modal-hd{padding:12px 16px;border-radius:13px 13px 0 0;}
  .paym-deco.d1{font-size:38px;right:64px;}
  .paym-deco.d2{font-size:26px;right:104px;}
  .paym-top{padding:12px 16px 0;}
  .paym-name{font-size:14px;}
  .paym-contact{padding:12px 16px 0;}
  .paym-addr{padding:12px 16px 0;}
  .paym-addr .ab-row{flex-wrap:wrap;}
  .paym-addr .ab-row .input{flex:1 1 100%;height:36px;}
  .paym-addr .ab-pick{max-width:100%;}
  .paym-pc{padding:10px 16px 0;gap:7px 9px;}
  .paym-pc .paym-tags{flex:1 1 100%;}   /* 窄屏一行塞不下，标签自己占一行 */
  .paym-price{font-size:21px;}
  /* 窄屏同样收窄左右间距 */
  .paym-pc .num-box button{width:32px;height:38px;font-size:15px;}
  .paym-pc .num-box input{width:42px;height:38px;}
  .paym-pick{padding:10px 16px 14px;}
  .paym-list{grid-template-columns:repeat(2,1fr);gap:8px;}
  .paym-item{min-height:46px;padding:6px 20px 6px 8px;gap:7px;}
  .paym-ico{flex-basis:32px;width:32px;height:32px;border-radius:7px;}
  .paym-ico .df-i{font-size:16px;}
  .paym-txt b{font-size:12.5px;}
  .paym-box .modal-ft{padding:10px 16px;}

  .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 导航 ----------
     字和图标原来 11px / 20px 偏小，这里放大到 12px / 24px；
     图标那格（.ico）做成圆角小方块，选中时铺一层主色浅底，跟新主题那套底栏观感一致。
     角标 .tb-badge 是挂在 .ico 里的绝对定位，.ico 保持 position:relative（见文件末尾那条） */
  .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:4px 6px calc(4px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(20,40,60,.08);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--muted);font-size:12px;font-weight:600;line-height:1.2;position:relative;
    -webkit-tap-highlight-color:transparent;transition:color .16s,transform .16s;
  }
  .tabbar a > .ico{
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:10px;font-size:24px;line-height:1;
    transition:background .2s,box-shadow .2s,transform .2s;
  }
  .tabbar a > .ico svg.ico-svg,
  .tabbar a > .ico i.df-i{font-size:inherit;}
  .tabbar a.on{color:var(--c1);}
  .tabbar a.on > .ico{background:var(--c1-soft,#F1F5FF);box-shadow:0 6px 14px rgba(20,40,60,.1);transform:translateY(-1px);}
  .tabbar a:active{opacity:.6;transform:scale(.94);}
}

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

/* 横屏手机 / 小平板过渡 --------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  /* 横屏手机 / 小平板能多排一两列，但也就这样了 */
  .goods-list.gc2,.goods-list.gc3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .goods-list.gc4,.goods-list.gc5,.goods-list.gc6{grid-template-columns:repeat(4,minmax(0,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;
}