/*
Theme Name: Eastern Talisman Landing
Description: Full-width single-page theme for the EASTERN TALISMAN calculator landing page.
Version: 1.0.0
Text Domain: eastern-talisman
*/
/* ============================================================
   EASTERN TALISMAN — Phase 1 : Nav + Hero Calculator + Result Modal
   几何参数 90% 承袭 Hedvig 模板：
     container  min(100vw - 80px, 1120px)   /  mobile: 100vw - 48px
     breakpoints 809.98px · 1199.98px      （模板原生断点）
     section padding 96px 40px             /  mobile: 72px 24px
     radius  16px 卡片 · 20px 大面板 · 10px 输入 · 99px 胶囊
     blur    12px 常规毛玻璃 · 20px 模态遮罩
     type    H1 72/56/40   H2 42/34/32   body 18/17/16
   全部选择器以 .sa-root 作用域隔离，不会污染 WordPress 主题。
   ============================================================ */

.sa-root {
  /* ---- palette (锁定) ---- */
  --sa-bg:        #121212;
  --sa-bg-raise:  #171614;
  --sa-gold:      #c5a059;
  --sa-gold-hi:   #dcbb7c;
  --sa-gold-lo:   #a8853f;
  --sa-parch:     #f4f1ea;

  --sa-line:      rgba(244, 241, 234, 0.10);
  --sa-line-soft: rgba(244, 241, 234, 0.06);
  --sa-gold-line: rgba(197, 160, 89, 0.26);
  --sa-gold-wash: rgba(197, 160, 89, 0.10);
  --sa-dim:       rgba(244, 241, 234, 0.64);
  --sa-faint:     rgba(244, 241, 234, 0.40);
  --sa-mute:      rgba(244, 241, 234, 0.28);

  --sa-glass:     rgba(244, 241, 234, 0.045);
  --sa-glass-2:   rgba(18, 18, 18, 0.55);

  /* ---- geometry ---- */
  /* PC 宽屏用 1200px 舒展容器；≥1440 再放宽到 1280，告别"移动端放大感" */
  --sa-container: min(calc(100vw - 80px), 1200px);
  --sa-pad-y:     96px;
  --sa-pad-x:     40px;
  --sa-r-card:    16px;
  --sa-r-lg:      20px;
  --sa-r-input:   10px;
  --sa-r-pill:    99px;
  --sa-blur:      blur(12px);
  --sa-blur-lg:   blur(20px);
  --sa-nav-h:     64px;

  --sa-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);

  --sa-font: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --sa-font-serif: "Cormorant Garamond", "Songti SC", Georgia, "Times New Roman", serif;

  position: relative;
  display: block;
  background: var(--sa-bg);
  color: var(--sa-parch);
  font-family: var(--sa-font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  overflow-x: clip;               /* 杜绝横向溢出 */
}

/* 作用域内的轻量归零。
   注意：必须用 :where() 把归零的优先级压到 (0,1,0)，
   否则 `.sa-root button` 这类 (0,1,1) 会反压掉组件自己的
   `.sa-calc-btn { background / color }`，按钮会变成透明底。 */
.sa-root *,
.sa-root *::before,
.sa-root *::after { box-sizing: border-box; }

.sa-root :where(img) { max-width: 100%; display: block; }
.sa-root :where(h1, h2, h3, p) { margin: 0; }
.sa-root :where(button) { font: inherit; color: inherit; border: 0; background: none; }
.sa-root :where(a) { color: inherit; text-decoration: none; }

.sa-container {
  width: var(--sa-container);
  max-width: 100%;
  margin-inline: auto;
}

/* ============================================================
   1. NAV — 微型极简胶囊导航
   ============================================================ */
.sa-nav {
  position: fixed;
  inset: 16px 0 auto 0;
  z-index: 60;
  transition: transform 0.5s var(--sa-ease);
}
.sa-nav-inner {
  height: var(--sa-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px 0 26px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: var(--sa-glass-2);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.42);
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.sa-nav.is-scrolled .sa-nav-inner {
  background: rgba(14, 14, 14, 0.82);
  border-color: var(--sa-gold-line);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
}
/* 下滑隐藏 / 上滑唤回：避免固定导航在页面底部压住「背书卡↔页脚」之间的空档，
   看起来像一条重复的次级导航条。回到顶部或向上滚动即恢复。 */
.sa-nav.is-hidden { transform: translateY(-140%); }

.sa-logo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sa-parch);
}
.sa-logo em {
  font-style: normal;
  color: var(--sa-gold);
}

.sa-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.sa-nav-links a {
  position: relative;
  font-size: 14px;
  color: var(--sa-dim);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.sa-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--sa-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--sa-ease);
}
.sa-nav-links a:hover { color: var(--sa-parch); }
.sa-nav-links a:hover::after { transform: scaleX(1); }

.sa-nav-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;                    /* 模板原生按钮高度 */
  padding: 0 24px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.16), rgba(197, 160, 89, 0.06));
  color: var(--sa-gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease, background 0.35s ease,
              border-color 0.35s ease, box-shadow 0.45s ease, transform 0.35s var(--sa-ease);
}
.sa-nav-btn:hover {
  color: #121212;
  background: linear-gradient(180deg, var(--sa-gold-hi), var(--sa-gold-lo));
  border-color: var(--sa-gold);
  box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.10),
              0 10px 28px rgba(197, 160, 89, 0.26);
  transform: translateY(-1px);
}

/* ============================================================
   2. HERO
   ============================================================ */
.sa-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;                /* 回退：不支持 svh 的老浏览器用 vh */
  min-height: 100svh;               /* 现代浏览器：避开移动端地址栏抖动 */
  padding: calc(var(--sa-nav-h) + 96px) 0 var(--sa-pad-y);
  overflow: hidden;
  isolation: isolate;
}

/* 背景层的内部绘制顺序（.sa-hero-bg 整体在 z-index:-1，位于内容之下）：
     img(0) → overlay 压暗(1) → glow 氛围光(2) → grain 颗粒(3)
   glow 必须排在 overlay 之上，否则会被那层 88%~100% 不透明的压暗渐变盖掉，
   看起来就只剩一点点余光 —— 这正是氛围光「打不出来」的根因。 */
.sa-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.sa-hero-bg img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.62;
  /* 本地素材：模板自带星空大图（1672×941）。原图偏蓝紫，
     在这里压成冷调夜景，再交给下方的暖金光晕染色。 */
  filter: grayscale(0.35) contrast(1.22) brightness(0.72) saturate(0.85);
  transform: scale(1.06);
  /* 原版手法：用 screen 把夜景叠加在暗底上，亮部（星光/云）
     自然发光而不是被生硬贴上去，配合暗角拉出电影级景深。 */
  mix-blend-mode: screen;
}

/* 暗角渐隐：四周径向虚化到 #121212，消除两边突兀死黑断层 */
.sa-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 42%, transparent 34%, rgba(18, 18, 18, 0.55) 72%, #121212 100%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.55) 0%, transparent 24%, transparent 62%, #121212 100%);
}

.sa-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(115% 78% at 50% -8%, rgba(197, 160, 89, 0.16), transparent 62%),
    radial-gradient(75% 55% at 88% 108%, rgba(197, 160, 89, 0.09), transparent 70%),
    radial-gradient(60% 45% at 4% 96%, rgba(197, 160, 89, 0.06), transparent 72%),
    linear-gradient(180deg,
      rgba(18, 18, 18, 0.52) 0%,
      rgba(18, 18, 18, 0.66) 46%,
      rgba(18, 18, 18, 0.92) 100%);
}

/* ---- 中心径向氛围光（Ambient Glow / Mesh Gradient）----
   原版不是死黑底：内容后方有一大团弥散柔光，卡片像悬浮在光上。
   刻意做成 background 层里的独立图层，而不是给 .sa-hero 加 filter ——
   给祖先加 filter / backdrop-filter 会让它成为 backdrop root，
   卡片内下拉面板的毛玻璃就只能采到卡片以内的内容，整页背景会糊不掉。
   这里保持纯静态图层，不参与任何后续合成链。 */
.sa-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sa-hero-glow::before {          /* 主光团：香槟金，压在测算卡片正后方 */
  content: "";
  position: absolute;
  left: 50%;
  top: 60%;
  width: min(1340px, 104vw);
  height: min(820px, 72vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(232, 198, 138, 0.34) 0%,
              rgba(197, 160, 89, 0.215) 34%,
              rgba(197, 160, 89, 0.095) 58%,
              rgba(197, 160, 89, 0.028) 76%,
              transparent 90%);
  filter: blur(80px);
}
.sa-hero-glow::after {           /* 副光团：暖琥珀，偏右上，打破对称 */
  content: "";
  position: absolute;
  right: -6%;
  top: 6%;
  width: min(620px, 58vw);
  height: min(460px, 46vw);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(220, 164, 98, 0.24) 0%,
              rgba(197, 160, 89, 0.10) 52%,
              transparent 78%);
  filter: blur(80px);
}
/* 颗粒层：SVG 噪点。
   用 data:image/svg+xml 时，尖括号/井号等必须百分号编码。
   旧写法把原始 <svg> 直接塞进 url()，Chrome 在 file:// 下解析该 URL 时会抛
   "Unsafe attempt to load URL ... Domains, protocols and ports must match"，
   因为文档源是 file:// 而内联数据的源是 opaque，跨源校验直接拒绝。
   编码后该 URL 不再触发跨源校验，本地双击打开 Console 干净。 */
.sa-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'%20opacity='0.5'/%3E%3C/svg%3E");
}

.sa-hero-content {
  width: 100%;
  max-width: 900px;               /* 模板原生 900px 内容列 */
  margin-inline: auto;
  text-align: center;
}

.sa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-bottom: 28px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: var(--sa-gold-wash);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  color: var(--sa-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sa-eyebrow i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sa-gold);
  box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6);
  animation: saPulseDot 2.6s ease-in-out infinite;
}
@keyframes saPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(197, 160, 89, 0); }
}

.sa-h1 {
  font-size: 72px;                /* 模板 H1 desktop */
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.02em;        /* 凝聚字形，去松散感 */
  color: var(--sa-parch);
}
.sa-h1 .sa-word { display: inline-block; }
.sa-h1 .sa-accent {
  color: var(--sa-gold);
  font-style: italic;
  font-family: var(--sa-font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sa-sub {
  max-width: 620px;
  margin: 26px auto 0;            /* 标题 → 副标题，略松开 */
  font-size: 18px;                /* 模板 body-lg */
  line-height: 1.7;
  color: var(--sa-dim);
}

/* ---- 情绪价值描述 + 灵性微标 ----
   结构与排版放这里统一声明，display 由各断点决定：
   移动端 / 平板纵向本来就紧，<810 保持隐藏；
   ≥810 显示，用来填满纵向与左列中段的空置。 */
.sa-lore {
  display: none;
  gap: 14px;
}
.sa-lore p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  /* 正文段落不能用 --sa-faint（0.40 alpha，那是给 11px 大写小标的），
     在深色背景上几乎读不出来。这里单独取一个介于 dim 与 faint 之间的值。 */
  color: rgba(244, 241, 234, 0.56);
}
.sa-lore-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sa-gold);
}
.sa-lore-mark::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sa-gold));
}

/* ---- 测算卡片 ----
   毛玻璃刻意放在 ::after 上，而不是卡片本身：
   任何带 backdrop-filter 的元素都会成为「backdrop root」，
   它内部的后代（下拉面板）就只能模糊卡片以内的内容，
   卡片外的正文会原样透出、糊不掉。
   把磨砂层挪到没有子元素的伪元素上，卡片本身就不再是 backdrop root，
   面板的 backdrop-filter 便能真正采样到整页背景，得到货真价实的毛玻璃。 */
.sa-calc-card {
  position: relative;
  z-index: 2;              /* 保证展开的下拉面板永远浮在后续兄弟节点（信任条等）之上 */
  width: 100%;
  max-width: 880px;
  margin: 64px auto 0;     /* 副标题 → 卡片：还原原版松弛的垂直呼吸 */
  padding: 28px;
  border-radius: var(--sa-r-lg);
  border: 1px solid var(--sa-line);
  /* 三轮叠加的 ambient shadow：贴地投影 + 大范围弥散 + 顶部内侧高光 */
  box-shadow:
    0 1px 0 rgba(244, 241, 234, 0.05) inset,
    0 18px 44px rgba(0, 0, 0, 0.46),
    0 44px 96px rgba(0, 0, 0, 0.40),
    0 0 70px rgba(197, 160, 89, 0.075),
    0 0 140px rgba(197, 160, 89, 0.05);
  scroll-margin-top: calc(var(--sa-nav-h) + 40px);
}
.sa-calc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  /* 玻璃体：上缘略亮、下缘沉入暗色，模拟光从顶部打下来 */
  background:
    linear-gradient(180deg,
      rgba(244, 241, 234, 0.075) 0%,
      rgba(244, 241, 234, 0.028) 38%,
      rgba(244, 241, 234, 0.012) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(197, 160, 89, 0.055), transparent 58%);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  pointer-events: none;
}
/* 表单抬到金色描边环(::before, z-index 2)之上，
   否则展开的下拉面板越过卡片下边缘时会被那条 1px 金线横切。 */
.sa-calc-card > * { position: relative; z-index: 3; }
.sa-calc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  /* 双层高光边框：上缘一道 champagne 反光，左右收窄，
     下缘渐隐融入暗色 —— 而不是一圈等亮的死金线。 */
  background: linear-gradient(180deg,
              rgba(236, 210, 158, 0.62) 0%,
              rgba(197, 160, 89, 0.30) 12%,
              rgba(197, 160, 89, 0.10) 42%,
              rgba(197, 160, 89, 0.03) 72%,
              rgba(244, 241, 234, 0.05) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.sa-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sa-input-group { min-width: 0; text-align: left; }
.sa-input-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sa-faint);
}

/* ---- 高定自定义下拉 ----------------------------------------
   原生 <select> 仅保留取值与表单语义（视觉隐藏、不可聚焦），
   用户在界面上看到并操作的是 .sa-field-btn + .sa-field-panel，
   因此展开面板不会再出现系统蓝底与白色粗滚动条。
   ----------------------------------------------------------- */
.sa-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.sa-field { position: relative; }
.sa-field.is-open { z-index: 30; }

.sa-field-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 44px 0 16px;
  border-radius: var(--sa-r-input);
  border: 1px solid var(--sa-line);
  background-color: rgba(10, 10, 10, 0.62);
  color: var(--sa-mute);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.35s ease,
              background-color 0.3s ease, color 0.3s ease;
}
.sa-field-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-field.is-filled .sa-field-btn { color: var(--sa-parch); }
.sa-field-btn:hover {
  border-color: var(--sa-gold-line);
  background-color: rgba(16, 15, 14, 0.82);
}
.sa-field.is-open .sa-field-btn,
.sa-field-btn:focus-visible {
  outline: none;
  color: var(--sa-parch);
  border-color: var(--sa-gold);
  background-color: rgba(10, 10, 10, 0.92);
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.14),
              0 0 24px rgba(197, 160, 89, 0.16);
}
.sa-field.is-open .sa-field-btn { box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.12); }

.sa-field-caret {
  position: absolute;
  right: 17px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  opacity: 0.75;
  transition: transform 0.42s var(--sa-ease), opacity 0.3s ease;
}
.sa-field-btn:hover .sa-field-caret { opacity: 1; }
.sa-field.is-open .sa-field-caret { transform: rotate(180deg); opacity: 1; }

/* 展开面板：半透明深炭黑 + blur(16px) 毛玻璃 + 哑光暗金边框 */
.sa-field-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 0;
  padding: 0 6px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border-radius: var(--sa-r-input);
  border: 1px solid rgba(197, 160, 89, 0.30);
  /* 半透明深炭黑 #1a1918 + 毛玻璃。
     卡片本身的磨砂层已挪到 ::after，卡片不再是 backdrop root，
     因此这里能真正模糊到面板背后的整页内容。 */
  background: linear-gradient(180deg,
              rgba(40, 38, 35, 0.975) 0%,
              rgba(26, 25, 24, 0.980) 46%,
              rgba(20, 19, 18, 0.985) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.72),
              inset 0 1px 0 rgba(244, 241, 234, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.99);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.36s var(--sa-ease),
              max-height 0.36s var(--sa-ease), visibility 0.36s ease;
  /* 注意：此处不能声明标准属性 scrollbar-width / scrollbar-color。
     Chrome 一旦读到它们，就会整块忽略 ::-webkit-scrollbar，
     极细金色微光滚动条会退回系统默认粗细（实测 12px）。
     Firefox 走文件末尾的 @supports 兜底。 */
}
.sa-field.is-open .sa-field-panel {
  max-height: 264px;
  padding: 6px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 极细金色微光滚动条（WebKit / Blink：Chrome · Edge · Safari） */
.sa-field-panel::-webkit-scrollbar { width: 4px; }
.sa-field-panel::-webkit-scrollbar-track { background: transparent; }
.sa-field-panel::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.78), rgba(197, 160, 89, 0.26));
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.55);
}
.sa-field-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(220, 187, 124, 0.95), rgba(197, 160, 89, 0.45));
}
/* Firefox 兜底（不支持 ::-webkit-scrollbar 时才启用标准属性） */
@supports not selector(::-webkit-scrollbar) {
  .sa-field-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, 0.45) transparent;
  }
}
/* 不支持 backdrop-filter 的浏览器：提高不透明度，保证面板内文字不被底层内容干扰 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sa-field-panel { background: rgba(26, 25, 24, 0.985); }
}

/* 选项：悬停 = 暗金微光渐变 + 香槟金字，无系统蓝底 */
.sa-opt {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sa-dim);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}
.sa-opt:hover,
.sa-opt.is-active {
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.20), rgba(197, 160, 89, 0.15));
  color: var(--sa-gold);
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.24);
}
.sa-opt.is-selected {
  color: var(--sa-gold);
  font-weight: 600;
  position: relative;
  padding-right: 32px;
}
.sa-opt.is-selected::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--sa-gold);
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.8);
}

/* ---- 主按钮：香槟金呼吸微光 ---- */
.sa-btn-wrap { margin-top: 24px; }

.sa-calc-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 60px;
  padding: 0 32px;
  border-radius: var(--sa-r-pill);
  border: 1px solid rgba(220, 187, 124, 0.34);
  /* 默认即点亮：香槟金 135° 渐变 + 暗金光晕 */
  background: linear-gradient(135deg, #c5a059 0%, #9e7d3b 100%);
  color: #14120e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.25);
  animation: saBreath 3.4s ease-in-out infinite;
  transition: transform 0.4s var(--sa-ease), filter 0.4s ease,
              box-shadow 0.4s ease, letter-spacing 0.4s ease;
}
.sa-calc-btn span { position: relative; z-index: 2; }
.sa-calc-btn::after {                    /* 悬停高光扫过 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
              transparent 28%, rgba(255, 255, 255, 0.42) 50%, transparent 72%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--sa-ease);
  pointer-events: none;
}
.sa-calc-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.05);
  letter-spacing: 0.075em;
  animation-play-state: paused;
  box-shadow: 0 0 34px rgba(197, 160, 89, 0.45),
              0 0 0 8px rgba(197, 160, 89, 0.08),
              0 18px 44px rgba(197, 160, 89, 0.28);
}
.sa-calc-btn:hover::after { transform: translateX(130%); }
.sa-calc-btn:active { transform: translateY(0) scale(0.996); }
.sa-calc-btn:focus-visible {
  outline: 2px solid var(--sa-gold-hi);
  outline-offset: 4px;
}
@keyframes saBreath {
  0%, 100% {
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.25),
                0 10px 30px rgba(197, 160, 89, 0.14);
  }
  50% {
    box-shadow: 0 0 34px rgba(197, 160, 89, 0.46),
                0 14px 44px rgba(197, 160, 89, 0.30);
  }
}

/* 按钮加载态 */
.sa-calc-btn.is-loading { pointer-events: none; animation-play-state: paused; }
.sa-calc-btn.is-loading span { opacity: 0; }
.sa-calc-btn.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid rgba(18, 18, 18, 0.28);
  border-top-color: #121212;
  animation: saSpin 0.75s linear infinite;
}
@keyframes saSpin { to { transform: rotate(360deg); } }

.sa-form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sa-mute);
  text-align: center;
}
.sa-form-note svg { flex: none; opacity: 0.7; }

.sa-form-error {
  margin-top: 14px;
  font-size: 13px;
  color: #e0a3a3;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.sa-form-error.is-on { opacity: 1; max-height: 40px; }
.sa-calc-card.is-shake { animation: saShake 0.5s var(--sa-ease); }
@keyframes saShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

/* ---- 信任条 ---- */
.sa-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-faint);
}
.sa-trust span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.sa-trust span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sa-gold);
  opacity: 0.85;
}

/* ============================================================
   3. MODAL — 毛玻璃测算结果
   ============================================================ */
.sa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 8, 0.66);
  -webkit-backdrop-filter: var(--sa-blur-lg);
  backdrop-filter: var(--sa-blur-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.sa-modal-overlay.is-open { opacity: 1; visibility: visible; }

.sa-modal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: min(88vh, 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--sa-r-lg);
  border: 1px solid var(--sa-gold-line);
  background: linear-gradient(180deg, #191817 0%, #121212 62%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.72),
              inset 0 1px 0 rgba(244, 241, 234, 0.07);
  opacity: 0;
  transform: translateY(26px) scale(0.982);
  transition: opacity 0.5s ease, transform 0.55s var(--sa-ease);
}
.sa-modal-overlay.is-open .sa-modal-card { opacity: 1; transform: none; }
.sa-modal-card::-webkit-scrollbar { width: 8px; }
.sa-modal-card::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.28);
  border-radius: 99px;
}

.sa-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sa-line);
  background: rgba(18, 18, 18, 0.6);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  color: var(--sa-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease,
              transform 0.4s var(--sa-ease), background 0.3s ease;
}
.sa-modal-close:hover {
  color: var(--sa-bg);
  background: var(--sa-gold);
  border-color: var(--sa-gold);
  transform: rotate(90deg);
}

/* 底边留 0：结缘 CTA 以 sticky 页脚贴住卡片底部并通栏出血 */
.sa-modal-body { padding: 34px 40px 0; }

/* ---- 结果卡片内部 ---- */
.sa-res-head { text-align: center; }
.sa-res-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sa-gold);
}
.sa-res-seal {
  width: 84px;
  height: 84px;
  margin: 18px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sa-gold-line);
  background:
    radial-gradient(circle at 50% 30%, rgba(197, 160, 89, 0.20), transparent 68%),
    rgba(244, 241, 234, 0.03);
  box-shadow: inset 0 0 0 5px rgba(18, 18, 18, 0.72),
              0 0 0 1px rgba(197, 160, 89, 0.12),
              0 18px 44px rgba(0, 0, 0, 0.5);
  font-family: var(--sa-font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  padding: 0 4px;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--sa-gold);
  animation: saSealIn 0.8s var(--sa-ease) both;
}
@keyframes saSealIn {
  from { opacity: 0; transform: scale(0.86) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.sa-res-name {
  font-family: var(--sa-font-serif);
  font-size: 42px;                /* 模板 H2 desktop */
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sa-parch);
}
.sa-res-name-native {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sa-faint);
}
.sa-res-birth {
  margin-top: 14px;
  font-size: 13px;
  color: var(--sa-mute);
  letter-spacing: 0.04em;
}

/* ---- 信物实物展示位（1px 哑光金边框 + 微光圆角） ---- */
.sa-res-media {
  position: relative;
  margin: 22px 0 0;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-r-card);
  border: 1px solid rgba(197, 160, 89, 0.30);
  background:
    radial-gradient(85% 72% at 50% 0%, rgba(197, 160, 89, 0.15), transparent 70%),
    linear-gradient(180deg, rgba(244, 241, 234, 0.05), rgba(244, 241, 234, 0.012));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52),
              0 0 30px rgba(197, 160, 89, 0.10),
              inset 0 0 0 1px rgba(244, 241, 234, 0.03);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sa-res-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.sa-res-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 竖版原图 2:3 与容器 2:3 比例一致，cover 即为等比完整铺满，不裁切佛像 */
  object-position: 50% 50%;
  display: block;
}
.sa-res-media-ph {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
}
.sa-res-media-ph svg { opacity: 0.6; }
.sa-res-media-ph b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sa-gold);
}
.sa-res-media-ph i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sa-mute);
}

.sa-res-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  border-radius: var(--sa-r-card);
  overflow: hidden;
  background: var(--sa-line-soft);
  border: 1px solid var(--sa-line-soft);
}
.sa-res-meta div {
  padding: 16px 12px;
  background: rgba(18, 18, 18, 0.86);
  text-align: center;
}
.sa-res-meta dt {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sa-mute);
  margin-bottom: 7px;
}
.sa-res-meta dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-parch);
}

.sa-res-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.sa-res-chips span {
  padding: 8px 16px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: var(--sa-gold-wash);
  color: var(--sa-gold);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.sa-res-copy {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sa-dim);
  text-align: center;
}

/* 能量条 */
.sa-energy {
  margin-top: 26px;
  padding: 22px 22px 20px;
  border-radius: var(--sa-r-card);
  border: 1px solid var(--sa-line-soft);
  background: rgba(244, 241, 234, 0.028);
}
.sa-energy-title {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sa-mute);
  margin-bottom: 16px;
}
.sa-bar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.sa-bar:last-child { margin-bottom: 0; }
.sa-bar-label { font-size: 12px; color: var(--sa-dim); letter-spacing: 0.05em; }
.sa-bar-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(244, 241, 234, 0.09);
  overflow: hidden;
}
.sa-bar-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sa-gold-lo), var(--sa-gold-hi));
  transition: width 1.1s var(--sa-ease);
}
.sa-modal-overlay.sa-animate .sa-bar-track i { width: var(--v); }
.sa-bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 推荐护符 */
.sa-amulet {
  position: relative;
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--sa-r-card);
  border: 1px solid var(--sa-gold-line);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(197, 160, 89, 0.14), transparent 62%),
    rgba(244, 241, 234, 0.03);
  text-align: left;
}
.sa-amulet-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-gold);
  color: #121212;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sa-amulet h3 {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sa-parch);
}
.sa-amulet p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--sa-dim);
}
.sa-amulet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sa-faint);
}
.sa-amulet-meta em {
  font-style: normal;
  color: var(--sa-gold);
  font-weight: 600;
}

/* 结缘 CTA 页脚：sticky 贴底 + 通栏渐变遮罩，任何视口高度都无需滚动即可看到 */
.sa-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 20px -40px 0;
  padding: 20px 40px 26px;
  background: linear-gradient(180deg,
              rgba(18, 18, 18, 0) 0%,
              rgba(18, 18, 18, 0.90) 30%,
              #121212 62%);
}
.sa-modal-actions::before {          /* 遮罩上缘的极细金光分隔 */
  content: "";
  position: absolute;
  top: 12px;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, rgba(197, 160, 89, 0.28), transparent);
}

.sa-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 58px;
  border-radius: var(--sa-r-pill);
  background: linear-gradient(180deg, var(--sa-gold-hi), var(--sa-gold) 52%, var(--sa-gold-lo));
  color: #121212;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  animation: saBreath 3.6s ease-in-out infinite;
  transition: transform 0.4s var(--sa-ease), box-shadow 0.4s ease, filter 0.4s ease;
}
.sa-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  animation-play-state: paused;
  box-shadow: 0 0 0 8px rgba(197, 160, 89, 0.10),
              0 16px 40px rgba(197, 160, 89, 0.30);
}
.sa-cta svg { transition: transform 0.4s var(--sa-ease); }
.sa-cta:hover svg { transform: translateX(5px); }

.sa-cta-ghost {
  display: block;
  width: 100%;
  margin-top: 12px;
  height: 50px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: rgba(244, 241, 234, 0.03);
  color: var(--sa-dim);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.sa-cta-ghost:hover {
  color: var(--sa-parch);
  border-color: var(--sa-gold-line);
  background: rgba(197, 160, 89, 0.08);
}

.sa-res-legal {
  margin: 20px 0 6px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--sa-mute);
  text-align: center;
}

/* ============================================================
   4. 进场动效 — 纯 CSS Fade In Up
   ============================================================ */
@keyframes saFadeUp {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 注意：这里绝对不能加 will-change。
   will-change: transform 会让每个 .sa-reveal 元素永久成为一个层叠上下文，
   于是排在测算卡片之后的信任条会以同层级、后绘制的身份盖在卡片之上，
   展开的下拉面板就会被"穿透"（实测页面文字直接压在面板上）。
   一次性 0.95s 的淡入动画不需要 will-change。 */
.sa-reveal {
  opacity: 0;
  animation: saFadeUp 0.95s var(--sa-ease) forwards;
  animation-delay: var(--sa-d, 0s);
}

/* ============================================================
   5. RESPONSIVE — 断点区间互斥，不依赖源码顺序
      < 480           窄机
      480–809.98      手机
      810–1023.98     平板
      1024–1199.98    窄 PC（右列 ~412px）
      1200–1439.98    标准 PC
      ≥ 1440          宽屏
   注：1024–1199.98 与 ≥1024 曾经重叠，靠块序硬压；现已拆成互斥区间。
   ============================================================ */

/* 810–1199.98：导航间距与模态标题沿用模板平板档的收敛值。
   两条声明合并到一个区间块，避免 810–1023.98 与 1024–1199.98 各写一遍。 */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .sa-nav-links { gap: 24px; }
  .sa-res-name { font-size: 34px; }  /* 模板 H2 tablet */
}

/* 810–1023.98 单列平板（iPad 竖屏等）：
   纵向铺开。竖长屏上内容本来只有 ~500px 高，靠 100vh 居中会在上下各留 400px+
   空洞，像"悬空的孤岛"。这里把标题/副标题/卡片/信任条的间距改成随视口高度
   伸缩（vh clamp）——屏幕越高间距越大，内容自然撑满，短横屏则自动收紧。
   基线的 .sa-hero 已经是 flex + align-items:center + min-height:100svh，
   所以只需喂给它更多高度即可。 */
@media (min-width: 810px) and (max-width: 1023.98px) {
  .sa-h1 { font-size: 56px; }                          /* 恪守模板 H1 tablet 规格 */
  .sa-eyebrow { margin-bottom: clamp(20px, 2.4vh, 34px); }
  .sa-sub { margin-top: clamp(20px, 2.6vh, 36px); font-size: 18px; }
  .sa-lore { display: grid; margin-top: clamp(20px, 2.6vh, 36px); }  /* 平板也铺开内容 */
  .sa-lore p { font-size: 15px; }
  .sa-calc-card {
    margin-top: clamp(36px, 6vh, 88px);
    padding: 30px 32px 28px;
  }
  .sa-field-btn { height: 56px; }
  .sa-calc-btn { height: 60px; }
  .sa-trust { margin-top: clamp(26px, 4.6vh, 64px); font-size: 11.5px; gap: 12px 24px; }
  /* 平板光团略收，避免超出视口宽度 */
  .sa-hero-glow::before { width: min(900px, 92vw); height: min(560px, 60vw); }
  .sa-hero-glow::after  { width: min(480px, 52vw); height: min(380px, 44vw); }
}

@media (max-width: 809.98px) {
  .sa-root {
    --sa-container: calc(100vw - 48px);
    --sa-pad-y: 72px;
  }
  .sa-nav { inset: 12px 0 auto 0; }
  .sa-nav-inner { padding: 0 10px 0 20px; gap: 16px; }
  .sa-nav-links { display: none; }   /* 手机端收起文字导航，保留 Logo + CTA */
  .sa-logo { font-size: 12px; letter-spacing: 0.22em; }
  .sa-nav-btn { height: 40px; padding: 0 18px; font-size: 11px; }

  .sa-hero { padding-top: calc(var(--sa-nav-h) + 64px); }
  .sa-h1 { font-size: 40px; line-height: 1.1; }  /* 模板 H1 mobile */
  .sa-sub { font-size: 16px; margin-top: 20px; }
  .sa-eyebrow { margin-bottom: 22px; font-size: 10px; padding: 7px 14px; }

  .sa-calc-card { margin-top: 38px; padding: 20px; border-radius: var(--sa-r-card); }
  /* 手机端光团改为贴合卡片高度的竖椭，保持「悬浮于光上」的层次 */
  .sa-hero-glow::before { top: 62%; width: 108vw; height: min(520px, 92vw); }
  .sa-hero-glow::after  { right: -22%; top: 2%; width: min(420px, 88vw); height: min(340px, 70vw); }
  .sa-form-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sa-field-btn { height: 50px; }
  .sa-field.is-open .sa-field-panel { max-height: 228px; }
  .sa-calc-btn { height: 56px; font-size: 14px; padding: 0 20px; }
  .sa-form-note { font-size: 11px; line-height: 1.6; }
  .sa-trust { gap: 10px 18px; font-size: 10px; margin-top: 30px; }

  .sa-modal-overlay { padding: 14px; align-items: flex-end; }
  .sa-modal-card { max-height: 92vh; }
  .sa-modal-body { padding: 30px 20px 0; }
  .sa-res-seal { width: 74px; height: 74px; font-size: 14px; margin: 16px auto 14px; }
  .sa-res-name { font-size: 32px; }  /* 模板 H2 mobile */
  .sa-res-media { margin-top: 18px; aspect-ratio: 2 / 3; }
  .sa-res-media-ph { gap: 9px; padding: 14px; }
  .sa-res-media-ph i { font-size: 11px; }
  .sa-res-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-energy { padding: 18px 16px 16px; }
  .sa-bar { grid-template-columns: 78px minmax(0, 1fr) 36px; gap: 10px; }
  .sa-amulet { padding: 20px; }
  .sa-amulet h3 { font-size: 19px; }
  .sa-modal-actions { margin: 18px -20px 0; padding: 16px 20px 22px; }
  .sa-modal-actions::before { top: 10px; left: 20px; right: 20px; }
  .sa-cta { height: 54px; font-size: 14px; }
}

@media (max-width: 479.98px) {
  .sa-nav-btn { padding: 0 14px; letter-spacing: 0.06em; }
  .sa-h1 { font-size: 34px; }
  .sa-calc-card { padding: 16px; }
  .sa-modal-body { padding: 26px 16px 0; }
  .sa-res-name { font-size: 28px; }
  .sa-bar { grid-template-columns: 70px minmax(0, 1fr) 34px; }
  .sa-modal-actions { margin: 16px -16px 0; padding: 14px 16px 20px; }
  .sa-modal-actions::before { left: 16px; right: 16px; }
}

/* ============================================================
   PC 桌面端专项：左右经典分栏（Split Screen）
   ≥1024px 生效；纯 CSS Grid，不改 DOM 顺序，
   因此平板 / 手机的既有单列逻辑完全不受影响。
   ------------------------------------------------------------
   左列 55%：eyebrow → H1 → 副标题（左对齐舒展）
   右列 45%：测算卡片，垂直居中，如悬浮仪表盘
   左列第 4 行放信任条并沉底，把左列撑满，消除上下空洞
   ============================================================ */
@media (min-width: 1024px) {
  /* 容器放宽：宽屏吃掉更多横向空间，两侧死黑随之收窄。
     1024–1439 用 100vw-80 保持原手感；≥1440 单独提到 1440px（见下方 1440 档）。 */
  .sa-root { --sa-container: min(calc(100vw - 80px), 1440px); }

  .sa-hero { padding: calc(var(--sa-nav-h) + 76px) 0 92px; }

  /* 内容区从「居中窄列」变成「满宽双列」 */
  .sa-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);  /* 左 52% / 右 48%，文案区更开阔 */
    grid-template-rows: auto auto auto auto auto; /* eyebrow / H1 / 副标题 / 情绪描述 / 信任条 */
    column-gap: 56px;
    align-items: start;
    /* 行间距在最小高度内摊开（而不是把整组行居中留出上下死区）。
       居中时 5 条 auto 行的总高小于 min-height，多出来的空间会平均分到
       网格盒的上下两端 —— 实测 1440 下顶部就有 93px 空转，正是"内容悬空"的来源。
       space-between 把这部分空间还给行与行之间，容器高度被真正用满。 */
    align-content: space-between;
    max-width: none;                          /* 解除模板 900px 内容列限制 */
    text-align: left;                         /* 整体左对齐 */
    /* 竖向撑满：网格给一个随视口高度增长的最小高度，竖长视口（iPad Pro 竖屏
       1032×1376 等）下不再把内容缩成一团居中、上下各留几百像素死黑。
       上限 860px 防止超高超宽屏把左列拉得过于松散。
       注意：行高全部是 auto，用 align-content 居中，而不是拿 1fr 行把信任条
       顶到底部 —— 那样信任条会脱离文案、孤零零飘在卡片下方（实测过）。 */
    min-height: min(82svh, 860px);
  }

  .sa-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 26px; }

  .sa-h1 {
    grid-column: 1; grid-row: 2;
    font-size: 68px;                        /* 分栏后单行更收敛，避免右侧挤压 */
    line-height: 1.06;
    letter-spacing: -0.02em;
  }

  .sa-sub {
    grid-column: 1; grid-row: 3;
    max-width: 600px;
    margin: 24px 0 0;                       /* 左对齐：auto 换成 0 */
    font-size: 17px;
  }

  /* 新增两行情绪价值描述 + 灵性微标，撑满左列中段 */
  .sa-lore {
    display: grid;
    grid-column: 1; grid-row: 4;
    max-width: 600px;
    margin: 24px 0 0;
  }

  /* 信任条紧跟文案，不再被拉伸到网格底部 */
  .sa-trust {
    grid-column: 1; grid-row: 5;
    justify-content: flex-start;
    margin-top: 28px;
    gap: 10px 22px;
    font-size: 11px;
  }

  /* 右列测算卡片：跨满全部行并垂直居中。
     卡片用 justify-self:center —— 列宽 48% 在超宽视口下可到 800px+，
     而卡片上限 660px，若靠左对齐会在右侧留下 100px+ 的孤立空白，
     看起来像布局错位。居中后左右余量均等，视觉上是"有意留白"。 */
  .sa-calc-card {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 660px;
    margin: 0;                              /* 分栏后不再需要顶部大间距 */
    padding: 34px 36px 32px;
  }
  .sa-form-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sa-field-btn { height: 56px; font-size: 15px; padding: 0 20px; }
  /* 按钮文字在 1024 的窄右列里会折成两行 —— 收窄内边距 + 缩小字号，
     13px 时单行约 232px，最窄的右列（≈308px 内容宽）也放得下。
     刻意不加 white-space:nowrap：万一字体回退变宽，宁可折行也不要撑破卡片。 */
  .sa-calc-btn { height: 60px; font-size: 14px; padding: 0 18px; letter-spacing: 0; }
  /* 隐私提示同理：1024 时右列内容宽约 328px，11px 下这句要 ~339px 会折行。
     窄档压到 10.5px 并去掉字距即可单行；≥1280 恢复常规字号（见下方 1280 档）。 */
  .sa-form-note { font-size: 10.5px; gap: 5px; letter-spacing: 0; }

  /* ---- 横向铺开的氛围光：彻底消除两侧死黑 ----
     主光团拉到 2000px 宽并横向拉伸，光雾漫溢到屏幕两侧边缘。 */
  .sa-hero-glow::before {
    left: 50%;
    top: 52%;
    width: min(2000px, 128vw);
    height: min(1040px, 72vw);
    background: radial-gradient(closest-side,
                rgba(232, 198, 138, 0.26) 0%,
                rgba(197, 160, 89, 0.17) 32%,
                rgba(197, 160, 89, 0.08) 58%,
                rgba(197, 160, 89, 0.028) 78%,
                transparent 94%);
  }
  .sa-hero-glow::after {
    left: 2%;
    right: auto;
    top: 38%;
    width: min(1040px, 72vw);
    height: min(800px, 58vw);
    background: radial-gradient(closest-side,
                rgba(220, 164, 98, 0.22) 0%,
                rgba(197, 160, 89, 0.095) 50%,
                transparent 82%);
  }

  /* 已删除 4 条死声明（.sa-grid gap:28px / .sa-ritual-grid gap:28px /
     .sa-sec-head margin-bottom:72px / .sa-sec-title font-size:46px）：
     本块位于 baseline 规则之前，同优先级必被后面的基线覆盖，
     实测 1440px 下取到的始终是基线的 24px / 64px / 42px。
     删除不改变任何渲染结果；如需真正放大宽屏间距，应在文件末尾新增
     一块后置的 @media (min-width:1440px)，而不是在这里写。 */
}

/* 1024–1279 窄 PC 档：右列偏窄，隐私提示实测需要 348px。
   收窄列间距换取右列内容宽度，实测可给出 ~366px，一次解决提示折行与 CTA 拥挤。
   列份额沿用基线的 52/48，此处不再重复声明。 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .sa-hero-content { column-gap: 40px; }
}

/* ≥1280：右列宽度足够，隐私提示恢复常规字号与字距 */
@media (min-width: 1280px) {
  .sa-form-note { font-size: 12px; gap: 8px; letter-spacing: 0.04em; }
}

/* ≥1440：分栏更舒展，标题回到 72px 的模板大标题规格。
   容器已在 ≥1024 档放宽到 1440px，这里不再重复设置。 */
@media (min-width: 1440px) {
  .sa-hero { padding: calc(var(--sa-nav-h) + 88px) 0 104px; }
  .sa-hero-content { column-gap: 72px; }
  .sa-h1 { font-size: 72px; }
  .sa-sub { max-width: 620px; font-size: 18px; }
  .sa-lore p { font-size: 15.5px; }
  .sa-calc-card { padding: 38px 40px 36px; }
  .sa-field-btn { height: 58px; }
  .sa-calc-btn { height: 62px; }
}

/* ≥1920 超宽屏：容器继续随视口伸缩（92vw，上限 1680px），
   避免 2560 这类屏上两侧留下 600px 级死黑；主光团同步拉宽漫溢到边缘。 */
@media (min-width: 1920px) {
  .sa-root { --sa-container: min(92vw, 1680px); }
  .sa-hero-glow::before { width: min(2400px, 128vw); height: min(1200px, 72vw); }
}

/* 触屏设备关闭 hover 位移，避免“粘滞悬停” */
@media (hover: none) {
  .sa-calc-btn:hover, .sa-cta:hover, .sa-nav-btn:hover { transform: none; }
}

/* 无障碍：尊重系统减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .sa-root *, .sa-root *::before, .sa-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sa-reveal { opacity: 1; }

  /* 关闭下滑隐藏，避免「导航消失/出现」被无障碍设置判为动效干扰 */
  .sa-nav.is-hidden { transform: none; }
}

/* ============================================================
   6. 产品陈列网格 —— Collection
   承袭 Hedvig 模板的卡片语法：
     填充 #111 系深色 · 1px 描边环 · radius 16px · overflow hidden
     栅格 gap 24px（模板 repeat(2, minmax(50px,1fr)) 为同源节奏）
     区块留白 96px 40px / 手机 72px 24px
   ============================================================ */
.sa-collection {
  position: relative;
  padding: var(--sa-pad-y) 0;
  background:
    radial-gradient(78% 58% at 50% 0%, rgba(197, 160, 89, 0.07), transparent 64%),
    var(--sa-bg);
  scroll-margin-top: calc(var(--sa-nav-h) + 32px);
}
.sa-collection::before {          /* 与首屏之间的极细金分隔线 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sa-container);
  max-width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
              transparent, rgba(197, 160, 89, 0.30), transparent);
}

/* ---- 区块标题 ---- */
.sa-sec-head {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}
.sa-sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-bottom: 26px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: var(--sa-gold-wash);
  color: var(--sa-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sa-sec-title {
  font-size: 42px;                 /* 模板 H2 desktop */
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sa-parch);
}
.sa-sec-title em {
  font-style: italic;
  font-family: var(--sa-font-serif);
  font-weight: 500;
  color: var(--sa-gold);
}
.sa-sec-sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.66;
  color: var(--sa-dim);
}

/* ---- 滚动进场（模板的 translateY 渐显） ----
   必须放在 .sa-card 之前。
   .sa-io.is-in 与 .sa-card:hover 同为 (0,2,0)，若进场规则排在后面，
   它的 transform:none 会反压掉卡片悬停的 translateY(-6px)，上浮就没了。 */
.sa-io {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--sa-ease), transform 0.85s var(--sa-ease);
  transition-delay: var(--sa-d, 0s);
}
.sa-io.is-in { opacity: 1; transform: none; }

/* ---- 栅格 ---- */
.sa-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* ---- 卡片 ---- */
.sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--sa-r-card);
  border: 1px solid var(--sa-line);
  background: linear-gradient(180deg,
              rgba(244, 241, 234, 0.052), rgba(244, 241, 234, 0.014));
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  overflow: hidden;                /* 配合图片放大裁切 */
  transition: transform 0.55s var(--sa-ease),
              border-color 0.45s ease, box-shadow 0.55s ease;
}
.sa-card:hover {
  transform: translateY(-6px);
  border-color: var(--sa-gold-line);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.62),
              0 0 34px rgba(197, 160, 89, 0.15);
}

/* ---- 图片位 ---- */
.sa-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #1b1a18, #0d0d0c);
}
.sa-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.85s var(--sa-ease), filter 0.6s ease;
  filter: brightness(0.94) saturate(0.94);
}
.sa-card:hover .sa-card-media img {
  transform: scale(1.03);          /* 悬停微放大 */
  filter: brightness(1.02) saturate(1.02);
}
.sa-card-media::after {            /* 图片下缘渐隐，与卡身无缝衔接 */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(13, 13, 12, 0.88));
  pointer-events: none;
}

/* ---- 灵性属性徽标 ---- */
.sa-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: rgba(18, 18, 18, 0.72);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  color: var(--sa-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sa-card-badge.is-solid {
  background: linear-gradient(135deg, var(--sa-gold-hi), var(--sa-gold-lo));
  border-color: transparent;
  color: #14120e;
}

/* ---- 卡身 ---- */
.sa-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.sa-card-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sa-faint);
}
.sa-card-name {
  margin-top: 10px;
  font-family: var(--sa-font-serif);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sa-parch);
}
.sa-card-desc {
  flex: 1 1 auto;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--sa-dim);
}
.sa-card-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sa-line-soft);
}
.sa-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sa-card-price {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sa-parch);
  font-variant-numeric: tabular-nums;
}
.sa-card-note {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sa-mute);
  white-space: nowrap;
}

/* ---- 结缘加购按钮 ---- */
.sa-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: rgba(197, 160, 89, 0.10);
  color: var(--sa-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.4s ease, color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.45s ease, transform 0.4s var(--sa-ease);
}
.sa-card-add:hover {
  background: linear-gradient(135deg, var(--sa-gold-hi), var(--sa-gold-lo));
  border-color: transparent;
  color: #14120e;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.34);
}
.sa-card-add:focus-visible {
  outline: 2px solid var(--sa-gold-hi);
  outline-offset: 3px;
}
.sa-card-add.is-added {
  background: linear-gradient(135deg, var(--sa-gold-hi), var(--sa-gold-lo));
  border-color: transparent;
  color: #14120e;
  box-shadow: 0 0 24px rgba(197, 160, 89, 0.40);
  animation: saAdded 0.5s var(--sa-ease);
}
@keyframes saAdded {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* ---- 滚动进场（模板的 translateY 渐显）----
   规则本体已上移到 .sa-card 之前，此处不留重复定义。 */

/* ============================================================
   7. 产品网格响应式
   ============================================================ */
@media (max-width: 1199.98px) {
  .sa-sec-title { font-size: 34px; }        /* 模板 H2 tablet */
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-sec-head { margin-bottom: 48px; }
}

@media (max-width: 809.98px) {
  .sa-collection { padding: 72px 0; }       /* 模板 mobile 区块留白 */
  .sa-sec-head { margin-bottom: 36px; }
  .sa-sec-title { font-size: 32px; }        /* 模板 H2 mobile */
  .sa-sec-sub { font-size: 15px; }
  .sa-sec-eyebrow { margin-bottom: 20px; font-size: 10px; padding: 7px 14px; }
  .sa-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sa-card-body { padding: 18px 18px 20px; }
  .sa-card-name { font-size: 19px; }
  .sa-card-desc { font-size: 13px; }
  .sa-card-add { height: 44px; }            /* 触屏加大点按区 */
  .sa-collection::before { width: calc(100vw - 48px); }
}

@media (max-width: 479.98px) {
  .sa-sec-title { font-size: 28px; }
  .sa-card-media { aspect-ratio: 3 / 4; }
}

/* 触屏设备关闭悬停位移，避免“粘滞悬停” */
@media (hover: none) {
  .sa-card:hover { transform: none; }
  .sa-card:hover .sa-card-media img { transform: scale(1.001); }
  .sa-card-add:hover { transform: none; }
}

/* ============================================================
   8. 信任背书与古法工序条带
   沿用第 6 节的卡片语法（1px 描边环 · radius 16px · blur(12px)），
   此处为 3 列「大图 + 文字」结构，并在标题下加一段禅意金线。
   ============================================================ */
.sa-ritual {
  position: relative;
  padding: var(--sa-pad-y) 0;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(197, 160, 89, 0.055), transparent 66%),
    var(--sa-bg-raise);
  scroll-margin-top: calc(var(--sa-nav-h) + 32px);
}
.sa-ritual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sa-container);
  max-width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
              transparent, rgba(197, 160, 89, 0.30), transparent);
}

.sa-ritual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ---- 单张背书卡 ---- */
.sa-rite {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--sa-r-card);
  border: 1px solid var(--sa-line);
  background: linear-gradient(180deg,
              rgba(244, 241, 234, 0.052), rgba(244, 241, 234, 0.014));
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  overflow: hidden;
  transition: transform 0.55s var(--sa-ease),
              border-color 0.45s ease, box-shadow 0.55s ease;
}
.sa-rite:hover {
  transform: translateY(-6px);
  border-color: var(--sa-gold-line);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.62),
              0 0 34px rgba(197, 160, 89, 0.15);
}

/* ---- 占位图（4:3，比产品卡更扁，给文字留呼吸） ---- */
.sa-rite-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #1b1a18, #0d0d0c);
}
.sa-rite-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.85s var(--sa-ease), filter 0.6s ease;
  filter: brightness(0.94) saturate(0.94);
}
.sa-rite:hover .sa-rite-media img {
  transform: scale(1.03);          /* 与产品卡一致的悬停微放大 */
  filter: brightness(1.02) saturate(1.02);
}
.sa-rite-media::after {            /* 下缘渐隐，与卡身无缝衔接 */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(13, 13, 12, 0.88));
  pointer-events: none;
}

/* ---- 序号角标 ---- */
.sa-rite-no {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-gold-line);
  background: rgba(18, 18, 18, 0.72);
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
  color: var(--sa-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- 卡身 ---- */
.sa-rite-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 26px;
}
.sa-rite-glyph {
  width: 26px;
  height: 26px;
  margin-bottom: 16px;
  color: var(--sa-gold);
  opacity: 0.9;
}
.sa-rite-title {
  font-family: var(--sa-font-serif);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sa-parch);
}

/* ---- 禅意金线：中间一颗小菱点，两侧渐隐 ---- */
.sa-rite-rule {
  position: relative;
  height: 1px;
  width: 100%;
  margin: 16px 0 16px;
  background: linear-gradient(90deg,
              rgba(197, 160, 89, 0.42), rgba(197, 160, 89, 0.06));
}
.sa-rite-rule::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--sa-gold);
  transform: rotate(45deg);
  opacity: 0.75;
}

.sa-rite-copy {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--sa-dim);
}

/* ---- 底部「印章式」背书条 ---- */
.sa-rite-seal {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--sa-line-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sa-gold);
}
.sa-rite-seal svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0.92;
}

/* ============================================================
   9. 背书条带响应式
   断点区间互斥，不靠源码顺序取胜：
     < 810        → 1 列
     810–1023.98  → 2 列 + 第 3 张跨整行
     ≥ 1024       → 3 列等宽
   原先「2 列」写在 max-width:1199.98px，与 ≥1024 的 3 列规则在 1024–1199.98
   区间重叠，只能靠源码先后硬压——这里改成互斥区间，逻辑自洽。
   ============================================================ */
@media (min-width: 810px) and (max-width: 1023.98px) {
  .sa-ritual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 第 3 张跨满整行，避免 2 列布局留下孤立的半格 */
  .sa-ritual-grid > .sa-rite:last-child { grid-column: 1 / -1; }
  .sa-ritual-grid > .sa-rite:last-child .sa-rite-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 809.98px) {
  .sa-ritual { padding: 72px 0; }
  .sa-ritual-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sa-rite-body { padding: 22px 20px 22px; }
  .sa-rite-title { font-size: 20px; }
  .sa-rite-copy { font-size: 14px; }
  .sa-ritual::before { width: calc(100vw - 48px); }
}

@media (hover: none) {
  .sa-rite:hover { transform: none; }
  .sa-rite:hover .sa-rite-media img { transform: scale(1.001); }
}

/* 桌面端 ≥1024 不需要额外规则：base 已是 3 列，而 2 列只作用于
   810–1023.98、1 列只作用于 ≤809.98，区间互斥，base 自然胜出。
   原先这里重复声明了一遍 repeat(3,...)，属冗余，已删除。 */

/* ============================================================
   10. 页脚 —— 暗黑轻奢极简
   承袭模板 Footer：区块留白 96px 40px（手机 72px 24px）、
   底部法务条 max-width:880px + 1px 顶部分隔线（模板为 rgba(255,255,255,.12)，
   此处换成同透明度的香槟金以贴合本站配色）。
   ============================================================ */
.sa-footer {
  position: relative;
  padding: var(--sa-pad-y) 0 0;
  background: var(--sa-bg);
  border-top: 1px solid var(--sa-line);
}
.sa-footer::before {              /* 顶部细金线，收束整站 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sa-container);
  max-width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
              transparent, rgba(197, 160, 89, 0.34), transparent);
}

/* ---- 上半：品牌 + 三列链接 ---- */
.sa-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: 64px;
  align-items: start;
}

.sa-foot-mark {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sa-gold);
}
.sa-foot-title {
  margin-top: 18px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sa-parch);
}
.sa-foot-title em {
  font-style: italic;
  font-family: var(--sa-font-serif);
  font-weight: 500;
  color: var(--sa-gold);
}
.sa-foot-copy {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--sa-dim);
  max-width: 46ch;
}

/* 禅意收尾纹样：线 — 菱 — 线 */
.sa-foot-orn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  max-width: 210px;
}
.sa-foot-orn span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.34), transparent);
}
.sa-foot-orn span:last-child {
  background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.34));
}
.sa-foot-orn i {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--sa-gold);
  transform: rotate(45deg);
  opacity: 0.75;
}

/* ---- 链接列 ---- */
.sa-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.sa-foot-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sa-faint);
}
.sa-foot-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sa-foot-list a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sa-dim);
  text-decoration: none;
  transition: color 0.28s ease, transform 0.28s var(--sa-ease);
}
.sa-foot-list a::after {          /* 与导航一致的金色下划线动效 */
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--sa-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--sa-ease);
}
.sa-foot-list a:hover { color: var(--sa-parch); transform: translateX(3px); }
.sa-foot-list a:hover::after { transform: scaleX(1); }
.sa-foot-list a:focus-visible {
  outline: 2px solid var(--sa-gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 邮件订阅 ---- */
.sa-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 64px;
  padding: 34px 36px;
  border-radius: var(--sa-r-lg);
  border: 1px solid var(--sa-gold-line);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(197, 160, 89, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(244, 241, 234, 0.05), rgba(244, 241, 234, 0.014));
  -webkit-backdrop-filter: var(--sa-blur);
  backdrop-filter: var(--sa-blur);
}
.sa-news-h {
  font-family: var(--sa-font-serif);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--sa-parch);
}
.sa-news-p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--sa-dim);
  max-width: 42ch;
}

.sa-news-field {
  display: flex;
  gap: 10px;
}
.sa-news-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--sa-r-input);
  border: 1px solid var(--sa-line);
  background: rgba(18, 18, 18, 0.66);
  color: var(--sa-parch);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.sa-news-input::placeholder { color: var(--sa-mute); }
.sa-news-input:hover { border-color: var(--sa-gold-line); }
.sa-news-input:focus {
  outline: none;
  border-color: var(--sa-gold-line);
  background: rgba(18, 18, 18, 0.82);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.14);
}
.sa-news-input[aria-invalid="true"] {
  border-color: rgba(214, 122, 104, 0.62);
  box-shadow: 0 0 0 3px rgba(214, 122, 104, 0.14);
}

.sa-news-btn {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--sa-r-input);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--sa-gold-hi), var(--sa-gold-lo));
  color: #14120e;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(197, 160, 89, 0.22);
  transition: transform 0.4s var(--sa-ease), box-shadow 0.45s ease, filter 0.35s ease;
}
.sa-news-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(197, 160, 89, 0.40);
  filter: brightness(1.06);
}
.sa-news-btn:focus-visible {
  outline: 2px solid var(--sa-gold-hi);
  outline-offset: 3px;
}
.sa-news-btn.is-done {
  background: rgba(197, 160, 89, 0.16);
  border-color: var(--sa-gold-line);
  color: var(--sa-gold);
  box-shadow: none;
}

.sa-news-msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sa-gold);
}
.sa-news-msg.is-error { color: rgba(224, 138, 118, 0.95); }

/* ---- 底部法务条（模板：max-width 880px + 1px 顶线） ---- */
.sa-foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  max-width: 880px;
  margin: 64px auto 0;
  padding: 22px 0 30px;
  border-top: 1px solid var(--sa-line);
}
.sa-foot-copyr {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--sa-faint);
}

/* ---- 支付图标占位 ---- */
.sa-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sa-pay-i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--sa-line);
  background: rgba(244, 241, 234, 0.045);
  color: var(--sa-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: border-color 0.32s ease, color 0.32s ease, background 0.32s ease;
}
.sa-pay-i:hover {
  border-color: var(--sa-gold-line);
  background: rgba(197, 160, 89, 0.10);
  color: var(--sa-gold);
}

.sa-foot-note {
  flex: 1 1 100%;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sa-mute);
}

/* 视觉隐藏但读屏可达 */
.sa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   11. 页脚响应式
   ============================================================ */
@media (max-width: 1199.98px) {
  .sa-foot-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sa-foot-copy { max-width: 58ch; }
  .sa-news { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 28px; }
}

@media (max-width: 809.98px) {
  .sa-footer { padding: 72px 0 0; }
  .sa-foot-title { font-size: 26px; }
  .sa-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .sa-foot-list { margin-top: 14px; gap: 10px; }
  .sa-foot-list a { font-size: 13.5px; }
  .sa-news { margin-top: 44px; padding: 24px 20px; }
  .sa-news-h { font-size: 22px; }
  .sa-news-field { flex-direction: column; }   /* 手机端按钮换行，避免挤压输入框 */
  .sa-news-input, .sa-news-btn { height: 50px; width: 100%; }
  .sa-news-btn { padding: 0 20px; }
  .sa-foot-bar {
    margin-top: 44px;
    padding: 20px 0 26px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sa-foot-note { flex: none; }
  .sa-footer::before { width: calc(100vw - 48px); }
}

@media (max-width: 479.98px) {
  .sa-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sa-pay-i { min-width: 42px; padding: 0 8px; font-size: 10px; }
}


/* ==========================================================================
   商店接通层 —— 2026-09-27 新增
   作用：让 shop 页、商品详情页、购物车/结账等页面在深色主题下正常显示。
   首页 front-page.php 不受影响（首页 body 类是 sa-wp-home）。
   ========================================================================== */

/* ---------- 0. 非首页不做入场动画，避免 JS 未就绪时内容隐形 ---------- */
body.sa-wp-sub .sa-io { opacity: 1; transform: none; }

/* logo 改成链接后去掉默认下划线 */
a.sa-logo { text-decoration: none; color: var(--sa-parch, #f4f1ea); }
a.sa-logo em { color: var(--sa-gold, #c5a059); }

/* ---------- 1. 通用页面外壳 ---------- */
.sa-page, .sa-product { padding: 146px 0 100px; }

.sa-page-head { max-width: 780px; margin: 0 0 44px; }
.sa-page-title {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #f4f1ea;
  font-weight: 500;
}
.sa-page-sub { margin: 16px 0 0; color: rgba(244, 241, 234, 0.62); line-height: 1.7; }

.sa-page-body { max-width: 840px; color: rgba(244, 241, 234, 0.74); line-height: 1.75; }
.sa-page-body h2, .sa-page-body h3 { color: #f4f1ea; font-weight: 500; margin: 32px 0 12px; }
.sa-page-body p { margin: 0 0 16px; }
.sa-page-body a { color: #c5a059; }
.sa-page-body ul, .sa-page-body ol { padding-left: 22px; }

.sa-empty { padding: 48px 0; color: rgba(244, 241, 234, 0.55); font-size: 15px; }

/* ---------- 2. 面包屑 ---------- */
.sa-crumb {
  margin: 0 0 36px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.48);
}
.sa-crumb a { color: rgba(244, 241, 234, 0.62); text-decoration: none; }
.sa-crumb a:hover { color: #c5a059; }
.sa-crumb-sep { margin: 0 8px; opacity: 0.5; }
.sa-crumb-cur { color: rgba(244, 241, 234, 0.85); }

/* ---------- 3. 商品卡（首页 Collection 与 shop 列表共用） ---------- */
.sa-card-imgwrap { display: block; width: 100%; height: 100%; }
.sa-card-name a { color: inherit; text-decoration: none; }
.sa-card-name a:hover { color: #c5a059; }
.sa-card-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, #201f1c, #0e0e0d); }
.sa-card-price .woocommerce-Price-amount { color: #c5a059; font-weight: 600; font-size: 17px; }
.sa-card-price del .woocommerce-Price-amount { color: rgba(244, 241, 234, 0.4); font-weight: 400; font-size: 14px; }
a.sa-card-add { text-decoration: none; justify-content: center; }

/* 栅格响应式 */
@media (max-width: 1080px) { .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sa-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 4. 商品详情页深色适配 ---------- */
.sa-product { color: rgba(244, 241, 234, 0.78); }

.sa-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.sa-product div.product div.images,
.sa-product div.product .summary { float: none; width: auto; margin: 0; }
.sa-product div.product div.images img { border-radius: 14px; }
.sa-product div.product .woocommerce-product-gallery__wrapper { border-radius: 14px; overflow: hidden; }
.sa-product div.product .flex-control-thumbs { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.sa-product div.product .flex-control-thumbs li { width: 76px; margin: 0; }
.sa-product div.product .flex-control-thumbs img { border-radius: 8px; opacity: 0.55; }
.sa-product div.product .flex-control-thumbs img.flex-active,
.sa-product div.product .flex-control-thumbs img:hover { opacity: 1; }

.sa-product div.product .product_title {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2;
  color: #f4f1ea;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sa-product div.product p.price,
.sa-product div.product span.price { color: #c5a059; font-size: 24px; font-weight: 600; margin: 0 0 20px; }
.sa-product div.product p.price del { color: rgba(244, 241, 234, 0.4); font-weight: 400; font-size: 17px; }

.sa-product-product-details__short-description {
  color: rgba(244, 241, 234, 0.68);
  line-height: 1.75;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.18);
}

.sa-product div.product form.cart { margin: 0 0 22px; }
.sa-product div.product .variations { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.sa-product div.product .variations th,
.sa-product div.product .variations td { padding: 10px 0; border: 0; vertical-align: middle; text-align: left; }
.sa-product div.product .variations th.label label {
  color: rgba(244, 241, 234, 0.6);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.sa-product div.product .variations select,
.sa-product div.product form.cart .quantity input.qty {
  width: 100%;
  max-width: 360px;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(197, 160, 89, 0.28);
  background: rgba(244, 241, 234, 0.05);
  color: #f4f1ea;
  font-size: 14px;
}
.sa-product div.product .variations select option { background: #17161a; color: #f4f1ea; }
.sa-product div.product .reset_variations { color: rgba(244, 241, 234, 0.5); font-size: 12px; text-decoration: none; }

.sa-product div.product form.cart .button,
.sa-product div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  border: 1px solid rgba(197, 160, 89, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.2), rgba(197, 160, 89, 0.08));
  color: #c5a059;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.sa-product div.product form.cart .button:hover,
.sa-product div.product .single_add_to_cart_button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #c5a059; color: #121212; }
.sa-product div.product .single_add_to_cart_button.disabled,
.sa-product div.product .single_add_to_cart_button[disabled] { opacity: 0.5; cursor: not-allowed; }

.sa-product div.product .woocommerce-tabs { margin: 64px 0 0; clear: both; }
.sa-product div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 24px; display: flex; gap: 28px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.18);
}
.sa-product div.product .woocommerce-tabs ul.tabs::before { display: none; }
.sa-product div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.sa-product div.product .woocommerce-tabs ul.tabs li::before,
.sa-product div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.sa-product div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 0; color: rgba(244, 241, 234, 0.55);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.sa-product div.product .woocommerce-tabs ul.tabs li.active a { color: #c5a059; box-shadow: inset 0 -2px 0 #c5a059; }
.sa-product-Tabs-panel { color: rgba(244, 241, 234, 0.74); line-height: 1.78; }
.sa-product-Tabs-panel h2 { color: #f4f1ea; font-size: 20px; font-weight: 500; }
.sa-product-Tabs-panel table.shop_attributes th,
.sa-product-Tabs-panel table.shop_attributes td { border-color: rgba(197, 160, 89, 0.16); color: rgba(244, 241, 234, 0.72); padding: 10px 12px; }

.sa-product .related.products, .sa-product .upsells.products { margin: 72px 0 0; clear: both; }
.sa-product .related.products > h2, .sa-product .upsells.products > h2 { color: #f4f1ea; font-size: 22px; font-weight: 500; margin: 0 0 26px; }
.sa-product .related.products ul.products,
.sa-product .upsells.products ul.products {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.sa-product .related.products ul.products li.product,
.sa-product .upsells.products ul.products li.product { width: auto; margin: 0; float: none; text-align: left; }
.sa-product ul.products li.product img { border-radius: 12px; }
.sa-product ul.products li.product .woocommerce-loop-product__title { color: #f4f1ea; font-size: 14px; padding: 12px 0 6px; }
.sa-product ul.products li.product .price { color: #c5a059; font-size: 15px; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: rgba(197, 160, 89, 0.08);
  border-top: 1px solid rgba(197, 160, 89, 0.3);
  color: rgba(244, 241, 234, 0.85);
}
.woocommerce-message::before, .woocommerce-info::before { color: #c5a059; }

/* ---------- 5. 购物车 / 结账 / 账户 / 表单深色适配 ---------- */
.sa-page .woocommerce { color: rgba(244, 241, 234, 0.78); }
.sa-page .woocommerce table.shop_table {
  border: 1px solid rgba(197, 160, 89, 0.18);
  border-radius: 14px;
  border-collapse: separate;
  color: rgba(244, 241, 234, 0.78);
}
.sa-page .woocommerce table.shop_table th,
.sa-page .woocommerce table.shop_table td { border-color: rgba(197, 160, 89, 0.14); color: rgba(244, 241, 234, 0.78); padding: 14px; }
.sa-page .woocommerce table.shop_table thead th { color: #f4f1ea; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-page .woocommerce form .form-row label { color: rgba(244, 241, 234, 0.72); font-size: 13px; }
.sa-page .woocommerce form .form-row input.input-text,
.sa-page .woocommerce form .form-row textarea,
.sa-page .woocommerce form .form-row select {
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.22);
  border-radius: 10px;
  color: #f4f1ea;
  min-height: 46px;
  padding: 0 14px;
}
.sa-page .woocommerce form .form-row textarea { padding: 12px 14px; min-height: 120px; }
.sa-page .woocommerce form .form-row input.input-text:focus,
.sa-page .woocommerce form .form-row textarea:focus { outline: none; border-color: rgba(197, 160, 89, 0.6); }
.sa-page .woocommerce .cart_totals h2, .sa-page .woocommerce h2, .sa-page .woocommerce h3 { color: #f4f1ea; font-weight: 500; }
.sa-page .woocommerce-info, .sa-page .woocommerce-message { border-radius: 12px; }
.sa-page .woocommerce nav.woocommerce-pagination ul { border: 0; }
.sa-page .woocommerce nav.woocommerce-pagination ul li { border: 0; }
.sa-page .woocommerce nav.woocommerce-pagination ul li a,
.sa-page .woocommerce nav.woocommerce-pagination ul li span { color: rgba(244, 241, 234, 0.7); background: rgba(244, 241, 234, 0.05); border-radius: 8px; margin: 0 4px; }
.sa-page .woocommerce nav.woocommerce-pagination ul li span.current { background: #c5a059; color: #121212; }

/* ---------- 6. 响应式 ---------- */
@media (max-width: 900px) {
  .sa-product div.product { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sa-product .related.products ul.products,
  .sa-product .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-page, .sa-product { padding: 118px 0 72px; }
}
@media (max-width: 560px) {
  .sa-product .related.products ul.products,
  .sa-product .upsells.products ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   7. 商品详情页 v2（2026-09-27）
      变体按钮组 / 两栏布局 / 加购按钮 / 描述排版 / 信任条
   ========================================================================== */

/* ---- 7.1 变体按钮组：把 WooCommerce 的原生下拉换成主题风格的按钮 ---- */
.sa-product .variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px !important;
  padding: 0 !important;
  list-style: none !important;
}
.sa-product .variable-items-wrapper .variable-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(197, 160, 89, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(244, 241, 234, 0.045) !important;
  box-shadow: none !important;
  color: rgba(244, 241, 234, 0.82) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.sa-product .variable-items-wrapper .variable-item:hover {
  border-color: rgba(197, 160, 89, 0.72) !important;
  color: #f4f1ea !important;
  transform: translateY(-1px);
}
.sa-product .variable-items-wrapper .variable-item[data-selected="true"],
.sa-product .variable-items-wrapper .variable-item.selected,
.sa-product .variable-items-wrapper .variable-item[aria-checked="true"] {
  border-color: #c5a059 !important;
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.26), rgba(197, 160, 89, 0.10)) !important;
  color: #e9d2a0 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.35), 0 6px 18px -10px rgba(197, 160, 89, 0.7) !important;
}
.sa-product .variable-items-wrapper .variable-item.disabled,
.sa-product .variable-items-wrapper .variable-item.wvs-disabled {
  opacity: .35 !important;
  filter: grayscale(1);
}

/* ---- 7.2 两栏骨架：图库与信息列比例 ----
   图库粘性：此处原为 position:sticky + top:96px。
   ★ 2026-09-27 起**取消粘性**——粘性图库会让「整行居中的描述正文」印在照片上，
   线上实测复现，原因与证据见文件末尾 §11。这里保留 relative 以免被反复改来改去。 */
.sa-product div.product {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 58px;
}
.sa-product div.product div.images { position: relative; top: auto; }
.sa-product div.product .summary { max-width: 540px; }

/* 标题：长标题也压得住 */
.sa-product div.product .product_title {
  font-size: clamp(22px, 2.05vw, 30px) !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
}

/* 价格 */
.sa-product div.product p.price,
.sa-product div.product span.price { font-size: 22px !important; margin-bottom: 18px !important; }

/* 短描述：行宽与可读性 */
.sa-product-product-details__short-description {
  font-size: 14.5px;
  line-height: 1.82;
  color: rgba(244, 241, 234, 0.66);
}

/* 变体区：标签列收窄、清空链接低调 */
.sa-product div.product .variations { margin-bottom: 6px !important; }
.sa-product div.product .variations th.label { width: 84px; padding-top: 16px !important; }
.sa-product .reset_variations { display: inline-block; margin-top: 10px; font-size: 12px !important; }

/* ---- 7.3 数量 + 加购：并排对齐 ---- */
.sa-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px !important;
}
.sa-product div.product form.cart .quantity { margin: 0 !important; }
.sa-product div.product form.cart .quantity input.qty {
  width: 84px !important;
  max-width: 84px !important;
  height: 48px !important;
  border-radius: 12px !important;
  text-align: center;
}
.sa-product div.product form.cart .single_add_to_cart_button {
  flex: 1 1 210px;
  min-height: 48px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #d9b76d, #b9903f) !important;
  border: 1px solid rgba(217, 183, 109, 0.6) !important;
  color: #16150f !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  transition: filter .18s ease, transform .18s ease;
}
.sa-product div.product form.cart .single_add_to_cart_button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.sa-product div.product .stock { font-size: 13px; color: #9fd6a4; }

/* 商品元信息 */
.sa-product div.product .product_meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(197, 160, 89, 0.14);
  font-size: 12.5px;
  color: rgba(244, 241, 234, 0.5);
}
.sa-product div.product .product_meta a { color: rgba(244, 241, 234, 0.66); text-decoration: none; }
.sa-product div.product .product_meta a:hover { color: #c5a059; }

/* ---- 7.4 信任条（加购按钮下方） ---- */
.sa-trust {
  list-style: none !important;
  margin: 6px 0 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(197, 160, 89, 0.16);
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.028);
}
.sa-trust li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 12.5px; }
.sa-trust li + li { border-top: 1px solid rgba(244, 241, 234, 0.055); }
.sa-trust-k { color: rgba(197, 160, 89, 0.9); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.sa-trust-v { color: rgba(244, 241, 234, 0.7); text-align: right; }

/* ---- 7.5 描述区（自定义 tab，不走 the_content） ---- */
.sa-pdp-desc { max-width: 780px; }
.sa-pdp-desc h2 {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #c5a059; margin: 32px 0 12px; font-weight: 600;
}
.sa-pdp-desc h2:first-child { margin-top: 4px; }
.sa-pdp-desc p { font-size: 15px; line-height: 1.85; color: rgba(244, 241, 234, 0.72); margin: 0 0 16px; }
.sa-pdp-desc ul, .sa-pdp-desc ol { color: rgba(244, 241, 234, 0.72); line-height: 1.85; padding-left: 20px; }
.sa-pdp-desc strong { color: #f4f1ea; }

/* tab 样式 */
.sa-product-tabs ul.tabs { padding: 0 !important; margin: 44px 0 0 !important; border-bottom: 1px solid rgba(197, 160, 89, 0.18); }
.sa-product-tabs ul.tabs li a { font-size: 12.5px !important; letter-spacing: 0.12em; text-transform: uppercase; }
.sa-product-tabs .panel { padding-top: 26px; }

/* 缩略图 */
.sa-product div.product .flex-control-thumbs { gap: 10px !important; margin-top: 12px !important; }

/* ---- 7.6 相关商品 ---- */
.sa-product .related.products > h2,
.sa-product > h2 { font-size: 20px !important; color: #f4f1ea; margin: 56px 0 20px; }

/* ---- 7.7 商品页容器与两栏比例（2026-09-27 修正） ----
   主题默认 .sa-container 是按落地页设计的窄容器（实测 714px），
   商品详情页两栏排不开 → 商品页单独放宽，并且右列固定宽度。 */
.sa-product .sa-container {
  max-width: 1320px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.sa-product div.product {
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px) !important;
  gap: 56px !important;
}
/* 图片列不做粘性：祖先若有 overflow 会退化，反而更乱 */
.sa-product div.product div.images {
  position: relative !important;
  top: auto !important;
}
/* 图库不再被 WC 的 48% 限宽。
   ★★ 铁律：只给外层 div.images 定宽，**绝对不能**给
   .woocommerce-product-gallery__wrapper 加 width !important。
   原因（2026-09-27 线上实测踩过）：flexslider 靠**内联** width:800% 把 N 张图横排，
   一旦用 !important 把它压成 100%，每张幻灯片 664px 在 664px 容器里就换行堆叠
   （实测 slide 2/3/4 的 y = 897 / 1561 / 2225），再被 .flex-viewport 的
   overflow:hidden 整段裁掉 —— 表现就是「只看得到第 1 张主图，后面几张消失」。
   float: none 也一样会杀掉 flexslider 的内联布局，一并去掉。 */
.sa-product div.product div.images {
  width: 100% !important;
  float: none !important;
}
.sa-product div.product div.images img { width: 100%; height: auto; display: block; }

/* 缩略图：N 张等宽排成一行。
   WC 默认给 li 是 25% + 主题 gap:10px → 4 张就会超宽换行，出现「宽窄不一、两排」的乱象 */
.sa-product div.product .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.sa-product div.product .flex-control-thumbs li {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.sa-product div.product .flex-control-thumbs li img { width: 100%; height: auto; border-radius: 8px; }

/* 移动端：单列 */
@media (max-width: 900px) {
  .sa-product .sa-container { padding-left: 20px !important; padding-right: 20px !important; }
  .sa-product div.product { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
  .sa-product div.product .summary { max-width: 100%; }

  /* 移动端重排：把「选守护神 + 加购」提到长文案**之前**。
     原因（Melo 2026-09-27 反馈）：手机上要先划过一大段英文文案才够得到选规格区，
     而图库此时早已滚出屏幕，选起来完全没有参照。
     实测重排前：图库 237~844、短描述 993~1216、表单 1238~1672（视口高 900）
     → 表单落在第 2 屏。重排后表单紧贴价格，一屏内就能看到图 + 选规格。 */
  .sa-product div.product .summary { display: flex !important; flex-direction: column !important; }
  .sa-product div.product .summary > * { order: 5; }
  .sa-product div.product .summary > .product_title { order: 1; }
  .sa-product div.product .summary > .woocommerce-product-rating { order: 2; }
  .sa-product div.product .summary > .price { order: 2; }
  .sa-product div.product .summary > form.variations_form,
  .sa-product div.product .summary > form.cart { order: 3; }
  .sa-product div.product .summary > .woocommerce-product-details__short-description { order: 4; }
  .sa-product div.product .summary > .sa-trust { order: 6; }
  .sa-product div.product .summary > .product_meta { order: 7; }

  /* 注意：别给 .flex-viewport 加 max-height —— flexslider 会内联写死 height，
     压 max-height 只会把方图从下边裁掉（overflow:hidden），不是缩放。 */
}

/* 主题给 .sa-container 用了定宽变量（--sa-container），商品页必须同时解除 width */
.sa-product .sa-container {
  width: 100% !important;
  max-width: 1320px !important;
}

/* ==========================================================================
   8. 商品详情页 v3（2026-09-27 二次修正）
      实测定位（headless Chrome + DOM 盒模型探针，非猜测）：
      · 右列 summary 实际只有 250px 宽（= 520 × 48%），剩 270px 全空 → iPad/PC 大片留白
      · 描述标签页 / 相关商品被自动塞进栅格第 1、2 格 → 描述区只剩左列宽、相关商品卡压到 112px
      · 信任条 clientWidth 248 / scrollWidth 308 → 文字顶出边框（PC 截图那条「线」）
      · 相关商品按钮 display:inline-block（WC 选择器权重更高）→ 文字顶在按钮上沿，不居中
   ========================================================================== */

/* ---- 8.1 右列必须铺满自己的栅格列 ----
   WooCommerce 的 `.woocommerce div.product div.summary` 权重是 (0,3,2)，
   而我的 `.sa-product div.product .summary` 只有 (0,3,1) —— 类数相同、元素数更少，
   所以 WC 的 width:48% / float:right 一直在生效。必须 !important 压过去。 */
.sa-product div.product > .summary {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

/* ---- 8.2 描述标签页 / 相关商品 / 追加销售必须横跨两列 ---- */
.sa-product div.product > .woocommerce-tabs,
.sa-product div.product > .related,
.sa-product div.product > .upsells {
  grid-column: 1 / -1 !important;
}
.sa-product div.product > .related,
.sa-product div.product > .upsells { margin-top: 72px !important; }

/* ---- 8.3 相关商品：栅格铺开 + 按钮文字真正居中 ---- */
.sa-product .related ul.products,
.sa-product .upsells ul.products {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 26px !important;
}
.sa-product .related ul.products li.product,
.sa-product .upsells ul.products li.product { margin: 0 !important; }
.sa-product .related ul.products li.product a.button,
.sa-product .upsells ul.products li.product a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 16px 0 0 !important;
  padding: 0 14px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* ---- 8.4 信任条：内容不得溢出边框 ----
   原样式的 `.sa-trust span` 带 white-space:nowrap + 圆点，li 又是 flex space-between，
   最小内容宽度大于容器 → 直接顶出边框。这里改成两列网格、允许换行、去掉圆点。
   （首页那条 .sa-trust 是另一种排版，所以全部限定在 .sa-product 内） */
.sa-product .sa-trust {
  display: block !important;
  padding: 16px 18px !important;
}
.sa-product .sa-trust li {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 14px !important;
  white-space: normal !important;
}
.sa-product .sa-trust li > span {
  display: block !important;
  white-space: normal !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
}
.sa-product .sa-trust li > span::before { display: none !important; }
.sa-product .sa-trust-v { text-align: right !important; }

/* ---- 8.5 变体胶囊：标签变长后允许换行，别把文字截掉 ---- */
.sa-product .variable-items-wrapper .variable-item {
  white-space: normal !important;
  max-width: 100%;
}
.sa-product .variable-items-wrapper .variable-item .variable-item-span {
  white-space: normal !important;
  text-align: center;
  line-height: 1.25 !important;
}

/* ---- 8.6 选中变体的即时预览（移动端专用）----
   手机上点完胶囊，图库在屏幕外一屏高，用户看不到任何反馈。
   这里在胶囊正下方给一块「选中守护神」小卡，跟着选择实时换图。
   桌面端图库就在旁边，不显示。 */
.sa-var-preview { display: none; }
@media (max-width: 900px) {
  .sa-var-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 2px;
    padding: 12px;
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-radius: 14px;
    background: rgba(244, 241, 234, 0.03);
  }
  .sa-var-preview[hidden] { display: none !important; }
  .sa-var-preview img {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 10px;
    background: #1a1917;
  }
  .sa-var-preview-txt { min-width: 0; }
  .sa-var-preview-name { color: #f4f1ea; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
  .sa-var-preview-sub { margin-top: 5px; color: rgba(244, 241, 234, 0.58); font-size: 12px; letter-spacing: 0.04em; }
}

/* ==========================================================================
   9. 商品详情页 v4（2026-09-27 第三次打磨）
      Melo 反馈：① SKU 区上方空白太大 ② 点选时下方跳动 ③ 文字太普通
                ④ DESCRIPTION 标签白底丑 ⑤ 描述文案要居中 ⑥ PC 左列留白
      全部按 headless Chrome 实测定位（430 / 1440 两档视口）。
   ========================================================================== */

/* ---- 9.1 ★ 修一个我自己写错的选择器 ----
   旧文写成 `.sa-product-product-details__short-description`（少了 .woocommerce- 前缀），
   等于从上线起短描述一直在用 WooCommerce 的默认排版 —— 这是「文字普通」的一半原因。 */
.sa-product .woocommerce-product-details__short-description {
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: rgba(244, 241, 234, 0.68) !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.16) !important;
}

/* ---- 9.2 ★ DESCRIPTION 标签的白底在 li 上，不在 a 上 ----
   实测（1440）：`ul.tabs li` 的 backgroundColor = rgb(255,255,255)，而 li a 是透明的。
   旧规则只写了 background:none 且没加 !important，压不过 WooCommerce。 */
.sa-product div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sa-product div.product .woocommerce-tabs ul.tabs li a {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(244, 241, 234, 0.5) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.2em !important;
  padding: 14px 2px !important;
}
.sa-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: #c5a059 !important;
  box-shadow: inset 0 -1px 0 #c5a059 !important;
}

/* ---- 9.3 描述区：文案居中 + 呼吸感 ---- */
.sa-product .woocommerce-Tabs-panel--description { text-align: center; }
.sa-product .sa-pdp-desc {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.sa-product .sa-pdp-desc p,
.sa-product .sa-pdp-desc ul,
.sa-product .sa-pdp-desc ol,
.sa-product .sa-pdp-desc blockquote { text-align: center !important; }
.sa-product .sa-pdp-desc ul,
.sa-product .sa-pdp-desc ol { padding-left: 0 !important; list-style-position: inside; }
.sa-product .sa-pdp-desc p {
  font-size: 15.5px !important;
  line-height: 1.98 !important;
  color: rgba(244, 241, 234, 0.7) !important;
  margin: 0 0 20px !important;
  letter-spacing: 0.004em;
}

/* ---- 9.4 文字气质：标题与价格换衬线体（Google Fonts 已在商品页按需加载） ---- */
.sa-product div.product .product_title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.004em !important;
  line-height: 1.24 !important;
}
.sa-product div.product p.price,
.sa-product div.product span.price {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-size: 23px !important;
}
.sa-product .sa-pdp-desc h2,
.sa-product .woocommerce-Tabs-panel--description > h2 {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  font-size: 14px !important;
  color: #c5a059 !important;
  margin: 42px 0 16px !important;
}
.sa-product .sa-pdp-desc h2:first-child { margin-top: 6px !important; }

/* ---- 9.5 桌面端：收窄行间距 + 压缩右列，消掉左列下方那块空白 ----
   实测（1440）：左列图库高 801、右列 summary 高 962 → 左列矮 161px；
   再加 grid row-gap 56 + tabs margin-top 64 = 120px，合计 281px 的空白带。 */
@media (min-width: 901px) {
  .sa-product div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 498px) !important;
    column-gap: 52px !important;
    row-gap: 34px !important;
  }
  .sa-product div.product .woocommerce-tabs { margin-top: 28px !important; }

  /* 信任条改两列网格 → 右列少约 80px，落差显著变小 */
  .sa-product .sa-trust {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 24px !important;
    padding: 14px 18px !important;
  }
  .sa-product .sa-trust li {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    padding: 7px 0 !important;
  }
  .sa-product .sa-trust li + li { border-top: 0 !important; }

  /* 其余间距微收 */
  .sa-product div.product .product_title { margin-bottom: 8px !important; }
  .sa-product div.product p.price { margin-bottom: 14px !important; }
  .sa-product .woocommerce-product-details__short-description {
    margin-bottom: 18px !important; padding-bottom: 18px !important;
  }
  .sa-product div.product form.cart { margin: 16px 0 14px !important; }
  .sa-product div.product .product_meta { margin-top: 14px !important; padding-top: 12px !important; }
}

/* ---- 9.6 移动端：SKU 区上移 ----
   实测（430）：价格底 840 → form 顶 880（40px），form 内 table.variations 顶 892、
   th.label 独占 60px 一行（移动端 th/td 竖排），胶囊才从 970 开始。 */
@media (max-width: 900px) {
  .sa-product div.product .summary > .price { margin-bottom: 8px !important; }
  .sa-product div.product form.cart { margin: 6px 0 14px !important; }
  .sa-product div.product .variations th.label,
  .sa-product div.product .variations td { display: block !important; width: auto !important; }
  .sa-product div.product .variations th.label {
    padding: 0 0 6px !important;
    height: auto !important;
  }
  .sa-product div.product .variations th.label label { font-size: 10.5px !important; }
  .sa-product div.product .variations td { padding: 0 !important; }
  .sa-product div.product .variations { margin-bottom: 0 !important; }
  .sa-product .variable-items-wrapper { margin: 2px 0 0 !important; }
  .sa-product div.product .reset_variations { margin-top: 6px !important; }
}

/* ---- 9.7 点选不再跳动 ----
   实测（390）：点一个胶囊后 summary 高度 1225 → 1361（+136px，是预览块「出现」造成的）。
   处理：预览块常驻占位（[hidden] 时保留高度、视觉隐藏），高度固定。 */
@media (max-width: 900px) {
  .sa-var-preview { min-height: 118px !important; }
  .sa-var-preview[hidden] {
    display: flex !important;
    visibility: hidden !important;
  }
}

/* 选中态不再改字重（字重一变文字就变宽，可能引起胶囊换行 → 布局跳） */
.sa-product .variable-items-wrapper .variable-item[data-selected="true"],
.sa-product .variable-items-wrapper .variable-item.selected,
.sa-product .variable-items-wrapper .variable-item[aria-checked="true"] {
  font-weight: 500 !important;
}

/* ==========================================================================
   10. 商品详情页 v5（2026-09-27 第四次修正）
       ★ 点选跳动的**真根因**（前两次都判断错了）
   --------------------------------------------------------------------------
   实测（430）：点一个胶囊后，.summary 整体下移 195px —— 标题 y739→934、
   价格 y804→999、form y853→1048，而 summary 内部高度完全没变（Δ=0）。
   说明是**图库把它顶下去的**，不是预览块：

       主图   2000x2000（方） → 图库高 = 列宽 350
       变体图 1707x2560（竖） → 图库高 = 350 x 1.5 = 525     差 175px

   WooCommerce 切换变体时会换图库主图，flexslider 重算高度 → 下方内容全被推开。
   解法：让图库里的每一张图都按 1:1 渲染，高度从此与「选的哪张」无关。
   ========================================================================== */
.sa-product div.product .woocommerce-product-gallery__image img,
.sa-product div.product .flex-viewport img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.sa-product div.product .woocommerce-product-gallery__image,
.sa-product div.product .flex-viewport .slides > li {
  aspect-ratio: 1 / 1 !important;
}
/* 变体缩略图（flex-control-thumbs）不在上面两条的选择器里，保持原样不受影响 */

@media (min-width: 901px) {
  /* 图库粘性：2026-09-27 §11 已取消（会把描述正文印在照片上），此处不再重开 */
  .sa-product div.product div.images {
    position: relative !important;
    top: auto !important;
    align-self: start !important;
  }
  /* 再收一档间距，缩小右列与左列的落差（原落差 161px、空白带 281px） */
  .sa-product div.product { row-gap: 24px !important; }
  .sa-product div.product .woocommerce-tabs { margin-top: 20px !important; }
  .sa-product .woocommerce-product-details__short-description { line-height: 1.7 !important; }
  .sa-product .sa-trust { padding: 11px 18px !important; }
  .sa-product .sa-trust li { padding: 5px 0 !important; }
  .sa-product .variable-items-wrapper .variable-item {
    min-height: 36px !important; padding: 7px 15px !important;
  }
  .sa-product div.product .product_meta { margin-top: 10px !important; padding-top: 10px !important; }
}

/* ---- 10.1 未选中时不是「一块空白」，而是「待选」占位卡 ----
   高度与选中后完全一致（都是 118px），所以依旧不跳动；
   但内容换成虚线图位 + 引导文字，看上去是有意为之的提示。 */
@media (max-width: 900px) {
  .sa-var-preview[hidden] {
    display: flex !important;
    visibility: visible !important;
  }
  .sa-var-preview[hidden] img { display: none !important; }
  .sa-var-preview[hidden]::before {
    content: "";
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    border: 1px dashed rgba(197, 160, 89, 0.32);
    background: rgba(244, 241, 234, 0.03);
  }
  .sa-var-preview[hidden] .sa-var-preview-name {
    color: rgba(244, 241, 234, 0.5) !important;
    font-weight: 400 !important;
  }
  .sa-var-preview[hidden] .sa-var-preview-sub { color: rgba(244, 241, 234, 0.36) !important; }
}

/* ---- 10.2 信任条 key 列自适应 ----
   定宽 88px 会把 "MADE BY HAND" 折成两行；改成 minmax 让它按内容撑开。 */
@media (min-width: 901px) {
  .sa-product .sa-trust li {
    grid-template-columns: minmax(74px, auto) minmax(0, 1fr) !important;
  }
  .sa-product .sa-trust-k { white-space: nowrap; }
}

/* ==========================================================================
   11. 商品详情页 v6（2026-09-27 第五次修正）
       ★ 「描述文字印在商品图上」的真根因：图库的 position:sticky
   --------------------------------------------------------------------------
   现象（Melo 2026-09-27 截图）：往下滚到描述区，英文正文直接印在商品照片上，
   左半段完全读不出来，第一眼像「图片没加载 / 文字底色透明」。

   线上实测复现（headless Chrome + CDP，1920 视口，scrollY=1200，管理员 cookie）：
       .flex-viewport                  x 340..1030   y   98..788   ← 始终停在 top:98
       ul.tabs                         x 340..1580   y  -10..37
       .Tabs-panel--description        x 340..1580   y   79..2954
       面板首段                        x 580..1340   y  154..308

   机制：描述标签页是 `grid-column: 1 / -1` 的**整行**元素，宽 1240px；
   正文按 §9.3 居中在 760px（x580..1340）。而图库被 §10 设成 sticky、钉在 top:98
   不下来，于是正文滑到图库上方时，**因为面板在 DOM 里更靠后、后绘制，就盖在图上**。
   图库 340..1030 与正文 580..1340 水平重叠 450px —— 这是几何重叠，
   不是「谁压谁」的问题：加 z-index 只会变成「图盖住字」，同样不能读。
   粘性图库与「整行居中的描述正文」在设计上互斥，只能二选一。

   决定：**取消图库粘性**。代价是右列(913)比图库(690)高出的约 220px 下方会空一截，
   比让用户读到印在照片上的字可接受得多。
   若将来确实想要「图跟着走」，正确解法是给图片列加一层包裹 div、让 sticky 只在该
   包裹层（=第一栅格行）内滑动 —— 那要改 PHP 模板，不在 CSS 职责内。
   （已同步改掉 §7.2 与 §10 里的 sticky 声明，避免两条规则互相打脸；
     本条作为兜底，保证后加的同权重规则也压不过它。）
   ========================================================================== */
.sa-product div.product div.images {
  position: relative !important;
  top: auto !important;
}