/* ============================================
   中国苗木网 - 移动端App风格样式 mobile.css
   参考 m.miaomu.com iOS风格 + 绿色行业主题
   rem自适应 / 固定底部导航 / 卡片流
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --green:#1aad5c;
  --green-d:#0c8a45;
  --green-l:#e7f7ee;
  --orange:#ff6b35;
  --price:#e64340;
  --text:#222;
  --text2:#666;
  --text3:#999;
  --line:#eee;
  --bg:#f5f6f8;
  --card:#fff;
  --radius:8px;
  --shadow:0 1px 6px rgba(0,0,0,.06);
  --shadow-hover:0 4px 16px rgba(0,0,0,.10);
}
html{font-size:calc(100vw / 20); -webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  font-size:14px;color:var(--text);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;
  max-width:750px;margin:0 auto;
  padding-bottom:3rem;  /* 底部导航空间 */
}
a{color:var(--green);text-decoration:none}
ul,li{list-style:none}
img{width:100%;display:block}

/* ====== 顶部固定栏 ====== */
.m-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:#fff;
}
.m-header-top{
  display:flex;align-items:center;
  padding:0 .6rem;
  height:2.2rem;
}
.m-logo{font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.5px}
.m-search{
  flex:1;margin:0 .5rem;
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);
  border-radius:5px;
  padding:0 .4rem;height:1.4rem;
}
.m-search input{
  flex:1;border:none;outline:none;background:none;
  font-size:.6rem;color:var(--text);
}
.m-search .icon{font-size:.7rem;color:var(--text3);margin-right:.2rem}
.m-search button{
  background:none;border:none;
  font-size:.6rem;color:var(--green);
  font-weight:600;cursor:pointer;
}
.m-header-link{font-size:.6rem;color:rgba(255,255,255,.9);white-space:nowrap}

/* ====== 分类宫格导航 ====== */
.cat-grid{
  display:flex;flex-wrap:wrap;
  background:var(--card);
  padding:.6rem 0;
  margin-bottom:.4rem;
}
.cat-grid .cat-item{
  width:20%;
  display:flex;flex-direction:column;align-items:center;
  padding:.3rem 0;
}
.cat-grid .cat-icon{
  width:1.6rem;height:1.6rem;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:#fff;
  margin-bottom:.2rem;
}
.cat-grid .cat-name{
  font-size:.55rem;color:var(--text2);
  text-align:center;
}

/* ====== 区块卡片 ====== */
.section{
  background:var(--card);
  border-radius:var(--radius);
  margin:0 .5rem .5rem;
  overflow:hidden;
}
.section-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem .6rem;
  border-bottom:1px solid var(--line);
}
.section-head h3{
  font-size:.7rem;font-weight:600;color:var(--text);
  padding-left:.25rem;
  border-left:3px solid var(--green);
}
.section-head .more{font-size:.55rem;color:var(--text3)}

/* ====== 信息列表（图片+文字横排） ====== */
.info-list{padding:0 .5rem}
.info-item{
  display:flex;gap:.4rem;
  padding:.5rem 0;
  border-bottom:1px solid var(--line);
}
.info-item:last-child{border-bottom:none}
.info-thumb{
  width:2.8rem;height:2.1rem;
  flex-shrink:0;
  border-radius:5px;overflow:hidden;
  background:var(--green-l);
}
.info-thumb img{width:100%;height:100%;object-fit:cover}
.info-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.info-body h4{
  font-size:.65rem;font-weight:500;color:var(--text);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.info-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.5rem;color:var(--text3);
  margin-top:.15rem;
}
.info-meta .area{color:var(--green);font-size:.52rem}
.info-meta .date{font-size:.5rem}

/* ====== 图文卡片网格（2列） ====== */
.card-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.4rem;
  padding:.5rem;
}
.card-item{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.card-item:active{box-shadow:var(--shadow-hover)}
.card-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--green-l)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-text{padding:.3rem .35rem}
.card-text h4{
  font-size:.6rem;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-text .sub{font-size:.5rem;color:var(--text3);margin-top:.1rem}

/* ====== 资讯列表（纯文字） ====== */
.news-list{padding:0 .5rem}
.news-list li{
  padding:.4rem 0;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.news-list li:last-child{border:none}
.news-list li a{
  flex:1;font-size:.62rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-list li a::before{
  content:"";display:inline-block;
  width:3px;height:3px;border-radius:50%;
  background:var(--green);margin-right:.3rem;
  vertical-align:middle;
}
.news-list li .date{font-size:.5rem;color:var(--text3);flex-shrink:0;margin-left:.3rem}

/* ====== 底部固定导航 ====== */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:750px;
  display:flex;
  background:#fff;
  border-top:1px solid #e0e0e0;
  z-index:998;
  padding-bottom:env(safe-area-inset-bottom);
  height:2.5rem;
}
.tabbar .tab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--text3);
  transition:color .2s;
}
.tabbar .tab.active{color:var(--green)}
.tabbar .tab .tab-icon{font-size:.85rem;line-height:1}
.tabbar .tab .tab-label{font-size:.5rem;margin-top:.1rem}

/* ====== 列表页头部 ====== */
.list-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .6rem;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.list-title h2{font-size:.75rem;font-weight:600}
.list-title .count{font-size:.55rem;color:var(--text3);background:var(--green-l);padding:.1rem .4rem;border-radius:10px}

/* ====== 面包屑 ====== */
.crumb{padding:.4rem .6rem;font-size:.55rem;color:var(--text3);background:#fff}

/* ====== 内容页 ====== */
.article{background:#fff;padding:.6rem;margin:0 0 .5rem}
.article h1{font-size:.85rem;font-weight:700;line-height:1.5;margin-bottom:.4rem}
.article-info{
  display:flex;gap:.5rem;flex-wrap:wrap;
  font-size:.55rem;color:var(--text3);
  padding-bottom:.4rem;border-bottom:1px solid var(--line);margin-bottom:.5rem;
}
.article-pic{border-radius:var(--radius);overflow:hidden;margin-bottom:.5rem}
.article-pic img{max-height:10rem;object-fit:cover}
.article-content{font-size:.65rem;line-height:1.8;color:#333}
.article-content p{margin:.3rem 0}

/* ====== 分页 ====== */
.pagination{
  display:flex;justify-content:center;gap:.25rem;
  padding:.6rem .5rem;
}
.pagination a,.pagination span{
  min-width:1.4rem;height:1.4rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:5px;
  font-size:.55rem;color:var(--text2);
}
.pagination a.active,.pagination span.current{
  background:var(--green);color:#fff;border-color:var(--green);
}

/* ====== 返回顶部 ====== */
.back-top{
  position:fixed;right:.6rem;bottom:3.2rem;
  width:1.6rem;height:1.6rem;
  background:rgba(26,173,92,.9);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.7rem;
  z-index:997;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ====== 底部版权 ====== */
.footer{text-align:center;padding:.8rem .5rem;font-size:.5rem;color:var(--text3)}
.footer a{color:var(--text3);margin:0 .2rem}