/* ==========================================================================
   Global Language Hub — 全球多语言无缝智能切换中枢
   ==========================================================================
   部署路径：wp-content/themes/eastern-talisman/global-lang-hub.css
   配套文件：global-lang-hub.js（逻辑）· functions.php（入队 + 标记输出）

   这份样式表由三部分组成：

   1. `--glh-*` 设计变量 —— 想统一换配色只改 `.glh-scope` 里那几行。
   2. 组件样式 —— 胶囊、浮层、抽屉、搜索框、分组、卡片、空状态。
   3. Tailwind 工具类垫片（utility shim）。
      规格书给的 HTML 用的是 Tailwind 工具类（`px-2.5` `bg-white/5`
      `rounded-2xl`…），而本站主题是手写 CSS、**没有引入 Tailwind**。
      照抄那段 HTML 会渲染成裸样式，所以这里**逐条实现**了它用到的那些
      工具类，并全部限制在 `.glh-scope` 命名空间内 —— 类名一字不改，
      但**零泄漏**到主题其它元素上。

   命名空间约定：
     .glh-scope   工具类生效范围（触发胶囊宿主 + 传送层）
     .glh         触发胶囊宿主（顶栏内）
     .glh-layer   传送层（挂在 body 末尾，见 JS 中的 portal 说明）
     #global-lang-trigger / -panel / -drawer / -search  规格书指定的 id
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   --------------------------------------------------------------------------
   色板**直接取自本站主题** eastern-talisman/style.css 里 `.sa-root` 的真实取值，
   不是另起一套：

       --sa-gold      #c5a059   (主题里出现 25 次，主色)
       --sa-gold-hi   #dcbb7c   (9 次，高光)
       --sa-gold-lo   #a8853f   (暗金)
       --sa-parch     #f4f1ea   (22 次，正文/羊皮纸)
       --sa-bg        #121212   (11 次，暖黑底)
       --sa-bg-raise  #171614   (7 次，浮起的暖黑)

   规格书给的是一套**通用暗色 SaaS 皮肤**：冷蓝黑 #0E1320 + emerald #10b981 +
   slate 冷灰文字。放进这个"暖黑 + 金 + 羊皮纸"的东方珠宝站里，一眼就是外来组件 ——
   所以下面全部指向品牌色。

   ⚠ 关键：`.glh-layer` 挂在 `<body>` 下、是 `#saRoot` 的**兄弟节点**，
   继承不到 `.sa-root` 上定义的 `--sa-*`。所以这里用
   `var(--sa-x, 字面量)` 的写法：
     · 胶囊在 `.sa-root` 内部 → 取到主题真值，主题改色自动跟随；
     · 传送层在外部       → 取不到，落到字面量兜底。
   两处取值相同，不会出现两个色。
   -------------------------------------------------------------------------- */
.glh-scope {
  --glh-gold: var(--sa-gold, #c5a059);
  --glh-gold-hi: var(--sa-gold-hi, #dcbb7c);
  --glh-gold-lo: var(--sa-gold-lo, #a8853f);
  --glh-parch: var(--sa-parch, #f4f1ea);

  /* 强调色 = 品牌金（规格书原为 emerald #10b981，已按你的实际品牌改掉） */
  --glh-accent: var(--glh-gold);
  --glh-accent-soft: rgba(197, 160, 89, 0.10);   /* = --sa-gold-wash */
  --glh-accent-line: rgba(197, 160, 89, 0.55);
  --glh-accent-line-soft: rgba(197, 160, 89, 0.30);

  --glh-ink: #171614;                    /* = --sa-bg-raise，暖黑 */
  --glh-ink-95: rgba(23, 22, 20, 0.97);

  /* 金线：分隔与描边统一走这一族，不要再用纯白 */
  --glh-goldline: var(--sa-gold-line, rgba(197, 160, 89, 0.26));
  --glh-line: rgba(244, 241, 234, 0.10);         /* = --sa-line */
  --glh-line-soft: rgba(244, 241, 234, 0.06);    /* = --sa-line-soft */
  --glh-dim: rgba(244, 241, 234, 0.64);          /* = --sa-dim */
  --glh-faint: rgba(244, 241, 234, 0.40);        /* = --sa-faint */

  --glh-ease: var(--sa-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  --glh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Liberation Mono", monospace;
  --glh-serif: var(--sa-font-serif, "Cormorant Garamond", "Songti SC", Georgia,
               "Times New Roman", serif);
  --glh-r-pill: var(--sa-r-pill, 99px);
  --glh-r-lg: var(--sa-r-lg, 20px);
  --glh-r-input: var(--sa-r-input, 10px);

  /* 传送层挂在 `#saRoot` 之外，继承不到主题的字体，这里显式对齐 `--sa-font`。 */
  font-family: var(--sa-font, "Google Sans", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--glh-parch);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

.glh-scope *,
.glh-scope *::before,
.glh-scope *::after { box-sizing: border-box; }

.glh-scope :where(button, input) { font: inherit; color: inherit; }
.glh-scope :where(button) {
  margin: 0;
  background: none;
  border: 0;
  text-align: inherit;
}
.glh-scope :where(p, h2, h3) { margin: 0; }

/* --------------------------------------------------------------------------
   2. 顶栏触发胶囊
   -------------------------------------------------------------------------- */
.glh {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* 顶栏胶囊 —— 造型对齐主题自己的 `.sa-nav-btn`：同一条金线、同一枚药丸圆角、
   同一个金色文字。它应该看起来是那颗 CTA 的"兄弟"，而不是贴上去的第三方控件。
   规格书给的是 Tailwind 的 `rounded-lg bg-white/5 border-white/10 text-white`，
   在"暖黑 + 金"的体系里那是一块冷灰方块。这里用 id 选择器（优先级 1,0,0）盖掉，
   HTML 里的类名保持原样不动。 */
#global-lang-trigger {
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.16), rgba(197, 160, 89, 0.06));
  border: 1px solid var(--glh-goldline);
  border-radius: var(--glh-r-pill);
  color: var(--glh-gold);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.35s var(--glh-ease), background 0.35s var(--glh-ease),
              border-color 0.35s var(--glh-ease), box-shadow 0.45s var(--glh-ease);
}
/* 悬停 / 展开态：和 `.sa-nav-btn:hover` 一样「金底压深字」 */
#global-lang-trigger:hover,
.glh.is-open #global-lang-trigger {
  color: #121212;
  background: linear-gradient(180deg, var(--glh-gold-hi), var(--glh-gold-lo));
  border-color: var(--glh-gold);
  box-shadow: 0 0 0 5px rgba(197, 160, 89, 0.10),
              0 8px 22px rgba(197, 160, 89, 0.24);
}
#global-lang-trigger:focus-visible {
  outline: 2px solid var(--glh-gold);
  outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   国旗：用伪元素 + attr() 渲染，元素本身**不含任何文本节点**
   --------------------------------------------------------------------------
   为什么绕这一圈：WordPress 的 emoji 脚本挂了一个
     MutationObserver(body, {childList:true, subtree:true})
   凡是新插入的文本节点里带 emoji，它就把这段文字换成
     https://s.w.org/images/core/emoji/<版本>/svg/<码点>.svg
   的远程 <img>。而 twemoji 的 doNotParse（也就是 wp-exclude-emoji）
   只在**遍历子元素**时生效，对 parse 的根节点本身不生效 ——
   观察器回调恰好就是拿「新文本节点的父元素」当根去 parse 的，
   所以给祖先加 wp-exclude-emoji 挡不住动态插入的国旗。

   后果很实际：打开一次语言面板会向 s.w.org 发二十多个请求，
   慢一条就白一块，而 s.w.org 在部分网络环境下根本不通。

   伪元素不在 DOM 树里，观察器看不见、twemoji 也遍历不到，
   于是国旗稳定地由系统 emoji 字体绘制：零请求、零闪烁。
   原子性也没丢 —— 只改 data-flag 属性，aria-hidden 之外的可读名称
   由按钮上的 aria-label 提供。
   -------------------------------------------------------------------------- */
.glh-flag::before,
.glh-flags::before {
  content: attr(data-flag);
}
/* JS 没能接管时（脚本被拦/出错）也要有个兜底字形 */
#global-lang-flag::before { content: attr(data-flag); }

#global-lang-trigger .glh-flag {
  font-size: 13px;
  line-height: 1;
}
/* 语种代号对齐 `.sa-nav-btn` 的字距（0.10em），保持顶栏三件套同一种节奏 */
#global-lang-trigger .glh-code {
  letter-spacing: 0.10em;
  font-weight: 600;
}
/* 旋转箭头：展开时转 180°，规格书所说的 "旋转箭头" */
#global-lang-trigger .glh-caret {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.28s var(--glh-ease);
}
.glh.is-open #global-lang-trigger .glh-caret { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   3. Tailwind 工具类垫片（仅作用于 .glh-scope 内部）
   -------------------------------------------------------------------------- */
.glh-scope .inline-flex { display: inline-flex; }
.glh-scope .flex { display: flex; }
.glh-scope .flex-col { flex-direction: column; }
.glh-scope .items-center { align-items: center; }
.glh-scope .justify-between { justify-content: space-between; }
.glh-scope .w-full { width: 100%; }
.glh-scope .overflow-hidden { overflow: hidden; }
.glh-scope .cursor-pointer { cursor: pointer; }

.glh-scope .gap-1\.5 { gap: 0.375rem; }
.glh-scope .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.glh-scope .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.glh-scope .p-2\.5 { padding: 0.625rem; }
.glh-scope .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.glh-scope .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.glh-scope .p-5 { padding: 1.25rem; }
.glh-scope .p-6 { padding: 1.5rem; }
.glh-scope .mt-2 { margin-top: 0.5rem; }
.glh-scope .mb-4 { margin-bottom: 1rem; }
.glh-scope .pr-1 { padding-right: 0.25rem; }
.glh-scope .right-0 { right: 0; }
.glh-scope .bottom-0 { bottom: 0; }

.glh-scope .rounded-lg { border-radius: 0.5rem; }
.glh-scope .rounded-xl { border-radius: 0.75rem; }
.glh-scope .rounded-2xl { border-radius: 1rem; }
.glh-scope .rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.glh-scope .w-\[540px\] { width: 540px; }
.glh-scope .max-h-\[85vh\] { max-height: 85vh; }
.glh-scope .z-\[9999\] { z-index: 9999; }

.glh-scope .bg-white\/5 { background-color: rgba(244, 241, 234, 0.05); }
.glh-scope .bg-white\/10 { background-color: rgba(244, 241, 234, 0.10); }
.glh-scope .bg-white\/\[0\.02\] { background-color: rgba(244, 241, 234, 0.02); }
.glh-scope .bg-\[\#0E1320\] { background-color: var(--glh-ink); }
.glh-scope .bg-\[\#0E1320\]\/95 { background-color: var(--glh-ink-95); }
.glh-scope .hover\:bg-white\/10:hover { background-color: rgba(244, 241, 234, 0.10); }
.glh-scope .hover\:bg-emerald-500\/10:hover { background-color: var(--glh-accent-soft); }

.glh-scope .border { border-width: 1px; border-style: solid; }
.glh-scope .border-t { border-top-width: 1px; border-top-style: solid; }
.glh-scope .border-white\/5 { border-color: rgba(244, 241, 234, 0.05); }
.glh-scope .border-white\/10 { border-color: rgba(244, 241, 234, 0.10); }
.glh-scope .hover\:border-emerald-500\/30:hover { border-color: var(--glh-accent-line-soft); }
.glh-scope .border-emerald-500\/50 { border-color: var(--glh-accent-line); }
.glh-scope .focus\:border-emerald-500:focus { border-color: var(--glh-accent); }

.glh-scope .text-white { color: #f4f1ea; }
.glh-scope .text-slate-200 { color: #f4f1ea; }
.glh-scope .text-xs { font-size: 0.75rem; line-height: 1rem; }
.glh-scope .font-mono { font-family: var(--glh-mono); }
.glh-scope .font-medium { font-weight: 500; }
.glh-scope .placeholder-slate-400::placeholder { color: rgba(244, 241, 234, 0.42); }

.glh-scope .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.glh-scope .backdrop-blur-2xl {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
.glh-scope .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(0, 0, 0, 0.20);
}
.glh-scope .transition-all {
  transition-property: color, background-color, border-color, box-shadow,
                       opacity, transform;
  transition-duration: 0.18s;
  transition-timing-function: var(--glh-ease);
}
.glh-scope .transition-transform {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.glh-scope .duration-300 { transition-duration: 0.3s; }
.glh-scope .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.glh-scope .focus\:outline-none:focus { outline: none; }

/* 位置工具类只在有定位上下文的元素上生效，这里给浮层/抽屉显式定位 */
.glh-scope .absolute { position: absolute; }
.glh-scope .fixed { position: fixed; }
.glh-scope .inset-x-0 { left: 0; right: 0; }

/* --------------------------------------------------------------------------
   4. 传送层（遮罩 + 承载浮层/抽屉）
   --------------------------------------------------------------------------
   ⚠️ 为什么浮层不直接放在导航里：
      `.sa-nav-inner` 有 `backdrop-filter`、`.sa-nav` 有 `transform`，
      这两者都会**为 fixed 子元素创建包含块** —— 浮层会被关进导航条那
      64px 高的盒子里，底部抽屉永远滑不出来。
      所以 JS 把本层挂到 `document.body` 末尾，`.glh` 胶囊留在顶栏。
   -------------------------------------------------------------------------- */
.glh-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;          /* 整层永不拦截点击 */
}
.glh-layer[hidden] { display: none !important; }
/* 只有这三件自己吃点击：铺满屏的遮罩（点它=点击外部）与两个容器。
   ⚠️ 不能给 .glh-layer 本身开 pointer-events:auto —— 那一层 z-index 高于遮罩，
   点在空白处会命中它而不是遮罩，点击外部关闭就永远不触发。 */
.glh-layer .glh-overlay,
.glh-layer #global-lang-panel,
.glh-layer #global-lang-drawer { pointer-events: auto; }

.glh-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(10, 9, 7, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.glh-layer.is-open .glh-overlay { opacity: 1; }

/* 滚动锁定（抽屉滑出时） */
html.glh-lock,
body.glh-lock {
  overflow: hidden !important;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   5. 桌面浮层
   -------------------------------------------------------------------------- */
#global-lang-panel {
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transition: opacity 0.2s var(--glh-ease), transform 0.24s var(--glh-ease);
  /* 规格书的 `rounded-2xl`/`border-white/10`/`shadow-2xl` 换成品牌圆角 + 金线 +
     暖色投影。类名不动，只在这里覆盖渲染结果。 */
  border-radius: var(--glh-r-lg);
  border-color: var(--glh-goldline);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.82),
              0 0 0 1px rgba(197, 160, 89, 0.05),
              inset 0 1px 0 rgba(244, 241, 234, 0.05);
  /* JS 会写入 top / right 两个内联值，把浮层吸附到触发胶囊正下方。
     这里的 `right-0` / `mt-2` 仍是规格书给的那两个类，只是静态值被覆盖。 */
}
.glh-layer.is-open #global-lang-panel {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. 移动端底部抽屉
   -------------------------------------------------------------------------- */
#global-lang-drawer {
  transform: translateY(100%);
  border-top-color: var(--glh-goldline);
  box-shadow: 0 -20px 64px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(197, 160, 89, 0.14);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.glh-layer.is-open #global-lang-drawer { transform: translateY(0); }

/* 抽屉顶部的小把手 */
.glh-grabber {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(197, 160, 89, 0.32);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7. 标题行 + 搜索框
   -------------------------------------------------------------------------- */
.glh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
/* 标题用主题的衬线体（--sa-font-serif），和站点各段大标题同一个声音；
   副标题走金色小字距全大写 —— 主题里 `.sa-nav-btn` 也是这个节奏。 */
.glh-title {
  font-family: var(--glh-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--glh-parch);
  line-height: 1.3;
}
.glh-subtitle {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glh-gold);
  opacity: 0.85;
}
.glh-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--glh-goldline);
  background: rgba(197, 160, 89, 0.06);
  color: var(--glh-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.glh-close:hover {
  background: rgba(197, 160, 89, 0.16);
  border-color: var(--glh-gold);
  color: var(--glh-parch);
}
.glh-close:focus-visible { outline: 2px solid var(--glh-gold); outline-offset: 2px; }

#global-lang-search {
  color: var(--glh-parch);
  background-color: rgba(244, 241, 234, 0.05);
  border-radius: var(--glh-r-input);
  flex: 0 0 auto;
}
#global-lang-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   8. 可滚动列表区
   --------------------------------------------------------------------------
   ★ 这里是整块布局的关键：浮层/抽屉是 flex column，`.glh-content` 必须是
     **能收缩的 flex 子项**（flex:1 + min-height:0），否则它会按内容高度撑开、
     把 `.glh-list` 一起顶出容器，列表就永远滚不动（只会被 overflow:hidden 裁掉）。
     min-height:0 是必需的：flex 子项默认 min-height:auto，会拒绝收缩到内容高度以下。
   -------------------------------------------------------------------------- */
.glh-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.glh-list {
  flex: 1 1 auto;
  min-height: 0;                 /* 让 flex 子项真的能滚动，而不是把父级撑高 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-right: 0.25rem;        /* 规格书要求的 pr-1 */
}
.glh-list::-webkit-scrollbar { width: 8px; }
.glh-list::-webkit-scrollbar-track { background: transparent; }
.glh-list::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.22);
  border-radius: 999px;
}
.glh-list::-webkit-scrollbar-thumb:hover { background: rgba(197, 160, 89, 0.42); }
.glh-list { scrollbar-width: thin; scrollbar-color: rgba(197, 160, 89, 0.28) transparent; }

/* 分组 */
.glh-group { margin-bottom: 16px; }
.glh-group:last-child { margin-bottom: 4px; }
.glh-group[hidden] { display: none; }
.glh-group-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glh-gold);
  opacity: 0.9;
}
.glh-group-h em {
  font-style: normal;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 234, 0.32);
}

/* 大卡片网格：规格书要求的「顶部 2 列」 */
.glh-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.glh-grid-2 > .glh-card-lg[hidden] { display: none; }

/* 紧凑列表：欧洲区 */
.glh-grid-1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.glh-grid-1 > .glh-card[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. 卡片 —— 大卡（TOP 市场）
   -------------------------------------------------------------------------- */
.glh-card-lg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 0.75rem;
  border: 1px solid var(--glh-line-soft);
  background: linear-gradient(180deg,
              rgba(244, 241, 234, 0.038), rgba(244, 241, 234, 0.015));
  color: var(--glh-parch);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--glh-ease), border-color 0.18s var(--glh-ease),
              transform 0.18s var(--glh-ease);
}
.glh-card-lg:hover {
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.13), rgba(197, 160, 89, 0.05));
  border-color: var(--glh-accent-line-soft);
  transform: translateY(-1px);
}
.glh-card-lg:focus-visible {
  outline: 2px solid var(--glh-gold);
  outline-offset: 1px;
}
.glh-card-lg .glh-flags {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.06em;
  margin-top: 1px;
}
.glh-card-lg .glh-body { min-width: 0; flex: 1 1 auto; }
.glh-card-lg .glh-native {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f4f1ea;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glh-card-lg .glh-en {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: rgba(244, 241, 234, 0.52);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glh-card-lg .glh-markets {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(244, 241, 234, 0.36);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glh-card-lg .glh-codechip {
  font-family: var(--glh-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 234, 0.45);
}

/* 标签（推荐 / HOT / RTL适配） */
.glh-tags {
  position: absolute;
  top: 7px;
  right: 8px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.glh-tag {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, 0.12);
  background: rgba(244, 241, 234, 0.05);
  color: rgba(244, 241, 234, 0.62);
  white-space: nowrap;
}
.glh-tag.is-accent {
  border-color: var(--glh-accent-line-soft);
  background: var(--glh-accent-soft);
  color: #dcbb7c;
}
.glh-tag.is-hot {
  border-color: rgba(223, 160, 97, 0.34);
  background: rgba(223, 160, 97, 0.12);
  color: #dfa061;
}

/* --------------------------------------------------------------------------
   10. 卡片 —— 紧凑卡（欧洲区 / 亚太区）
   --------------------------------------------------------------------------
   规格书给的紧凑卡类串（flex items-center justify-between p-2.5 rounded-xl …）
   直接写在 HTML 上，这里只补主题重置后的必要修正与内部排版。
   -------------------------------------------------------------------------- */
.glh-card {
  gap: 8px;
  min-width: 0;
}
.glh-card .glh-flag {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.glh-card .glh-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glh-card .glh-name em {
  font-style: normal;
  color: rgba(244, 241, 234, 0.42);
  font-size: 10.5px;
}
.glh-card .glh-codechip {
  flex: 0 0 auto;
  font-family: var(--glh-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(244, 241, 234, 0.38);
}

/* --------------------------------------------------------------------------
   11. 选中态 + 金色对勾
   -------------------------------------------------------------------------- */
.glh-check {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--glh-accent);
}
.glh-card-lg .glh-check {
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 15px;
  height: 15px;
}
.glh-check svg { width: 100%; height: 100%; display: block; }

.glh-card-lg.is-active,
.glh-card.is-active {
  border-color: var(--glh-accent-line) !important;
  /* 用 background 简写而不是 background-color：
     基础态是渐变（background-image），只改 background-color 会被渐变盖住，
     金色只会透出来一点点，选中态就不够明确。 */
  background: linear-gradient(180deg,
              rgba(197, 160, 89, 0.20), rgba(197, 160, 89, 0.08)) !important;
}
.glh-card-lg.is-active { box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.18); }
.glh-card-lg.is-active .glh-check,
.glh-card.is-active .glh-check { display: inline-flex; }
/* 大卡右上角有标签时不与对勾打架：有标签就把对勾留在右下（默认位置） */

/* 「已识别但未生效」的预选态：虚线描边，与实线的选中态一眼可分。
   只在站点尚未接入翻译引擎时出现 —— 见 JS 的 paintSuggested()。 */
.glh-card-lg.is-suggested,
.glh-card.is-suggested {
  border-style: dashed;
  border-color: var(--glh-accent-line);
}

/* --------------------------------------------------------------------------
   12. 空状态 + 底部提示
   -------------------------------------------------------------------------- */
.glh-empty {
  display: none;
  padding: 30px 12px;
  text-align: center;
  color: rgba(244, 241, 234, 0.42);
  font-size: 12px;
  line-height: 1.6;
}
.glh-empty.is-on { display: block; }
.glh-empty b { color: rgba(244, 241, 234, 0.75); font-weight: 500; }

/* 底部「已识别到你的地区」提示条（无翻译引擎时才出现） */
.glh-hint {
  display: none;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 0.5rem;
  border: 1px dashed var(--glh-accent-line-soft);
  background: var(--glh-accent-soft);
  color: rgba(244, 241, 234, 0.66);
  font-size: 10.5px;
  line-height: 1.5;
}
.glh-hint.is-on { display: block; }
.glh-hint b { color: #dcbb7c; font-weight: 600; }

.glh-foot {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--glh-goldline);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(244, 241, 234, 0.30);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.glh-foot kbd {
  font-family: var(--glh-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(244, 241, 234, 0.12);
  background: rgba(244, 241, 234, 0.05);
  color: rgba(244, 241, 234, 0.55);
}

/* --------------------------------------------------------------------------
   13. 压制 Google 网页翻译自己塞进来的 UI
   --------------------------------------------------------------------------
   Google 的 element.js 会往页面里加三样东西，全都不要：

     1. 顶部横幅 iframe（.goog-te-banner-frame）+ 它给 body 加的 top:40px ——
        一条「Google 翻译」工具条，会把整站往下推 40px。
        初始化时已经传了 autoDisplay:false，这里再兜一层。
     2. 划词提示气泡（#goog-gt-tt / .goog-tooltip）。
     3. 被翻译段落的浅色高亮底（.goog-text-highlight）——
        整页每段都带底色，观感直接毁掉。

   选语言这件事由我们自己的胶囊负责，所以 Google 的控件一律不显示。
   -------------------------------------------------------------------------- */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}
/* 横幅出现时 Google 会给 body 加 top:40px，兜底拉回 0 */
body { top: 0 !important; }
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
/* 隐藏容器本身（lang-hub.php 里已 inline display:none，这里再兜一层） */
#global-lang-gt { display: none !important; }

/* --------------------------------------------------------------------------
   14. 响应式
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #global-lang-drawer { display: none !important; }
}
@media (max-width: 767px) {
  #global-lang-panel { display: none !important; }

  #global-lang-drawer .glh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #global-lang-drawer .glh-grid-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #global-lang-drawer .glh-title { font-size: 12px; }
  /* 390px 下两列紧凑卡每格只有 ~165px，括号里的国家名会把语言名挤成省略号。
     手机上以「语言名可读」优先，国家名仍然参与搜索（关键词表在 JS 的 kw 字段里）。 */
  #global-lang-drawer .glh-card-lg .glh-markets,
  #global-lang-drawer .glh-card .glh-name em { display: none; }
}

/* 顶栏右侧成组：让 space-between 仍按「左 Logo / 中导航 / 右操作区」三栏分布，
   加语言胶囊不会把导航挤离 Logo（详见 header.php 注释）。 */
.sa-nav-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.sa-nav-right > #global-lang-hub { margin-right: 12px; }

@media (max-width: 767px) {
  .sa-nav-right > #global-lang-hub { margin-right: 8px; }
  /* 手机端顶栏最紧：胶囊压到只保留旗帜 + 箭头，代号留在 aria-label 里，
     避免 390px 宽度下 Logo + 购物车 + 胶囊 + CTA 四件套横向溢出。 */
  #global-lang-trigger { padding-left: 0.5rem; padding-right: 0.5rem; gap: 0.25rem; }
}
@media (max-width: 430px) {
  #global-lang-trigger .glh-code { display: none; }
  #global-lang-trigger { padding-left: 0.4375rem; padding-right: 0.4375rem; }
}

/* --------------------------------------------------------------------------
   15. 无障碍 / 动效偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glh-scope *,
  .glh-scope *::before,
  .glh-scope *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .glh-list { scroll-behavior: auto; }
  #global-lang-panel { transform: none; }
}

@media print {
  .glh, .glh-layer { display: none !important; }
}