/* ==========================================================================
   东盟出海网 · 页面级样式 (pages.css)
   ========================================================================== */

/* ----------------------------------------------
   1. 主视觉 Hero（首页）
   ---------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(37, 194, 214, .26), transparent 62%),
    radial-gradient(900px 480px at 88% 4%, rgba(30, 123, 196, .34), transparent 60%),
    linear-gradient(155deg, #061A33 0%, #0B2545 42%, #123A6B 100%);
  color: #fff;
  padding: 66px 0 106px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(760px 420px at 30% 20%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 420px at 30% 20%, #000, transparent 78%);
}
/* 底部收边：原为波浪 SVG，用户要求改成平直横线。
   不再用 data-URI 波浪，直接用页面底色 var(--bg) 铺一条矩形；
   高度 46px 与波浪基准线（viewBox y=44）齐平，保持导航下方内容与边界的关系不变。 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
  background: var(--bg);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.12fr .92fr; gap: 34px 48px; align-items: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
.hero__badge b { color: var(--gold-400); }

.hero__title { font-size: 52px; line-height: 1.14; letter-spacing: -.03em; margin: 18px 0 0; }
.hero__title .grad {
  background: linear-gradient(100deg, var(--gold-400), #FFE1A8 55%, var(--cyan-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { margin-top: 17px; font-size: 16.6px; line-height: 1.78; color: rgba(255, 255, 255, .76); max-width: 620px; }
.hero__lead b { color: #fff; font-weight: 600; }

.hero__points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.hero__point {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13.2px; color: rgba(255, 255, 255, .9);
}
.hero__point svg { width: 14px; height: 14px; color: var(--green-500); }

.hero__cta { display: flex; gap: 13px; margin-top: 28px; flex-wrap: wrap; }

/* 2026-10-21：老板要求「资讯卡下端跟数据统计持平，不要把数据挤压到下面」——
   原 margin-top:34 + padding-top:24 共 58px 空隙把数据带顶到资讯卡下方老远；
   现网格行间隔已归零（portal.css .hero__grid.hero--full gap:0 48px），
   这里只留 10px 上边距 + 14px 上内边距，数据带上沿与资讯卡下端基本齐平。 */
.hero__stats { display: flex; gap: 36px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
.hero__stat b { display: block; font-family: var(--font-num); font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hero__stat b i { font-style: normal; font-size: 17px; margin-left: 3px; color: var(--gold-400); }
.hero__stat span { font-size: 13px; color: rgba(255, 255, 255, .58); }

/* Hero 右侧：数据看板（恢复放大规格：padding 24 / r-xl / 字号全面放大一档） */
.hero__panel { position: relative; }
.hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-xl);
  padding: 24px 24px 22px;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px rgba(2, 12, 28, .36);
}
.hero-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hero-card__title { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hero-card__title svg { width: 16px; height: 16px; }
.hero-card__live { font-size: 11px; color: var(--green-500); display: inline-flex; align-items: center; gap: 6px; }
.hero-card__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.hero-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  margin-bottom: 8px;
  transition: background .2s var(--ease);
}
.hero-row:hover { background: rgba(255, 255, 255, .12); }
/* 地区标签：统一 56px 定宽，容纳「东南亚」等三字地区名，单行不换行不溢出 */
.hero-row__flag {
  width: 56px; height: 33px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1;
  white-space: nowrap; overflow: hidden;
  background: linear-gradient(140deg, var(--blue-400), var(--navy-600));
  color: #fff;
}
.hero-row__main { flex: 1; min-width: 0; }
.hero-row__t {
  font-size: 14.2px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-row__d {
  font-size: 12.2px; color: rgba(255, 255, 255, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-row__val {
  font-family: var(--font-num); font-size: 17px; font-weight: 800; color: var(--gold-400);
  flex: none; white-space: nowrap;
}
.hero-card__foot { margin-top: 14px; display: flex; gap: 8px; }

.hero-float {
  position: absolute; background: #fff; color: var(--text-1);
  border-radius: var(--r); padding: 13px 16px; box-shadow: 0 16px 38px rgba(2, 12, 28, .28);
  display: flex; align-items: center; gap: 11px;
}
.hero-float b { font-family: var(--font-num); font-size: 20px; color: var(--blue-500); }
.hero-float span { font-size: 12px; color: var(--text-3); }
.hero-float--a { left: -28px; bottom: -66px; animation: floaty 5s ease-in-out infinite; }
.hero-float--b { right: -28px; top: -56px; animation: floaty 6.4s ease-in-out infinite reverse; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Hero 顶部：出海所用的平台 LOGO 墙（桌面端通栏置顶、位于两栏上方；移动端恢复 DOM 顺序排到底部） */
.platwall {
  grid-column: 1 / -1;
  order: -1;
  padding: 14px 18px 15px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(12px);
}
.platwall__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; flex-wrap: wrap; }
.platwall__title { font-size: 13.4px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.platwall__title svg { width: 15px; height: 15px; color: var(--cyan-400); flex: none; }
.platwall__note { font-size: 12.2px; color: rgba(255, 255, 255, .55); }
.platwall__note a { color: var(--gold-400); font-weight: 600; }
.platwall__note a:hover { text-decoration: underline; }
/* 8 列 × 2 行，正好铺满 16 个平台 */
.platwall__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }

/* 官方 LOGO 芯片：白色圆角卡片承载各平台官方 LOGO（多为深色文字标，白底最清晰） */
.plogo {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; padding: 7px 10px; border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 2px 10px rgba(2, 12, 28, .16);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plogo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 12, 28, .34); }
.plogo__img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* TikTok 固定第一位：官方 App 图标 + 双色标准字 lockup */
.plogo--lockup { gap: 8px; }
.plogo--lockup .plogo__app { flex: none; height: 30px; width: auto; display: block; }
.plogo--lockup .plogo__word { flex: none; height: 13px; width: auto; display: block; }

/* ----------------------------------------------
   2. 子页页头
   ---------------------------------------------- */
.phero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 360px at 14% 0%, rgba(37, 194, 214, .22), transparent 62%),
    linear-gradient(150deg, #071C38, #123A6B 70%, #1A5590);
  color: #fff; padding: 58px 0 62px;
}
.phero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 78px 100%;
  mask-image: linear-gradient(90deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.phero .wrap { position: relative; z-index: 2; }
.crumb { font-size: 12.8px; color: rgba(255, 255, 255, .56); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.crumb a:hover { color: #fff; }
.crumb i { font-style: normal; opacity: .5; }
.phero__title { font-size: 40px; letter-spacing: -.03em; }
.phero__title small { display: block; font-size: 14px; font-weight: 600; letter-spacing: .2em; color: var(--gold-400); margin-bottom: 12px; }
.phero__lead { margin-top: 16px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .74); max-width: 760px; }
.phero__meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.phero__meta span {
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
}

/* ----------------------------------------------
   页头左右两栏：左文案 / 右海外仓速览
   （把原先页头右侧的空白利用起来，同等内容不再单独占一整段）
   ---------------------------------------------- */
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 456px; gap: 46px; align-items: center; }
.phero__main { min-width: 0; }
/* 左栏比原来的通栏窄，5 个卖点胶囊需略微收紧才能保持一行 */
.phero__grid .phero__meta { gap: 10px; }
.phero__grid .phero__meta span { padding: 7px 13px; font-size: 12.6px; }

/* hero 右侧：产业生态拓扑图
   不再做成独立卡片：去掉边框 / 底色 / 投影 / 圆角，让拓扑直接落在页头深蓝渐变上，
   视觉上与页头融为一体。仅保留一层渐隐到透明的柔和暗晕（无硬边），
   作用是把彩色节点从同色系深蓝底里托出来——否则「载体与园区」的深蓝节点会糊进背景。 */
.phero__topo {
  position: relative;
  width: 100%; max-width: 460px; margin: 0 auto;
  aspect-ratio: 460 / 400;
  background: radial-gradient(58% 54% at 50% 46%, rgba(4, 18, 40, .62) 0%, rgba(4, 18, 40, .32) 50%, transparent 74%);
}
.topo { width: 100%; height: 100%; }

/* 生态页页头：右列加宽一档，拓扑图整体放大（限定 .phero--eco，不影响共用 .phero__grid 的 POD 页） */
.phero--eco .phero__grid { grid-template-columns: minmax(0, 1fr) 520px; }
.phero--eco .phero__topo {
  max-width: 520px;
  /* 整体视觉位置微调：用 transform 下移，不参与布局，窄屏/折叠不受影响；
     想再往下调只改这一个数值即可（页头底部还有 62px 内距，18px 不会溢出被裁）。 */
  transform: translateY(18px);
}
.topo svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 链路弧线与流动光点 */
.topo__arc { fill: none; stroke-width: 2; opacity: .5; }
.topo__spark {
  fill: none; stroke: #fff; stroke-width: 2.4;
  stroke-dasharray: 5 84; stroke-dashoffset: 0; opacity: .9;
  animation: topoFlow 3.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(120,230,255,.85));
}
@keyframes topoFlow { to { stroke-dashoffset: -89; } }

/* 枢纽脉冲环 */
.topo__hub-ring {
  transform-box: fill-box; transform-origin: center;
  animation: topoPulse 3.4s ease-in-out infinite;
}
@keyframes topoPulse { 0%,100% { opacity: .85; } 50% { opacity: .3; } }

/* 节点光圈 */
.topo__node-glow { opacity: .22; }

/* 内圈（虚线内环 + 20 个要素点）逆时针缓慢自转，与外圈顺时针的流光形成反向对转。
   旋转中心由 JS 内联写在元素 style 上（transform-box: view-box 让 px 落在 viewBox 坐标系）。 */
.topo__inner {
  transform-box: view-box;
  animation: topoSpinCCW 34s linear infinite;
}
@keyframes topoSpinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .topo__spark, .topo__hub-ring, .topo__inner { animation: none; }
}

/* 页头内数据带：原「数据条」整段收进页头，横跨两栏并压成一条。
   与独立计分板共用同一套单元格结构（标签在上 / 数字在下），只覆写尺寸与底色，
   竖条已一并去掉——两个数据带保持同一种语言。 */
.phero__stats {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg); overflow: hidden;
}
.phero__stats .stats__item { padding: 13px 16px 14px 18px; gap: 4px; border-right: 1px solid rgba(255, 255, 255, .12); }
.phero__stats .stats__item:last-child { border-right: none; }
.phero__stats .stats__item b { font-size: 22px; color: #fff; line-height: 1.15; }
.phero__stats .stats__item b i { font-size: 13px; color: var(--gold-400); margin-left: 3px; }
/* 子选择器同 base：别把模板注入的 <span data-count> 也压小（否则纯整数统计值会掉成小字） */
.phero__stats .stats__item > span { font-size: 11.6px; color: rgba(255, 255, 255, .58); }
@media (max-width: 720px) {
  .phero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phero__stats .stats__item:nth-child(2) { border-right: none; }
  .phero__stats .stats__item:nth-child(1),
  .phero__stats .stats__item:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .phero__stats .stats__item b { font-size: 19px; }
}

.whpanel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-xl);
  padding: 16px 18px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.whpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.whpanel__tag { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .9); letter-spacing: .2px; }
.whpanel__tag b { color: var(--gold-400); font-weight: 800; }
.whpanel__hint { flex: none; font-size: 11.4px; color: rgba(255, 255, 255, .5); }
.whpanel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }

/* POD 页头对照卡：右栏竖排两张（传统备货 vs POD 按需），填掉原本右侧的空白；窄屏横向并排。
   align-items 用 stretch（默认拉齐）：左栏加了图带后更高，右栏面板跟着拉伸到同高，两侧底部对齐 */
.phero--pod .phero__grid { align-items: stretch; }
.phero__compare { display: flex; flex-direction: column; gap: 12px; }
/* 卡片改成贴合蓝底的「玻璃」深色卡：去掉原来扎眼的大白底，文字转浅色 */
.phero__compare .card {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}
/* 传统备货（旧模式）：中性灰；POD 按需（新模式）：金色描边，形成对照 */
.phero__compare .card--flat {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
.phero__compare .card--flat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: rgba(255, 255, 255, .18);
}
.phero__compare .card--accent {
  background: rgba(245, 166, 35, .1) !important;
  border-color: rgba(245, 166, 35, .42) !important;
}
.phero__compare .card--accent::before { background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
.phero__compare .card__title { font-size: 16px !important; color: #fff; }
.phero__compare .gx4__list { gap: 8px; }
.phero__compare .gx4__list li { font-size: 13.6px; color: rgba(255, 255, 255, .74); }
.phero__compare .gx4__list li::before { background: var(--gold-400); }

/* 左栏文字整体放大一档，与右栏对照卡视觉持平（标题用 balance 让两行断得更均匀） */
.phero--pod .phero__title { font-size: 42px; text-wrap: balance; }
.phero--pod .phero__lead { font-size: 17px; line-height: 1.85; }
.phero--pod .phero__grid .phero__meta { margin-top: 26px; }
.phero--pod .phero__grid .phero__meta span { padding: 9px 16px; font-size: 13.8px; }

/* 对照面板标题栏放大一档，与左栏文字视觉持平（限定 POD 页头，不影响 stores 页同结构面板） */
.phero--pod .phero__compare-wrap { display: flex; flex-direction: column; }
.phero--pod .phero__compare-wrap .whpanel__head { margin-bottom: 14px; }
.phero--pod .phero__compare-wrap .whpanel__tag { font-size: 17.5px; letter-spacing: .3px; }
.phero--pod .phero__compare-wrap .whpanel__tag b { font-size: 17.5px; }
.phero--pod .phero__compare-wrap .whpanel__hint { font-size: 13px; }
/* 面板拉伸后，两张对照卡平摊多出的高度（各 flex:1），内容顶对齐，底部不留空 */
.phero--pod .phero__compare { flex: 1; }
.phero--pod .phero__compare .card { flex: 1; }

@media (max-width: 1200px) {
  .phero__compare { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .phero__compare { grid-template-columns: 1fr; }
}

/* 页头左栏下方样品图带：4 张小图（后台可上传图片 + 设置跳转链接），填掉左栏文字下方的空白。
   与页头蓝调一致的「玻璃」深色卡：浅色文字、悬停整卡轻微上浮 + 图片轻微放大 + 金色描边。 */
.phero__gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-top: 22px;
}
.phero__gcard {
  display: flex; flex-direction: column; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md, 12px); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.phero__gcard:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, .5);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
}
.phero__gimg { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0, 0, 0, .18); }
.phero__gimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.phero__gcard:hover .phero__gimg img { transform: scale(1.06); }
.phero__gmeta { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 9px; }
.phero__gcap { font-size: 12.3px; font-weight: 700; letter-spacing: .2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phero__gsub { font-size: 10.8px; color: rgba(255, 255, 255, .58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .phero__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 单行仓速览：整行可点，跳该仓现货 */
.whchip {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 7px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: all .2s var(--ease);
}
.whchip:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.whchip__flag { display: inline-flex; flex: none; }
.whchip__img {
  height: 15px; width: auto; max-width: 24px; border-radius: 3px; object-fit: contain;
  background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .24);
}
.whchip__txt { flex: 1 1 auto; min-width: 0; }
.whchip__txt b {
  display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.whchip__txt i {
  display: block; font-size: 10.4px; font-style: normal; color: rgba(255, 255, 255, .55); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.whchip__num { flex: none; text-align: right; }
.whchip__num b { display: block; font-family: var(--font-num); font-size: 13.5px; font-weight: 800; color: var(--gold-400); line-height: 1.2; }
.whchip__num i { display: block; font-size: 9.4px; font-style: normal; color: rgba(255, 255, 255, .46); line-height: 1.3; }
/* 空仓（在仓 SKU = 0）：标题写的是「货已经在当地了」，没货的仓就不该和满仓的仓抢视觉权重。
   数字改为中性灰、卡面压暗；仍可点击（跳过去会提示该仓暂无现货）——仓一律保留，不删。 */
.whchip.is-empty { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.whchip.is-empty .whchip__img { opacity: .6; }
.whchip.is-empty .whchip__num b { color: rgba(255, 255, 255, .42); }
.whchip.is-empty .whchip__txt b { color: rgba(255, 255, 255, .72); }

/* 窄屏：上下堆叠，速览自适应列数 */
@media (max-width: 1200px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .phero--eco .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .whpanel__grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
}
@media (max-width: 640px) {
  .whpanel { padding: 14px; }
  .whpanel__head { flex-direction: column; gap: 3px; margin-bottom: 11px; }
  .whpanel__grid { gap: 7px 8px; }
}

/* ----------------------------------------------
   3. 数据条 / 统计
   ---------------------------------------------- */
/* 计分板：深海渐变面板，4 格等分。
   结构改为「标签在上 · 数字为主角」——数字用 --font-num 等宽数字，单位走金色。
   原先那根装饰性竖条已移除：它定位在 left:26px，而数字从 padding-left:38px 起排，
   两者不同轴，在留白里读起来像噪点而不是刻度。 */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(118deg, var(--navy-900) 0%, var(--navy-800) 54%, var(--navy-700) 100%);
  box-shadow: 0 20px 46px -24px rgba(7, 28, 56, .6);
}
/* 右上柔光：避免大块纯色发闷（纯装饰层，关掉 pointer-events 不影响点击） */
.stats::before {
  content: ""; position: absolute; right: -80px; top: -124px; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(37, 194, 214, .3), rgba(37, 194, 214, 0) 70%);
}
.stats__item {
  position: relative; z-index: 1;
  display: grid; gap: 6px; align-content: center;
  padding: 25px 24px 26px;
  border-right: 1px solid rgba(255, 255, 255, .1);
  transition: background .24s var(--ease);
}
.stats__item:last-child { border-right: none; }
.stats__item:hover { background: rgba(255, 255, 255, .05); }
/* 标签在上、数字在下：模板输出的 DOM 顺序是「数字在前」，用 order 换位，
   这样 index.html 的硬编码结构与模板渲染结构都不用改。
   注意必须是子选择器 `>`：`span` 会连模板注入的 <span data-count> 一起命中，
   把纯整数统计值（12 / 5 / 3200+）压成 12.8px 小灰字，而非纯整数（5.2 / 78%）正常 38px，
   同一排数字一大一小——这就是截图里那个问题的根因。 */
.stats__item > span { order: 1; font-size: 12.8px; color: rgba(255, 255, 255, .62); letter-spacing: .02em; }
.stats__item b {
  order: 2; font-family: var(--font-num); font-size: 38px; font-weight: 800;
  letter-spacing: -.02em; color: #fff; line-height: 1.06; font-variant-numeric: tabular-nums;
}
.stats__item b i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--gold-400); margin-left: 4px; }

/* ----------------------------------------------
   4. 平台 / 专区卡片
   ---------------------------------------------- */
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column;
  transition: all .26s var(--ease); position: relative; overflow: hidden;
}
.pcard::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--blue-200); }
.pcard:hover::after { transform: scaleX(1); }
.pcard__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.pcard__logo {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(140deg, var(--navy-700), var(--blue-500));
}
/* 官方 LOGO 版：白色圆角芯片 + 自适应宽度（多数平台为宽版文字标） */
.pcard__logo--img {
  width: auto; min-width: 46px; max-width: 104px; height: 46px;
  padding: 7px 11px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 5px rgba(2, 12, 28, .06);
}
.pcard__logoimg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pcard__logo--gold { background: linear-gradient(140deg, var(--gold-600), var(--gold-400)); }
.pcard__logo--green { background: linear-gradient(140deg, var(--green-600), var(--cyan-400)); }
.pcard__logo--dark { background: linear-gradient(140deg, #101820, #2C3B4E); }
.pcard__logo--red { background: linear-gradient(140deg, #C0392B, #F0643C); }
.pcard__logo--violet { background: linear-gradient(140deg, #4B3BC4, #7A6BEF); }
.pcard__name { font-size: 16.5px; font-weight: 700; }
.pcard__en { font-size: 11.6px; color: var(--text-4); letter-spacing: .06em; text-transform: uppercase; }
.pcard__rows { display: grid; gap: 9px; margin-bottom: 16px; }
.pcard__row { display: flex; gap: 10px; font-size: 13.4px; line-height: 1.6; }
.pcard__row dt { flex: none; width: 62px; color: var(--text-4); }
.pcard__row dd { margin: 0; color: var(--text-2); }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pcard__foot { margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard__heat { display: flex; align-items: center; gap: 5px; font-size: 12.4px; color: var(--gold-600); font-weight: 600; }

/* 专区卡（横向大卡） */
.rcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: grid; grid-template-columns: 210px 1fr;
  transition: all .26s var(--ease);
}
.rcard:hover { box-shadow: var(--sh); border-color: var(--blue-200); transform: translateY(-4px); }
.rcard__side {
  padding: 26px 22px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-800), var(--blue-500));
}
.rcard__side::after {
  content: ""; position: absolute; right: -40px; bottom: -50px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.rcard--sea .rcard__side { background: linear-gradient(150deg, #0B4F42, #12B886); }
.rcard--jp .rcard__side { background: linear-gradient(150deg, #6B1436, #C0392B); }
.rcard--me .rcard__side { background: linear-gradient(150deg, #7A4B0B, #E08A1E); }
.rcard--lat .rcard__side { background: linear-gradient(150deg, #1B4B7A, #25C2D6); }
.rcard--af .rcard__side { background: linear-gradient(150deg, #4A3A12, #9A7B2E); }
.rcard--oce .rcard__side { background: linear-gradient(150deg, #123F5C, #2E9BE0); }
.rcard--ru .rcard__side { background: linear-gradient(150deg, #2B2F52, #5B62A8); }
.rcard__flag { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.rcard__side h3 { font-size: 20px; }
.rcard__side p { font-size: 12.6px; color: rgba(255, 255, 255, .72); margin-top: 7px; line-height: 1.6; }
.rcard__side .rcard__badge {
  margin-top: 16px; display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18);
}
.rcard__body { padding: 24px 26px; position: relative; }
.rcard__metrics { display: flex; gap: 26px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.rcard__metric b { display: block; font-family: var(--font-num); font-size: 22px; color: var(--navy-800); letter-spacing: -.01em; }
.rcard__metric span { font-size: 12px; color: var(--text-4); }
.rcard__blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.rcard__block h4 { font-size: 12.6px; color: var(--text-4); letter-spacing: .04em; margin-bottom: 7px; }
.rcard__block p { font-size: 13.4px; color: var(--text-2); line-height: 1.65; }
.rcard__plats { display: flex; flex-wrap: wrap; gap: 7px; }

/* ----------------------------------------------
   5. 流程步骤
   ---------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
/* 三步流程等三列场景。以前写成 HTML 内联 repeat(3,1fr)，会顶掉 1080/640 断点。 */
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 六步流程等「三列两行」换行场景：列数同 .flow--3，但跨行的步骤不再画连接虚线 ——
   虚线是「横向串联」语义，换行后每行末尾（第 3 步）右侧会挂出一条断头线。 */
.flow--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow--wrap .flow__step::before { display: none; }
.flow__step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 20px; position: relative; transition: all .26s var(--ease); }
.flow__step:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--blue-200); }
.flow__no {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-num); font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--navy-700), var(--blue-500));
  margin-bottom: 15px;
}
.flow__step h4 { font-size: 15.6px; margin-bottom: 7px; }
.flow__step p { font-size: 13.2px; color: var(--text-3); line-height: 1.65; }
/* 连接虚线只在 .flow 容器内生成。resources.html 把 .flow__step 放进 .grid.g4 复用卡片样式，
   那里没有「横向串联」语义；以前靠内联 position:static 把伪元素甩到祖先上去躲，
   结果虚线被锚到 .wrap 上、right:-18px 直接挂出容器右侧，全站唯一一处 18px 横向溢出。 */
.flow .flow__step::before {
  content: ""; position: absolute; top: 42px; right: -18px; width: 18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue-200) 0 5px, transparent 5px 9px);
}
.flow .flow__step:last-child::before { display: none; }

/* ----------------------------------------------
   6. 陪跑套餐卡
   ---------------------------------------------- */
.plan {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 28px; display: flex; flex-direction: column; position: relative;
  transition: all .28s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.plan--hot { border-color: transparent; background: linear-gradient(170deg, #0B2545, #123A6B 55%, #1A5590); color: #fff; box-shadow: var(--sh-lg); }
.plan--hot .plan__desc, .plan--hot .plan__meta { color: rgba(255, 255, 255, .7); }
.plan--hot .plan__price b { color: var(--gold-400); }
.plan--hot .plan__list li { color: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .12); }
.plan--hot .plan__list li i { color: var(--gold-400); }
.plan__flag {
  position: absolute; top: -13px; right: 26px;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff;
  font-size: 12px; font-weight: 700; box-shadow: var(--sh-gold);
}
.plan__name { font-size: 21px; margin-bottom: 6px; }
.plan__desc { font-size: 13.4px; color: var(--text-3); min-height: 44px; }
.plan__price { margin: 18px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font-family: var(--font-num); font-size: 38px; font-weight: 800; color: var(--navy-800); letter-spacing: -.02em; }
.plan__price span { font-size: 13px; color: var(--text-3); }
.plan__meta { font-size: 12.6px; color: var(--text-4); margin-bottom: 20px; }
.plan__list { display: grid; gap: 11px; margin-bottom: 24px; }
.plan__list li { display: flex; gap: 9px; font-size: 13.6px; color: var(--text-2); line-height: 1.6; padding-bottom: 11px; border-bottom: 1px dashed var(--line); }
.plan__list li i { font-style: normal; font-weight: 800; flex: none; color: var(--blue-500); }

/* ----------------------------------------------
   7. 好物出海专用
   ---------------------------------------------- */
.guipin {
  background:
    radial-gradient(760px 420px at 82% 8%, rgba(245, 166, 35, .2), transparent 62%),
    radial-gradient(620px 380px at 6% 92%, rgba(18, 184, 134, .16), transparent 60%),
    linear-gradient(160deg, #071C38, #0E2E50 50%, #123A6B);
  color: #fff; position: relative; overflow: hidden;
}
.guipin::before {
  content: ""; position: absolute; right: -80px; top: -60px; width: 420px; height: 420px;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .12);
}
.guipin .sec-title { color: #fff; }
.guipin .sec-title em,
.guipin .sec-title .hl-gold {
  background: linear-gradient(100deg, var(--gold-400), #FFE7BC);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guipin .sec-sub { color: rgba(255, 255, 255, .68); }
.guipin .tabbar h3 { color: #fff; }

.gxcat {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.gxcat__item {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r); padding: 18px;
  transition: all .24s var(--ease);
}
.gxcat__item:hover { background: rgba(255, 255, 255, .13); transform: translateY(-4px); border-color: rgba(245, 166, 35, .5); }
.gxcat__ico { font-size: 24px; margin-bottom: 10px; }
.gxcat__item h4 { font-size: 15px; margin-bottom: 6px; }
.gxcat__item p { font-size: 12.6px; color: rgba(255, 255, 255, .62); line-height: 1.6; }
.gxcat__item .chip--solid { margin-top: 12px; }

.gx4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gx4__card {
  background: #fff; border-radius: var(--r-lg); padding: 26px 24px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: all .26s var(--ease);
}
.gx4__card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.gx4__no {
  position: absolute; right: 16px; top: 8px; font-family: var(--font-num);
  font-size: 52px; font-weight: 800; color: var(--gold-100); line-height: 1;
}
.gx4__card h3 { font-size: 18.5px; margin-bottom: 10px; position: relative; }
.gx4__card > p { font-size: 13.6px; color: var(--text-2); line-height: 1.7; margin-bottom: 16px; }
.gx4__list { display: grid; gap: 9px; }
.gx4__list li { font-size: 13.2px; color: var(--text-2); display: flex; gap: 8px; }
.gx4__list li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--gold-500); flex: none; margin-top: 8px; }

/* 广西好物专题页头（金色主调） */
.phero--gold {
  background:
    radial-gradient(720px 360px at 10% -4%, rgba(245, 166, 35, .3), transparent 62%),
    radial-gradient(620px 340px at 90% 104%, rgba(18, 184, 134, .2), transparent 60%),
    linear-gradient(150deg, #061A33, #123A6B 58%, #17497E);
}
.phero--gold .phero__title small { color: var(--gold-400); letter-spacing: .22em; }
.phero--gold .phero__meta span { background: rgba(255, 255, 255, .09); border-color: rgba(245, 166, 35, .3); }

/* 四合一导航条 */
.gxnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gxnav__item {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; transition: all .24s var(--ease); position: relative; overflow: hidden;
}
.gxnav__item:hover { border-color: var(--gold-500); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(245, 166, 35, .18); }
.gxnav__no {
  font-family: var(--font-num); font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
}
.gxnav__item > span:last-child { display: flex; flex-direction: column; }
.gxnav__t { display: block; font-size: 15.4px; font-weight: 700; }
.gxnav__d { display: block; font-size: 12.4px; color: var(--text-3); }

/* 通道视觉 */
.corridor__visual {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg); padding: 24px;
}
.corridor__visual h4 { font-size: 15px; color: #fff; margin-bottom: 16px; }
.route {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.4px; color: rgba(255, 255, 255, .8);
}
.route__node {
  padding: 9px 15px; border-radius: var(--r-pill);
  background: rgba(245, 166, 35, .14); border: 1px solid rgba(245, 166, 35, .34);
  color: var(--gold-400); font-weight: 600; white-space: nowrap;
}
.route__arrow { color: rgba(255, 255, 255, .35); font-size: 15px; }
.route__node--end { background: rgba(18, 184, 134, .16); border-color: rgba(18, 184, 134, .38); color: #5FE0B4; }

/* 政策卡 */
.policy {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; border-top: 4px solid var(--gold-500); transition: all .26s var(--ease);
}
.policy:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.policy h3 { font-size: 16.6px; margin-bottom: 9px; }
.policy p { font-size: 13.6px; color: var(--text-2); line-height: 1.7; }


/* 东盟通道 */
.corridor { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; }
.corridor__nodes { display: grid; gap: 12px; }
.node {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r); padding: 15px 18px;
}
.node__ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(245, 166, 35, .16); font-size: 19px; }
/* min-width:0 允许长描述正常换行收缩；时效值 nowrap 防「5–8 日」在窄屏被压成两行 */
.node__body { min-width: 0; }
.node__t { font-size: 14.6px; font-weight: 600; }
.node__d { font-size: 12.4px; color: rgba(255, 255, 255, .58); }
.node__val { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--font-num); font-size: 17px; color: var(--gold-400); font-weight: 700; }

/* ----------------------------------------------
   8. 通用列表 / 表格 / 时间线
   ---------------------------------------------- */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--blue-400), var(--cyan-400), transparent); }
.tl__item { position: relative; padding-bottom: 26px; }
.tl__item::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; border: 3px solid var(--blue-500);
}
.tl__item:last-child { padding-bottom: 0; }
.tl__t { font-size: 15.6px; font-weight: 700; margin-bottom: 6px; }
.tl__d { font-size: 13.6px; color: var(--text-2); line-height: 1.7; }

.dlist { display: grid; gap: 2px; }
.dlist__row {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  padding: 16px 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line);
  transition: all .2s var(--ease);
}
.dlist__row:hover { border-color: var(--blue-200); background: var(--blue-50); }
.dlist__k { font-size: 13.6px; font-weight: 700; color: var(--navy-700); }
.dlist__v { font-size: 13.6px; color: var(--text-2); line-height: 1.7; }

/* 通知 / 公示条 */
.notice {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, var(--gold-100), #FFF9EE);
  border: 1px solid #FBE2B6; border-radius: var(--r);
  padding: 14px 20px; font-size: 13.6px; color: #8A5A12;
}
.notice b { color: var(--gold-700); }
.notice__tag {
  flex: none; padding: 3px 10px; border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff;
  font-size: 11.6px; font-weight: 700;
}
.notice--blue { background: linear-gradient(90deg, var(--blue-100), #F7FBFF); border-color: #CCE4F7; color: var(--navy-600); }
.notice--blue .notice__tag { background: linear-gradient(135deg, var(--blue-500), var(--navy-600)); }
/* 紧凑版：说明条移入商品列表上方后用，避免又多占一段高度 */
.notice--slim { margin-top: 14px; padding: 10px 14px; gap: 11px; font-size: 12.6px; }
.notice--slim .notice__tag { padding: 2px 9px; font-size: 11px; }

/* 数字滚动词云（仿参考站品类滚动） */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: scrollx 72s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* 无障碍：用户系统开启「减少动态效果」时停下滚动，改为可横向浏览 */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; overflow-x: auto; }
}
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  padding: 10px 18px; border-radius: var(--r-pill); background: #fff;
  border: 1px solid var(--line); font-size: 13.6px; color: var(--text-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.marquee__item b { color: var(--blue-500); font-weight: 700; }

/* ----------------------------------------------
   9. 表单 / CTA
   ---------------------------------------------- */
.cta {
  border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(600px 300px at 88% 10%, rgba(245, 166, 35, .28), transparent 60%),
    linear-gradient(140deg, #071C38, #123A6B 60%, #1A5590);
  color: #fff; padding: 48px 46px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
  position: relative;
}
.cta::after {
  content: ""; position: absolute; left: -60px; bottom: -80px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(37, 194, 214, .16);
}
.cta .wrap-rel { position: relative; z-index: 1; }
.cta h2 { font-size: 32px; letter-spacing: -.02em; }
.cta p { margin-top: 14px; font-size: 15.4px; color: rgba(255, 255, 255, .74); line-height: 1.8; }
.cta__points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cta__points span { font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }

.form {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg); padding: 26px;
  backdrop-filter: blur(12px);
}
.form__title { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.form__sub { font-size: 12.8px; color: rgba(255, 255, 255, .6); margin-bottom: 20px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.6px; color: rgba(255, 255, 255, .62); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px;
  transition: all .2s var(--ease); outline: none;
}
.field textarea { height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .38); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cyan-400); background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 3px rgba(37, 194, 214, .18);
}
.field select option { color: #0C1B2E; }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__tip { font-size: 11.8px; color: rgba(255, 255, 255, .48); margin-top: 12px; text-align: center; }

/* 表单（浅色版本，用于页面内区块） */
.form--light { background: #fff; border-color: var(--line); backdrop-filter: none; }
.form--light .form__title { color: var(--text-1); }
.form--light .form__sub { color: var(--text-3); }
.form--light .field label { color: var(--text-3); }
.form--light .field input, .form--light .field select, .form--light .field textarea {
  background: var(--bg-soft); border-color: var(--line-strong); color: var(--text-1);
}
.form--light .field input::placeholder, .form--light .field textarea::placeholder { color: var(--text-4); }
.form--light .field input:focus, .form--light .field select:focus, .form--light .field textarea:focus {
  border-color: var(--blue-400); background: #fff; box-shadow: 0 0 0 3px rgba(30, 123, 196, .12);
}
.form--light .form__tip { color: var(--text-4); }

/* ==========================================================================
   会员登录 / 注册（login.html）
   —— 左表单卡复用 .form.form--light 的浅色皮肤，这里只补结构；
   —— 右栏说明卡是浅色上下文，不能复用 .cta__points（那是深蓝底上的白字胶囊）。
   ========================================================================== */
.authwrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 26px; align-items: start;
}
.authcard { box-shadow: var(--sh-sm); }
.authcard .field input, .authcard .field select { height: 46px; }
.authcard__notice { margin-bottom: 22px; }

/* Tab：胶囊式，选中态白底 + 细投影 */
.authtabs {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; background: var(--bg); border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.authtab {
  flex: 1 1 0; min-width: 0; height: 40px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; color: var(--text-2);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.authtab:hover { color: var(--navy-700); }
.authtab.is-active { background: #fff; color: var(--navy-800); box-shadow: var(--sh-xs); }

.authpanel[hidden] { display: none; }
.authcard .form__tip a { color: var(--blue-500); font-weight: 600; }
.authcard .form__tip a:hover { color: var(--navy-700); }
.authcard .form__tip { color: var(--text-4); }
/* 蜜罐：真人看不见，机器人会填 */
.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 已登录：账户卡 */
.auth-account__title { font-size: 21px; font-weight: 800; color: var(--navy-800); letter-spacing: -.01em; }
.auth-account__sub { font-size: 13.4px; color: var(--text-3); margin-top: 8px; line-height: 1.7; }
.auth-account__rows {
  margin-top: 18px; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--bg-soft);
}
.auth-account__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 16px; font-size: 14.4px; border-bottom: 1px solid var(--line);
}
.auth-account__row:last-child { border-bottom: 0; }
.auth-account__row span { color: var(--text-3); flex: none; }
.auth-account__row b {
  color: var(--text-1); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-account__acts { margin-top: 20px; display: grid; gap: 10px; }

/* 右栏说明 */
.authside { display: grid; gap: 16px; }
.authside__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.authside__card--gold {
  background: linear-gradient(135deg, #FFFBF3, #FFF6E6);
  border-color: #FBE2B6;
}
.authside__title { font-size: 16.4px; font-weight: 700; color: var(--navy-800); margin-bottom: 14px; }
.authside__text { font-size: 14px; color: var(--text-2); line-height: 1.78; margin-bottom: 18px; }
.authside__points { display: grid; gap: 10px; }
.authside__points span {
  font-size: 13.6px; color: var(--text-2); line-height: 1.6;
  padding-left: 2px;
}
.authside__notice { font-size: 12.8px; }

@media (max-width: 960px) {
  .authwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .authcard { padding: 20px; }
  .authcard .field--2 { grid-template-columns: minmax(0, 1fr); }
}


/* 成功提示 */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 24px);
  background: var(--navy-900); color: #fff; padding: 14px 26px; border-radius: var(--r-pill);
  font-size: 14px; box-shadow: var(--sh-lg); z-index: 300;
  opacity: 0; pointer-events: none; transition: all .3s var(--ease);
  display: flex; align-items: center; gap: 10px;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--green-500); }

/* 隐藏/显示 工具 */
.hidden { display: none !important; }

/* ----------------------------------------------
   9.5 平台卡字段 / FAQ / 资讯 / 资源卡 / 弹窗
   ---------------------------------------------- */
.pcard__row .k { flex: none; width: 62px; color: var(--text-4); }
.pcard__row .v { color: var(--text-2); }

.faq { display: grid; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .22s var(--ease), box-shadow .22s var(--ease); }
.faq__item:hover { border-color: var(--blue-200); }
.faq__item.is-open { border-color: var(--blue-200); box-shadow: var(--sh-sm); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-size: 15.4px; font-weight: 600; text-align: left; color: var(--text-1);
}
.faq__q i { font-style: normal; font-size: 21px; color: var(--blue-500); transition: transform .25s var(--ease); flex: none; line-height: 1; }
.faq__item.is-open .faq__q i { transform: rotate(45deg); }
.faq__a { display: none; padding: 0 22px 20px; font-size: 14px; color: var(--text-2); line-height: 1.85; }
.faq__item.is-open .faq__a { display: block; }

/* 出海情报：资讯流（焦点大卡 + 新闻行） */
.news { display: grid; gap: 14px; min-width: 0; }
.news > * { min-width: 0; }

/* 分类配色（与站点设计令牌一致：深海蓝 / 桂花金 / 东盟绿） */
.news__cat--policy    { --nc: #1E7BC4; --nc2: #2f97e0; }
.news__cat--platform  { --nc: #25C2D6; --nc2: #4fd6e6; }
.news__cat--market    { --nc: #F5A623; --nc2: #FFBF57; }
.news__cat--logistics { --nc: #12B886; --nc2: #2fd6a0; }
.news__cat--compliance{ --nc: #E8590C; --nc2: #F5832B; }
.news__cat--industry  { --nc: #7048E8; --nc2: #9277f0; }

.news__cat {
  display: inline-flex; align-items: center; flex: none;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.6px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--nc, var(--blue-500));
}

/* 焦点大卡 */
.news__lead {
  display: grid; grid-template-columns: 220px 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow .24s var(--ease), transform .24s var(--ease);
}
.news__lead:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.news__cover {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--nc, var(--blue-500)), var(--nc2, var(--blue-400)));
  color: #fff;
}
.news__cover svg { width: 56px; height: 56px; opacity: .92; }
.news__cover .news__cat {
  position: absolute; left: 14px; top: 14px;
  background: rgba(255, 255, 255, .22); backdrop-filter: blur(4px);
}
.news__leadbody { padding: 22px 24px; min-width: 0; }
.news__leadt { font-size: 20px; line-height: 1.34; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
.news__leadt a { color: var(--text-1); text-decoration: none; }
.news__leadt a:hover { color: var(--blue-500); }
.news__leadd { font-size: 13.8px; line-height: 1.74; color: var(--text-3); margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news__meta { display: flex; align-items: center; gap: 8px; font-size: 12.4px; color: var(--text-3); }
.news__src { color: var(--text-2); font-weight: 600; }
.news__dot { color: var(--line); }
.news__row { display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--nc, var(--blue-500));
  border-radius: var(--r); padding: 13px 18px; transition: all .2s var(--ease); }
.news__row:hover { border-color: var(--blue-200); box-shadow: var(--sh-sm); transform: translateX(4px); }
.news__rowmain { flex: 1; min-width: 0; }
.news__rowt { display: block; font-size: 14.6px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.news__row:hover .news__rowt { color: var(--blue-500); }
.news__row .news__meta { margin-top: 0; }

/* ==============================================================
   资讯独立版面（news.html）
   —— 焦点区（头条 + 编辑推荐）/ 资讯流卡片 / 侧栏快讯
   分类配色沿用 .news__cat--* 上的 --nc / --nc2
   ============================================================== */
.phero__em { font-style: normal; color: var(--gold-400); }

/* ---- 焦点区 ---- */
.leadwrap { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: stretch; }
.leadwrap__main { min-width: 0; }

.leadnews {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  grid-template-areas: "media head" "foot foot";
  grid-template-rows: auto 1fr; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
}
/* 左上角配图：绝对定位铺满，避免与 auto 行高互相牵扯 */
.leadnews__media { grid-area: media; position: relative; overflow: hidden; min-height: 200px; background: #10243f; }
.leadnews__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.leadnews__badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .44); font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff;
}
.leadnews__head { grid-area: head; padding: 22px 26px 4px; min-width: 0; }
/* 分类胶囊：沿用 news__cat--* 的 --nc/--nc2 渐变 */
.leadnews__cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  color: #fff; font-size: 12.4px; font-weight: 700; letter-spacing: .06em;
  background: linear-gradient(135deg, var(--nc), var(--nc2));
}
.leadnews__cat svg { width: 14px; height: 14px; }
.leadnews__t { margin-top: 12px; font-size: 21px; line-height: 1.42; font-weight: 800; letter-spacing: -.015em; }
.leadnews__t a:hover { color: var(--blue-500); }
.leadnews__d { margin-top: 12px; font-size: 14.2px; line-height: 1.8; color: var(--text-2); }
.leadnews__foot {
  grid-area: foot; margin-top: 14px; padding: 16px 26px 22px;
  border-top: 1px solid var(--line); display: flex; flex-direction: column;
}
.leadnews__points { display: grid; gap: 8px; }
.leadnews__points li { position: relative; padding-left: 20px; font-size: 13.4px; line-height: 1.65; color: var(--navy-700); }
.leadnews__points li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--nc);
}
.leadnews__meta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.6px; color: var(--text-3); }
.leadnews__meta i { font-style: normal; opacity: .45; }
.leadnews__src { color: var(--navy-600); font-weight: 600; }

/* ---- 编辑推荐 ---- */
.picks {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sh-xs);
}
.picks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.picks__t { font-size: 15px; font-weight: 800; color: var(--navy-800); }
.picks__hint { font-size: 11.6px; color: var(--text-4); }
.picks__list { flex: 1 1 auto; display: flex; flex-direction: column; }
.picks__foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.6px; line-height: 1.6; color: var(--text-4); }

/* ---- 侧栏快讯行 ---- */
.newsmini {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
  transition: transform .18s var(--ease);
}
.newsmini:last-child { border-bottom: none; }
.newsmini:hover { transform: translateX(3px); }
.newsmini:hover .newsmini__t { color: var(--blue-500); }
.newsmini__cat {
  flex: none; margin-top: 1px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--nc); color: #fff; font-size: 11px; font-weight: 700;
}
.newsmini__t {
  flex: 1 1 auto; min-width: 0; font-size: 13.4px; line-height: 1.55; font-weight: 600; color: var(--navy-700);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.newsmini__time { flex: none; margin-top: 1px; font-size: 11.6px; color: var(--text-4); font-family: var(--font-num); }

/* ---- 资讯流：分类筛选 + 卡片 ---- */
.sec-count { font-size: 13.4px; font-weight: 600; color: var(--blue-500); }
.newsfilter { margin: 18px 0 20px; }
/* 卡片等高交给 grid 默认的 align-items: stretch。
   不要给子项写 height: 100% —— 行高是 auto 时百分比无法解析，反而会覆盖 stretch，
   导致同排卡片各按内容高度、参差不齐。 */
.newscard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px 18px; box-shadow: var(--sh-xs);
  transition: all .24s var(--ease);
}
.newscard:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); border-color: var(--blue-200); }
.newscard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.newscard__cat {
  padding: 3px 11px; border-radius: var(--r-pill); color: #fff;
  background: linear-gradient(135deg, var(--nc), var(--nc2));
  font-size: 11.6px; font-weight: 700; letter-spacing: .04em;
}
.newscard__time { font-size: 12px; color: var(--text-4); font-family: var(--font-num); }
.newscard__t { font-size: 16.6px; line-height: 1.45; font-weight: 800; letter-spacing: -.01em; }
.newscard__t a:hover { color: var(--blue-500); }
.newscard__d { margin-top: 10px; font-size: 13.4px; line-height: 1.75; color: var(--text-2); }
.newscard__points { margin-top: 12px; display: grid; gap: 6px; }
.newscard__points li { position: relative; padding-left: 18px; font-size: 12.6px; line-height: 1.6; color: var(--text-3); }
.newscard__points li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--nc);
}
.newscard__meta {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.2px; color: var(--text-4);
}
.newscard__read { padding: 2px 9px; border-radius: var(--r-pill); background: var(--bg); }

/* ---- 订阅卡 ---- */
.subcard {
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding: 30px 34px; border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(620px 300px at 88% -20%, rgba(245, 166, 35, .26), transparent 62%),
    linear-gradient(135deg, #071C38, #123A6B 68%, #1A5590);
}
.subcard__txt { min-width: 0; max-width: 620px; }
.subcard__tag { font-size: 12.4px; font-weight: 700; letter-spacing: .16em; color: var(--gold-400); }
.subcard__t { margin-top: 10px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.subcard__d { margin-top: 10px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.subcard__act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.subcard__note { font-size: 12.4px; color: rgba(255, 255, 255, .56); }

/* ==============================================================
   商品详情页（product.html?sku=xxx）
   ============================================================== */
.pdp { display: grid; grid-template-columns: 452px minmax(0, 1fr); gap: 40px; align-items: start; }

.pdp__gallery { min-width: 0; }
.pdp__stage {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.pdp__stage img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* 无采集图时的品类色块占位（沿用 .prod__media--* 的渐变） */
.pdp__stage--ph { flex-direction: column; gap: 12px; }
.pdp__emoji { font-size: 68px; }
.pdp__phnote { font-size: 12.6px; color: rgba(255, 255, 255, .72); }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp__thumb {
  width: 76px; height: 76px; padding: 0; cursor: pointer; flex: none;
  border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff;
  transition: all .18s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: var(--blue-200); }
.pdp__thumb.is-active { border-color: var(--blue-500); box-shadow: var(--sh-xs); }

.pdp__info { min-width: 0; }
.pdp__crumb { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 12.6px; color: var(--text-4); }
.pdp__crumb a { color: var(--text-3); }
.pdp__crumb a:hover { color: var(--blue-500); }
.pdp__crumb i { font-style: normal; opacity: .5; }
.pdp__t { font-size: 27px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; }
.pdp__sub { margin-top: 9px; font-size: 13px; color: var(--text-3); }
.pdp__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pdp__price { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.pdp__pricebox {
  flex: 1 1 150px; padding: 14px 18px; border-radius: var(--r);
  background: linear-gradient(120deg, var(--blue-50), #fff); border: 1px solid var(--blue-100);
}
.pdp__pricebox span { display: block; font-size: 12.2px; color: var(--text-3); }
.pdp__pricebox b {
  display: block; margin-top: 4px; font-family: var(--font-num);
  font-size: 27px; font-weight: 800; color: var(--navy-800); letter-spacing: -.02em;
}
.pdp__pricebox--retail { background: linear-gradient(120deg, var(--gold-100), #FFF9EE); border-color: #FBE2B6; }
.pdp__pricebox--retail b { color: var(--gold-700); }

.pdp__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 22px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.pdp__fact { background: #fff; padding: 13px 16px; min-width: 0; }
.pdp__fact span { display: block; font-size: 11.8px; color: var(--text-4); }
.pdp__fact b {
  display: block; margin-top: 3px; font-size: 13.4px; font-weight: 700; color: var(--navy-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp__act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.pdp__detail { margin-top: 34px; }
.pdp__block { margin-top: 26px; }
.pdp__h2 {
  font-size: 17px; font-weight: 800; color: var(--navy-800);
  padding-left: 12px; border-left: 3px solid var(--blue-500); margin-bottom: 14px;
}
.pdp__points { display: grid; gap: 9px; }
.pdp__points li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.pdp__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue-500); font-weight: 800; }
.pdp__specs { width: 100%; border-collapse: collapse; font-size: 13.6px; }
.pdp__specs th, .pdp__specs td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.pdp__specs th { width: 150px; font-weight: 500; color: var(--text-3); background: var(--bg-soft); }
.pdp__specs td { font-weight: 600; color: var(--navy-700); }
.pdp__p { font-size: 14px; line-height: 1.8; color: var(--text-2); }
.pdp__ship { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pdp__ship div { padding: 16px; border-radius: var(--r); background: var(--bg-soft); text-align: center; }
.pdp__ship b { display: block; font-size: 15.4px; font-weight: 800; color: var(--navy-800); }
.pdp__ship span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-4); }

@media (max-width: 980px) {
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pdp__t { font-size: 22px; }
}
@media (max-width: 640px) {
  .pdp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp__ship { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp__thumb { width: 62px; height: 62px; }
  .pdp__pricebox b { font-size: 23px; }
}

@media (max-width: 1080px) {
  .leadwrap { grid-template-columns: minmax(0, 1fr); }
  .leadnews { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* 单列堆叠：配图通栏在上，其次标题摘要，最后要点 */
  .leadnews {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "head" "foot";
    grid-template-rows: auto auto auto; height: auto;
  }
  .leadnews__media { min-height: 184px; }
  .leadnews__head { padding: 18px 20px 2px; }
  .leadnews__foot { margin-top: 12px; padding: 14px 20px 18px; }
  .leadnews__t { font-size: 18.4px; }
  .subcard { padding: 24px; gap: 22px; }
  .subcard__t { font-size: 20px; }
}

.rescard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: all .26s var(--ease);
}
.rescard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--blue-200); }
.rescard__tag {
  position: absolute; right: 24px; top: 26px;
  font-size: 11.4px; font-weight: 700; letter-spacing: .1em; color: var(--blue-500);
  background: var(--blue-100); padding: 4px 11px; border-radius: var(--r-pill);
}
.rescard ul { display: grid; gap: 10px; margin-top: 18px; }
.rescard li { display: flex; gap: 9px; font-size: 13.4px; color: var(--text-2); line-height: 1.65; }
.rescard li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); flex: none; margin-top: 8px; }

/* ==============================================================
   跨境生态服务：五层分区 + 生态要素卡
   每一层通过 .eco-layer--X 注入主题色（--eco / --eco-soft），
   卡片 .ecocard 作为该层后代自动继承主题色。
   ============================================================== */
.eco-layers { display: grid; gap: 18px; margin-top: 6px; }
.eco-layer {
  --eco: var(--blue-500); --eco-soft: var(--blue-100);
  position: relative;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--eco);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 6px 22px rgba(11, 37, 69, .06);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.eco-layer > .wrap { min-width: 0; }
.eco-layer:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.eco-layer--source  { --eco: var(--blue-500);  --eco-soft: var(--blue-100); }
.eco-layer--growth  { --eco: var(--green-500); --eco-soft: var(--green-100); }
.eco-layer--fulfil  { --eco: var(--cyan-500);  --eco-soft: #E2F6F8; }
.eco-layer--support { --eco: var(--gold-500);  --eco-soft: var(--gold-100); }
.eco-layer--carrier { --eco: var(--navy-600);  --eco-soft: #E7EEF7; }

/* 交替排版：偶数层图块移到右上角，左右错落更有节奏感（新闻专题式） */
.eco-layer:nth-child(even) { border-left: 1px solid var(--line); border-right: 5px solid var(--eco); }
.eco-layer:nth-child(even) .eco-layer__top { flex-direction: row-reverse; }
.eco-layer:nth-child(even) .eco-layer__cap { left: auto; right: 16px; align-items: flex-end; text-align: right; }

/* 生态全景图：五层架构概览（数据驱动，由 renderEcoMap 渲染） */
.sec-tag--navy { color: var(--navy-700); background: #E7EEF7; }
.ecomap {
  display: grid; gap: 16px; margin-top: 12px;
  position: relative; padding-left: 36px;
}
/* 连续上升脊线：地基层 navy → 顶层 gold，呼应「一层托一层」的递进 */
.ecomap::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: 30px; width: 3px;
  background: linear-gradient(180deg, var(--navy-600) 0%, var(--blue-500) 27%, var(--green-500) 53%, var(--cyan-500) 76%, var(--gold-500) 100%);
  border-radius: 3px;
}
.ecomap__row {
  --eco: var(--navy-600); --eco-soft: #E7EEF7;
  position: relative;
  display: grid; grid-template-columns: 214px 1fr; gap: 22px; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  border-left: 5px solid var(--eco); box-shadow: 0 2px 12px rgba(11, 37, 69, .05);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.ecomap__row:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ecomap__row--source  { --eco: var(--blue-500);  --eco-soft: var(--blue-100); }
.ecomap__row--growth  { --eco: var(--green-500); --eco-soft: var(--green-100); }
.ecomap__row--fulfil  { --eco: var(--cyan-500);  --eco-soft: #E2F6F8; }
.ecomap__row--support { --eco: var(--gold-500);  --eco-soft: var(--gold-100); }

/* 脊线上的层节点 */
.ecomap__node {
  position: absolute; left: -28px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--eco); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eco-soft);
}
.ecomap__rail {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 22px 22px 22px 24px;
  background: linear-gradient(100deg, var(--eco-soft), rgba(255, 255, 255, 0) 78%);
  border-radius: 14px 0 0 14px;
}
.ecomap__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  background: #fff; color: var(--eco); box-shadow: 0 4px 12px var(--eco-soft);
}
.ecomap__ico svg { width: 24px; height: 24px; }
.ecomap__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecomap__en {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--eco);
}
.ecomap__idx {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--eco); border-radius: 6px; padding: 2px 6px;
}
.ecomap__name { font-size: 18px; font-weight: 800; color: var(--navy-900); line-height: 1.2; }
.ecomap__cnt { font-size: 12.5px; color: var(--text-2); }
.ecomap__chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; padding: 20px 24px; }
.ecomap__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--navy-800); background: var(--eco-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  transition: all .2s var(--ease);
}
.ecomap__chip:hover { background: #fff; border-color: var(--eco); color: var(--eco); transform: translateY(-1px); }
.ecomap__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eco); flex: none; }
@media (max-width: 680px) {
  .ecomap { padding-left: 30px; }
  .ecomap__row { grid-template-columns: 1fr; }
  .ecomap__rail { border-radius: 14px 14px 0 0; }
  .ecomap__node { left: -23px; }
}
.eco-layer__bar {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; flex: 1; min-width: 0;
  padding: 0; position: relative;
}
.eco-layer__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  background: #fff; color: var(--eco); box-shadow: 0 4px 14px var(--eco-soft);
}
.eco-layer__ico svg { width: 25px; height: 25px; }
.eco-layer__idx {
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--eco); border-radius: 6px; padding: 2px 6px;
}
.eco-layer__en {
  display: inline-block; font-family: var(--font-num); font-size: 12px; font-weight: 800;
  letter-spacing: .22em; color: var(--eco);
}
.eco-layer__t {
  display: flex; align-items: baseline; gap: 10px; margin-top: 4px;
  font-size: 21px; font-weight: 800; color: var(--navy-900);
}
/* 计数：同样不做实心彩胶囊，改为用层级主题色染色的轻量后缀。
   文字保持与标题基线对齐；分隔线单独上提，落在标题的光学中线上。 */
.eco-layer__count {
  position: relative; font-style: normal; white-space: nowrap;
  font-family: var(--font-num); font-size: 12.8px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--eco); line-height: 1;
  padding-left: 12px; margin-left: 1px;
}
.eco-layer__count::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 4px);
  transform: translateY(-50%); width: 1px; height: 13px;
  background: var(--line-strong);
}
.eco-layer__d { margin: 10px 0 0; font-size: 13.6px; color: var(--text-2); max-width: 560px; text-align: left; line-height: 1.7; flex: 1 1 100%; }
.eco-layer .grid { padding: 4px 30px 30px; gap: 14px; }

/* 顶部一行：左侧/右侧角标图块 + 标题文案；下方 2×2 要素卡 */
.eco-layer__top {
  display: flex; align-items: center; gap: 22px;
  padding: 24px 30px 16px;
}
/* 生态模块配图：应景图缩成角标方块，无渐变花活；仅底部一层极轻暗角承托水印 */
.eco-layer__media {
  position: relative; flex: none; margin: 0;
  width: 240px; height: 162px; border-radius: 14px; overflow: hidden;
  background: var(--eco-soft); box-shadow: 0 6px 18px rgba(11, 37, 69, .12);
}
.eco-layer__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-layer__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 40, .04) 0%, rgba(6, 20, 40, 0) 42%, rgba(6, 20, 40, .46) 100%);
}
/* 图上水印：大号层级序号 + EN 标签，白色半透，让图“说话”而非装饰 */
.eco-layer__cap {
  position: absolute; left: 16px; bottom: 12px; z-index: 2; color: #fff;
  display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.eco-layer__cap-idx {
  font-family: var(--font-num); font-size: 32px; font-weight: 800; line-height: .86; letter-spacing: .01em;
}
.eco-layer__cap-en {
  font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: .26em; opacity: .9;
}
/* 窄屏：图块回到顶部通栏，内容在下方，奇偶层统一 */
@media (max-width: 620px) {
  .eco-layer__top, .eco-layer:nth-child(even) .eco-layer__top { flex-direction: column; }
  .eco-layer__media, .eco-layer:nth-child(even) .eco-layer__media { width: 100%; height: 180px; }
  .eco-layer__cap, .eco-layer:nth-child(even) .eco-layer__cap { left: 16px; right: auto; align-items: flex-start; text-align: left; }
  .eco-layer__bar { padding: 0; }
  .eco-layer .grid { padding: 4px 18px 22px; }
  .eco-layer__t { font-size: 20px; }
}

.ecocard {
  position: relative; overflow: hidden;
  background: var(--eco-soft, var(--blue-100)); background: color-mix(in srgb, var(--eco-soft, #E8F0FE) 58%, #fff);
  border: 1px solid var(--line); border-left: 3px solid var(--eco, var(--blue-500));
  border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column;
  transition: all .24s var(--ease);
}
.ecocard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); background: #fff; border-color: var(--eco-soft, var(--blue-200)); }
.ecocard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ecocard__ico {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 11px; background: #fff; color: var(--eco, var(--blue-500)); box-shadow: 0 3px 10px var(--eco-soft, var(--blue-100));
}
.ecocard__ico svg { width: 22px; height: 22px; }
.ecocard__tag { flex: none; }
.ecocard__t { font-size: 16.4px; font-weight: 800; color: var(--navy-900); margin-top: 2px; }
.ecocard__d { font-size: 12.8px; color: var(--text-2); line-height: 1.6; margin-top: 7px; }
.ecocard__items { list-style: none; display: grid; gap: 7px; margin: 14px 0 0; padding-top: 13px; border-top: 1px dashed var(--line); }
.ecocard__items li { position: relative; padding-left: 16px; font-size: 12.4px; color: var(--text-2); line-height: 1.5; }
.ecocard__items li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco, var(--blue-500));
}

/* 窄屏标题微调（图块在 ≤620 时才回到顶部通栏，见上方 620 规则） */
@media (max-width: 760px) {
  .eco-layer__t { font-size: 20px; }
}

.modal {
  position: fixed; inset: 0; z-index: 250;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 20, 40, .62); backdrop-filter: blur(5px);
}
.modal.is-open { display: flex; }
.modal__box {
  width: 100%; max-width: 500px; background: #fff; border-radius: var(--r-xl);
  padding: 32px; position: relative; box-shadow: var(--sh-lg);
  max-height: 90vh; overflow: auto;
  animation: modalIn .28s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; right: 16px; top: 14px; width: 34px; height: 34px;
  border-radius: 10px; background: var(--bg); color: var(--text-2); font-size: 19px; line-height: 1;
}
.modal__close:hover { background: var(--line); color: var(--text-1); }
.modal .form--light { padding: 0; background: none; border: none; }

/* POD 商品详情弹层（点卡片打开）：左媒体右信息，窄屏堆叠。
   素材原生宽度 190–1000px 不等：展示一律 contain 完整显示、禁止 cover 裁切，
   媒体位限宽避免小图被拉到 880px 发虚（2026-10-06 老板反馈"图片太大发虚不完整"）。 */
.poddetail { max-width: 880px; padding: 0; overflow: hidden; }
.poddetail .prod__media {
  aspect-ratio: auto; border-radius: 0; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  max-width: 420px; margin: 0 auto; width: 100%;
}
.poddetail .prod__img {
  width: auto; max-width: 100%; height: auto; max-height: 500px; object-fit: contain;
  display: block;
}
@media (min-width: 720px) {
  .poddetail { display: grid; grid-template-columns: 46% 1fr; }
  .poddetail .prod__media { min-height: 100%; max-width: none; width: auto; margin: 0; }
}
.poddetail__body { padding: 28px 30px 30px; }
.poddetail__title { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 6px 0 14px; line-height: 1.35; }
.poddetail__spec { margin: 4px 0 14px; display: grid; gap: 8px; }
.poddetail__spec > div { display: grid; grid-template-columns: 52px 1fr; gap: 10px; font-size: 13.5px; }
.poddetail__spec dt { color: var(--text-3); font-weight: 600; }
.poddetail__spec dd { margin: 0; color: var(--text-1); }
.poddetail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.poddetail__note { font-size: 13px; color: var(--text-3); line-height: 1.6; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; }
.poddetail__body .btn--block { margin-top: 4px; }
/* 详情增强（迁移 003）：多图画廊 / 产品详情长文 / 包邮标签 */
.chip--free { background: rgba(16, 185, 129, .12); color: #0b7a56; border: 1px solid rgba(16, 185, 129, .35); font-weight: 600; }
.chip--muted { background: var(--bg-soft); color: var(--text-3); border: 1px dashed var(--line); }
.poddetail__thumbs { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; }
.poddetail__thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--bg-soft); }
.poddetail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poddetail__thumb.is-on { border-color: var(--brand, #2563eb); }
.poddetail__detail { margin: 2px 0 14px; }
.poddetail__detail h4 { font-size: 14px; font-weight: 700; color: var(--text-1); margin: 0 0 8px; }
.poddetail__detail p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
/* POD 尺码表：素材命名含 "-size" 的图不进相册，整幅展示在规格之后 */
.poddetail__size { margin: 2px 0 14px; }
.poddetail__size h4 { font-size: 14px; font-weight: 700; color: var(--text-1); margin: 0 0 8px; }
.poddetail__size img { display: block; width: auto; max-width: min(100%, 640px); height: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line, rgba(15,23,42,.08)); background: #fff; }
.poddetail__size-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
/* POD 生产下单区块（对接 eolink POD Open API）：设计稿 + 测算 + 提交 */
.poddetail__order {
  margin-top: 18px; padding: 18px; border: 1px solid var(--line, rgba(15,23,42,.08));
  border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(37,99,235,.04), rgba(37,99,235,0) 60%);
}
.poddetail__order h4 { font-size: 15px; font-weight: 800; color: var(--text-1); margin: 0 0 4px; }
.poddetail__order-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 0 0 14px; }
.podod__fld { display: block; margin-bottom: 12px; }
.podod__fld > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.podod__fld input[type=text], .podod__fld input[type=number], .podod__fld select, .podod__fld input[type=file] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line, rgba(15,23,42,.14)); border-radius: 10px;
  font-size: 14px; background: #fff; color: var(--text-1); box-sizing: border-box;
}
.podod__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.podod__row .podod__fld { flex: 1; min-width: 90px; margin-bottom: 0; }
.podod__row .btn--sm { flex: 0 0 auto; height: 40px; }
.podod__result { min-height: 22px; margin: 12px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.podod__price { font-size: 18px; font-weight: 800; color: var(--brand, #2563eb); }
.podod__meta { font-size: 12.5px; color: var(--text-3); }
.podod__err { font-size: 12.5px; color: #d92d20; }
.poddetail__order-note { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 12px 0 0; }
.poddetail__order-note b { color: #0b7a56; }

/* 内容区块内的浅色方案（表单落在白底上时） */
.section .notice { margin-bottom: 24px; }

/* ----------------------------------------------
   9.6 海外仓货盘商城
   ---------------------------------------------- */
.mallbar {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: none; margin-bottom: 26px;
}
.mallbar__search { position: relative; margin-bottom: 14px; }
.mallbar__search input {
  width: 100%; height: 48px; padding: 0 150px 0 46px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; font-size: 14.6px; outline: none;
  transition: all .2s var(--ease);
}
.mallbar__search input:focus { border-color: var(--blue-400); background: #fff; box-shadow: 0 0 0 3px rgba(30, 123, 196, .12); }
.mallbar__search > [data-icon] {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--text-4); pointer-events: none;
}
.mallbar__search > [data-icon] > svg { width: 18px; height: 18px; }
.mallbar__count {
  position: absolute; right: 20px; top: 15px;
  font-size: 13px; font-weight: 600; color: var(--blue-500);
}
.mallbar__row { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; }
.mallbar__row + .mallbar__row { border-top: 1px solid var(--line); }
.mallbar__label { flex: none; width: 62px; padding-top: 9px; font-size: 13px; font-weight: 700; color: var(--navy-700); letter-spacing: .01em; }
.mallbar__row .pills { border: none; box-shadow: none; background: transparent; padding: 0; }

/* ----------------------------------------------
   货源模式切换（双货源：海外仓现货 os / 国内直发 dc）
   ---------------------------------------------- */
/* 面板显隐：mall.html 的区块用 data-panel 标记归属 */
body[data-mall-mode="dc"] [data-panel="os"],
body[data-mall-mode="os"] [data-panel="dc"] { display: none; }

/* sticky 吸顶条。关键：.modetabs-wrap 必须是 <main> 的直接子元素——
   如果装进某个 .wrap/.section，其包含块高度只有自身那么高，sticky 无处可粘（同 #siteHeader 之鉴）。
   top: 87px = 常驻导航 75px + 12px 间距。 */
.modetabs-wrap {
  position: sticky; top: 87px; z-index: 60;
  padding: 12px 0 8px;
  /* 渐变收在 72% 处留出柔和过渡；backdrop-filter 让卡片两侧穿出的正文虚化，避免「半截数字」贴着卡片边缘 */
  background: linear-gradient(180deg, var(--bg) 72%, transparent);
  backdrop-filter: blur(9px);
}
.modetabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px; margin: 0 auto; padding: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--sh);
}
/* 第二十轮整体放大一档：它是切换两种货源的唯一入口，需要更显眼
   （窄屏断点里文字已放开换行，故放大不会撑破容器） */
.modetabs__btn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 15px 26px; border-radius: var(--r-pill); text-align: left;
  transition: all .2s var(--ease);
}
.modetabs__btn:hover { background: var(--bg-soft); }
.modetabs__btn.is-active {
  background: linear-gradient(135deg, var(--navy-700), var(--blue-500));
  color: #fff; box-shadow: var(--sh-xs);
}
.modetabs__ico { font-size: 26px; flex: none; }
.modetabs__txt { display: grid; gap: 2px; }
.modetabs__txt b { font-size: 17px; font-weight: 700; }
.modetabs__txt i { font-style: normal; font-size: 13.4px; color: var(--text-3); white-space: nowrap; }
.modetabs__btn.is-active .modetabs__txt i { color: rgba(255, 255, 255, .74); }

/* 国内直发：五步流程竖排，适配深色视觉容器。
   注意 .flow__no 必须显式跨两行——否则 grid 自动放置会把 h4 推到第 2 列、
   把 p 甩回第 1 列（34px 宽），文字被压成每行一个字。 */
.flow--dc { grid-template-columns: 1fr; gap: 10px; }
.flow--dc .flow__step {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13);
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: var(--r);
}
.flow--dc .flow__step:hover { transform: none; box-shadow: none; border-color: rgba(245, 166, 35, .38); }
.flow--dc .flow__no { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; margin-bottom: 0; }
.flow--dc .flow__step h4 { font-size: 14.2px; color: #fff; margin-bottom: 3px; }
.flow--dc .flow__step p { font-size: 12.6px; color: rgba(255, 255, 255, .62); }
.flow--dc .flow__step::before { display: none; }

/* 双货源对比表 */
.cmp { max-width: 980px; margin: 0 auto; }
.cmp__head, .cmp__row {
  display: grid; grid-template-columns: 128px 1fr 1fr; gap: 16px; align-items: center;
  padding: 15px 20px;
}
.cmp__head { padding-bottom: 10px; }
.cmp__row {
  background: #fff; border: 1px solid var(--line); margin-top: -1px;
  position: relative; transition: all .2s var(--ease);
}
.cmp__row:hover { border-color: var(--blue-200); background: var(--blue-50); z-index: 1; }
.cmp__k { font-size: 13.6px; font-weight: 700; color: var(--navy-700); }
.cmp__v { font-size: 13.2px; color: var(--text-2); line-height: 1.65; display: grid; gap: 6px; justify-items: start; }
.cmp__tag {
  font-size: 11.4px; font-weight: 700; color: var(--blue-500);
  background: var(--blue-50); border: 1px solid var(--blue-200);
  padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.cmp__tag--dc { color: #A66A00; background: #FFF7E8; border-color: #F0D9A8; }

/* 商品卡 */
.prod {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .26s var(--ease);
}
.prod:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--blue-200); }

/* 整卡可点：商品名链接用 ::after 铺满整张卡片（stretched link），
   这样点图片区、留白处都能进详情页，不必精确点到标题。
   仅 .prod--link（有详情链接的海外仓现货卡）启用，国内直发卡无详情页故不显示手型。
   卡片内的按钮要抬到覆盖层之上，否则点不到。 */
.prod--link { position: relative; cursor: pointer; }
.prod__name a { color: inherit; }
.prod__name a:hover { color: var(--blue-500); }
.prod__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod--link .btn { position: relative; z-index: 2; }
.prod__media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.prod__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140px 90px at 72% 18%, rgba(255, 255, 255, .55), transparent 70%);
}
.prod__emoji { font-size: 46px; line-height: 1; position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgba(11, 37, 69, .18)); transition: transform .32s var(--ease); }
.prod:hover .prod__emoji { transform: scale(1.14) rotate(-5deg); }
.prod__media--blue { background: linear-gradient(140deg, #E6F2FC, #BBDCF5); }
.prod__media--green { background: linear-gradient(140deg, #E2F8F0, #A9E9D2); }
.prod__media--pink { background: linear-gradient(140deg, #FFEBF2, #FFC8DA); }
.prod__media--navy { background: linear-gradient(140deg, #DFE8F6, #A9C1E4); }
.prod__media--slate { background: linear-gradient(140deg, #E9EEF4, #C3CEDC); }
.prod__media--teal { background: linear-gradient(140deg, #DFF6F9, #A6E4EC); }
.prod__media--gold { background: linear-gradient(140deg, #FFF4E2, #FFDCA8); }
.prod__media--jade { background: linear-gradient(140deg, #E6F8EE, #B6E7CB); }
.prod__media--violet { background: linear-gradient(140deg, #EFECFC, #CFC6F3); }
.prod__media--cyan { background: linear-gradient(140deg, #E3F5FA, #AEE2EF); }
.prod__media--graphite { background: linear-gradient(140deg, #EBEFF3, #C6D0DA); }
.prod__media--amber { background: linear-gradient(140deg, #FFF1DF, #FFD79A); }

.prod__media--img .prod__emoji { display: none; }
.prod__media--img::after { display: none; }

/* ---- POD 商城（pod.html#shop）：复用 .prod 卡骨架，媒体块用品类图标代替实拍图 ---- */
.pod__ico { position: relative; z-index: 1; width: 54px; height: 54px; color: var(--navy-700); opacity: .85; transition: transform .32s var(--ease); }
.pod__ico svg { width: 100%; height: 100%; display: block; }
.prod:hover .pod__ico { transform: scale(1.12) rotate(-4deg); }
.pod__spec { font-size: 12.2px; color: var(--text-3); margin: -4px 0 12px; }
.podchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.podchips + .podchips { margin-top: -12px; }
/* 「中国直发」是履约方式、非具体国家：整颗置顶独占一行 + 放大做立体视觉。
   order：cn(-2) 最前、垫片(-1) 次之、其余国家 0 —— 垫片占一整行（高 0，只贡献行间距），
   最终第一行=中国直发、第二行=全部国家+各海外国家（日后新增国家自动归这行）。 */
.podchips__break { flex-basis: 100%; height: 0; margin: 0; padding: 0; border: 0; order: -1; }
.podchips .podchip--cn {
  order: -2;
  font-size: 14.8px; font-weight: 800; padding: 11px 22px;
  color: #fff; border-color: transparent;
  /* 对角亮渐变：左上浅橙红提亮，与国旗的深红拉开层次（纯深红会吃掉国旗） */
  background: linear-gradient(135deg, #FF8A5C, #EF4136 52%, #C2262C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #8C161F, 0 10px 18px -8px rgba(194, 38, 44, .55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.podchips .podchip--cn:hover { color: #fff; border-color: transparent; transform: translateY(-1px); }
.podchips .podchip--cn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 0 #8C161F, 0 6px 12px -6px rgba(194, 38, 44, .5);
}
.podchips .podchip--cn.is-active {
  background: linear-gradient(135deg, #FF8A5C, #EF4136 52%, #C2262C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #8C161F, 0 10px 18px -8px rgba(194, 38, 44, .55), 0 0 0 3px rgba(194, 38, 44, .18);
}
.podchips .podchip--cn .podchip__flag {
  width: 20px; height: 15px;
  background: #fff; padding: 2px; border-radius: 4px;   /* 白底托片：国旗在红底上永远清晰 */
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .14);
}
/* 「中国直发」胶囊内的小注记（直发全球）：白色半透明小芯片，弱于主文字 */
.podchips .podchip__note {
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .5px;
  color: #fff; background: rgba(255, 255, 255, .2);
  padding: 4px 9px; border-radius: 999px; margin-left: 3px;
  text-shadow: none; flex: none;
}
.podchip {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--text-2);
  font-family: inherit; font-size: 13.2px; font-weight: 600; line-height: 1;
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  transition: all .18s var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.podchip__flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11, 37, 69, .1); flex: none; }
.podchip:hover { border-color: var(--blue-300, #9CC3EC); color: var(--blue-500); }
.podchip.is-active {
  background: linear-gradient(100deg, var(--blue-500), var(--cyan-500));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(30, 100, 190, .45);
}
/* 商品封面图：有 images[0] 时覆盖色块，徽标（仓/等级）仍浮于其上。
   object-fit 用 contain 不用 cover：媒体框是 4:3、商品图基本是 1:1 方图，
   用 cover 会把商品上下裁掉；contain + background:#fff 才能完整露出商品，
   与商品详情页 .pdp__stage / .pdp__thumb 的写法保持一致。
   （2026-10-02 新站已单独改成 contain，此处把老站与本地一并对齐，消掉两站 CSS 差异） */
.prod__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: #fff; }

.prod__wh {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.6px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: var(--navy-700);
}
.prod__whflag {
  width: auto; height: 11px; flex: none;
  border-radius: 2px; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .1);
}
.prod__rank {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  font-size: 11.4px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  color: #fff; background: linear-gradient(135deg, #D9552A, #F5A623);
}
.prod__rank--up { background: linear-gradient(135deg, #0E9E76, #12B886); }
.prod__rank--new { background: linear-gradient(135deg, #1E7BC4, #25C2D6); }
.prod__rank--best { background: linear-gradient(135deg, #B86A12, #F0A93C); }
.prod__rank--eu { background: linear-gradient(135deg, #7B3FE4, #B14BE0); } /* 欧码标识：紫调突出 */

/* RIX 供应链角标（英国区 hurix 货源）：放右上角，与左上角仓标 / 右下角榜单错开。
   .prod__brand 默认是左上角「蜂」角标；RIX 用 --rix 变体挪到右上并换成品牌靛青色，
   出现 RIX 时把榜单角标下移一行，避免两个角标在右上角重叠。 */
.prod__brand--rix {
  left: auto; right: 12px; top: 12px;
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  box-shadow: 0 2px 8px rgba(67, 56, 202, .38);
  letter-spacing: 1px; font-size: 11.5px; height: 24px; line-height: 24px;
  border-radius: 12px; padding: 0 10px;
}
.prod__media--rix .prod__rank { top: 42px; } /* RIX 在右上，榜单角标下移避让 */
.prod__media--rix .prod__brand--rix { z-index: 3; }

.prod__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.prod__name { font-size: 15px; line-height: 1.45; margin-bottom: 9px; min-height: 44px; }
.prod__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.8px; color: var(--text-4); margin-bottom: 11px; }
.prod__sku { font-family: var(--font-num); letter-spacing: .02em; }
.prod__stock { color: var(--green-600); font-weight: 700; }
.prod__price { display: flex; gap: 18px; padding: 11px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.prod__price > div { display: flex; flex-direction: column; gap: 2px; }
.prod__pl { font-size: 11.2px; color: var(--text-4); }
.prod__price b { font-family: var(--font-num); font-size: 19px; font-weight: 800; color: var(--blue-500); letter-spacing: -.01em; }
.prod__retail { color: var(--text-2); font-size: 16px; }
.prod__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.prod__tags .chip { font-size: 11.2px; height: 22px; padding: 0 8px; }
.prod__foot { display: flex; align-items: center; gap: 6px; font-size: 11.6px; color: var(--text-3); margin-bottom: 14px; }
.prod__foot svg { width: 13px; height: 13px; flex: none; color: var(--blue-400); }
.prod__body .btn { margin-top: auto; }

/* 海外仓卡（第十三轮压扁：外层 padding 22→15/16，三层间距 15/14/14→10，字号整体下调一档） */
.whcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px; display: flex; flex-direction: column;
  transition: all .26s var(--ease);
}
.whcard:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--blue-200); }
.whcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.whcard__flag { display: inline-flex; flex: none; }
.whcard__flagimg {
  width: auto; height: 17px; max-width: 28px;
  border-radius: 3px; object-fit: contain; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .12), 0 1px 3px rgba(11, 37, 69, .08);
}
.whcard__name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.whcard__city { font-size: 11.4px; line-height: 1.3; color: var(--text-4); }
.whcard__metrics { display: flex; gap: 18px; padding: 8px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.whcard__metrics b { display: block; font-family: var(--font-num); font-size: 17px; font-weight: 800; color: var(--navy-800); letter-spacing: -.01em; line-height: 1.2; }
.whcard__metrics span { font-size: 10.8px; color: var(--text-4); }
.whcard__note { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; }
.whcard .link-arrow { margin-top: auto; }

/* 榜单 */
/* padding 18：四榜在 1280 视口下每列仅 286px，把卡片内边距让给内容，
   榜单行元信息才能一行放下（详见 .rankrow 注释）。 */
.board { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.board__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.board__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-500); }
.board__ico svg { width: 16px; height: 16px; }
.board__ico--gold { background: var(--gold-100); color: var(--gold-600); }
.board__ico--green { background: var(--green-100); color: var(--green-600); }
.board__t { font-size: 16px; font-weight: 700; }
.board__hint { margin-left: auto; font-size: 11.6px; color: var(--text-4); }
/* 隐式列默认是 auto（= max-content 参与定尺），会被 .rankrow 内 nowrap 名称 + 定宽价格撑开，
   把价格推出卡片外。显式声明 minmax(0,1fr) 锁住列宽后，行内 min-width:0 才能生效、ellipsis 才会出现。 */
.ranklist { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.rankrow {
  width: 100%; text-align: left;
  /* 两行网格：第一行「序号｜名称｜价格」，第二行「元信息」横跨整行。
     元信息含 仓库 + SKU + 库存 三段，实测约 190px；挤在名称列只有 142px 必被截断，
     横跨整行后可用 196px，两段式布局再把「在仓」用 flex:none 钉在右侧。 */
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "no name price" "no meta meta";
  column-gap: 8px; row-gap: 3px; align-items: center;
  padding: 11px 10px; border-radius: var(--r); background: var(--bg-soft);
  border: 1px solid transparent; transition: all .2s var(--ease);
}
.rankrow:hover { background: #fff; border-color: var(--blue-200); transform: translateX(3px); box-shadow: var(--sh-xs); }
.rankrow__no {
  grid-area: no; align-self: center;
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-num); font-size: 12.6px; font-weight: 800; color: #fff; background: var(--text-4);
}
.rankrow__no--top { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); }
.rankrow__name { grid-area: name; min-width: 0; display: block; font-size: 13.6px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankrow__price { grid-area: price; align-self: center; font-family: var(--font-num); font-size: 15px; font-weight: 800; color: var(--blue-500); flex: none; white-space: nowrap; }
.rankrow__meta {
  grid-area: meta; min-width: 0; display: flex; align-items: baseline; gap: 6px;
  font-size: 11.4px; color: var(--text-4);
}
.rankrow__metaL { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「在仓 N」永不参与收缩，保证库存数字任何列宽下都完整可读 */
.rankrow__metaR { flex: none; white-space: nowrap; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 空状态 */
.empty {
  grid-column: 1 / -1; text-align: center; padding: 52px 24px;
  background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty__ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); color: var(--text-4); }
.empty__ico svg { width: 26px; height: 26px; }
.empty h3 { font-size: 17px; margin-bottom: 8px; }
.empty p { font-size: 13.6px; color: var(--text-3); margin-bottom: 18px; }

/* ----------------------------------------------
   9.7 已跑通项目
   ---------------------------------------------- */
.proj {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column;
  transition: all .26s var(--ease); position: relative; overflow: hidden;
}
.proj::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); }
.proj:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--blue-200); }
.proj__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.proj__market { font-size: 12.4px; color: var(--text-3); font-weight: 600; }
.proj__name { font-size: 17px; line-height: 1.45; margin-bottom: 9px; }
.proj__meta { font-size: 12.4px; color: var(--text-4); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.proj__meta i { font-style: normal; opacity: .5; }
.proj__result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; background: var(--blue-50); border-radius: var(--r); margin-bottom: 15px; }
.proj__result b { display: block; font-family: var(--font-num); font-size: 19px; font-weight: 800; color: var(--navy-700); letter-spacing: -.01em; }
.proj__result span { font-size: 11.4px; color: var(--text-3); }
.proj__wh { display: flex; align-items: center; gap: 7px; font-size: 12.6px; color: var(--text-2); margin-bottom: 14px; }
.proj__wh svg { width: 15px; height: 15px; flex: none; color: var(--blue-400); }
.proj__insight { background: var(--bg-soft); border-left: 3px solid var(--blue-400); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 13px 15px; margin-top: auto; }
.proj__insight b { display: block; font-size: 11.6px; color: var(--blue-500); letter-spacing: .08em; margin-bottom: 6px; }
.proj__insight p { font-size: 13.2px; color: var(--text-2); line-height: 1.75; }

/* 跑通标准 */
.runstd { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; position: relative; overflow: hidden; transition: all .26s var(--ease); }
.runstd:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--blue-200); }
.runstd__no { position: absolute; right: 18px; top: 10px; font-family: var(--font-num); font-size: 46px; font-weight: 800; color: var(--blue-100); line-height: 1; }
.runstd h3 { font-size: 17.4px; margin: 14px 0 9px; }

/* ----------------------------------------------
   10. 响应式
   ---------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero__panel { max-width: 560px; }
  .hero-float { display: none; }
  .platwall { order: 0; } /* 窄屏单列恢复 DOM 顺序：标题/看板在前，LOGO 墙排最后 */
  .platwall__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__title { font-size: 42px; }
  /* 断点里的列同样用 minmax(0,1fr)，否则窄屏下会被内容 min-content 撑出横向滚动 */
  .gxcat, .gx4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow .flow__step::before { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(2) { border-right: none; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .rcard { grid-template-columns: minmax(0, 1fr); }
  .corridor { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .modetabs { max-width: none; }
  .cmp__head, .cmp__row { grid-template-columns: 108px 1fr 1fr; gap: 10px; padding: 13px 14px; }
  .cmp__head { grid-template-columns: 108px 1fr 1fr; }
  .gxnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { grid-template-columns: minmax(0, 1fr); padding: 38px 28px; }
  .mallbar__row { flex-direction: column; gap: 6px; }
  .mallbar__label { padding-top: 0; }
  .proj__result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mallbar__search input { padding-right: 20px; }
  .mallbar__count { position: static; display: block; margin-top: 10px; }
}
@media (max-width: 640px) {
  .hero { padding: 52px 0 92px; }
  .hero__title { font-size: 32px; }
  .hero__lead { font-size: 15px; }
  .hero__stats { gap: 24px; }
  .hero__stat b { font-size: 26px; }
  .platwall { padding: 13px 14px 14px; }
  .platwall__head { margin-bottom: 10px; }
  .platwall__note { font-size: 11.6px; }
  .platwall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  /* 资讯焦点卡窄屏堆叠为单列，封面改为横幅 */
  .news__lead { grid-template-columns: 1fr; }
  .news__cover { height: 132px; }
  .news__leadt { font-size: 17.5px; }
  .news__row { gap: 11px; padding: 12px 14px; }
  .plogo { height: 44px; }
  .plogo--lockup .plogo__app { height: 28px; }
  .plogo--lockup .plogo__word { height: 12px; }
  .phero__title { font-size: 28px; }
  .gxcat, .gx4 { grid-template-columns: minmax(0, 1fr); }
  .gxnav { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats__item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .stats__item:last-child { border-bottom: none; }
  .rcard__blocks { grid-template-columns: minmax(0, 1fr); }
  .dlist__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .field--2 { grid-template-columns: minmax(0, 1fr); }
  .cta h2 { font-size: 24px; }
  .mallbar { padding: 16px; }
  /* 窄屏筛选标签收一档：保证一行放得下、换行不挤 */
  .pills--tag { gap: 6px; }
  .pills--tag .pill { height: 31px; padding: 0 10px; gap: 6px; font-size: 13px; }
  .pill__flag { height: 12.5px; }
  .mallbar__row { gap: 4px; padding: 7px 0; }
  .proj__result { grid-template-columns: minmax(0, 1fr); }
  .prod__name { min-height: auto; }
  .prod__price { gap: 14px; }
  .board { padding: 16px; }
  /* 货源切换：窄屏纵向堆叠，副标题换成行内 */
  .modetabs { grid-template-columns: minmax(0, 1fr); gap: 6px; border-radius: var(--r-lg); }
  .modetabs__btn { border-radius: var(--r); justify-content: flex-start; }
  .modetabs__txt i { white-space: normal; }
  .modetabs-wrap { top: 79px; }
  /* 对比表窄屏三段堆叠 */
  .cmp__head { grid-template-columns: minmax(0, 1fr); padding-bottom: 4px; }
  .cmp__head .cmp__k { display: none; }
  .cmp__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cmp__k { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--r); }
}

/* ==========================================================================
   全球开店 · 模式卡（精简）+ 平台矩阵（紧凑导航表）
   参考 chwang.com 的平台导航版式：一行一组、左标签右格子，一屏扫完 16 个平台。
   ========================================================================== */

/* ---- 模式卡：原来「适合谁/典型平台/关键卡点/我们的服务」四行竖排，
        现在压成 2×2 迷你格，卡高约降四分之一 ---- */
.mcard { padding: 21px; }
.mcard .card__ico { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 11px; }
.mcard .card__ico svg { width: 20px; height: 20px; }
.mcard .card__num { font-size: 30px; right: 15px; top: 10px; }
.mcard .card__title { font-size: 16.6px; margin-bottom: 6px; }
.mcard .card__desc { font-size: 13.4px; line-height: 1.62; margin-bottom: 12px; }
.mcard__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 15px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.mini { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini__k { font-size: 11.2px; line-height: 1.5; color: var(--text-4); letter-spacing: .04em; }
.mini__v {
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 平台矩阵：分组胶囊 + 斑马纹行（左分组标签 + 右平台格） ---- */
.pmatrix {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 14px 12px; box-shadow: var(--sh-xs);
}
.pmatrix__tabs { padding: 0 8px 13px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.pmatrix__body { display: grid; }
.pmatrix__row {
  display: grid; grid-template-columns: 126px minmax(0, 1fr);
  gap: 6px 18px; align-items: start;
  padding: 11px 12px; border-radius: var(--r);
}
.pmatrix__row:nth-child(odd) { background: var(--bg-soft); }
.pmatrix__row[hidden] { display: none; }
.pmatrix__label { display: flex; flex-direction: column; gap: 1px; padding-top: 7px; min-width: 0; }
.pmatrix__label b { font-size: 14.2px; font-weight: 700; color: var(--text-1); line-height: 1.4; }
.pmatrix__label span { font-size: 11.6px; color: var(--text-4); line-height: 1.4; }
.pmatrix__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pmatrix__tip { margin-top: 10px; padding: 10px 8px 0; border-top: 1px dashed var(--line); font-size: 12.4px; color: var(--text-4); }

/* 平台格：LOGO 芯片 + 名称 + 覆盖市场，整格可点 */
.pcell {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 9px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pcell:hover { border-color: var(--blue-200); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.pcell__logo {
  flex: none; width: 28px; height: 28px; border-radius: 8px; padding: 3px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.pcell__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pcell__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pcell__txt b {
  font-size: 12.4px; font-weight: 700; color: var(--text-1); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcell__txt i {
  font-size: 11px; font-style: normal; color: var(--text-4); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1080px) {
  /* 窄屏：左侧标签改成组标题，格子铺满整行 */
  .pmatrix__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pmatrix__label { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  .pmatrix__cells { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}
@media (max-width: 720px) {
  .pmatrix { padding: 12px 12px 10px; }
  .pmatrix__tabs { padding: 0 4px 11px; }
  .pmatrix__row { padding: 10px; }
  .pmatrix__cells { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: 7px; }
  .pcell { padding: 7px 9px; gap: 8px; }
  .pcell__logo { width: 27px; height: 27px; border-radius: 7px; }
  .mcard__grid { gap: 9px 13px; }
}

/* ======================================================================
   好物出海 · 商城 / 供应链 / 产业带
   数据全部来自 GX.guipinProducts / guipinSuppliers / guipinBelts / guipinCats，
   由后台「好物出海」分组维护。样式以「桂花金 + 深海蓝」呼应广西好物主题。
   ====================================================================== */

/* ---- 搜索框 ---- */
.gpsearch { flex: 0 0 300px; max-width: 100%; }
.gpsearch input {
  width: 100%; padding: 11px 16px; font-size: 14px; color: var(--text-1);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); outline: none; transition: border-color .2s, box-shadow .2s;
}
.gpsearch input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(245, 166, 35, .16); }

/* ---- 筛选胶囊 ---- */
.gpfilter { display: grid; gap: 12px; margin-top: 24px; }
.gpchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gpchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); cursor: pointer;
  transition: all .18s ease;
}
.gpchip i { font-style: normal; font-size: 14px; }
.gpchip:hover { border-color: var(--gold-500); color: var(--gold-700); transform: translateY(-1px); }
.gpchip.is-active {
  color: #fff; background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  border-color: transparent; box-shadow: 0 6px 16px rgba(18, 58, 107, .24);
}
.gpchips--belt .gpchip { font-size: 12.5px; padding: 7px 13px; color: var(--text-3); }
.gpchips--belt .gpchip.is-active { color: #fff; }

.gpmeta { margin: 18px 0 16px; font-size: 13px; color: var(--text-3); }
.gpmeta b { color: var(--gold-700); font-size: 15px; }

/* ---- 商品卡 ---- */
.gpprod {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-xs);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gpprod:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--gold-400); }
.gpprod__media {
  position: relative; height: 116px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
}
.gpprod__ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
.gpprod__cat {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--navy-900);
  background: linear-gradient(100deg, var(--gold-400), var(--gold-500));
  border-radius: var(--r-pill);
}
.gpprod__body { padding: 13px 14px 14px; display: grid; gap: 8px; }
.gpprod__t {
  font-size: 14.5px; font-weight: 700; color: var(--text-1); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}
.gpprod__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--text-3); }
.gpprod__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gpprod__price b { font-size: 19px; font-weight: 800; color: #D9534F; letter-spacing: -.01em; }
.gpprod__price i { font-style: normal; font-size: 11.5px; color: var(--text-4); }
.gpprod__rows { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; font-size: 11.5px; color: var(--text-2); }
.gpprod__rows span { padding: 5px 8px; background: var(--bg-soft); border-radius: var(--r-xs); }
.gpprod__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.gpprod__tag {
  padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--green-600);
  background: var(--green-100); border-radius: var(--r-xs);
}
.gpprod__sup {
  padding-top: 8px; font-size: 11.5px; color: var(--text-3);
  border-top: 1px dashed var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 分页 / 空态 ---- */
.gppager { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }
.gppage {
  min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; font-weight: 700;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer; transition: all .16s ease;
}
.gppage:hover { border-color: var(--gold-500); color: var(--gold-700); }
.gppage.is-active {
  color: #fff; background: linear-gradient(135deg, var(--navy-700), var(--navy-600)); border-color: transparent;
}
.gpempty { padding: 46px 20px; text-align: center; font-size: 14px; color: var(--text-3); }

/* ---- 产业带卡（原硬编码 8 张，改为数据驱动） ---- */
.gpbelt {
  display: block; padding: 20px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); transition: all .22s ease;
}
.gpbelt:hover { background: rgba(255,255,255,.1); border-color: rgba(255,191,87,.5); transform: translateY(-3px); }
.gpbelt__city {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold-400);
  background: rgba(245,166,35,.14); border: 1px solid rgba(245,166,35,.3); border-radius: var(--r-pill);
}
.gpbelt__t { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.gpbelt__d { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.62); }
.gpbelt__foot {
  display: flex; gap: 14px; padding-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.5);
  border-top: 1px dashed rgba(255,255,255,.14);
}

/* ---- 供应商卡 ---- */
.gpsup {
  display: block; padding: 20px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-xs); transition: all .22s ease;
}
.gpsup:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--gold-400); }
.gpsup__head { display: flex; gap: 12px; align-items: center; margin-bottom: 11px; }
.gpsup__ico {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  border-radius: var(--r-sm);
}
.gpsup__t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-1); line-height: 1.4; }
.gpsup__sub { font-size: 11.5px; color: var(--text-3); }
.gpsup__d {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px;
}
.gpsup__rows { display: grid; gap: 5px; margin-bottom: 10px; font-size: 11.5px; color: var(--text-2); }
.gpsup__rows span { display: block; padding: 5px 8px; background: var(--bg-soft); border-radius: var(--r-xs); }
.gpsup__certs { display: flex; flex-wrap: wrap; gap: 5px; }
.gpsup__cert {
  padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--navy-700);
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-xs);
}

/* ---- 商品详情弹层 ---- */
.gpdetail { max-width: 620px; }
.gpdetail__media {
  position: relative; height: 168px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
}
.gpdetail__ico { font-size: 58px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.gpdetail__cat {
  position: absolute; left: 16px; top: 16px; padding: 5px 13px;
  font-size: 12px; font-weight: 700; color: var(--navy-900);
  background: linear-gradient(100deg, var(--gold-400), var(--gold-500)); border-radius: var(--r-pill);
}
.gpdetail__body { padding: 20px 22px 24px; display: grid; gap: 14px; }
.gpdetail__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-1); line-height: 1.4; }
.gpdetail__price {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
  padding: 14px; background: var(--bg-soft); border-radius: var(--r-sm);
}
.gpdetail__price > div { display: grid; gap: 3px; }
.gpdetail__price span { font-size: 11.5px; color: var(--text-3); }
.gpdetail__price b { font-size: 22px; font-weight: 800; color: #D9534F; }
.gpdetail__price b.prod__retail { color: var(--navy-700); }
.gpdetail__spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
.gpdetail__spec > div { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--r-xs); }
.gpdetail__spec dt { font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }
.gpdetail__spec dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-1); }
.gpdetail__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gpdetail__label { font-size: 12px; font-weight: 700; color: var(--text-3); margin-right: 2px; }
.gpdetail__d { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--text-2); }
.gpdetail__sup {
  display: inline-block; padding: 10px 14px; font-size: 13px; font-weight: 700;
  color: var(--navy-700); background: var(--blue-50); border-radius: var(--r-sm); text-decoration: none;
}
.gpdetail__sup:hover { background: var(--blue-100); }

@media (max-width: 900px) {
  .gpsearch { flex: 1 1 100%; }
  .gpdetail__price { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 供应商主页（guipin-supplier.html） ---- */
.suphero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
  margin-top: 20px; padding: 26px;
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(245, 166, 35, .16), transparent 62%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700));
  border-radius: var(--r-lg); color: #fff;
}
.suphero__ico {
  width: 74px; height: 74px; display: grid; place-items: center;
  font-size: 32px; font-weight: 800; color: var(--navy-900);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: var(--r); box-shadow: var(--sh-gold);
}
.suphero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.suphero__tag {
  padding: 4px 11px; font-size: 11.5px; font-weight: 700; color: var(--gold-400);
  background: rgba(245, 166, 35, .14); border: 1px solid rgba(245, 166, 35, .3);
  border-radius: var(--r-pill); text-decoration: none;
}
.suphero__tag--link { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.suphero__tag--link:hover { background: rgba(255,255,255,.22); }
.suphero__title { margin: 0 0 7px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.suphero__sub { margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,.68); }
.suphero__intro { margin: 0; font-size: 13.5px; line-height: 1.85; color: rgba(255,255,255,.8); max-width: 640px; }
.suphero__cta { display: grid; gap: 10px; justify-items: stretch; }

.supspec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 20px;
}
.supspec > div {
  padding: 15px 17px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-xs);
}
.supspec dt { margin-bottom: 5px; font-size: 11.5px; color: var(--text-3); }
.supspec dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.6; }
.supspec__certs { grid-column: 1 / -1; }
.supspec__certs dd { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.supspec__certs dd .chip { font-size: 11.5px; font-weight: 600; }

@media (max-width: 900px) {
  .suphero { grid-template-columns: auto minmax(0, 1fr); }
  .suphero__cta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suphero__title { font-size: 21px; }
}

/* ==========================================================================
   东盟出海网 · 国别分站专属样式（countries / country / outbound / inbound / corridors）
   设计令牌沿用 main.css：--navy-800 --blue-500 --gold-500 --jade-500 --line --text-2/4 等
   ========================================================================== */

/* ---------- 分站总览：国别卡 ---------- */
.ccard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px;
  transition: all .26s var(--ease); position: relative; overflow: hidden;
}
.ccard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--blue-500), var(--cyan-500));
}
.ccard:hover { box-shadow: var(--sh); border-color: var(--blue-200); transform: translateY(-4px); }
.ccard__top { display: flex; align-items: center; gap: 12px; }
.ccard__flag {
  width: 40px; height: 27px; border-radius: 5px; object-fit: cover; flex: none;
  box-shadow: 0 1px 4px rgba(11, 37, 69, .18); border: 1px solid rgba(11, 37, 69, .08);
}
.ccard__id { flex: 1; min-width: 0; }
.ccard__id h3 { font-size: 17.5px; color: var(--navy-800); }
.ccard__id span { display: block; font-size: 11.8px; color: var(--text-4); letter-spacing: .02em; margin-top: 2px; }
.ccard__tier {
  flex: none; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  color: #fff; background: linear-gradient(120deg, #5B6B84, #7A8CA3);
}
.ccard__tier--chief { background: linear-gradient(120deg, #E8951B, #F5A623); }
.ccard__tier--key   { background: linear-gradient(120deg, #123A6B, #1E7BC4); }
.ccard__tier--growth { background: linear-gradient(120deg, #0B7A5E, #12B886); }
.ccard__tier--watch  { background: linear-gradient(120deg, #5B6B84, #8494A8); }
.ccard__tag { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.ccard__metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
  padding: 13px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.ccard__metric b { display: block; font-family: var(--font-num); font-size: 16.5px; color: var(--navy-800); letter-spacing: -.01em; }
.ccard__metric span { font-size: 11.4px; color: var(--text-4); }
.ccard__foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.4px; color: var(--text-4); }
.ccard__foot .link-arrow { font-size: 12.8px; }

/* 11 国主题渐变（卡左侧条 + 分站头图带） */
.ccard--vn::before, .chero.ccard--vn { background-image: linear-gradient(150deg, #8E1B12, #DA251D); }
.ccard--th::before, .chero.ccard--th { background-image: linear-gradient(150deg, #123F7A, #E0442E); }
.ccard--my::before, .chero.ccard--my { background-image: linear-gradient(150deg, #0B2545, #F5A623); }
.ccard--id::before, .chero.ccard--id { background-image: linear-gradient(150deg, #7A0C0C, #E23A2E); }
.ccard--ph::before, .chero.ccard--ph { background-image: linear-gradient(150deg, #00307A, #1E7BC4); }
.ccard--sg::before, .chero.ccard--sg { background-image: linear-gradient(150deg, #8E1B12, #F05A5A); }
.ccard--kh::before, .chero.ccard--kh { background-image: linear-gradient(150deg, #032EA1, #25C2D6); }
.ccard--la::before, .chero.ccard--la { background-image: linear-gradient(150deg, #8E1B12, #1E7BC4); }
.ccard--mm::before, .chero.ccard--mm { background-image: linear-gradient(150deg, #8A7300, #12B886); }
.ccard--bn::before, .chero.ccard--bn { background-image: linear-gradient(150deg, #6B5B00, #F7E000); }
.ccard--tl::before, .chero.ccard--tl { background-image: linear-gradient(150deg, #8E0E0E, #FFC72C); }

/* ---------- 分站详情：头图带 ---------- */
.chero { padding: 54px 0 46px; color: #fff; position: relative; overflow: hidden; }
.chero::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.chero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 34px; align-items: center; position: relative; z-index: 1; }
.chero__flag {
  width: 76px; height: 51px; border-radius: 8px; object-fit: cover; margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .35);
}
.chero__badges { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chero__badges .ccard__tier { background: rgba(255, 255, 255, .2); }
.chero__en { font-size: 12.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .75); text-transform: uppercase; }
.chero__name { font-size: 34px; font-weight: 800; letter-spacing: .01em; }
.chero__tag { font-size: 14.6px; color: rgba(255, 255, 255, .82); line-height: 1.75; margin-top: 12px; max-width: 640px; }
.chero__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 12.8px; color: rgba(255, 255, 255, .68); }
.chero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.chero__metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg); padding: 20px; backdrop-filter: blur(4px);
}
.chero__metric { text-align: center; }
.chero__metric b { display: block; font-family: var(--font-num); font-size: 21px; color: #fff; }
.chero__metric span { font-size: 11.6px; color: rgba(255, 255, 255, .72); }

/* ---------- 分站详情：经营手册六大模块 ---------- */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cblock {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px;
  transition: all .26s var(--ease);
}
.cblock:hover { box-shadow: var(--sh); }
.cblock__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cblock__ico { color: var(--blue-500); display: inline-flex; }
.cblock__head h3 { font-size: 15.5px; color: var(--navy-800); }
.cblock p { font-size: 13.2px; color: var(--text-2); line-height: 1.7; }
.cblock--gx { background: linear-gradient(120deg, #FFF9EE, #FFFDF8); border-color: #F3DFB8; }
.cblock--gx .cblock__ico, .cblock--gx .cblock__head h3 { color: var(--gold-600); }

/* ---------- 分站详情：平台 / 品类 / 好物 / 服务 / 切换 ---------- */
.cplats { display: flex; flex-wrap: wrap; gap: 8px; }
.ccats { font-size: 14px; color: var(--text-2); line-height: 1.8; }
.inlist { display: flex; flex-wrap: wrap; gap: 8px; }
.cswitch { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 走出去 / 引进来 / 互联互通 ---------- */
.svc__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.svc .card__desc { min-height: 44px; }
.incat__items { font-size: 13.2px; color: var(--text-2); line-height: 1.7; }
.incat__note {
  margin-top: 12px; font-size: 12.2px; color: var(--gold-600); font-weight: 600;
  padding-top: 11px; border-top: 1px dashed var(--line);
}
.cornode__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

/* 双向贸易总览（走出去 / 引进来 并卡） */
.dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dual__card {
  border-radius: var(--r-lg); padding: 30px 28px; color: #fff; position: relative; overflow: hidden;
  transition: all .26s var(--ease); display: block;
}
.dual__card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.dual__card--out { background: linear-gradient(140deg, #0B2545, #1E7BC4); }
.dual__card--in { background: linear-gradient(140deg, #0B5A42, #12B886); }
.dual__card::after {
  content: ""; position: absolute; right: -46px; bottom: -56px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.dual__card h3 { font-size: 22px; }
.dual__card p { font-size: 13.6px; color: rgba(255, 255, 255, .78); line-height: 1.75; margin-top: 12px; }
.dual__card .chip { margin: 14px 6px 0 0; background: rgba(255, 255, 255, .16); color: #fff; border: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .chero__grid { grid-template-columns: minmax(0, 1fr); }
  .chero__metrics { max-width: 520px; }
}
@media (max-width: 860px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .dual { grid-template-columns: minmax(0, 1fr); }
  .chero__name { font-size: 27px; }
}

/* ---------- 国别分站：商品展示区 / 大众进口专区 ---------- */
.section--import { background: linear-gradient(180deg, #FFFDF8, var(--gold-100)); border-top: 1px solid #F6E6C8; border-bottom: 1px solid #F6E6C8; }
.cshow__empty { text-align: center; padding: 38px 20px; background: #fff; border: 1px dashed #E7E3DA; border-radius: 16px; }
.cshow__empty .cshow__ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); margin-bottom: 10px; }
.cshow__empty .cshow__ico svg { width: 22px; height: 22px; }
.cshow__empty p { color: #6b6b6b; margin: 0 0 14px; }
.cshow__empty .btn { margin: 0 auto; }

/* 进口精选卡（impcard）：金色进口货架风格 */
.impcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #F0E7D6; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.impcard:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(226, 138, 30, .18); }
.impcard__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(140deg, var(--gold-100), #FFFBF3); display: flex; align-items: center; justify-content: center; }
.impcard__img { width: 100%; height: 100%; object-fit: cover; }
.impcard__ph { color: var(--gold-600); }
.impcard__ph svg { width: 40px; height: 40px; }
.impcard__flag { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.18); background: #fff; }
.impcard__flag img { width: 100%; height: 100%; object-fit: cover; }
.impcard__body { padding: 13px 14px 16px; }
.impcard__name { font-size: 15px; font-weight: 700; color: #1c2430; line-height: 1.4; margin: 0 0 6px; }
.impcard__price { color: var(--gold-700); font-weight: 800; font-size: 16px; }
.impcard__note { font-size: 12.5px; color: #7a7a7a; line-height: 1.6; margin: 6px 0 0; }

/* ---------- 引进来：多国展品展区 ---------- */
.exhibit__bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 30px; }
.exhibit__bar .chip { cursor: pointer; }