/* ============================================================
   2026-11-09 B 方案：页头替换为商城风格后，补齐老页面内页需要的
   通用组件样式（面包屑 / 白卡片 / 列表页栏目导航）。
   只新增，不覆盖 style.css 里已有的任何规则。
   由 include/header.jsp 统一引入，全站生效。
   ============================================================ */

/* ---------- 面包屑 ---------- */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:#8c8c8c;
  padding:12px 2px 0;line-height:1.6;min-height:28px}
.crumb a{color:#555}
.crumb a:hover{color:#e8342a}
.crumb i{font-style:normal;color:#c9c9c9}
.crumb b{font-weight:400;color:#8c8c8c}

/* ---------- 白卡片（侧栏用） ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:46px;
  border-bottom:1px solid #f2f2f2;background:linear-gradient(180deg,#fff,#fcfcfc)}
.card-hd h3{font-size:14.5px;font-weight:700;color:#222;position:relative;padding-left:11px;line-height:1.2}
.card-hd h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;background:var(--o)}
.card-hd .more{font-size:12.5px;color:#8c8c8c}
.card-hd .more:hover{color:#e8342a}
.card-bd{font-size:13px;color:#555}
.card-bd a{color:#555}
.card-bd a:hover{color:#e8342a}

/* 侧栏纵向导航（列表页通用，配合 .card 使用） */
.cw-nav{display:flex;flex-direction:column}
.cw-nav a{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:14px;color:#555;
  border-left:3px solid transparent;transition:.15s;line-height:1.4}
.cw-nav a:hover{background:#fff8f7;color:#e8342a}
.cw-nav a.on{background:#fff2f0;color:#e8342a;font-weight:700;border-left-color:#e8342a}

/* ---------- 老页面里新闻列表容器的宽度兜底 ---------- */
/* header 换成全屏流式后，老页面 .content.width(952px) 会显得偏窄居中，
   这里把常见容器放宽到商城内容宽度，避免左右大片留白。 */
.content.width{width:auto;max-width:1440px;margin:0 auto;padding:0 clamp(16px,2vw,32px);float:none}
.footer_link{text-align:center}

@media (max-width:1023px){
  .content.width{padding:0 14px}
}

/* ---------- 极窄屏（≤360）页头保温 ---------- */
/* 热搜词条是 white-space:nowrap 的 flex 行，320px 下最后一个词会顶出视口。 */
@media (max-width:400px){
  .hotwords{gap:8px;font-size:11.5px;flex-wrap:wrap;white-space:normal;line-height:1.6;
    max-height:2.9em;overflow:hidden}
  .hotwords a{flex:0 0 auto}
}
@media (max-width:360px){
  .hotwords{max-height:1.6em}
  .hotwords a:nth-child(n+3){display:none}
}

/* ============================================================
   2026-11-09：商城风格页脚 .foot 的样式兜底
   footer.jsp 已经换成 .foot 结构，但只有 /assets/home/style.css 里有定义，
   而 /servicechannel（channel.jsp）只引 global.css + style.css，导致页脚
   「购物指南/配送方式/支付方式…」整排散成一行、排版全乱。
   这里把 .foot 这一套在原文件里自带定义，任何页面引入 head-mall.css 都能正常显示。
   ============================================================ */
:root{--o:#e8342a;--ink:#222;--ink2:#555;--ink3:#8c8c8c;--line:#e8e8e8}
.foot{--o:#e8342a;--ink:#222;--ink2:#555;--ink3:#8c8c8c;--line:#e8e8e8;
  margin-top:clamp(24px,2.6vw,40px);background:#fff;border-top:3px solid #e8342a;padding-top:24px}
.foot .w{width:auto;max-width:1440px;margin:0 auto;padding:0 clamp(14px,2vw,32px);box-sizing:border-box}
.foot-top{display:flex;gap:clamp(20px,3vw,52px);padding-bottom:22px;border-bottom:1px solid #f2f2f2;flex-wrap:wrap}
.foot-top dl{font-size:12.5px;margin:0;min-width:104px}
.foot-top dt{font-weight:700;font-size:13.5px;margin-bottom:8px;color:#222}
.foot-top dt.dt2{margin-top:12px}
.foot-top dd{color:#8c8c8c;margin:5px 0}
.foot-top dd a{color:#8c8c8c;text-decoration:none}
.foot-top dd a:hover{color:#e8342a}
.foot-serv{margin-left:auto;text-align:right}
.foot-serv b{display:block;font-size:12.5px;color:#8c8c8c;font-weight:400}
.foot-serv strong{display:block;font-size:24px;color:#e8342a;font-family:"DIN Alternate",Arial;margin:2px 0 4px;line-height:1.2}
.foot-serv span{display:block;font-size:12px;color:#8c8c8c}
.foot-serv a{display:inline-block;margin-top:8px;font-size:12.5px;color:#e8342a;border:1px solid #e8342a;border-radius:16px;padding:4px 14px;text-decoration:none}
.foot-links{text-align:center;padding:14px 0;font-size:12.5px;color:#8c8c8c}
.foot-links a{color:#8c8c8c;text-decoration:none}
.foot-links a:hover{color:#e8342a}
.foot-links i{font-style:normal;color:#ddd;margin:0 8px}
.foot-bottom{padding-bottom:26px;text-align:center;font-size:12px;color:#a5a5a5;line-height:1.9}
.foot-bottom p{margin:0}
.foot-bottom a{color:#a5a5a5}
@media (max-width:900px){
  .foot-top{gap:14px 22px}
  .foot-top dl{min-width:calc(50% - 22px);flex:0 0 auto}
  .foot-serv{margin-left:0;text-align:left;flex:1 0 100%;margin-top:6px}
  .foot-serv strong{font-size:21px}
}
@media (max-width:400px){
  .foot-top dl{min-width:calc(50% - 14px)}
  .foot-links{line-height:2.2}
  .foot-links i{margin:0 5px}
}