/* ============ 亚琪食品 · 官网设计系统（修订版） ============ */
:root{
  --brand:#C75B27;        /* 主色 砖橙 */
  --brand-d:#A8481C;
  --brand-l:#F4E7DC;
  --green:#2E7A4B;        /* 辅助 食品绿 */
  --green-d:#235E38;
  --green-l:#E6F0EA;
  --ink:#1F1C18;          /* 主文字 */
  --ink-2:#403B34;
  --muted:#7B736A;        /* 次要文字 */
  --bg:#FCFAF6;           /* 背景 */
  /* 浅色块（2026-10-23 提亮）：原 #F5EFE6 与页面底 #FCFAF6 相差 7~16 阶，
     铺满整段时成一条明显的米色带、边界硬切，客户反馈「过深、刻意」。
     收到 #FAF6EF 后与页面底只差 2~7 阶，交替节奏还在，但不抢内容。 */
  --bg-2:#FAF6EF;
  --card:#FFFFFF;
  --line:#E7DFD3;         /* 描边 */
  --shadow:0 14px 40px rgba(80,55,30,.08);
  --shadow-s:0 4px 16px rgba(80,55,30,.06);
  --r:14px;
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
/* 页头区与正文留白（2026-10-21 收紧）：原 64/56 + 84 整页上下空档过大，
   收到 40/36 + 56，视觉更紧凑；首页首屏用 .hero-inner，不受影响。 */
.wrap{padding:56px 0;}
.section-head{margin-bottom:42px;max-width:760px;}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2.5px;color:var(--brand);
  text-transform:uppercase;margin-bottom:12px;}
.kicker.g{color:var(--green);}
.h2{font-size:32px;font-weight:800;line-height:1.3;letter-spacing:.3px;color:var(--ink);}
.lead{color:var(--muted);font-size:16px;margin-top:14px;line-height:1.8;}
.accent{width:52px;height:3px;background:var(--brand);border-radius:3px;margin-top:18px;}
.accent.g{background:var(--green);}

/* ---------- 图标（线性 SVG） ---------- */
.ic{width:24px;height:24px;flex:none;display:inline-block;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ic-sm{width:18px;height:18px;stroke-width:1.8;}
.ic-lg{width:26px;height:26px;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;
  font-weight:600;font-size:15px;transition:.22s;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;}
.btn-p{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(199,91,39,.22);}
.btn-p:hover{background:var(--brand-d);transform:translateY(-2px);}
.btn-o{border-color:var(--brand);color:var(--brand);background:#fff;}
.btn-o:hover{background:var(--brand-l);}
.btn-g{background:var(--green);color:#fff;}
.btn-g:hover{background:var(--green-d);transform:translateY(-2px);}

/* ---------- 顶部导航 ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(252,250,246,.9);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
/* flex:none + nowrap：顶栏三块（logo / 导航 / 按钮）任何一块都不允许被压缩换行。
   不加这两条时，1024px 宽度下总宽超出约 80px，浏览器会去压导航项，把「公司简介」折成两行。 */
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--ink);
  flex:none;white-space:nowrap;}
.logo .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-d));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:800;box-shadow:var(--shadow-s);}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:2px;}
.logo-img{width:40px;height:40px;border-radius:11px;object-fit:cover;box-shadow:var(--shadow-s);flex:none;}
.nav-links{display:flex;gap:24px;align-items:center;flex:none;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0;white-space:nowrap;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand);transition:.22s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--brand);font-weight:600;}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none;}
.menu-btn{display:none;background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;line-height:1;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(820px 480px at 90% 0%,rgba(199,91,39,.10),transparent 60%),
  linear-gradient(180deg,#FBF1E8,#FCFAF6);}
.hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:52px 0 48px;}
.hero h1{font-size:46px;font-weight:800;line-height:1.18;letter-spacing:.3px;color:var(--ink);}
/* 高亮词（品牌短句）整体不拆行：中文标题在窄屏最难看的一种断法是最后一个字单独掉到下一行
   （「做餐饮背后的源头工 / 厂」）。绑住之后最差是整词换行，不会再出现孤字。 */
.hero h1 .hl{color:var(--brand);white-space:nowrap;}
.hero p.sub{font-size:17px;color:var(--ink-2);margin:22px 0 32px;max-width:520px;line-height:1.85;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.hero-badges span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 14px;
  font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-s);}
.hero-carousel{position:relative;height:380px;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);background:#EDE9E2;
  /* 灰条右侧要给圆点+暂停留出的宽度：由实测的控件宽度反推（4 张时约 86 + 右距 12 + 间距 6）。
     文案的可用宽度跟着这个变量走，控件数量变化时只需改这一处。 */
  --hc-tools-w:104px;}
/* 一张轮播：两种形态共用同一个容器与同一套淡入淡出。
   有图 = 图片铺满 + 底部灰条放文案；没传图 = 旧的渐变底 + 三行居中大字。
   切换逻辑（main.js）只看 .on，所以换形态不需要动脚本。 */
.hc-slide{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;
  opacity:0;transition:opacity .65s ease;pointer-events:none;overflow:hidden;}
.hc-slide.on{opacity:1;pointer-events:auto;}
/* ---- 旧版（没传图）：渐变 + 大字 ---- */
.hc-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 32px 58px;}
.hc-body::after{content:"";position:absolute;inset:0;background:
  radial-gradient(420px 420px at 80% 10%,rgba(255,255,255,.14),transparent 60%);}
.hc-slide .eyebrow{position:relative;z-index:2;font-size:13px;letter-spacing:3px;opacity:.85;font-weight:600;}
.hc-slide .big{position:relative;z-index:2;font-size:64px;font-weight:800;line-height:1;margin:14px 0 6px;}
.hc-slide .big small{font-size:24px;font-weight:700;margin-left:4px;}
/* text-wrap:balance（2026-10-23）：轮播说明都在 20 字上下、而 max-width 是一行 21 字，
   差一个字就会断成「21 字 + 1 个孤字」（改口径后"…有保 / 障"就是这么来的）。
   balance 让两行尽量等长，孤字消失；不支持的浏览器照旧换行，没有副作用。 */
.hc-slide .cap{position:relative;z-index:2;font-size:14px;opacity:.9;text-align:center;max-width:300px;line-height:1.7;text-wrap:balance;}
/* ---- 新版（有图）：图 + 底部灰条 ---- */
/* min-height:0 不能少：flex 子项默认 min-height:auto，<img> 会按自身比例把容器顶破，
   灰条被挤出可视区（自测时就是这么发现「图占了 380、灰条看不见」的）。 */
.hc-pic{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#E6E1D8;}
.hc-pic img{display:block;width:100%;height:100%;object-fit:cover;}
/* 灰条横贯整卡；右侧按 --hc-tools-w 留白，.hc-tools 正好压在这段留白上，两者不重叠 */
.hc-bar{flex:none;height:44px;display:flex;align-items:center;padding:0 var(--hc-tools-w) 0 16px;
  background:#EBE7E0;border-top:1px solid rgba(31,28,24,.08);}
/* flex:1 + min-width:0 缺一不可：少 flex:1 文案框只有内容那么宽、灰条看着断开；
   少 min-width:0（flex 子项默认 min-width:auto）则 40 字的长文案会把右侧圆点挤出卡片。 */
.hc-cap{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.35;color:#423D35;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 控件层：有图时正好落在灰条右端，没图时落在渐变块右下角 —— 两种形态位置一致，切换不跳 */
.hc-tools{position:absolute;right:12px;bottom:0;height:44px;display:flex;align-items:center;
  gap:10px;z-index:5;}
.hc-dots{display:flex;align-items:center;gap:6px;}
/* 圆点与暂停键在两种底上都要看得见：图片态的底是浅灰条，没图的态是深色渐变。
   所以圆点用「半透明白 + 一圈极细描边」（浅底靠描边界定、深底靠白点显形），
   激活态用品牌橙，它在两种底上都是最醒目的那一个。 */
.hc-dots button{width:6px;height:6px;border-radius:3px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(31,28,24,.16);transition:.25s;}
.hc-dots button.on{width:18px;background:var(--brand);box-shadow:none;}
.hc-pause{width:22px;height:22px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.7);color:#3A3530;box-shadow:0 0 0 1px rgba(31,28,24,.12);
  display:flex;align-items:center;justify-content:center;transition:background .2s;}
.hc-pause:hover{background:#fff;}
.hc-pause svg{width:11px;height:11px;fill:currentColor;}
.hc-pause .hc-i-play{display:none;}
.hc-pause.is-paused .hc-i-pause{display:none;}
.hc-pause.is-paused .hc-i-play{display:block;}
/* 箭头只对图片区居中（不压灰条）：照片上用白底 + 细阴影才看得清，
   半透明白压在深色照片上会糊成一片、压在浅色照片上又几乎看不见。 */
.hc-arrow{position:absolute;top:calc((100% - 44px) / 2);transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;padding:0;cursor:pointer;z-index:4;
  background:rgba(255,255,255,.9);color:#2A2620;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(30,20,10,.22);transition:background .2s,transform .15s;}
.hc-arrow:hover{background:#fff;}
.hc-arrow:active{transform:translateY(-50%) scale(.93);}
.hc-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.hc-prev{left:12px;}
.hc-next{right:12px;}
.hc-arrow:focus-visible,.hc-pause:focus-visible,.hc-dots button:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;}

/* ---------- 新闻详情 ---------- */
.post{max-width:820px;margin:0 auto;}
/* 封面图只在该条新闻真的传了图时输出（模板判断 cover 非空），没传就整块不渲染，
   所以这里只需要「把图铺满 300px 的框」，不再需要占位渐变与相机图标样式。 */
.post-cover{height:300px;border-radius:18px;overflow:hidden;margin-bottom:28px;background:var(--brand-l);}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:22px;}
.post-meta .tag{background:var(--brand-l);color:var(--brand-d);padding:5px 12px;border-radius:7px;font-weight:600;font-size:13px;}
/* 分类标签在详情页是指回「同类新闻」的链接（2026-10-21）：静态页没有分类独立页，
   目标就是列表页的 ?cat= 筛选态，由 main.js 还原。 */
.post-meta a.tag{transition:.18s;}
.post-meta a.tag:hover{background:#EED9C6;}
.post-meta .src{color:var(--green-d);font-weight:600;}
.post-body{font-size:16px;line-height:2;color:var(--ink-2);}
.post-body p{margin-bottom:20px;}
/* 2026-10-21 取消「首段自动强调」：正文一律按后台编辑器里设置的标签与样式输出，
   不再给任何段落套 p.lead（原规则会给首段加大字号+加粗，等于系统擅自改排版）。
   历史数据里残留的 class="lead" 也因此不再产生视觉差异。 */
.post-body h3{font-size:19px;color:var(--ink);margin:30px 0 14px;}
.post-more{margin-top:40px;padding-top:26px;border-top:1px solid var(--line);}

/* ---------- 新闻详情：上一篇 / 下一篇 ----------
   两栏等宽，左「上一篇（更新）」右「下一篇（更早）」；只有一条时占左栏，
   不拉通整行 —— 拉通会让人以为那是一整块内容而不是一个链接。
   标题最多两行，超了省略：长标题把卡片撑高会让两个链接高低不齐。 */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;}
.post-nav a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;text-decoration:none;transition:border-color .18s,box-shadow .18s;}
.post-nav a:hover{border-color:var(--brand);box-shadow:var(--shadow-s);}
.post-nav span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;}
.post-nav b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;line-height:1.6;color:var(--ink);font-weight:600;}
.post-nav.two .pn-next{text-align:right;}

/* ---------- 新闻分类筛选条（2026-10-21 新增） ----------
   一颗胶囊 = 一个分类，当前项实心砖橙。条数与列表同源（SiteService::newsCategories），
   所以「按钮上写 2」和「点开看到 2 条」不会打架。
   刻意只在屏幕窄时横向滚、不折成两排：一折行就把下面的标题区推低，首屏少一条新闻。
   类名避开 .nf —— 那是 404 页（Not Found）的栅格容器，两套样式会互相污染。 */
.news-filter{display:flex;gap:10px;margin-bottom:24px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.news-filter::-webkit-scrollbar{display:none;}
.nf-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 18px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer;transition:.18s;}
.nf-btn:hover{border-color:var(--brand);color:var(--brand-d);background:#FDF7F2;}
.nf-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(199,91,39,.2);}
.nf-btn .nf-n{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.6;}
.nf-btn.on .nf-n{opacity:.85;}

/* ---------- 新闻单行列表 ---------- */
.news-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);}
.news-row{display:flex;align-items:center;gap:22px;padding:21px 28px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .18s;}
.news-row:last-child{border-bottom:none;}
.news-row:hover{background:#FBF5EE;}
/* 筛选时由 JS 置 hidden。必须补这条：.news-row 自己是 display:flex，
   作者样式赢过浏览器默认的 [hidden]{display:none}，不写就「筛了等于没筛」。 */
.news-row[hidden]{display:none;}
.news-row .nd{flex:none;width:96px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.5px;}
/* 行内分类标签：固定最小宽度让一列标签左右对齐，读起来像表格的一列而不是随手贴的色块 */
.news-row .nc{flex:none;min-width:76px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.3px;
  color:var(--brand-d);background:var(--brand-l);padding:3px 9px;border-radius:6px;line-height:1.5;}
.news-row h4{flex:none;max-width:42%;font-size:15.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-row:hover h4{color:var(--brand-d);}
.news-row p{flex:1;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-row .arr{flex:none;color:var(--brand);font-size:16px;transition:transform .18s;}
.news-row:hover .arr{transform:translateX(4px);}
/* 置顶 HOT 角标（2026-10-29）：置顶是后台的排序开关，前台原先只体现在「排最前」，
   读者看不出这条是被置顶的。做一枚小胶囊放在标题前：渐变底 + 呼吸灯（轻微缩放与明暗），
   附带一颗闪烁的小圆点，像火苗但不抢标题。动画只是轻微的呼吸，不做闪烁，
   并且在系统开了「减少动态效果」时整条停掉。
   同日晚按客户反馈「太大了、有点抢眼」再收一档：字号 11 → 10px、内边距对半、
   光晕变淡、呼吸幅度从 5% 收到 2% —— 它是「标记」不是「标题」，只能刚好看见。 */
.news-row .hot{flex:none;display:inline-flex;align-items:center;gap:3px;padding:1px 6px;
  border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.4px;color:#fff;
  background:linear-gradient(135deg,#D4572B,var(--brand));box-shadow:0 1px 4px rgba(199,91,39,.20);
  animation:hotPulse 1.8s ease-in-out infinite;}
.news-row .hot::before{content:"";width:3.5px;height:3.5px;border-radius:50%;background:#fff;opacity:.85;
  animation:hotDot 1.1s ease-in-out infinite;}
@keyframes hotPulse{0%,100%{transform:scale(1);opacity:.95;}50%{transform:scale(1.02);opacity:1;}}
@keyframes hotDot{0%,100%{opacity:.5;transform:scale(.9);}50%{opacity:.95;transform:scale(1.05);}}
@media (prefers-reduced-motion:reduce){
  .news-row .hot,.news-row .hot::before{animation:none;}
}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
/* 条数不固定的网格（首页「产品系列」会随后台增减系列条数来回变）：
   固定列数会在只剩两条时留下半屏空白，auto-fit 让卡片自己铺满整行。 */
.gauto{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow-s);transition:.22s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .ico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-l);color:var(--brand-d);margin-bottom:16px;}
.card .ico.g{background:var(--green-l);color:var(--green-d);}
.card .ico svg{width:26px;height:26px;}
.card h3{font-size:18px;margin-bottom:8px;color:var(--ink);font-weight:700;}
.card p{color:var(--muted);font-size:14.5px;line-height:1.75;}
.card .more{display:inline-block;margin-top:14px;color:var(--brand);font-weight:600;font-size:14px;}

/* ---------- 媒体占位（示意） ---------- */
.shot{position:relative;border-radius:var(--r);overflow:hidden;display:flex;align-items:center;
  justify-content:center;color:#fff;min-height:200px;
  background:linear-gradient(135deg,#D98A52,#A8481C);}
.shot.g{background:linear-gradient(135deg,#4F9A6E,#2E7A4B);}
.shot .lbl{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;font-size:13px;letter-spacing:1.5px;opacity:.92;}
.shot .lbl svg{width:30px;height:30px;opacity:.9;}
.shot::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 40%);}
/* 有实拍图时：图片填满图片框（框的高度由版式决定，图按比例裁剪，不会变形拉伸）。
   z-index 高于 ::after 的装饰渐变，避免照片被蒙上一层光晕。 */
.shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block;}
/* 联系页地图：官方「分享 → 嵌入地图」的免 Key 真地图（2026-10-28）。
   .shot 底子是给图片用的（渐变底 + ::after 那层半透明白光晕），地图框必须清掉装饰层，
   否则光晕会蒙在地图上，看起来像旧截图没换掉。
   高度要显式给：iframe 是替换元素，height:100% 依赖父级已有确定高度，
   只写 100% 会塌成几十像素；最小高度同时保证与左侧联系方式那一列等高（约 420px）。 */
.map-embed{height:100%;min-height:420px;background:#EDE7DF;}
.map-embed::after{content:none;}
.map-embed iframe{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;}
@media (max-width:920px){.map-embed{min-height:340px;}}
/* 公司简介「图文二分」（2026-10-24 客户反馈「左右对齐不协调」）：
   两段正文共 11 行，按 16px/1.8 撑到 445px；配图 1000×600 定高 320px，
   原来 align-items:center 让图片垂直居中，上下各空 60 余 px，看着左右不齐。
   改法：图框不再居中、随正文撑满行高，两侧底边自然齐平；
   正文同时降到 15px/1.7、段距收到 12px，整块高度由 445 收到 400 上下，
   使 5:3 的配图裁切控制在左右各 10% 以内（主体厂房和厂区道路都还在）。
   手机端单列排版不存在左右对齐问题，字号在 920px 断点恢复站内标准值。 */
.intro-split{align-items:stretch;gap:40px;}
.intro-split .lead{font-size:15px;line-height:1.7;margin-top:12px;}
/* 图框最小高度必须写在这里、不能用内联 style：内联优先级高于媒体查询，
   会把 ≤920px 的 min-height:0 截胡 —— aspect-ratio:5/3 和 min-height:320 一打架，
   浏览器反推出宽度 320×5/3≈533px，393px 屏上横向溢出 173px（2026-10-29 实测）。
   写在 CSS 基础层，≤1080 / ≤920 两档媒体查询里的 min-height:0 才能正常接管。 */
.intro-split .shot{min-height:320px;}
/* 车间宫格（工厂实拍页）：图片框 + 框下说明。
   说明刻意放在图片**外面**、不叠在照片上：照片明暗不可控，压在图上的字常读不清，
   而这一页的说明正是「哪张是哪个车间」，必须一眼可读（与产品卡 .prod .body 同一思路）。 */
.shot-card{display:flex;flex-direction:column;gap:10px;}
.shot-cap{display:flex;flex-direction:column;gap:4px;padding:0 2px;}
.shot-cap .cap-t{color:var(--ink);font-size:15px;font-weight:600;line-height:1.5;}
.shot-cap .cap-s{color:var(--muted);font-size:13px;line-height:1.65;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* 可放大图片：鼠标变放大镜，点击弹出大图 */
img[data-zoom]{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;background:rgba(20,12,6,.88);display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:24px;cursor:zoom-out;animation:lb-fade .18s ease;}
.lightbox img{max-width:94vw;max-height:94vh;object-fit:contain;border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);background:#fff;}
/* 关闭键固定在右上角（不随图片大小跑），白描边压在深底上任何照片都看得见。
   手机上放大后图片几乎铺满，右上角是唯一稳定的「出口」位置。 */
.lb-close{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s;}
.lb-close:hover{background:rgba(0,0,0,.6);}
.lb-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* 放大期间锁住背景滚动：否则手机上一滑，底下的页面跟着动 */
body.lb-open{overflow:hidden;}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}

/* ---------- 产品卡 ---------- */
.prod{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-s);transition:.22s;display:flex;flex-direction:column;}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
/* 产品卡封面比例（2026-10-29 改）：原先是 min-height:170px 撑高度 ——
   三列栅格里卡片宽约 350，等于 2:1 的横条，上下被裁掉一大截，客户反馈「看着太扁、
   看不全」。改成 4:3：高度比原来多一半，与站内产品照的主比例接近，裁切只剩边缘；
   min-height 归零，高度完全交给比例，桌面与手机都不会再被撑成扁条。 */
.prod .shot{aspect-ratio:4 / 3;min-height:0;border-radius:0;}
/* 产品图悬停放大：图框尺寸不变，只让图片在框内推近一点，
   超出部分由 .shot 自带的 overflow 裁掉，不改变卡片高度与排版。 */
.prod .shot>img{transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.prod:hover .shot>img{transform:scale(1.12);}
.prod .body{padding:18px 20px;flex:1;display:flex;flex-direction:column;}
.prod .tag{font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-l);
  padding:3px 10px;border-radius:999px;align-self:flex-start;margin-bottom:10px;}
.prod h3{font-size:17px;margin-bottom:6px;color:var(--ink);font-weight:700;}
.prod p{color:var(--muted);font-size:13.5px;flex:1;line-height:1.7;}
.prod .meta{display:flex;gap:14px;margin-top:12px;font-size:12.5px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:12px;}
.prod .meta b{color:var(--brand-d);}
/* 卡片整张可点进详情页（2026-10-21）：右下角给一个明确的出口文案，
   只有悬停变色不够 —— 客户不会去猜一张图能不能点。 */
.prod .more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;
  color:var(--brand-d);letter-spacing:.02em;}
.prod:hover .more{color:var(--brand);}

/* ---------- 资质徽章 ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cert{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px;box-shadow:var(--shadow-s);}
.cert .seal{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:13px;font-weight:800;letter-spacing:.5px;}
.cert h4{font-size:16px;margin-bottom:6px;color:var(--ink);font-weight:700;}
.cert p{font-size:13px;color:var(--muted);line-height:1.7;}

/* ---------- 资质证照画廊（重设计） ---------- */
/* auto-fill + minmax：证照多少都能自适应排布，不依赖额外媒体查询 */
.cert-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-s);transition:.22s;display:flex;flex-direction:column;}
.cert-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
/* 证照是文档，横版的用 contain 完整显示、不裁切；点图放大看细节（data-zoom → lightbox） */
.cert-frame{position:relative;aspect-ratio:3/2;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:14px;min-height:0;overflow:hidden;}
/* 竖向证照（SC、HACCP 是 A4 竖版）的固有高度会把 3/2 的框顶高，导致同一行卡片高低不齐；
   min-height:0 去掉 flex 项的自动最小高度，框高恒定 */
.cert-frame img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;}
/* 竖版证照改「放大取上部」：contain 会让 A4 竖版缩成中间一条白带、字小到看不清，
   在一排横版证照里格外突兀。改成填满 + 顶端对齐，卡片面积与邻居一致；
   点开 lightbox 看到的仍是完整证照（这里只改显示，不裁图片本身）。
   是否竖版由服务端按图片实际像素判断（Asset::isTall → cover_tall 类名）。 */
.cert-frame img.tall{object-fit:cover;object-position:center top;}
/* 后台未传图时：文档轮廓 + 名称占位，像一张待上传的证书，而不是裂图 */
.cert-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);text-align:center;padding:18px;}
.cert-ph svg{width:46px;height:46px;opacity:.45;}
.cert-ph span{font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.5;}
.cert-cap{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;}
.cert-cap h3{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.4;}
/* 一句话说明（编号 / 许可范围）比颁发机构重要一档：颜色深一点，机构名退成浅灰脚注 */
.cert-cap .cs{font-size:13px;color:var(--ink-2);line-height:1.6;}
.cert-cap .ci{font-size:13px;color:var(--muted);line-height:1.6;}

/* ---------- 首页「应用范围」墙（2026-10-22） ----------
   八格经营场景（小摊/夜市、食堂、连锁餐饮…）。首版没有实拍图，所以默认形态是
   **文字墙**：场景名当主视觉、说明小一号，靠留白与一条橙色短横立住版面，
   不用灰色空框占位 —— 八个空框比八行文字更像页面坏了。
   运营补图之后整块切成 .has-img 形态：3:2 满框裁切（与资质卡同一套做法），
   没补图的那几格在框内居中显示名称，不出现半排空白。
   版式判断在服务端（SceneCards::of + hasImage），页面不用等图片加载完再改样式。 */
.scene-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.scene-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-s);transition:.22s;overflow:hidden;}
.scene-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.scene-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.scene-body::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--brand);
  margin-bottom:6px;}
.scene-body h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.4;}
.scene-body p{font-size:13.5px;line-height:1.72;color:var(--muted);}
/* 有图形态：图在上、名称与说明在下。文字区收窄字号，图才是主角 */
.scene-wall.has-img .scene-body{padding:14px 16px 16px;gap:5px;}
.scene-wall.has-img .scene-body::before{display:none;}
.scene-wall.has-img .scene-body h3{font-size:16px;}
.scene-wall.has-img .scene-body p{font-size:13px;}
.scene-shot{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);
  border-bottom:1px solid var(--line);}
.scene-shot img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .45s ease;}
.scene-tile:hover .scene-shot img{transform:scale(1.04);}
/* 还没补图的那一格：名称放在灰底正中，读起来是「这一格在等图」，而不是图裂了 */
.scene-noimg{display:grid;place-items:center;height:100%;padding:14px;text-align:center;
  font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.03em;}
@media(max-width:920px){
  .scene-wall{grid-template-columns:1fr 1fr;gap:18px;}
}
@media(max-width:560px){
  .scene-wall{grid-template-columns:1fr;gap:14px;}
  .scene-body{padding:18px 18px 20px;}
  .scene-wall.has-img .scene-body{padding:12px 14px 14px;}
}

/* ---------- 首页「资质认证」墙（2026-10-22） ----------
   原来首页这四张卡是「图标 + 标题 + 摘要」，图标只是证照没上图时的替身。
   真图齐全后改成「证照打头、文字在下」：先看见证书本身，再读编号 —— 客户信的是
   那张盖了章的纸，不是一圈线性图标。缩略图按 3:2 满框裁切、顶端对齐，横版与 A4 竖版
   并排时框高仍然一致；点图走 lightbox 看完整证照（与资质页同一套交互）。
   摘要保留：真正需要核对的是许可证编号、入库编号，图片缩到 260px 宽已看不清字。 */
.cert-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cert-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:.22s;}
.cert-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.cert-tile-shot{position:relative;aspect-ratio:3/2;min-height:0;overflow:hidden;background:#fff;
  border-bottom:1px solid var(--line);display:flex;}
.cert-tile-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;
  cursor:zoom-in;transition:transform .45s ease;}
/* A4 竖版证照（HACCP）塞进 3:2 扁框只能露出上部，硬切一刀像图片被截断；
   底部渐隐后读起来是「下面还有内容，点开看全」。 */
.cert-tile-shot img.tall{-webkit-mask-image:linear-gradient(#000 78%,transparent);
  mask-image:linear-gradient(#000 78%,transparent);}
.cert-tile:hover .cert-tile-shot img{transform:scale(1.035);}
.cert-tile-shot .cert-ph{flex:1;height:100%;}
/* 悬停才露出的「放大查看」：光标已是放大镜，但不碰鼠标就看不出图能点开 */
.cert-tile-shot::after{content:"放大查看";position:absolute;right:10px;bottom:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.4px;color:#fff;background:rgba(31,28,24,.66);
  border-radius:999px;padding:4px 11px;opacity:0;transition:.22s;pointer-events:none;}
.cert-tile:hover .cert-tile-shot::after{opacity:1;}
.cert-tile-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.cert-tile-body h3{font-size:16.5px;font-weight:700;line-height:1.45;color:var(--ink);}
.cert-tile-body p{font-size:13.5px;line-height:1.72;color:var(--muted);}
/* 平板排两列、手机排一列：四列在 920 以下每格只剩 200px 出头，证照缩成一枚印章 */
@media(max-width:920px){
  .cert-wall{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .cert-wall{grid-template-columns:1fr;gap:18px;}
  .cert-tile-body{padding:14px 16px 16px;}
  .cert-tile-body h3{font-size:15.5px;}
  /* 手机上整段只有一列，图片按 16/10 收一点高度，免得四张大图把首页拉太长 */
  .cert-tile-shot{aspect-ratio:16/10;}
}
/* ---------- 发展历程（纵向时间轴，2026-10-29 改版） ----------
   沿革：一条左侧竖线 + 纯文字年份 → 2026-10-22 照宣传手册改成「阶段横幅 + 三列卡片」
   → 折回横向时间轴（年份压轴、圆点当节点）→ 客户认为横向在中窄屏排不开、也读不出
   「连贯」，最终定为纵向单轴，桌面与手机同一套结构（只换图的站位）。

   三条硬约束，改之前先读：
   1. 轴只有一条，从第一个节点连到最后一个，跨阶段不断。所以阶段名是轴旁边的小标
      （.tl-mark），不是独立横幅 —— 一旦给它单独开一行横幅，轴就被切成两段，
      「一路推进」的读法立刻消失。
   2. 轴骑在容器左边缘（left:-1px，2px 宽的中心正好压在 x=0），与 .section-head 的
      左竖线是同一条线。内容整体缩进 --tl-indent，圆点探出容器 9px（落在页面 padding
      里，负方向不产生横向滚动）。
   3. 轴线上实下虚：末节点下面还有图与正文，线不能拖到底再硬切，渐隐收尾既连贯
      也不抢尾部。

   视觉只用站内语言：砖橙一条细线 + 白底卡片。手册那套粉红渐变底、双线箭头、描边
   括号属于另一套设计语言，搬过来会和全站白底打架。 */
.tl-track{--tl-indent:40px;position:relative;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:24px;}
.tl-track::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(199,91,39,0) 0,rgba(199,91,39,.55) 54px,
    rgba(199,91,39,.55) 82%,rgba(199,91,39,0) 100%);}
/* 阶段小标：贴在轴右侧，轴从它左边照常穿过，不打断。
   2026-10-29 改形态：原来它是和「事件名」（.tl-tag）同款的浅底胶囊，
   两个胶囊上下摞在一起，读者分不出哪个是「章节」哪个是「事件」——
   客户原话「这两种标题太同质化了」。现在把它改成**章节刻度**：
   3px 砖橙竖条 + 加宽字距的深色小字，后面拖一条渐隐细线收口。
   于是同一块里三级信息各自有形状，不必靠字号去猜层级：
     阶段（竖条 + 细线，横跨整行）→ 年份（大号砖橙数字）→ 事件名（浅底胶囊）。
   细线从文字右侧起、向右渐隐到透明，不横穿轴线，也不读成「把轴切开的分隔带」；
   本站的分隔语言本来就是细线（.section-head 的竖线、页脚的分隔），不引入新图形。 */
.tl-mark{padding-left:var(--tl-indent);margin:14px 0 -6px;
  display:flex;align-items:center;gap:12px;}
.tl-mark:first-child{margin-top:0;}
.tl-mark span{display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap;
  font-size:12.5px;font-weight:800;letter-spacing:3px;color:var(--brand-d);line-height:1.6;}
/* 竖条是「刻度」本体：与轴线同色，14px 高、圆头，像在轴上刻了一道 */
.tl-mark span::before{content:"";display:block;width:3px;height:14px;border-radius:2px;
  background:var(--brand);}
/* 细线只铺到「正文那一栏」的右边缘为止（340px 图栏 + 40px 列间距 = 380），
   再往右就钻进图片栏了 —— 横线压在照片左边缘上，看着像图被划了一道。 */
.tl-mark::after{content:"";flex:1 1 auto;height:1px;min-width:0;
  max-width:calc(100% - 380px);
  background:linear-gradient(90deg,#E3CBBA,rgba(227,203,186,0));}
/* 节点：桌面图右文左（图 380 定宽，正文吃满剩余），手机在 ≤920 换成图在文字上方。
   文字整块（年份行 + 说明 + 指标）包在 .tl-text 里，与图片各自垂直居中 —— 早先把
   head 与 body 拆成两行 grid 行，两行会被居中算法拉开百余像素，年份与说明脱节。 */
.tl-node{position:relative;padding-left:var(--tl-indent);
  display:grid;grid-template-columns:1fr 340px;column-gap:40px;align-items:start;}
/* 文字块顶对齐图片顶：年份—说明—指标挤成一块，空白留在左下方。若把它在 240px 的
   图片旁边垂直居中，说明会漂到图片中腰、与年份脱节，看着像两段不相干的字。 */
.tl-text{display:flex;flex-direction:column;gap:12px;min-width:0;}
.tl-head{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
/* 圆点跟着 head 走（绝对定位在 head 内），这样正文块在节点里垂直居中时圆点不会跑偏 */
.tl-dot{position:absolute;left:calc(-1 * (var(--tl-indent) + 10px));top:50%;margin-top:-10px;
  width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);
  box-shadow:0 0 0 4px var(--bg-2);z-index:1;}
.tl-node:hover .tl-dot{background:var(--brand);}
.tl-year{font-size:17px;font-weight:800;letter-spacing:.8px;color:var(--brand);white-space:nowrap;}
/* 阶段名做成胶囊：手册里「就读 / 毕业 / 摆摊」就是这几枚标签串在线上，节点靠它认人 */
.tl-tag{font-size:15.5px;font-weight:800;letter-spacing:.6px;color:var(--brand-d);
  background:var(--brand-l);border:1px solid #E9D3BF;border-radius:999px;padding:5px 16px;
  line-height:1.5;}
.tl-shot{margin:0;aspect-ratio:4/3;border-radius:12px;
  overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-s);}
.tl-shot img{width:100%;height:100%;object-fit:cover;transition:.3s;}
.tl-node:hover .tl-shot img{transform:scale(1.03);}
.tl-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--muted);font-size:13px;}
.tl-ph .ic{width:34px;height:34px;opacity:.4;}
/* 说明限宽：节点是图文两栏，正文若跟着第一列铺到底会排成一条 45 字的长行，
   视线要横跨半个屏幕才能接到图 */
.tl-text p{max-width:500px;font-size:15px;color:var(--muted);line-height:1.85;}
/* 指标做成一枚小标签：节点没有卡片边框，再画虚线会飘在半空 */
.tl-metric{align-self:flex-start;padding:3px 11px;border-radius:6px;
  background:var(--brand-l);font-size:12px;font-weight:700;color:var(--brand-d);letter-spacing:.4px;}

/* ---------- 新闻列表 ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.news-card{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow-s);transition:.22s;}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.news-card .date{text-align:center;flex:none;width:64px;}
.news-card .date .d{font-size:26px;font-weight:800;color:var(--brand);line-height:1;}
.news-card .date .m{font-size:12px;color:var(--muted);margin-top:4px;}
.news-card h4{font-size:16px;margin-bottom:6px;color:var(--ink);font-weight:700;line-height:1.5;}
.news-card p{font-size:13.5px;color:var(--muted);line-height:1.7;}

/* ---------- 表单 ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-s);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;color:var(--ink-2);}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-size:14px;font-family:inherit;background:var(--bg);transition:.2s;color:var(--ink);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);background:#fff;}
.field textarea{resize:vertical;min-height:110px;}
.info-list{list-style:none;}
.info-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line);}
.info-list li:last-child{border-bottom:none;}
.info-list .ic{width:40px;height:40px;border-radius:11px;background:var(--brand-l);color:var(--brand-d);
  display:flex;align-items:center;justify-content:center;flex:none;}
.info-list .ic svg{width:20px;height:20px;}
.info-list b{display:block;font-size:14px;color:var(--ink);font-weight:600;}
.info-list span{font-size:13.5px;color:var(--muted);line-height:1.6;}
/* 公司地址 → 地图（2026-10-28）：整段地址就是链接，取主色，悬停加下划线
   —— 这段话和电话一样都是浅灰说明性文字，只靠颜色或什么都不给，看不出能点。
   「高德地图打开」是一颗小胶囊（另一家图商的入口），定位紧跟在地址后面，
   不能换行当成新一行：那样会被读成「第二条地址信息」。 */
.info-list .addr-link{color:var(--brand);font-weight:500;}
.info-list .addr-link:hover{text-decoration:underline;text-underline-offset:3px;}
.info-list .map-alt{display:inline-block;margin-left:10px;padding:1px 10px;border:1px solid var(--line);
  border-radius:999px;font-size:12px;color:var(--muted);white-space:nowrap;transition:.2s;}
.info-list .map-alt:hover{color:var(--brand-d);border-color:var(--brand-l);background:var(--brand-l);text-decoration:none;}

/* ---------- 说明框 ---------- */
.note{border-radius:12px;padding:18px 20px;font-size:14.5px;line-height:1.8;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--brand);}
.note.green{border-left-color:var(--green);background:var(--green-l);}
/* 招商页底部横幅（2026-10-29）：招商专线 400-8383567 与业务电话不是同一个号，
   客户要求号码在横幅里就看得见、且比正文醒目。做法是左说明、右号码两块，
   号码单独一列、字号 27px、压在主色上，旁边的小标签说明这是招商热线。
   同日晚按客户要求去掉「联系我们 →」按钮：这一栏只留招商专线，
   再放一个跳联系页的按钮等于把人往别的电话上引，.join-cta-act 与按钮样式一并撤掉。 */
.join-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;}
.join-cta-text{flex:1 1 340px;min-width:0;}
.join-tel{display:flex;flex-direction:column;flex:none;line-height:1.15;}
.join-tel-label{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--muted);margin-bottom:3px;}
/* tabular-nums：号码里数字等宽，4 个 0 和 3 个 8 挤在一起时不会一眼读错。 */
.join-tel strong{font-size:27px;font-weight:800;letter-spacing:.5px;color:var(--brand);
  font-variant-numeric:tabular-nums;transition:color .2s;}
.join-tel:hover strong{color:var(--brand-d);}
@media(max-width:560px){
  .join-tel strong{font-size:25px;}
}
/* 系列备注（产品页，2026-10-22）：紧贴在一组产品卡下面，与栅格的 22px 行距对齐；
   上边距用 22px 是为了和卡片之间「同组」而不是「另一块」——再大就会读成新章节。 */
.series-note{margin-top:22px;}

/* ---------- 产品系列快速跳转（2026-10-23，仅窄屏） ----------
   手机端是单列大卡片，18 个产品要滑十几屏；只想看熟制的人得先滑完整组生胚。
   这条吸顶条点一下直接跳到分组，比「回到顶部再找」省事得多。

   top 用 75px 是页头（.header，sticky top:0）的实际高度，量过三种宽度都是 75；
   页头高度若改，这里要跟着改。桌面端不出现 —— 三列栅格下两组产品本来就在两屏内，
   多一条浮层只会挡内容。 */
.series-jump{display:none;}
/* 锚点跳转要留出「页头 75 + 切换条 44」的高度，否则跳过去标题正好被压在条子下面。 */
[id^="series-"]{scroll-margin-top:132px;}
@media(max-width:920px){
  .series-jump{display:block;position:sticky;top:75px;z-index:60;
    background:rgba(252,250,246,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);}
  .series-jump .container{display:flex;gap:9px;padding:9px 18px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .series-jump .container::-webkit-scrollbar{display:none;}
  .sj-item{flex:0 0 auto;padding:7px 18px;border:1px solid var(--line);border-radius:999px;
    background:#fff;color:var(--ink-2);font-size:13.5px;font-weight:600;
    text-decoration:none;white-space:nowrap;letter-spacing:.02em;transition:.18s;}
  .sj-item:active{background:var(--brand);border-color:var(--brand);color:#fff;}
}

/* ---------- CTA 条 ---------- */
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-d));border-radius:20px;
  padding:50px 46px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--shadow);}
.cta h2{font-size:27px;font-weight:800;}
.cta p{opacity:.92;margin-top:8px;line-height:1.7;}

/* ---------- 页脚 ---------- */
.footer{background:var(--ink);color:#cfc8c0;padding:56px 0 28px;margin-top:40px;}
/* 5 列（2026-10-24 加「关注我们」两枚码，同日二次放大）：关注列 1.75fr ≈ 310px，
   两枚码各 145px —— 112 时扫码要凑近屏幕，放大后正常坐姿就能扫。
   2026-10-29 重配 fr：地址实测单行 266px + 图标 18 + 间距 10 = 294px，
   联系列必须 ≥1.72fr（≈310px）；两枚码要 304px，关注列 ≥1.68fr。
   导航两列文字只有 4 字（56px），从 .7fr 收到 .55fr 腾地方。 */
.footer .cols{display:grid;grid-template-columns:1fr .55fr .55fr 1.72fr 1.68fr;gap:28px;}
.footer h5{color:#fff;font-size:15px;margin-bottom:16px;letter-spacing:1px;font-weight:600;}
/* foot-links 是「快速导航 / 产品系列」两组链接的容器：桌面端不做特殊排版，
   继承 .footer a 的块级行；手机端（≤560px 媒体查询）改成流式换行收高。 */
.footer a{display:block;color:#cfc8c0;font-size:14px;padding:5px 0;transition:.2s;}
.footer a:hover{color:#fff;}
.footer .logo{color:#fff;margin-bottom:14px;}
.footer .logo small{color:#9a938b;}
.footer p{font-size:13.5px;line-height:1.8;}
.footer .contact-line{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#cfc8c0;padding:4px 0;}
.footer .contact-line svg{color:#E89B6C;flex:none;}
/* 企业微信客服这一行是链接（地址与电话两行是纯文本），要按行内文字复位，
   否则吃到 `.footer a` 的 14px 字号与块级排版，比上面两行大字一圈。
   悬停加下划线：页脚本来就全是浅灰字，只改颜色判断不出这里可点。 */
.footer a.contact-line{display:flex;font-size:13.5px;padding:4px 0;color:#cfc8c0;text-decoration:none;}
.footer a.contact-line:hover{color:#fff;}
.footer a.contact-line:hover span{text-decoration:underline;text-underline-offset:3px;}
/* 关注我们：两枚码并排，白底圆角砖 —— 深色页脚上码本身必须有自己的白底，
   否则视频号那枚的白色圆点纹样会糊在深底上扫不出来。 */
/* minmax(0,1fr) + figure{min-width:0}：img 的固有宽 363 会被当成列的最小内容宽，
   手机上两列一起顶出屏幕（2026-10-24 踩过）。 */
.footer .social-qr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:304px;}
.footer .social-qr figure{margin:0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;}
/* height:auto 必须写：img 的 width/height 属性是「表现属性」，等于 height:363px，
   不写会被当成固定高度、把方图拉成长条（2026-10-24 踩过）。 */
.footer .social-qr .qr-tile{width:100%;max-width:145px;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:12px;background:#fff;display:block;cursor:zoom-in;}
.footer .social-qr figcaption{font-size:12.5px;color:#cfc8c0;letter-spacing:.5px;}

/* 悬停弹层：240px 大码浮在页脚上方，鼠标移上去即可直接扫，不必点开图片。
   只在有鼠标指针的设备生效，触屏用 @media (hover:none) 关掉：
   tap 会闪一下弹层挡内容；手机上码已 138px，直接扫即可。 */
.footer .qr-pop{position:absolute;left:50%;bottom:calc(100% + 14px);
  transform:translateX(-50%) translateY(8px) scale(.96);
  width:240px;padding:12px;background:#fff;border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.42);opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:40;}
.footer .qr-pop img{width:100%;height:auto;aspect-ratio:1/1;display:block;border-radius:6px;}
.footer .social-qr figure:hover .qr-pop,
.footer .social-qr figure:focus-within .qr-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}
/* 取景收敛（2026-10-28）：手机摄像头同时框进两枚以上码时，会自动挑一枚解，
   常见结果是反复对焦、扫出来的是旁边那张。所以悬停哪一枚，就把注意力收到弹层这一枚上：
   同排另一枚强虚化（9px 已不可能被解出来），被悬停那枚原位压暗——弹层已经放大显示同一张码，
   原位再保持清晰等于镜头里仍有两枚，故一并减弱。
   figure:not(:hover) 反向选择用 :has()：老浏览器不支持时整条规则失效，
   退化成「只有弹层」的旧行为，不会出现两边都糊的情况。 */
.footer .social-qr .qr-tile,
.footer .social-qr figcaption{transition:filter .18s ease,opacity .18s ease;}
/* 只在「有鼠标指针 + 弹层确实会显示」时生效：触屏 tap 会留下 sticky hover，
   点一下就常驻虚化；窄屏（<561px）弹层是 display:none，此时再压暗只会糊掉码却没有大码可扫。 */
@media (hover:hover) and (min-width:561px){
  .footer .social-qr figure:hover .qr-tile,
  .footer .social-qr figure:focus-within .qr-tile{opacity:.26;filter:blur(5px);}
  .footer .social-qr:has(figure:hover) figure:not(:hover) .qr-tile,
  .footer .social-qr:has(figure:focus-within) figure:not(:focus-within) .qr-tile{opacity:.32;filter:blur(10px) saturate(.4);}
  .footer .social-qr:has(figure:hover) figure:not(:hover) figcaption,
  .footer .social-qr:has(figure:focus-within) figure:not(:focus-within) figcaption{opacity:.45;}
}
/* 最后一枚靠右对齐：弹层 240px 比码块宽，居中会顶出容器右缘 */
.footer .social-qr figure:last-child .qr-pop{left:auto;right:0;transform:translateY(8px) scale(.96);}
.footer .social-qr figure:last-child:hover .qr-pop,
.footer .social-qr figure:last-child:focus-within .qr-pop{transform:translateY(0) scale(1);}
.footer .social-hint{font-size:11.5px;color:#8d867e;letter-spacing:.4px;margin:10px 0 0;}
@media (hover:none){
  .footer .qr-pop{display:none;}
  .footer .social-hint{display:none;}
  .footer .social-qr .qr-tile{cursor:default;}
}
/* 窄屏（手机）也把提示藏掉：这类宽度基本都是触屏，headless 截图报 hover:hover 只是
   模拟了鼠标，真机上 @media (hover:none) 已经生效；这里双保险，避免出现点不动的提示。 */
@media(max-width:560px){
  .footer .social-hint{display:none;}
  .footer .qr-pop{display:none;}
}
.footer .bottom{border-top:1px solid #3a352f;margin-top:36px;padding-top:20px;font-size:13px;color:#9a938b;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
/* 页脚底部的备案号链接：`.footer a` 是「块级 + 14px + 上下内边距」的导航样式，
   套在版权行里会把它撑成一整行、字号也比旁边大一号，所以这里按行内文字复位。 */
.footer .bottom a{display:inline;font-size:13px;color:inherit;padding:0;text-decoration:none;}
.footer .bottom a:hover{color:#cfc8c0;text-decoration:underline;}

/* ---------- 企业微信客服卡 ---------- */
.wecom-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-s);margin-top:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.wecom-card .wc-info{flex:1;min-width:220px;}
.wecom-card .wc-head{display:flex;gap:12px;align-items:center;}
.wecom-card .wc-head .ic{width:36px;height:36px;border-radius:10px;background:var(--green-l);color:var(--green-d);padding:7px;box-sizing:border-box;flex:none;}
.wecom-card .wc-head .ic svg{width:100%;height:100%;}
.wecom-card .wc-head b{font-size:16px;color:var(--ink);font-weight:700;display:block;}
.wecom-card .wc-head span{font-size:12.5px;color:var(--muted);margin-top:2px;display:block;line-height:1.5;}
/* 二维码块：白底 + 一圈细线。原先是「绿色渐变底 + 8px 内边距」，两边一共吃掉 16px，
   600px 的活码被压到 88px 显示，一个模块不到 2px，落在半像素上就发虚；
   绿色渐变框本身也比码抢眼。现在框放大到 136、内边距 8（码约 118px），边框只留 1px。 */
.wc-qr{width:136px;height:136px;border-radius:12px;flex:none;background:#fff;border:1px solid var(--line);
  box-sizing:border-box;padding:8px;display:flex;align-items:center;justify-content:center;}
.wc-tip{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6;}
/* 企业微信活码：二维码要留白不能裁，用 contain，不要圆角裁到码角上 */
.wc-qr img{width:100%;height:100%;object-fit:contain;display:block;}

/* ---------- 面包屑 / 内页头 ---------- */
/* 内页头两侧留白原本 40/36，视觉上把首屏吃掉一大块；收一半为 20/18。
   手机端沿用同一组值：面包屑 + H1 已经撑出足够高度，再留大空只会把内容推下去。 */
.page-hero{background:linear-gradient(135deg,#FBF1E8,#F5EBDF);padding:20px 0 18px;border-bottom:1px solid var(--line);}
/* 页头下方第一块内容：留白由「页头下内边距 + .wrap 上内边距」叠加而成（原 36+56=92）。
   只改页头只能少 18px，故把紧跟页头那一块的 .wrap 收到 28（现 18+28=46，正好一半）。
   页面中段的 .wrap 保持 56px 不动，否则产品多系列、首页多区块会挤成一坨。 */
.page-hero + .wrap{padding-top:28px;}
.page-hero h1{font-size:38px;font-weight:800;color:var(--ink);}
.page-hero p{color:var(--muted);font-size:16px;margin-top:12px;max-width:680px;line-height:1.8;}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px;
  /* 新闻详情末项是文章标题，可能很长。强制单行 + 末尾省略号：
     宁可截断也不要让面包屑折成两行把标题挤下去（标题在下面 H1 里完整显示）。 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crumb a:hover{color:var(--brand);}
.crumb-cur{color:var(--ink-2);}

/* ---------- 404 ---------- */
/* 左大数字 + 右说明的双栏：数字只是氛围，真正要读的是右边那三句话与三个按钮。
   窄屏时数字缩到上方一行，不占整屏 —— 手机上一屏必须能看见「回到首页」。 */
.nf{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;}
.nf-code{font-size:132px;font-weight:800;line-height:.9;letter-spacing:-4px;
  color:var(--brand-l);-webkit-text-stroke:2px rgba(199,91,39,.28);user-select:none;}
.nf-title{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:14px;}
.nf-lead{color:var(--muted);font-size:16px;line-height:1.85;max-width:520px;}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.nf-links{margin-top:34px;padding-top:22px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;}
.nf-links span{color:var(--muted);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;}
.nf-links a{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s;}
.nf-links a:hover{color:var(--brand);border-bottom-color:var(--brand);}

/* ---------- 响应式 ---------- */
/* 导航先于栅格切汉堡：2026-10-22 加了第 9 项「招商加盟」之后，桌面导航实测要 986px
   （九项文字 + 8 个 24px 间距 + logo + 右上按钮），加上容器两侧 56px 共 1042px ——
   断点仍在 1024 的话，1025~1041 这一小段会把顶栏撑出横向滚动带。
   栅格到 920px 才需要变单列，两者分开，避免 1024px 平板上栅格被过度压扁。 */
/* 921~1080（平板横屏 / 分屏窗口）：两栏各只剩 450px 出头，
   5:3 的配图被压成接近正方形，左右各裁 20%，右侧厂房会被切掉；
   这一段改成单列、图按原比例完整展示（过高时上下略裁）。 */
@media(min-width:921px) and (max-width:1080px){
  .intro-split{grid-template-columns:1fr;gap:28px;}
  /* 这里给固定高而不是 aspect-ratio + max-height：后者两者打架时浏览器会反推宽度，
     图片区只铺到 800px、右侧空一条（实测 953 的容器里只占 800）。 */
  .intro-split .shot{height:480px;min-height:0;}
}
@media(max-width:1080px){
  .nav-links{position:fixed;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:10px 0;display:none;box-shadow:var(--shadow);}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 28px;width:100%;border-bottom:1px solid var(--line);}
  .menu-btn{display:block;}
}
@media(max-width:920px){
  .nf{grid-template-columns:1fr;gap:20px;}
  .nf-code{font-size:88px;letter-spacing:-3px;}
  .hero-inner{grid-template-columns:1fr;padding:40px 0;}
  .hero h1{font-size:36px;}
  .hero-carousel{height:300px;}
  .g2,.g3,.g4,.certs,.news{grid-template-columns:1fr;}
  .news-row{position:relative;flex-wrap:wrap;gap:8px 14px;padding:16px 34px 16px 18px;}
  .news-row .nd{width:auto;}
  /* 手机上分类标签提到最前当条目标签，且不再占固定列宽（固定宽会把日期挤走） */
  .news-row .nc{min-width:0;order:-1;font-size:11px;padding:2px 8px;}
  .news-row h4{max-width:100%;white-space:normal;}
  .news-row p{display:none;}
  /* 箭头钉在右侧居中：折行后它会被挤到自己独占一行，看着像多出来一个符号 */
  .news-row .arr{position:absolute;right:16px;top:50%;margin-top:-10px;}
  .news-row:hover .arr{transform:none;}
  .news-filter{gap:8px;margin-bottom:18px;}
  .nf-btn{padding:8px 14px;font-size:13px;}
  /* 手机/平板：轴不动（仍在同一条竖线上），只把图从右侧挪到文字上方，
     缩进同步收窄一档，让正文与图都能吃满屏宽。 */
  .tl-track{--tl-indent:28px;gap:22px;}
  .tl-node{grid-template-columns:1fr;gap:16px;}
  /* 单列时节点不再并排，去掉顶对齐带来的左列空白 */
  .tl-text{gap:10px;}
  .tl-mark{margin:8px 0 -4px;gap:10px;}
  /* 单列后图在文字下方，不再有「图栏」可避让，细线放回整行 */
  .tl-mark::after{max-width:none;}
  .h2{font-size:26px;}
  /* 公司简介图文改单列后不再有左右对齐问题，正文回到站内标准字号；
     配图也回到原图 5:3，不再为了凑 320px 高度把上下裁掉近一半。 */
  .intro-split .lead{font-size:16px;line-height:1.8;margin-top:14px;}
  .intro-split .shot{height:auto;aspect-ratio:5/3;min-height:0;}
}
/* 页脚 2 列断点收在 1159（2026-10-29）：5 列要容器满宽 1104 时联系列才分得到
   310px（地址单行实测 294px 含图标），921~1159 之间容器跟着视口缩、地址必折行、
   尾部「19 号」孤行。这一段改 2 列后联系列是半宽，地址稳单行。
   链接同步改流式换行：单列/双列里块级链接各占一整行、右侧全空
   （手机端「快速导航」六条曾拖出一大截）。flex 换行后 4 字标签一行放 3~4 条，
   六条收成两行、系列两条并一行。纵向 padding 比桌面的 5px 略增，补回触控高度。 */
@media(max-width:1159px){
  .footer .cols{grid-template-columns:1fr 1fr;}
  .footer .foot-links{display:flex;flex-wrap:wrap;column-gap:22px;}
  .footer .foot-links a{padding:7px 0;}
}
@media(max-width:560px){
  .tl-track{--tl-indent:22px;gap:22px;}
  .tl-head{gap:10px;}
  .tl-year{font-size:14px;letter-spacing:.8px;}
  .tl-tag{font-size:14px;padding:3px 12px;}
  /* 手机端阶段刻度：字距收一档（3px 在窄屏看着太散），竖条同步缩到 12px */
  .tl-mark span{font-size:11.5px;letter-spacing:2px;gap:8px;}
  .tl-mark span::before{height:12px;}
  .footer .cols{grid-template-columns:1fr;}
  .container{padding:0 18px;}
  /* 首屏主标题跟着屏宽缩：390 宽时 36px 的「做餐饮背后的源头工厂」要 360px，
     而可用宽度只有 354px，最后一个字必然掉行。按 8.6vw 缩到 33.5px 就能两行放下；
     360 / 320 这类更窄的屏继续等比缩，最小 27px（再小就压不住气势了）。 */
  .hero h1{font-size:clamp(27px,8.6vw,34px);}
  /* 手机上「上一篇 / 下一篇」并排会把标题挤成三四个字一行，改成上下两条 */
  .post-nav{grid-template-columns:1fr;}
  .post-nav .pn-next{text-align:left;}
  .cta{padding:34px 26px;}
  /* 手机上轮播只有 300px 高：箭头收小一圈，灰条与控件同比收，别压住画面主体 */
  .hc-arrow{width:34px;height:34px;top:calc((100% - 42px) / 2);}
  .hc-arrow svg{width:17px;height:17px;}
  .hc-prev{left:8px;}
  .hc-next{right:8px;}
  .hero-carousel{--hc-tools-w:96px;}
  .hc-bar{height:42px;padding:0 var(--hc-tools-w) 0 14px;}
  .hc-cap{font-size:12.5px;}
  .hc-tools{height:42px;right:10px;gap:8px;}
  .hc-slide .big{font-size:48px;}
  .hc-slide .big small{font-size:20px;}
  /* 手机宽 320~390 时客服卡的信息区已占满一行，二维码会掉到第二行；
     居中放，别孤零零贴在左边 */
  .wecom-card{justify-content:center;}
}
/* 360 / 320 这类窄屏：顶栏 logo +「合作咨询」+ 汉堡合计约 346px，
   而 360 宽的可用宽度只有 324px，整页会被撑出横向滚动带（320 宽溢出 44px）。
   这里等比收 logo 与按钮尺寸 —— 「合作咨询」必须保持可见，不能藏进下拉，
   所以只能缩，不能删。 */
@media(max-width:380px){
  .logo{font-size:17px;gap:9px;}
  .logo-img{width:34px;height:34px;}
  .logo small{font-size:10px;letter-spacing:1.2px;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:10px 14px;font-size:13.5px;}
  /* 证照画廊的列宽下限是 320px，比 320 屏的可用宽度还大，撑出横向滚动带 */
  .cert-gallery{grid-template-columns:1fr;}
  /* 产品卡栅格（.gauto）的最小列宽是 300px，320 屏去掉两侧 18px 内边距只剩 269px，
     实测撑出 13px 横向滚动带（2026-10-22 探针量到的就是这两张产品卡）。
     收到单列后 320 屏不再横向滚动。 */
  .gauto{grid-template-columns:1fr;}
  /* 页脚地址 21 个字，13.5px 下连图标要 294px，320 屏只剩 284px —— 收一档字号即可单行。
     选择器必须带上 a.contact-line：地址行 2026-10-28 变成链接后，基础规则
     `.footer a.contact-line{font-size:13.5px}` 特异性更高，只写 .footer .contact-line
     会被压住（2026-10-29 探针实测 320 仍折行）。 */
  .footer .contact-line,.footer a.contact-line{font-size:12px;gap:8px;}
}

/* ---------- 常见问题（FAQ） ---------- */
/* 每条问答是一张独立卡片：问题是 h3（已是页面大纲的一部分，AI 与读屏都能识别），
   答案用 p。卡片之间留白，悬停轻微抬起，和全站卡片语言一致。 */
.faq-list{display:flex;flex-direction:column;gap:16px;max-width:860px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-s);transition:.22s;}
.faq-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-l);}
.faq-item h3{font-size:18.5px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:12px;}
.faq-item p{color:var(--ink-2);font-size:15px;line-height:1.85;}
/* 手机上卡片内边距收一档，避免答案贴边 */
@media(max-width:560px){
  .faq-item{padding:20px 18px;}
  .faq-item h3{font-size:17px;}
}

/* ---------- 招商加盟（2026-10-22） ----------
   两种加盟方式并排两张卡：封面在上、文字在下，细节图排成小图墙。
   首版没有实拍，卡片的文字部分必须自己立得住 —— 所以「名称 + 卖点胶囊 + 说明 + 带勾要点」
   是固定顺序，封面只是加分项：没有封面时整张卡就是一张文字卡，而不是缺了一块的破卡。 */
/* 2026-10-24：整块收窄。宣传册来的封面原图只有 380px 宽，铺满 1104 容器时单卡封面
   539×337，放大痕迹最明显；收到 960 后单卡 469×293，面积少两成，观感干净得多。
   用 margin-inline:auto 居中（与「产品优势」九格同宽同位置，两块左右边线对齐）；
   左对齐会在右侧留一条空档，像没排满。 */
.join-list{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.join-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;transition:.22s;}
.join-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
/* 16:10 与后台裁剪比例一致（Asset 的 franchise.cover 槽位），图不会被二次裁。
   2026-10-24 试过压到 16:9 / 2:1 让封面更扁，实测会把「北京烤鸭·小红帽」的招牌切掉——
   门头招牌是「门店加盟」这张图的信息主体，不能裁，故比例保持不变，缩小靠收窄整块。 */
.join-shot{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2);}
.join-shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.join-card:hover .join-shot img{transform:scale(1.03);}
.join-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.join-head{display:flex;flex-direction:column;gap:6px;}
.join-head h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.35;}
.join-tag{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--brand-d);
  background:var(--brand-l);border:1px solid #E9D3BF;border-radius:999px;padding:3px 12px;letter-spacing:.3px;}
.join-lead{font-size:14px;line-height:1.75;color:var(--ink-2);}
.join-points{list-style:none;display:flex;flex-direction:column;gap:8px;}
.join-points li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.65;color:var(--ink-2);}
/* 勾用食品绿：与全站「确认/通过」的语义色一致，橙色留给标题与价格类信息 */
.join-points .ic{color:var(--green);margin-top:4px;flex:none;}
/* 小图墙钉在卡片底部：两张卡的要点条数可能不同，图片对齐底线才不会一高一低 */
.join-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:4px;}
.join-photo{display:flex;flex-direction:column;gap:6px;min-width:0;}
.join-photo img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:var(--bg-2);display:block;}
/* 图注单行省略：小图上放两行字会把整行图墙顶得不齐 */
.join-photo figcaption{font-size:12px;color:var(--muted);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 流程四步：序号当视觉锚点，卡片本身不加悬停位移 —— 它不是可点的东西 */
.join-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.join-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:8px;}
.join-num{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--brand);
  font-variant-numeric:tabular-nums;}
.join-steps h4{font-size:17px;font-weight:700;color:var(--ink);line-height:1.4;}
.join-steps p{font-size:13.5px;line-height:1.72;color:var(--muted);}
/* 投资风险提示（2026-10-23）。刻意做成一行浅灰小字：它要存在、要看得清，
   但不能和上面的 CTA 抢注意力 —— 加边框或底色都会变成"第二个提示块"。 */
.join-notice{font-size:12.5px;line-height:1.85;color:var(--muted);max-width:820px;}
@media(max-width:920px){
  /* 两列比单列好：加盟方式的说明与要点都不长，单列会让手机用户连滑四屏才看到第二步 */
  .join-list,.join-steps{grid-template-columns:1fr 1fr;gap:18px;}
}
@media(max-width:560px){
  .join-list,.join-steps{grid-template-columns:1fr;}
  .join-body{padding:20px 18px 22px;}
  .join-head h3{font-size:20px;}
  .join-gallery{grid-template-columns:1fr 1fr;gap:8px;}
}

/* ---------- 合作伙伴（2026-10-22） ----------
   加盟页底部那一版品牌墙：白底方框，一格一个品牌（2026-10-24 起桌面 6 列）。
   两条规矩：
     1. 格子**横竖比例固定**（5:3），标识图用 object-fit:contain 按原比例放进框里 ——
        横版字标（利群集团、大润发）与方形徽标（7-ELEVEN、盒马）都能放，谁也不变形；
     2. 标识图**一律按原色显示**（2026-10-22 定）。早先做成「默认灰度、悬停变彩」，
        是想压一压各家标识饱和度不一的问题，但客户要的是「一眼认出是哪家」——
        灰度会把 7-ELEVEN 的红绿条、永辉的蓝、信誉楼的金绿全洗成灰的，
        认品牌这件事直接失效。压住花哨靠的是统一的 5:3 白底画布，不是去色。
   还没传标识图的格子显示品牌名 —— 名单的完整性不依赖图片是否补齐。 */
.partner-band{background:#F2EDE5;border-top:1px solid var(--line);padding:44px 0;}
/* 2026-10-24：5 列改 6 列。28 家排下来是 4 整行 + 4 格收尾（原来 5 列是 5 行 + 3 格）；
   格子从 209px 收到 174px，标识跟着小一档 —— 客户的原话是「logo 太大」，5 列时
   标识几乎顶到卡片内边，像贴纸；6 列后标识约卡片宽度的 6 成，接近手册里的留白比例。
   gap 同步从 14 收到 12：6 列下 14 的缝会显得碎片化。 */
.partner-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.partner-tile{display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:5/3;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-s);transition:transform .22s,box-shadow .22s,border-color .22s;}
.partner-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#DCCFBE;}
/* 有 href 才是可点的东西：光标与右上角的箭头小标只在那种格子上出现 */
.partner-tile[href]{cursor:pointer;}
/* 原色直出：不做灰度、不做透明度衰减，各家标识该是什么颜色就是什么颜色 */
.partner-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
/* 文字形态：没传标识图时顶上来。行高与字距按「短名字不散、长名字不挤」调，
   最长的一条是「山东省农业科学院作物研究所」（13 字），6 列栅格里会折成两三行 ——
   这是允许的（没有标识的格子本来就是文字卡），有图的格子不受影响。
   名字下面那行渠道类型（商超 / 酒店 / 院校…）不是装饰：标识图缺位时格子里
   只有四个字会显得空，一行小字既填版面，又让人一眼看出这家是干什么的。 */
.partner-text{display:flex;flex-direction:column;align-items:center;gap:6px;}
.partner-name{font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:1px;
  line-height:1.45;text-align:center;word-break:break-word;}
.partner-note{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:2px;
  line-height:1.4;text-align:center;}
/* 口径说明（2026-10-23）：一排标识并排时读者会默认"第一个最大"，而实际排序规则是
   「配了标识图的在前」，与品牌体量无关。一行小字把这层误解说清，也顺带说明不是全量客户。 */
.partner-foot{margin-top:20px;font-size:12.5px;line-height:1.8;color:var(--muted);text-align:center;}
@media(max-width:920px){
  /* 四列：1160 容器放 6 列在 920 以下会压到 140px，标识开始发虚，先退到 4 列 */
  .partner-wall{grid-template-columns:repeat(4,1fr);gap:14px;}
  .partner-tile{padding:16px 18px;}
  .partner-name{font-size:15px;letter-spacing:.5px;}
}
@media(max-width:560px){
  .partner-wall{grid-template-columns:repeat(2,1fr);gap:10px;}
  .partner-tile{padding:12px 12px;}
  .partner-name{font-size:13.5px;letter-spacing:0;}
}

/* ---------- 产品详情页（2026-10-21） ---------- */
/* 版式来源：纸质产品册的单页 —— 名称与副标题、三条要点、实物细节图、规格表。
   阅读顺序即采购决策顺序：先确认是不是这类货，再确认怎么用与存，
   最后看实物与规格。 */
.page-hero h1 .tag{display:inline-block;vertical-align:6px;margin-left:12px;
  font-size:12.5px;font-weight:700;color:var(--brand-d);background:#fff;
  border:1px solid var(--brand-l);border-radius:999px;padding:2px 12px;letter-spacing:.5px;}
.prod-sub{font-size:13.5px;letter-spacing:.04em;color:var(--muted);margin-top:6px;}
.prod-lead{color:var(--ink-2);font-size:16px;margin-top:14px;max-width:680px;line-height:1.8;}

/* 详情页是多段叠排（要点 → 导语 → 细节图 → 规格表），每段单独用一个 .wrap
   会得到 112px 的段间距，读起来像四张互不相干的页面。收一半，段与段才是一个整体。 */
.wrap-tight{padding:28px 0;}

/* 产品资料表：使用条件 / 储存条件 / 适用场景 + 规格，全部收进同一张表。
   分两套版式（三张卡片 + 一张橙色表头表格）会让页面像两个模块硬拼；
   合成一张后只有一套细线、一套栅格，缺哪项就少一行，也不会露空格。
   标签弱化成小字灰色、内容加深：视线先落在「这货怎么用」上，而不是三个栏目标签。 */
.prod-facts{border-top:1px solid var(--line);}
.prod-facts-title{padding:17px 0 9px;font-size:12px;font-weight:700;color:var(--brand);
  letter-spacing:2.5px;}
.prod-facts-grid{display:grid;grid-template-columns:1fr;}
.fact{display:grid;grid-template-columns:168px minmax(0,1fr);gap:32px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);}
.fact span{font-size:12.5px;color:var(--muted);letter-spacing:.12em;}
.fact b{font-size:15px;font-weight:400;color:var(--ink);line-height:1.75;}
/* 规格那几行是短数值，加粗才压得住右边一行说明文字；长句子保持常规字重更耐读。 */
.fact-num b{font-weight:600;font-variant-numeric:tabular-nums;}

.prod-intro{max-width:840px;color:var(--ink-2);font-size:15.5px;line-height:1.95;white-space:pre-line;}

/* 产品详情 · 产品图两列平铺（2026-10-29，替代原来的细节图轮播）。
   客人打开详情页第一眼要看到「这件货长什么样」；轮播一次只给一张，得点好几下才看完，
   平铺则把全部图一次摆出来。封面排第一格（见 ProductCatalogService::productImages）。
   框固定 4:3、图用 contain：产品图里横竖比例都有（整箱包装、竖幅照片），
   cover 会裁掉内容，留白比裁掉可接受，底色用浅灰让留白看起来是「底」。
   一行两张是两个尺寸都成立的：手机上单图约 180px 宽，点开仍能放大看细节。 */
.prod-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* 每格统一 4:3 的框、图用 contain 居中：不同比例的照片（横构图的门店照、
   竖拍的手撕饼）放进来都完整可见，框子宽高一致，两列排到底也不会高矮参差。
   图注不再显示（2026-10-29 同日改），所以这里不需要 flex 撑高的那套逻辑。 */
.pp-item{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-s);
  /* grid 的 1fr 子项默认 min-width:auto，图片的固有宽度会把列撑破（390 屏实测整页溢出），
     必须显式归零，列宽才会真的跟着容器走。 */
  min-width:0;}
.pp-item img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:contain;
  background:var(--bg-2);cursor:zoom-in;}
@media(max-width:560px){
  .prod-photos{gap:10px;}
}

/* 规格表：已并入产品资料表（见上），这里不再单独成块。 */

/* 底部咨询条：详情页不放表单（那要多一套提交与校验），只把人导到联系页。 */
.prod-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;}
.prod-cta-t b{display:block;font-size:19px;color:var(--ink);margin-bottom:6px;}
.prod-cta-t span{color:var(--muted);font-size:14px;line-height:1.7;}

@media(max-width:760px){
  /* 手机上标签列收窄而不是改成上下两行：八行都叠成「标签一行、内容一行」会拖出一屏半，
     而标签最长只有五个字，88px 足够，右侧仍能放下两三行说明。 */
  .fact{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px 0;}
  .fact b{font-size:14.5px;line-height:1.7;}
  .prod-cta{flex-direction:column;align-items:flex-start;padding:22px 20px;}
  .page-hero h1 .tag{vertical-align:4px;margin-left:8px;}
}