/* Zhonggu Auto - Responsive Design with Video Hero */

/* Base Reset */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #171717; background: #ffffff; margin: 0; padding: 0; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Buttons */
.zg-btn { display: inline-block; padding: 1rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; transition: all 0.3s; font-size: 1.125rem; border: none; cursor: pointer; }
.zg-btn-primary { background: #2563eb; color: white; }
.zg-btn-primary:hover { background: #1d4ed8; }
.zg-btn-secondary { background: white; color: #2563eb; }
.zg-btn-secondary:hover { background: #f3f4f6; }
.zg-btn-whatsapp { background: #15803D; color: white; display: inline-flex; align-items: center; gap: 0.5rem; }
.zg-btn-whatsapp:hover { background: #166534; }

/* Header */
.site-header { background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 50; }
.header-container { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
/* 【2026-09-28】`flex-shrink: 0` 是**防变形**的关键：.logo-link 是 .header-container
   的 flex item，右侧 .header-actions 内容多时会把它挤窄；而 .logo-img 是
   `height:固定 + width:auto`，一旦被挤窄就只缩宽度 -> 宽高比崩掉（实测 390px 档
   被压成 2.014:1、320px 档 0.27:1，自然比例是 4:1，客户截图里「被缩窄变形」即此）。
   ⚠️ 只加 flex-shrink:0 还不够 —— 窄屏空间实在不够时会直接溢出，所以手机端
   还得把 LOGO 高度主动收小（见下方 @media max-width:768px）。 */
.logo-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.logo-box { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #2563eb, #1e40af); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.logo-text { color: white; font-weight: bold; font-size: 1.125rem; }
/* 品牌 LOGO（2026-09-25 第二版：客户定的**完整组合** = 徽标 + 中古名車 + ZhongGU Auto）。
   来源：客户给的截图（白底黑稿），用 tools/extract-logo-from-image.py 抠成透明底。
   素材存的是**白色稿**，浅色主题下用 filter:invert(1) 翻成黑稿 ——
   LOGO 是纯黑白线条稿，反相是像素级精确的，没必要放两份文件。
   源文件：tools\_logo2\logo-full-*.png / logo-mark-*.png / logo-text-*.png；
   主题里放 logo-full.png（头部）。assets/img/logo-mark.png（第二版起头部已不用，
   留着备用；favicon 用的是 uploads 里那份 zhonggu-logo-mark-512.png，与它无关）。

   ⚠️ 为什么第二版**不用**毛玻璃底板了：完整 LOGO 有 224px 宽，套底板会变成一个
   巨大的黑框，头部节奏全乱。改用 drop-shadow 提升亮背景（首页轮播视频）上的可读性。
   ⚠️ 为什么浅色主题下首页头部**不**反相：那一处头部是透明的、压在视频上（深色），
   黑稿会糊掉 —— 只有内页白底头部才需要黑稿。2026-09-25 实测。 */
.logo-img {
    display: block;
    height: 3.5rem;   /* 56px。实测低于此值「ZhongGU Auto」那行小字会糊成一团 */
    width: auto;
    /* 【2026-09-28】双保险：万一外层还是被压，用 contain 保住宽高比，
       宁可两侧留白也不让 LOGO 变形。 */
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
html[data-theme="light"] .logo-img {
    filter: invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
html[data-theme="light"] .site-header-transparent .logo-img {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75));
}
/* 首页透明头部（压在轮播视频上）——投影要更重，白色细线稿才立得住 */
.site-header-transparent .logo-img {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75));
}
/* 第一版（单独徽标 + 毛玻璃底板）的样式已随第二版下线，需要回退看
   zhonggu-styles.css.bak-before-fulllogo-20260925 */
.logo-title { font-weight: bold; color: #111827; }
.logo-subtitle { font-size: 0.75rem; color: #6b7280; }
.nav-desktop { display: flex; align-items: center; gap: 2rem; }
.nav-link { color: #374151; font-weight: 500; text-decoration: none; transition: color 0.3s; }
.nav-link:hover { color: #2563eb; }
/* 当前页导航高亮 */
.nav-link.active { color: #2563eb; font-weight: 700; border-bottom: 2px solid #2563eb; padding-bottom: 2px; }
.site-header-transparent .nav-link.active { color: #bfdbfe !important; border-bottom-color: #bfdbfe; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone { font-size: 0.875rem; color: #4b5563; text-decoration: none; }
.header-phone:hover { color: #2563eb; }
.header-cta { background: #2563eb; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.3s; }
.header-cta:hover { background: #1d4ed8; }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.mobile-menu-btn svg { width: 1.5rem; height: 1.5rem; }
/* 【2026-09-28 修】浅色档内页头部汉堡键「三条杠看不见」。
   根因：Astra 父主题有一条 `.menu-toggle, button, .ast-button, .ast-custom-button
   { color: #ffffff }` —— 它给**所有 <button>** 设白色。图标的 <path> 用
   `stroke="currentColor"`，于是内页白底头部上的三条杠被染成纯白。
   （实测：截取汉堡键区域像素，整块 #ffffff，肉眼不可见。）
   ⚠️ 必须 `!important`：Astra 那条是类选择器（特异性 0,1,0），
      比 `.standard-header .mobile-menu-btn svg`（0,2,1）更高，不加压不住。
   🔴 **必须同时排除暗色档**：暗色档的内页头部背景是 `#0C0B0B`（近黑），
      汉堡键同样得是浅色；若本条无条件生效，就会把暗色档的图标也染成深灰
      → 换成「深色底上看不见深灰图标」的同一个 bug（实测暗底 rgb(12,11,11)
      vs 图标 rgb(55,65,81)，几乎不可见）。所以锁在 `:not([data-theme="dark"])`。
   ⚠️ 首页透明头部压深色视频，本来就该是白色 —— 那条保留在
      `.site-header-transparent .mobile-menu-btn svg { color: white !important }` 里，
      特异性同样 0,2,1 且位于**文件更后面**，赢过这里。 */
html:not([data-theme="dark"]) .standard-header .mobile-menu-btn svg,
html:not([data-theme="dark"]) .main-header .mobile-menu-btn svg {
    color: #374151 !important;
}

/* Mobile Menu */
.mobile-menu { display: none; padding: 1rem 0; border-top: 1px solid #e5e7eb; }
.mobile-menu.active { display: block; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-link { color: #374151; font-weight: 500; text-decoration: none; padding: 0.5rem 0; }
.mobile-menu-link:hover { color: #2563eb; }

/* Hero Section with Video */
.hero-section { position: relative; height: 100vh; min-height: 600px; margin-top: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); z-index: 0; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30, 58, 138, 0.7), rgba(30, 64, 175, 0.5)); z-index: 1; }
.hero-content { position: relative; z-index: 2; text-align: center; color: white; padding: 0 1rem; max-width: 56rem; }
.hero-title { font-size: 3.75rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; color: white !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; color: white !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Stats Section */
.stats-section { background: white; padding: 3rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-number { font-size: 2.5rem; font-weight: bold; color: #2563eb; }
.stat-label { color: #4b5563; margin-top: 0.5rem; }

/* Brands Section */
.brands-section { background: #f9fafb; padding: 4rem 0; }
.section-title { font-size: 1.875rem; font-weight: bold; text-align: center; margin-bottom: 3rem; }
.brands-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; }
.brand-item { background: white; border-radius: 0.5rem; padding: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: box-shadow 0.3s; }
.brand-item:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.brand-name { font-weight: bold; color: #374151; font-size: 1.125rem; }

/* Vehicles Section */
.vehicles-section { padding: 4rem 0; }
.vehicles-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.view-all-link { color: #2563eb; text-decoration: none; font-weight: 500; }
.view-all-link:hover { color: #1d4ed8; }
.vehicles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* Vehicle Card */
.vehicle-card { background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s; text-decoration: none; color: inherit; display: block; }
.vehicle-card:hover { box-shadow: 0 10px 15px rgba(0,0,0,0.1); transform: translateY(-4px); }
.vehicle-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f3f4f6; }
.vehicle-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.vehicle-card:hover .vehicle-image img { transform: scale(1.05); }
.vehicle-badge { position: absolute; top: 0.75rem; right: 0.75rem; background: #15803D; color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.vehicle-info { padding: 1rem; }
.vehicle-title { font-size: 1.125rem; font-weight: bold; color: #111827; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 2.8em; }
.vehicle-card:hover .vehicle-title { color: #2563eb; }
.vehicle-meta { display: flex; align-items: center; color: #6b7280; font-size: 0.875rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.vehicle-meta span { margin: 0 0.25rem; }
.vehicle-price { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; }
.price-amount { color: #2563eb; font-weight: bold; font-size: 1.125rem; }
.price-label { color: #6b7280; font-size: 0.875rem; }

/* Why Choose Us */
.why-section { background: #111827; color: white; padding: 4rem 0; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.why-item { text-align: center; }
.why-icon { width: 4rem; height: 4rem; background: #2563eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.why-icon svg { width: 2rem; height: 2rem; }
/* 「为什么选择我们」自定义图标图片（2026-09-24：后台可上传）
 * 传了图就把蓝色圆底去掉、让客户的图自己占满 4rem 的位 —— 因为客户上传的
 * 图通常自带形状/底色，再套一层蓝圆会很难看。 */
.why-icon.has-icon-image { background: transparent; }
.why-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.why-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: #ffffff; }
.why-description { color: #9ca3af; }

/* CTA Section */
/* ⚠️ .cta-section 用 background-color，不是 background 简写 ——
   简写会把 background-image 重置成 none，后台配了图也永远出不来（.page-header 踩过同一个坑，别改回去）。 */
.cta-section { background-color: #2563eb; padding: 4rem 0; text-align: center; }
.cta-title { font-size: 2rem; font-weight: bold; color: white; margin-bottom: 1rem; }
.cta-subtitle { color: #bfdbfe; font-size: 1.125rem; margin-bottom: 2rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* 首页 CTA 区「后台可改背景图」（2026-09-26 第二批）
   后台路径：网站设置 → 头图横幅 → 首页 CTA
   图 URL 由模板内联 CSS 变量注入（--zg-cta-img），所以不怕 !important 压内联样式。
   遮罩 alpha 0.60 与 .page-header 同源：盖纯白图时白字 4.69:1（≥4.5）；调到 0.58 只剩 4.41:1 → 改小必须重跑验收。
   ⚠️ 本页 CTA 块很矮很宽（全宽 × 约 300px），1920×600 的图会按 cover 上下裁 —— 主体要放中间。 */
.cta-section.has-bg-image {
  background-image: linear-gradient(rgba(15, 23, 42, 0.60), rgba(15, 23, 42, 0.60)), var(--zg-cta-img, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* 副标题原来是浅蓝 #bfdbfe，压在图上对比度只有 3.54:1（18px 正文要求 4.5）→ 压图时转纯白 */
.cta-section.has-bg-image .cta-subtitle { color: #ffffff !important; }

/* Page Header */
/* ⚠️ 2026-09-26：这里必须写 background-color，不能写 background 简写！
   原因：background 简写会把 background-image 一并重置成 none，而它带 !important，
   连模板内联的 background-image 都压得住 → 后台传的页头背景图永远显示不出来。
   改为 background-color 后，简写不再碰 background-image，图片才能生效。 */
.page-header { background-color: #1e3a8a !important; color: white !important; padding: 4rem 0 !important; text-align: center !important; }
/* ⚠️ 2026-09-25：这两个类必须限定在 .page-header 里！
   原来写成裸的 .page-title，会泄漏到 Astra 新闻归档页的
   h1.page-title.ast-archive-title 上 → 白字压浅底（#F0F5FA）完全看不见。
   本主题里 .page-title / .page-subtitle 只出现在三页的 .page-header 内。 */
.page-header .page-title { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; color: #ffffff !important; }
.page-header .page-subtitle { color: #bfdbfe; font-size: 1.125rem; }

/* 2026-09-26：页头背景图 —— 后台「网站设置 → 内页头图」可传（三条记录 = 关于我们 / 联系我们 / 车辆列表）。
   图片 URL 由模板以自定义属性 --zg-pb-img 传入（动态内容没法写进 CSS 文件，只能内联传变量）。
   ⚠️ 上面那条 .page-header 必须保持 background-color 而不是 background 简写，否则图片会被重置掉。
   linear-gradient 是**压暗遮罩**：页头要压白色大标题，而客户给的图亮度不可控，
   所以固定加一层 60% 的深蓝黑（品牌蓝的暗调）。
   ⚠️ 这个 0.60 是算出来的，不是拍脑袋：按**最坏情况**（客户传一张纯白图）推导 ——
      白色 (255) 与 rgba(15,23,42,0.60) 合成 ≈ rgb(111,116,127)，亮度 0.174；
      白色文字对比度 = (1+0.05)/(0.174+0.05) ≈ **4.69:1** ✅ 过 WCAG AA 正文标准 4.5:1。
      若降到 0.58 只剩 4.41:1（正文不够，仅够大号粗体 3:1）→ 所以别往下调，
      除非同时把副标题也改成白字并重跑验收。 */
.page-header.has-bg-image {
    background-image: linear-gradient(rgba(15, 23, 42, 0.60), rgba(15, 23, 42, 0.60)), var(--zg-pb-img, none) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
/* 有背景图时副标题改成纯白。
   原因：原来的 #bfdbfe（浅蓝）在纯蓝底上够用，但压在图上时，
   即使有 60% 遮罩，最坏情况对比度也只有约 4.2:1（正文要求 4.5:1）→ 改成白色后 4.69:1。
   注意只在 .has-bg-image 下改 —— 没传图的页面保持原来的 #bfdbfe 外观，一行都不动。 */
.page-header.has-bg-image .page-subtitle { color: #ffffff !important; }

/* Content Section */
.content-section { padding: 4rem 0 !important; background: #f9fafb !important; }
.content-card { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 2rem; margin-bottom: 2rem; }
.content-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; }
.content-text { color: #4b5563; line-height: 1.75; margin-bottom: 1rem; }

/* Info List */
.info-list { display: flex; flex-direction: column; gap: 1rem; }
.info-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #e5e7eb; }
.info-label { color: #6b7280; }
.info-value { font-weight: 500; }
.info-value a { color: #2563eb; text-decoration: none; }
.info-value a:hover { color: #1d4ed8; }

/* Brands List */
.brands-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.brand-tag { background: #f9fafb; border-radius: 0.5rem; padding: 0.75rem; text-align: center; font-weight: 500; color: #374151; }

/* Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.service-item { display: flex; gap: 1rem; }
.service-icon { width: 3rem; height: 3rem; background: #dbeafe; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-icon svg { width: 1.5rem; height: 1.5rem; color: #2563eb; }
.service-title { font-weight: 600; margin-bottom: 0.5rem; }
.service-description { color: #4b5563; font-size: 0.875rem; }

/* Contact Page */
.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
.contact-info-card { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; margin-bottom: 1.5rem; }
.contact-info-title { font-size: 1.25rem; font-weight: bold; margin-bottom: 1.5rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.contact-info-icon { width: 1.25rem; height: 1.25rem; color: #2563eb; flex-shrink: 0; margin-top: 0.125rem; }
.contact-info-label { font-weight: 500; }
.contact-info-value { color: #4b5563; }
.contact-info-value a { color: #4b5563; text-decoration: none; }
.contact-info-value a:hover { color: #2563eb; }
.social-links { display: flex; flex-direction: column; gap: 0.75rem; }
.social-link { display: flex; align-items: center; gap: 0.75rem; color: #4b5563; text-decoration: none; transition: color 0.3s; }
.social-link:hover { color: #2563eb; }
.contact-form-card { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; }
.contact-form-title { font-size: 1.25rem; font-weight: bold; margin-bottom: 1.5rem; }

/* Footer */
.site-footer { background: #111827; color: #9ca3af; padding: 3rem 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-title { color: white; font-weight: bold; font-size: 1.125rem; margin-bottom: 1rem; }
.footer-subtitle { color: white; font-weight: 600; margin-bottom: 1rem; }
.footer-text { font-size: 0.875rem; margin-bottom: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.5rem; }
.footer-list a { color: #9ca3af; text-decoration: none; font-size: 0.875rem; }
.footer-list a:hover { color: white; }
.footer-bottom { border-top: 1px solid #374151; margin-top: 2rem; padding-top: 2rem; text-align: center; font-size: 0.875rem; }

/* Tablet Responsive */
@media (max-width: 1024px) {
  .vehicles-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Header */
  .nav-desktop { display: none; }
  .header-actions .header-phone { display: none; }
  .mobile-menu-btn { display: block; }
  /* 【2026-09-28 手机端 LOGO 变形修复】完整 LOGO 在窄屏从 56px 收到 32px。
     实测 390px 档：内容区 358px，右侧 .header-actions 要 280px（主题开关 46 +
     语言下拉 64.2 + WhatsApp 按钮 89.6 + 汉堡键 36.4 + 3 个 14.59 的 gap），
     LOGO 按自然比例 4:1 需要 44×4=176px -> 176+280=456 远超 358，
     于是被 flex 挤压、宽高比崩到 2.01:1（320px 档更惨，0.27:1）。
     收到 32px 后 LOGO 宽 128px，再把 actions 的 gap 收到 0.5rem、
     WhatsApp 按钮内边距收窄 -> 128 + (46+64.2+76+36.4+24) = 374.6，仍略超；
     所以 480px 以下把 WhatsApp 按钮隐藏（汉堡菜单里有同链接、右下角也有浮动按钮），
     彻底解决且不影响任何功能入口。 */
  .logo-img { height: 2.25rem; }
  .header-actions { gap: 0.5rem; }
  .header-cta { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }
  .header-container { height: 4rem; }
  
  /* Hero */
  .hero-section { height: 80vh; min-height: 500px; }
  .hero-title { font-size: 3.75rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; color: white !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
  .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; color: white !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .zg-btn { width: 100%; max-width: 300px; }
  
  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat-number { font-size: 2rem; }
  
  /* Brands */
  .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .brand-name { font-size: 1rem; }
  
  /* Vehicles */
  .vehicles-grid { grid-template-columns: 1fr; }
  .vehicles-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  
  /* Why */
  .why-grid { grid-template-columns: 1fr; }
  
  /* CTA */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .zg-btn { width: 100%; max-width: 300px; }
  
  /* Page Header
     ⚠️ 与上面桌面档同理：必须 background-color，用 background 简写会把页头背景图重置掉 */
  .page-header { background-color: #1e3a8a !important; color: white !important; padding: 4rem 0 !important; text-align: center !important; }
  .page-header .page-title { font-size: 2rem; }
  
  /* Content */
  .content-section { padding: 4rem 0 !important; background: #f9fafb !important; }
  .content-card { padding: 1.5rem; }
  
  /* Brands List */
  .brands-list { grid-template-columns: repeat(2, 1fr); }
  
  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  
  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  
  /* Vehicle Detail */
  .vehicle-detail-grid { grid-template-columns: 1fr !important; }
  .specs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .features-grid { grid-template-columns: 1fr !important; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-title { font-size: 3.75rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; color: white !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
  .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; color: white !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
  .section-title { font-size: 1.5rem; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }

  /* 【2026-09-28 手机端 LOGO 变形修复】≤480px 空间实在不够（LOGO 128 + actions 246
     仍超 358），把 WhatsApp 蓝按钮收起来。功能入口一个不少：手机菜单里有
     「WhatsApp: +86 18627079880」，右下角还有 .whatsapp-float-btn 浮动按钮。
     ⚠️ 车辆详情页本来就隐藏该按钮（.single-vehicle .header-cta { display:none }），
     这里只是把同一决策推广到所有 ≤480px 的页面。 */
  .header-actions .header-cta { display: none; }
}


/* Transparent Header for Homepage */
.site-header-transparent {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.site-header-transparent .logo-title {
    color: white !important;
}
.site-header-transparent .logo-subtitle {
    color: rgba(255,255,255,0.8) !important;
}
.site-header-transparent .nav-link {
    color: white !important;
}
.site-header-transparent .nav-link:hover {
    color: #bfdbfe !important;
}
.site-header-transparent .header-phone {
    color: white !important;
}
.site-header-transparent .header-cta {
    background: white !important;
    color: #2563eb !important;
}
.site-header-transparent .header-cta:hover {
    background: #bfdbfe !important;
}
.site-header-transparent .mobile-menu-btn svg {
    color: white !important;
}

/* 首页 Hero 顶部的暗色渐变遮罩（scrim）—— 2026-09-25 加。
   为什么需要：首页头部是完全透明的、压在轮播视频上。第一版只放一个 44px 小徽标时，
   靠一块毛玻璃底板就压住了；第二版换成 224px 宽的完整 LOGO 后底板用不了，
   白色细线稿（徽标圆环、环绕小字）会在**亮背景**上被冲掉 —— 实测金色雕塑那块几乎看不见。
   这里加一层从顶往下的黑→透明渐变，白 LOGO 与顶部信息条都能读。
   高度 200px 只是渐变的延伸长度（渐隐到 200px 才自然），真正要盖住的是
   信息条 40px + 头部 72px = 112px，所以 112px 处仍保留 0.44 的黑。 */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.60) 0px,
        rgba(0, 0, 0, 0.44) 112px,
        rgba(0, 0, 0, 0) 200px);
    z-index: 1;              /* 与 .hero-overlay 同层：盖住视频，但仍在头部(z-index:100)之下 */
    pointer-events: none;
}

/* Hero section starts from top */
.hero-section {
    margin-top: 0 !important;
}



/* Top Contact Bar */
/* 不随视口悬浮：absolute 定位随页面一起滚走（2026-09-16 昂哥要求） */
.top-contact-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 102;
    padding: 0.5rem 1rem;
    background: transparent;
}
.top-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    transition: opacity 0.3s;
}
.top-contact-item:hover {
    opacity: 0.8;
}

/* Adjust header position for top bar */
.site-header-transparent {
    top: 2.5rem !important;
}

/* Mobile: hide top contact bar */
@media (max-width: 768px) {
    .top-contact-bar {
        display: none;
    }
    .site-header-transparent {
        top: 0 !important;
    }
}





/* Force hide WordPress admin bar */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
body { margin-top: 0 !important; }


/* Remove Astra top margin for plain container */
.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    padding: 0 !important;
    margin: 0 !important;
}
.hentry {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2026-09-25：上面两条「清零」是给内页文章用的（Astra 默认 padding 高达 5.34em 6.67em），
   但它们**泄漏到了归档网格**：新闻列表页 /news/ 走 Astra 的 .ast-blog-layout-4-grid，
   它的卡片间隔本来完全靠 article 自己的 `padding: 0 1em`（左右 16px）+
   `margin-bottom: 2em`（行间距）撑出来 —— 被清零后相邻卡片间距实测 = 0px，
   三张新闻卡贴成一条（客户反馈「连间隔空隙都没有，排版太丑」）。
   这里用 ID 选择器把间隔精确补回来，只作用于归档网格，不影响内页文章： */
#primary.ast-blog-layout-4-grid .ast-row > .ast-article-post {
    padding-left: 1em !important;
    padding-right: 1em !important;
    margin-bottom: 2em !important;
}
.entry-header {
    display: none !important;
}
.entry-content {
    padding: 0 !important;
}




/* Social Media Sidebar */
.social-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.social-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
    padding: 8px 4px;
}
.social-sidebar-item:first-child {
    border-radius: 8px 0 0 0;
}
.social-sidebar-item:last-child {
    border-radius: 0 0 0 8px;
    border-bottom: none;
}
.social-sidebar-item:hover {
    background: #2563eb;
    color: white;
}
/* Back to Top（侧栏底部功能键，区别于社交链接配色） */
.social-sidebar-top {
    background: #e5e7eb;
    color: #111827;
}
.social-sidebar-top:hover {
    background: #111827;
    color: white;
}
.social-sidebar-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}
.social-sidebar-item span {
    font-size: 9px;
    line-height: 1;
    text-align: center;
}

/* 图标颜色用 CSS 变量控制（每条链接自己在后台选了图标，颜色跟着图标走） */
.social-sidebar-item svg {
    color: var(--zg-ic, #2563eb);
}
.social-sidebar-item:hover svg {
    color: #ffffff !important;
}
.social-sidebar-top svg {
    color: #111827;
}
.social-sidebar-top:hover svg {
    color: #ffffff;
}

/* 自定义图标图片（2026-09-24：后台「网站设置 → 侧边栏链接」可上传）
 * 传了图就优先显示图片、不再渲染内置 SVG。显示尺寸写死 24px 对齐全站节奏，
 * 客户上传多大的原图都不影响版式。 */
.social-sidebar-item img.social-sidebar-icon-img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .social-sidebar {
        display: none;
    }
}


/* Social sidebar icon brand colors */
/* Hide top contact bar and WhatsApp button on vehicle detail page */
.single-vehicle .top-contact-bar,
.single-vehicle .header-cta,
.single-vehicle #whatsapp-float-btn {
    display: none !important;
}


/* Standard Header Styles */
/* 顶栏（WhatsApp/邮箱）随页面滚走，不悬浮；仅主导航吸顶 */
.standard-header {
    background: white;
}
.top-bar {
    background: #f9fafb;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.top-bar-content {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}
.top-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.875rem;
}
.top-bar-item:hover {
    color: #2563eb;
}
/* 【2026-09-28】手机端信息条：WhatsApp 一行、Email 一行。
   改前症状（客户截图）：两个条目横排 + 各自内部折成 2 行，看着很乱。
   根因**不是**放不下 —— 实测 390px 档文本只需 166.5 / 191.7px，容器有 360.8px。
   真凶是 flex 条目的默认 `flex-shrink:1`：`justify-content:flex-end` + `gap:2rem`
   把两个条目各自压到 154.5 / 177.1px（小于内容宽）→ 各自折行。
   所以两处都要治：① 纵向排列；② `flex-shrink:0` 让条目保持内容宽度。
   ⚠️ 顺带一提：首页的 .top-contact-bar 在 ≤768px 是整条 display:none（见下方
   「Mobile: hide top contact bar」），所以手机端**只有内页**看得到这条信息条。 */
@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .top-bar-item { flex-shrink: 0; }
}
.main-header {
    padding: 0.5rem 0;   /* 2026-09-25：LOGO 改完整组合后从 1rem 收到 0.5rem，整条 72px 与首页头部齐平 */
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== Sales Team Section ===== */
.sales-team-section {
    padding: 4rem 0;
    background: #f9fafb;
}
.sales-team-subtitle {
    text-align: center;
    color: #6b7280;
    margin-top: -2rem;
    margin-bottom: 3rem;
}
.sales-team-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    justify-items: center;
}
.sales-rep-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.75rem 1.25rem;
    text-align: center;
    width: 100%;
    max-width: 260px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.sales-rep-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.sales-rep-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    border: 3px solid #e5e7eb;
}
.sales-rep-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sales-rep-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}
.sales-rep-role {
    font-size: 0.875rem;
    color: #2563eb;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.sales-rep-lang {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0 0 1rem;
}
.sales-rep-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #15803D;
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.3s;
}
.sales-rep-wa:hover {
    background: #166534;
    color: #fff;
}
.sales-rep-wa svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}
.sales-rep-mail {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-decoration: none;
    word-break: break-all;
}
.sales-rep-mail:hover {
    color: #2563eb;
}
@media (max-width: 640px) {
    .sales-team-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .sales-rep-photo {
        width: 90px;
        height: 90px;
    }
}

/* ===== About / 公司介绍（首页） ===== */
.about-section {
    padding: 4.5rem 0;
    background: #fff;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
.about-paragraph {
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.about-more-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.about-more-link:hover {
    color: #1d4ed8;
}
.about-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.about-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s;
}
.about-photo:hover {
    transform: scale(1.04);
}
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Hot Models / 热销车型 ===== */
.hot-section {
    padding: 4.5rem 0;
    background: #f9fafb;
}
.btn-more-models {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    color: #111827;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}
.btn-more-models:hover {
    border-color: #2563eb;
    color: #2563eb;
}
.hot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.hot-card {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s, box-shadow 0.3s;
}
.hot-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.hot-card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.hot-card-body {
    padding: 1rem;
}
.hot-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-card:hover .hot-card-title {
    color: #2563eb;
}
.hot-card-price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #2563eb;
}
@media (max-width: 1024px) {
    .hot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .hot-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Latest News / 最新资讯 ===== */
.news-section {
    padding: 4.5rem 0;
    background: #fff;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.news-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s;
}
.news-card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.news-thumb {
    display: block;
}
.news-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.news-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}
.news-thumb-placeholder svg {
    width: 3rem;
    height: 3rem;
}
.news-body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-date {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.news-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.45;
}
.news-title a {
    color: #111827;
    text-decoration: none;
}
.news-title a:hover {
    color: #2563eb;
}
.news-excerpt {
    color: #4b5563;
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* 2026-09-25：新闻列表页 /news/ 改用上面这套 .news-card 组件（客户要求「跟首页新闻一样的排版」）。
   外层直接复用 .news-section 的留白与底色，这里只补空态与分页的收尾间距。 */
.zg-news-archive .news-grid {
    margin-bottom: 0;
}
.zg-news-archive .vf-pagination {
    margin-top: 3rem;
}
.zg-news-empty {
    text-align: center;
    color: #6b7280;
    font-size: 1.0625rem;
    padding: 4rem 0;
}

/* ===== Customer Reviews / 用户评价 ===== */
.reviews-section {
    padding: 4.5rem 0;
    background: #f9fafb;
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.review-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.review-stars {
    display: flex;
    gap: 0.1875rem;
    margin-bottom: 0.875rem;
}
.review-stars .star {
    width: 1.125rem;
    height: 1.125rem;
}
.review-stars .star.on {
    fill: #f59e0b;
}
.review-stars .star.off {
    fill: #e5e7eb;
}
.review-text {
    color: #374151;
    line-height: 1.7;
    font-size: 0.9375rem;
    margin: 0 0 1.25rem;
    flex: 1;
}
.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.review-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.review-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 1.0625rem;
}
.review-meta {
    display: flex;
    flex-direction: column;
}
.review-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.9375rem;
}
.review-source {
    font-size: 0.8125rem;
    color: #6b7280;
}
/* ===== Vehicle filter bar (list page) ===== */
.vehicle-filters {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.vf-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0;
}
.vf-row + .vf-row {
    border-top: 1px dashed #eef0f3;
}
.vf-label {
    flex: 0 0 110px;
    color: #6b7280;
    font-size: 0.875rem;
    padding-top: 0.375rem;
}
.vf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vf-chip {
    background: #f3f4f6;
    border: 1px solid transparent;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
.vf-chip:hover {
    color: #2563eb;
    border-color: #bfdbfe;
}
.vf-chip.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.vf-count {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.vf-empty {
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #6b7280;
}
.vf-empty a {
    color: #2563eb;
    text-decoration: underline;
}

/* ===== 列表页：关键词搜索 ===== */
.vf-row--search {
    align-items: center;
}
.vf-search {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    align-items: center;
}
.vf-search input[type="search"] {
    flex: 1 1 auto;
    max-width: 460px;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.2s;
}
.vf-search input[type="search"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.vf-search-btn {
    padding: 0.5rem 1.125rem;
    background: #2563eb;
    color: #fff;
    border: 1px solid #2563eb;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.vf-search-btn:hover {
    background: #1d4ed8;
}
.vf-search-clear {
    color: #6b7280;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.vf-search-clear:hover {
    color: #dc2626;
    text-decoration: underline;
}
@media (max-width: 700px) {
    .vf-search {
        width: 100%;
        flex-wrap: wrap;
    }
    .vf-search input[type="search"] {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ===== 列表页：结果统计 / 清空 / 分页 ===== */
.vf-summary {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.vf-summary strong {
    color: #111827;
}
.vf-row--tools {
    align-items: center;
}
.vf-clear {
    margin-left: auto;
    color: #dc2626;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.vf-clear:hover {
    text-decoration: underline;
}
.vf-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    margin: 2.5rem 0 0.5rem;
}
.pg-btn {
    min-width: 2.25rem;
    padding: 0.4375rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}
.pg-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
}
.pg-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.pg-btn.disabled {
    color: #9ca3af;
    background: #f9fafb;
    cursor: not-allowed;
}
.pg-ellipsis {
    padding: 0 0.25rem;
    color: #9ca3af;
}
@media (max-width: 700px) {
    .vf-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .vf-label {
        flex: none;
        padding-top: 0;
    }
}

/* ===== Lightbox（图片点击放大） ===== */
.about-photo-link {
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
}
.about-photo-link .about-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.about-photo-link:hover .about-photo {
    transform: scale(1.04);
}
a.zg-lightbox {
    text-decoration: none;
}
a.zg-lightbox img {
    cursor: zoom-in;
}
.zg-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.92);
    padding: 2.5rem;
}
.zg-lightbox-overlay.open {
    display: flex;
    animation: zgFade 0.18s ease;
}
@keyframes zgFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.zg-lightbox-img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius: 0.375rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}
.zg-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    color: #e5e7eb;
    font-size: 0.875rem;
    max-width: 80vw;
    text-align: center;
}
.zg-lightbox-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}
.zg-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.zg-lightbox-close {
    top: 1.25rem;
    right: 1.25rem;
}
.zg-lightbox-prev {
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}
.zg-lightbox-next {
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 700px) {
    .zg-lightbox-overlay {
        padding: 1rem;
    }
    .zg-lightbox-prev {
        left: 0.5rem;
    }
    .zg-lightbox-next {
        right: 0.5rem;
    }
    .zg-lightbox-btn {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ===== Company map (About page) ===== */
.company-map {
    display: block;
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    position: relative;
}
.company-map img {
    width: 100%;
    height: auto;
    display: block;
}
.company-map-pin-note {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
}
.company-map:hover {
    border-color: #2563eb;
}

/* ===== Business license (About page) ===== */
.license-figure {
    display: block;
    margin-top: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #f9fafb;
}
.license-figure img {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    height: auto;
    display: block;
    border-radius: 0.25rem;
}
.license-figure:hover {
    border-color: #2563eb;
}

@media (max-width: 900px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* ================= 车辆列表 AJAX 刷新态（2026-09-23） ================= */
#zg-list-region { transition: opacity 0.18s ease; }
#zg-list-region.zg-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ================= 新闻详情页（2026-09-23 新增） ================= */
.news-hero {
    position: relative;
    height: 460px;
    min-height: 320px;
    overflow: hidden;
    background: #111827;
    display: flex;
    align-items: flex-end;
}
.news-hero--plain {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
}
.news-hero-media {
    position: absolute;
    inset: 0;
    display: block;
    background-size: cover;
    background-position: center;
    transition: transform 6s ease-out;
    text-decoration: none;
}
.news-hero-media:hover { transform: scale(1.04); }
.news-hero-zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    font-size: 0.78rem;
    opacity: 0;
    transition: opacity 0.25s;
}
.news-hero-media:hover .news-hero-zoom { opacity: 1; }
.news-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,24,39,0.10) 0%, rgba(17,24,39,0.45) 55%, rgba(17,24,39,0.88) 100%);
    pointer-events: none;
}
.news-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 2.5rem;
}
.news-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.news-hero-tag {
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 0.25rem;
}
.news-hero-date { color: rgba(255,255,255,0.85); font-size: 0.85rem; }
.news-hero-title {
    color: #fff;
    font-size: 2.1rem;
    line-height: 1.3;
    font-weight: 700;
    max-width: 900px;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.news-crumb-bar {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
}
.news-crumb { font-size: 0.85rem; color: #6b7280; }
.news-crumb a { color: #6b7280; text-decoration: none; }
.news-crumb a:hover { color: #2563eb; }
.news-crumb span { margin: 0 0.4rem; }
.news-crumb .current { color: #111827; }
.news-detail-wrap { background: #f9fafb; padding: 2.5rem 0 3.5rem; }
.news-detail-container { max-width: 960px; }
.news-detail-card {
    background: #fff;
    border-radius: 0.6rem;
    padding: 2.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.news-detail-content { color: #374151; font-size: 1.03rem; line-height: 1.9; }
.news-detail-content p { margin: 0 0 1.15rem; }
.news-detail-content h2 { font-size: 1.35rem; color: #111827; margin: 2rem 0 0.8rem; }
.news-detail-content h3 { font-size: 1.15rem; color: #111827; margin: 1.6rem 0 0.6rem; }
.news-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.25rem 0;
    display: block;
}
.news-detail-content ul,
.news-detail-content ol { margin: 0 0 1.15rem 1.25rem; }
.news-detail-content li { margin-bottom: 0.4rem; }
.news-detail-content a { color: #2563eb; }
.news-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
.news-back-link { color: #6b7280; text-decoration: none; font-size: 0.92rem; }
.news-back-link:hover { color: #2563eb; }
.news-detail-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.news-more { margin-top: 3rem; }
.news-more-title { font-size: 1.4rem; color: #111827; margin-bottom: 1.25rem; font-weight: 700; }
.news-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.news-more-card {
    background: #fff;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.25s, box-shadow 0.25s;
}
.news-more-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.news-more-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: #e5e7eb; }
.news-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-more-body { padding: 1rem 1.1rem 1.25rem; }
.news-more-date { font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.35rem; }
.news-more-head { font-size: 1rem; line-height: 1.45; margin: 0 0 0.5rem; }
.news-more-head a { color: #111827; text-decoration: none; }
.news-more-head a:hover { color: #2563eb; }
.news-more-ex { font-size: 0.85rem; color: #6b7280; line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
    .news-hero { height: 360px; }
    .news-hero-title { font-size: 1.6rem; }
    .news-detail-card { padding: 1.5rem; }
    .news-more-grid { grid-template-columns: 1fr; }
    .news-detail-foot { flex-direction: column; align-items: flex-start; }
    .news-hero-zoom { opacity: 1; }
}



/* ============================================================
 * 车辆详情图 + 推荐车辆（2026-09-24 新增）
 * ============================================================ */

.vehicle-detail-gallery-card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-top: 2rem;
}
.vehicle-detail-gallery-card h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.35rem;
}
.vehicle-detail-gallery-sub {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.vehicle-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.vehicle-detail-gallery a {
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    line-height: 0;
}
.vehicle-detail-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.vehicle-detail-gallery a:hover img {
    transform: scale(1.05);
}

/* 推荐车辆：沿用首页热销卡片，只换底色 */
.related-section {
    background: #f9fafb;
    padding: 4rem 0;
}

@media (max-width: 768px) {
    .vehicle-detail-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .vehicle-detail-gallery {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * 资质证书墙（2026-09-24 新增，取代原「营业执照」单图）
 * 图片用 contain 完整显示（证书有横有竖，不能裁）
 * ============================================================ */

.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.cert-item {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cert-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
    border-color: #2563eb;
}

.cert-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    padding: 0.875rem;
    background: #f6f7f9;
    border-bottom: 1px solid #eef0f3;
}

.cert-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cert-item:hover .cert-thumb img {
    transform: scale(1.04);
}

.cert-name {
    display: block;
    padding: 0.8rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: #111827;
    text-align: center;
}

@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cert-thumb {
        height: 190px;
    }
}

@media (max-width: 480px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
    .cert-thumb {
        height: 240px;
    }
}

/* ============================================================
 * Vehicle Detail 页样式（2026-09-24 从 single-vehicle.php 内联 <style> 迁入）
 * 说明：这些类原先内联在 single-vehicle.php 的 <head> 里，
 *       改到这里是为了能被后面的暗色主题区块覆盖。
 * ============================================================ */

.vehicle-detail-page {
    background: #f9fafb;
    min-height: 100vh;
    padding: 2rem 0;
}
.vehicle-breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}
.vehicle-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}
.vehicle-breadcrumb a:hover {
    color: #2563eb;
}
.vehicle-breadcrumb span {
    color: #9ca3af;
    margin: 0 0.5rem;
}
.vehicle-breadcrumb .current {
    color: #111827;
}
.vehicle-main-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;   /* 2026-09-25：给左侧图集多留一点，放大面板才放得开 */
    gap: 2rem;
    margin-bottom: 2rem;
}
.vehicle-image-section {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}
.vehicle-image-section img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.vehicle-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.vehicle-thumbnails img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.3s;
}
.vehicle-thumbnails img.active {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    opacity: 1;
}
.vehicle-info-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.vehicle-tags {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.vehicle-tag {
    background: #2563eb;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}
.vehicle-tag.in-stock {
    background: #15803D;
}
.vehicle-title {
    /* 2026-09-28：详情页标题改为完整显示后，1.875rem(30px) 在桌面占 4 行、手机占 6 行，
       客户反馈"太大了" → 收到 20px。注意别改第 118 行那份（列表卡用，1.125rem）。 */
    font-size: 1.25rem;
    font-weight: bold;
    color: #111827;
    margin-bottom: 1rem;
}
/* 【2026-09-28】详情页标题必须显示**完整车名**，不能被列表卡的截断规则连坐。
   `.vehicle-title` 是与「车辆列表卡」共用的类名：上面第 118 行那份带
   `display:-webkit-box; -webkit-line-clamp:2; max-height:2.8em; overflow:hidden`，
   而详情页这份只覆盖了字号/颜色 —— 于是详情页标题被截成两行加「…」。
   这里用**更高特异性的后代选择器**（.vehicle-info-card 只出现在详情页）解除截断，
   列表卡那份截断原样保留（卡片高度才一致）。 */
.vehicle-info-card .vehicle-title {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}
.vehicle-meta-info {
    display: flex;
    align-items: center;
    color: #6b7280;
    margin-bottom: 1.5rem;
}
.vehicle-meta-info span {
    margin: 0 0.5rem;
}
.vehicle-price-display {
    font-size: 1.875rem;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 1.5rem;
}
.vehicle-description {
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}
.vehicle-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vehicle-actions .zg-btn {
    text-align: center;
    padding: 0.75rem 1.5rem;
}
/* 2026-09-25：Key Highlights 从右栏（0.85fr）挪到通栏，宽度与 .vehicle-specs-card 对齐；
   列表内部由竖排单列改为一行三个。
   margin-top 与 specs 卡片同取 2rem，与 .vehicle-main-grid 的 margin-bottom 相邻折叠后
   间距同样是 2rem —— 图集 / 亮点 / 规格 三块卡片的垂直节奏就统一了。 */
.vehicle-highlights-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-top: 2rem;
}
.vehicle-highlights-card h2 {
    font-size: 1.5rem;      /* 与 .vehicle-specs-card h2 一致：两块通栏卡上下相邻，字号不一致会显脏 */
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.vehicle-highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 一行三个 */
    gap: 0.5rem 1.5rem;
}
.vehicle-highlights-list li {
    display: flex;
    align-items: flex-start;   /* 文案换行时勾号留在首行；用 center 会浮到两行中间 */
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #374151;
    line-height: 1.6;
}
.vehicle-highlights-list li svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #15803D;
    flex-shrink: 0;
    margin-top: 0.175rem;   /* 让勾号与首行文字视觉居中对齐 */
}
.vehicle-specs-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-top: 2rem;
}
.vehicle-specs-card h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.vehicle-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.vehicle-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.vehicle-spec-label {
    color: #6b7280;
}
.vehicle-spec-value {
    font-weight: 500;
    color: #111827;
}
.vehicle-features-section {
    margin-top: 2rem;
}
.vehicle-features-section h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.vehicle-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.vehicle-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
}
.vehicle-feature-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #2563eb;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .vehicle-main-grid {
        grid-template-columns: 1fr;
    }
    .vehicle-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vehicle-highlights-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .vehicle-features-grid {
        grid-template-columns: 1fr;
    }
    .vehicle-thumbnails {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 480px) {
    /* 手机竖屏一行三个会被挤成「勾号 + 两三个词就换行」，回落到单列更好读 */
    .vehicle-highlights-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 车辆详情页图集（2026-09-25 重做 · 对齐 Alibaba 详情页）
 *
 * 结构（见 single-vehicle.php）：
 *   .zg-gallery-card
 *     .zg-gallery[data-zg-gallery]        ← JS 的 offsetParent，放大面板相对它定位
 *       .zg-thumbs      竖排缩略图列（76px）
 *         .zg-arrow-up / .zg-thumbs-viewport > .zg-thumbs-track > button.zg-thumb / .zg-arrow-down
 *       .zg-stage       主图舞台（.zg-main-img + .zg-lens + .zg-nav×2 + .zg-tools）
 *       .zg-zoom-panel  悬停放大面板（绝对定位，贴主图右侧）
 *
 * 几何计算全在 assets/js/zhonggu-gallery.js —— 那边按 object-fit:cover 反推
 * 图片渲染尺寸/偏移，所以 **这里必须保住 `width:100%;height:100%;object-fit:cover`**，
 * 改任何一个都会让取景框和放大内容对不上。
 *
 * 缩略图列改用「绝对定位的 viewport」：绝对定位元素不参与父级高度计算，
 * 于是整列高度完全由 .zg-stage 的 aspect-ratio 撑出来 —— 避免
 * 「缩略图多 → 撑高行 → 主图跟着变形」的连锁问题。
 * ============================================================ */

.zg-gallery-card {
    position: relative;
    z-index: 2;                     /* 让放大面板能盖到右侧信息栏上 */
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
}

.zg-gallery {
    position: relative;             /* .zg-zoom-panel 的定位基准（= JS 里的 root） */
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}
/* 单图：没有缩略图列，主图显式占满整行（否则会掉进 76px 那一格） */
.zg-gallery-single { grid-template-columns: minmax(0, 1fr); }
.zg-gallery-single .zg-stage { grid-column: 1 / -1; }
/* ⚠️ 单图时缩略图列只是**藏起来**，不能从模板里删掉 ——
   每个 .zg-thumb 上的 data-large / data-full 是放大镜与全屏按钮的数据源。 */
.zg-gallery-single .zg-thumbs { display: none; }

/* ---------- 竖排缩略图列 ---------- */
.zg-thumbs { position: relative; min-width: 0; }

.zg-thumbs-viewport {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.75rem;                   /* 让出上方箭头 24px + 4px */
    bottom: 1.75rem;
    overflow: hidden;
}
.zg-thumbs-track {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.25s ease;
    will-change: transform;
}

.zg-thumb {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.zg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zg-thumb:hover { border-color: #cbd5e1; }
.zg-thumb.active { border-color: #2563eb; }
.zg-thumb:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.zg-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #6b7280;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    transition: color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.zg-arrow-up { top: 0; }
.zg-arrow-down { bottom: 0; }
.zg-arrow svg { width: 1rem; height: 1rem; }
.zg-arrow:hover:not(:disabled) { color: #2563eb; background: #f3f4f6; }
.zg-arrow:disabled { opacity: 0.28; cursor: default; }

/* ---------- 主图舞台 ---------- */
.zg-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #f3f4f6;
    cursor: crosshair;
}
.zg-main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* ⚠️ JS 的 geometry() 依赖这一行，勿改 */
}

/* 取景框（跟随鼠标） */
.zg-lens {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    pointer-events: none;
    z-index: 3;
    border: 1px solid rgba(37, 99, 235, 0.9);
    background: rgba(37, 99, 235, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.zg-lens.show { display: block; }

/* 主图左右翻页（悬停才显形） */
.zg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(17, 24, 39, 0.45);
    border: 0;
    border-radius: 9999px;
    opacity: 0;
    z-index: 4;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.zg-stage:hover .zg-nav,
.zg-nav:focus-visible { opacity: 1; }
.zg-nav:hover { background: rgba(17, 24, 39, 0.72); }
.zg-nav svg { width: 1.125rem; height: 1.125rem; }
.zg-nav-prev { left: 0.5rem; }
.zg-nav-next { right: 0.5rem; }

/* 右上角工具（全屏 / 打开原图） */
.zg-tools {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.375rem;
    z-index: 4;
}
.zg-tool {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(17, 24, 39, 0.45);
    border: 0;
    border-radius: 0.375rem;
    transition: background 0.2s ease;
}
.zg-tool:hover { background: rgba(17, 24, 39, 0.72); }
.zg-tool svg { width: 1rem; height: 1rem; }

/* ---------- 悬停放大面板 ---------- */
.zg-zoom-panel {
    position: absolute;
    display: none;
    overflow: hidden;
    pointer-events: none;           /* 别把鼠标事件从主图抢走 */
    z-index: 30;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.zg-zoom-panel.show { display: block; }
.zg-zoom-panel-inner {
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* 放大面板压到右侧固定社交栏时（单图车舞台更宽，容易发生），把社交栏临时淡出。
   社交栏 z-index 999 比图集卡片高，硬顶它会把放大图切掉一块；
   面板自身 pointer-events:none，淡出期间点击照样穿透到下方元素。
   类名由 zhonggu-gallery.js 按「面板右边缘 vs 社交栏左边缘」实际重叠来加。 */
.social-sidebar { transition: opacity 0.18s ease; }
body.zg-zoom-overlap .social-sidebar {
    opacity: 0;
    pointer-events: none;
}

/* 隐藏的灯箱锚点（供 zhonggu-lightbox.js 接管，按钮点它而不是自己实现弹层） */
.zg-hidden-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- 窄屏：缩略图横排在主图下方，触屏关掉悬停放大 ---------- */
@media (max-width: 768px) {
    .zg-gallery { grid-template-columns: minmax(0, 1fr); }
    .zg-gallery-single .zg-stage { grid-column: auto; }

    .zg-stage { order: 1; cursor: default; }
    .zg-nav { opacity: 1; }        /* 触屏没有 hover，箭头常显 */

    .zg-thumbs {
        order: 2;
        position: static;
        margin-top: 0.625rem;
    }
    .zg-thumbs-viewport {
        position: static;
        top: auto;
        bottom: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .zg-thumbs-viewport::-webkit-scrollbar { display: none; }
    .zg-thumbs-track {
        flex-direction: row;
        gap: 0.5rem;
        transform: none !important;   /* 压掉 JS 写进来的 translateY */
    }
    .zg-thumb { flex: 0 0 4.5rem; width: 4.5rem; }
    .zg-arrow { display: none; }

    /* 触屏不做悬停放大（JS 的 hoverOK() 也会返回 false，这里是双保险） */
    .zg-lens, .zg-zoom-panel { display: none !important; }
}

/* ============================================================
 * 主题切换相关类 · 浅色基值（2026-09-25）
 *
 * 这些类原先的「颜色」直接写在模板的 style="" 里，为了支持亮/暗主题切换，
 * 颜色统一挪到 CSS：**这里存浅色原值**，暗色值在文件末尾的暗色皮肤里覆盖。
 * ⚠️ 本区块必须在暗色皮肤**之前** —— 暗色皮肤是脚本管理、会被整体切掉重写的，
 *    写在它后面会被一起切掉（apply-dark-skin.py）。
 * ============================================================ */

/* 空图占位（图片缺失时的灰底 + 居中图标） */
.zg-empty-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}
.zg-empty-thumb-icon { color: #9ca3af; }

/* 车辆列表「没有匹配的结果」提示 */
.zg-empty-note {
    text-align: center;
    color: #6b7280;
    padding: 3rem 0;
}

/* 页脚联系信息那一列：原内联 style 里带字号，类里没有，这里补上 */
.footer-list { font-size: 0.875rem; }

/* ===== FAQs / 常见问题（2026-09-27）=====
   后台「首页内容 → 常见问题 FAQ」；一条都没有时整块不输出。
   折叠交互用原生 <details>/<summary>，零 JS 依赖。 */
.faq-section {
    padding: 4.5rem 0;
    background: #fff;
}
.faq-heading { margin-bottom: 2rem; }
.faq-list {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}
/* 问题行 = 原生 <summary>：去掉系统三角，自己画 +/− */
.faq-question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 1.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: #2563eb; }
.faq-item[open] .faq-question { color: #2563eb; }
.faq-q-text { flex: 1; }
.faq-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.3rem;
}
.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: opacity 0.2s ease;
}
.faq-toggle::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-toggle::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
/* 展开时竖线淡出 → 加号变减号 */
.faq-item[open] .faq-toggle::after { opacity: 0; }
/* 答案区 */
.faq-answer {
    padding: 1rem 1.375rem 1.375rem;
    background: #f7f7f8;
    border-top: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.75;
}
.faq-answer p { margin: 0 0 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: #2563eb; text-decoration: underline; }
.faq-answer ol,
.faq-answer ul { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; }
.faq-answer li { margin-bottom: 0.25rem; }
.faq-answer li:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .faq-section { padding: 3rem 0; }
    .faq-question { padding: 1rem 1.125rem; font-size: 1rem; gap: 1rem; }
    .faq-answer { padding: 0.875rem 1.125rem 1.125rem; }
}

/* ---------- 价格梯度表（车辆详情页右侧，2026-09-27） ----------
 *
 * 只在这台车配了 >= 2 档阶梯价时才渲染（否则模板回落「原价」那一行）。
 * 外面同时挂着 .vehicle-price-display（保持语义与既有脚本兼容），但这里要把
 * 它那句「1.875rem 蓝色加粗」的观感重置掉，否则整张表会变成一行巨型蓝字。
 */
.vehicle-price-tiers {
    font-size: 1rem;
    font-weight: 400;
    color: #374151;
    margin-bottom: 1.5rem;
}
.vehicle-price-tiers .vpt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.875rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1e40af;
}
.vehicle-price-tiers .vpt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
}
.vehicle-price-tiers .vpt-row:last-of-type {
    border-radius: 0 0 0.5rem 0.5rem;
}
.vehicle-price-tiers .vpt-qty {
    font-size: 0.9375rem;
    color: #4b5563;
    white-space: nowrap;
}
.vehicle-price-tiers .vpt-price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
}
.vehicle-price-tiers .vpt-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #6b7280;
}

@media (max-width: 480px) {
    .vehicle-price-tiers .vpt-head,
    .vehicle-price-tiers .vpt-row { padding: 0.5rem 0.75rem; gap: 0.5rem; }
    .vehicle-price-tiers .vpt-qty { font-size: 0.875rem; }
    .vehicle-price-tiers .vpt-price { font-size: 1rem; }
}

/* ============================================================
 * 全站暗色主题 · Dark Skin（2026-09-24）
 * 客户指定：网站背景主题色 #0C0B0B
 *
 * 设计体系（三层表面 + 半透明描边，靠留白而非色块分隔）
 *   L0 页面底   #0C0B0B   交替区块 #121112
 *   L1 卡片面   #151415   描边 rgba(255,255,255,.08)
 *   L2 悬浮面   #1E1D1E
 *   T1 主文字   #F2F1F1   T2 正文 #C9C7C7   T3 次要 #96938F
 *   品牌蓝保留作为点缀：实底 #2563eb，暗底上的蓝色文字提亮为 #6BA5FF
 *   绿色（WhatsApp / In Stock）统一 #15803D（浅色 / 暗色两档都满足白字 4.5:1）
 *
 * 注意：本文件是**源码**，不要直接改 zhonggu-styles.css 里的暗色块。
 *       改这里 → 跑 tools/apply-dark-skin.py → 脚本会
 *       ① 切掉旧的尾部区块 ② 给下面每个选择器自动加上
 *       `html[data-theme="dark"]` 前缀（作用域化，供主题开关切换）
 *       ③ 再追加 _theme-toggle.css。
 *       所以：`html` 去掉 data-theme="dark" 属性 = 回到原始浅色主题。
 *       ⚠️ 新增的**普通组件样式**要写在暗色块"之前"（zhonggu-styles.css 中段），
 *          写到暗色块之后会被下一次运行脚本时切掉，而且不报错。
 * ============================================================ */
html[data-theme="dark"] {
    --zg-bg: #0C0B0B;
    --zg-bg-alt: #121112;
    --zg-surface: #151415;
    --zg-surface-2: #1E1D1E;
    --zg-line: rgba(255, 255, 255, 0.08);
    --zg-line-2: rgba(255, 255, 255, 0.14);
    --zg-t1: #F2F1F1;
    --zg-t2: #C9C7C7;
    --zg-t3: #96938F;
    --zg-accent: #2563eb;
    --zg-accent-fg: #6BA5FF;
    --zg-accent-soft: rgba(37, 99, 235, 0.14);
    --zg-green: #15803D;
    --zg-green-hover: #166534;
    --zg-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    --zg-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- 1. 画布与 Astra 容器 ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--zg-bg) !important;
}

/* 只对 Astra 的包裹层置透明，body 自身保留底色。
 * ⚠️ 千万不要把裸的 `.ast-separate-container` 写进这张列表 ——
 *    它是 **body 的类名**（Astra 独立容器布局），写进来会把 body 背景
 *    重新覆盖成 transparent（同权重 !important 后者胜出），
 *    导致 archive / single 页 body 透明，只有 blank 模板的首页正常。 */
html[data-theme="dark"] .site,
html[data-theme="dark"] #page,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .ast-container,
html[data-theme="dark"] #primary,
html[data-theme="dark"] #main,
html[data-theme="dark"] .ast-separate-container #primary,
html[data-theme="dark"] .ast-separate-container .ast-article-post,
html[data-theme="dark"] .ast-separate-container .ast-article-single {
    background-color: transparent !important;
}

html[data-theme="dark"] body {
    color: var(--zg-t2) !important;
    /* Astra 用这组变量算正文/标题色，不覆盖会出现深底深字 */
    --ast-global-color-0: 242, 241, 241;
    --ast-global-color-1: 242, 241, 241;
    --ast-global-color-2: 242, 241, 241;
    --ast-global-color-3: 201, 199, 199;
    --ast-global-color-4: 12, 11, 11;
    --ast-global-color-5: 12, 11, 11;
}

html[data-theme="dark"]::selection {
    background: rgba(37, 99, 235, 0.45);
    color: #fff;
}

html[data-theme="dark"]::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"]::-webkit-scrollbar-track { background: #0C0B0B; }
html[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: #2A2828;
    border-radius: 6px;
    border: 2px solid #0C0B0B;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: #3A3737; }

/* ---------- 2. 区块底色：浅底 → 暗底 ---------- */

/* 原本 #ffffff 的区块 → L0（靠留白分隔，不加色差） */
html[data-theme="dark"] .stats-section,
html[data-theme="dark"] .vehicles-section,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .news-section {
    background: var(--zg-bg) !important;
}

/* 原本 #f9fafb 的区块 → 极微提亮，形成段落节奏 */
html[data-theme="dark"] .brands-section,
html[data-theme="dark"] .hot-section,
html[data-theme="dark"] .reviews-section,
html[data-theme="dark"] .sales-team-section,
html[data-theme="dark"] .related-section,
html[data-theme="dark"] .news-crumb-bar,
html[data-theme="dark"] .news-detail-wrap,
html[data-theme="dark"] .license-figure {
    background: var(--zg-bg-alt) !important;
}

/* 原本 #111827 的深色区块 → 与页面底统一 */
html[data-theme="dark"] .why-section,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .news-hero {
    background: var(--zg-bg) !important;
}

/* 关于我们 / 联系我们 / 车辆列表的内页容器 */
html[data-theme="dark"] .content-section {
    background: var(--zg-bg) !important;
}

/* ---------- 3. 卡片：白底 → L1 浮起面 ---------- */
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .brand-item,
html[data-theme="dark"] .vehicle-card,
html[data-theme="dark"] .hot-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .sales-rep-card,
html[data-theme="dark"] .cert-item,
html[data-theme="dark"] .news-detail-card,
html[data-theme="dark"] .news-more-card,
html[data-theme="dark"] .vehicle-detail-gallery-card,
html[data-theme="dark"] .about-photos-container,
html[data-theme="dark"] .about-text-card {
    background: var(--zg-surface) !important;
    border: 1px solid var(--zg-line) !important;
    box-shadow: var(--zg-shadow) !important;
}

html[data-theme="dark"] .vehicle-card:hover,
html[data-theme="dark"] .hot-card:hover,
html[data-theme="dark"] .news-card:hover,
html[data-theme="dark"] .review-card:hover {
    box-shadow: var(--zg-shadow-lg) !important;
}

html[data-theme="dark"] .brand-item:hover {
    background: var(--zg-surface-2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* 图片 / 缩略图占位底 */
html[data-theme="dark"] .vehicle-image,
html[data-theme="dark"] .sales-rep-photo,
html[data-theme="dark"] .news-thumb-placeholder,
html[data-theme="dark"] .news-more-thumb,
html[data-theme="dark"] .cert-thumb,
html[data-theme="dark"] .about-photos img {
    background: #1A191A !important;
}

/* ---------- 3b. 车辆详情页（样式原先内联在 single-vehicle.php，已迁入） ---------- */
html[data-theme="dark"] .vehicle-detail-page {
    background: var(--zg-bg) !important;
}

html[data-theme="dark"] .vehicle-image-section,
html[data-theme="dark"] .vehicle-info-card,
html[data-theme="dark"] .vehicle-highlights-card,
html[data-theme="dark"] .vehicle-specs-card {
    background: var(--zg-surface) !important;
    border: 1px solid var(--zg-line) !important;
    box-shadow: var(--zg-shadow) !important;
}

html[data-theme="dark"] .vehicle-title,
html[data-theme="dark"] .vehicle-specs-card h2,
html[data-theme="dark"] .vehicle-highlights-card h2,
html[data-theme="dark"] .vehicle-features-section h3 {
    color: var(--zg-t1) !important;
}

html[data-theme="dark"] .vehicle-price-display { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .vehicle-meta-info { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vehicle-description { color: var(--zg-t2) !important; }

html[data-theme="dark"] .vehicle-breadcrumb a { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vehicle-breadcrumb a:hover { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .vehicle-breadcrumb span { color: #6E6B68 !important; }
html[data-theme="dark"] .vehicle-breadcrumb .current { color: var(--zg-t2) !important; }

html[data-theme="dark"] .vehicle-spec-row { border-bottom-color: var(--zg-line) !important; }
html[data-theme="dark"] .vehicle-spec-label { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vehicle-spec-value { color: var(--zg-t1) !important; }

html[data-theme="dark"] .vehicle-highlights-list li,
html[data-theme="dark"] .vehicle-feature-item { color: var(--zg-t2) !important; }
html[data-theme="dark"] .vehicle-highlights-list li svg { color: #4ADE80 !important; }
html[data-theme="dark"] .vehicle-feature-item svg { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .vehicle-thumbnails img { background: #1A191A !important; }
html[data-theme="dark"] .vehicle-thumbnails img.active { outline-color: var(--zg-accent) !important; }

/* ---------- 3b-2. 车辆详情页图集（2026-09-25 重做 · 竖排缩略图 + 悬停放大） ---------- */
html[data-theme="dark"] .zg-gallery-card {
    background: var(--zg-surface) !important;
    border: 1px solid var(--zg-line) !important;
    box-shadow: var(--zg-shadow) !important;
}
html[data-theme="dark"] .zg-stage { background: #1A191A !important; }
html[data-theme="dark"] .zg-zoom-panel {
    background: #1A191A !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.62) !important;
}

html[data-theme="dark"] .zg-thumb { background: #1A191A !important; border-color: transparent !important; }
html[data-theme="dark"] .zg-thumb:hover { border-color: #3A3836 !important; }
html[data-theme="dark"] .zg-thumb.active { border-color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .zg-arrow { color: var(--zg-t3) !important; }
html[data-theme="dark"] .zg-arrow:hover:not(:disabled) { color: var(--zg-accent-fg) !important; background: #1A191A !important; }

/* 主图上的浮动按钮：暗底上不能用深色玻璃，改成浅色玻璃才看得见 */
html[data-theme="dark"] .zg-nav,
html[data-theme="dark"] .zg-tool { background: rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important; }
html[data-theme="dark"] .zg-nav:hover,
html[data-theme="dark"] .zg-tool:hover { background: rgba(255, 255, 255, 0.26) !important; }

html[data-theme="dark"] .zg-lens {
    border-color: rgba(107, 165, 255, 0.92) !important;
    background: rgba(107, 165, 255, 0.18) !important;
}

/* ---------- 4. 顶部导航 ---------- */
html[data-theme="dark"] .top-bar {
    background: var(--zg-bg) !important;
    border-bottom: 1px solid var(--zg-line);
}
html[data-theme="dark"] .top-bar-item { color: var(--zg-t2) !important; }
html[data-theme="dark"] .top-bar-item:hover { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .standard-header,
html[data-theme="dark"] .main-header {
    background: var(--zg-bg) !important;
    border-bottom: 1px solid var(--zg-line);
}

html[data-theme="dark"] .site-header:not(.site-header-transparent) {
    background: var(--zg-bg) !important;
    box-shadow: 0 1px 0 var(--zg-line) !important;
    border-bottom: 1px solid var(--zg-line);
}

html[data-theme="dark"] .logo-title { color: var(--zg-t1) !important; }
html[data-theme="dark"] .logo-subtitle { color: var(--zg-t3) !important; }

html[data-theme="dark"] .nav-link { color: var(--zg-t2) !important; }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .nav-link.active { border-bottom-color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .header-phone { color: var(--zg-t2) !important; }
html[data-theme="dark"] .header-phone:hover { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .mobile-menu-btn svg { color: var(--zg-t1); }

/* 移动端下拉菜单：必须给底色，否则黑底黑字 */
html[data-theme="dark"] .mobile-menu {
    background: var(--zg-bg) !important;
    border-top: 1px solid var(--zg-line) !important;
}
html[data-theme="dark"] .mobile-menu-link { color: var(--zg-t2) !important; }
html[data-theme="dark"] .mobile-menu-link:hover,
html[data-theme="dark"] .mobile-menu-link.active { color: var(--zg-accent-fg) !important; }

/* 顶部联系条（首页透明头部之上，压在视频上，保持白字） */
html[data-theme="dark"] .top-contact-bar { background: transparent !important; }
html[data-theme="dark"] .top-contact-item { color: #fff !important; }

/* ---------- 5. 首页 Hero / 统计 / 为什么选我们 ---------- */
html[data-theme="dark"] .stats-section {
    border-top: 1px solid var(--zg-line);
    border-bottom: 1px solid var(--zg-line);
}
html[data-theme="dark"] .stat-number { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .stat-label { color: var(--zg-t3) !important; }

html[data-theme="dark"] .why-title { color: var(--zg-t1) !important; }
html[data-theme="dark"] .why-description { color: var(--zg-t3) !important; }

html[data-theme="dark"] .brand-name { color: var(--zg-t2) !important; }
html[data-theme="dark"] .brand-tag {
    background: var(--zg-surface-2) !important;
    color: var(--zg-t2) !important;
    border: 1px solid var(--zg-line);
}

html[data-theme="dark"] .section-title { color: var(--zg-t1) !important; }

/* ---------- 6. 车辆卡片 ---------- */
html[data-theme="dark"] .vehicle-title,
html[data-theme="dark"] .hot-card-title { color: var(--zg-t1) !important; }
html[data-theme="dark"] .vehicle-card:hover .vehicle-title,
html[data-theme="dark"] .hot-card:hover .hot-card-title { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .vehicle-meta { color: var(--zg-t3) !important; }
html[data-theme="dark"] .price-amount,
html[data-theme="dark"] .hot-card-price { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .price-label { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vehicle-price { border-top-color: var(--zg-line) !important; }

/* 绿色徽标/按钮统一加深，保证白字对比度达标 */
html[data-theme="dark"] .vehicle-badge,
html[data-theme="dark"] .vehicle-tag,
html[data-theme="dark"] .vehicle-tag.in-stock { background: var(--zg-green) !important; color: #fff !important; }

html[data-theme="dark"] .btn-more-models {
    background: var(--zg-surface) !important;
    color: var(--zg-t1) !important;
    border: 1px solid var(--zg-line) !important;
}
html[data-theme="dark"] .btn-more-models:hover {
    background: var(--zg-surface-2) !important;
    color: var(--zg-accent-fg) !important;
    border-color: var(--zg-line-2) !important;
}

/* ---------- 6b. 按钮：绿色加深 + 次级按钮改幽灵样式 ---------- */
html[data-theme="dark"] .zg-btn-whatsapp { background: var(--zg-green) !important; color: #fff !important; }
html[data-theme="dark"] .zg-btn-whatsapp:hover { background: var(--zg-green-hover) !important; }

html[data-theme="dark"] .sales-rep-wa { background: var(--zg-green) !important; color: #fff !important; }
html[data-theme="dark"] .sales-rep-wa:hover { background: var(--zg-green-hover) !important; color: #fff !important; }

/* 右下角悬浮 WhatsApp 按钮（内联 #15803D） */
html[data-theme="dark"] a[style*="#15803D"] { background: var(--zg-green) !important; }

html[data-theme="dark"] .zg-btn-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--zg-t1) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-theme="dark"] .zg-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}
/* 蓝色 CTA 区里的次级按钮改深底，避免半透明白叠蓝导致对比不足 */
html[data-theme="dark"] .cta-section .zg-btn-secondary {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}
html[data-theme="dark"] .cta-section .zg-btn-secondary:hover { background: rgba(0, 0, 0, 0.5) !important; }

html[data-theme="dark"] .cta-subtitle { color: rgba(255, 255, 255, 0.94) !important; }

/* ---------- 7. 新闻 ---------- */
html[data-theme="dark"] .news-title a,
html[data-theme="dark"] .news-more-head a,
html[data-theme="dark"] .news-detail-content h2,
html[data-theme="dark"] .news-detail-content h3,
html[data-theme="dark"] .news-more-title,
html[data-theme="dark"] .news-crumb .current,
html[data-theme="dark"] .news-detail-content strong { color: var(--zg-t1) !important; }

html[data-theme="dark"] .news-title a:hover,
html[data-theme="dark"] .news-more-head a:hover { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .news-excerpt,
html[data-theme="dark"] .news-detail-content,
html[data-theme="dark"] .news-detail-content p,
html[data-theme="dark"] .news-detail-content li { color: var(--zg-t2) !important; }

html[data-theme="dark"] .news-date,
html[data-theme="dark"] .news-more-date,
html[data-theme="dark"] .news-more-ex,
html[data-theme="dark"] .news-crumb,
html[data-theme="dark"] .news-crumb a,
html[data-theme="dark"] .news-back-link { color: var(--zg-t3) !important; }

html[data-theme="dark"] .news-crumb a:hover,
html[data-theme="dark"] .news-back-link:hover { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .news-detail-content a { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .news-detail-content blockquote {
    border-left-color: var(--zg-accent) !important;
    background: var(--zg-surface) !important;
    color: var(--zg-t2) !important;
}
html[data-theme="dark"] .news-detail-content table,
html[data-theme="dark"] .news-detail-content th,
html[data-theme="dark"] .news-detail-content td { border-color: var(--zg-line) !important; }
html[data-theme="dark"] .news-detail-content th { background: var(--zg-surface-2) !important; color: var(--zg-t1) !important; }
html[data-theme="dark"] .news-detail-content code {
    background: var(--zg-surface-2) !important;
    color: #F0B0A0 !important;
}

/* ---------- 8. 内页（关于我们 / 联系我们 / 列表） ---------- */
html[data-theme="dark"] .content-title,
html[data-theme="dark"] .service-title,
html[data-theme="dark"] .contact-info-title,
html[data-theme="dark"] .contact-form-title,
html[data-theme="dark"] .about-title { color: var(--zg-t1) !important; }

html[data-theme="dark"] .content-text,
html[data-theme="dark"] .about-paragraph,
html[data-theme="dark"] .service-description,
html[data-theme="dark"] .contact-info-value,
html[data-theme="dark"] .contact-info-value a,
html[data-theme="dark"] .info-text { color: var(--zg-t2) !important; }

html[data-theme="dark"] .info-label { color: var(--zg-t3) !important; }
html[data-theme="dark"] .info-value { color: var(--zg-t1) !important; }
html[data-theme="dark"] .info-value a { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .info-value a:hover { color: #93BFFF !important; }

html[data-theme="dark"] .contact-info-icon { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .contact-info-value a:hover { color: var(--zg-accent-fg) !important; }

/* 联系页社交链接（原 #4b5563 在暗底上过暗） */
html[data-theme="dark"] .social-link { color: var(--zg-t2) !important; }
html[data-theme="dark"] .social-link:hover { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .service-icon { background: var(--zg-accent-soft) !important; }
html[data-theme="dark"] .service-icon svg { color: var(--zg-accent-fg) !important; }

html[data-theme="dark"] .about-more-link,
html[data-theme="dark"] .view-all-link { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .about-more-link:hover,
html[data-theme="dark"] .view-all-link:hover { color: #93BFFF !important; }

html[data-theme="dark"] .sales-team-subtitle,
html[data-theme="dark"] .sales-rep-lang,
html[data-theme="dark"] .sales-rep-mail { color: var(--zg-t3) !important; }
html[data-theme="dark"] .sales-rep-name { color: var(--zg-t1) !important; }
html[data-theme="dark"] .sales-rep-role { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .sales-rep-mail:hover { color: var(--zg-accent-fg) !important; }

/* ---------- 8b. 用户评价 ---------- */
html[data-theme="dark"] .review-text { color: var(--zg-t2) !important; }
html[data-theme="dark"] .review-name { color: var(--zg-t1) !important; }
html[data-theme="dark"] .review-source { color: var(--zg-t3) !important; }
html[data-theme="dark"] .review-stars .star.off { fill: #3A3737 !important; }

/* ---------- 9. 侧边社交栏 ---------- */
/* 底色 #151415 与页面 #0C0B0B 太接近 → 提亮一档 + 描边，否则整条隐没在页面里。
 * 原样式还留着 border-bottom: 1px solid #eee（浅色分隔线），暗底上会发亮，一并改掉。
 * ⚠️ 图标颜色由 zhonggu_social_icon_color() 决定，已把 TikTok/X 的纯黑
 *    改成 #25F4EE / #FFFFFF —— 否则黑图标落在暗底上看不见。 */
html[data-theme="dark"] .social-sidebar-item {
    background: #1F1E1F !important;
    color: var(--zg-t2) !important;
    border-bottom: 1px solid var(--zg-line) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .social-sidebar-item:hover {
    background: var(--zg-accent) !important;
    color: #fff !important;
}
html[data-theme="dark"] .social-sidebar-top {
    background: #2A2828 !important;
    color: var(--zg-t1) !important;
    border-bottom: 1px solid var(--zg-line) !important;
}
html[data-theme="dark"] .social-sidebar-top svg { color: var(--zg-t1) !important; }
html[data-theme="dark"] .social-sidebar-top:hover {
    background: var(--zg-accent) !important;
    color: #fff !important;
}
html[data-theme="dark"] .social-sidebar-top:hover svg { color: #fff !important; }

/* ---------- 10. 车辆列表：筛选 / 分页 / 搜索 ---------- */
html[data-theme="dark"] .vehicle-filters { background: var(--zg-bg) !important; }
html[data-theme="dark"] .vf-label { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vf-chip {
    background: var(--zg-surface) !important;
    color: var(--zg-t2) !important;
    border: 1px solid var(--zg-line);
}
html[data-theme="dark"] .vf-chip:hover { color: var(--zg-accent-fg) !important; border-color: var(--zg-line-2); }
html[data-theme="dark"] .vf-chip.active {
    background: var(--zg-accent) !important;
    color: #fff !important;
    border-color: var(--zg-accent) !important;
}
html[data-theme="dark"] .vf-count { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vf-empty { background: var(--zg-surface) !important; color: var(--zg-t3) !important; }
html[data-theme="dark"] .vf-empty a { color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .vf-summary { color: var(--zg-t3) !important; }
html[data-theme="dark"] .vf-summary strong { color: var(--zg-t1) !important; }
html[data-theme="dark"] .vf-search input[type="search"],
html[data-theme="dark"] .vf-search input[type="text"] {
    background: var(--zg-surface) !important;
    color: var(--zg-t1) !important;
    border: 1px solid var(--zg-line) !important;
}
html[data-theme="dark"] .vf-search input::placeholder { color: #6E6B68 !important; }
html[data-theme="dark"] .vf-search-btn { background: var(--zg-accent) !important; color: #fff !important; }
html[data-theme="dark"] .vf-search-clear { color: var(--zg-t3) !important; }

html[data-theme="dark"] .pg-btn {
    background: var(--zg-surface) !important;
    color: var(--zg-t2) !important;
    border: 1px solid var(--zg-line) !important;
}
html[data-theme="dark"] .pg-btn:hover { color: var(--zg-accent-fg) !important; border-color: var(--zg-line-2); }
html[data-theme="dark"] .pg-btn.active {
    background: var(--zg-accent) !important;
    color: #fff !important;
    border-color: var(--zg-accent) !important;
}
html[data-theme="dark"] .pg-btn.disabled { background: #100F10 !important; color: #85827F !important; }
html[data-theme="dark"] .pg-ellipsis { color: var(--zg-t3) !important; }

/* ---------- 11. 表单控件（Fluent Forms + 通用） ---------- */
html[data-theme="dark"] .contact-form-card input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .contact-form-card textarea,
html[data-theme="dark"] .contact-form-card select,
html[data-theme="dark"] .fluentform input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .fluentform textarea,
html[data-theme="dark"] .fluentform select {
    background-color: var(--zg-surface-2) !important;
    color: var(--zg-t1) !important;
    border: 1px solid var(--zg-line) !important;
}

html[data-theme="dark"] .contact-form-card input::placeholder,
html[data-theme="dark"] .contact-form-card textarea::placeholder,
html[data-theme="dark"] .fluentform input::placeholder,
html[data-theme="dark"] .fluentform textarea::placeholder { color: #7A7774 !important; }

html[data-theme="dark"] .contact-form-card input:focus,
html[data-theme="dark"] .contact-form-card textarea:focus,
html[data-theme="dark"] .contact-form-card select:focus,
html[data-theme="dark"] .fluentform input:focus,
html[data-theme="dark"] .fluentform textarea:focus,
html[data-theme="dark"] .fluentform select:focus {
    border-color: var(--zg-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

html[data-theme="dark"] .fluentform label,
html[data-theme="dark"] .contact-form-card label,
html[data-theme="dark"] .fluentform .ff-el-input--label label { color: var(--zg-t2) !important; }

html[data-theme="dark"] .fluentform .ff-el-help-message,
html[data-theme="dark"] .fluentform .ff-el-is-required { color: var(--zg-t3) !important; }

/* 提交按钮：Fluent Forms 默认 #1a7efb 白字只有 3.87:1，换成品牌蓝 */
html[data-theme="dark"] .fluentform .ff-btn.ff-btn-submit,
html[data-theme="dark"] .ff-btn-submit {
    background-color: var(--zg-accent) !important;
    color: #fff !important;
    border: none !important;
}
html[data-theme="dark"] .fluentform .ff-btn.ff-btn-submit:hover,
html[data-theme="dark"] .ff-btn-submit:hover { background-color: #1d4ed8 !important; }

html[data-theme="dark"] .fluentform .ff-message-success {
    background: rgba(22, 163, 74, 0.16) !important;
    color: #86EFAC !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}
html[data-theme="dark"] .fluentform .error.text-danger,
html[data-theme="dark"] .fluentform .ff-el-input--content .error { color: #FCA5A5 !important; }
html[data-theme="dark"] .fluentform .ff-el-form-check-label { color: var(--zg-t2) !important; }

/* ---------- 12. 页脚（模板里有内联色，这里 !important 兜底） ---------- */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer.site-footer {
    background: var(--zg-bg) !important;
    color: var(--zg-t3) !important;
    border-top: 1px solid var(--zg-line);
}
html[data-theme="dark"] .footer-title,
html[data-theme="dark"] .footer-subtitle { color: var(--zg-t1) !important; }
html[data-theme="dark"] .footer-list a { color: var(--zg-t3) !important; }
html[data-theme="dark"] .footer-list a:hover { color: var(--zg-t1) !important; }

html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4 { color: var(--zg-t1) !important; }
html[data-theme="dark"] footer a { color: var(--zg-t3) !important; }
html[data-theme="dark"] footer a:hover { color: #fff !important; }
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer li { color: var(--zg-t3) !important; }

/* ---------- 13. 悬浮 WhatsApp 按钮投影 ---------- */
html[data-theme="dark"] a[style*="#15803D"] { box-shadow: 0 6px 18px rgba(21, 128, 61, 0.45) !important; }

/* ---------- 14. 证书墙 ---------- */
html[data-theme="dark"] .cert-thumb { border-bottom-color: var(--zg-line) !important; }
html[data-theme="dark"] .cert-name { color: var(--zg-t1) !important; }
html[data-theme="dark"] .cert-item:hover { border-color: var(--zg-accent) !important; }

/* ---------- 15. 空状态 / 提示 ---------- */
html[data-theme="dark"] .zg-empty,
html[data-theme="dark"] .vf-empty p { color: var(--zg-t3) !important; }

/* ---------- 16. 响应式微调 ---------- */
@media (max-width: 768px) {

    html[data-theme="dark"] .content-section { background: var(--zg-bg) !important; }

}


/* ---------- 17. 空图占位 / 空结果提示（2026-09-25） ----------
 * 颜色原先写死在模板内联里，为了支持主题切换已迁进 CSS；
 * 浅色原值在 zhonggu-styles.css 上方，这里给暗色值。
 * 外层 html[data-theme="dark"] 已提供更高权重，无需 !important。 */
html[data-theme="dark"] .zg-empty-thumb { background: #1A191A; }
html[data-theme="dark"] .zg-empty-thumb-icon { color: #5C5A57; }
html[data-theme="dark"] .zg-empty-note { color: var(--zg-t3); }

/* ---------- 18. 页脚内层分隔线（2026-09-25） ----------
 * .footer-bottom 的 border-top 在不透明浅色时是 #374151，
 * 暗底上偏亮，跟其它描边统一。 */
html[data-theme="dark"] .footer-bottom { border-top-color: var(--zg-line); }

/* ---------- 19. 新闻列表页：Astra 归档标题（2026-09-25） ----------
 * news 列表页走 Astra 默认模板，标题是 h1.page-title.ast-archive-title。
 * 我们原本有条裸的 .page-title{color:#fff!important} 顺手把它压成白色，
 * 浅色下变成白字压 #F0F5FA（完全看不见）；已把那条收窄成
 * .page-header .page-title，所以这里必须补回暗色下该标题的前景色。 */
html[data-theme="dark"] .ast-archive-description .page-title,
html[data-theme="dark"] .ast-archive-description .ast-archive-title { color: var(--zg-t1) !important; }

/* ---------- 20. 常见问题 FAQ（2026-09-27） ----------
 * 折叠交互用原生 <details>，这里只做配色。
 * +/− 图标是 currentColor，会跟着 .faq-question 的前景色走，不用单独覆盖。 */
html[data-theme="dark"] .faq-section { background: var(--zg-bg) !important; }
html[data-theme="dark"] .faq-item {
    background: var(--zg-surface) !important;
    border-color: var(--zg-line) !important;
}
html[data-theme="dark"] .faq-question { color: var(--zg-t1); }
html[data-theme="dark"] .faq-question:hover,
html[data-theme="dark"] .faq-item[open] .faq-question { color: var(--zg-accent-fg); }
/* 答案区比卡片再暗一档（浅色档同理：比白卡暗），保持"凹陷的次级内容"观感 */
html[data-theme="dark"] .faq-answer {
    background: var(--zg-bg) !important;
    border-top-color: var(--zg-line) !important;
    color: var(--zg-t2);
}
html[data-theme="dark"] .faq-answer a { color: var(--zg-accent-fg); }

/* ---------- 21. 价格梯度表（车辆详情页右侧，2026-09-27） ----------
 *
 * 必须显式重置 font-size / font-weight：外层 .vehicle-price-display 在暗档带着
 * `color: var(--zg-accent-fg) !important`，不覆盖的话整张表会变成一盘蓝字。
 */
html[data-theme="dark"] .vehicle-price-tiers { font-size: 1rem !important; font-weight: 400 !important; color: var(--zg-t2) !important; }
html[data-theme="dark"] .vehicle-price-tiers .vpt-head { background: rgba(107, 165, 255, 0.10) !important; border-color: var(--zg-line) !important; color: var(--zg-accent-fg) !important; }
html[data-theme="dark"] .vehicle-price-tiers .vpt-row { background: var(--zg-surface) !important; border-color: var(--zg-line) !important; }
html[data-theme="dark"] .vehicle-price-tiers .vpt-qty { color: var(--zg-t2); }
html[data-theme="dark"] .vehicle-price-tiers .vpt-price { color: var(--zg-accent-fg); }
html[data-theme="dark"] .vehicle-price-tiers .vpt-note { color: var(--zg-t3); }

/* ============================================================
 * 主题切换开关 · Theme Toggle（2026-09-25）
 *
 * 由 tools/_theme-toggle.css 提供，tools/apply-dark-skin.py 追加到
 * zhonggu-styles.css 末尾。
 * ⚠️ 要改开关样式请改这个源文件再重跑脚本，别直接改 zhonggu-styles.css。
 *
 * 状态：
 *   html[data-theme="light"] → 白色轨道 + 白色圆钮在**左**、太阳图标
 *   html[data-theme="dark"]  → 深色轨道 + 深色圆钮在**右**、月亮图标
 *   （按客户提供的参考图；默认 dark，保持站点原样）
 * ============================================================ */

.zg-theme-toggle {
    --tt-w: 58px;
    --tt-h: 30px;
    --tt-k: 24px;      /* 圆钮直径 */
    --tt-pad: 2px;     /* 圆钮距轨道内边 */
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: var(--tt-w);
    height: var(--tt-h);
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #EFEFF0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.zg-theme-toggle:hover { border-color: rgba(0, 0, 0, 0.26); }
.zg-theme-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.zg-tt-knob {
    position: absolute;
    top: var(--tt-pad);
    left: var(--tt-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tt-k);
    height: var(--tt-k);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 0.28s cubic-bezier(0.4, 0.1, 0.2, 1), background-color 0.25s ease;
}

.zg-tt-ico {
    width: 15px;
    height: 15px;
    display: block;
}

/* 默认（浅色）：太阳；暗色：月亮 */
.zg-tt-sun  { color: #3F3F46; }
.zg-tt-moon { color: #3F3F46; display: none; }

html[data-theme="light"] .zg-tt-knob { left: var(--tt-pad); }
html[data-theme="dark"] .zg-tt-knob  { left: calc(100% - var(--tt-k) - var(--tt-pad)); }

html[data-theme="dark"] .zg-theme-toggle {
    background: #2A2828;
    border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .zg-theme-toggle:hover { border-color: rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] .zg-tt-knob {
    background: #0F0E0F;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .zg-tt-sun  { display: none; }
html[data-theme="dark"] .zg-tt-moon { display: block; }
html[data-theme="dark"] .zg-tt-moon { color: #F2F1F1; }

/* 首页的顶部信息条压在视频上（背景透明）—— 给开关加毛玻璃，避免轨道被背景吞掉。
   .site-header-transparent 那条是给窄屏用的：窄屏信息条整条隐藏，开关回落到透明头部里。 */
.top-contact-bar .zg-theme-toggle,
.site-header-transparent .zg-theme-toggle {
    background: rgba(239, 239, 240, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .top-contact-bar .zg-theme-toggle,
html[data-theme="dark"] .site-header-transparent .zg-theme-toggle {
    /* 暗底 + 暗视频：把描边和投影加重，否则整条会糊在背景里 */
    background: rgba(42, 40, 40, 0.92);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* 屏幕阅读器专用文字 */
.zg-tt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 小屏收窄，免得把头部挤换行 */
@media (max-width: 480px) {
    .zg-theme-toggle {
        --tt-w: 46px;
        --tt-h: 26px;
        --tt-k: 20px;
    }
    .zg-tt-ico { width: 13px; height: 13px; }
}

/* ============================================================
 * 放哪儿：桌面 = 顶部信息条最右侧（邮箱后面）；窄屏 = 主导航栏
 * （2026-09-25 昂哥要求「挪到首页最右上角、放到电子邮箱后面」）
 *
 * 两个头部模板各自渲染**两个**开关实例：
 *   · 信息条里一个（首页 .top-contact-bar / 内页 .top-bar）→ 桌面用
 *   · .header-actions 里一个                                → 窄屏用
 * 这里按断点只显示其中一个。为什么窄屏不能用信息条里那个：
 *   · 首页：.top-contact-bar 在 ≤768px 是 display:none（整条隐藏）
 *   · 内页：.top-bar 在窄屏会把两个条目挤成两行，再加一个开关变三行
 * JS 侧是 document 事件委托 + querySelectorAll 同步，多实例天然支持，不用改 JS。
 * ============================================================ */

.header-actions .zg-theme-toggle { display: none; }

@media (max-width: 768px) {
    .top-contact-bar .zg-theme-toggle,
    .top-bar .zg-theme-toggle { display: none; }
    .header-actions .zg-theme-toggle { display: inline-block; }
}

/* ============================================================
 * 语言选择下拉 · Language Switcher（2026-09-26）
 *
 * 由 tools/_lang-switcher.css 提供，tools/apply-dark-skin.py 追加到
 * zhonggu-styles.css 末尾（紧跟主题开关之后）。
 * ⚠️ 要改样式请改这个源文件再重跑脚本，别直接改 zhonggu-styles.css。
 *
 * 为什么追加在末尾而不是手写进主 CSS：
 *   主 CSS 的「暗色块」是剧本生成后**截断到 EOF 再重写**的，任何手写在其后的内容
 *   都会被切掉且不报错（详见项目记忆里的「普通 CSS 必须插在暗色块之前」那条）。
 *   跟主题开关走同一条「源文件 + 脚本追加」的管线最安全。
 *
 * 视觉：跟主题开关同高（30px）、同圆角（胶囊）、同透明头部适配，
 *       两个控件并排放在右上角看起来是一组。
 * ============================================================ */

.zg-lang {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    line-height: 1;
}

/* ---------------------------------------------------------- 按钮 */

.zg-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #EFEFF0;
    color: #3F3F46;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.zg-lang-btn:hover { border-color: rgba(0, 0, 0, 0.26); }
.zg-lang-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.zg-lang-globe { width: 15px; height: 15px; flex: 0 0 auto; }
.zg-lang-cur   { display: block; }
.zg-lang-caret {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.zg-lang.is-open .zg-lang-caret { transform: rotate(180deg); }

/* ---------------------------------------------------------- 菜单 */

.zg-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 178px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    /* 收起：不用 display:none，留一个过渡，展开手感更顺 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.zg-lang.is-open .zg-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zg-lang-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #1F2937;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.zg-lang-opt:hover { background: rgba(37, 99, 235, 0.08); color: #1D4ED8; }
.zg-lang-opt:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.zg-lang-opt.is-current { background: rgba(37, 99, 235, 0.1); color: #1D4ED8; font-weight: 700; }

/* 语言名按自己的方向排（阿拉伯语那行在英文界面里也要读得对） */
.zg-lang-name { unicode-bidi: isolate; }
.zg-lang-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.55;
    unicode-bidi: isolate;
}

/* ---------------------------------------------------------- 暗色档 */

html[data-theme="dark"] .zg-lang-btn {
    background: #2A2828;
    border-color: rgba(255, 255, 255, 0.14);
    color: #F2F1F1;
}
html[data-theme="dark"] .zg-lang-btn:hover { border-color: rgba(255, 255, 255, 0.3); }

html[data-theme="dark"] .zg-lang-menu {
    background: #1B1A1B;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .zg-lang-opt { color: #E7E5E5; }
html[data-theme="dark"] .zg-lang-opt:hover { background: rgba(107, 165, 255, 0.14); color: #6BA5FF; }
html[data-theme="dark"] .zg-lang-opt.is-current { background: rgba(107, 165, 255, 0.18); color: #6BA5FF; }

/* ------------------------------------- 透明头部（首页压在视频上）
   与主题开关同一处理：加毛玻璃 + 描边，否则胶囊会被亮画面吞掉。 */

.top-contact-bar .zg-lang-btn,
.site-header-transparent .zg-lang-btn {
    background: rgba(239, 239, 240, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .top-contact-bar .zg-lang-btn,
html[data-theme="dark"] .site-header-transparent .zg-lang-btn {
    background: rgba(42, 40, 40, 0.92);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* 首页顶部信息条压在视频上、且头部高度有限：菜单往下掉时要盖住 hero 内容 */
.top-contact-bar .zg-lang-menu,
.site-header-transparent .zg-lang-menu { z-index: 1300; }

/* ---------------------------------------------------------- 小屏 */

@media (max-width: 480px) {
    .zg-lang-btn {
        height: 26px;
        padding: 0 8px;
        gap: 4px;
        font-size: 11px;
    }
    .zg-lang-globe { width: 13px; height: 13px; }
    .zg-lang-caret { width: 10px; height: 10px; }
    .zg-lang-menu { min-width: 158px; }
    .zg-lang-opt { padding: 8px 10px; font-size: 13px; }
}

/* ============================================================
 * 放哪儿：桌面 = 顶部信息条 / 内页顶栏的最右侧（主题开关右边）；
 *         窄屏 = .header-actions 里那一个
 * 与主题开关同一套「两实例 + 按断点只显其一」的规则，见 _theme-toggle.css 末尾。
 * ============================================================ */

.header-actions .zg-lang { display: none; }

@media (max-width: 768px) {
    .top-contact-bar .zg-lang,
    .top-bar .zg-lang { display: none; }
    .header-actions .zg-lang { display: inline-block; }
}

/* ============================================================
 * 从右到左 · RTL（阿拉伯语）
 *
 * <html dir="rtl"> 已经能自动镜像「用 flex / text-align 的逻辑值」写的布局，
 * 这里只补三类浏览器管不到的地方：
 *   1. 绝对定位里的 left/right（物理方向，不会自动翻）
 *   2. 装饰性方向符号（«  »  ←  → 这类字符）
 *   3. 混排内容（邮箱 / 电话 / 型号名）—— RTL 段落里会读成反的，必须隔离
 * 作用域限定在 html[dir="rtl"]，LTR 语言零影响。
 * ============================================================ */

/* --- 1. 下拉菜单位置：按钮现在靠逻辑终点，菜单要跟着翻到另一侧 --- */
html[dir="rtl"] .zg-lang-menu { right: auto; left: 0; }

/* --- 2. 侧边社交栏：源规则 .social-sidebar{ right:0 }（钉右边缘）→ RTL 钉左边缘 --- */
html[dir="rtl"] .social-sidebar { right: auto; left: 0; }

/* --- 3. 图集主图右上角的工具按钮：源规则 .zg-tools{ top:.5rem; right:.5rem } --- */
html[dir="rtl"] .zg-tools { right: auto; left: 0.5rem; }

/* --- 4. 灯箱：关闭按钮与左右箭头都是物理定位，且 RTL 下
       「上一张 / 下一张」的物理方位要对调，否则点左边反而是下一张 --- */
html[dir="rtl"] .zg-lightbox-close { right: auto; left: 1.25rem; }
html[dir="rtl"] .zg-lightbox-prev  { left: auto;  right: 1.25rem; }
html[dir="rtl"] .zg-lightbox-next  { right: auto; left: 1.25rem; }

/* --- 5. 图片角标：地图注记（源 left:.75rem）与新闻头图放大提示（源 right:1rem） --- */
html[dir="rtl"] .company-map-pin-note { left: auto; right: 0.75rem; }
html[dir="rtl"] .news-hero-zoom       { right: auto; left: 1rem; }

/* --- 6. 方向符号：« » ← → 这类字符浏览器不会自动翻转。
       模板里统一包了 <span class="zg-dir">，这里一次镜像搞定。 --- */
html[dir="rtl"] .zg-dir { display: inline-block; transform: scaleX(-1); }

/* --- 7. 混排隔离：邮箱 / 电话 / 车型代号在 RTL 段落里会读成反的
       （zhouweiqi1123@gmail.com 会显示成 moc.liamg@…）。
       unicode-bidi:plaintext 让每段按自己第一个强方向字符自行判定方向。 --- */
html[dir="rtl"] .top-contact-item span,
html[dir="rtl"] .top-bar-item span,
html[dir="rtl"] .contact-info-value,
html[dir="rtl"] .vehicle-title,
html[dir="rtl"] .zg-lang-name { unicode-bidi: plaintext; }

html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="https://wa.me/"] { unicode-bidi: plaintext; }

/* 说明：图集缩略图列不需要在这里镜像 —— .zg-gallery 是 CSS Grid
   （grid-template-columns: 76px minmax(0,1fr)），列序会随 direction 自动翻转，
   缩略图列在 RTL 下自己就跑到右边去了。放大面板的位置由 JS 计算，见
   zhonggu-gallery.js 里的 isRtl 分支。 */