@charset "UTF-8";
/* ==========================================================================
   王一珠宝 —— 「象牙浅金」主题（覆盖层）
   --------------------------------------------------------------------------
   用法：本文件在 css/style.css **之后**加载，只做覆盖，不改动原样式。
   后台「站点设置 → 外观样式」可切换 classic / jade，随时来回切、不影响功能。

   配色：只用「白 + 米 + 浅金」三色系，**不使用任何绿色**（对齐参考图）。
     页面底   象牙米白   #FCFAF6
     区块底   暖米       #F7F2E8 / #F3ECDD
     卡片     纯白       #FFFFFF
     金线     浅金 #E3D3AC   中金 #C9A96A   深金 #A8894E
     文字     深暖褐 #4A3F33   次级 #8A7A63
   层次全靠「留白 + 1px 浅金细线 + 少量深金点缀」建立，不靠色块对比。
   ========================================================================== */

/* ---------------------------------------------------------------- 变量覆盖 */
:root {
  /* 原变量体系里的“绿色”全部改成金褐系，保证未逐一覆盖的组件也不出现绿色 */
  --green: #8A6F3C;
  --green-d: #6E5730;

  --gold: #C9A96A;
  --gold-l: #E3D3AC;
  --off: #F7F2E8;

  --gray: #8A7A63;
  --gray-l: #A99C86;
  --line: #EDE4D2;
  --bg: #FCFAF6;

  /* 主题专属 */
  --cream: #FCFAF6;
  --cream-2: #F7F2E8;
  --cream-3: #F3ECDD;
  --white: #FFFFFF;
  --hair: #E8DEC6;        /* 细金线（普通） */
  --hair-soft: #F0E9DA;   /* 更淡的分隔线 */
  --gold-mid: #C9A96A;
  --gold-deep: #A8894E;
  --ink: #4A3F33;         /* 主文字：深暖褐 */
  --ink-2: #6B5D4A;
  --ink-soft: #8A7A63;    /* 次级文字 */

  /* 浅翡分两层用，避免对比度不足：
       jade-2 #4E8C79  中翡：对比 3.8，用于**大标题**（WCAG 大字号门槛 3.0）
       jade-3 #3F7A68  深翡：对比 4.8，用于**正文小字/链接**（门槛 4.5） */
  --jade-2: #4E8C79;
  --jade-3: #3F7A68;

  --shadow: 0 2px 10px rgba(140,115,70,.06);
  --shadow-l: 0 10px 30px rgba(140,115,70,.12);

  --r: 4px;
}

body {
  background: var(--cream);
  color: var(--ink);
  /* 正文字体：改回无衬线。
     原因：衬线体（Noto Serif SC / 宋体）的横画极细，16px 下经抗锯齿后笔画发灰，
           整体显得"看不清"（用户多次反馈）。无衬线的笔画粗细均匀，小字号下清楚得多。
     标题不受影响：下面 h1~h4 单独指定了衬线体，品牌典雅感保留。*/
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- 顶部通栏 */
/* 原来是深绿实色块 → 改为浅米底 + 金线，整体只有白/米/金 */
.top-bar {
  background: var(--cream-2);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hair);
  letter-spacing: 2px;
}
.top-bar a, .top-links a { color: var(--ink-2); }
.top-bar a:hover, .top-links a:hover { color: var(--jade-3); }
.top-links .dot { color: var(--gold-mid); }

/* 主导航：白 + 浅金细线 */
.site-header { background: rgba(252,250,246,.97); border-bottom: 1px solid var(--hair); }
.main-nav a { color: var(--ink-soft); letter-spacing: 1px; }
.main-nav a:hover { color: #35705F; background: rgba(168,216,200,.16); }
.main-nav li.active a { color: #35705F; font-weight: 600; background: rgba(168,216,200,.2); }
.logo-cn { color: var(--jade-2); letter-spacing: 5px; }
.logo-en { color: var(--gold-mid); letter-spacing: 3px; }

/* ---------------------------------------------------------------- Hero */
/* 照片保持清晰（不加奶白蒙版），只把文字压亮、装饰描金 */
.hero-text .hero-title { color: #FFFFFF; }
.hero-text .hero-sub { color: var(--gold-l); }
.hero-text .hero-desc { color: rgba(255,255,255,.92); }
.hero-text { --hero-scrim: .28; }   /* 略加强暗角，保证亮部上文字清晰 */
.hero-rule { background: linear-gradient(90deg, transparent, var(--gold-l), transparent); }
.hero-mark {
  /* 两层投影：外层偏红 = 印章浮起的氛围光，内层黑色 = 落影。
     改前这两层分别在 .hero-imgwrap（动画层）和 .hero-mark 上；
     为避开 iOS 上「基础 filter + 关键帧 filter」的合成冲突（表现为一直糊着），
     统一挪到图片这一层 —— 外观不变，动画层保持零 filter。 */
  filter: drop-shadow(0 calc(var(--mk-h, 96px) / 16) calc(var(--mk-h, 96px) / 6) rgba(150,30,30,.30))
          drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.hero.has-image {
  border: 1px solid var(--hair);
  outline: 1px solid var(--hair);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------- 通用区块 */
.section { position: relative; }
.section.bg-white { background: var(--white); }
.section-head .en { color: var(--gold-mid); letter-spacing: 5px;  }
.section-head h2 { color: var(--jade-2); letter-spacing: 3px; }
.section-head .lead { color: var(--ink-soft); }
h2 { color: var(--jade-2); letter-spacing: 2px; }

/* 标题下的金色细线（参考图的直线装饰） */
.section-head::after {
  content: '';
  display: block;
  width: 88px;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
}

/* ---------------------------------------------------------------- 卡片 */
.feature-card, .product-card, .store-card, .info-card, .metric-card {
  border: 1px solid var(--hair);
}
.feature-card, .product-card, .store-card {
  background: var(--white);
  box-shadow: var(--shadow);
}
.product-card:hover, .store-card:hover, .feature-card:hover {
  border-color: var(--gold-mid);
  box-shadow: var(--shadow-l);
}
.product-card .body { border-top: 1px solid var(--hair-soft); }
.product-card h3, .feature-card h3 { color: var(--jade-2); }
.product-card .sub, .feature-card p { color: var(--ink-soft); }

/* 「新品」角标：改为与按钮同一套（米底 + 金边 + 金褐字）。
   原来是金色实底 + 米白字，一是"金块"看着重，二是对比只有 2.17（远低于 4.5）。
   现在 5.10 达标，且和全站按钮语言一致。 */
.product-card .tag,
.tag-new {
  background: #F7F2E8;
  color: #7C6335;
  border: 1px solid #8A6F3C;
  letter-spacing: 1px;
  border-radius: 2px;
}
.product-card .card-more { color: #7C6335; }
/* 注：这里原有 hover 变绿（--jade-2）的覆盖，用户要求去掉悬停的变色与放大，因此只留常态色。
   以后若要加回悬停色，按常规写法补一条 hover 规则指向 .card-more 即可。 */

/* 占位图：暖米渐变 */
.img-placeholder { background: linear-gradient(135deg, #F7F2E8, #EFE6D3); color: #BCA87E; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  border-radius: 3px;
  letter-spacing: 3px;
  font-family: inherit;
}
/* 前台按钮：与后台**完全一致**的一套样式
   常态 米底 + 金褐边 + 金褐字；hover 填充金色、字变深褐。
   之前这里用金色实底，和后台/筛选胶囊对不上，用户反馈"前台按钮还是老样子"。
   对比度：常态字 5.10、常态边 4.26、hover 字 5.51（文字需≥4.5，边框需≥3） */
.btn,
.btn-gold {
  background: #F7F2E8;
  color: #7C6335;
  border: 1px solid #8A6F3C;
}
.btn:hover,
.btn-gold:hover {
  background: var(--gold-mid);
  color: #3F3319;
  border-color: var(--gold-deep);
}

/* ---------------------------------------------------------------- 数据指标 */
.metrics-grid { border-top: 1px solid var(--hair); }
.metric-card .num { color: var(--jade-2);  letter-spacing: 1px; }
.metric-card .lab { color: var(--ink-soft); letter-spacing: 2px; }

/* ---------------------------------------------------------------- 品牌理念 */
/* 原来是深绿大色块 → 改为暖米底 + 金色内框，全程不出现绿色 */
.mission {
  background: linear-gradient(150deg, var(--cream-2) 0%, var(--cream-3) 100%);
  position: relative;
}
.mission::before {
  content: '';
  position: absolute; inset: 20px;
  border: 1px solid var(--hair);
  pointer-events: none;
}
.mission h2 { color: var(--jade-2); }
.mission p { color: var(--ink-soft); }
.mission .btn-gold { box-shadow: 0 2px 10px rgba(201,169,106,.28); }

/* ---------------------------------------------------------------- 筛选胶囊 */
/* 三种状态（与全站按钮行为**完全一致**）：
     未选中：白底 + 浅金细边 + 次级暖褐字
     悬停  ：金底 #C9A96A + 深褐字 #3F3319   ← 与其他所有按钮的悬停一致（填充金色）
     选中  ：米底 #F7F2E8 + 金褐边 + 金褐字 + 加粗
   注意悬停≠选中：悬停是"要点了"的反馈（填充），选中是"当前所在分类"（描边+加粗）。

   ⚠️ 必须把 :hover 与 .active 分开写、且各自特异性足够：
   style.css 原文是
       .filter-bar a:hover, .filter-bar a.active { background: var(--green); color:#fff }
   特异性 (0,2,0)。覆盖时两条都要给到同等特异性，否则会被原规则压掉
   （表现为"鼠标移上去又变回旧的金/绿色填充"）。 */
.filter-bar a { background: var(--white); border: 1px solid var(--hair); color: var(--ink-soft); }
.filter-bar a:hover {
  background: var(--gold-mid);
  border-color: var(--gold-deep);
  color: #3F3319;
}
.filter-bar a.active {
  background: #F7F2E8;
  border-color: #8A6F3C;
  color: #7C6335;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(201,169,106,.2);
}

/* ---------------------------------------------------------------- 产品详情 */
.pd-cat { color: var(--gold-mid); letter-spacing: 5px; }
.pd-info h1 { color: var(--jade-2); }
.pd-info .pd-sub { color: var(--ink-soft); }
.pd-meta { border-top: 1px solid var(--hair); }
.pd-meta .row span:first-child { color: var(--jade-3); }
.pd-visual .img-placeholder, .pd-visual img { border: 1px solid var(--hair); }
.pd-desc h3 { color: var(--jade-2); }

/* ---------------------------------------------------------------- 门店 / 服务 */
.store-hero-card { border: 1px solid var(--hair); }
.store-hero-info .city { color: var(--gold-mid); letter-spacing: 5px; }
.store-hero-info h2, .store-card h3 { color: var(--jade-2); }
.store-hero-info .meta div span:first-child { color: var(--jade-3); }
.services-row h3 { color: var(--jade-2); }

/* 承诺条：原深绿块 → 暖米底 + 金框 + 深褐文字 */
.promise-bar {
  background: linear-gradient(150deg, var(--cream-2) 0%, var(--cream-3) 100%);
  position: relative;
}
.promise-bar::before {
  content: ''; position: absolute; inset: 16px;
  border: 1px solid var(--hair); pointer-events: none;
}
.promise-bar h2, .promise-bar h3 { color: var(--jade-2) !important; }
.promise-bar p, .promise-bar .desc { color: var(--ink-soft) !important; }
.promise-bar .lead { color: var(--ink-soft) !important; }

/* 服务保障页 FAQ —— 原为每项整圈 1px 边框，相邻项叠加成双线、整体像表格，显得生硬。
   改为「圆角卡片 + 间距」：项之间留白、四角圆润、文字左右内缩，展开时描边转金。 */
.faq-list {
  border-top: none;                 /* 去掉基类的顶部横线（每项自带圆角卡片） */
  display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--white);
  padding: 0 22px;                  /* 左右内缩，文字不贴边框 */
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover { border-color: var(--gold-mid); box-shadow: 0 4px 16px rgba(140,115,70,.08); }
.faq-item.open  { border-color: var(--gold-mid); box-shadow: 0 4px 16px rgba(140,115,70,.10); }
/* 问题：原用 jade-2（对比 3.92）低于正文门槛；改 jade-3（5.01），并加粗一档 ——
   衬线体 400 的字形笔画偏细，在 16px 下显得淡。 */
.faq-q { color: var(--jade-3); padding: 20px 0 18px; font-weight: 500; }
.faq-q .arr { color: var(--gold-mid); font-weight: 400; }
/* 展开时问答之间的分界线：用更浅的 hair-soft，落在卡片左右内边距之内（不顶到卡片边框） */
.faq-a { color: var(--ink); border-top: 1px solid var(--hair-soft); }
/* 答案上下留白对称：原来上 0 / 下 20 → 文字严重偏上；现改 18 / 18。
   ⚠️ 颜色必须写在 .faq-a p 上 —— style.css 里 .faq-a p 自带 color:var(--gray)，
      只改父级 .faq-a 的颜色会被它覆盖。
   颜色取 --ink（#4A3F33，对比 10.2）而不是 ink-2/ink-soft：衬线体笔画细，
   偏浅的褐色在小字号下看着"发灰、不清楚"。 */
.faq-a p { padding: 18px 0; color: var(--ink); }

/* ---------------------------------------------------------------- 时间轴 */
.tl-item .tl-card { background: var(--white); border: 1px solid var(--hair); }
.tl-item .tl-year { color: var(--jade-3); }
.tl-item .tl-card h3 { color: var(--jade-2); }
.tl-item::before { background: var(--hair); }

/* ---------------------------------------------------------------- 联系我们 */
.info-card { background: var(--white); border: 1px solid var(--hair); }
.info-card h4 { color: var(--jade-2); }
.info-card .dot { color: var(--gold-mid); }

/* ---------------------------------------------------------------- 页脚 */
/* 原来是深绿 → 改为暖米底 + 顶部金线，与整站同一套浅色语言 */
.site-footer {
  background: var(--cream-2);
  color: var(--ink-soft);
  border-top: 1px solid var(--hair);
}
.site-footer h4 { color: var(--jade-2); letter-spacing: 3px; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--jade-2); }
.site-footer .logo-cn { color: var(--jade-2); }
.site-footer .logo-en { color: var(--gold-mid); }
.site-footer .footer-brand p, .site-footer .footer-brand div { color: var(--ink-soft); }

/* 版权行：比页脚再深一点的米色，金线分隔 */
.copyright {
  background: var(--cream-3);
  border-top: 1px solid var(--hair);
  color: var(--ink-soft);
}
.copyright .icp-line { color: var(--ink-soft); }
.copyright .icp-line:hover { color: var(--jade-3); }
.copyright .icp-line::before { background: var(--hair); }
.site-footer, .copyright { font-family: inherit; }

/* ---------------------------------------------------------------- 细节 */
::selection { background: rgba(168,216,200,.4); }
a { color: var(--jade-3); }
.empty-tip { background: var(--white); border: 1px solid var(--hair); color: var(--ink-soft); }