/* ==========================================================================
   SINREGE — 站点视觉系统 v3「雾与茶」 (2026-11-09)
   --------------------------------------------------------------------------
   这一层是全站唯一的设计真值，加载顺序排在 style.css / site-home.css 之后。

   为什么需要这一层：
   1) 后台「主题与外观」的 tokens.css 由 FastAPI 注入在 </head> 之前（即排在页面
      CSS 之后），它把 :root 上的 --color-* 改回冷白/冷灰/橙红，手写的暖调全部
      被盖掉。本层把 token 重新声明在 body 作用域——元素级声明优先于 html 继承，
      无论 tokens.css 何时注入都输不掉。
   2) 首页（site-home.css，圆角/胶囊/柔阴影）与内页（style.css，2px 直角/发丝线）
      是两套设计语言；本层把两者收敛成一套：胶囊按钮、16px 卡片圆角、无阴影、
      发丝线分隔。
   3) 品类是加湿器 / 香薰机，配色取「雾白 + 深青绿（茶）」：比暖陶土更贴合
      水汽与居家香氛，也比后台的冷工业蓝更接近使用场景。

   约束：D-08 卡片常态无阴影；D-09 只用自托管 Instrument Sans / Inter；
        所有正文级文字对背景 ≥ 4.5:1（深色小字 token 已按此取值）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token —— 声明在 body 上，压过 :root 注入的 tokens.css
   -------------------------------------------------------------------------- */
body {
  /* 色板 */
  --color-bg: #F6F8F7;          /* 雾白：带一点青的暖白 */
  --color-surface: #EBF1EF;     /* 浅雾面：区块/页脚/表单底 */
  --color-surface-2: #FFFFFF;   /* 卡片面 */
  --color-ink-900: #15272A;     /* 主文字 14.5:1 */
  --color-ink-600: #4C6266;     /* 次文字 6.1:1 */
  --color-ink-400: #566C70;     /* 弱文字 5.2:1（bg）/ 4.9:1（surface），小字也过 AA */
  --color-hairline: #DCE5E2;
  --color-line: #CDDAD6;
  --color-accent: #1D6B62;      /* 茶青：主交互色 6.3:1，白字压在上面对比 6.3:1 */
  --color-accent-soft: #2A8579; /* 只做描边/底纹，不承载白字 */
  --color-accent-deep: #15544E; /* 悬停/按下 8.7:1 */
  --color-sage: #70897C;
  --color-sage-ink: #566B5F;    /* eyebrow 小字 5.4:1 */
  --color-on-accent: #FFFFFF;
  --color-focus: rgba(29, 107, 98, .22);

  /* 版式 */
  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --text-display: clamp(34px, 1.35rem + 3.5vw, 66px);
  --text-h1: clamp(28px, 1.35rem + 1.7vw, 44px);
  --text-h2: clamp(22px, 1.1rem + 1.15vw, 34px);
  --text-h3: clamp(19px, 1.05rem + .45vw, 22px);
  --text-lead: clamp(17px, .35vw + 16px, 19px);
  --text-body: clamp(16px, .2vw + 15.2px, 17px);
  --text-sm: 14px;
  --text-xs: 13px;
  --text-eyebrow: 12px;
  --measure: 68ch;

  /* 布局节奏（8px 栅格） */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 6.6vw, 96px);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* 兼容 style.css 尾部 B2B 组件的硬编码回退值：
     这些组件写的是 var(--accent, #b45309) 一类，在 body 上声明变量后
     回退值全部失效，自动跟色板走，不需要逐个改选择器。 */
  --accent: var(--color-accent);
  --border: var(--color-hairline);
  --bg-alt: var(--color-surface);
  --text: var(--color-ink-900);
  --text-muted: var(--color-ink-600);
  --font-mono: var(--font-body);
}

/* 首页层把若干颜色写死在 .home 上，需要同等优先级覆盖 */
.home {
  --ink: var(--color-ink-900);
  --ink-2: var(--color-ink-600);
  --ink-3: var(--color-ink-400);
  --surface: var(--color-surface);
  --surface-2: #FFFFFF;
  --line: var(--color-hairline);
  --brand: var(--color-accent);
  --brand-2: var(--color-accent-deep);
  --color-line: var(--color-hairline);
  --color-brand: var(--color-accent);
  /* 不能写成 var(--color-sage-ink)：自引用在计算值阶段失效，会退回继承色（墨色） */
  --color-sage-ink: #566B5F;
  --radius: var(--radius-md);
  --pill: var(--radius-pill);
  --sec: var(--section-y);
  font-size: var(--text-body);
  line-height: 1.65;
  background: var(--color-bg);
  color: var(--color-ink-900);
}

/* --------------------------------------------------------------------------
   2. 基础排版
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-ink-900);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(29, 107, 98, .16); color: var(--color-ink-900); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.024em;
  line-height: 1.1;
  color: var(--color-ink-900);
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: var(--container); padding-inline: var(--gutter); }
.home .container { max-width: var(--container); padding: 0 var(--gutter); }

.section { padding-block: var(--section-y); }
.home .section { padding: var(--section-y) 0; }
.section--surface, .home .section--surface { background: var(--color-surface); }

/* eyebrow / 小标签：全站统一 12px、字距 .16em、鼠尾草墨色 */
.eyebrow,
.home .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-sage-ink);
  margin-bottom: 16px;
}

/* 标题级 */
.hero__title,
.home .hero__title {
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.03;
  color: #fff;
}
.hero__sub,
.home .hero__sub {
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.pdp__title { font-size: var(--text-h1); letter-spacing: -.028em; line-height: 1.12; }
.pdp__sub { font-size: var(--text-body); color: var(--color-ink-600); }

/* 详情页（/products/<slug>/）自带一段行内 <style>，选择器同样是一层类名，
   且位于本文件之后。用 .pdp 前缀加一级优先级，把字号/行宽拉回全站节奏。 */
.pdp .pdp__title { font-size: var(--text-h1); line-height: 1.12; letter-spacing: -.028em; max-width: 26ch; }
.pdp .pdp__tldr { font-size: var(--text-body); line-height: 1.7; color: var(--color-ink-600); max-width: 68ch; }
.pdp .pdp__lead { font-size: var(--text-lead); line-height: 1.65; color: var(--color-ink-600); max-width: 62ch; }
.pdp .pdp__body,
.pdp .pdp__list { font-size: var(--text-body); line-height: 1.75; max-width: 68ch; }
.pdp .pdp__section { margin-top: clamp(40px, 4.5vw, 64px); }
.pdp .pdp__section h2 { font-size: clamp(20px, 1.05rem + .8vw, 26px); letter-spacing: -.022em; }
.pdp .pdp__buy { font-size: 14px; }
.pdp .pdp__media,
.pdp .pdp__shots { border-radius: var(--radius-md); }
.pdp .pdp__thumb { border-radius: var(--radius-xs); }
.pdp .pdp__grid > *,
.pdp .pdp__top > *,
.gallery { min-width: 0; }

.section__title,
.home .section__title {
  font-size: clamp(26px, 1.35rem + 1.5vw, 40px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.section__lead,
.home .section__lead {
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-ink-600);
  max-width: 62ch;
}

.block__title { font-size: var(--text-h2); letter-spacing: -.026em; }
.block__lead {
  font-size: var(--text-lead);
  color: var(--color-ink-600);
  max-width: var(--measure);
  line-height: 1.7;
}
.block__head { max-width: 820px; }
.block { margin-top: clamp(44px, 5vw, 76px); }

.tldr { border-left: 2px solid var(--color-sage); max-width: 66ch; }
.tldr h2 { color: var(--color-sage-ink); font-weight: 600; letter-spacing: .12em; }
.tldr p { font-size: var(--text-body); line-height: 1.7; }

.pains h2 { font-size: var(--text-h3); letter-spacing: -.02em; }
.pains p { font-size: var(--text-body); line-height: 1.7; }
.pains strong { color: var(--color-ink-900); font-weight: 600; }

.legal__title { font-size: var(--text-h1); letter-spacing: -.028em; line-height: 1.12; }
.legal h2 { font-size: clamp(20px, 1.05rem + .8vw, 26px); letter-spacing: -.022em; }
.legal p, .legal li { font-size: var(--text-body); line-height: 1.7; }
.legal h3 { font-weight: 600; }
/* 正文行宽：720px/17px 约 80–85 字符，在舒适区上沿；收到 680px 约 75–80 字符 */
.legal section { max-width: 680px; }
/* 法务页把 eyebrow 写成 <p class="eyebrow">，被 .legal p 的 16px 盖掉 */
.legal p.eyebrow { font-size: var(--text-eyebrow); color: var(--color-sage-ink); }

/* --------------------------------------------------------------------------
   3. 页头 / 导航（全站一套玻璃页头，56px）
   -------------------------------------------------------------------------- */
.header,
.home .header {
  height: 56px;
  background: rgba(246, 248, 247, .84);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--color-hairline);
}
.header__inner,
.home .header__inner {
  height: 56px;
  min-height: 56px;
  gap: clamp(16px, 2vw, 30px);
}
.logo,
.home .logo { font-size: 16px; gap: 9px; }
.logo__mark,
.home .logo__mark { width: 20px; height: 20px; opacity: .9; }
.logo__text,
.home .logo__text { font-weight: 600; letter-spacing: -.012em; }

.nav,
.home .nav { gap: clamp(16px, 1.9vw, 28px); }
.nav__link,
.home .nav__link {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--color-ink-600);
  border-bottom: 0;
}
.nav__link:hover,
.nav__link[aria-current="true"],
.home .nav__link:hover,
.home .nav__link[aria-current="true"] {
  color: var(--color-accent);
  border-bottom-color: transparent;
}
.header__actions .btn { height: 40px; min-height: 40px; padding: 0 20px; font-size: 13.5px; }
.cart-link,
.home .cart-link { font-size: 13px; color: var(--color-ink-600); }
.cart-link__count,
.home .cart-link__count { background: var(--color-accent); }

.mega {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: none;
}
.mega a { border-bottom-color: var(--color-hairline); }
.mega strong { font-weight: 500; }
.mega span { color: var(--color-ink-600); }

.burger { border-radius: var(--radius-sm); border-color: var(--color-hairline); }

/* --------------------------------------------------------------------------
   4. 按钮 / 链接 / 焦点
   -------------------------------------------------------------------------- */
.btn,
.home .btn {
  height: 46px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn--primary,
.home .btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover,
.home .btn--primary:hover {
  background: var(--color-accent-deep);
  color: #fff;
  transform: none;
}
.btn--ghost,
.home .btn--ghost {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-ink-900);
}
.btn--ghost:hover,
.home .btn--ghost:hover {
  border-color: var(--color-ink-900);
  background: transparent;
}
.btn--on-image,
.home .btn--on-image { background: #fff; color: var(--color-ink-900); }
.btn--on-image:hover,
.home .btn--on-image:hover { background: #EDF3F1; }
.btn--on-image-ghost,
.home .btn--on-image-ghost {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: none;
}
.btn--on-image-ghost:hover,
.home .btn--on-image-ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
}
.btn--sm,
.home .btn--sm {
  height: 38px;
  min-height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
}

.link-arrow,
.home .link-arrow {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-accent);
}
.home .link-arrow::after { content: "→"; font-size: 15px; }

.skip-link { background: var(--color-accent); color: #fff; border-radius: 0 0 8px 0; }

/* --------------------------------------------------------------------------
   5. Hero 遮罩：随色板从暖褐改为深青，亮度不变（不影响白字对比度）
   -------------------------------------------------------------------------- */
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(9, 24, 23, .58) 0%, rgba(9, 24, 23, .26) 46%, rgba(9, 24, 23, 0) 82%),
    linear-gradient(180deg, rgba(9, 24, 23, 0) 30%, rgba(9, 24, 23, .55) 100%);
}
@media (max-width: 767px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(9, 24, 23, 0) 6%, rgba(9, 24, 23, .62) 56%, rgba(9, 24, 23, .92) 100%);
  }
}
.home .hero__media::after {
  background:
    linear-gradient(90deg, rgba(9, 24, 23, .52) 0%, rgba(9, 24, 23, .2) 48%, rgba(9, 24, 23, 0) 78%),
    linear-gradient(180deg, rgba(9, 24, 23, 0) 34%, rgba(9, 24, 23, .5) 100%);
}
.home .hero__facts span {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .32);
}
.home #inquiry .hero__facts span {
  color: var(--color-ink-600);
  border-color: var(--color-line);
}

/* --------------------------------------------------------------------------
   6. 卡片：统一 16px 圆角 + 发丝线，无阴影（D-08）
   -------------------------------------------------------------------------- */
.products__grid,
.grid-3,
.related {
  gap: 18px;
  background: transparent;
  border: 0;
}
/* 2026-11-10：.grid-3 / .related 原是 style.css 的“发丝线网格”（1px 缝 + 底色当分隔线），
   配的是直角卡。新卡片体系是白卡 + 16px 圆角 + 1px 描边，网格底色会从
   四个圆角缺口和上下边缘透出来，看着像模块漏了底。这里与产品网格对齐：
   透明底、18px 间距，由卡片自身描边承担分隔。 */
.pcard {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
}
.pcard:hover { border-color: var(--color-line); }
.pcard__media {
  background: radial-gradient(120% 88% at 50% 108%, #DEE9E5 0%, #EDF3F0 46%, #F8FAF9 100%);
}
.pcard__media::before {
  background: linear-gradient(168deg, #FFFFFF 0%, #EFF4F2 52%, #D2DFDA 100%);
  box-shadow:
    inset 0 -14px 26px rgba(30, 74, 68, .10),
    inset 0 8px 14px rgba(255, 255, 255, .9),
    0 18px 28px -22px rgba(20, 48, 44, .35);
}
.pcard__body { padding: 20px 20px 22px; gap: 8px; }
.pcard__name,
.home .pcard__name { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.pcard__type,
.home .pcard__type { font-size: 13.5px; font-weight: 400; color: var(--color-ink-400); }
.pcard__specs { border-top: 1px solid var(--color-hairline); }
.pcard__specs div { font-size: 13.5px; }
/* 产品标签：数据来自后台 tags / product_tags，无标签时整块隐藏（:empty） */
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.pcard__tags:empty { display: none; }
.pcard__tag {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--color-sage-ink);
  background: rgba(29, 107, 98, .07);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.home .pcard {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.home .pcard:hover {
  transform: translateY(-2px);
  border-color: var(--color-line);
  box-shadow: none;
}
.home .pcard__media--photo { background: var(--color-surface); }
.home .pcard__specs { border-top: 1px solid var(--color-hairline); }
.home .pcard__specs div span:first-child { color: var(--color-ink-400); }
.home .pcard__specs div span:last-child { color: var(--color-ink-900); }
.home .pcard__moq { color: var(--color-ink-400); }
.home .pcard__media--type { background: var(--color-surface); border-color: var(--color-hairline); }
/* 首页两处写死的浅灰（#B8BCC4 / #C3C7CF）在浅底上只有 1.5–1.8:1 */
.home .cats__num { color: var(--color-sage-ink); }
.home .pcard__type-num { color: var(--color-sage); font-weight: 400; }

/* 认证 / 政策 / 标准卡：去阴影、去直角、去琥珀色 */
.cert-card,
.policy-card,
.standards-card,
.b2b-figure {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.cert-card:hover,
.policy-card:hover,
.standards-card:hover {
  border-color: var(--color-line);
  box-shadow: none;
  transform: none;
}
.cert-card__title,
.policy-card__title,
.standards-card__desc { color: var(--color-ink-900); }
.cert-card__desc,
.cert-card__footer,
.policy-card__footer,
.policy-card__list,
.standards-card__desc { color: var(--color-ink-600); }
.cert-card__badge,
.cert-card__region,
.cert-card__status,
.policy-card__tag,
.standards-card__region {
  font-family: var(--font-body);
  color: var(--color-accent);
  background: rgba(29, 107, 98, .08);
  border-radius: var(--radius-pill);
}
.policy-card--featured {
  border: 2px solid var(--color-accent);
  box-shadow: none;
}
.cert-card__header,
.cert-card__footer,
.policy-card__footer {
  border-color: var(--color-hairline);
}
.b2b-figure figcaption {
  background: var(--color-surface-2);
  border-top-color: var(--color-hairline);
  color: var(--color-ink-600);
  font-size: 13px;
}
.b2b-figure .fig-tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-accent);
  background: rgba(29, 107, 98, .08);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

/* 通用面板/占位块 */
.cats__media,
.qline__media,
.gallery__main,
.gallery__thumbs,
.keyfacts,
.cnotes,
.empty,
.success,
.rcart,
.legal__note,
.legal__contact,
.form__captcha,
.searchbar input[type="search"],
.qstep,
.chip,
.pager a,
.pager span.pager__gap {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
}
.keyfacts,
.cnotes,
.rcart,
.legal__contact { background: var(--color-surface-2); }
.empty { background: var(--color-surface); }
.cats__media span,
.gallery__main span,
.qline__media { color: var(--color-ink-400); }
.chip { border-radius: var(--radius-pill); min-height: 36px; }
.chip[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.pager a[aria-current="true"] { border-color: var(--color-accent); }
.legal__note { border-left: 2px solid var(--color-accent); }
.breadcrumb { font-size: 13px; }
.breadcrumb a:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   7. FAQ / 表格
   -------------------------------------------------------------------------- */
.faq summary {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.012em;
  padding: 22px 40px 22px 0;
}
.faq__answer,
.home .faq__answer {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-ink-600);
  max-width: 70ch;
}
.home .faq summary { font-size: 17px; padding: 22px 40px 22px 0; }
.home .why__body,
.home .why__list span { font-weight: 400; }
.home .why__body { font-size: var(--text-body); }

/* 归档/搜索页的说明行是 12px 单行铺满 1120px（约 179 字符），读不成句 */
.pager__note { max-width: 72ch; }

.compare,
.spec { font-size: 14.5px; }
.compare thead th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-sage-ink);
}
.compare tbody th { color: var(--color-ink-600); }
.compare tbody tr:hover { background: rgba(29, 107, 98, .035); }
.spec caption { color: var(--color-ink-400); }

/* --------------------------------------------------------------------------
   8. 表单
   -------------------------------------------------------------------------- */
.field label,
.home .field label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-ink-900);
}
.field input,
.field select,
.field textarea,
.home .field input,
.home .field select,
.home .field textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15.5px;
  color: var(--color-ink-900);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-ink-400); }
.field input:focus,
.field select:focus,
.field textarea:focus,
.home .field input:focus,
.home .field select:focus,
.home .field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus);
  outline: none;
}
.field__hint { font-size: 12.5px; color: var(--color-ink-400); }

.file-drop,
.home .file-drop {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.file-drop:hover,
.file-drop:focus-within { border-color: var(--color-accent); background: #F3F8F6; }
.file-drop__btn,
.home .file-drop__btn {
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border-color: var(--color-line);
  font-weight: 500;
}
.file-drop:hover .file-drop__btn { background: var(--color-hairline); }

.form__captcha { background: var(--color-surface-2); border-radius: var(--radius-sm); }
.form__consent,
.form__privacy { color: var(--color-ink-600); }
.form__privacy a { color: var(--color-accent); }
.form__hp { position: absolute; left: -9999px; }

.qstep { overflow: hidden; }
.qstep button:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   9. 页脚（全站同一底色与栅格）
   -------------------------------------------------------------------------- */
.footer,
.home .footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
  padding-block: clamp(56px, 6vw, 72px) 28px;
  color: var(--color-ink-600);
}
.home .footer { padding: 56px 0 40px; }
.footer h4,
.home .footer__grid > div > h4 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--color-sage-ink);
  margin-bottom: 14px;
}
.footer li a,
.home .footer li a { font-size: 14px; color: var(--color-ink-600); }
.footer li a:hover,
.home .footer li a:hover { color: var(--color-accent); }
.footer__lang,
.footer__legal,
.home .footer__lang,
.home .footer__legal {
  border-top-color: var(--color-hairline);
  color: var(--color-ink-400);
}
.footer__lang a,
.footer__legal a,
.home .footer__lang a,
.home .footer__legal a { color: var(--color-ink-600); }
.home .footer .logo__text { font-size: 16px; }

/* --------------------------------------------------------------------------
   10. Cookie 同意条（#cc）
   --------------------------------------------------------------------------
   它的样式由后端以行内 <style> 注入在每页 </head> 之前，写死暖米色 #FFFCF7、
   陶土色按钮和一层阴影，与本版色板冲突。用 body 前缀抬一级优先级盖掉。
   -------------------------------------------------------------------------- */
body #cc {
  background: var(--color-surface);
  color: var(--color-ink-900);
  border-top: 1px solid var(--color-hairline);
  box-shadow: none;
}
body #cc .cc__d,
body #cc .cc__lnk { color: var(--color-ink-600); }
body #cc .cc__d { max-width: 78ch; }
body #cc .cc__d a { color: var(--color-accent); }
body #cc .cc--ok { background: var(--color-accent); color: #fff; border-radius: var(--radius-pill); }
body #cc .cc--ok:hover { background: var(--color-accent-deep); }
body #cc .cc--no {
  border-color: var(--color-line);
  color: var(--color-ink-900);
  border-radius: var(--radius-pill);
}
body #cc .cc--no:hover { border-color: var(--color-ink-900); }
body #cc .cc__panel { background: var(--color-surface-2); }
body #cc .cc__panel.open { border-top-color: var(--color-hairline); }
body #cc .cc__cat { border-bottom-color: var(--color-hairline); }
body #cc .cc__cd { color: var(--color-ink-600); }
body #cc .cc__sw { background: var(--color-line); }
body #cc .cc__sw[aria-checked="true"] { background: var(--color-accent); }
body #cc .cc__foot { background: var(--color-surface-2); }

/* --------------------------------------------------------------------------
   11. 移动端常驻询价条
   -------------------------------------------------------------------------- */
.quote-bar {
  background: rgba(246, 248, 247, .95);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--color-hairline);
}

/* --------------------------------------------------------------------------
   12. 响应式微调：窄屏把节奏压到 56，按钮保持可点面积
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .btn,
  .home .btn { height: 48px; min-height: 48px; padding: 0 22px; }
  .btn--sm,
  .home .btn--sm { height: 40px; min-height: 40px; padding: 0 16px; }
  .header__actions .btn { height: 40px; min-height: 40px; }
  .pcard__body,
  .home .pcard__body { padding: 18px 18px 20px; }
  .faq summary { padding: 20px 36px 20px 0; }
  /* 内联的 min-height:360px + aspect-ratio:4/3 会把主图撑到 480px 宽，
     在 390 视口直接横向溢出 110px；手机端取消这个下限即可 */
  .gallery__main { min-height: 0; }
}

/* 减少动态偏好：本层没有必须保留的动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* 询盘表单提交状态与逐字段报错（2026-11-10，assets/js/forms.js 配套） */
.form__msg {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-600);
}
.form__msg--error { color: #B42318; }
[aria-invalid="true"] { border-color: #B42318 !important; }
[aria-invalid="true"]:focus { outline-color: #B42318; }