/* ============================================================
   阿楽食养 H5 · 设计 tokens
   移植自 docs/design-board.html C 方向（按需养）暖色系
   ============================================================ */
:root {
  /* 品牌色 */
  --pri: #D96F32;          /* 柿子橙：主行动色 */
  --pri-dark: #C05E24;
  --deep: #6E4527;         /* 焦糖棕：标题强调 */
  --txt: #3E2F22;          /* 正文 */
  --sub: #A08D77;          /* 次要文字 */
  --bg: #FBF4EA;           /* 奶油底 */
  --card: #FFFDF8;         /* 卡片底 */
  --line: #F0E2CF;         /* 描边 */
  --line-strong: #E3C8A6;
  --hl: #F5C99B;           /* 荧光笔 */

  /* 品类主题（品类笺底色） */
  --t-gaofang: linear-gradient(150deg, #F7E9D4, #EBD2AC);
  --t-wan: linear-gradient(150deg, #F2E6D8, #E2CDB4);
  --t-fen: linear-gradient(150deg, #F5EDDC, #EADFC4);
  --t-yujiao: linear-gradient(150deg, #F7E0D6, #EFCDBC);
  --t-yanwo: linear-gradient(150deg, #F8F0E2, #EEE0CB);
  --t-cha: linear-gradient(150deg, #EAEFDC, #D9E2C8);
  --t-paojiao: linear-gradient(150deg, #F3E3D5, #E6D2BE);
  --t-tie: linear-gradient(150deg, #F1E7DA, #E4D6C4);
  --t-qingduanshi: linear-gradient(150deg, #E6EFDE, #D5E3CB);
  --t-yinpin: linear-gradient(150deg, #F6E1D8, #EFD0C4);

  /* 字体 */
  --font-sans: 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', Arial, sans-serif;
  --font-serif: 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', 'STSong', serif;

  /* 字号 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13.5px;
  --fs-base: 14.5px;
  --fs-lg: 16.5px;
  --fs-xl: 19px;
  --fs-hero: 23px;

  /* 圆角 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 26px;

  /* 布局 */
  --page-max: 640px;       /* 移动优先，桌面居中限宽 */
  --pad: 18px;
}

/* ============================================================
   base / reset · 移动优先，桌面居中限宽 + 宽屏多列
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--txt);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 24px;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; }

.serif { font-family: var(--font-serif); }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

/* 站点头部 */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px var(--pad) 10px;
}
.site-head .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.site-head .brand b {
  font-family: var(--font-serif);
  font-size: 21px;
  letter-spacing: 2px;
  color: var(--deep);
}
.site-head .brand i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--sub);
}
.site-head nav { display: flex; gap: 6px; white-space: nowrap; }
.site-head nav a {
  font-size: 14px;
  color: var(--deep);
  padding: 8px 14px;
  border-radius: 999px;
  line-height: 1.2;
}
.site-head nav a.on {
  background: var(--pri);
  color: #FFF7EE;
}

/* 窄屏（≤560px）：藏英文字标、收紧导航，杜绝挤压变形 */
@media (max-width: 560px) {
  .site-head { padding: 13px 14px 9px; gap: 8px; }
  .site-head .brand b { font-size: 20px; letter-spacing: 1px; }
  .site-head .brand i { display: none; }
  .site-head nav { gap: 4px; }
  .site-head nav a { font-size: 13px; padding: 7px 11px; }
}

/* 区块标题 */
.sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 22px var(--pad) 12px;
}
.sec b {
  font-size: 15px;
  color: var(--txt);
}
.sec b::before { content: '✿ '; color: var(--pri); font-size: 12px; }
.sec i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--sub);
}

/* 声明脚注 */
.site-foot {
  margin-top: 20px;
  padding: 18px var(--pad) 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.site-foot .fd {
  font-size: var(--fs-xs);
  color: #B8A78E;
  letter-spacing: 1px;
}
.site-foot .fl {
  margin-top: 6px;
  font-size: 10px;
  color: #C9B79E;
}

/* ============================================================
   宽屏（桌面 / 平板）：内容列加宽，多列排布，图片不再撑满整屏
   ============================================================ */
@media (min-width: 700px) {
  :root { --page-max: 820px; }
  body { background: #ECEAE4; }
  .page { box-shadow: 0 0 40px rgba(110, 69, 39, .10); }
}

@media (min-width: 1080px) {
  :root { --page-max: 980px; }
}

/* ============================================================
   组件：需求宫格 / 品类 chips / 产品卡 / 组合包 / 结构化卡 /
        品类笺 / 咨询浮层 / 面包屑
   ============================================================ */

/* ---- 首页：提问式头部 ---- */
.hi { padding: 16px var(--pad) 4px; }
.hi i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--sub);
  letter-spacing: 1px;
}
.hi h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  color: var(--txt);
  margin-top: 6px;
  line-height: 1.45;
  font-weight: 700;
}
.hi h1 mark {
  background: linear-gradient(transparent 62%, var(--hl) 62%);
  color: inherit;
  padding: 0 2px;
}

/* ---- 需求宫格 ---- */
.need-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px var(--pad) 4px;
}
.ncard {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px 15px 13px;
  position: relative;
  transition: transform .15s ease;
}
.ncard:active { transform: scale(.97); }
.ncard .ne { font-size: 27px; }
.ncard b {
  display: block;
  font-size: 14.5px;
  margin-top: 8px;
  color: var(--txt);
}
.ncard i {
  font-style: normal;
  position: absolute;
  top: 13px;
  right: 14px;
  font-size: 10px;
  color: #C9B79E;
  background: var(--bg);
  border-radius: 999px;
  padding: 2.5px 8px;
}

/* ---- 品类 chips ---- */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 var(--pad) 6px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6.5px 13px;
  font-size: var(--fs-sm);
  color: var(--deep);
}

/* ---- 首页：掌柜本周搭配 ---- */
.combo-banner {
  margin: 10px var(--pad) 0;
  background: linear-gradient(120deg, #F7E3CB, #F2D5B4);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.combo-banner .ce { font-size: 36px; }
.combo-banner b {
  display: block;
  font-size: 14px;
  color: var(--deep);
}
.combo-banner i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: #9A7B5B;
  display: block;
  margin-top: 4px;
  line-height: 1.6;
}
.combo-banner em {
  font-style: normal;
  margin-left: auto;
  color: var(--pri);
  font-size: 18px;
}

/* ---- 产品卡（横向：左图右文，列表通用） ---- */
.pcard {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px 10px 10px;
}
.pcard .hmedia {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
}
.pcard .hmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pcard .hbody {
  flex: 1;
  min-width: 0;
  display: block;
}
.hrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.hrow h3 {
  font-size: 15px;
  font-family: var(--font-serif);
  color: var(--txt);
  font-weight: 700;
  min-width: 0;
}
.hrow h3 i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--sub);
  margin-left: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
}
.hrow .pp {
  color: var(--pri);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}
.hrow .pp i {
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  color: var(--sub);
  margin-left: 2px;
}
.ptag {
  font-size: 11.5px;
  color: var(--sub);
  margin-top: 6px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 产品列表（单列横向卡） */
.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 2px var(--pad) 10px;
}

/* ---- 需求页 ---- */
.nd-head {
  padding: 14px var(--pad) 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nd-head .back {
  font-size: 17px;
  color: var(--deep);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
}
.nd-head h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--txt);
  font-weight: 700;
}
.nd-sub {
  font-size: 11.5px;
  color: var(--sub);
  padding: 4px calc(var(--pad) + 2px) 6px;
  line-height: 1.7;
}

/* 主推大卡 */
.main-card {
  margin: 6px var(--pad);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.main-card .mimg {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
  position: relative;
}
.main-card .jian { aspect-ratio: 4 / 3; }
.main-card .jian .jglyph { font-size: 42px; }
.main-card .jian .jname { font-size: 21px; margin-top: 10px; }
.mpill {
  display: inline-block;
  background: var(--pri);
  color: #FFF7EE;
  font-size: 10px;
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 1px;
  margin-bottom: 9px;
}
.mbody { padding: 13px 16px 15px; }
.mrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mrow h2 {
  font-size: 16.5px;
  color: var(--txt);
  font-family: var(--font-serif);
  font-weight: 700;
}
.mrow h2 i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--sub);
  margin-left: 7px;
  font-family: var(--font-sans);
  font-weight: 400;
}
.mrow .mp {
  color: var(--pri);
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
}
.mbody p {
  font-size: 11.5px;
  color: var(--sub);
  margin-top: 7px;
  line-height: 1.75;
}

/* 搭配组合包 */
.pack {
  margin: 14px var(--pad) 0;
  background: var(--card);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 14px 15px;
}
.pack .pt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--deep);
}
.pack a.pt { text-decoration: none; }
.pack .pt span {
  background: var(--pri);
  color: #FFF7EE;
  font-size: 9.5px;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 400;
}
.pack .psub {
  font-style: normal;
  display: block;
  font-size: 10.5px;
  color: #9A7B5B;
  margin-top: 5px;
  line-height: 1.6;
}
.pack-items {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 11px;
}
.pi {
  flex: 1;
  background: var(--bg);
  border-radius: 14px;
  padding: 9px 4px;
  text-align: center;
}
.pi .pe { font-size: 20px; }
.pi b {
  display: block;
  font-size: 10px;
  color: var(--txt);
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 400;
}
.pi i {
  font-style: normal;
  font-size: 9px;
  color: var(--sub);
}
.plus {
  color: #D8B586;
  font-size: 14px;
  font-weight: 700;
  align-self: center;
}
.pack .preason {
  font-style: normal;
  display: block;
  font-size: 10.5px;
  color: var(--sub);
  margin-top: 10px;
  line-height: 1.7;
}
.pack .pprice {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--pri);
  font-weight: 700;
}
.pack .pprice i {
  font-style: normal;
  font-size: 9px;
  color: var(--sub);
  font-weight: 400;
  margin-left: 4px;
}

/* 其他适合品（行卡） */
.rows {
  margin: 14px var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rrow {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
}
.rrow .re { font-size: 22px; }
.rrow b {
  font-size: 13px;
  color: var(--txt);
  flex: 1;
  font-weight: 400;
  line-height: 1.5;
}
.rrow b i {
  font-style: normal;
  font-size: 10px;
  color: var(--sub);
  margin-left: 6px;
}
.rrow b small {
  display: block;
  font-size: 10.5px;
  color: var(--sub);
  margin-top: 2px;
  line-height: 1.5;
}
.rrow em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--pri);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 详情页 ---- */
.dhero {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.dbody {
  background: var(--bg);
  margin-top: -22px;
  border-radius: 28px 28px 0 0;
  padding: 18px var(--pad) 8px;
  position: relative;
}
.dbody h1 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--txt);
  font-weight: 700;
}
.dbody .dspec {
  font-size: var(--fs-xs);
  color: var(--sub);
  margin-top: 5px;
}
.dprice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.dprice b {
  color: var(--pri);
  font-size: 21px;
  font-weight: 800;
}
.dprice i {
  font-style: normal;
  font-size: 10px;
  color: var(--sub);
}
.dchips {
  display: flex;
  gap: 7px;
  margin: 13px 0 0;
  flex-wrap: wrap;
}
.dchips span {
  font-size: 10.5px;
  color: var(--deep);
  background: #F5E7D2;
  border-radius: 999px;
  padding: 4px 11px;
}
.qcard {
  margin-top: 15px;
  background: var(--card);
  border-left: 5px solid var(--pri);
  border-radius: 6px 16px 16px 6px;
  padding: 13px 15px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: #5E4936;
  line-height: 1.9;
}
.sections {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}
.scard {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 13px 15px;
}
.scard .st {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.scard p {
  font-size: var(--fs-md);
  color: #7A6A56;
  margin-top: 8px;
  line-height: 1.9;
}
.ing-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ing-list span {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--deep);
  font-size: var(--fs-sm);
  border-radius: 999px;
  padding: 3px 11px;
}

/* 详情页图集（头图之后的其余实拍）：两列方图网格，点击新开大图 */
.gallery {
  margin: 6px var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gallery a { display: block; }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ---- 品类笺（无图回退） ---- */
.jian {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
}
.jian::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(110, 69, 39, .28);
  border-radius: 4px;
  pointer-events: none;
}
.jian .jglyph { font-size: 52px; line-height: 1; }
.jian .jname {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--deep);
  margin-top: 14px;
  letter-spacing: 3px;
  line-height: 1.4;
}
.jian .jspec {
  font-size: 10.5px;
  color: #9A7B5B;
  margin-top: 8px;
  letter-spacing: 1px;
}
.jian .jbrand {
  position: absolute;
  bottom: 13px;
  right: 16px;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(110, 69, 39, .5);
  writing-mode: vertical-rl;
}
.jian .jcat {
  position: absolute;
  top: 13px;
  left: 16px;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(110, 69, 39, .55);
}
/* 行卡缩略笺：品类主题色 + 品类 emoji */
.rrow .jian-mini {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 44px;
}
/* 横向产品卡的无图占位（与实拍图同 92px 尺寸） */
.hjian {
  width: 92px;
  height: 92px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.hjian[data-cat="gaofang"] { background: var(--t-gaofang); }
.hjian[data-cat="wan"] { background: var(--t-wan); }
.hjian[data-cat="fen"] { background: var(--t-fen); }
.hjian[data-cat="yujiao-ejiao"] { background: var(--t-yujiao); }
.hjian[data-cat="yanwo"] { background: var(--t-yanwo); }
.hjian[data-cat="cha"] { background: var(--t-cha); }
.hjian[data-cat="paojiao"] { background: var(--t-paojiao); }
.hjian[data-cat="tie"] { background: var(--t-tie); }
.hjian[data-cat="qingduanshi"] { background: var(--t-qingduanshi); }
.hjian[data-cat="yinpin"] { background: var(--t-yinpin); }

/* 品类主题（data-cat → 背景渐变变量） */
.jian[data-cat="gaofang"] { background: var(--t-gaofang); }
.jian[data-cat="wan"] { background: var(--t-wan); }
.jian[data-cat="fen"] { background: var(--t-fen); }
.jian[data-cat="yujiao-ejiao"] { background: var(--t-yujiao); }
.jian[data-cat="yanwo"] { background: var(--t-yanwo); }
.jian[data-cat="cha"] { background: var(--t-cha); }
.jian[data-cat="paojiao"] { background: var(--t-paojiao); }
.jian[data-cat="tie"] { background: var(--t-tie); }
.jian[data-cat="qingduanshi"] { background: var(--t-qingduanshi); }
.jian[data-cat="yinpin"] { background: var(--t-yinpin); }
.jian-mini[data-cat="gaofang"] { background: var(--t-gaofang); }
.jian-mini[data-cat="wan"] { background: var(--t-wan); }
.jian-mini[data-cat="fen"] { background: var(--t-fen); }
.jian-mini[data-cat="yujiao-ejiao"] { background: var(--t-yujiao); }
.jian-mini[data-cat="yanwo"] { background: var(--t-yanwo); }
.jian-mini[data-cat="cha"] { background: var(--t-cha); }
.jian-mini[data-cat="paojiao"] { background: var(--t-paojiao); }
.jian-mini[data-cat="tie"] { background: var(--t-tie); }
.jian-mini[data-cat="qingduanshi"] { background: var(--t-qingduanshi); }
.jian-mini[data-cat="yinpin"] { background: var(--t-yinpin); }

/* ---- 咨询浮层（details 零 JS 实现） ---- */

/* 内嵌二维码卡（详情页底部 / 关于页） */
.qr-inline {
  margin: 16px var(--pad) 0;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.qr-inline img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 110px;
}
.qr-inline .qt {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--deep);
  font-weight: 700;
}
.qr-inline .qn {
  font-size: 11.5px;
  color: var(--sub);
  margin-top: 5px;
  line-height: 1.7;
}

/* ---- 品类页 ---- */
.cat-sec { margin: 20px var(--pad) 0; }
.cat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.cat-head .ce { font-size: 20px; }
.cat-head b { font-size: 15.5px; color: var(--txt); }
.cat-head i {
  font-style: normal;
  font-size: 11px;
  color: var(--sub);
  margin-left: auto;
}

/* ---- 关于页 ---- */
.about-hero {
  padding: 30px var(--pad) 10px;
  text-align: center;
}
.about-hero .ab-zh {
  font-family: var(--font-serif);
  font-size: 34px;
  letter-spacing: 6px;
  color: var(--deep);
  font-weight: 700;
}
.about-hero .ab-en {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--sub);
  margin-top: 8px;
}
.about-hero .ab-slogan {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--deep);
  background: #F5E7D2;
  border-radius: 999px;
  padding: 5px 16px;
}
.about-body {
  padding: 8px calc(var(--pad) + 4px);
  font-size: var(--fs-base);
  line-height: 2.1;
  color: #54432F;
}
.about-body p { margin: 10px 0; }
.about-body .asub {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--deep);
  margin: 20px 0 6px;
}
.about-body .asub::before { content: '✿ '; color: var(--pri); }

/* ---- 触控/字号加强：chips 与返回按钮 ---- */
.chip {
  flex: 0 0 auto;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  color: var(--deep);
}
.nd-head .back {
  width: 36px;
  height: 36px;
  font-size: 20px;
  color: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  flex: 0 0 36px;
}
.crumb a, .crumb i { font-size: 12px; }

/* ---- 详情页头图占位笺：与 dhero 同比例 ---- */
.jian.jian-hero {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

/* ============================================================
   宽屏响应式：多列网格，弱化单图占屏
   ============================================================ */
@media (min-width: 700px) {
  .need-grid { grid-template-columns: repeat(3, 1fr); }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .sections { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .dhero { aspect-ratio: 16 / 10; }
  .jian.jian-hero { aspect-ratio: 16 / 10; }
  .main-card .mimg { aspect-ratio: 16 / 9; }
  .main-card .jian { aspect-ratio: 16 / 9; }
  .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dbody { padding: 22px 26px 8px; }
  .hi, .nd-sub { padding-left: 26px; padding-right: 26px; }
  .sec { margin-left: 26px; margin-right: 26px; }
  .pgrid, .rows, .gallery { padding-left: 26px; padding-right: 26px; }
  .main-card, .pack, .qr-inline { margin-left: 26px; margin-right: 26px; }
}

@media (min-width: 1080px) {
  .need-grid { grid-template-columns: repeat(6, 1fr); }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 灯箱（:target 纯 CSS）：点小图弹出，点任意处关闭 ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(30, 22, 14, .93);
  cursor: zoom-out;
}
.lightbox:target { display: flex; }
.lightbox .lb-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px 16px 40px;
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
}
.lightbox .lb-hint {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 250, 240, .55);
  font-size: 12px;
  letter-spacing: 2px;
}

/* 组合页逐件介绍块 */
.pack-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--pri);
  font-weight: 700;
}
.combo-p { margin: 0 var(--pad) 16px; }
.combo-p .pcard { margin-bottom: 8px; }
.pb-info {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
}
.pb-info p {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #7A6A56;
  line-height: 1.8;
  margin: 3px 0;
}
.pb-info b {
  flex: 0 0 44px;
  color: var(--deep);
  font-weight: 700;
}
@media (min-width: 700px) {
  .combo-p { margin-left: 26px; margin-right: 26px; }
}

/* ============================================================
   页面专属：sitemap 类辅助、面包屑、打印等
   ============================================================ */

/* 面包屑 */
.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--pad) 0;
  font-size: 11px;
  color: var(--sub);
  flex-wrap: wrap;
}
.crumb a { color: var(--deep); }
.crumb i { font-style: normal; color: #D8C7AE; }

/* 主题色微调：微信内置浏览器暗色模式不适配，保持浅色锁定 */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* 打印：隐藏咨询浮层 */
@media print {
  .qr-dock { display: none; }
  body { padding-bottom: 0; }
}