/* ============================================================
   莫问兮 mowenxi.com · 官网重构 设计系统
   纯静态 · 移动优先 · 响应式
   ============================================================ */

:root {
  /* 品牌色 —— 恩施富硒 · 田园质感 */
  --green-900: #14361f;
  --green-800: #1f4d2e;
  --green-700: #2f6b3c;
  --green-600: #3a7d44;
  --green-500: #4f9d5b;
  --green-50:  #eef6ef;

  --amber-700: #a96d12;
  --amber-600: #c8881f;
  --amber-500: #e0a033;
  --amber-50:  #fbf3e3;

  --cream:     #faf7f0;
  --paper:     #ffffff;
  --ink:       #26261f;
  --muted:     #6b6b60;
  --line:      #e7e2d6;

  --shadow-sm: 0 1px 3px rgba(20,40,25,.08);
  --shadow:    0 6px 22px rgba(20,40,25,.10);
  --shadow-lg: 0 16px 48px rgba(20,40,25,.16);

  --radius:    14px;
  --radius-sm: 9px;
  --maxw:      1200px;

  --ff: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",
        "Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section { padding:72px 0; }
.section--tight { padding:48px 0; }
.section-head { text-align:center; max-width:720px; margin:0 auto 44px; }
.eyebrow {
  display:inline-block; font-size:13px; letter-spacing:.18em; font-weight:700;
  color:var(--amber-600); text-transform:uppercase; margin-bottom:12px;
}
.section-head h2 { font-size:clamp(26px,4vw,38px); color:var(--green-800); font-weight:800; letter-spacing:.01em; }
.section-head p { color:var(--muted); margin-top:14px; font-size:16px; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:999px; font-weight:700; font-size:15px;
  cursor:pointer; border:1.5px solid transparent; transition:.22s ease; white-space:nowrap;
}
.btn--primary { background:var(--green-600); color:#fff; box-shadow:var(--shadow); }
.btn--primary:hover { background:var(--green-700); transform:translateY(-2px); }
.btn--amber { background:var(--amber-500); color:#3a2606; }
.btn--amber:hover { background:var(--amber-600); transform:translateY(-2px); }
.btn--ghost { border-color:var(--green-600); color:var(--green-700); background:transparent; }
.btn--ghost:hover { background:var(--green-50); }
.btn--light { background:#fff; color:var(--green-800); }
.btn--light:hover { transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- 顶部条 ---------- */
.topbar { background:var(--green-900); color:#cfe3d2; font-size:13px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; height:38px; }
.topbar a { color:#cfe3d2; }
.topbar a:hover { color:#fff; }
.topbar .tb-left span { margin-right:18px; }

/* ---------- 导航 ---------- */
.header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.header .container { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; }
.brand .logo-mark {
  width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--green-600),var(--amber-500));
  display:grid; place-items:center; color:#fff; font-size:20px; font-weight:900;
  box-shadow:var(--shadow-sm);
}
.brand .brand-name { font-size:20px; color:var(--green-800); letter-spacing:.04em; }
.brand .brand-sub { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.16em; }
.nav { display:flex; align-items:center; gap:6px; }
.nav a { padding:9px 15px; border-radius:999px; font-weight:600; color:var(--ink); font-size:15px; transition:.18s; }
.nav a:hover { color:var(--green-700); background:var(--green-50); }
.nav a.active { color:var(--green-700); background:var(--green-50); }
.header-cta { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; width:44px; height:44px; border:none; background:var(--green-50);
  border-radius:10px; cursor:pointer; position:relative; }
.nav-toggle span { position:absolute; left:11px; right:11px; height:2px; background:var(--green-800); transition:.25s; }
.nav-toggle span:nth-child(1){ top:14px; } .nav-toggle span:nth-child(2){ top:20px; } .nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:620px; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 82% 18%, #2f6b3c 0%, #1f4d2e 46%, #0e2a18 100%); color:#fff; }
.hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(8,26,15,.82) 0%,rgba(8,26,15,.48) 45%,rgba(8,26,15,.12) 100%); }
.hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:1; filter:none; transform:scale(1.04); }
.hero .container { position:relative; z-index:2; padding:90px 20px; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:999px; font-size:13px; margin-bottom:22px; }
.hero h1 { font-size:clamp(32px,5.2vw,58px); line-height:1.12; font-weight:900; letter-spacing:.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.3); }
.hero h1 .hl { color:var(--amber-500); }
.hero p.lead { font-size:clamp(16px,2vw,19px); max-width:560px; margin:22px 0 32px; color:#eaf3ec; }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats { display:flex; gap:38px; margin-top:46px; flex-wrap:wrap; }
.hero__stats .stat strong { display:block; font-size:30px; font-weight:900; color:#fff; }
.hero__stats .stat span { font-size:13px; color:#bcd6c2; }

/* ---------- 卡片 / 网格 ---------- */
.grid { display:grid; gap:24px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:.24s ease; box-shadow:var(--shadow-sm); }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--green-500); }
.card__media { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-50); }
.card__media img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.card:hover .card__media img { transform:scale(1.06); }
.card__tag { position:absolute; top:12px; left:12px; background:rgba(20,54,31,.85); color:#fff;
  font-size:12px; padding:4px 11px; border-radius:999px; font-weight:600; }
.card__body { padding:18px 18px 20px; }
.card__body h3 { font-size:18px; color:var(--green-800); margin-bottom:6px; }
.card__body p { color:var(--muted); font-size:14px; }
.card__meta { display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  font-size:13px; color:var(--amber-700); font-weight:700; }

/* 分类卡 */
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cat-card { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:2/1; min-height:240px;
  display:flex; align-items:flex-end; color:#fff; }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center center; }
.cat-card .cat-inner { position:relative; z-index:2; padding:20px; }
.cat-card h3 { font-size:20px; font-weight:800; }
.cat-card span { font-size:13px; opacity:.85; }
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* 特性条 */
.feature { display:flex; gap:16px; align-items:flex-start; }
.feature .ic { width:48px; height:48px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:var(--green-50); color:var(--green-700); font-size:22px; }
.feature h4 { font-size:17px; color:var(--green-800); margin-bottom:4px; }
.feature p { color:var(--muted); font-size:14px; }

/* ---------- 区块底色 ---------- */
.bg-green { background:var(--green-800); color:#eaf3ec; }
.bg-green .section-head h2 { color:#fff; }
.bg-green .section-head p { color:#bcd6c2; }
.bg-soft { background:var(--green-50); }
.bg-paper { background:var(--paper); }

/* ---------- 面包屑 ---------- */
.crumb { background:var(--green-50); border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.crumb .container { padding:14px 20px; }
.crumb a:hover { color:var(--green-700); }

/* ---------- 产品详情 ---------- */
.detail { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.detail__media { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--green-50); }
.detail__media img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.detail__info h1 { font-size:32px; color:var(--green-800); margin-bottom:10px; }
.detail__info .cat { color:var(--amber-700); font-weight:700; font-size:14px; }
.detail__info .desc { color:var(--muted); margin:18px 0; }
.spec { border-top:1px solid var(--line); }
.spec li { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; }
.spec li span:first-child { color:var(--muted); }
.spec li span:last-child { font-weight:700; color:var(--ink); }
.detail__cta { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }

/* ---------- 文章 ---------- */
.article-card { display:grid; grid-template-columns:240px 1fr; gap:0; }
.article-card .card__media { aspect-ratio:auto; }
.article-card .card__body { padding:22px 24px; }
.article-card h3 { font-size:19px; }
.post-body { max-width:780px; margin:0 auto; }
.post-body p { margin:0 0 18px; color:#3a3a32; }
.post-body h3 { color:var(--green-800); margin:30px 0 12px; font-size:22px; }
.post-body blockquote { border-left:4px solid var(--amber-500); background:var(--amber-50);
  padding:14px 18px; border-radius:0 10px 10px 0; color:var(--amber-700); margin:0 0 18px; font-style:italic; }

/* ---------- 关于 ---------- */
.timeline { border-left:3px solid var(--green-500); padding-left:26px; margin-left:8px; }
.timeline li { position:relative; padding:0 0 28px; }
.timeline li::before { content:""; position:absolute; left:-35px; top:4px; width:16px; height:16px;
  border-radius:50%; background:var(--green-600); border:3px solid #fff; box-shadow:0 0 0 3px var(--green-200,#cfe3d2); }
.timeline .yr { font-weight:800; color:var(--green-700); }
.timeline h4 { font-size:18px; margin:4px 0; }
.timeline p { color:var(--muted); font-size:14px; }

/* ---------- 联系 / 表单 ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; }
.info-list li { display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed var(--line); }
.info-list .ic { width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--green-50);
  display:grid; place-items:center; color:var(--green-700); font-size:20px; }
.info-list strong { display:block; color:var(--green-800); }
.info-list span { color:var(--muted); font-size:14px; }
.qr-row { display:flex; gap:22px; margin-top:20px; }
.qr-row figure { text-align:center; font-size:13px; color:var(--muted); }
.qr-row img { width:120px; height:120px; border-radius:12px; border:1px solid var(--line); padding:6px; background:#fff; }

.form { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); }
.field { margin-bottom:18px; }
.field label { display:block; font-weight:700; font-size:14px; margin-bottom:7px; color:var(--green-800); }
.field label .req { color:#d23b3b; }
.field input, .field textarea, .field select {
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:15px; background:var(--cream); transition:.18s; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--green-500); background:#fff; box-shadow:0 0 0 3px var(--green-50); }
.field textarea { resize:vertical; min-height:120px; }
.field .err { color:#d23b3b; font-size:13px; margin-top:6px; display:none; }
.field.invalid input, .field.invalid textarea { border-color:#d23b3b; }
.field.invalid .err { display:block; }
.field .char-count { font-size:12px; color:var(--muted); margin-top:4px; text-align:right; }
.field .char-count.over { color:#d23b3b; font-weight:600; }
.form .note { font-size:13px; color:var(--muted); margin-top:6px; }
.form-ok { display:none; background:var(--green-50); border:1px solid var(--green-500); color:var(--green-800);
  padding:14px 18px; border-radius:10px; margin-bottom:18px; font-weight:600; }

/* ---------- 筛选 ---------- */
.filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.filters button, .filters .filter-btn { display:inline-block; padding:9px 20px; border:1.5px solid var(--line); background:#fff; border-radius:999px;
  cursor:pointer; font-weight:600; font-size:14px; color:var(--muted); text-decoration:none; transition:.18s; }
.filters button:hover, .filters .filter-btn:hover { border-color:var(--green-500); color:var(--green-700); }
.filters button.active, .filters .filter-btn.active { background:var(--green-600); color:#fff; border-color:var(--green-600); }

/* ---------- 商品卡价格 ---------- */
.card__meta .price { color:var(--green-700); font-size:16px; font-weight:800; }

/* ---------- 分类卡占位（无封面图时）---------- */
.cat-card__ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; font-weight:700; letter-spacing:.04em; }

/* 查看全部分类入口 */
.cat-card--all { background:linear-gradient(135deg,var(--green-700),var(--green-800)); display:flex; align-items:center; justify-content:center; }
.cat-card--all:hover { background:linear-gradient(135deg,var(--green-600),var(--green-700)); }
.cat-card__all-text { position:relative; z-index:2; color:#fff; font-size:18px; font-weight:700; }
.cat-card__all-text::after { content:" →"; color:var(--amber-500); }

/* ---------- 详情：价格 / 规格 / 库存 / 自提 ---------- */
.price-row { display:flex; align-items:center; gap:14px; margin:10px 0 4px; }
.price-row .price { font-size:30px; font-weight:900; color:var(--green-700); }
.price-row .status { font-size:13px; font-weight:700; color:#fff; background:var(--amber-500);
  padding:4px 12px; border-radius:999px; }
.skus { margin:20px 0 14px; }
.skus__title { font-weight:700; color:var(--green-800); margin-bottom:10px; font-size:15px; }
.sku { display:flex; align-items:center; gap:14px; padding:11px 14px; border:1.5px solid var(--line);
  border-radius:10px; margin-bottom:10px; cursor:pointer; transition:.16s; }
.sku:hover { border-color:var(--green-500); }
.sku input { width:18px; height:18px; accent-color:var(--green-600); }
.sku__spec { font-weight:700; color:var(--ink); flex:1; }
.sku__price { color:var(--green-700); font-weight:800; }
.sku__stock { font-size:13px; color:var(--muted); }
.cache-note { font-size:13px; color:var(--muted); background:var(--amber-50); border:1px solid var(--amber-500);
  padding:9px 13px; border-radius:9px; margin:6px 0 4px; }
.pickup { margin-top:22px; border:1px solid var(--green-500); background:var(--green-50);
  border-radius:12px; padding:16px 18px; }
.pickup__title { font-weight:800; color:var(--green-800); margin-bottom:8px; }
.pickup ul li { font-size:14px; color:var(--ink); padding:5px 0; border-bottom:1px dashed var(--line); }
.pickup ul li:last-child { border-bottom:none; }

/* ---------- 分页 ---------- */
.pager { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:40px; flex-wrap:wrap; }
.pager__btn { display:inline-block; padding:10px 22px; border:1.5px solid var(--green-600); color:var(--green-700);
  background:#fff; border-radius:999px; font-weight:700; text-decoration:none; transition:.18s; }
.pager__btn:hover { background:var(--green-50); }
.pager__info { font-size:14px; color:var(--muted); font-weight:600; }
.empty { color:var(--muted); }

/* ---------- 面包屑 ---------- */
.breadcrumb { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; font-size:14px; color:#eaf3ec; flex-wrap:wrap; }
.breadcrumb a { color:#fff; text-decoration:underline; text-underline-offset:3px; opacity:.9; }
.breadcrumb a:hover { color:var(--amber-400); opacity:1; }
.breadcrumb .sep { opacity:.6; }
.breadcrumb .current { color:#fff; font-weight:600; }

/* ---------- 资讯文化专题页 ---------- */
.articles-header { background:var(--cream); padding:42px 0 24px; }
.articles-header .container { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.articles-header h1 { font-size:clamp(32px,4.5vw,48px); font-weight:900; color:var(--green-900); letter-spacing:.04em; margin:0; }
.articles-header__badge { display:inline-flex; align-items:center; gap:8px; background:var(--green-50); border:1px solid var(--green-500);
  color:var(--green-700); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; }

.articles-hero { position:relative; min-height:420px; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 82% 18%, #2f6b3c 0%, #1f4d2e 46%, #0e2a18 100%); color:#fff; }
.articles-hero__bg { position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; z-index:0; opacity:.55; }
.articles-hero__overlay { position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(8,26,15,.78) 0%,rgba(8,26,15,.42) 45%,rgba(8,26,15,.18) 100%); }
.articles-hero__inner { position:relative; z-index:2; display:flex; align-items:center; padding:70px 20px; }
.articles-hero__left { display:flex; align-items:center; gap:36px; }
.articles-hero__vertical { writing-mode:vertical-lr; text-orientation:upright; font-size:clamp(42px,5.5vw,68px); font-weight:900; line-height:1.45; letter-spacing:.22em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); white-space:nowrap; }
.articles-hero__intro { font-size:16px; line-height:1.9; color:#eaf3ec; opacity:.95; max-width:280px; }
.articles-hero__intro p { margin:0 0 10px; }
.articles-hero__intro p:last-child { margin-bottom:0; }

.articles-cats { background:var(--cream); padding-top:60px; padding-bottom:20px; }
.articles-cats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.articles-cat-card { display:flex; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s; box-shadow:0 2px 12px rgba(20,54,31,.06); }
.articles-cat-card:hover { transform:translateY(-4px); border-color:var(--green-500); box-shadow:0 10px 28px rgba(20,54,31,.12); }
.articles-cat-card.active { border-color:var(--green-600); box-shadow:0 0 0 2px var(--green-600); }
.articles-cat-card__img { flex:0 0 42%; min-height:120px; position:relative; overflow:hidden; }
.articles-cat-card__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.articles-cat-card:hover .articles-cat-card__img img { transform:scale(1.06); }
.articles-cat-card__body { flex:1 1 auto; padding:18px; display:flex; flex-direction:column; justify-content:center; }
.articles-cat-card__body h3 { font-size:18px; font-weight:800; color:var(--green-900); margin-bottom:8px; }
.articles-cat-card__body p { font-size:13px; color:var(--muted); line-height:1.55; margin:0; }

.articles-list { background:var(--cream); padding-top:30px; }
.articles-list__head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.articles-list__head h2 { font-size:28px; font-weight:800; color:var(--green-900); margin:0; }
.articles-list__count { font-size:14px; color:var(--muted); }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--green-700); text-decoration:none; }
.back-link:hover { color:var(--green-500); text-decoration:underline; }

/* ---------- 页脚 ---------- */
.footer { background:var(--green-900); color:#cfe3d2; padding:56px 0 26px; }
.footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
.footer h4 { color:#fff; font-size:16px; margin-bottom:16px; }
.footer a { color:#cfe3d2; font-size:14px; display:block; padding:5px 0; }
.footer a:hover { color:var(--amber-500); }
.footer .brand-name { color:#fff; font-size:22px; }
.footer .desc { font-size:14px; margin:14px 0; max-width:300px; }
.footer .qr { width:96px; border-radius:8px; background:#fff; padding:5px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:#9bbcab; }
.footer-bottom a.icp-link { display:inline; color:#9bbcab; text-decoration:none; }
.footer-bottom a.icp-link:hover { color:#fff; text-decoration:underline; }

/* ---------- 回到顶部 ---------- */
.totop { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--green-700); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.3s; z-index:60; font-size:20px; }
.totop.show { opacity:1; pointer-events:auto; }

/* ---------- 响应式（三档：≥1024 桌面 / 768–1023 平板 / <768 手机，可选 <480 超小屏）---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .footer .cols { grid-template-columns:1fr 1fr; }
  .detail { grid-template-columns:1fr; gap:28px; }
  .contact-grid { grid-template-columns:1fr; }
  .article-card { grid-template-columns:1fr; }
  .article-card .card__media { aspect-ratio:16/9; }
  .articles-hero__inner { flex-direction:column; align-items:flex-start; gap:28px; padding:70px 20px; }
  .articles-hero__left { gap:18px; }
  .articles-hero__vertical { font-size:42px; }
  .articles-cats__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  .nav { position:fixed; top:106px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; padding:14px 20px 22px; gap:4px; box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s; border-bottom:1px solid var(--line); }
  .header.nav-open .nav { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav a { padding:13px 14px; }
  .nav-toggle { display:block; }
  .header-cta .btn--ghost { display:none; }
  .topbar .tb-left { display:none; }
  .section { padding:54px 0; }
  .hero { min-height:520px; }
  .hero__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; margin-top:36px; text-align:center; }
  .hero__stats .stat strong { font-size:22px; }
  .hero__stats .stat span { font-size:11px; }
  .cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; overflow:visible; }
  .cat-card { flex:none; min-width:auto; max-width:none; aspect-ratio:2.4/1; min-height:auto; scroll-snap-align:none; }
  .cat-card__ph { aspect-ratio:auto; }
  .cat-card__all-text { font-size:15px; }
  /* 筛选条手机横向滚动 */
  .filters { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; scrollbar-width:none; }
  .filters::-webkit-scrollbar { display:none; }
  .filter-btn { flex:0 0 auto; }
  .articles-hero { min-height:360px; }
  .articles-hero__inner { gap:22px; padding:50px 20px; }
  .articles-hero__left { flex-direction:column; align-items:flex-start; gap:14px; }
  .articles-hero__vertical { writing-mode:horizontal-tb; font-size:32px; letter-spacing:.12em; white-space:normal; }
  .articles-hero__intro { max-width:100%; font-size:14px; }
  .articles-header { padding:32px 0 18px; }
  .articles-header h1 { font-size:30px; }
  .articles-cats__grid { grid-template-columns:1fr; }
  .articles-cat-card { flex-direction:row; }
  .articles-cat-card__img { flex:0 0 38%; min-height:110px; }
  .articles-list__head h2 { font-size:22px; }
  .footer .cols { grid-template-columns:1fr; gap:26px; }
  /* 商品详情：移动端底部吸顶购买栏 */
  .detail__cta { position:sticky; bottom:12px; z-index:20; background:rgba(255,255,255,.96);
    backdrop-filter:blur(6px); padding:12px 14px; border-radius:14px; box-shadow:var(--shadow); }
}
@media (max-width: 480px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns:1fr; }
  .hero h1 { font-size:30px; }
  .detail__info h1 { font-size:26px; }
  .price-row .price { font-size:26px; }
  .container { padding:0 16px; }
}