/* ============================================================
 * app.css · 白事小助手 唯一样式表
 *
 * 基调：殡葬行业 —— 克制、肃穆、不花哨。
 *   主色走深灰 / 藏青，点缀色全站只有 1 个（暗金），其余全是灰阶。
 *   不用红：红色在本行业容易被读成「促销」或「警示」，与场景冲突。
 *
 * 项目铁律：每一个颜色、每一个字号旁边必须写清「为什么」。
 * 适配：移动端优先，1rem 随视口宽度线性变化（375px 设计稿 → 1rem = 16px）；
 *       桌面端通过 .app-shell 限宽居中，保证不散架。
 * ============================================================ */

/* ---------------- 变量 ---------------- */
:root {
  /* —— 颜色 —— */
  --c-primary:  #1e1e1e; /* 玄色/墨色 · 导航栏底与结构强调（中国风庄重；替代原藏青） */
  --c-primary-d:#141414; /* 主色按下态 */
  --c-ink:      #333333; /* 正文 · 深灰（原近黑，降一档更柔，不刺眼） */
  --c-title:    #1a1a1a; /* 标题 · 玄色（新增，专供标题，比正文更重） */
  --c-ink-2:    #888888; /* 辅助文字 · 中灰 */
  --c-ink-3:    #aaaaaa; /* 三级文字 · 浅灰 */
  --c-bg:       #faf9f6; /* 页面底 · 素白/月白（非纯白，暖白有温度） */
  --c-surface:  #ffffff; /* 卡片底 · 白（允许，仅页面底禁用纯白） */
  --c-line:     #e8e8e8; /* 分隔线 · 浅灰 */
  --c-accent:   #8b7355; /* 暗金/古铜 · 价格/小计/主按钮/必须徽标（规范值，替代原 #8a6f47） */
  --c-accent-d: #735d42; /* 暗金按下态 */
  --c-accent-bg:#f3ece2; /* 暗金浅底 · 徽标托底 */
  --c-dai:      #4a6670; /* 黛青 · 「多数家庭选用」标签/强调（新增，备用） */
  --c-dai-d:    #3c555e; /* 黛青按下态 */
  --c-mask:     rgba(20,24,28,.45); /* 遮罩（不变） */
  --c-disabled: #d8d8d8; /* 灰板块 */
  --c-desk:     #ece9e3; /* 桌面外框 · 暖灰（原冷灰，调到暖） */

  /* —— 字号：以 375px 设计稿为基准 —— */
  --fs-xs:  .75rem;    /* 12px · 徽标/角标，移动端最小可读字号，再小不适老 */
  --fs-sm:  .8125rem;  /* 13px · 三级信息（分类、归属流程） */
  --fs-base:.875rem;   /* 14px · 正文主体，中文移动端阅读最舒适 */
  --fs-md:  1rem;      /* 16px · 卡片标题 / 导航标题 */
  --fs-lg:  1.125rem;  /* 18px · 区块标题 */
  --fs-xl:  1.375rem;  /* 22px · 寄语主句 / 总价，一屏只允许出现一两处 */

  /* —— 间距：4px 栅格 —— */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;

  --radius: 8px;   /* 圆角 · 中性偏方正。大圆角会带来「消费感」，与本行业冲突 */
  --nav-h: 44px;   /* 导航栏高 · 移动端标准可点高度 */
  --tab-h: 54px;   /* 底部主菜单(tab 栏)高 · 5 入口，移动端标准可点高度 */
  --safe-b: env(safe-area-inset-bottom, 0px); /* iPhone 底部安全区 */
}

/* ---------------- 基础 ---------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  font-size: 16px; /* 桌面/兜底基准 */
  -webkit-text-size-adjust: 100%;
}

/* 移动端：1rem 随视口线性缩放（375px → 16px，414px → 17.7px）。
   为什么用 vw 而不是 JS 算：JS 算要在 DOMContentLoaded 后执行，会闪一下；
   vw 是纯 CSS，首帧就正确，且零脚本依赖。 */
@media screen and (max-width: 640px) {
  html { font-size: 4.2667vw; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 系统字体栈：零下载、零 FOUT、各平台都是本地最优中文字体（docs/01 决策八） */
  font-size: var(--fs-base);
  line-height: 1.6;      /* 1.6 · 中文行高下限，低于 1.5 长段落会糊成一片 */
  color: var(--c-ink);
  background: var(--c-desk);
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }

/* 手机壳：限宽居中，桌面打开不散架；移动端占满 */
.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c-bg);
  position: relative;
  overflow-x: hidden;
}

/* ---------------- 页面容器 ---------------- */
/* 所有页统一给底部 tab 栏让位（tab-h + 安全区 + 内容间距） */
.page { padding-bottom: calc(var(--tab-h) + var(--sp-6) + var(--safe-b)); }
/* .page--with-float 已于 2026-09-16 随「返回我的清单」悬浮条一并移除 */
.page--with-fixed { padding-bottom: calc(var(--tab-h) + 84px + var(--safe-b)); } /* tab 栏 + 固定栏 */

/* ---------------- 底部常驻主菜单（tab 栏）· 2026-09-15 ---------------- */
.tabbar {
  position: fixed; z-index: 45;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%; max-width: 480px;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.tabbar__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
  -webkit-tap-highlight-color: transparent;
}
.tabbar__item .icon { width: 22px; height: 22px; }
.tabbar__item.is-active { color: var(--c-primary); }
.tabbar__item.is-active .icon { stroke-width: 2; }

.block { margin: var(--sp-3) var(--sp-4); }
.block__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
}

/* 卡片：白底 + 圆角 + 极浅描边。描边而不是阴影 —— 阴影在廉价安卓机上渲染慢 */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

/* 结构性占位符【…】：一眼看出是待替换数据，且不伪装成真实内容 */
.ph { color: var(--c-ink-3); font-style: normal; }

/* ---------------- §0.1 顶部导航栏 ---------------- */
.navbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--sp-2);
  background: var(--c-primary);
  color: #fff;                       /* 白字配藏青：对比度 8.9:1，正午户外也看得清 */
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-side { flex: 0 0 auto; min-width: 72px; display: flex; }
.nav-side--right { justify-content: flex-end; gap: var(--sp-1); }
.nav-title {
  flex: 1 1 auto;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  /* 标题可能长（如「XXX · 流程详情」），超长省略而不是撑破导航栏 */
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.nav-btn {
  display: inline-flex; align-items: center; gap: 2px;
  min-width: 34px; height: 34px;
  padding: 0 var(--sp-1);
  color: #fff; font-size: var(--fs-sm);
}
.nav-btn i { font-style: normal; }
.nav-btn.is-faved { color: var(--c-accent); } /* 已收藏：用唯一点缀色，实心由下方 fill 控制 */
.nav-btn.is-faved .icon { fill: currentColor; }
.icon { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; }

/* §0.2 底部悬浮条「返回我的清单」(.float-bar*) 已于 2026-09-16 整体移除（用户：与底部 tab 栏重复、遮挡内容） */

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
}
.btn i { font-style: normal; }
.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--primary:active { background: var(--c-primary-d); }
.btn--ghost { background: var(--c-surface); color: var(--c-ink-2); }
.btn--text { border: 0; background: none; color: var(--c-ink-2); min-height: 30px; padding: 0 var(--sp-2); }
.btn--block { display: flex; width: 100%; }

/* ---------------- 徽标 ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px var(--sp-2);
  font-size: var(--fs-xs);
  border-radius: 3px;                /* 小圆角：徽标面积小，圆角大了显圆润轻佻 */
}
.badge--must { background: var(--c-accent-bg); color: var(--c-accent); } /* 必须/常规必备：唯一点缀色的唯一用武之地 */
.badge--inlist { background: var(--c-bg); color: var(--c-ink-2); }
.badge--inlist .icon { width: 1em; height: 1em; }

/* ---------------- §0.7 价格 ---------------- */
.price { font-size: var(--fs-md); font-weight: 600; }
.price--num  { color: var(--c-accent); } /* 有价：暗金，重要但不刺激 */
.price--note { color: var(--c-ink-2); font-weight: 400; font-size: var(--fs-base); } /* 面议/按标准：弱化，它不是数字 */

/* ---------------- 折叠区块 ---------------- */
.collapse { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.collapse + .collapse { margin-top: var(--sp-2); }
.collapse__head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); font-weight: 600; text-align: left;
}
.collapse__title { flex: 1 1 auto; }
.collapse__count { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-3); }
.collapse__arrow { flex: 0 0 auto; color: var(--c-ink-3); transition: transform .22s ease; }
.collapse.is-open .collapse__arrow { transform: rotate(180deg); }
.collapse__body { display: none; padding: 0 var(--sp-4) var(--sp-4); }
.collapse.is-open .collapse__body { display: block; }
.collapse-group { margin: 0; }

/* 办事流程页 · 吸顶七阶段锚点索引（B 优化·2026-09-15）：点击平滑展开并跳到对应阶段，
   解决「49 项长列表」问题 1。吸顶于导航栏之下（top: --nav-h，z-index 低于 navbar 的 30）。 */
.stage-anchor {
  position: sticky; top: var(--nav-h); z-index: 29;
  display: flex; gap: var(--sp-1);
  margin: var(--sp-3) calc(var(--sp-4) * -1) var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.stage-anchor__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px var(--sp-2); border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-2); white-space: nowrap; line-height: 1.1;
}
.stage-anchor__chip:active,
.stage-anchor__chip.is-active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.stage-anchor__no { font-weight: 700; }
.stage-anchor__count { color: var(--c-ink-3); font-size: var(--fs-xs); }
.stage-anchor__chip.is-active .stage-anchor__count,
.stage-anchor__chip:active .stage-anchor__count { color: rgba(255,255,255,.82); }
/* 跳转目标留出「导航栏 + 吸顶锚点」高度，避免被遮挡（scrollIntoView block:start 用） */
.collapse[data-stage-group] { scroll-margin-top: calc(var(--nav-h) + 56px); }

/* 清单四板块的「灰」：可见但不可用（docs/03 页面五铁律：灰 ≠ 隐藏） */
.board.is-grey .collapse__head { color: var(--c-disabled); }
.board.is-grey .collapse__arrow { color: var(--c-disabled); }

/* ---------------- 寄语区 ---------------- */
.greeting { text-align: center; padding: var(--sp-5) var(--sp-4) var(--sp-2); }
.greeting__main { font-size: var(--fs-xl); font-weight: 600; color: var(--c-ink); }
.greeting__sub  { font-size: var(--fs-base); color: var(--c-ink-2); margin-top: var(--sp-1); }
.greeting__note { font-size: var(--fs-sm);  color: var(--c-ink-3); margin-top: var(--sp-2); }
.main-cta { margin-top: var(--sp-2); }

/* ---------------- 流程项（页一） ---------------- */
.proc { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.proc:first-child { border-top: 0; }
.proc__head { display: flex; gap: var(--sp-1); font-size: var(--fs-md); font-weight: 600; }
.proc__no { color: var(--c-ink-3); font-weight: 400; }
.proc__meta { margin-top: var(--sp-1); font-size: var(--fs-base); }
.proc__meta dt, .kv dt { float: left; width: 3.2em; color: var(--c-ink-3); font-size: var(--fs-sm); }
.proc__meta dd, .kv dd { margin-left: 3.2em; color: var(--c-ink); }
.proc__tags { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.proc__supplies, .proc__custom { font-size: var(--fs-sm); color: var(--c-ink-2); }
.proc__custom { margin-top: var(--sp-1); }
.proc__ops { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* ---------------- 键值表 / 分步 ---------------- */
.kv-list { font-size: var(--fs-base); }
.kv + .kv { margin-top: var(--sp-2); }
.kv::after { content: ''; display: block; clear: both; } /* 清浮动：dt 左浮动，避免塌陷 */
.steps { font-size: var(--fs-base); }
.steps li { padding: var(--sp-1) 0; }
.steps--flow li { color: var(--c-ink-3); }
.steps--flow li.is-current { color: var(--c-ink); font-weight: 600; }
.plain-list { font-size: var(--fs-base); }
.plain-list li { padding: var(--sp-1) 0; }

/* 需要物品 · 标签（圆角矩形、一行三、自动换行、浅色、点击跳 /category）
   浅色不抢眼：白底 + 次级文字 + 浅边框；按下态才显主色描边。 */
.supply-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-1); }
.supply-tag {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s;
}
.supply-tag:active { border-color: var(--c-primary); color: var(--c-ink); }
.text { font-size: var(--fs-base); color: var(--c-ink-2); }
/* 一句话（notes）：温和的引导短文，浅色不抢眼 */
.detail-note { font-size: var(--fs-base); color: var(--c-ink-2); line-height: 1.7; margin: 0; }
/* 需要物品区块底部的「去用品页找」按钮 */
.supply-go { margin-top: var(--sp-3); }
/* 需要物品：标题与「去用品页找」按钮同行（左标题、右按钮），标签在下方（2026-09-16） */
.block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.block__head .block__title { margin-bottom: 0; }
.block__head .supply-go { margin-top: 0; flex: 0 0 auto; width: auto; padding: 0 var(--sp-3); }

/* ---------------- 场景锚点（页三） ---------------- */
.anchors { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.anchor {
  flex: 0 0 auto; padding: 0 var(--sp-4); height: 32px;
  border-radius: 16px;                 /* 胶囊形：锚点是「筛选/定位」类控件，圆一点更像可点 */
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-ink-2); font-size: var(--fs-sm);
}
.group__head { font-size: var(--fs-md); font-weight: 600; margin: var(--sp-2) 0 var(--sp-2); color: var(--c-ink); }
.card-list > li + li { margin-top: var(--sp-2); }

/* 商品卡（页三） */
.pcard { position: relative; }
.pcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pcard__name { font-size: var(--fs-md); font-weight: 600; }
.pcard__meta, .pcard__desc { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: var(--sp-1); }
.pcard__tags { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.pcard__belong { font-size: var(--fs-sm); color: var(--c-ink-3); }
.pcard__more { margin-top: var(--sp-2); text-align: right; font-size: var(--fs-sm); color: var(--c-primary); }

/* 具象化 · 商品卡缩略图（A 类纯代码，零依赖：有图显、无图占位，守 §0.4）
   卡片改 flex：缩略图在左、内容在右；内容 min-width:0 允许长名称换行不撑破。 */
.pcard__body { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pcard__thumb { flex: 0 0 auto; width: 76px; height: 76px; border-radius: calc(var(--radius) - 2px); overflow: hidden; background: var(--c-bg); display: flex; align-items: center; justify-content: center; }
.pcard__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__thumb--ph { color: var(--c-ink-3); }
.pcard__thumb--ph .icon { width: 30px; height: 30px; }
.pcard__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pcard__more { margin-top: auto; padding-top: var(--sp-2); }
.badge--inlist { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* 服务卡（页三 区块 4） */
.scard { position: relative; }  /* 给「已在清单」徽标定位锚（与 pcard 同款） */
.scard__name { font-size: var(--fs-md); font-weight: 600; }
.scard__price { margin-top: var(--sp-1); }
.scard__hint { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.foot-tip { text-align: center; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------------- 轮播图（页四） ---------------- */
.gallery { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--c-bg); overflow: hidden; }
@supports not (aspect-ratio: 1 / 1) {
  .gallery { height: 0; padding-bottom: 100%; } /* 老浏览器兜底：padding 撑出 1:1 */
}
.gallery__track { display: flex; height: 100%; }
.gallery__slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.gallery__slide--ph { color: var(--c-disabled); }   /* 无图占位：99 件无图必须兜底，绝不白块 */
.gallery__slide--ph .icon { width: 48px; height: 48px; }
/* 有图但 404（缺资产）：占位藏在 img 后，onerror 移除 img 即露出，与无图分支一致 */
.gallery__ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-disabled);
}
.gallery__ph .icon { width: 48px; height: 48px; }
.gallery__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s; } /* 单图满铺 1:1，不留白边；加载完淡入，覆盖占位 */
.gallery__slide.is-loaded .gallery__img { opacity: 1; }
/* 加载中：居中 spinner 占位（指令 11）；骨架感但非白块 */
.gallery__spin {
  position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
  margin: -14px 0 0 -14px; border: 3px solid var(--c-line, #e6e8ea);
  border-top-color: var(--c-primary); border-radius: 50%;
  animation: gallery-spin .8s linear infinite; z-index: 1;
}
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery__slide.is-loaded .gallery__spin { display: none; }
/* 缺图（指令 13）：error → is-error 隐藏 spinner，img 经 onerror 移除后占位「暂无图片」露出 */
.gallery__slide.is-error .gallery__spin { display: none; }
.gallery__ph-tip { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-disabled); }
.gallery__dots { position: absolute; bottom: var(--sp-3); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.gallery__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.25); }
.gallery__dot.is-active { background: #fff; }
.gallery__back {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  width: 34px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,24,28,.42); color: #fff;   /* 半透冷底：图上任何颜色都可能被压住，用中性半透明最稳 */
}
.title-zone__name { font-size: var(--fs-lg); font-weight: 600; }
.title-zone__price { margin-top: var(--sp-1); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.title-zone__price-alt { font-size: var(--fs-sm); color: var(--c-ink-3); }
.title-zone__meta { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.title-zone__tags { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.title-zone__belong { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 数量步进（页四 唯一允许加减的地方） */
.qty-row { display: flex; align-items: center; justify-content: space-between; }
.qty-row__label { font-size: var(--fs-base); }
.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper__btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-line); border-radius: 4px; color: var(--c-ink-2); }
.stepper__val { min-width: 2em; text-align: center; font-size: var(--fs-md); }

/* ---------------- 页四 用品详情：价格+数量+小计 / 说明区 / 底部固定条 ---------------- */
/* 价格｜数量 同行（指令 2） */
.priced-qty { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.priced-qty__price { font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); }
.priced-qty__sep { color: var(--c-ink-3); }
.priced-qty__label { font-size: var(--fs-base); color: var(--c-ink-2); }
.stepper--inline { display: inline-flex; gap: var(--sp-2); }
/* 小计（指令 3）：数量变 → 小计变 */
.priced-subtotal { margin-top: var(--sp-2); font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
/* 说明区四段（指令 5）：平铺默认展开 */
.info-block__body { font-size: var(--fs-base); color: var(--c-ink-2); line-height: 1.6; }
/* 页四 标题区重构（2026-09-16）：名称｜二级｜一级 合成一行；
   价格左、数量钮右；小计左、加购钮右；数量钮与加购钮同宽且右边缘对齐。 */
.title-zone__line { font-size: var(--fs-base); color: var(--c-ink); line-height: 1.5; margin-bottom: var(--sp-2); }
.title-zone__line .badge--must { margin-left: 6px; vertical-align: middle; }
.tz-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.tz-price { font-size: var(--fs-lg); font-weight: 700; color: var(--c-accent); }
.tz-sub { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.tz-right { flex: 0 0 8.5rem; }                 /* 数量钮与加购钮同宽 */
.tz-row .stepper--inline.tz-right { width: 100%; justify-content: space-between; }
.tz-add.tz-right { width: 100%; }
/* 底部固定条：电话 / 微信（指令 7；去掉返回/收藏/分享，指令 8/9） */
.page--product { padding-bottom: calc(var(--tab-h) + 76px + var(--safe-b)); }
.product-foot {
  position: fixed; left: 0; right: 0; z-index: 40;
  bottom: calc(var(--tab-h) + var(--safe-b));
  display: flex; gap: 0;
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-b));
  background: var(--c-surface);
  border-top: 1px solid var(--c-line, #e6e8ea);
}
.product-foot .btn { flex: 1 1 0; }
.product-foot .btn + .btn { margin-left: var(--sp-2); }

/* ---------------- 底部操作组 ---------------- */
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.actions .btn { flex: 1 1 auto; }

/* ---------------- §0.3 门店轻量条 ---------------- */
.shop-strip__line { display: flex; align-items: baseline; gap: var(--sp-2); }
.shop-strip__label { font-size: var(--fs-sm); color: var(--c-ink-3); }
.shop-strip__name { font-size: var(--fs-md); font-weight: 600; }
.shop-strip__dist { font-size: var(--fs-sm); color: var(--c-ink-2); }
.shop-strip__addr { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.shop-strip__ops { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); }
.shop-strip__ops .btn { flex: 1 1 0; }
.shop-strip__more { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-primary); }

/* ---------------- 清单页 ---------------- */
.wl-overview__total { font-size: var(--fs-xl); font-weight: 600; color: var(--c-accent); }
.wl-overview__status { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.boards { margin: 0 var(--sp-4); }
/* 我的清单 · 底部固定容器：分享/提交栏在上、联系栏在下（用户 2026-09-15 交换顺序） */
.wl-bottom {
  position: fixed; z-index: 40;
  bottom: calc(var(--tab-h) + var(--safe-b)); left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--safe-b));
}
.wl-sharebar { display: flex; gap: var(--sp-2); align-items: center; }
.wl-sharebar--two .btn--ghost { flex: 0 0 auto; min-width: 40%; }
.wl-sharebar--two .btn--primary { flex: 1 1 auto; }
.wl-contactbar { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.wl-contactbar .wl-bottom__btn {
  flex: 1 1 0; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--c-surface); color: var(--c-ink-2);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  font-size: var(--fs-base); -webkit-tap-highlight-color: transparent;
}
.wl-contactbar .wl-bottom__btn .icon { width: 1.1em; height: 1.1em; }
.wl-contactbar .wl-bottom__btn:active { background: var(--c-bg); }
.wl-clearbar { display: flex; justify-content: center; margin-bottom: var(--sp-1); }
.wl-clearbtn {
  border: 0; background: none; cursor: pointer;
  color: #b04a45; opacity: .82;
  font-size: var(--fs-sm); padding: 6px 10px; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.wl-clearbtn:active { opacity: 1; }
/* 内容避让：清除+分享+联系三行固定，预留更多底部空间 */
.page--wishlist.page--with-fixed { padding-bottom: calc(var(--tab-h) + 150px + var(--safe-b)); }

/* 我的清单 · 顶部总览行：总价 ｜ 未提交 ｜ 全选（同行，第 2 条） */
.wl-overview { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.wl-overview__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.wl-overview__row .wl-overview__total { color: var(--c-accent); }
.wl-overview__row .wl-overview__status { margin-top: 0; }
.wl-allcheck {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); color: var(--c-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wl-allcheck.is-on { color: var(--c-primary); }
.wl-allcheck .wl-check__box { font-style: normal; }

/* 我的清单 · 四板块手风琴（纯 CSS radio，默认全折叠，同时只开一块，标题带数量） */
.wl-radio { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.wl-board-wrap { margin-top: var(--sp-3); }
.wl-board {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); cursor: pointer;
}
.wl-board__no {
  flex: 0 0 auto; width: 1.6em; height: 1.6em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink-3); color: #fff; font-size: var(--fs-sm);
}
/* 指令 13：有数据块亮（金标）、没数据块灰（弱化） */
.wl-board.is-filled .wl-board__no { background: var(--c-primary); color: #fff; }
.wl-board.is-empty { opacity: .55; }
.wl-board.is-empty .wl-board__title { color: var(--c-ink-2); }
.wl-board.is-empty .wl-board__count { color: var(--c-ink-3); }
.wl-board__empty { font-size: var(--fs-sm); color: var(--c-ink-3); padding: var(--sp-2) 0; }
/* 空清单引导态：无方案时居中卡片 + 明确 CTA，引导先生成方案 */
.wl-empty { text-align: center; padding: calc(var(--sp-4) * 1.4) var(--sp-3); margin-top: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.wl-empty__icon { font-size: 44px; line-height: 1; color: var(--c-ink-3); margin-bottom: var(--sp-2); }
.wl-empty__title { font-size: var(--fs-lg); color: var(--c-ink); margin: 0 0 var(--sp-1); font-weight: 700; }
.wl-empty__desc { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; margin: 0 auto var(--sp-3); max-width: 22em; }
.wl-empty .btn--block { max-width: 18em; margin: 0 auto; }
.wl-empty--shared { padding: var(--sp-3); }
.wl-empty--shared .wl-empty__desc { margin-bottom: 0; }
.wl-board__title { flex: 1 1 auto; text-align: left; min-width: 0; }
.wl-board__count { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-3); }
.wl-board__arrow { flex: 0 0 auto; color: var(--c-ink-3); transition: transform .22s ease; }
.wl-board__panel { display: none; margin-top: var(--sp-2); }
.wl-radio:checked ~ .wl-board__panel { display: block; }
.wl-radio:checked ~ .wl-board .wl-board__arrow { transform: rotate(180deg); }

/* 我的清单 · 勾选框（☑/☐ 纯文本图标，.is-on 高亮；只读态 is-ro 不可点） */
.wl-check { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wl-check__box { font-style: normal; color: var(--c-ink-3); font-size: var(--fs-md); line-height: 1; }
.wl-check.is-on .wl-check__box { color: var(--c-primary); }
.wl-check.is-ro { cursor: default; }

/* 我的清单 · 用品卡（flex 行布局：左 缩略图(高度随卡片·正方·三侧留白)；右 三行=名称 · 单价/勾选 · 数量/小计。
 * 2026-09-16 定稿：卡片 padding 8px、thumb↔信息体间距 15px、信息体行距 10px、勾选框热区 36×36 且顶部对齐（不垂直居中）、
 * 缩略图高度随卡片拉伸(aspect-ratio:1)、图片上/左/下留白 8px、右侧贴边；字号/色值/§0.7 隐藏逻辑不变） */
.wl-grid { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.wl-gcard { display: flex; align-items: flex-start; gap: 15px; padding: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.wl-gcard__thumb { position: relative; flex: 0 0 auto; align-self: stretch; aspect-ratio: 1 / 1; border-radius: calc(var(--radius) - 2px); overflow: hidden; background: var(--c-bg); display: flex; align-items: center; justify-content: center; padding: 8px 0 8px 8px; cursor: pointer; }
.wl-gcard__thumb .wl-gcard__img { position: absolute; inset: 8px 0 8px 8px; width: auto; height: auto; object-fit: cover; display: block; }
.wl-gcard__thumb .wl-gcard__ph { position: relative; z-index: 0; color: var(--c-ink-3); font-size: 28px; line-height: 1; }
.wl-gcard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.wl-gcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wl-gcard__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--c-ink); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.7em; }
.wl-gcard__badge { flex: 0 0 auto; }
.wl-gcard__price { font-size: var(--fs-sm); color: var(--c-accent); font-weight: 700; line-height: 1.2; }
.wl-gcard__price .price--num { font-size: var(--fs-sm); font-weight: 700; }  /* 单价与其它文字同号，不放大 */
.wl-gcard__check { flex: 0 0 auto; align-self: flex-start; }  /* 顶部对齐：勾选框不跟价格文字垂直居中，单独上移定位 */
.wl-gcard__check .wl-check { min-width: 36px; min-height: 36px; justify-content: center; }  /* 点按热区 36×36（原 30，更易点） */
.wl-gcard__check .wl-check__box { font-size: 24px; line-height: 1; }  /* 勾选符号同步放大 */
.wl-gcard__sub { font-size: var(--fs-sm); color: var(--c-ink-2); text-align: right; }
.wl-gcard__sub .price--num { color: var(--c-ink); font-weight: 600; }
.wl-gcard .stepper { flex: 0 0 auto; }  /* 数量加减器落在第3行左侧（缩卡片作用域，不影响 /product 页） */
.wl-gcard .stepper__btn { width: 30px; height: 30px; border: none; border-radius: 0; background: transparent; color: var(--c-ink); }  /* 去框，仅留 +/− 符号，省空间、与无框勾选框协调 */

/* 我的清单 · 增值分类头（7 类 + 套餐，每组数量，第 10 条） */
.vas-cat {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
}
.vas-cat__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.vas-cat__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.vas-cat__level { font-size: var(--fs-xs); color: var(--c-ink-3); }
.vas-cat__count { margin-left: auto; font-size: var(--fs-sm); color: var(--c-ink-3); }
.vas-pkg-item .vas-item__note { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 我的清单 · 底部双按钮（[分享给家人][提交清单]）已并入 .wl-sharebar--two（见上方 .wl-bottom 块） */

/* ---------------- 通用补充（M2 新增类） ---------------- */
.text--sub { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: var(--sp-1); }
.btn--sm { min-height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: 4px; }
.btn--danger { color: var(--c-ink-2); }
.btn--danger .icon { width: 1.1em; height: 1.1em; }
.btn.is-disabled, .is-disabled { opacity: .45; pointer-events: none; }

/* 问卷页 */
.survey-intro { text-align: center; padding: var(--sp-2) var(--sp-4) var(--sp-1); }
.survey-form { padding: 0 var(--sp-4) var(--sp-6); }
.qblock {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.qblock__q { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-2); padding: 0; }
.qblock__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.opt {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius);
  font-size: var(--fs-base); color: var(--c-ink); cursor: pointer;
}
.opt input[type="radio"] { accent-color: var(--c-primary); width: 18px; height: 18px; flex: 0 0 auto; }
.opt__txt { line-height: 1.3; }
/* 选中态：用 :has 兜底（不支持的浏览器退化为原生 radio 可见） */
.opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-accent-bg); }

/* 清单页 · 单项 */
.wl-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }
.wl-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-line);
}
.wl-item:first-child { border-top: 0; }
.wl-item__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wl-item__name { font-size: var(--fs-base); color: var(--c-ink); }
.wl-item__ops { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.wl-overview__basis { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.wl-undo { margin-top: var(--sp-1); padding: 0; }
.wl-guidance { background: var(--c-accent-bg); }
.wl-guidance .block__title { color: var(--c-accent); }

/* 清单页 · 增值服务（VAS） */
.vas-wrap { padding: var(--sp-2) 0; }
.vas-cat + .vas-cat { margin-top: var(--sp-3); }
.vas-cat__name { font-size: var(--fs-sm); color: var(--c-ink-3); margin-bottom: var(--sp-1); }
.vas-list { list-style: none; margin: 0; padding: 0; }
.vas-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-top: 1px solid var(--c-line);
}
.vas-item:first-child { border-top: 0; }
.vas-item__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vas-item__name { font-size: var(--fs-base); color: var(--c-ink); }
.vas-item__desc { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.vas-item.is-in .vas-item__name { color: var(--c-ink-2); }
.vas-item__static { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 增值套餐（P1–P4）：置顶，独立卡片块 */
.vas-pkgs { display: flex; flex-direction: column; gap: var(--sp-3); }
.vas-pkg { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3); background: var(--c-surface); }
.vas-pkg.is-in { border-color: var(--c-primary); }
.vas-pkg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.vas-pkg__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.vas-pkg__static { font-size: var(--fs-sm); color: var(--c-ink-3); }
.vas-pkg__fit, .vas-pkg__solve { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: var(--sp-1); }
.vas-pkg__items { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: var(--sp-2); line-height: 1.5; }
.vas-pkg__price { font-size: var(--fs-sm); color: var(--c-accent); margin-top: var(--sp-2); }
.vas-pkg__price::before { content: '参考价：'; color: var(--c-ink-3); }

/* 单品单选提示（套餐下方） */
.vas-single-label { font-size: var(--fs-sm); color: var(--c-ink-3); margin: var(--sp-3) 0 var(--sp-1); }

/* 主题套餐（H1–H3）：纯展示 */
.vas-themes { margin-top: var(--sp-3); }
.vas-theme { border: 1px dashed var(--c-line); border-radius: var(--radius); padding: var(--sp-3); margin-top: var(--sp-2); }
.vas-theme__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.vas-theme__list { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
.vas-theme__list li { font-size: var(--fs-sm); color: var(--c-ink-2); padding: 2px 0; }
.vas-theme__list li::before { content: '· '; color: var(--c-ink-3); }

/* 发给家人看（区块 6） */
.wl-share .text { font-size: var(--fs-sm); color: var(--c-ink-2); margin: var(--sp-2) 0 var(--sp-3); }
.ro-banner {
  background: var(--c-primary); color: #fff; text-align: center;
  font-size: var(--fs-sm); padding: var(--sp-2); position: sticky; top: var(--nav-h); z-index: 29;
}
.page--readonly .collapse__body { /* 只读下折叠默认展开更易读 */ }

/* 办事流程页 · 流程描述（M2 新增，旧 css 无此级） */
.proc__desc { margin-top: var(--sp-1); font-size: var(--fs-base); color: var(--c-ink-2); line-height: 1.5; }

/* 知识层专属流程（base=false）：可见但弱化，表达「属于白事知识、不自动进方案」。
   与 .board.is-grey 同色系（--c-disabled / --c-ink-3），保证全站弱化语言一致 */
.proc--knowledge { opacity: .86; }
.proc--knowledge .proc__name { color: var(--c-ink-2); }
.proc--knowledge .proc__desc,
.proc--knowledge .proc__supplies { color: var(--c-ink-3); }
.proc__tag {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  margin-left: var(--sp-2); padding: 0 var(--sp-1);
  font-size: var(--fs-xs); font-weight: 400; line-height: 1.5;
  color: var(--c-ink-3);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 3px;            /* 小圆角：角标面积小，圆角大显轻佻 */
}

/* ---------------- 服务管家页 ---------------- */
.video { width: 100%; display: block; background: #000; border-radius: var(--radius); }
.promise {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent-bg); color: var(--c-accent);
  border-radius: var(--radius); font-size: var(--fs-base); text-align: center;
}
.pic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.pic-grid__item { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); }
.pic-grid__item--ph { display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 放大看（docs/00:386）：服务/案例图片可点开放大 */
.pic-grid__item { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,24,28,.92);
}
.lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.pic-grid__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 营销图满铺，不留白边 */
.store-card__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-title); flex: 1 1 auto; min-width: 0; }  /* 店名 · 玄色 */
.store-card__addr { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-2); }  /* 地址 · 深灰 */
.store-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }  /* 店名与[导航]同行 */
.store-card__row .btn { flex: 0 0 auto; }  /* 导航按钮只取内容宽度，不拉伸 */

/* ---------------- toast / 弹框 ---------------- */
.layer-toast {
  position: fixed; z-index: 90; left: 50%; top: 42%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  max-width: 80vw; padding: var(--sp-3) var(--sp-5);
  background: var(--c-mask); color: #fff;
  font-size: var(--fs-base); line-height: 1.5;
  border-radius: var(--radius); text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease;
}
.toast.is-show { opacity: 1; transform: translateY(0); }

.layer-modal { position: fixed; inset: 0; z-index: 100; }
.layer-modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: var(--c-mask); opacity: 0; transition: opacity .2s ease; }
.layer-modal.is-show .modal-mask { opacity: 1; }
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
  width: calc(100% - 64px); max-width: 340px;
  background: var(--c-surface); border-radius: 12px; overflow: hidden;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.layer-modal.is-show .modal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal__body { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-base); text-align: center; }
.modal__ops { display: flex; border-top: 1px solid var(--c-line); }
.modal__ops .btn { flex: 1 1 0; border: 0; border-radius: 0; min-height: 44px; }
.modal__ops .btn + .btn { border-left: 1px solid var(--c-line); }

/* 加购提示（指令 8）：原句 + [去清单] 按钮 */
.toast--action { display: flex; align-items: center; gap: var(--sp-4); max-width: 86vw; padding: var(--sp-3) var(--sp-4); text-align: left; }
.toast--action .toast__msg { white-space: nowrap; }
.toast__go { flex: 0 0 auto; margin-left: auto; padding: 6px 14px; background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius); font-size: var(--fs-base); }
.toast__go:active { background: var(--c-primary-d); }

/* 微信二维码弹窗（指令 11） */
.wxqr__img { display: block; width: 200px; height: 200px; max-width: 60vw; max-height: 60vw; margin: 0 auto var(--sp-3); border-radius: var(--radius); background: #fff; object-fit: contain; }
.wxqr__id { font-size: var(--fs-base); color: var(--c-ink-2); margin-bottom: var(--sp-2); }
.wxqr__id b { color: var(--c-primary); }
.wxqr__tip { font-size: var(--fs-xs); color: var(--c-ink-3); }

.sheet {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: 480px;
  background: var(--c-surface); border-radius: 12px 12px 0 0; overflow: hidden;
  padding-bottom: var(--safe-b);
  transition: transform .24s ease;
}
.layer-modal.is-show .sheet { transform: translate(-50%, 0); }
.sheet__item { display: block; width: 100%; padding: var(--sp-4); font-size: var(--fs-md); border-bottom: 1px solid var(--c-line); }
.sheet__item--cancel { border-bottom: 0; color: var(--c-ink-2); }

/* ============================================================
 * 视觉打磨 · 2026-09-15（纯样式层，不新增结构、不改配色语言）
 * 目标：在现有「藏青 + 暗金 + 灰阶、肃穆克制」体系内，统一层级与触感，
 *   让首屏与交互更精致。所有改动只用已有 token，不引入新颜色。
 *   ⚠️ 严格遵守 app.css 顶部约定：--c-accent(暗金) 仍只用于价格与「必须」徽标，
 *      本段不挪作他用；活跃态一律用 --c-primary(藏青) 或灰阶表达。
 * ============================================================ */

/* 顶部导航：sticky 悬浮加一档极浅投影，与下方内容拉开层次（不换色） */
.navbar { box-shadow: 0 1px 3px rgba(20,24,28,.18); }

/* 底部 tab 活跃态：藏青顶规 + 加粗，比单纯变色更明确（不用暗金） */
.tabbar__item { transition: color .15s ease; }
.tabbar__item.is-active { font-weight: 600; box-shadow: inset 0 2px 0 var(--c-primary); }

/* 首页首屏：居中短规 + 更舒展的寄语层级，首屏不再光秃秃（规用灰阶，克制） */
.greeting { padding: var(--sp-6) var(--sp-4) var(--sp-3); }
.greeting::before {
  content: ''; display: block; width: 28px; height: 2px;
  margin: 0 auto var(--sp-4);
  background: var(--c-ink-3); border-radius: 1px;
}
.greeting__main { letter-spacing: .5px; }
.greeting__brand { font-size: var(--fs-xl); font-weight: 600; letter-spacing: .5px; color: var(--c-accent); margin-bottom: var(--sp-1); }  /* 暗金品牌行「武威白事指南」，字号与主句一致 */

/* 卡片：按下反馈（浅灰底，不引阴影——与卡片「描边不用阴影」的廉机渲染考虑一致） */
.card { transition: background-color .15s ease; }
.card:active { background: var(--c-bg); }
.collapse { transition: background-color .15s ease; }
.collapse__head { transition: background-color .15s ease; }
.collapse__head:active { background: var(--c-bg); }

/* 按钮：按下过渡更顺 */
.btn { transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; }

/* 场景锚点：按下高亮（藏青实底，复用主色） */
.anchor:active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* 流程项：行距更舒展，长列表不挤 */
.proc { padding: var(--sp-4) 0; }

/* ============================================================
 * 办事流程页 · 目录式框架（2026-09-15 精修）
 * 纯目录、七阶段分组横线分隔、门店多店卡、底部固定联系条。
 * 仅用已有 token，不引入新颜色/字号体系。
 * ============================================================ */

/* 七阶段目录 */
.dir-group { margin: 0 var(--sp-4); }
.dir-group__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin: 0; padding: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink);
  border-top: 1px solid var(--c-line);            /* 阶段之间的横线分隔 */
}
.dir-group:first-child .dir-group__title { border-top: 0; padding-top: var(--sp-1); }
.dir-group__title em { font-style: normal; font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-3); }

.dir-list { margin: 0; }
.dir {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-line);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dir:first-child { border-top: 0; }
.dir:active { background: var(--c-bg); }
.dir__no { flex: 0 0 auto; width: 1.7em; color: var(--c-ink-3); font-size: var(--fs-sm); }
.dir__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); color: var(--c-ink); }
.dir__arrow { flex: 0 0 auto; color: var(--c-ink-3); transform: rotate(-90deg); }  /* chevron 指向右 › */

/* 门店卡片列表（多店） */
.shop-list .store-card + .store-card { margin-top: var(--sp-3); }
.store-card__ops { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); }
.store-card__ops .btn { flex: 1 1 0; }

/* 底部固定联系条 [电话][微信][添加到桌面]（PWA） */
.page-foot {
  position: fixed; z-index: 40;
  bottom: calc(var(--tab-h) + var(--safe-b)); left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--safe-b));
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.page-foot__btn {
  flex: 1 1 0; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--c-surface); color: var(--c-accent);
  border: 1px solid var(--c-accent); border-radius: var(--radius);
  font-size: var(--fs-base);
  -webkit-tap-highlight-color: transparent;
}
.page-foot__btn .icon { width: 1.1em; height: 1.1em; }
.page-foot__btn:active { background: var(--c-bg); }
.page-foot__btn--pwa { color: var(--c-accent); border-color: var(--c-accent); }  /* 添加到桌面：暗金描边，与电话/微信一致 */

/* ============================================================
 * 服务管家页 · 2026-09-15 框架精修（只改本页布局，仅用已有 token）
 * 视频宣传片 + 团队信息 + 横屏轮播 + 联盟商家
 * ============================================================ */

/* 区块 1 · 视频宣传片（4:3 标准比例 · 占满屏宽） */
.block--flush { margin-left: 0; margin-right: 0; }
.video-hero { margin: 0; }
.video-cover {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--c-primary), #3a4a55);
  display: flex; align-items: center; justify-content: center;
}
.video-cover__tag {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  font-size: var(--fs-xs); color: rgba(255,255,255,.82);
  background: rgba(20,24,28,.35); padding: 2px 6px; border-radius: 3px;
}
.video-cover__play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.88);
  display: flex; align-items: center; justify-content: center;
}
.video-cover__play svg { width: 24px; height: 24px; fill: var(--c-primary); }
.video--hero { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }

/* 区块 2 · 团队信息 */
.team-info .plain-list li { font-size: var(--fs-base); color: var(--c-ink); padding: 3px 0; }

/* 横屏轮播（团队介绍 / 服务内容 / 服务案例） */
.hscroll {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  padding: var(--sp-1) 0 var(--sp-2);
}
.hscroll__card { flex: 0 0 auto; width: 62%; scroll-snap-align: start; }
.hscroll__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
}
.hscroll__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hscroll__media--ph { color: var(--c-ink-3); font-size: var(--fs-sm); }
.hscroll__cap { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); text-align: center; line-height: 1.5; }
.hscroll__cap b { font-weight: 600; color: var(--c-ink); }

/* 联盟商家 */
.merchant__name { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.merchant__desc { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-2); }
.merchant .btn { width: 100%; }

/* ============================================================
 * 白事用品页 · 一级横滑 / 二级竖排网格 / 两列极简商品卡
 * 切换机制：纯 CSS radio(:checked ~)，零 JS 事件（见 js/pages/category.js）
 * 仅用既有 token，不引入新颜色/字号。
 * ============================================================ */
.cat-radio { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* 分类布局 · 方案①（左栏一级 + 右栏二级/商品）：电商经典分层，一眼分清层级 */
.cat-layout {
  display: flex; align-items: flex-start;
  min-height: calc(100vh - var(--nav-h) - var(--tab-h) - var(--safe-b));
}
/* 一级：左栏竖排（全 8 项可见、sticky 跟随；选中=暗金左竖条+浅金底） */
.cat-l1 {
  flex: 0 0 92px;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  background: var(--c-bg);
  border-right: 1px solid var(--c-line);
  position: sticky; top: var(--nav-h);
  align-self: flex-start;
  max-height: calc(100vh - var(--nav-h) - var(--safe-b));
  overflow-y: auto;
}
/* 一级：与右侧二级统一「线条装饰」设计语言（名称左右横线居中、无方块底色/左竖条/圆角） */
.cat-l1__item {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm); line-height: 1.3; color: var(--c-ink-2);
  cursor: pointer; transition: color .15s;
}
.cat-l1__name {
  flex: 0 1 auto; padding: 0 var(--sp-1);
  display: inline-flex; align-items: baseline; justify-content: center;
  white-space: nowrap;
}
.cat-l1__item::before, .cat-l1__item::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--c-line);
}
/* 二级：右栏纵向手风琴（每行=居中分隔线带名称，可折叠/展开，单开；默认展开最后一个） */
.cat-l2 { display: none; }
.l2-acc { background: var(--c-surface); }
.l2-row {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-3);
  cursor: pointer; transition: color .15s;
}
.l2-row__name {
  flex: 0 1 auto; padding: 0 var(--sp-3);
  display: inline-flex; align-items: baseline; justify-content: center;
  font-size: var(--fs-base); color: var(--c-ink); white-space: nowrap;
}
.l2-row::before, .l2-row::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--c-line);
}
.l2-count { color: var(--c-ink-3); font-size: var(--fs-xs); margin-left: 6px; }
.l2-panel { display: none; padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.l2-panel .need-group:last-child { margin-bottom: 0; }

/* 右栏主体（二级手风琴 + 商品） */
.cat-body { flex: 1 1 auto; min-width: 0; }

/* 内容面板 */
.cat-panel { padding: var(--sp-4); }
.need-group { margin-bottom: var(--sp-5); }
.need-group__title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-3);
  margin: 0 0 var(--sp-3); padding-left: var(--sp-2);
  border-left: 3px solid var(--c-accent);
}

/* 两列商品网格（一屏 4~6 个） */
.goods-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gcard {
  position: relative;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
}
/* 商品卡 [加入清单] 按钮（指令 7）：与价格同行、右侧暗金圆钮，点击加购不触发卡片跳转 */
.gcard__buy {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-3);
}
.gcard__add {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--c-accent); color: #fff;
}
.gcard__add .icon { width: 16px; height: 16px; }
.gcard__add:active { background: var(--c-accent-d); }
.gcard__thumb { position: relative; aspect-ratio: 1 / 1; background: var(--c-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gcard__thumb-ph { display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; color: var(--c-ink-3); }
.gcard__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__thumb--ph { color: var(--c-ink-3); }
.gcard__thumb--ph .icon { width: 38%; height: 38%; }
.gcard__name {
  font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.4;
  padding: var(--sp-2) var(--sp-3) 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.gcard__price { padding: 0; }
.gcard--svc .gcard__hint { padding: 0 var(--sp-3) var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-3); }

/* 桌面限宽下，两列网格不拉太宽 */
@media (min-width: 641px) {
  .goods-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
 * C 端中国风色彩优化 · 2026-09-16（仅改色彩，不碰布局/内容/功能）
 * 主色玄色 + 点缀暗金 + 辅助黛青；素白底、深灰正文、中灰辅助。
 * 本段为「按元素重新指向色板」的收口：原规则保留，本段同特异性、源码末尾定义，优先级更高。
 * ============================================================ */

/* 标题 · 玄色（庄重，清楚） */
.block__title,
.greeting__main,
.group__head,
.wl-board,
.vas-cat__name,
.qblock__q,
.vas-pkg__name,
.vas-theme__name,
.dir__name,
.merchant__name,
.gcard__name,
.wl-gcard__name,
.wl-item__name,
.vas-item__name,
.pcard__name,
.scard__name,
.title-zone__name,
.collapse__head,
.proc__head,
.wl-board__title { color: var(--c-title); }

/* 七阶段分组标题 · 暗金（品牌点缀，区别于正文玄色标题） */
.dir-group__title { color: var(--c-accent); }

/* 目录行箭头 › · 暗金 */
.dir__arrow { color: var(--c-accent); }

/* 主按钮 · 暗金底白字（禁用红） */
.btn--primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn--primary:active { background: var(--c-accent-d); }
/* 次按钮 · 边框暗金 + 文字暗金 + 透明底 */
.btn--ghost { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }

/* 「必须」徽标 · 暗金底白字 */
.badge--must { background: var(--c-accent); color: #fff; }

/* 价格 / 小计 / 选中态 / 主操作 · 暗金点缀 */
.priced-qty__price,
.priced-subtotal,
.wl-allcheck.is-on,
.wl-check.is-on .wl-check__box,
.opt input[type="radio"],
.shop-strip__more,
.pcard__more,
.wxqr__id b { color: var(--c-accent); }
.opt input[type="radio"] { accent-color: var(--c-accent); }
.opt:has(input:checked) { border-color: var(--c-accent); }

/* 加购圆钮 / 行动 toast · 暗金 */
.gcard__add { background: var(--c-accent); }
.gcard__add:active { background: var(--c-accent-d); }
.toast__go { background: var(--c-accent); }
.toast__go:active { background: var(--c-accent-d); }

/* 折叠箭头 · 中灰，展开后暗金 */
.collapse.is-open .collapse__arrow { color: var(--c-accent); }

/* 底部固定栏 · 素白底（与页面底同色，非纯白） */
.product-foot,
.page-foot,
.wl-bottom { background: var(--c-bg); }

/* 清空类按钮 · 去掉偏红的 #b04a45，改中性灰（白事禁忌正红） */
.wl-clearbtn { color: var(--c-ink-2); }