/* ==========================================================================
   PUPULAN — WordPress 适配样式
   main.css 与静态官网完全一致；本文件只补 WordPress 特有的部分：
   分页、新闻卡片链接态、文章详情排版、后台工具条偏移等。
   ========================================================================== */

/* --- WP 分页（paginate_links 输出 .page-numbers） ------------------------- */
.pagination .page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.pagination .page-numbers.dots {
  border-color: transparent;
}

/* --- 新闻卡片：标题作为链接输出 ------------------------------------------- */
.news-body h3 a {
  color: inherit;
  text-decoration: none;
}
.news-body h3 a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* --- 新闻卡片：真实缩略图（无特色图时仍用 .ph 占位块） -------------------- */
.news-card .news-img,
.news-card img.news-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 新闻卡片：READ MORE 置底对齐 ------------------------------------------
   官网原稿卡片文字固定长度无此问题；后台编辑的文章摘要长短不一，
   footer 用 margin-top:auto 压到卡底，摘要下留 24px 保底间距
   （等高卡片内容占满时 auto 归零，间距由它兜底）。 */
.news-card .news-body p { margin-bottom: 24px; }
.news-card .news-foot { margin-top: auto; }

/* --- 文章详情页（single.php，静态官网无对应设计） --------------------------
   2026-09-16 客户从三方案中选定「方案 A · 阅读版」：面包屑 + meta 行 +
   左栏「In this article」目录（滚动高亮）+ 顶部阅读进度线 + 上一篇/下一篇 +
   出品方栏 + 延伸阅读。交互脚本见 assets/js/single-post.js（仅文章页加载）。
   配色/线框全部取自 main.css 设计令牌，未引入新颜色。 ---------------------- */
#readProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  z-index: 300; /* 盖过 z-100 的固定页头，进度线全程可见 */
}

/* --- 页头：面包屑 + 眉题 + meta 行 ---------------------------------------- */
.page-head .eyebrow { margin-bottom: 18px; }
.page-head .post-meta { margin-top: 24px; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-meta .dot { color: var(--gold); }

/* --- 双栏：目录栏 + 正文 --------------------------------------------------- */
.read-section { padding-top: 72px; }
.read-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 720px);
  gap: 64px;
  justify-content: center;
  align-items: start;
}
.read-grid--single { grid-template-columns: minmax(0, 720px); }
.read-rail { position: sticky; top: calc(var(--header-total) + 32px); }
.toc-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.toc { border-left: 1px solid var(--line); }
.toc a {
  position: relative;
  display: block;
  padding: 9px 0 9px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.toc a:hover { color: var(--navy); }
.toc a.is-active { color: var(--navy); font-weight: 600; }
.toc a.is-active::before { opacity: 1; }
.rail-back {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 1180px) {
  .read-grid { grid-template-columns: minmax(0, 720px); }
  .read-rail { display: none; }
}

/* --- 正文排版 -------------------------------------------------------------- */
.post-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.article-body {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}
/* 首段作导语放大（正文由编辑器输出，无法加类，用结构选择器取首段） */
.article-body > p:first-of-type {
  font-size: 18px;
  line-height: 1.75;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 22px;
}
.article-body h2 {
  margin: 48px 0 16px;
  font-size: 24px;
  line-height: 1.35;
  color: var(--navy);
  scroll-margin-top: 150px; /* 锚点跳转时躲开固定页头 */
}
.article-body h3 {
  margin: 36px 0 12px;
  font-size: 19px;
  color: var(--navy);
}
.article-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.article-body strong { color: var(--navy); font-weight: 600; }
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}
.article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  font-style: italic;
}
.article-body ol {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.article-body ol li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin: 14px 0;
}
.article-body ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* --- 上一篇 / 下一篇 -------------------------------------------------------- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.post-nav .cell {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.post-nav .cell:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 54, 93, 0.08);
}
.post-nav .dir {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.post-nav .t {
  display: block;
  font-size: 15.5px;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.45;
}

/* --- 出品方栏 ---------------------------------------------------------------- */
.author-box {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  background: #fff;
}
.author-box img { width: 44px; height: 44px; flex: none; }
.author-box h4 { margin: 0 0 4px; font-size: 15px; }
.author-box p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.author-box .link-arrow { white-space: nowrap; margin-left: auto; }

/* --- 延伸阅读 ----------------------------------------------------------------- */
.keep-sec { padding: 88px 0; }
.keep-sec .section-head { margin-bottom: 44px; }
/* 卡片封顶 380px：文章少时（比如现在只剩 1 篇）不把单卡拉成通栏 */
.keep-sec .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); }

@media (max-width: 760px) {
  .post-nav { grid-template-columns: 1fr; }
}

/* --- 后台工具条偏移（登录浏览前台时） -------------------------------------- */
body.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* --- 首页 Hero 背景图（Home 页特色图，无图时回落到 .ph 占位块） ------------- */
.hero-media.has-image {
  background-size: cover;
  background-position: center;
}
/* 原站把渐变写在 .hero-media::before，但渲染盒子（content/定位）由 .ph 占位类提供；
   换成真实背景图后去掉 .ph，这里补上盒子让遮罩继续生效，
   并把右端调得更透（原站 0.52 → 0.16），让货轮清晰可见。 */
.hero-media.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 42, 73, 0.94) 0%,
    rgba(26, 54, 93, 0.74) 44%,
    rgba(26, 54, 93, 0.32) 80%,
    rgba(26, 54, 93, 0.16) 100%
  );
}

/* Hero 主标题：老牌洋行方案（V1）——Playfair Display 衬线，
   "Import & Export" 金色斜体（& 用正体 Inter 做连接符），金色短线眉题。 */
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #dcc79b;
  letter-spacing: 0.3em;
  font-size: 11.5px;
}
.hero .eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: #c0a062;
  flex: none;
}
.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.12;
  letter-spacing: 0;
  max-width: none;
  color: #fff;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: #dcc79b;
}
.hero h1 .amp {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* --- 内页 page-head Banner（页面设置了特色图时启用，接线见 functions.php） --- */
.page-head.has-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 0;
}
/* 遮罩与首页 Hero 同语言：左侧深、右侧透（图片主体在右） */
.page-head.has-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 42, 73, 0.94) 0%,
    rgba(26, 54, 93, 0.82) 48%,
    rgba(26, 54, 93, 0.50) 82%,
    rgba(26, 54, 93, 0.38) 100%
  );
}
.page-head.has-banner .container { position: relative; z-index: 1; }
.page-head.has-banner .breadcrumb { color: rgba(255, 255, 255, 0.72); }
.page-head.has-banner .breadcrumb a,
.page-head.has-banner .breadcrumb span { color: inherit; }
.page-head.has-banner .breadcrumb a:hover { color: #fff; }
.page-head.has-banner h1 { color: #fff; }
.page-head.has-banner p { color: rgba(255, 255, 255, 0.82); }

/* --- 品类图（媒体库有图输出 img，占位块样式沿用官网） ------------------------ */
.cat-card .media-img,
.svc-media .media-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

/* --- Contact Form 7 表单适配（输出在官网 .form-card / .field 结构里） -------- */
.field .wpcf7-form-control-wrap { display: block; }

/* 提交按钮：复刻 .btn--primary 外观 */
.form-card .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  margin-top: 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.form-card .wpcf7-submit:hover,
.form-card .wpcf7-submit:focus { background: var(--navy-deep); }

/* 校验与提交反馈：对齐 .form-alert 的视觉语言 */
.wpcf7-not-valid { border-color: #c0392b !important; }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: #c0392b; }
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 0;
  border-left: 2px solid var(--gold);
  background: var(--navy-tint);
  font-size: 14px;
  color: var(--ink-soft);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-left-color: #c0392b;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #2e7d32;
}
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* 隐藏 CF7 自带的字符计数（表单未启用，防御性保留） */
.wpcf7 .wpcf7-character-count { display: none; }

/* --- WordPress 后台注入的对齐类，保持克制 ---------------------------------- */
.legal-body img,
.article-body figure {
  max-width: 100%;
  height: auto;
}

/* --- CF7 附件栏：原生文件按钮文案随浏览器语言（中文浏览器显示“选择文件”），
     表单模板改为 .file-field 自定义结构，固定显示英文按钮 ---------------------- */
.field .file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.field .file-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.field .file-field:focus-within {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.08);
}
.field .file-btn {
  padding: 7px 16px;
  border: 1px solid var(--line);
  background: var(--navy-tint);
  font-size: 13px;
  color: var(--navy);
  white-space: nowrap;
}
.field .file-name {
  font-size: 14px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- GTranslate 语言切换挂件（悬浮固定页面右上角，插件设置
     Show floating language selector = top_right）-------------
   白底圆角卡片样式参照客户提供的 youtricot.com 效果图；配色（白底、深色
   文字、浅灰描边）在后台"设置 → GTranslate"里配置。这里负责插件设置做不到的三件事：
   1) 隐藏翻译时 Google 弹出的顶部横幅（免费版底层仍走 Google element.js，
      选语言后会出现 .goog-te-banner-frame 把页面顶下来）；
   2) 悬浮落位：插件给外层容器写死内联 top:0; right:8%——top:0 会压住固定
      头部的顶栏文字，8% 在宽屏下又与内容区对不齐，故用 !important 覆盖：
      默认头部下方悬浮、右缘对齐 .container（--header-total / --container
      随断点变化，移动端自动贴右上角）；≥1600px 宽屏改为贴页面右上角
      （顶栏下方、屏幕右缘 14px，客户指定落位）。1600 是容纳底线：挂件宽
      约 173px，窄于该值时容器右缘外留白不够，会压住 Get in Touch 按钮；
   3) 圆角与投影：插件生成的样式表选择器带随机哈希且不带圆角，只能以
      !important 压过；选中项改 border-box + 100% 宽，避免加内边距后与
      下拉面板（宽 173px）错位。 */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
.gt_switcher_wrapper {
  top: calc(var(--header-total) + 10px) !important;
  right: max(20px, calc((100% - var(--container)) / 2)) !important;
}
@media (min-width: 1600px) {
  .gt_switcher_wrapper {
    top: calc(var(--topbar-h) + 10px) !important;
    right: 14px !important;
  }
}
.gt_switcher_wrapper .gt_selected a {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.14) !important;
}
.gt_switcher_wrapper .gt_selected a img { opacity: 1 !important; }
.gt_switcher_wrapper .gt_option {
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 12px 28px rgba(26, 54, 93, 0.12) !important;
}

/* --- 品牌标：正式 logo 图替换官网稿的 "PU" 文字占位（见 header.php / footer.php 注释）。
     头部透明底直接展示；页脚沿用官网稿的白色衬块承托深蓝 logo，
     加 4px 内边距避免菱形顶到白块边缘。 */
.site-header .brand-mark { background: transparent; }
.site-header .brand-mark img,
.footer-brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.footer-brand .brand-mark { padding: 4px; }

/* --- 客户要求的样式差异：eyebrow 标签前的金色横线全站去掉 ------------------
   静态官网基准的 .eyebrow::before 会画一条 34px 横线（main.css 保持基准不动），
   客户确认全站去掉（首页 hero、About Pupulan、Service 的 RFQ、About 各区块、
   Contact 的 Inquiry Form / Company Info 等），在此统一隐藏，不再逐处覆盖。 */
.eyebrow::before { display: none; }

/* --- About 页图片位（后台「内容管理 → About 页」上传后启用） ------------------
   证书（.doc-strip 内 3:4）与展厅/仓库/展会（.grid-3 内 4:3）：
   官网基准只有 .ph 占位块，实图输出 .media-img，比例沿用 .ar-3-4 / .ar-4-3 类 */
.doc-item .media-img,
.split-media .media-img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
/* 证书行混排对齐（客户要求）：横版执照（4:3）与竖版占位/照片（3:4）同行时，
   矮图在格内垂直居中，各行说明文字统一压到行底对齐；
   等高格（竖版 3:4 之间、设施区 4:3 之间）剩余空间为零，此规则自动不生效 */
.doc-item { display: flex; flex-direction: column; }
.doc-item .media-img,
.doc-item .ph { margin-top: auto; margin-bottom: auto; }

/* --- 证书墙增至五张（2026-09-16 报关单位备案证明入列）------------------------
   main.css 基准 .doc-strip 固定 4 列，第 5 张会孤行换到第二排；
   桌面端（1080px 断点之上，与 main.css 的 2 列规则互不越界）改 5 列单排，
   单格约 222px 证书关键字段仍可读。客户如撤回一张变 4 张，删除本条即恢复基准。 */
@media (min-width: 1081px) {
  .doc-strip { grid-template-columns: repeat(5, 1fr); }
}

/* --- 首页「客户评价」三卡（静态官网无此区块，按 .feature 卡片语言扩展） ------ */
.tst-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 34px 30px 30px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tst-card:hover { border-color: var(--navy); box-shadow: 0 12px 30px rgba(26, 54, 93, 0.07); }
.tst-mark {
  display: block;
  margin-bottom: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
}
.tst-card blockquote { margin: 0 0 22px; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
/* 署名贴卡片底部对齐：评价文字有长有短，富余空间留给引文与署名之间（客户要求三卡署名对齐） */
.tst-card figcaption { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tst-card figcaption strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.tst-card figcaption span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* --- 首页「展会照片」栅格（后台「内容管理 → 首页内容」上传后启用；
     官网无此区块；4 列 → 平板 2 列 → 手机 1 列，断点与 main.css 栅格一致） ---- */
.fair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fair-item { margin: 0; }
.fair-item .media-img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  /* 悬浮观感与客户 Logo 圆形徽章（方案B）同款投影，照片浮在板块底色上 */
  box-shadow: 0 12px 28px rgba(26, 54, 93, 0.14);
}
.fair-item figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* hover 微放大 + 投影加深（与 .logo-strip img 同款参数，用户要求两区一致）；
   尊重系统"减少动态"设置 */
@media (prefers-reduced-motion: no-preference) {
  .fair-item .media-img { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .fair-item .media-img:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 34px rgba(26, 54, 93, 0.20);
  }
}
@media (max-width: 1080px) { .fair-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fair-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Service 页改版（服务视角）：分步流程
   客户参考图为「锯齿交错 + 橙色虚线 + 菱形数字徽章」的分步视觉，落地时：
   橙色换站点 --gold，插图换站内线性 SVG 图标（.feature-icon 同语言方框），
   步骤由 4 步改 6 步（3+3 两行，≥1081px 锯齿交错）。静态官网无对应区块，
   main.css 保持基准不动，本段样式全部落在本文件。
   原「优势横条」（.svc-adv*）随模板一并移除（2026-09-15，与首页重复）；
   流程区随之改回白底——原先夹在地图区（navy-tint）与流程区之间的深色横条
   拿掉后，两个 navy-tint 区块相邻会连成一片同色。
   ========================================================================== */

/* --- 分步流程：区块头照参考图做左「眉题+短段落」右「超大标题」分栏 ----------
   （底色为默认白，见上方说明） */
.svc-flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px 64px;
  align-items: center;
  margin-bottom: 72px;
}
.svc-flow-head p { margin: 18px 0 0; max-width: 380px; font-size: 16px; color: var(--ink-soft); }
.svc-flow-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; color: var(--navy); }
@media (max-width: 860px) {
  .svc-flow-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
}

/* --- 分步流程：步骤列表 -----------------------------------------------------
   基础（≤560px）：单列纵向时间线，左侧金色竖虚线流动，徽章骑在线上；
   ≥561px：两列栅格，列内横向流动虚线连接相邻步骤（每行末步不连线）；
   ≥1081px：三列（3+3），参考图的下行-上行锯齿节奏（列位移 0/44/14，
   第二行 22/66/36），虚线按位移角度微旋；
   ≥1201px：一行六列（客户要求六步并作一行），列窄故图标/字号略缩，
   锯齿改为更浅的连续波浪（位移 0/30/8/22/46/24），虚线跨列间隙连到下一步
   图标左缘、按相邻位移差微旋，末步不连线。锯齿用 position:top 位移而非
   transform——.reveal 进场动画占用 transform，二者不能叠加在同一元素上。 */
.svc-flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-flow::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--gold) 0 9px, transparent 9px 18px);
  animation: svc-flow-dash-y 1s linear infinite;
}
.svc-flow-step { position: relative; padding: 0 0 44px 76px; }
.svc-flow-step:last-child { padding-bottom: 0; }

/* 菱形数字徽章：旋转 45° 的圆角方块，内层数字反转回来 */
.svc-flow-num {
  position: absolute;
  top: 8px;
  left: 4px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--gold);
  border-radius: 6px;
  transform: rotate(45deg);
  box-shadow: 0 6px 14px rgba(192, 160, 98, 0.38);
}
.svc-flow-num span {
  transform: rotate(-45deg);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

/* 步骤视觉锚点：.feature-icon 同语言方框（白底细边框），图标放大到 48px */
.svc-flow-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
}
.svc-flow-icon svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.3; }

.svc-flow-step h4 { margin: 22px 0 10px; font-size: 16.5px; color: var(--navy); }
.svc-flow-step > p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }

/* 虚线流动动画：repeating-linear-gradient 平移一个虚线周期即无缝循环 */
@keyframes svc-flow-dash-x {
  to { background-position: 18px 0; }
}
@keyframes svc-flow-dash-y {
  to { background-position: 0 18px; }
}

@media (min-width: 561px) {
  .svc-flow::before { content: none; }
  .svc-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; }
  .svc-flow-step { padding: 26px 0 0; }
  .svc-flow-num { top: -6px; left: -12px; }
  .svc-flow-icon { width: 84px; height: 84px; }
  .svc-flow-icon svg { width: 48px; height: 48px; }
  .svc-flow-step::after {
    content: "";
    position: absolute;
    top: 67px;
    left: 108px;
    width: calc(100% - 84px);
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--gold) 0 9px, transparent 9px 18px);
    animation: svc-flow-dash-x 1s linear infinite;
    transform-origin: left center;
  }
  .svc-flow-step:nth-child(even)::after { content: none; }
  .svc-flow-step:nth-child(odd)::after { transform: rotate(3deg); }
  .svc-flow-step:nth-child(even) { top: 28px; }
}
@media (min-width: 1081px) {
  .svc-flow { grid-template-columns: repeat(3, 1fr); gap: 72px 48px; }
  .svc-flow-step:nth-child(1) { top: 0; }
  .svc-flow-step:nth-child(2) { top: 44px; }
  .svc-flow-step:nth-child(3) { top: 14px; }
  .svc-flow-step:nth-child(4) { top: 22px; }
  .svc-flow-step:nth-child(5) { top: 66px; }
  .svc-flow-step:nth-child(6) { top: 36px; }
  .svc-flow-step:nth-child(even)::after { content: ""; }
  .svc-flow-step:nth-child(3n)::after { content: none; }
  .svc-flow-step:nth-child(1)::after,
  .svc-flow-step:nth-child(4)::after { transform: rotate(7deg); }
  .svc-flow-step:nth-child(2)::after,
  .svc-flow-step:nth-child(5)::after { transform: rotate(-5deg); }
}

/* 一行六列：虚线从本步图标右缘跨过 28px 列间隙、正好接到下一步图标左缘
   （left 82 + width 100%-54 = 列宽+28），旋转角按相邻锯齿位移差取值 */
@media (min-width: 1201px) {
  .svc-flow { grid-template-columns: repeat(6, 1fr); gap: 72px 28px; }
  .svc-flow-step::after { top: 61px; left: 82px; width: calc(100% - 54px); }
  .svc-flow-icon { width: 72px; height: 72px; }
  .svc-flow-icon svg { width: 40px; height: 40px; }
  .svc-flow-num { top: -8px; left: -10px; }
  .svc-flow-step h4 { margin-top: 20px; font-size: 15px; }
  .svc-flow-step > p { font-size: 13.5px; }
  .svc-flow-step:nth-child(1) { top: 0; }
  .svc-flow-step:nth-child(2) { top: 30px; }
  .svc-flow-step:nth-child(3) { top: 8px; }
  .svc-flow-step:nth-child(4) { top: 22px; }
  .svc-flow-step:nth-child(5) { top: 46px; }
  .svc-flow-step:nth-child(6) { top: 24px; }
  .svc-flow-step:nth-child(even)::after { content: ""; }
  /* 覆盖三列布局的 3n 规则：一行六列时只有第 6 步是末步，第 3 步要恢复连线 */
  .svc-flow-step:nth-child(3)::after { content: ""; }
  .svc-flow-step:nth-child(6)::after { content: none; }
  .svc-flow-step:nth-child(1)::after { transform: rotate(13deg); }
  .svc-flow-step:nth-child(2)::after { transform: rotate(-10deg); }
  .svc-flow-step:nth-child(3)::after { transform: rotate(6deg); }
  .svc-flow-step:nth-child(4)::after { transform: rotate(11deg); }
  .svc-flow-step:nth-child(5)::after { transform: rotate(-10deg); }
}

/* 动画可停：跟随系统「减少动态效果」设置（main.css 的 reduce 规则只压 transition，
   管不到 animation，这里单独停掉虚线流动） */
@media (prefers-reduced-motion: reduce) {
  .svc-flow::before,
  .svc-flow-step::after { animation: none; }
}

/* --- RFQ 区块改浅底（客户 2026-09-15：黑剪影图在深藏青底上对比生硬，
   改 --navy-tint 浅底——客户附图指定色，与首页浅色区块同源；改后黑剪影
   在浅底上恢复原图观感）。main.css 的 .rfq-list 为深底白字设计且属样式
   基准不动，浅底配色差异全部在此覆盖 ------------------------------- */
.svc-rfq-section { background: var(--navy-tint); }
.svc-rfq-section h2 { color: var(--navy); }
.svc-rfq-section .rfq-list li { border-bottom-color: rgba(26, 54, 93, 0.16); }
.svc-rfq-section .rfq-list strong { color: var(--navy); }
.svc-rfq-section .rfq-list em { color: var(--ink-soft); }

/* --- RFQ 区块：握手剪影装饰图（客户 2026-09-15 要求，替换与页尾 CTA 重复的
   SEND INQUIRY 按钮；图为黑剪影透明底 WebP，位置沿用按钮原来的 28px 上边距） -- */
.rfq-fig {
  width: min(320px, 72%);
  height: auto;
  margin-top: 28px;
}

/* ==========================================================================
   Service 页「全球贸易版图」区块（点阵世界地图 + 温州→主要市场弧线）
   底图为静态 SVG（assets/img/world-map-dots.svg，由 bin/tools/world/gen-world-dots.py
   从 Natural Earth 公共领域数据生成，viewBox 2000×1000）；交互层为模板内联 SVG
   （弧线 + 城市光点 + 标签），两图层绝对定位叠放、同 viewBox 等比对齐。
   静态官网无对应区块，main.css 保持基准不动，本段样式全部落在本文件。
   ========================================================================== */

.svc-map-section { background: var(--navy-tint); }

/* --- 布局（2026-09-17 改版，客户按 .temp 评审页定稿，参考独立站 glintmade 版式）---
   左栏（copy）= 眉题 + 两行标题 + 说明 + 2×2 要点格；右栏 = 地图本体（样式未动）；
   图例行按客户要求不放。
   2026-09-20 地图放大三轮复盘（客户要求“搞大一点、利用好右侧空间”）：全幅出血与
   半出血方案均被否——客户明确**“充分利用”=容器以内的右侧空间，地图必须像其他板块
   一样被限制在 1240px 容器 padding 内**。终态：恢复 .container 包裹的标准两列布局；
   放大手段=裁掉底图 SVG 画布底部空白（viewBox 2000×812，见 gen-world-solid.py
   VIEWBOX_H），同样 692px 列宽下图形有效面积比原 2:1 画布更大且无内部悬空。 */
.svc-map-grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  grid-template-areas: "copy map";
  column-gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
.svc-map-copy { grid-area: copy; }
.svc-map-grid .svc-map { grid-area: map; }
/* 眉题不带左侧金线（客户明确要求；main.css 的 .eyebrow 默认线在此区块关闭） */
.svc-map-copy .eyebrow::before { display: none; }
.svc-map-copy h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  color: var(--navy);
  font-weight: 700;
}
.svc-map-copy h2 em { font-style: normal; color: var(--gold); }
.svc-map-lede { margin: 18px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; }
/* 左栏 2×2 要点格：顶部分隔线 + 每格左竖线；标签型内容，与底部条带数字错开 */
.svc-map-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.svc-map-facts div { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.svc-map-facts dt {
  color: var(--navy);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.svc-map-facts dd { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
/* 底部四卡数据条带（.svc-map-stats）样式已随区块一起移除（2026-09-20 客户要求） */

/* --- 滚动条带（2026-09-17 客户要求，参考站 glintmade production highlights 同款）---
   全幅横贯、夹在地图区块与流程区块之间作分隔带（2026-09-17 客户调整：出内容列、
   去圆角）；内容两份接力向左无缝滚动，悬停暂停；文案来自后台 svc_map_ticker
   （一行一条），模板复制两份输出。 */
.svc-map-ticker {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
/* 左右渐隐遮罩：滚动进出条带边缘时淡出，参考站同款处理 */
.svc-map-ticker::before,
.svc-map-ticker::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
}
.svc-map-ticker::before { left: 0;  background: linear-gradient(90deg, var(--navy) 12%, transparent); }
.svc-map-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--navy) 12%, transparent); }
.svc-map-ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: svcTicker 34s linear infinite;
}
.svc-map-ticker:hover .svc-map-ticker-track { animation-play-state: paused; }
.svc-map-ticker-group { display: flex; flex: 0 0 auto; }
.svc-map-ticker-group > span {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 30px;
  border-right: 1px solid rgba(255, 255, 255, .13);
  white-space: nowrap;
}
.svc-map-ticker-group svg { color: var(--gold); flex: 0 0 auto; }
.svc-map-ticker-group b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
}
@keyframes svcTicker { to { transform: translateX(-50%); } }
@media (max-width: 680px) {
  /* 窄屏停用滚动，退化为普通可读列表条（参考站同做法：隐藏接力副本） */
  .svc-map-ticker-track { animation: none; width: 100%; overflow-x: auto; }
  .svc-map-ticker-group[aria-hidden="true"] { display: none; }
  .svc-map-ticker-group { width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-map-ticker-track { animation: none; }
}
/* ≤980px 退化为上下堆叠（左栏在上、地图全宽）；≤680px 条带 2×2 */
@media (max-width: 980px) {
  .svc-map-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "map";
  }
  .svc-map-facts { margin-top: 26px; }
}

/* 地图主体：宽度=容器内右栏全宽，画布 2:1——比 viewBox 的 2000×812 等比高度
   （281px）更高（346px，客户要求“高度放高一些”）；两层 SVG 均以
   preserveAspectRatio="none" 纵向填满（约 +23% 轻微拉伸），弧线用
   vector-effect 保线宽均匀（见 .map-arc）。垂直居中于左栏文案块。
   overflow 兜底，防止弧线出界撑出横向滚动条。 */
.svc-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  /* 地图为展示性图形：禁止划选标签文字（点击温州光点拖动时会出现选区与 I 形光标），
     光标固定为默认箭头 */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.svc-map-base,
.svc-map-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* 交互层整层不吃鼠标，只留城市光点可悬停（.map-city 重新打开） */
.svc-map-overlay { pointer-events: none; }

/* --- 航线「接力单发」动效（2026-09-14 客户从 .temp 演示定稿方案A）-------------
   每条弧线：画入 → 到站亮一拍 → 从温州端收线 → 静默到本轮结束；滑行光点
   （.map-runner）骑在画线前锋上，到站被城市光点吸收（爆亮 + 外扩光环）。
   时刻表与周期/延迟由模板按发射顺序算成具体数值内联写入（部分浏览器对
   var()+calc() 组合的 animation-delay 会整条失效，故动画属性一律不走变量），
   本段只放静态属性与关键帧。fill-mode:backwards 让弧线在待发期间保持
   0% 帧的隐藏状态；pathLength=100（模板已加）把 dash 数值归一化。 */
.map-arc {
  fill: none;
  stroke: var(--route, var(--gold));
  stroke-width: 2.5;
  stroke-opacity: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  /* 注意勿加 vector-effect:non-scaling-stroke（2026-09-20 曾加后致线宽从 ~0.87px
     变 2.5px 粗了近三倍，观感回不去已回退）——2.5 是 viewBox 单位，随整体缩放
     后约 0.87~1.1px 细线；纵向拉伸带来的线宽各向差异约 13%，肉眼不可辨。 */
}
@keyframes aLine {
  0%    { stroke-dashoffset: 100; opacity: 1; animation-timing-function: ease-out; }
  19.4% { stroke-dashoffset: 0; }                 /* 1.26s 画到城市 */
  28.7% { stroke-dashoffset: 0; }                 /* 亮 0.6s */
  38%   { stroke-dashoffset: -100; opacity: 0; }  /* 0.6s 从温州端收线 */
  100%  { stroke-dashoffset: -100; opacity: 0; }
}
/* 滑行光点：平时不可见（opacity 0），仅随 aRun 在飞行窗口出现 */
.map-runner {
  fill: var(--route, var(--gold));
  filter: drop-shadow(0 0 6px var(--route, var(--gold)));
  opacity: 0;
  offset-distance: 0%;
}
@keyframes aRun {
  0%    { offset-distance: 0%; opacity: 1; animation-timing-function: ease-out; }
  19.4% { offset-distance: 100%; opacity: 1; }
  22%   { opacity: 0; }
  100%  { offset-distance: 100%; opacity: 0; }
}

/* --- 城市光点：圆点 + 光晕，颜色跟随所属航线（--route，缺省品牌金）---------
   光晕用 currentcolor，换色自动跟随。hover 光点放大：r=5 经 scale(1.6) 与
   温州原点 r=8 视觉相当，transform-box: fill-box 让缩放以自身圆心为原点。
   两层动画均由模板逐城市内联（字面量，见 template-service.php）：
   breathe = 持续自然呼吸（周期/相位按城市散列错开），aFlash = 到站爆亮。 */
.map-city { pointer-events: auto; }
.map-dot {
  color: var(--route, var(--gold));
  fill: currentcolor;
  filter: drop-shadow(0 0 6px currentcolor);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.map-city:hover .map-dot,
.map-city:focus-visible .map-dot {
  transform: scale(1.6);
  filter: drop-shadow(0 0 11px currentcolor);
}
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.22; } }
@keyframes aFlash  { 0% { r: 5; } 1.5% { r: 10.5; } 6% { r: 5.8; } 100% { r: 5; } }
/* 脉冲环：平时不可见，仅到站瞬间外扩一圈（aRing，延迟内联在元素上） */
.map-pulse {
  fill: none;
  stroke: var(--route, var(--gold));
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
@keyframes aRing {
  0%   { transform: scale(.6); opacity: 0; }
  1%   { opacity: .9; }
  8%   { transform: scale(2.9); opacity: 0; }
  100% { transform: scale(2.9); opacity: 0; }
}
/* 温州原点：常亮呼吸脉冲（与城市到站脉冲相区别） */
.map-city--home .map-pulse { animation: homePulse 2.6s var(--ease) infinite; }
@keyframes homePulse { 0% { transform: scale(1); opacity: .9; }
                       70%, 100% { transform: scale(2.6); opacity: 0; } }
/* 命中区：透明大圆，小光点也容易悬停到（fill:transparent 参与 hit-test） */
.map-hit { fill: transparent; }

/* --- 城市标签：白底圆角衬底 + 单行「城市 · 国家」，默认隐藏、hover 显示 ------
   与温州原点标签同款式（2026-09-14 客户要求，模板 rect/text 几何已对齐 home）；
   衬底宽度由模板按文字长度估算后写进 rect，字体尺寸须与估算系数（0.6em/字符）匹配，
   改字号需同步模板里的估宽逻辑。 */
.map-label {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.map-label rect {
  fill: #fff;
  stroke: var(--line);
}
.map-label text {
  fill: var(--navy);
  text-anchor: middle;
  font-family: var(--font);
}
.map-label-city { font-size: 24px; font-weight: 700; }
/* 城市 hover 显示标签（2026-09-14 补：地图上线时漏了这条，导致真实页悬停无标签） */
.map-city:hover .map-label,
.map-city:focus-visible .map-label { opacity: 1; }

/* 温州标签组垫在线条下方（模板中最先输出）且默认半透明作水印，
   防止遮挡紧邻的首尔/东京光点；悬停原点光点时 JS 将该组置顶并加 is-top 恢复不透明 */
.map-home-label .map-label { opacity: .55; }
.map-home-label.is-top .map-label { opacity: 1; }

/* --- 可达性：跟随系统「减少动态效果」退化为静态地图：航线全部完整显示、
     滑行光点/呼吸/到站爆亮/脉冲全部停用（同 svc-flow 处理）。
     弧线基态即 dashoffset 0 的完整线条，停掉动画后自然全显。 --- */
@media (prefers-reduced-motion: reduce) {
  .map-arc,
  .map-runner,
  .map-dot,
  .map-pulse,
  .map-city--home .map-pulse { animation: none !important; }
}

/* --- ≤860px：地图随 viewBox 等比缩小（触屏无 hover，城市标签本就不出现）。
   只做两件事：加粗弧线保持可见度；温州标签按衬底左下角整体放大（transform
   连 rect 一起缩放，不会像改 font-size 那样撑破衬底）。 -------------- */
@media (max-width: 860px) {
  .map-arc { stroke-width: 3.5; }
  .map-home-label .map-label {
    transform: scale(1.55);
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }
}

/* --- 首页 FAQ 折叠手风琴：静态官网为静态全开，客户要求默认折叠、点击展开
     （WP 站差异，样式不入 main.css）。问题行为 button.faq-q，状态类 is-open
     由 main.js 维护；main.js 给 faq-list 加 faq-list--js 后才折叠——渐进增强，
     JS 不可用（爬虫、无障碍环境）时答案全部展开可读。 -------------- */
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-list--js .faq-item h3 { margin-bottom: 0; }
.faq-list--js .faq-q::after {
  content: "+";
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}
.faq-list--js .faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-list--js .faq-item > p { display: none; }
.faq-list--js .faq-item.is-open > p { display: block; margin-top: 10px; }

/* --- 首页优势区（Why Pupulan）图标居中、无边框、放大：官网 .feature-icon 为
     52px 方框描边 + 24px 图标左对齐，客户要求首页去掉边框、图标放大居中；
     .feature 类被 Service/About 页共用，此处限定 body.home 只影响首页。 ----- */
body.home .feature-icon { margin-inline: auto; border: 0; }
body.home .feature-icon svg { width: 34px; height: 34px; }

/* --- 首页手风琴卡（.why-acc，2026-09-20 客户参考图改版）：悬停展开后描述为
     左对齐长文本，图标随参考图改回左对齐（压过上一条 body.home 的居中规则，
     特异性更高才生效）；无边框、34px 放大维持不变。 ----- */
body.home .why-acc .feature-icon { margin: 0 0 24px; }

/* --- Service 页「One-stop Sourcing Services」6 卡：客户要求图标居中，处理与首页
     优势区一致（去边框 + 放大），图标换成客户指定的 lucide 官方图形；
     .feature 类被 About 页共用，限定 body.page-template-template-service 只影响 Service 页。 ----- */
body.page-template-template-service .feature-icon { margin-inline: auto; border: 0; }
body.page-template-template-service .feature-icon svg { width: 34px; height: 34px; }

/* --- About 页优势区（Our Strengths）图标居中、无边框、放大：与首页/Service 页
     同一处理（2026-09-15 客户要求），限定 body.page-template-template-about 只影响 About 页。 ----- */
body.page-template-template-about .feature-icon { margin-inline: auto; border: 0; }
body.page-template-template-about .feature-icon svg { width: 34px; height: 34px; }

/* --- About 页数据条并入优势区（2026-09-15 客户要求）：原为独立 section，
     由 section 上下 padding 撑开间距，并入后改用卡片栅格下方定距 ----- */
.adv-stats { margin-top: 56px; }

/* --- About 页愿景区（Our Vision）改深色主题色（2026-09-15 客户要求）：
     官网基准为浅灰底（section--soft）+ 深蓝引言，此处整条换 navy 底、引言反白；
     眉题金色沿用站点「深底金字」语言（同 Hero），不再另调 ----- */
.vision-band { background: var(--navy); }
.vision-band .vision .quote { color: #fff; }

/* --- 客户 Logo 圆形徽章展示：各 logo 为 AI 生成原图（各带画面底色），
     客户方案＝原图直传 + 前端圆形蒙版统一；官网原型的白底格子已在上条规则
     去除，此处圆卡自带白底与细描边，替代此前的"限高 56px"规则 ------ */
.logo-strip img {
  width: min(220px, 100%); /* 列数多时按格子宽缩放，保持正圆不变形 */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  /* 客户选定方案B「悬浮白卡」：无描边环带，浅深蓝投影让圆卡浮在浅灰板块上 */
  box-shadow: 0 12px 28px rgba(26, 54, 93, 0.14);
}
/* hover 微放大 + 投影加深（客户要求）；尊重系统"减少动态"设置 */
@media (prefers-reduced-motion: no-preference) {
  .logo-strip img { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .logo-strip img:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 34px rgba(26, 54, 93, 0.20);
  }
}

/* --- 首页信任区标题与徽章的间距：官网 section-head 统一 64px，客户嫌大，
     仅首页该区块收小（.section--tight 被 About 页共用，须限定 body.home） ------ */
body.home .section--tight .section-head { margin-bottom: 36px; }

/* --- Header 内联语言切换（GTranslate shortcode，客户要求放 header 内部右上角）：
     绝对定位到 header 最右缘（不参与 container 内边距），当前语言行旗+代码横排一行；
     融入深蓝 header——透明底白字，下拉面板白底可读；插件自带样式需 !important 覆盖 */
.header-lang {
  position: absolute;
  right: 12px;
  top: 38px; /* 与顶栏底对齐：header 白区放得下切换器的最高位置——再往下会压住 GET IN TOUCH 按钮文字 */
  display: inline-flex;
  align-items: center;
}
.header-lang .gtranslate_wrapper a { text-decoration: none; }
/* overflow visible：插件默认 hidden，配合上面的 absolute 面板会把下拉整体裁掉
   （插件原设计靠面板撑大盒子显示，代价就是触发按钮被挤动） */
.header-lang .gt_float_switcher {
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--navy) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
/* 国旗 + 语言代码强制一行（插件默认会竖排换行） */
.header-lang .gt_float_switcher a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}
.header-lang .gt_float_switcher:hover { color: var(--gold) !important; }
.header-lang .gt_float_switcher { position: relative; }
/* 空间账：1280 视口下按钮右缘 1228，切换器约 90px 宽只能挤进右缘 52px 空隙——
   导航间距 40→30（官网 main.css 不动，此处全站 header 覆盖）+ 切换器紧凑化腾位 */
.site-header .nav { gap: 30px; }
.header-lang .gt_float_switcher {
  padding: 2px 6px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}
.header-lang .gt_float_switcher img { width: 16px; height: 16px; }
/* 白块真身：插件 JS 渲染的"当前语言"块 .gt-selected 自带白底圆角，须一并透明化，
   否则盖住 GET IN TOUCH 按钮尾部；旗+语言代码 flex 横排一行 */
.header-lang .gt_float_switcher .gt-selected {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 4px !important;
  cursor: pointer;
}
.header-lang .gt_float_switcher .gt-selected .gt-lang-code { color: var(--navy) !important; }
.header-lang .gt_float_switcher .gt-selected:hover .gt-lang-code { color: var(--gold) !important; }
/* 下拉面板：展开方向由插件后台设置 float_switcher_open_direction=bottom 决定，
   JS 只负责切 display。插件输出的面板是文档流内 relative 元素（position 未设为
   absolute），展开时会把切换器本身撑宽/撑高、挤动触发按钮——方向为 top 时按钮
   被顶到面板下方（2026-09-15 客户反馈），改 bottom 后按钮横向挪 ~110px，都是
   这个原因。此处强制 absolute 脱离文档流：触发按钮完全不动，面板悬浮在按钮
   正下方、右缘对齐（宽 210px 比按钮宽，向左展开） */
.header-lang .gt_float_switcher .gt_options {
  position: absolute !important;
  left: auto !important;  /* 锚定切换器右缘（插件默认可能横跨视口） */
  right: 0 !important;
  top: 100% !important;
  bottom: auto !important;
  width: 210px !important; /* 固定宽竖列：一行一个语言 */
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 28px rgba(26, 54, 93, 0.16) !important;
  border-radius: 6px;
  margin-top: 10px;
}
.header-lang .gt_float_switcher .gt_options a {
  display: flex !important; /* 一行一个语言（客户要求列表分行） */
  align-items: center;
  gap: 8px;
  width: 100% !important;
  color: var(--ink) !important;
  padding: 8px 14px !important;
  text-transform: none;
  letter-spacing: normal;
}
.header-lang .gt_float_switcher .gt_options a:hover { background: var(--soft) !important; }
/* ≤991px 移动端/窄屏：右侧是汉堡按钮且导航收进抽屉，语言切换暂不显示
   （移动端访客可用浏览器自带翻译） */
@media (max-width: 991px) {
  .header-lang { display: none; }
}

/* --- 客户 Logo 横条去白底：官网为白底格子+分隔线，客户要求去掉白条、
     logo 直接融入板块底色（logo 少、格子大块留白时白条很突兀） ------ */
.logo-strip { border: 0; gap: 0; background: none; }
.logo-strip > div { background: none; }

/* --- About 老板介绍照片列收窄：客户反馈对半分时人像太大（约 40% 宽）；
     ≤860px 仍单列堆叠 ------ */
@media (min-width: 861px) {
  .split--founder { grid-template-columns: 2fr 3fr; }
}

/* --- 页脚微信二维码（footer.php 输出，静态官网无此元素） ----------------------
   Contact 栏地址/WhatsApp 下方；二维码自带白色静区，深色页脚上加白底圆角衬底
   保证扫码对比度；尺寸 132px 见方；图在后台「内容管理 → Contact 页」可替换 ------ */
.footer-qr {
  margin: 18px 0 0;
}
.footer-qr .media-img {
  display: block;
  width: 132px;
  height: auto;
  padding: 6px;
  background: #fff;
  border-radius: var(--radius);
}
.footer-qr figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Contact 页信息栏微信二维码（template-contact.php，静态官网无此元素） ------
   WHATSAPP 行之后，与页脚共用 ct_wechat_img 字段换图两处同步；
   浅底信息卡上白底码图加细描边区分边界 ------ */
.contact-qr {
  margin: 0;
}
.contact-qr .media-img {
  display: block;
  width: 148px;
  height: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-qr figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* --- Mail 悬浮按钮（footer.php 输出，静态官网无此元素） ----------------------
     外观与 main.css 的 .fab-wa 同参数（main.css 保持基准不动），竖排叠在
     WhatsApp 按钮正上方，间距 14px；Cookie 提示条弹出时随 .fab-wa 同步上移
     （offset = 按钮高 54px + 间距 14px，桌面 122→190，≤860px 为 50px 高：196→260） ------ */
.fab-mail {
  position: fixed;
  right: 26px;
  bottom: 94px; /* .fab-wa 的 bottom 26px + 高 54px + 间距 14px */
  z-index: 90;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.28);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab-mail:hover { background: var(--gold); transform: translateY(-2px); }
.fab-mail svg { width: 26px; height: 26px; fill: currentColor; }
.fab-mail .fab-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.fab-mail:hover .fab-tip { opacity: 1; }
body.has-cookie-bar .fab-mail { bottom: 190px; }

@media (max-width: 860px) {
  .fab-mail { right: 18px; bottom: 82px; width: 50px; height: 50px; }
  .fab-mail .fab-tip { display: none; }
  body.has-cookie-bar .fab-mail { bottom: 260px; }
}

/* 页脚友情链接（官网原稿无此区块，站点互链交换用）：低调单行，视觉与 .footer-bottom 同灰阶 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-links-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footer-links ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, 0.72); transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: #fff; }