/* ═══════════════════════════════════════════════════════════════════════════
   polish.css —— 2026-10-20 视觉升级层（在 site.css / pages.css 之后加载）
   ── 目标 ──
   「靓」：统一卡片圆角/间距/价格层级，头部白底常驻，首屏标题克制，
           用留白与层级而不是渐变字堆砌。
   「正」：修掉三个实测问题 ——
           ① 头部半透明压在 banner 上，导航文字看不清（截图实测）；
           ② logo 图片本身已含 wordmark，旁边又输出一次「sim2ai」；
           ③ 分类页卡片宽度/间距在 4 列与 5 列之间不一致，右边缘对不齐。
   ── 约束（SEO/GEO 不动的部分）──
   · 不改任何 H1/H2 层级、正文文案、内链、JSON-LD；
   · 不给任何内容加 display:none（除重复 logo 文字这一处装饰性重复）；
   · 不引入图片/字体/JS 请求，纯 CSS；
   · 用 clamp() 与 grid，避免 CLS（无高度跳变）。
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --r-card: 12px;
  --r-btn: 10px;
  --tx-strong: #0f172a;
  --tx-mute: #667085;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 6px 20px rgba(75, 116, 251, .12);
}

/* ── 1. 头部：白底常驻，导航不再被 banner 干扰 ───────────────────────── */
.hd,
.hd.scrolled {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
}
.hd-in { height: 66px; gap: 24px; }
.logo img { height: 28px; filter: none; }
.logo span { display: none; }            /* 图片已含 wordmark，去掉重复文字 */
.nav { gap: 4px; }
.nav a { font-size: 15px; color: #344054; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--tx-strong); background: var(--soft); }
.nav a.on { color: var(--blue); background: #f2f6ff; }
.nav a.on::after { display: none; }      /* 用底色高亮代替下划线，避免压字 */
.tips { height: 36px; line-height: 36px; font-size: 12.5px; }

/* ── 2. 首屏：标题克制、统计卡成体系 ─────────────────────────────────── */
.hero { padding: 40px 0 24px; }
.hero h1 {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--tx-strong);
  -webkit-text-fill-color: currentColor;
  background: none;
  font-weight: 800;
}
.hero p {
  max-width: 780px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.75;
  color: #475467;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 26px auto 0;
}
.stats > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.stats b {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--tx-strong);
  letter-spacing: -0.02em;
}
.stats span { display: block; margin-top: 4px; font-size: 13px; color: var(--tx-mute); }

/* 目的地搜索条：白卡、圆角、与首屏一体 */
.dest { margin: 8px auto 0; padding: 10px; background: #fff; border: 1px solid var(--line);
        border-radius: 999px; box-shadow: var(--shadow-2); }
.dest .area { border-radius: 999px; }

/* ── 3. 卡片墙：统一 5 列（首屏目的地）/ 4 列（分类页），边缘对齐 ───────── */
.grid, #grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.grid .ci, #grid .ci {
  width: auto !important;
  margin: 0 !important;
  clip-path: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.grid .ci:hover, #grid .ci:hover {
  border-color: #b9c8ff;
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  background: #fff;
}
#grid .ci { flex-direction: row; align-items: center; gap: 12px; min-height: 84px; }
#grid .ci img { width: 38px; height: 38px; object-fit: contain; border-radius: 6px; flex: none; }
#grid .ci .nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#grid .ci .nm b { font-size: 15px; color: var(--tx-strong); font-weight: 700; }
#grid .ci .nm .md { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--tx-mute); }
#grid .ci .nm .lp em { font-style: normal; }

/* 分类页卡片：名称 → 天数流量 → 价格 → 单价，四级层次 */
.grid .ci > b { font-size: 15px; font-weight: 700; color: var(--tx-strong); width: 100%; }
.grid .ci > small { font-size: 13px; color: var(--tx-mute); }
.grid .ci > em {
  font-style: normal;
  font-size: 19px;
  font-weight: 800;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.grid .ci > .unit-price { font-size: 12px; color: var(--tx-mute); }
.grid .ci .badge {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  background: #fff4ec;
  color: #b54708;
  border: 1px solid #fdd6b5;
}

/* 分类页里 4 列更耐看（卡片信息比首屏目的地多） */
section .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 4.「当前精选」块：左侧强调条 + 行距，结论一眼可读 ───────────────── */
.notice.highlights {
  background: #f7f9ff;
  border: 1px solid #dbe4ff;
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: none;
}
.notice.highlights b { font-size: 14.5px; color: var(--tx-strong); }
.notice.highlights ul { margin: 8px 0 0 18px; }
.notice.highlights li { font-size: 14px; line-height: 1.7; color: #344054; }
.notice.highlights a { color: #1d4ed8; text-decoration: none; }
.notice.highlights a:hover { text-decoration: underline; }

/* ── 5. 按钮与输入：统一圆角与显式焦点 ───────────────────────────────── */
.btn, .sbtn, .all, button.btn {
  border-radius: var(--r-btn);
  font-weight: 600;
}
.btn:hover { filter: brightness(1.02); }
input[type=search], input[type=text], input[type=email], input[type=password], select, textarea {
  border-radius: 10px;
}

/* ── 6. 商品页：信息卡化，价格层级明确 ───────────────────────────────── */
.phead {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
  margin-top: 10px;
}
.phead h1 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--tx-strong); }
.phead .lead { color: #475467; max-width: 820px; }
.phead .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.phead .chip {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: #344054;
}
.phead .chip b { color: var(--tx-strong); }
.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}

/* ── 7. 区块留白：收紧过大的空档，但不挤压内容 ───────────────────────── */
section { padding: 34px 0; }
.sh { margin-bottom: 18px; }
section:first-of-type { padding-top: 10px; }

/* ── 8. 移动端 ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid, #grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  section .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hd-in { height: 58px; gap: 12px; }
  .tips { height: 32px; line-height: 32px; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hero { padding: 26px 0 16px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14px; text-align: left; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .stats b { font-size: 22px; }
  .grid, #grid, section .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #grid .ci { flex-direction: row; min-height: 72px; padding: 12px; }
  #grid .ci img { width: 30px; height: 30px; }
  .grid .ci > em { font-size: 17px; }
  .dest { border-radius: 14px; }
  .phead { padding: 16px; }
  .notice.highlights { padding: 12px 14px; }
  .notice.highlights li { font-size: 13px; }
}

/* ── 9. 覆盖「透明头部」时期的白色文字规则 ───────────────────────────────
   site.css 有 `.hd:not(.scrolled) .nav a{color:#fff}` 这类高权重规则（原来压在深色
   banner 上用的）。头部改成白底常驻后，白字白底 = 导航与右侧功能区全部「消失」
   （实测截图：只剩购物车能看见）。这里用同等权重把它们钉回深色。 */
.hd:not(.scrolled) .logo,
.hd:not(.scrolled) .nav a,
.hd:not(.scrolled) .nav a.on,
.hd:not(.scrolled) .hd-r,
.hd:not(.scrolled) .hd-r .sel { color: #344054; }
.hd:not(.scrolled) .hd-r .sel {
  border-color: var(--line);
  background: #fff;
}
.hd:not(.scrolled) .nav a:hover,
.hd:not(.scrolled) .hd-r .sel:hover {
  color: var(--blue);
  background: var(--soft);
}
.hd { top: 36px; }   /* 顶部提示条 36px，头部紧贴其下 */

/* ── 10. 标题统一：去掉渐变字，改深色 + 左侧强调条（更「正」）─────────── */
.grad-txt,
.sh h2,
section h2,
.hero h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--tx-strong) !important;
}
.sh h2 {
  position: relative;
  padding-left: 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sh h2::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--blue);
}
.sh { text-align: center; }
.sh h2 { padding-left: 0; }
.sh h2::before { display: none; }

/* ── 11. 间距收紧：分类页顶部的空档 ─────────────────────────────────── */
.crumb { font-size: 13px; color: #667085; margin: 6px 0 10px; }
.phead { margin-bottom: 14px; }
.notice { margin: 14px 0; }
.answer-first { margin: 12px 0; }
.region-cta .btn, .btn { display: inline-flex; align-items: center; justify-content: center; }
.region-cta .btn { white-space: nowrap; }

/* ── 12. Banner 收敛：320px，避免首屏被促销大图占满 ────────────────── */
.banner, .slides img { height: 320px; }
.bdots { bottom: 74px; }
@media (max-width: 760px) {
  .banner, .slides img { height: 210px; }
  .bdots { bottom: 84px; }
}

/* ── 13. 商品页价格 chip：主价 + 单位价 + 核对日期 ──────────────────── */
.phead .chip .u { color: #667085; font-weight: 400; margin-left: 6px; font-size: 12.5px; }

/* ── 14. 移动端修正（实测：.wrap 在窄屏水平 padding 被清成 0，正文顶到屏幕边缘）── */
@media (max-width: 760px) {
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .hero p { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
  .hero h1 { margin-left: 0; margin-right: 0; }
  /* 标签行/筛选行允许横向滚动，避免撑宽页面（实测 docWidth 433 > 390） */
  .tabs, .ctabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button, .ctabs button { flex: 0 0 auto; }
  .stats > div { padding: 12px 8px; }
  .stats b { font-size: 20px; }
  .stats span { font-size: 12px; }
}

/* ── 15. 分类页顶部间距：回答条 → 精选块之间的空档收紧 ────────────────── */
.notice.answer-first { margin: 10px 0 8px; }
.notice.highlights { margin: 8px 0 22px; }

/* ── 16. 商品页购买卡：居中限宽，右侧不再空一大块 ────────────────────── */
.form { max-width: 820px; margin: 0 auto; }

/* ── 17. 移动端卡片内「低至 HKD x/GB」导致横向溢出（实测 docWidth 433>390）── */
@media (max-width: 760px) {
  #grid .ci .nm { min-width: 0; flex: 1; }
  #grid .ci .nm .md { flex-wrap: wrap; gap: 2px 8px; }
  #grid .ci .nm .md span { white-space: nowrap; }
  #grid .ci .nm .lp { display: inline-flex; align-items: baseline; gap: 2px; }
  #grid .ci .nm .lp em { font-size: 14px; }
}

/* ── 18. 移动端目的地卡片：介质与「低至 x/GB」改成上下两行（彻底消除横向溢出）── */
@media (max-width: 760px) {
  #grid .ci .nm .md { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  #grid .ci .nm .md > span { white-space: normal; }
  #grid .ci .nm .lp { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. 首页 Trip.com 式首屏（2026-10-20）
   · .scard  白卡浮在 banner 上：三 tab + 内联搜索 + 大按钮
   · .trust  信任三件套：图标 + 短句
   · .coupons 新客券 4 张 + CTA
   全部为 SSR 标记，CSS 只负责版式；移动端单独收敛。
   ═══════════════════════════════════════════════════════════════════════════ */
.scard {
  position: relative;
  z-index: 5;
  max-width: 1080px;
  margin: 22px auto 0;
  padding: 16px 20px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
}
.banner + .scard { margin-top: -68px; }
.scard-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.scard-tabs a {
  padding: 10px 16px 12px; font-size: 15px; color: #475467; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.scard-tabs a.on { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }
.scard-tabs a:hover { color: var(--blue); }
.scard-form { display: flex; gap: 10px; margin-top: 14px; }
.scard-field {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 14px;
  border: 1px solid #d0d5dd; border-radius: 10px;
  color: #667085;
}
.scard-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(75,116,251,.12); }
.scard-field input {
  flex: 1; border: 0; outline: 0; height: 100%;
  font-size: 15px; color: var(--tx-strong); background: transparent;
}
.scard-btn {
  height: 52px; padding: 0 34px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 16px; font-weight: 700;
  transition: filter .15s ease;
}
.scard-btn:hover { filter: brightness(1.06); }
.scard-hot { margin: 10px 2px 0; font-size: 13px; color: #667085; }
.scard-hot a { margin-left: 10px; color: #344054; }
.scard-hot a:hover { color: var(--blue); }

.trust { padding: 30px 0 6px; }
.trust-in {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  max-width: 1080px;
}
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item svg { width: 30px; height: 30px; color: var(--blue); flex: none; margin-top: 2px; }
.trust-item b { display: block; font-size: 15px; color: var(--tx-strong); }
.trust-item span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: #667085; }

.coupons { padding: 26px 0 10px; }
.coupon-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.coupon {
  position: relative;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 70%);
  border: 1px solid #e4e9f7;
  border-left: 3px dashed #b9c8ff;
  border-radius: 12px;
}
.coupon-tag {
  display: inline-block; margin-bottom: 8px; padding: 2px 8px;
  font-size: 11px; line-height: 16px; border-radius: 999px;
  background: #eef3ff; color: #1d4ed8; border: 1px solid #d5e0ff;
}
.coupon b { display: block; font-size: 15.5px; color: var(--tx-strong); line-height: 1.4; }
.coupon-sub { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: #667085; }
.coupon-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.coupon-rules { font-size: 13.5px; color: #475467; text-decoration: underline; }

@media (max-width: 760px) {
  .scard { margin-left: 18px; margin-right: 18px; padding: 12px 14px 12px; border-radius: 14px; }
  .banner + .scard { margin-top: -44px; }
  .scard-form { flex-direction: column; gap: 8px; }
  .scard-field, .scard-btn { height: 46px; width: 100%; }
  .scard-btn { padding: 0; }
  .scard-tabs a { padding: 9px 12px 11px; font-size: 14px; }
  .trust { padding-top: 22px; }
  .trust-in { grid-template-columns: 1fr; gap: 12px; }
  .coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .coupon { padding: 14px 12px 12px; }
  .coupon b { font-size: 14px; }
  .coupon-cta { flex-direction: column; gap: 8px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   20. 目的地卡网格「排版」修正（2026-10-21 用户截图反馈）
   site.css 的 .grid 是 flex + 浅底 + 1px 边框 + 34px 内边距，.ci 是 4 列宽度公式、
   第 4 个去右外边距、68px 圆旗、.nm 左侧 15px 外边距。只改 display 会留下半套旧规则，
   导致卡片宽度不一、内容错位、外面多出一圈灰底盒子。这里把旧规则整组重置成统一的 grid。
   ═══════════════════════════════════════════════════════════════════════════ */
.grid, #grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.grid .ci, #grid .ci {
  width: auto !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 96px;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  clip-path: none !important;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.grid .ci::before, #grid .ci::before { display: none !important; }
.grid .ci img, #grid .ci img {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  border-radius: 100px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
  object-fit: cover;
}
.grid .ci .nm, #grid .ci .nm {
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}
.grid .ci .nm b, #grid .ci .nm b {
  font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--tx-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.grid .ci .nm .md, #grid .ci .nm .md {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 12.5px; line-height: 1.4; color: #667085;
}
.grid .ci .nm .md > span:first-child { letter-spacing: .2px; }
.grid .ci .nm .lp, #grid .ci .nm .lp {
  color: #667085;
  white-space: nowrap;
}
.grid .ci .nm .lp em, #grid .ci .nm .lp em {
  font-style: normal; font-weight: 800; font-size: 15px; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
/* 「查看全部 N 个目的地」按钮与网格保持间距，不压到卡片 */
.grid + .all, #grid + .all { display: inline-block; margin: 22px 0 6px !important; }

@media (max-width: 1080px) {
  .grid, #grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .grid, #grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .grid .ci, #grid .ci { min-height: 84px; padding: 12px !important; gap: 9px !important; }
  .grid .ci img, #grid .ci img { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .grid .ci .nm b { font-size: 14px; }
  .grid .ci .nm .md { font-size: 12px; }
  .grid .ci .nm .lp em { font-size: 13px; }
}
/* ── 21. 卡片价格行：单行不折（2026-10-21 移动端实测「低/至」被拆成两行）── */
.grid .ci .nm .lp, #grid .ci .nm .lp {
  display: block !important;
  width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.grid .ci .nm .lp em, #grid .ci .nm .lp em { display: inline; }
@media (max-width: 760px) {
  .grid .ci .nm .lp, #grid .ci .nm .lp { font-size: 12px; }
}
/* ── 22. 「查看全部 N 个目的地」按钮居中（2026-10-21 截图反馈：靠左显突兀）── */
.grid + .all, #grid + .all {
  display: block !important;
  width: max-content;
  max-width: 100%;
  margin: 26px auto 10px !important;
  padding: 14px 34px;
  text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════════════
   23. 搜索卡重构（2026-10-21 用户反馈：挡住 banner 图片 + 排版过硬、圆点撞角）
   ── 改法 ──
   · 不再压图：卡片放在 banner 下方 18px 处（负边距会让烘焙在图片里的文字被切，
     也会撞上轮播圆点）；改用浅色过渡区把「搜索卡 + 信任条」包成一组。
   · 收紧尺寸：最大宽 980、内边距 18/22、输入与按钮统一 48px 高。
   · 柔化视觉：18px 圆角、细边框、柔和投影、tabs 轻分隔。
   ═══════════════════════════════════════════════════════════════════════════ */
.scard {
  max-width: 980px;
  margin: 18px auto 0;
  padding: 16px 22px 14px;
  border-radius: 18px;
  border: 1px solid #eef1f7;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
  background: #fff;
}
.banner + .scard { margin-top: 18px !important; }   /* 取消压图 */
.scard-tabs { gap: 4px; }
.scard-tabs a { font-size: 14px; padding: 9px 14px 11px; color: #667085; }
.scard-tabs a.on { font-weight: 700; }
.scard-form { gap: 12px; margin-top: 12px; }
.scard-field { height: 48px; border-radius: 12px; border-color: #e4e7ec; }
.scard-field input { font-size: 14.5px; }
.scard-btn { height: 48px; padding: 0 40px; border-radius: 12px; font-size: 15.5px; }
.scard-hot { margin-top: 8px; font-size: 12.5px; }

/* 搜索卡 + 信任条放进同一个浅色过渡区，视觉上成为一组 */
.hero-zone {
  background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 70%);
  padding-bottom: 8px;
}
@media (max-width: 760px) {
  .scard { margin: 14px 18px 0 !important; padding: 12px 14px 12px; border-radius: 16px; }
  .banner + .scard { margin-top: 14px !important; }
  .scard-field, .scard-btn { height: 44px; }
  .scard-btn { padding: 0; }
}
/* ── 24. 搜索卡浅色过渡带：banner 与首屏标题之间不再“硬切” ──────────── */
.search-band {
  background: linear-gradient(180deg, #f6f8fd 0%, #ffffff 88%);
  border-bottom: 1px solid #f0f2f7;
  padding: 26px 18px 30px;
}
.search-band .scard { margin: 0 auto !important; }
.search-band .scard { box-shadow: 0 10px 28px rgba(16, 24, 40, .10); }
@media (max-width: 760px) {
  .search-band { padding: 16px 0 20px; }
  .search-band .scard { margin: 0 18px !important; }
}
/* ── 25. 修复筛选失效（2026-10-21 用户反馈「点击无变化」）─────────────────
   home.js 的 tab 筛选是给卡片加 [hidden] 属性（UA 样式 display:none）。
   第 20 节给 .ci 加了 display:flex !important，把 [hidden] 盖掉了 ——
   于是点击后 class 变了、卡片却不消失，看起来像“没反应”。
   这一条用同等 !important + 更高选择器优先级把 [hidden] 钉回来。
   ─────────────────────────────────────────────────────────────────── */
.grid .ci[hidden], #grid .ci[hidden],
.grid .ci[hidden]:hover, #grid .ci[hidden]:hover {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   26. 卡片布局彻底分开：首页目的地卡（横排）vs 分类页套餐卡（竖排）
   ── 事故 ──
   第 20 节为修首页网格写了 `.grid .ci { flex-direction: row !important }`，
   但分类页（旅游卡 / AI 页）也用 `.grid`，于是套餐卡被换成横排：
   名称被挤成竖排、价格和单价挤到同一行（2026-10-21 用户截图）。
   ── 规则 ──
   `#grid`      = 首页「目的地」卡：图标 + 名称/价格，横排
   `section .grid` = 分类页「套餐」卡：名称 → 天数/流量 → 价格 → 单价，竖排
   ═══════════════════════════════════════════════════════════════════════════ */
#grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
#grid .ci {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 96px;
  padding: 14px 16px !important;
  width: auto !important;
  margin: 0 !important;
}
#grid .ci .nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

section .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
section .grid .ci {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  height: 100% !important;
  min-height: 108px;
  padding: 16px !important;
  width: auto !important;
  margin: 0 !important;
  position: relative;
}
section .grid .ci > b {
  display: block;
  width: 100%;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--tx-strong);
  word-break: break-word;
}
section .grid .ci > small {
  display: block;
  font-size: 13px;
  color: var(--tx-mute);
}
section .grid .ci > em {
  display: block !important;
  margin-top: 4px;
  font-style: normal;
  font-size: 19px;
  font-weight: 800;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
section .grid .ci > .unit-price {
  display: block !important;
  margin-top: 0;
  font-size: 12px;
  color: var(--tx-mute);
}
section .grid .ci .badge {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}
@media (max-width: 1080px) {
  section .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  section .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  section .grid .ci { min-height: 96px; padding: 12px !important; }
  section .grid .ci > b { font-size: 14px; }
  section .grid .ci > em { font-size: 17px; }
}
/* ── 27. 推荐标签不再压住套餐名（2026-10-21 AI 页截图：标签盖在标题右侧）──
   改成「标签在上、名称在下」的竖排层级：order:-1 把标签提到名称前面，
   并取消绝对定位，名称可以完整占满一行。 */
section .grid .ci .badge {
  position: static !important;
  order: -1;
  align-self: flex-start;
  margin: 0 0 2px 0 !important;
  display: inline-block;
}
section .grid .ci > b { padding-right: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
   28. ICCID 页「文字被吃掉」修复（2026-10-21 用户截图）
   ── 原因 ──
   站内绝大多数页面都用 `<div class="page">` 包一层，.page 自带 118px 上内边距；
   但 iccid.html 是直接 `<div class="crumb">` + `<section>`，没有这层包裹，
   而头部是 fixed（顶部提示条 36px + 头部 66px = 102px），于是面包屑与 H1
   被压在固定头部下面，看起来像“文字被吃掉”。
   ── 修法 ──
   只给「直接挂在 body 下的面包屑」补出头部高度，其余页面不受影响。
   ═══════════════════════════════════════════════════════════════════════════ */
main > .crumb {
  margin: 110px auto 0;
  max-width: 1280px;
  padding: 0 20px;
  font-size: 13px;
  color: #667085;
}
@media (max-width: 760px) {
  main > .crumb { margin-top: 98px; }
}

/* ── 29. 页脚站标去重（图片本身已含 wordmark，旁边又写了一次 sim2ai）── */
.ft .brand div > span { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
   30. 移动端目的地网格（2026-10-21 用户手机截图：390px 还是 5 列，文字被挤没）
   ── 原因 ──
   第 26 节又写了一次 `#grid{repeat(5) !important}`，它排在旧的 760px 媒体查询之后，
   同权重 !important 后者胜 → 手机上仍是 5 列，卡片宽度只剩 ~70px。
   ── 修法 ──
   把移动端覆盖放到文件最后（CSS 后写胜出），并允许名称换行、字号逐级收小。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  #grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  #grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #grid .ci {
    min-height: 96px !important;
    padding: 12px !important;
    gap: 9px !important;
  }
  #grid .ci img {
    width: 34px !important; height: 34px !important; min-width: 34px !important;
    border-width: 2px !important;
  }
  #grid .ci .nm { gap: 2px; }
  #grid .ci .nm b {
    font-size: 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  #grid .ci .nm .md { font-size: 11.5px !important; gap: 1px; }
  #grid .ci .nm .lp { font-size: 11.5px !important; }
  #grid .ci .nm .lp em { font-size: 13px !important; }
}
/* ── 31. 移动端覆盖组合 tab：单行横滑，不再折成三行（2026-10-21 手机截图）── */
@media (max-width: 760px) {
  .ctabs, .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }
  .ctabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .ctabs button, .tabs button {
    flex: 0 0 auto !important;
    font-size: 13px;
    padding: 6px 10px;
    white-space: nowrap;
  }
}