/* ============================================================
   Stone & Chi —— 全站样式（一般不需要团队编辑）
   品牌色板：方案 D「暖砂 · 锐角」= B 的暖砂底 + A 的 2px 锐角
     实测依据（2026-09-17 抓取 25 站）：
       ① 底色——串珠材料站无彩色占比中位数 66%，暖砂底承接「天然矿石」品类温度；
       ② 圆角——现代珠宝站 Catbird 2px 出现 111 次 / Vrai 2px 56 次 / Otiumberg 直角，
          故全局圆角收到 2px（气质提档），与暖底并不冲突：底色管品类，圆角管档次。
     暖砂主底  #FBF7F0    深褐文字  #2A2318
     赭金主色  #8A6A2F    渐变端    #C29A4A
     苔绿点缀  #4A6B54    陶土强调  #A8452F
     分区底    #F2EBDF    卡片面    #FCF9F4
     边框      rgba(42,35,24,.14)（1px 细线分区，阴影 ≤6%）
     圆角      2026-09-18 由「2px 锐角」改为「软圆角」：
                  --radius 10px（卡片 / 输入框 / 小面板）/ --radius-btn 999px（胶囊按钮）
               改因：Frank 提出「直角改圆角会不会好点」。原 2px 是照搬欧美珠宝站的气质，
               但本店的主体交互是「自己串珠子」的 DIY 工作台，而 builder.css 内部
               早已是 16px 卡 + 胶囊按钮 —— 站内两套圆角语言并存，页面显生硬。
               现在全站收敛到一套：卡片软圆角、按钮胶囊，和设计器同源。
               要回退只需把那两个令牌改回 2px（不要逐个选择器去改）。
   ============================================================ */

:root {
  --bg: #FBF7F0;              /* 暖砂主底（品类温度） */
  --bg-alt: #F2EBDF;          /* 分区交替 */
  --ink: #2A2318;             /* 主文字：深褐 */
  --ink-soft: #7A6E5C;        /* 次级文字 */
  --jade: #8A6A2F;            /* 主品牌色：赭金（单一强调色） */
  --jade-dark: #6E5426;       /* 按下 / 深调 */
  --gold: #C29A4A;            /* 亮金（渐变端 / hover） */
  --cinnabar: #A8452F;        /* 陶土红（警示 / 删除） */
  --line: rgba(42,35,24,.14);
  --white: #FFFFFF;
  --radius: 10px;             /* 软圆角（2026-09-18）：卡片 / 输入框 / 面板 */
  --radius-btn: 999px;        /* 按钮：胶囊。与设计器(.builder-app)的 --b-pill 同源 */
  --shadow: 0 1px 3px rgba(42,35,24,.06);
  --shadow-lg: 0 10px 30px rgba(42,35,24,.10);
  --serif: "Cormorant Garamond", "Noto Serif SC", "Noto Serif JP", serif;
  --sans: "Jost", "PingFang SC", "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", sans-serif;
  /* —— 语义令牌 —— */
  --ink-2: #4A4234;           /* 次级文字（备用） */
  --ink-3: #A79B87;           /* 弱化文字 */
  --accent: #8A6A2F;          /* 统一主色语义 = 赭金 */
  --accent-2: #C29A4A;
  --accent-ink: #FFFFFF;      /* 主色之上的文字（赭金够深，白字可读） */
  --accent-soft: rgba(138,106,47,.10);
  --bg-2: #F2EBDF;
  --surface: #FCF9F4;         /* 卡片 / 弹窗表面（比底更亮一点点浮起） */
  --surface-2: #F5EEE1;       /* 输入框 / 内嵌块 */
  --line-strong: rgba(42,35,24,.26);
  --gold-grad: linear-gradient(135deg,#C29A4A 0%,#8A6A2F 100%);
  --grad-hero: linear-gradient(180deg,#FCF9F4 0%,#F2EBDF 100%);
  --grad-aurora:
     radial-gradient(60% 55% at 22% 18%,rgba(138,106,47,.07),transparent 62%),
     radial-gradient(50% 50% at 80% 28%,rgba(74,107,84,.06),transparent 62%);
  --elev: 0 1px 3px rgba(42,35,24,.06), 0 8px 24px rgba(42,35,24,.06);
  --glass: rgba(252,249,244,.82);
  --glow: 0 0 0 1px rgba(138,106,47,.30), 0 6px 18px rgba(138,106,47,.10);
  --chip-bg: #F3EADA;
  /* —— 页脚：深褐底锚定（保留既有 #fff 白字规则）—— */
  --footer-bg: #2A2318;
  --footer-ink: rgba(255,255,255,.66);
  --footer-gold: #C29A4A;
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ===== Spacing Scale（8pt 网格，唯一间距来源）=====
     铁律：所有纵向间距必须取自下面的标尺，禁止出现 13px / 18px / 26px 这类散值。
     「呼吸感」的技术定义就在这几个令牌里——要调整全站疏密，只改这里。 */
  --s-half: 4px;  /* 半档：仅用于 ≤4px 的贴边距（角标、细分隔线） */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-7: 56px;  --s-8: 64px;
  --s-9: 72px;  --s-10: 80px; --s-11: 88px; --s-12: 96px;

  /* 语义令牌（桌面基准；平板/移动在下方 @media 里整体覆盖）
     2026-09-15 第十五轮：为「一个 section 一屏」下调一档——
     原 9.5vh 在 900px 高的屏上要吃掉 171px，加上内容就把区块顶出屏幕，
     访客滚到一个区块时总看到「第二排卡片被切一半」。现在 6.4vh（900 屏 ≈58px），
     内容整体上移，收进一屏；留白仍在 8pt 标尺上（56/88px）。 */
  --sec-y:        clamp(56px, 6vh, 88px);      /* 区块上下留白 */
  --sec-head-gap: clamp(24px, 3.6vh, 40px);    /* 区块标题与其内容之间的距离 */
  --h2-gap-a:     var(--s-2);                  /* 眉标 → 大标题（亲密性：更近） */
  --h2-gap-b:     var(--s-3);                  /* 大标题 → 说明文字 */
  /* 卡片之间（商品网格 / 五行 / 意图 / 生肖 / 价值卡 / 商品页规格组都取它） */
  --card-gap:     var(--s-4);                  /* 32px：与商品网格现状一致，改档位时全站同步变 */

  /* 页眉横向（2026-09-15 第十二轮）
     原先 .main-nav 写 margin:0 auto，在 flex 容器里会把剩余空间全吞掉，
     实测 logo→导航、导航→按钮组的间距都是 **0**（1180 容器里内容总宽已溢出）。
     改为「容器 gap 定最小呼吸 + nav 用 flex:1 居中」两段式，间距才真正可控。
     ★页眉横向**刻意不跟随疏密档位**：页眉是单行功能条，横向是硬约束——
     1151px 视口下可用宽度只有 1087px，8 个链接 + logo + 按钮组已接近占满，
     airy 档若加大间距会直接把导航挤换行。档位只改页眉高度（见 --header-h）。 */
  --nav-gap:      var(--s-2);   /* 16px：8 个链接在 1151px 视口下的安全值 */
  --header-gap:   var(--s-2);   /* 16px：logo / 导航 / 按钮组 之间的最小呼吸 */
  --header-h:     76px;
}

/* ===== 响应式：只重设令牌，不重写规则 =====
   三断点（桌面 / 平板 ≤1024 / 移动 ≤640），保证 any viewport 下节奏一致且都在 8pt 网格上。 */
@media (max-width: 1024px) {
  :root {
    --sec-y:        clamp(40px, 5.6vh, 72px);
    --sec-head-gap: clamp(24px, 3.2vh, 32px);
    --card-gap:     var(--s-3);
  }
}
@media (max-width: 640px) {
  :root {
    --sec-y:        clamp(32px, 4.2vh, 48px);
    --sec-head-gap: var(--s-3);
    --h2-gap-b:     var(--s-2);
    --card-gap:     var(--s-2);
  }
}

/* ===== 疏密档位（后台「设置 → 外观疏密」切换，改完即生效、无需重新部署）=====
   设计约束：只覆盖「语义令牌 + 卡片内边距」，绝不触碰 .hero / .detail-layout 等首屏结构，
   因此任何档位都不会把首屏主 CTA 顶出视口（第五轮验收立下的硬约束）。
   选择器 html[data-density=…] 特异性高于 :root，无需依赖书写顺序。 */
html[data-density="compact"] {
  --sec-y:        clamp(48px, 6vh, 72px);
  --sec-head-gap: clamp(24px, 3.5vh, 40px);
  --card-gap:     var(--s-2);
  --h2-gap-a:     var(--s-1);
  --h2-gap-b:     var(--s-2);
}
html[data-density="airy"] {
  --sec-y:        clamp(96px, 13vh, 144px);
  --sec-head-gap: clamp(48px, 7vh, 72px);
  --card-gap:     var(--s-6);
  --h2-gap-a:     var(--s-2);
  --h2-gap-b:     var(--s-4);
}
html[data-density="compact"] .product-body   { padding: var(--s-2); }
html[data-density="compact"] .intention-card { padding: var(--s-3); }
html[data-density="compact"] .element-card   { padding: var(--s-3); }
html[data-density="compact"] .zodiac-card    { padding: var(--s-2); }
html[data-density="compact"] .value-card     { padding: var(--s-3); }
html[data-density="airy"] .product-body      { padding: var(--s-4); }
html[data-density="airy"] .intention-card    { padding: var(--s-6) var(--s-5); }
html[data-density="airy"] .element-card      { padding: var(--s-6) var(--s-4) var(--s-5); }
html[data-density="airy"] .zodiac-card       { padding: var(--s-4); }
html[data-density="airy"] .value-card        { padding: var(--s-6); }
/* 页眉高度跟随档位——**只作用于桌面**（≥1151px，导航可见时）。
   移动端页眉若也跟着 airy 档涨到 84px，会白吃掉一屏里最贵的位置。
   横向间距不跟档位，原因见 :root 里 --nav-gap 的注释。 */
@media (min-width: 1151px) {
  html[data-density="compact"] { --header-h: 68px; }
  html[data-density="airy"]    { --header-h: 84px; }
}
/* 宽屏曾试过放宽到 24px，实测放弃：1440 下导航可用宽 717px、24px 间距需求 704px，
   只剩 13px 富余 → 组间视觉间距 23px，**反而小于链接间距 24px**，
   违背亲密性原则（组内间距必须小于组间距，否则三组看不出分组）。
   改回 16px：链接间 16、组间 36~51px，分组才立得起来。 */

/* 日文页字体优先（方案 A · Typography）
   本站是三语同一张页面靠 JS 切语言，main.js 会执行 document.documentElement.lang = LANG，
   所以 <html lang="ja"> 时用 :lang() 把日文字族提到 SC 之前 ——
   否则日文汉字会命中前面的 "Noto Serif SC"，出现「日本字用中文字形」的串台。
   自定义属性只需命中 html 元素即可全站生效（继承）。 */
html:lang(ja) {
  --serif: "Cormorant Garamond", "Noto Serif JP", "Noto Serif SC",
           "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Jost", "Noto Sans JP", "Hiragino Sans", "Yu Gothic",
           "PingFang SC", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 14, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--header-gap);          /* 三段之间的最小呼吸，不再被 nav 的 auto margin 吃光 */
  height: var(--header-h);
}
.logo {
  font-family: var(--serif);
  font-size: 26px; font-weight: 700;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: var(--s-2);
  white-space: nowrap; flex-shrink: 0;
}
.logo .seal {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--jade); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", serif; font-size: 19px;
}
/* flex:1 + 居中 取代 margin:0 auto：剩余空间归 nav，链接在中间对齐，
   两侧各留出 ≥ --header-gap 的呼吸；min-width:0 保证窄屏时能收缩而不是溢出。 */
.main-nav { display: flex; gap: var(--nav-gap); align-items: center; flex: 1; justify-content: center; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.main-nav a {
  font-size: 15px; letter-spacing: 0.06em; color: var(--ink-soft);
  padding: var(--s-1) 0; border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); border-color: var(--gold); }
/* ---- 语种字距（第十三轮）----
   0.06em 的 tracking 是给 Jost 拉丁字母排的；汉字本身方正，再加字距只是白吃宽度。
   实测（1440 / 1151 视口）：
     en 导航内容 718px（容器 718 / 689）——临界，/about 改名 About 后为 680px；
     ja 导航内容 721px（容器 679 / 650）——**溢出 42~57px，首尾两项被压出容器外**，
        「ホーム」实测 left = -43px，这就是用户看到的「日文语言环境下导航栏错乱」。
   两步解决：① 日文标签缩短（见 js/i18n.js）；② 中日文按语种收字距。 */
html[lang="zh"] .main-nav a { letter-spacing: 0.02em; }
html[lang="ja"] .main-nav a { letter-spacing: 0.01em; }
/* 兜底：任何语言下导航都不允许换行或溢出容器 */
.main-nav { flex-wrap: nowrap; }
.cart-link {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff !important;
  padding: var(--s-1) var(--s-3) !important; border-radius: var(--radius);
  border-bottom: none !important;
  font-size: 14px !important;
  transition: background .25s;
}
.cart-link:hover { background: var(--jade); color: var(--accent-ink) !important; }
.cart-count {
  background: var(--gold); color: var(--accent-ink);
  min-width: 20px; height: 20px; border-radius: var(--radius);
  font-size: 12px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 var(--s-1);
}

/* ---------- 首页 Hero ---------- */
.hero {
  padding: clamp(36px, 6vh, 84px) 0 clamp(32px, 5vh, 64px);
  position: relative; overflow: hidden;
}
.hero-cn-bg {
  position: absolute; right: -2%; top: 50%;
  transform: translateY(-50%);
  /* ★2026-09-15：这里原本用 "Noto Serif SC" —— 那是本站体积最大的 CJK 网络字体
     （实测 429ms）。而这个「風」只是 340px 的纯装饰字，却因为尺寸最大被 Chrome
     判成 LCP 元素，等于「最大内容绘制」在等一个装饰字下载完。
     改为**系统 CJK 衬线**：首屏立刻可用，把 LCP 与 CJK 网络字体解耦。
     ★刻意不写 "Noto Serif SC" 兜底 —— 一旦兜底到它，字体加载完还会再 swap 一次，
      等于把 LCP 又拖回去。这里要的就是「永不触发网络字体」。 */
  font-family: "Songti SC", "STSong", "SimSun", "NSimSun",
               "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 340px; font-weight: 700;
  color: var(--jade); opacity: 0.055;
  pointer-events: none; user-select: none; line-height: 1;
}
.hero-inner { position: relative; max-width: 640px; }
/* 分栏 hero 必须用整页宽度：否则被上面的 640px 挤成窄列，h1 疯狂换行 → hero 高达 1100px+ 超出首屏 */
.hero-inner.hero-split { max-width: 1180px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jade); margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--jade); }
.hero h1 { font-size: clamp(32px, 3.9vw, 56px); margin-bottom: clamp(14px, 2.1vh, 26px); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.hero h1 em { font-style: italic; color: var(--jade); }
.hero p.lead { font-size: clamp(15.5px, 1.15vw, 18px); color: var(--ink-soft); max-width: 520px; margin-bottom: clamp(18px, 2.7vh, 32px); }
.hero .eyebrow { margin-bottom: clamp(12px, 1.9vh, 24px); }

/* 首页 Hero 卡（三重命盘封面，2026-09-18） */
.hero-triple-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); box-shadow: 0 6px 24px rgba(120,100,60,.08); position: relative;
}
.hero-triple-card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius); pointer-events: none;
}
.htc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-3); }
.htc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: var(--s-2) 6px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.htc-ico { font-size: 24px; line-height: 1; color: var(--jade); }
.htc-t { font-size: 13px; color: var(--ink); }
.htc-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: var(--s-2); }

/* 按钮：胶囊圆角（--radius-btn）。全站按钮的圆角只在这一处定义，
   所以「直角 ↔ 圆角」永远是一个令牌的事，不用去翻几十个选择器。 */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 16px var(--s-5); border-radius: var(--radius-btn);
  font-size: 15px; letter-spacing: 0.08em;
  cursor: pointer; border: none; font-family: var(--sans);
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.btn-primary { background: var(--jade); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(201,169,97,.30); }
.btn-primary:hover { background: var(--jade-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--jade); color: var(--accent-ink); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--jade); padding: var(--s-2) 0; letter-spacing: 0.1em; }
.btn-ghost:hover { color: var(--jade-dark); }
.btn-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- 分区标题 ---------- */
/* 纵向节奏全部走 :root 的间距令牌（8pt 网格），改一处即全站生效 */
.section { padding: var(--sec-y) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 560px; margin-bottom: var(--sec-head-gap); }
.section-head.center { margin: 0 auto var(--sec-head-gap); text-align: center; }
.section-head h2 { font-size: 44px; margin: var(--h2-gap-a) 0 var(--h2-gap-b); }
.section-head p { color: var(--ink-soft); font-size: 17px; }
.section-head .cn-accent {
  font-family: "Noto Serif SC", serif; color: var(--gold);
  font-size: 15px; letter-spacing: 0.35em;
}

/* ---------- 五行卡片 ---------- */
.element-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--card-gap);
}
.element-card {
  border-radius: var(--radius);
  padding: var(--s-5) 24px 32px;
  text-align: center;
  transition: transform .35s, box-shadow .35s;
  border: 1px solid transparent;
}
.element-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.element-card .glyph {
  font-family: "Noto Serif SC", serif; font-size: 52px; line-height: 1;
  margin-bottom: var(--s-2);
}
.element-card h3 { font-size: 20px; margin-bottom: 8px; }
.element-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 产品卡 ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* 接卡片间距令牌：这样后台换疏密档位时商品网格也会跟着变
     （写死 32px 数值虽合规，但语义上没接令牌，档位就管不到它）。 */
  gap: var(--card-gap);
}
.product-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .35s, box-shadow .35s;
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-img {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-gem {
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset -14px -14px 40px rgba(0,0,0,0.12), 0 20px 40px rgba(0,0,0,0.1);
  position: relative; flex-shrink: 0;
}
.cart-item .thumb .placeholder-gem { width: 62%; }
.placeholder-gem::after {
  content: ""; position: absolute; top: 16%; left: 18%;
  width: 30%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,0.55); filter: blur(4px);
}
.badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow);
}
.badge.limited { background: var(--cinnabar); color: #fff; }
.badge.new { background: var(--jade); color: var(--accent-ink); }
.cert-tag {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 16px; box-shadow: var(--shadow);
}
.product-body { padding: 24px 24px var(--s-3); display: flex; flex-direction: column; flex: 1; }
.product-element {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 8px; display: flex; align-items: center; gap: var(--s-1);
}
.product-element .dot { width: 8px; height: 8px; border-radius: 50%; }
.product-body h3 { font-size: 21px; margin-bottom: var(--s-1); }
.product-body .stone { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.stars-row { color: #c79a4b; font-size: 15px; letter-spacing: 1px; margin: var(--s-half) 0; }
.product-body .stars-row { margin: var(--s-half) 0 var(--s-2); }
.detail-info .stars-row { margin: var(--s-1) 0 16px; }

/* ===== 渐进披露（Progressive Disclosure）：描述默认折叠两行 =====
   目的：把 Add to Cart 拉回首屏（ATF）。实测长描述原本占 ~196px，
   会把主 CTA 顶到首屏之外 —— 首屏看不到购买按钮是最直接的转化损失。 */
.detail-info .lead-wrap { margin: 24px 0 0; }
.detail-info .lead-wrap .lead { margin: 0; }
.detail-info .lead.clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.detail-info .lead.open {
  display: block; overflow: visible; -webkit-line-clamp: unset;
}
.pd-more {
  display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none;
  color: var(--jade); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pd-more:hover { color: #8E7340; }

.stars-row .rv-count { color: var(--ink-soft); font-size: 12.5px; letter-spacing: 0; margin-left: var(--s-1); }
.stars-row.muted { color: var(--ink-soft); }
.gift-btn { width: 100%; justify-content: center; margin: var(--s-2) 0 0; border: 1px solid var(--line); }
.product-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-1);
}
/* 价格恒为一行（第十三轮）
   根因：移动端 .product-foot 允许换行，价格一旦自己折成两行，
   同一排卡片的价格行高度就差 43px（实测「from $368 $776」折行）→ 整排错位。
   nowrap + 不收缩：价格永远一行，长出来的部分让 View 按钮换到下一行去。 */
.product-card .product-foot .price { white-space: nowrap; flex: 0 0 auto; }
.price { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.price s { font-size: 16px; color: var(--ink-soft); font-weight: 400; margin-left: 8px; }
.mini-btn {
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--jade); border: 1.5px solid var(--jade);
  padding: 8px var(--s-2); border-radius: var(--radius);
  transition: background .25s, color .25s;
}
.mini-btn:hover { background: var(--jade); color: var(--accent-ink); }

/* ---------- 筛选条 ---------- */
.filter-bar {
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.filter-chip {
  padding: var(--s-1) var(--s-3); border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--white);
  font-size: 14px; cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s; color: var(--ink-soft);
}
.filter-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.filter-chip:hover { border-color: var(--gold); color: var(--ink); }
.filter-chip.active { background: var(--jade); border-color: var(--jade); color: var(--accent-ink); }

/* ---------- 产品详情 ---------- */
.detail-layout {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px;
  padding: 64px 0 88px; align-items: start;
}
.detail-img {
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* 仅在无图（占位宝石）时锁定正方形；有画廊时不锁，避免缩略图被裁 */
.detail-img:has(.placeholder-gem) { aspect-ratio: 1 / 1; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
/* 左图列吸顶：右侧长文案滚动时图片始终可见，消除左列大片空白 */
.detail-left { position: sticky; top: 88px; align-self: start; }
.detail-info .eyebrow { margin-bottom: var(--s-2); }
.detail-info h1 { font-size: clamp(25px, 2.5vw, 36px); margin-bottom: var(--s-2); }
/* 主行动按钮：与信息列同宽、文字居中，和下方说明/须知框严格左对齐 */
/* 矮屏桌面（1440×900 / 1512×982 等笔记本）：收敛信息列排版，确保主 CTA 进入首屏。
   注意这与「改几个 px 看不出来」不同 —— 按钮进不进首屏是【二值结果】，
   要么点得到、要么点不到，直接影响能否下单，所以值得为它压缩留白。
   高分辨率大屏（高度 >950）不受影响，仍保持舒展排版。 */
@media (min-width: 901px) and (max-height: 950px) {
  .detail-info h1 { font-size: clamp(23px, 1.9vw, 28px); margin-bottom: var(--s-1); }
  .detail-price { font-size: clamp(26px, 1.5vw, 30px); margin: var(--s-2) 0 4px; }
  .detail-info .lead-wrap { margin-top: var(--s-2); }
  .pd-more { margin-top: 4px; }
  .detail-info .stars-row { margin: 4px 0 var(--s-1); }
  .crumbs { margin-bottom: var(--s-1); }
  .variant-box { margin-top: var(--s-1); }
  .intention-chip, .tier-chip { margin-bottom: var(--s-1); }
  .detail-info .stone { margin-bottom: 0; line-height: 1.4; }
}

/* 主 CTA 上方需足够呼吸（≥24px），且与次 CTA 间距 ≥20px ——
   两者均为触控目标，间距不足会提高误触率（Fitts's Law）。 */
.detail-info .buy-btn { display: flex; width: 100%; justify-content: center; margin: var(--s-4) 0 0; }
/* 相邻 CTA 间距需 ≥20px（触控目标过近会提高误触率，Fitts's Law） */
.detail-info .gift-btn { margin-top: var(--s-3); }

/* 矮屏档的 buy-btn 覆盖必须放在基础规则之后，否则同优先级下会被基础规则盖掉 */
@media (min-width: 901px) and (max-height: 950px) {
  /* 主 CTA 上方仍保留 24px（满足「≥24px」下限），把省下的空间让给首屏 */
  .detail-info .buy-btn { margin-top: var(--s-3); }
}
.detail-info .name-cn {
  font-family: "Noto Serif SC", serif; color: var(--ink-soft);
  font-size: 17px; margin-bottom: 24px;
}
.detail-price { font-family: var(--serif); font-size: 36px; font-weight: 700; margin-bottom: var(--s-4); }
.detail-price s { font-size: 20px; color: var(--ink-soft); font-weight: 400; margin-left: var(--s-2); }
.cert-box {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3) 24px;
  display: flex; gap: 16px; align-items: center; margin-bottom: 32px;
}
.cert-box .icon { font-size: 26px; color: var(--gold); }
.cert-box strong { font-size: 14.5px; display: block; }
.cert-box span { font-size: 13px; color: var(--ink-soft); }
.attr-table { width: 100%; border-collapse: collapse; margin: 32px 0; }
.attr-table td {
  padding: var(--s-2) 0; font-size: 15px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.attr-table td:first-child {
  width: 130px; color: var(--ink-soft); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; padding-right: var(--s-3);
}
.fengshui-panel {
  border-left: 3px solid var(--gold);
  background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px var(--s-4); margin: 32px 0;
}
.fengshui-panel h4 { font-size: 18px; margin-bottom: var(--s-1); display: flex; align-items: center; gap: var(--s-1); }
.fengshui-panel p { font-size: 15px; color: var(--ink-soft); }
.zodiac-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s-2); }
.zodiac-tags span {
  font-size: 12.5px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-1) var(--s-2);
  color: var(--ink-soft);
}

/* ---------- 知识页 ---------- */
.guide-element {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px var(--s-6);
  margin-bottom: var(--s-4); display: grid;
  grid-template-columns: 120px 1fr; gap: 40px; align-items: center;
}
.guide-element .big-glyph {
  width: 104px; height: 104px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", serif; font-size: 48px;
}
.guide-element h3 { font-size: 26px; margin-bottom: 8px; }
.guide-element p { color: var(--ink-soft); font-size: 15.5px; }
.guide-element .pair { font-size: 13px; color: var(--gold); letter-spacing: 0.1em; margin-top: var(--s-1); }

.zodiac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: var(--card-gap); }
.zodiac-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3) var(--s-3); text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.zodiac-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.zodiac-card .zi { font-family: "Noto Serif SC", serif; font-size: 32px; color: var(--jade); }
.zodiac-card h4 { font-size: 18px; margin: 8px 0 4px; }
.zodiac-card p { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 关于页 ---------- */
.about-hero { padding: var(--sec-y) 0 var(--s-8); }
.about-hero h1 { font-size: 52px; max-width: 700px; overflow-wrap: anywhere; }
.about-hero h1 em { color: var(--jade); font-style: italic; }
.value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--card-gap); }
.value-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px var(--s-4);
}
.value-card .glyph {
  font-family: "Noto Serif SC", serif; font-size: 34px; color: var(--jade);
  margin-bottom: var(--s-2);
}
.value-card h3 { font-size: 22px; margin-bottom: var(--s-2); }
.value-card p { font-size: 15px; color: var(--ink-soft); }
/* 三元素区块：强制等宽三列（默认 .value-grid 是两列，三卡会变成 2+1 不工整） */
.value-grid.three-up { grid-template-columns: repeat(3, 1fr); }

/* ---------- 购物指南 ---------- */
.faq-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
}
.faq-q {
  padding: var(--s-3) var(--s-4); font-size: 17px; font-family: var(--serif);
  font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-q::after { content: "+"; font-size: 22px; color: var(--gold); transition: transform .3s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a div { padding: 0 var(--s-4) 24px; color: var(--ink-soft); font-size: 15px; }

/* ---------- 购物车 ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; padding: var(--sec-y) 0 var(--sec-y); align-items: start; }
.cart-item {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.cart-item .thumb {
  width: 96px; height: 96px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item h4 { font-size: 18px; margin-bottom: 4px; }
.cart-item .meta { font-size: 13px; color: var(--ink-soft); }
.qty-ctrl { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.qty-ctrl button {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--white);
  cursor: pointer; font-size: 15px; color: var(--ink);
}
.qty-ctrl button:hover { border-color: var(--jade); color: var(--jade); }
.cart-item .line-price { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.cart-item .remove { font-size: 12.5px; color: var(--cinnabar); cursor: pointer; margin-top: 8px; display: inline-block; }
.summary-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5);
  position: sticky; top: 110px;
}
.summary-card h3 { font-size: 24px; margin-bottom: 24px; }
.summary-row {
  display: flex; justify-content: space-between;
  font-size: 15px; padding: var(--s-1) 0; color: var(--ink-soft);
}
.summary-row.total {
  border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-3);
  font-size: 19px; color: var(--ink); font-weight: 600;
}
.summary-card .btn { width: 100%; justify-content: center; margin-top: 24px; }
.trust-line {
  display: flex; gap: var(--s-2); justify-content: center;
  margin-top: var(--s-3); font-size: 12.5px; color: var(--ink-soft);
}
.empty-cart { text-align: center; padding: var(--sec-y) 0; }
.empty-cart .glyph { font-size: 56px; margin-bottom: var(--s-3); opacity: .35; }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--footer-bg); color: var(--footer-ink);
  padding: var(--sec-y) 0 var(--s-5); margin-top: 40px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.site-footer .logo { color: #fff; margin-bottom: var(--s-2); }
.site-footer p { font-size: 14px; line-height: 1.8; }
.site-footer h4 { color: #fff; font-size: 16px; margin-bottom: var(--s-2); letter-spacing: 0.06em; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer li a { font-size: 14px; color: var(--footer-ink); transition: color .25s; }
.site-footer li a:hover { color: var(--footer-gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--s-4); display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-soft);
}

/* ---------- 信任带 ---------- */
.trust-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.trust-item { text-align: center; padding: var(--s-4) 16px; }
.trust-item .icon { font-size: 30px; margin-bottom: var(--s-2); }
.trust-item h4 { font-size: 16px; margin-bottom: var(--s-1); font-family: var(--sans); font-weight: 600; }
.trust-item p { font-size: 13px; color: var(--ink-soft); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hero h1 { font-size: 44px; }
  .element-grid { grid-template-columns: repeat(2,1fr); }
  .detail-layout, .cart-layout { grid-template-columns: 1fr; }
  .detail-img, .summary-card { position: static; }
  .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-band { grid-template-columns: repeat(2,1fr); }
  .main-nav { display: none; }
  .guide-element { grid-template-columns: 1fr; text-align: center; }
  .guide-element .big-glyph { margin: 0 auto; }
}
/* 三元素区块：平板/手机收成单列，避免挤成两列 + 一列 */
@media (max-width: 760px) {
  .value-grid.three-up { grid-template-columns: 1fr; }
}

/* ============================================================
   寓意层组件（Divine Luck Feng Shui）—— 一般不需要团队编辑
   ============================================================ */

/* 意图徽章（产品卡上的 財/安/緣/業/康/慧） */
.intention-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 11.5px; letter-spacing: 0.1em;
  border: 1px solid; border-radius: var(--radius);
  padding: 4px var(--s-2); margin-bottom: var(--s-2);
  background: rgba(255,255,255,.7);
}
/* 意图前缀：品牌色圆点（替代原汉字印章，见 js/main.js intentionLabel 注释） */
.ic-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto; display: inline-block;
}

/* ============================================================
   商品卡内部节奏（第十三轮）—— 首页主推区与集合页共用，必须逐行对齐
   目的：同一排卡片的「名称基线 / 副标题 / 星级 / 价格」落在完全相同的 y 上。
   做法：名称固定两行高度、副标题固定一行省略、星级永远占位（无评价也给灰星）。
   ============================================================ */
.product-card .pc-name {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: var(--s-half);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  /* 固定两行：一行名与两行名占同样高度，整排卡片的后续内容才不会错位 */
  min-height: calc(2 * 1.3em);
}
.product-card .pc-sub {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: var(--s-1);
}
.product-card .product-body .stars-row { min-height: 22px; }

/* 六大意图卡片 */
.intention-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap);
}
.intention-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-4) var(--s-4);
  transition: transform .35s, box-shadow .35s;
  display: block; position: relative; overflow: hidden;
}
.intention-card::after {
  content: ""; position: absolute; right: -30px; bottom: -40px;
  font-family: "Noto Serif SC", serif; font-size: 130px; opacity: .05;
  line-height: 1; pointer-events: none;
}
.intention-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.intention-card .glyph {
  font-family: "Noto Serif SC", serif; font-size: 40px; line-height: 1; margin-bottom: 16px;
}
.intention-card h3 { font-size: 22px; margin-bottom: var(--s-1); }
.intention-card .bagua { font-size: 12px; letter-spacing: 0.14em; color: var(--gold); margin-bottom: var(--s-2); }
.intention-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }

/* 八卦方位盘 */
.bagua-wrap {
  display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: center;
}
.bagua-compass {
  width: 320px; height: 320px; position: relative;
  border-radius: 50%;
  /* 浅瓷盘：原深盘(#1B1830/#0E0C14)配 --ink 深字会完全看不见，且与纯白站点割裂。 */
  background: radial-gradient(circle at 50% 45%, #FCF9F4, #F2EBDF 70%);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.9), var(--shadow);
}
.bagua-compass .center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--jade); color: var(--accent-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", serif; font-size: 30px; line-height: 1;
}
.bagua-compass .center small { font-size: 10px; letter-spacing: .14em; opacity: .85; margin-top: 4px; }
.bagua-compass .node {
  position: absolute; width: 84px; margin-left: -42px; margin-top: -30px;
  text-align: center; font-size: 12px; color: var(--ink-soft);
}
.bagua-compass .node .zi { font-family: "Noto Serif SC", serif; font-size: 22px; color: var(--ink); display: block; }
.bagua-compass .node .ar { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

.bagua-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.bagua-row {
  border-bottom: 1px solid var(--line); padding: var(--s-2) 0;
  display: flex; gap: var(--s-2); align-items: baseline;
}
.bagua-row .zi {
  font-family: "Noto Serif SC", serif; font-size: 22px; color: var(--jade); width: 32px; flex-shrink: 0;
}
.bagua-row h4 { font-size: 16px; font-family: var(--sans); font-weight: 600; }
.bagua-row p { font-size: 13px; color: var(--ink-soft); }

/* 产品页寓意块 */
.meaning-block {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-4) 32px; margin: var(--s-4) 0;
}
.meaning-block .label {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-1);
}
.meaning-block p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.8; }
.reminder-line {
  font-family: var(--serif); font-size: 22px; font-style: italic;
  color: var(--ink); line-height: 1.5; padding: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: var(--s-4) 0;
}

/* 仪式三步 */
.ritual-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
.ritual-step { text-align: center; padding: var(--s-4) var(--s-3); }
.ritual-step .num {
  font-family: var(--serif); font-size: 42px; color: var(--gold); line-height: 1; margin-bottom: var(--s-2);
}
.ritual-step h4 { font-size: 19px; margin-bottom: var(--s-1); font-family: var(--serif); font-weight: 600; }
.ritual-step p { font-size: 14.5px; color: var(--ink-soft); }

/* 免责声明（合规必备，克制语气） */
.disclaimer {
  text-align: center; font-size: 12.5px; color: var(--ink-soft);
  padding: var(--s-4) 0 0; max-width: 640px; margin: 0 auto; line-height: 1.7;
}

@media (max-width: 960px) {
  .intention-grid, .ritual-steps { grid-template-columns: 1fr; }
  .bagua-wrap { grid-template-columns: 1fr; }
  .bagua-compass { margin: 0 auto; }
  .bagua-list { grid-template-columns: 1fr; }
}

/* ============================================================
   多语言版新增组件（一般不需要团队编辑）
   ============================================================ */

/* ---- 语言下拉菜单（多语言） ---- */
.lang-dd { position: relative; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 8px var(--s-2); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .05em;
  transition: border-color .2s, color .2s;
}
.lang-dd-btn:hover { border-color: var(--jade); color: var(--jade); }
.lang-dd-btn .caret { font-size: 9px; color: var(--ink-soft); transition: transform .25s; }
.lang-dd.open .lang-dd-btn { border-color: var(--jade); color: var(--jade); }
.lang-dd.open .lang-dd-btn .caret { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 186px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 300;
  display: none;
}
.lang-dd.open .lang-dd-menu { display: block; }
.lang-dd-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  width: 100%; text-align: left; padding: var(--s-1) var(--s-2);
  border: none; background: none; border-radius: var(--radius);
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.lang-dd-menu button:hover { background: var(--surface-2); color: var(--jade); }
.lang-dd-menu button.on { color: var(--jade); font-weight: 500; }
.lang-dd-menu button.on::after { content: "✓"; font-size: 12px; }

/* ---- 汉堡菜单（手机端） ---- */
.menu-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-1); width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 17px; height: 1.7px; background: var(--ink); border-radius: var(--radius); }
.mobile-menu { display: none; }

/* ---- 页头区 ---- */
/* 页面头也是区块：必须走 --sec-y，否则后台的疏密档位管不到它
   （72px 恰好在 8pt 网格上，所以机械化归拢时会漏掉这类"数值合规但语义没接令牌"的写法）。 */
.page-head { padding: var(--sec-y) 0 var(--s-1); }
.page-head h1 { font-family: var(--serif); font-size: 54px; font-weight: 600; line-height: 1.15; }
.page-head .lead { max-width: 640px; font-size: 17px; color: var(--ink-soft); margin-top: var(--s-2); line-height: 1.75; }
/* 移动端只调字号；纵向留白交给 :root 的 --sec-y 断点覆盖，不在这里重复写值 */
@media (max-width: 640px) { .page-head h1 { font-size: 36px; } }

/* ---- 筛选条 ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-3) 40px; align-items: center; }
.filter-group { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.filter-label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.filter-right { margin-left: auto; }
.sort-select { font-family: var(--sans); font-size: 13px; padding: 8px var(--s-2);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
.count { font-size: 13px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); font-size: 13px; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  padding: var(--s-1) var(--s-2); border-radius: var(--radius); transition: .2s; }
.chip:hover { border-color: var(--jade); color: var(--jade); }
.chip.on { background: var(--jade); border-color: var(--jade); color: var(--accent-ink); }
/* 选中态原先靠 .chip.on b{color:#fff} 把汉字印章刷白；
   第十三轮改成色点前缀后，选中时同样把点刷白，保证对比度。 */
.chip.on .ic-dot { background: #fff !important; }

/* ---- 产品卡补充 ---- */
.spec-line { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .02em; }
.tier-chip { display: inline-block; font-size: 11px; letter-spacing: .1em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-half) var(--s-1); margin-bottom: var(--s-1); }
.empty-note { font-size: 16px; color: var(--ink-soft); padding: var(--sec-y) 0; text-align: center; width: 100%; }

/* ---- 产品详情 ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 8px; align-items: start; }
.detail-grid > div { min-width: 0; }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .detail-left { position: static; }
  /* 加入购物车吸底常驻条：单列布局(≤900)下画廊堆顶，按钮吸底常驻免下滑即可点（仅产品页 .detail-info 内） */
  .detail-info .buy-btn {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    margin: 0; border-radius: 0; font-size: 16px;
    /* iPhone 底部 Home Indicator 安全区：否则系统横条会压住按钮 */
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -3px 14px rgba(20,18,15,.18);
  }
  /* 防止吸底条盖住页脚内容（同样计入安全区）
     ⚠️ 只对**没有底部标签栏**的页面生效 —— 即商品页的吸底购买条、设计器页。
     有标签栏的页面由 app.css 的 `body.ax-has-tabbar{padding-bottom:…}` 统一让位，
     两处都留着会白多出整整 56px 空白（2026-09-17 实测：body 56 + footer 56，而标签栏只有 56）。
     注：JS 挂标签栏时才加 .ax-has-tabbar，所以这条选择器在首帧是对的，
     最坏情况也只在页脚（首屏外）发生一次可忽略的重排。 */
  body:not(.ax-has-tabbar) .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
.crumbs { font-size: 12.5px; color: var(--ink-soft); margin-bottom: var(--s-2); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--jade); }
#productDetail h1 { overflow-wrap: anywhere; word-break: break-word; }
.detail-price { font-family: var(--serif); font-size: 38px; margin: var(--s-2) 0 var(--s-1); }
.detail-price s { font-size: 22px; color: var(--ink-soft); margin-left: var(--s-1); }
.spec-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 24px 0 8px; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 40%; font-weight: 500; color: var(--gold); font-size: 12.5px; letter-spacing: .08em; }
.spec-table td { color: var(--ink-soft); }
.btn-lg { padding: 16px 40px; font-size: 15px; margin-top: var(--s-3); }
.note-line { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-top: var(--s-2); }
/* CTA 区整体留白：按钮与说明文字不再贴边，往下有呼吸感 */
.detail-info .gift-btn + .note-line { margin-top: var(--s-2); }
.detail-info .note-line:last-of-type { margin-bottom: var(--s-1); }
.link-btn { background: none; border: none; padding: 0; margin-top: 8px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--cinnabar); }
.cert-no { margin-top: var(--s-2); font-size: 13px; color: var(--ink-soft); }
.cert-no a { color: var(--jade); text-decoration: none; margin-left: var(--s-1); }
.cert-no a:hover { text-decoration: underline; }

/* ---- 产品页纵向节奏：随全站统一的 8pt 间距标尺（见 :root 的 --sec-y 等令牌） ----
   2026-09-14：原先这里是一套「只管商品页」的散值覆盖值，属于范围错误（Scope Error）——
   你要的呼吸感是全站级的，所以改为继承全局令牌，不再单独特例化。 */
#productDetail .detail-info { padding-bottom: var(--s-1); }
#productDetail .value-grid { gap: var(--card-gap); }

/* ---- 购物车 ---- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-thumb { width: 96px; }
.cart-thumb .placeholder-gem { width: 76px; aspect-ratio: 1; border-radius: 50%; }
.cart-thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }
.cart-qty { white-space: nowrap; }
.cart-qty button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius); cursor: pointer; font-size: 15px; color: var(--ink); }
.cart-qty button:hover { border-color: var(--jade); color: var(--jade); }
.cart-qty span { display: inline-block; min-width: 30px; text-align: center; font-size: 14px; }
.cart-price { text-align: right; font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.cart-summary { margin-left: auto; margin-top: 32px; width: 100%; max-width: 400px; }
.cart-summary .line { display: flex; justify-content: space-between; padding: var(--s-1) 0;
  font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cart-summary .line.total { border-bottom: none; border-top: 2px solid var(--ink);
  color: var(--ink); font-family: var(--serif); font-size: 22px; padding-top: 16px; margin-top: 4px; }
.cart-summary .btn { width: 100%; text-align: center; margin-top: var(--s-2); }
.cart-summary .btn-ghost { margin-top: var(--s-1); }
.empty-cart { text-align: center; padding: var(--sec-y) 0; }
.empty-cart h2 { font-family: var(--serif); font-size: 30px; margin-bottom: var(--s-1); }
.empty-cart p { color: var(--ink-soft); margin-bottom: var(--s-4); }

/* ---- 页脚（多语言版） ---- */
.footer-top { display: grid; grid-template-columns: 1.1fr 2.6fr 1.1fr; gap: 48px; padding-bottom: var(--s-6); }
.footer-brand p { font-size: 13.5px; color: var(--ink-soft); margin-top: var(--s-2); line-height: 1.75; max-width: 260px; }
.pay-note { margin-top: 16px; font-size: 11.5px; letter-spacing: .06em; color: var(--ink-soft); line-height: 1.7; }

/* 页脚关税短提示（2026-09-15）：全站可见，可点进配送页看详情。
   和上一条付款说明挨着显示，所以把 16px 的间隔收到 4px，读起来像一句话的两行。 */
.site-footer .pay-note + .ft-duty { margin-top: 4px; }
.site-footer .ft-duty a { color: var(--ink-soft); text-decoration: underline;
  text-decoration-color: rgba(207,199,186,.4); text-underline-offset: 3px; transition: color .25s; }
.site-footer .ft-duty a:hover { color: var(--gold); text-decoration-color: currentColor; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.footer-cols h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 500; }
.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: var(--s-1); }
.footer-cols a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; transition: .2s; }
.footer-cols a:hover { color: var(--jade); }
.footer-news h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-2); font-weight: 500; }
.footer-news p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }
.news-form { display: flex; flex-direction: column; gap: var(--s-1); }
.news-form input { padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--sans); font-size: 13.5px; background: var(--surface); }
.news-form input:focus { outline: none; border-color: var(--jade); }
.news-form button { padding: var(--s-1); border: none; border-radius: var(--radius); background: var(--jade);
  color: var(--accent-ink); font-family: var(--sans); font-size: 13.5px; cursor: pointer; transition: .2s; }
.news-form button:hover { background: var(--jade-dark); }
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--s-5); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---- 知识页 ---- */
.five-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
@media (max-width: 1000px) { .five-grid { grid-template-columns: repeat(2, 1fr); } }
.bagua-list.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .bagua-list.two-col { grid-template-columns: 1fr; } }
.prose { max-width: 760px; }
.prose p { font-size: 17px; line-height: 1.9; color: var(--ink-soft); margin-bottom: var(--s-3); }
.closing-quote { font-family: var(--serif); font-size: 24px; font-style: italic; color: var(--jade); line-height: 1.6; }
.faq-list { max-width: 780px; }
.faq-list h2 { font-family: var(--serif); font-size: 30px; margin-bottom: var(--s-3); }
.faq-list details { border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
.faq-list summary { cursor: pointer; font-size: 16.5px; font-weight: 500; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--gold); font-size: 20px; line-height: 1; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin-top: var(--s-2); font-size: 15px; color: var(--ink-soft); line-height: 1.8; padding-right: 40px; }

/* ============================================================
   2026-09 改版新增组件（多规格 / 评价 / 优惠券 / 故事 / 搜索）
   ============================================================ */

/* ---- 商品搜索栏 ---- */
.shop-search { flex: 1 1 100%; }
.shop-search input {
  width: 100%; max-width: 460px;
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  transition: border-color .25s;
}
.shop-search input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(47,107,79,.08); }

/* ---- 多规格选择（产品详情） ---- */
.variant-box { margin: var(--s-3) 0 var(--s-1); }
.variant-box .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-1); font-weight: 500; }
/* 规格改为等宽网格而非「按内容撑开 + 换行」：
   原来的 flex-wrap 让每个按钮按文案长度撑开，12 个规格会排成 6 行（~434px），
   把 Add to Cart 顶到首屏之外。改网格后行数可减少一半。 */
.variant-btns {
  /* auto-fit（不是 auto-fill）：列数随项目数收缩，
     5 个短标签（8mm/10mm…）能排成一行而不是两行，显著压缩首屏占用。 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-1);
}
.variant-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-half);
  min-width: 0; width: 100%; padding: var(--s-1) var(--s-2);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: .2s; font-family: var(--sans);
}
/* 多规格（>6）时改用下拉选择器，避免多行按钮把主 CTA 顶出首屏 */
.variant-select {
  width: 100%; min-height: 48px; padding: var(--s-2) var(--s-2);
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6257' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.variant-select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(47,107,79,.12); }
.variant-btn:hover { border-color: var(--jade); }
.variant-btn.on { border-color: var(--jade); background: rgba(47,107,79,.06);
  box-shadow: 0 0 0 1px var(--jade) inset; }
.variant-btn .vlabel { font-size: 13.5px; color: var(--ink); font-weight: 500; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }
.variant-btn .vprice { font-family: var(--serif); font-size: 16px; color: var(--jade); }
.variant-btn .vprice s { font-size: 12px; color: var(--ink-soft); margin-left: var(--s-1); }
.variant-btn.on .vprice s { color: var(--ink-soft); }
.variant-btn:disabled { opacity: .45; cursor: not-allowed; }
.variant-btn .vimg { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); margin-bottom: var(--s-half); }
.variant-btn.on .vimg { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(47,107,79,.25); }

/* ---- 八卦标签（产品详情 / 列表） ---- */
.bagua-tag { display: inline-flex; align-items: center; gap: var(--s-half); margin: var(--s-half) var(--s-1) var(--s-half) 0;
  padding: var(--s-half) var(--s-1); border-radius: var(--radius); background: rgba(176,141,76,.1);
  border: 1px solid rgba(176,141,76,.32); color: #8E7340; font-size: 12.5px; line-height: 1.4; }
.bagua-tag b { color: var(--gold); font-size: 14px; }

/* ---- 列表卡片起价 ---- */
.price .from { font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft);
  letter-spacing: .04em; margin-right: var(--s-half); }
.price s { color: var(--ink-soft); font-size: .78em; margin-left: var(--s-1); }

/* ---- 买家评价 ---- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3) 24px; box-shadow: var(--shadow); }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.review-top b { font-size: 14.5px; }
.review-date { font-size: 12px; color: var(--ink-soft); margin: 4px 0 var(--s-1); letter-spacing: .05em; }
.review-card p:not(.review-date) { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; }
.stars { color: var(--gold); letter-spacing: .12em; font-size: 15px; white-space: nowrap; }

/* ---- 购物须知 ---- */
.notice-box { background: rgba(176,141,76,.07); border: 1px solid rgba(176,141,76,.28);
  border-radius: var(--radius); padding: var(--s-3) var(--s-3); margin-top: var(--s-4); }
.notice-box h4 { font-size: 17px; color: var(--gold); margin-bottom: var(--s-1); letter-spacing: .03em; }
.notice-box ul { padding-left: var(--s-2); }
.notice-box li { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 4px; }

/* ---- 关税与清关（DDU）2026-09-15 ----
   比旁边的「购物须知」压重一档：这一条直接决定包裹能否送达、钱会不会退，
   视觉上不跳出来的话，等于没告知。 */
.notice-box.duty-box { border-color: rgba(176,141,76,.55); background: rgba(176,141,76,.11); }
.duty-box .duty-lead { font-size: 13.5px; color: var(--ink); font-weight: 500;
  margin-bottom: var(--s-1); line-height: 1.75; }
.duty-box li b { color: var(--ink); }
.duty-box .duty-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.8;
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed rgba(176,141,76,.35);
  font-style: italic; }

/* ---- 优惠券 ---- */
.coupon-box { display: flex; gap: var(--s-1); margin-top: var(--s-3); align-items: center; }
.coupon-box input { flex: 1; height: 48px; padding: 0 var(--s-2); border: 1px solid var(--line);
  border-radius: var(--radius); font-family: var(--sans); font-size: 14px; background: var(--surface);
  text-transform: uppercase; letter-spacing: .06em; }
.coupon-box input:focus { outline: none; border-color: var(--jade); }
/* 优惠券「应用」按钮要豁免 .cart-summary .btn 的满宽 + margin-top:18px，
   否则会被推下 18px 并撑宽挤扁输入框（两者高度/中线对不上） */
.cart-summary .coupon-box .btn { width: auto; margin-top: 0; height: 48px; padding: 0 var(--s-3); flex: 0 0 auto; font-size: 13.5px; }
.coupon-msg { font-size: 13px; margin-top: 8px; color: var(--jade); min-height: 20px; }
.coupon-msg.bad { color: var(--cinnabar); }
.coupon-line span { color: var(--jade) !important; }

/* ---- 故事分享页 ---- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; }
.story-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.story-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
.story-meta time { font-size: 12px; color: var(--ink-soft); letter-spacing: .05em; }
.story-cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px var(--s-2); border-radius: var(--radius); font-weight: 500; }
.story-cat.buyer { background: rgba(47,107,79,.1); color: var(--jade); }
.story-cat.stone { background: rgba(176,141,76,.12); color: var(--gold); }
.story-cat.place { background: rgba(179,74,58,.1); color: var(--cinnabar); }
.story-card h3 { font-size: 21px; margin-bottom: var(--s-1); }
.story-ex { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 16px; }
.story-card details summary { cursor: pointer; font-size: 13.5px; color: var(--jade);
  font-weight: 500; list-style: none; }
.story-card details summary::-webkit-details-marker { display: none; }
.story-card details summary::after { content: " ↓"; }
.story-card details[open] summary::after { content: " ↑"; }
.story-body { margin-top: var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.story-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; margin-bottom: var(--s-2); }
.story-product { display: inline-block; margin-top: 4px; font-size: 13.5px;
  color: var(--gold); font-weight: 500; }

/* ---- FAQ 联系行 ---- */
.more-questions { margin-top: var(--s-4); font-size: 15px; color: var(--ink-soft); }
.more-questions a { color: var(--jade); border-bottom: 1px solid rgba(47,107,79,.35); }

/* ---- 定制表单 ---- */
.custom-form label { display: block; margin-bottom: var(--s-3); }
.custom-form label span { display: block; font-size: 13px; letter-spacing: .08em;
  color: var(--gold); margin-bottom: 8px; font-weight: 500; }
.custom-form input, .custom-form textarea {
  width: 100%; padding: var(--s-2) 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-family: var(--sans); font-size: 15px; color: var(--ink);
  transition: border-color .25s;
}
.custom-form input:focus, .custom-form textarea:focus {
  outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(47,107,79,.08); }

/* ---- 生肖/星座卡内文字微调 ---- */
#starGrid .zodiac-card .zi { font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; color: var(--jade); }
#starGrid .zodiac-card h4 { font-family: var(--sans); font-size: 13px; color: var(--gold);
  letter-spacing: .04em; margin: var(--s-1) 0 4px; }

@media (max-width: 640px) {
  .review-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .coupon-box { flex-direction: column; align-items: stretch; }
  .cart-summary .coupon-box .btn { width: 100%; height: 48px; }
  .about-hero h1 { font-size: 34px; }
}

/* ============================================================
   2026-09-09 手机端适配 + 汉堡菜单（一般不需要团队编辑）
   ============================================================ */

@media (max-width: 1150px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  /* 高度收一档（原写死 62px，不在 8pt 标尺上，改为令牌 + 64px）；
     gap 已由 :root 的 --header-gap 提供，这里不再重复写值。 */
  :root { --header-h: 64px; }
  .header-inner { height: var(--header-h); }
  .cart-link { padding: 8px var(--s-2) !important; font-size: 13px !important; }
  .mobile-menu { display: block; max-height: 0; overflow: hidden;
    background: var(--surface); transition: max-height .35s ease; }
  .mobile-menu.open { max-height: 620px; border-top: 1px solid var(--line);
    box-shadow: var(--shadow); }
  .mobile-menu .mobile-nav a {
    display: block; padding: var(--s-2) 24px; font-size: 15px; color: var(--ink);
    border-bottom: 1px solid var(--line); letter-spacing: .04em;
  }
  .mobile-menu .mobile-nav a.active { color: var(--jade); }
  .mobile-menu .mobile-nav a:hover { background: var(--surface-2); }
  .mobile-lang { padding: 16px 24px var(--s-3); }
}

@media (max-width: 480px) {
  .logo { font-size: 18px; gap: 8px; }
  .logo .seal { width: 28px; height: 28px; font-size: 15px; }
  .lang-dd-btn { padding: var(--s-1) var(--s-1); gap: 4px; }
  .lang-dd-btn .lang-cur { display: none; }
  .cart-link { padding: 8px var(--s-2) !important; font-size: 12.5px !important; }
  .page-head h1 { font-size: 28px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 var(--s-2); }
  /* Hero 压缩：让「文案 + 测验卡」在手机上一屏放下（含 63px 头部） */
  .hero { padding: var(--s-3) 0 24px; }
  .hero-cn-bg { font-size: 170px; }
  .hero .eyebrow { font-size: 11.5px; letter-spacing: .16em; gap: 8px; margin-bottom: var(--s-1); }
  .hero .eyebrow::before { width: 22px; }
  .hero h1 { font-size: 27px; margin-bottom: var(--s-2); }
  .hero p.lead { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
  /* 封面只剩一个 CTA（2026-09-18），不再分两列 —— 分两列会把它挤成半宽的窄条 */
  .hero .btn-row { display: block; }
  .hero .btn-row .btn { justify-content: center; width: 100%; padding: var(--s-2) var(--s-3); font-size: 14px; }
  .hero-quiz-card { padding: 16px var(--s-2) var(--s-2); }
  .hero-quiz-card .q-progress { margin-bottom: var(--s-2); }
  .hero-quiz-card .q-step { font-size: 11px; margin-bottom: var(--s-1); }
  .hero-quiz-card .q-title { font-size: 18px; margin-bottom: var(--s-1); }
  .hero-quiz-card .q-opts.compact { grid-template-columns: 1fr 1fr; gap: var(--s-1); }
  .hero-quiz-card .q-opts.compact .q-opt { padding: 8px var(--s-1); font-size: 13px; gap: 8px; }
  .hero-quiz-card .q-opts.compact .q-opt .g { width: 24px; height: 24px; font-size: 13px; }
  .page-head h1 { font-size: 34px; line-height: 1.22; }
  .btn { padding: var(--s-2) var(--s-3); font-size: 14px; }
  /* .section 的纵向留白已统一由 :root 令牌 --sec-y 控制（含本断点覆盖），
     此处不再重复定义，否则会绕过 8pt 间距标尺。 */
  .section-head h2 { font-size: 29px; margin: var(--s-2) 0 var(--s-2); }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
  .detail-price { font-size: 30px; }
  .bagua-compass { width: 250px; height: 250px; }
  .filter-bar { gap: var(--s-2) 0; }
  .sort-select { width: 100%; }
  .filter-right { margin-left: 0; width: 100%; }
  .shop-search input { max-width: none; }

  /* 购物车行 → 双列堆叠（小图 + 信息） */
  .cart-table, .cart-table tbody { display: block; }
  .cart-table tr {
    display: grid; grid-template-columns: 64px 1fr; gap: var(--s-half) var(--s-2);
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .cart-table td { border: none; padding: var(--s-half) 0; }
  .cart-table td.cart-thumb { grid-column: 1; grid-row: 1 / 4; width: auto; }
  .cart-table td.cart-thumb img, .cart-table td.cart-thumb .placeholder-gem {
    width: 64px; height: 64px; }
  .cart-table td.cart-qty, .cart-table td.cart-price { grid-column: 2; }
  .cart-price { font-size: 17px; }
  .cart-summary { max-width: none; }

  .spec-table th { width: 38%; }
  .trust-band { grid-template-columns: 1fr 1fr; gap: var(--s-1); }
  .trust-item { padding: var(--s-3) 8px; }
  .trust-item .icon { font-size: 24px; margin-bottom: 8px; }
  .ritual-steps .num { font-size: 22px !important; }

  /* 商品卡底部：窄屏价格+按钮改为可换行，杜绝「View」按钮被挤出视口（#3 显示 bug） */
  .product-body { padding: 16px var(--s-2) var(--s-2); }
  .product-foot { flex-wrap: wrap; gap: 8px var(--s-1); }
  .price { font-size: 20px; }
  .mini-btn { flex: 1 1 auto; text-align: center; padding: var(--s-1) 0; margin-top: var(--s-half); }
  /* 第十三轮：窄屏下价格永远独占一行（flex-basis 100%），按钮永远第二行。
     否则短价格（from $60 $240）会和按钮挤在同一行、长价格（from $368 $776）才换行，
     同一排两张卡的价格行高度差 43px —— 这就是移动端看起来最乱的一处。 */
  .product-card .product-foot .price,
  .product-card .product-foot .mini-btn { flex: 1 1 100%; }
}

/* ===== 客户评价表单（2026-09-09 新增） ===== */
.review-form{max-width:640px;margin-top: var(--s-4);padding: var(--s-3) 24px;background: var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.review-form h4{font-family:var(--serif);font-size:19px;margin-bottom:12px}
.rv-row{display:flex;gap: var(--s-1);margin-bottom: var(--s-1);flex-wrap:wrap}
.rv-row input{flex:1;min-width:180px;padding: var(--s-1) var(--s-2);border:1px solid var(--line);border-radius: var(--radius);font-size:14px;font-family:inherit}
.rv-row select{padding: var(--s-1) var(--s-2);border:1px solid var(--line);border-radius: var(--radius);font-size:14px;background: var(--surface);font-family:inherit}
.review-form textarea{width:100%;padding: var(--s-1) var(--s-2);border:1px solid var(--line);border-radius: var(--radius);font-size:14px;font-family:inherit;line-height:1.7;resize:vertical;margin-bottom:12px}
.review-form input:focus,.review-form textarea:focus,.review-form select:focus{outline:none;border-color:var(--jade)}
.rv-note{font-size:12px;color:var(--ink-soft);margin-top:10px}
.rv-msg{font-size:13.5px;margin-top:8px}
.story-comments{margin-top:16px;padding-top: var(--s-2);border-top:1px dashed var(--line)}
@media (max-width:640px){.review-form{padding:18px 16px}}

/* ==================== 首屏 Quiz 钩子（2026-09-09） ==================== */
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap: var(--s-7);align-items:center}
.hero-copy{max-width:560px}
.hero-quiz-card{background: var(--surface);border:1px solid var(--line);border-radius: var(--radius);padding: var(--s-3) var(--s-3) var(--s-3);
  box-shadow:0 20px 54px rgba(28,38,32,.13);position:relative}
.hero-quiz-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(0,0,0,.05);border-radius: var(--radius);pointer-events:none}

/* Quiz 组件 */
.q-progress{height:4px;background:var(--line);border-radius: var(--radius);overflow:hidden;margin-bottom:20px}
.q-progress i{display:block;height:100%;background:var(--jade);transition:width .35s}
.q-step{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--jade);margin-bottom:9px}
.q-title{font-size:25px;margin-bottom:8px;font-family:var(--serif);line-height:1.3}
.q-hint{font-size:14px;color:var(--ink-soft);margin-bottom: var(--s-3);line-height:1.75}
.q-opts{display:grid;gap:9px}
.q-opts.compact{gap:7px}
.q-opt{display:flex;align-items:center;gap: var(--s-1);padding: var(--s-2) var(--s-2);border:1px solid var(--line);border-radius: var(--radius);
  background: var(--surface);cursor:pointer;text-align:left;font-family:inherit;font-size:15px;transition:.18s;width:100%;line-height:1.45}
.q-opt:hover{border-color:var(--jade);background: var(--surface-2);transform:translateX(3px)}
.q-opts.compact .q-opt{padding: var(--s-1) var(--s-2);font-size:14.5px}
.q-opt .g{width:32px;height:32px;border-radius: var(--radius);background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif SC",serif;font-size:16px;color:var(--jade);flex-shrink:0}
.q-opts.compact .q-opt .g{width:29px;height:29px;font-size:15px}
.q-result{background: var(--surface);border:1px solid var(--line);border-radius: var(--radius);padding: var(--s-4) var(--s-4);box-shadow:var(--shadow)}
.q-result.compact{padding:0;border:none;box-shadow:none;background:none}
.q-zi{font-family:"Noto Serif SC",serif;font-size:52px;color:var(--jade);line-height:1;margin-bottom:4px}
.q-res-dir{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.q-res-title{font-size:26px;font-family:var(--serif);margin-bottom: var(--s-1);line-height:1.3}
.q-res-line{font-size:15.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.8}
.q-meta{display:flex;gap: var(--s-1);flex-wrap:wrap;margin-bottom:18px}
.q-chip{font-size:12.5px;background:var(--bg-alt);border-radius: var(--radius);padding: var(--s-1) var(--s-2);color:var(--ink-soft)}
.q-picks{display:grid;grid-template-columns:repeat(3,1fr);gap: var(--s-1);margin:18px 0}
.q-pick{border:1px solid var(--line);border-radius: var(--radius);padding: var(--s-2) var(--s-1);text-align:center;background: var(--surface-2);transition:.18s}
.q-pick:hover{border-color:var(--jade);background: var(--surface-2);transform:translateY(-2px)}
.q-pick .nm{font-size:13px;font-weight:600;margin-bottom: var(--s-half);line-height:1.4}
.q-pick .pr{font-size:13px;color:var(--jade)}
  /* 测石馆结果分享（2026-09-14）：结果图 + 分享链接 */
  .q-share{display:flex;gap:var(--s-2,16px);justify-content:center;flex-wrap:wrap;margin-top:var(--s-2,16px)}
  .q-share .btn{min-height:44px}
  .q-share-hint{text-align:center;font-size:13px;color:var(--ink-soft);margin:var(--s-1,8px) 0 0}
.q-disclaimer{font-size:11.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top: var(--s-2);margin-top: var(--s-2);line-height:1.7}
.q-actions{display:flex;gap: var(--s-1);flex-wrap:wrap;margin-top:6px}

/* ==================== 页脚社交图标 ==================== */
.social-row{display:flex;align-items:center;gap: var(--s-1);margin-top:16px;flex-wrap:wrap}
.soc-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px}
.soc{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);background: var(--surface);transition:.2s}
.soc:hover{background:var(--jade);border-color:var(--jade);color:var(--accent-ink);transform:translateY(-2px)}
.soc svg{display:block}

/* ==================== 商品图组画廊 ==================== */
.gal{display:flex;flex-direction:column;gap: var(--s-2);width:100%}
.gal-main{border-radius: var(--radius);overflow:hidden;background: var(--surface);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  /* 让主图+缩略图一屏可见：按视口高度收口，桌面/移动通用（避免整组图超出首屏） */
  max-height:calc(100vh - 215px);max-width:min(100%, calc(100vh - 215px));margin-inline:auto}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.gal-th{flex:0 0 auto;width:62px;height:62px;border-radius: var(--radius);overflow:hidden;border:2px solid transparent;background: var(--surface);padding:0;cursor:pointer;opacity:.72;transition:.18s}
.gal-th:hover{opacity:1}
.gal-th.on{border-color:var(--jade);opacity:1}
.gal-th img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 画廊左右箭头 + 张数计数（2026-09-15 第十二轮） ----------
   硬约束：箭头一律 position:absolute —— 不进入文档流，因此不会给 .gal-main 增加
   任何尺寸，主图该多大还是多大（Frank 明确要求「不放大图片」）。
   一旦改成 flex/grid 里的兄弟节点，图片容器就会被挤窄或撑高，前功尽弃。 */
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3;
  box-shadow:0 2px 10px rgba(28,24,18,.18);
  opacity:0; transition:opacity .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.gal-prev{left:var(--s-2)} .gal-next{right:var(--s-2)}
.gal-main:hover .gal-nav, .gal-nav:focus-visible{opacity:1}
.gal-nav:hover{background:#fff}
.gal-nav:active{transform:translateY(-50%) scale(.94)}
.gal-count{
  position:absolute; left:50%; bottom:var(--s-2); transform:translateX(-50%);
  font-size:12px; color:#fff; background:rgba(20,18,15,.5);
  padding:2px 10px; border-radius: var(--radius); pointer-events:none;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
/* 触屏设备没有 hover：箭头必须常显，否则等于没做。
   用 (hover:none) 而不是只按宽度判断 —— 平板 / 触屏笔记本同理。 */
@media (hover:none){
  .gal-nav{opacity:1; background:rgba(255,255,255,.86)}
}
@media (max-width:720px){
  .gal-nav{width:34px; height:34px}
  .gal-prev{left:6px} .gal-next{right:6px}
  .gal-thumbs{gap:var(--s-1); scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .gal-thumbs::-webkit-scrollbar{display:none}      /* 移动端不占位，图片能再大一点 */
  .gal-th{width:56px; height:56px; scroll-snap-align:center}
}
/* 主图预留正方形空间（商品图实测均为 800×800）。
   坑：.gal-main 设了 margin-inline:auto，在纵向 flex 容器里 auto 外边距会取消横向拉伸，
   宽度就退化成「由内容决定」；而内容是还没加载的图，宽度 0，连带 aspect-ratio 算出的高度也是 0。
   结果图一加载完就从 0 涨到 354px，把下方信息列整块顶下去 —— 商品页 CLS 0.30（移动）来自这一下。
   所以这里必须显式 width:100%，让 aspect-ratio 在首帧就能算出高度。 */
.gal-main{cursor:zoom-in;position:relative;width:100%;aspect-ratio:1/1;background:rgba(0,0,0,.02)}
/* contain 而非 cover：将来若上传非方图，会留边而不会把商品裁掉 */
.gal-main img{width:100%;height:100%;object-fit:contain;display:block}
.zoom-hint{position:absolute;right:8px;bottom:8px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding: var(--s-half) 8px;border-radius: var(--radius);pointer-events:none;opacity:0;transition:.2s}
.gal-main:hover .zoom-hint{opacity:1}
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(20,18,15,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease;padding:24px}
.lightbox.open{opacity:1;visibility:visible}
.lb-stage{position:relative;max-width:94vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:94vw;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius: var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:44px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:52px;cursor:pointer;user-select:none}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.4);padding: 4px var(--s-2);border-radius: var(--radius)}
body.lb-open{overflow:hidden}
/* 灯箱触屏手势支持：禁用浏览器默认缩放手势，由 JS 接管捏合/滑动 */
#lb{touch-action:none;-webkit-tap-highlight-color:transparent}
#lb .lb-img{transition:transform .08s ease-out;will-change:transform;touch-action:none}
#lb .lb-stage{cursor:zoom-in}
#lb.zoomed .lb-stage{cursor:grab}
#lb.zoomed .lb-stage:active{cursor:grabbing}
#lb .lb-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);
  font-size:12px;background:rgba(0,0,0,.42);padding: var(--s-1) var(--s-2);border-radius: var(--radius);pointer-events:none;letter-spacing:.02em;white-space:nowrap}
@media(max-width:600px){#lb .lb-hint{font-size:11px;bottom:10px}}
/* 卡片 hover 切换第二张图 */
.product-img{position:relative;overflow:hidden}
.product-img .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.product-img .pimg-a{opacity:1}
.product-img .pimg-b{opacity:0}
.product-card:hover .pimg-b{opacity:1}
/* 无图时的占位（保持原样） */
.product-img .placeholder-gem{position:absolute;inset:0}

@media (max-width:960px){
  .hero-split{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:none}
  .hero-quiz-card{padding:22px 20px 18px}
}
@media (max-width:640px){
  .q-picks{grid-template-columns:1fr}
  .q-title{font-size:21px}
  .q-res-title{font-size:22px}
  .q-zi{font-size:44px}
  .q-result{padding:22px 18px}
  .q-opt{padding: var(--s-2) var(--s-2);font-size:14.5px}
  .gal-th{width:54px;height:54px}
}

/* ==================== 结账表单（2026-09-09） ==================== */
.checkout-form{margin-top: var(--s-4);padding: 24px var(--s-3);background: var(--surface);border:1px solid var(--line);border-radius: var(--radius)}
.checkout-form h3{font-family:var(--serif);font-size:21px;margin-bottom:16px}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-grid .wide{grid-column:1/-1}
.co-grid label{display:flex;flex-direction:column;gap: var(--s-1);font-size:12.5px;color:var(--ink-soft)}
.co-grid input{padding: var(--s-1) var(--s-2);border:1px solid var(--line);border-radius: var(--radius);font-size:14px;font-family:inherit}
.co-grid input:focus{outline:none;border-color:var(--jade)}
.co-actions{display:flex;gap: var(--s-1);flex-wrap:wrap;margin-top:20px}
.co-note{font-size:12px;color:var(--ink-soft);margin-top: var(--s-2);line-height:1.7}
.checkout-done{margin-top: var(--s-4);padding: var(--s-4) var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius: var(--radius);text-align:center}
.checkout-done h3{font-family:var(--serif);font-size:24px;color:var(--jade);margin-bottom:10px}
.co-oid{font-size:14px;margin-bottom:8px}
.co-oid b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.checkout-done p{font-size:14px;color:var(--ink-soft);line-height:1.75}
@media (max-width:640px){.co-grid{grid-template-columns:1fr}.checkout-form{padding:20px 18px}}

/* ==================== 无障碍：视觉隐藏（保留给屏幕阅读器/SEO） ==================== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==================== 矮屏手机（iPhone SE / 667~720px 高）：Hero 再压一档，保证一屏放下 ==================== */
@media (max-width: 640px) and (max-height: 730px) {
  .hero { padding: 16px 0 16px; }
  .hero .hero-split { gap: var(--s-3); }
  .hero .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .hero h1 { font-size: 24px; margin-bottom: var(--s-1); }
  .hero p.lead { font-size: 13.5px; line-height: 1.55; margin-bottom: var(--s-2); }
  .hero .btn-row .btn { padding: var(--s-1) var(--s-3); font-size: 13px; }
  .hero-quiz-card { padding: var(--s-2) var(--s-2) var(--s-2); }
  .hero-quiz-card .q-progress { margin-bottom: var(--s-1); }
  .hero-quiz-card .q-title { font-size: 16.5px; }
  .hero-quiz-card .q-opts.compact { gap: var(--s-1); }
  .hero-quiz-card .q-opts.compact .q-opt { padding: var(--s-1) var(--s-1); font-size: 12.5px; gap: var(--s-1); }
  .hero-quiz-card .q-opts.compact .q-opt .g { width: 22px; height: 22px; font-size: 12px; }
  .hero-triple-card { padding: var(--s-2); }
  .htc-grid { gap: var(--s-1); }
  .htc-ico { font-size: 20px; }
  .htc-t { font-size: 12px; }
}

/* ============================================================
   Stone Oracle（测石馆）—— 多测试合集页
   ============================================================ */
.or-head { max-width: 720px; margin: 0 auto clamp(26px, 4vh, 44px); text-align: center; }
.or-head .q-title { margin-bottom: var(--s-2); }
.or-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px); margin-bottom: clamp(30px, 5vh, 52px);
}
.or-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; cursor: pointer; font-family: var(--sans);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); transition: .2s; color: var(--ink);
}
.or-card:hover { border-color: var(--jade); transform: translateY(-4px); box-shadow: var(--shadow); }
.or-card .or-g {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--jade); font-family: "Noto Serif SC", serif; font-size: 21px;
  border: 1px solid var(--line); margin-bottom: 4px;
}
.or-card .or-tt { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.or-card .or-ds { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.or-back {
  background: none; border: none; padding: 0; margin-bottom: var(--s-2); cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
}
.or-back:hover { color: var(--jade); }
.or-date { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 var(--s-3); }
.or-date > span { display: flex; flex-direction: column; gap: var(--s-1); }
.or-date input {
  width: 104px; padding: var(--s-1) var(--s-2); font-size: 15px; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.or-date input:focus { outline: none; border-color: var(--jade); }
.or-lab { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.or-grid-products { margin: var(--s-2) 0 var(--s-1); }
@media (max-width: 900px) {
  .or-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .or-card { padding: var(--s-2); }
  .or-card .or-tt { font-size: 18px; }
  .or-card .or-ds { font-size: 13px; }
  .or-date input { width: 88px; }
}
@media (max-width: 560px) {
  .or-grid { grid-template-columns: 1fr; }
}

/* ---- Stone Oracle 首页引流条 ---- */
.oracle-promo { border-top: 1px solid var(--line); }
.oracle-promo-inner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.op-copy h2 { font-size: clamp(26px, 3.4vw, 40px); margin: var(--s-2) 0 var(--s-2); }
.op-copy p { color: var(--ink-soft); font-size: 16px; max-width: 560px; }
.oracle-feature-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px); text-align: center;
}
.ofc-g {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--jade); font-family: "Noto Serif SC", serif;
  font-size: 25px; border: 1px solid var(--line);
}
.ofc-name { font-family: var(--serif); font-size: 22px; margin: var(--s-1) 0 var(--s-2); }
.ofc-link { color: var(--jade); font-size: 14px; text-decoration: none; }
.ofc-link:hover { text-decoration: underline; }

/* ---- Stone Oracle 弹窗 ---- */
.oracle-popup {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 15, .48); padding: var(--s-3); animation: opFade .25s ease;
}
@keyframes opFade { from { opacity: 0; } to { opacity: 1; } }
.oracle-popup .op-card {
  position: relative; background: var(--white); border-radius: var(--radius);
  max-width: 440px; width: 100%; padding: var(--s-4) var(--s-4) var(--s-4); text-align: center;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.oracle-popup .op-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-soft);
}
.oracle-popup .op-close:hover { color: var(--ink); }
.oracle-popup h3 { font-family: var(--serif); font-size: 25px; margin: 4px 0 var(--s-1); }
.oracle-popup p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin-bottom: var(--s-3); }
.oracle-popup .q-actions { display: flex; flex-direction: column; gap: var(--s-1); }
@media (max-width: 900px) {
  .oracle-promo-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   收银页 /checkout（第十三轮新增）
   结构：左侧「地址 → 付款方式 → PayPal 按钮」，右侧订单摘要（桌面吸顶）。
   间距全部走 8pt 令牌；移动端折成单列，摘要挪到最上方（先看钱，再填表）。
   ============================================================ */
.cs-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-6); align-items: start;
}
.cs-main { min-width: 0; }
.cs-block {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); margin-bottom: var(--s-4);
}
.cs-h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  margin-bottom: var(--s-3); color: var(--ink);
}
.cs-lead { font-size: 14.5px; color: var(--ink-soft); margin-bottom: var(--s-2); }
.cs-hint { font-size: 13px; color: var(--ink-soft); margin-top: var(--s-2); }

/* 已提交后的地址摘要 */
.cs-locked { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.cs-locked > div { display: flex; gap: var(--s-2); align-items: baseline; }
.cs-locked span { font-size: 13px; color: var(--ink-soft); min-width: 96px; }
.cs-locked b { font-size: 15px; font-weight: 500; }
.cs-locked .wide { grid-column: 1 / -1; }

/* 付款方式 */
.cs-methods { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.cs-method {
  display: flex; gap: var(--s-2); align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); cursor: pointer; transition: border-color .2s, background .2s;
  background: var(--surface);
}
.cs-method:hover { border-color: var(--gold); }
.cs-method.on { border-color: var(--jade); background: var(--surface-2); }
.cs-method.off { opacity: .5; cursor: not-allowed; }
.cs-method input { margin-top: 4px; accent-color: var(--jade); flex: 0 0 auto; }
.cs-method-body { display: flex; flex-direction: column; gap: var(--s-half); }
.cs-method-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: var(--s-1); }
.cs-badge {
  font-style: normal; font-size: 11px; letter-spacing: .06em;
  color: #003087; background: #F2F6FC; border: 1px solid #D8E2F2;
  border-radius: var(--radius); padding: 2px var(--s-1);
}
.cs-method-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* 付款区 */
.cs-paybox { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.cs-await { font-size: 14.5px; color: var(--ink); margin-bottom: var(--s-1); }
.cs-oid { font-size: 13.5px; color: var(--ink-soft); margin-bottom: var(--s-3); }
.cs-oid b { font-family: var(--serif); font-size: 16px; color: var(--ink); letter-spacing: .04em; }
.cs-pp { max-width: 420px; margin-bottom: var(--s-2); }
.cs-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.cs-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); align-items: center; }
.cs-actions .btn { flex: 0 0 auto; }
.cs-secure { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: var(--s-2); }

/* 订单摘要 */
.cs-side { position: sticky; top: calc(var(--header-h) + var(--s-2)); }
.cs-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4);
}
.cs-items { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.cs-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.cs-thumb {
  width: 56px; height: 56px; border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-item-info b { font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.cs-item-meta { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-item-qty { font-size: 12px; color: var(--ink-soft); }
.cs-item-price { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.cs-lines { border-top: 1px solid var(--line); padding-top: var(--s-2); display: grid; gap: var(--s-1); }
.cs-lines .line { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.cs-lines .line.total {
  border-top: 1px solid var(--line); margin-top: var(--s-1); padding-top: var(--s-2);
  font-size: 18px; color: var(--ink); font-family: var(--serif); font-weight: 700;
}
.cs-lines .coupon-line { color: var(--jade); }
.cs-edit { display: inline-block; margin-top: var(--s-2); font-size: 13px; color: var(--jade); }
.cs-card .cs-note { margin-top: var(--s-2); }

/* 完成态 */
.cs-done { text-align: center; max-width: 560px; margin: 0 auto; padding: var(--s-6) 0; }
.cs-done-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s-3);
  background: var(--jade); color: var(--accent-ink); font-size: 32px; line-height: 64px;
}
.cs-done h2 { font-family: var(--serif); font-size: 30px; margin-bottom: var(--s-2); }
.cs-done p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-bottom: var(--s-2); }
.cs-done .cs-actions { justify-content: center; }

@media (max-width: 960px) {
  .cs-layout { grid-template-columns: 1fr; gap: var(--s-4); }
  /* 移动端：摘要挪到最上面 —— 先让客户看清买的是什么、多少钱，再决定填不填表 */
  .cs-side { position: static; order: -1; }
  .cs-block { padding: var(--s-3); }
  .cs-locked span { min-width: 76px; }
}

/* ==========================================================================
   一屏规则（第十五轮 · 2026-09-15）
   --------------------------------------------------------------------------
   目标（Frank 提出）：访客滚到任意一个 section 时，这块内容应当在一个屏幕里
   看完，而不是「第二排卡片被切掉一半」。手机端与桌面端都要成立。

   三条实现路径，按代价从低到高：
   ① 纵向节奏：区块留白与「标题→内容」间距下调一档（见 :root 的 --sec-y）。
      桌面端原本 9.5vh 上下各留 86px，光留白就吃掉 172px 视口，是超屏主因。
   ② 多卡网格：窄屏改成「两列竖排网格」（2026-09-17 改，原为横向吸附轨道）。
      **为什么反过来**：Frank 实测反馈「手机端很多 Hero 还是需要左右滑来看内容」。
      量过一遍，390 视口下的真实宽度是 —— 神谕入口 6 张卡 1709px、
      风水指南 8 条八卦 2574px、故事页 1709px、定制页工具条 884px，
      而屏幕只有 390px。也就是说第 2 张之后**默认就在屏幕外**，
      用户得先知道「这里能滑」才看得到 —— 这是把内容藏起来，不是压缩。
      横滑轨道当年是为了治「超屏」，但代价是「看不见」，
      而竖排本来就是这个站的常态阅读方式（一直往下滚）。
      现在改成两列（正文型卡片一列），长度靠列数控制，不再靠藏。
      桌面保持网格不动（桌面一行能放 3~4 张，本来就在一屏内）。
   ③ 页脚：手机端链接列折叠（<details>），25 条链接竖排要 1.6 屏；
      收起后只剩 4 行标题，点开即用。桌面端强制展开，与原来完全一致。

   刻意不做的事：不隐藏任何内容、不做内嵌滚动条（嵌套滚动会让人迷路）、
   不用 JS 量高度再改尺寸（那会让首屏抖动，得不偿失）。
   ========================================================================== */

/* 后台把首页测试卡关掉时：首屏收成一栏，不留空洞 */
.hero-split.no-quiz { grid-template-columns: 1fr; }
.hero-split.no-quiz .hero-copy { max-width: 760px; }

/* ---- ② 多卡网格：窄屏改两列竖排（原来是一行横滑轨道）----
   ⚠️ 这里曾经是 flex + overflow-x:auto + scroll-snap。
   判定改了：**「一屏能看到几张」不如「能不能不滑就看到」重要。**
   横滑轨道上，第 2 张之后默认在屏幕外，用户不滑就永远不知道有内容；
   而竖排只是「多滚一下」，滚是手机的本能动作，不需要被发现。
   两列/一列的数字来自实测：390 视口在 2 列下每张约 172px，
   商品卡与意图卡的文字仍能完整显示；正文型卡片（八卦/故事/五行说明）
   挤两列就断句难读，所以单独走一列。 */
@media (max-width: 900px) {
  .intention-grid,
  .bagua-list,
  .bagua-list.two-col,
  .product-grid,
  .zodiac-grid,
  .value-grid,
  .ritual-steps,
  .five-grid,
  .story-grid,
  .review-grid,
  .or-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: visible;
    scroll-snap-type: none;
    gap: var(--s-2);
    padding-bottom: 0;
  }
  /* 一列：正文长的卡片。两列会把每行压到 10 来个字，读起来一直在断句。 */
  .bagua-list,
  .bagua-list.two-col,
  .zodiac-grid,
  .value-grid,
  .ritual-steps,
  .story-grid,
  .review-grid,
  .or-grid { grid-template-columns: minmax(0, 1fr); }

  /* 竖排后不再有横滑语境，恢复正常的卡片内边距 */
  .ritual-step { padding: var(--s-3) var(--s-3); }
}

/* 卡片必须能收缩：grid 的 1fr 默认最小是 min-content，
   名字/价格那几行 nowrap 一顶，整列就会超出屏幕（实测商品卡会多出 100px+）。 */
@media (max-width: 900px) {
  .intention-grid > *, .bagua-list > *, .product-grid > *, .zodiac-grid > *,
  .value-grid > *, .ritual-steps > *, .five-grid > *, .story-grid > *,
  .review-grid > *, .or-grid > * { min-width: 0; }
}

/* ---- ③ 页脚链接列：手机折叠 / 桌面展开 ---- */
.f-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) 0;
}
.f-acc > summary::-webkit-details-marker { display: none; }
.f-acc > summary::after {
  content: "+";
  font-size: 16px;
  color: var(--gold);
  line-height: 1;
  transition: transform .2s;
}
.f-acc[open] > summary::after { content: "–"; }
.f-acc h4 { margin: 0; }                 /* 标题交给 summary 排版，避免重复留白 */
.f-acc > ul { padding-bottom: var(--s-2); }

/* ---- 桌面 / 平板：一律展开，与改动前完全一致（只隐藏可点的加号）----
   pointer-events:none 让标题在桌面点了也不会收起：否则访客误点标题会把
   整列链接折起来，而桌面本来就不缺这点高度。 */
@media (min-width: 641px) {
  .f-acc > summary { padding: 0; cursor: default; pointer-events: none; }
  .f-acc > summary::after { content: none; }
  .f-acc h4 { margin-bottom: 16px; }   /* 与改动前的 h4 间距逐像素对齐 */
  /* ★ 双兜底（2026-09-15 修）。主路径是 JS 给 <details> 设 open（见 main.js 的 syncFooterCols）。
     下面两条是「万一 JS 没跑到」时仍然看得见内容的保险：
       · ::details-content —— Chrome 131 起，折叠内容真正的承载者是它，
         UA 给它 content-visibility:hidden，只有把这一条改回 visible 才放得出来；
       · display:block —— 老浏览器的老机制，留着不冲突。
     教训：**只写 display:block 就是本次页脚 4 列 25 条链接整体消失的原因**
     （标题还在、链接全无，看起来像我们本来就没写这些链接，而不像坏了）。
     旧浏览器不认识 ::details-content，整条规则自动忽略，安全。 */
  .f-acc::details-content { content-visibility: visible; }
  .f-acc > ul, .f-acc > *:not(summary) { display: block !important; }
  .f-acc { display: block; }
}

/* ---- 手机端页脚整体收紧：订阅表单并排，底部条也压一行 ---- */
@media (max-width: 640px) {
  .footer-top { gap: var(--s-4); padding-bottom: var(--s-4); }
  .footer-cols { column-gap: var(--s-3); row-gap: 0; align-items: start; }
  .news-form { flex-direction: row; align-items: stretch; gap: var(--s-1); }
  .news-form input { flex: 1 1 auto; min-width: 0; }
  .news-form button { flex: 0 0 auto; padding: var(--s-1) var(--s-3); }
  .footer-bottom { padding-top: var(--s-3); flex-direction: column; gap: var(--s-half); }
  .site-footer { margin-top: var(--s-5); }
  .site-footer .disclaimer { padding-top: var(--s-3); }
}

/* ---- 桌面端：首页那几个「差一点点」的区块单独收口 ----
   这些区块内容本身能装进一屏，只是卡片内边距偏大，合计多出 30~70px。
   只调内边距与行距，不动字号与配色，视觉上几乎看不出，但刚好收进一屏。 */
@media (min-width: 901px) {
  .intention-card { padding: var(--s-3) var(--s-4); }
  .intention-card .glyph { font-size: 34px; margin-bottom: var(--s-2); }
  .bagua-row { padding: var(--s-1) 0; }
  .value-card { padding: var(--s-3) var(--s-4); }
  .value-grid { gap: var(--s-3); }
  .ritual-step { padding: var(--s-3) var(--s-3); }
  .ritual-step .num { font-size: 36px; margin-bottom: var(--s-1); }
}

/* ---- 故事列表卡上的评论折叠（配合 js/comments.js 的 collapse 选项）----
   参考资料：`.review-grid` / `.review-card` / `.review-form` 仍在折叠体内部，
   展开后与产品页看到的完全一致。 */
.rv-fold { margin-top: var(--s-2); border-top: 1px solid var(--line); }
.rv-fold > summary {
  list-style: none; cursor: pointer; padding: var(--s-2) 0;
  display: flex; align-items: center; gap: var(--s-half);
  font-size: 13px; color: var(--ink-soft);
}
.rv-fold > summary::-webkit-details-marker { display: none; }
.rv-fold > summary .stars { color: var(--gold); letter-spacing: .06em; }
.rv-fold > summary::after { content: "+"; margin-left: auto; color: var(--gold); font-size: 15px; line-height: 1; }
.rv-fold[open] > summary::after { content: "–"; }
.rv-fold-body { padding-bottom: var(--s-2); }
.rv-fold-body .review-grid { margin-top: var(--s-2); }

/* ---- 列表类页面的「一屏浏览窗」（第十五轮）----
   集合页 13 件商品在桌面端是 4 行 = 2.4 屏，故事列表同理。
   这两块本质是「目录」，无论怎么排都装不进一屏，除非把字号压到看不清。
   处理方式：section 本体 = 一屏，目录在窗内滚动 —— 浏览习惯不变（仍是上下滚），
   但一个 section 就是一个屏幕，页头与筛选条不再被推走。
   窗底加一层与页面底色同色的渐隐 + 一条细线，让人一眼看出「这是个窗口」。 */
@media (min-width: 901px) {
  .fit-pane {
    max-height: calc(100svh - var(--sec-y) * 2 - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: auto;
    padding-bottom: var(--s-2);
  }
  .fit-window { position: relative; }
  .fit-window::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: var(--sec-y); height: 40px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(250, 247, 241, 0), var(--bg));
  }
  .fit-window.section-alt::after { background: linear-gradient(to bottom, rgba(241, 236, 226, 0), var(--bg-alt)); }
}

/* ---- 知识页的两栏清单：桌面端改三栏 ----
   八卦 8 条、生肖 12 条原本两栏竖排（4~6 行），一屏装不下最后两行。
   改三栏后行数降到 3~4 行，正好收进一屏；条目本身是「词 + 一行解释」，
   三栏宽度（每栏 ~360px）读起来仍然是舒服的行长。 */
@media (min-width: 901px) {
  .bagua-list.two-col { grid-template-columns: repeat(3, 1fr); }
}