:root {
  --navy: #0b1220;
  --navy-soft: #131c2e;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f6f8fc;
  --brand: #1d4ed8;
  --brand-2: #0ea5e9;
  --sale: #dc2626;
  --ok: #059669;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
}

* { box-sizing: border-box; }

/* HTML 的 hidden 属性只靠 UA 样式表的 display:none 生效，
   会被下面 .drawer{display:flex} 这类作者规则盖掉（抽屉/遮罩就永远显示）。
   统一兜一条，保证 hidden 说了算。 */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { width: min(1370px, 100%); max-width: none; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
/* Shop Your Teams 跑马灯行固定宽度（1120px 居中），不参与全宽通边 */
.team-widget-inner { width: min(1140px, 100% - 40px); margin: 0 auto; padding-left: 0; padding-right: 0; }

/* ---------------- header ---------------- */
/* ---------------- 顶部订单查询细栏（logo 行上方，高度贴合按钮） ---------------- */
/* 顶部细栏：灰色底，Track Order 按钮靠左上角（白色、带边框）
   2026-10-11 用户要求「这一栏高度调高一点」：栏高 34px → 46px，按钮同步 20px → 26px */
.topbar { background: #9aa0a6; border-bottom: 1px solid #878d93; }
.topbar-inner { display: flex; justify-content: flex-start; align-items: center; padding: 5px 20px; min-height: 36px; }
.topbar-inner .hbtn {
  height: 26px; min-width: 124px; justify-content: center;
  background: #fff; border-color: #c9ccd1;
  font-size: 12px; gap: 5px; padding: 0 16px;
}
.topbar-inner .hbtn svg { width: 13px; height: 13px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* header 行高 74px → 88px（2026-10-11 用户要求「这一栏高度调高一点」）
   注意：改这个高度必须同步 .catbar-wrap 的 sticky top（下面）与 .locale-pop 的 top */
.header-inner { display: flex; align-items: center; gap: 22px; height: 88px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* logo 是「球员 + MXQ + 球徽」的横版组合标：按高度自适应宽度，不能按方块拉伸
   2026-10-11 用户要求「logo 大一点」：桌面 56 → 68px（平板 62 / 小屏 56，见媒体查询） */
.brand img { height: 68px; width: auto; display: block; }
/* 商品分类导航栏：独立一行，位于 logo 导航下方（横向可滚动，两侧渐隐提示还有更多分类） */
.catbar-wrap {
  position: sticky;
  top: 88px; /* = .header-inner 高度；header 变高必须同步 */
  z-index: 39;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.catbar-inner { position: relative; display: flex; min-width: 0; }
/* Fanatics 布局：分类导航行与内容区同宽（上限 1290px），Shop Your Teams 跑马灯行保持 1220px 居中（上长下短） */
.catbar-wrap .catbar-inner { width: min(1370px, 100%); max-width: none; margin: 0 auto; padding-left: 10px; padding-right: 10px; }
.catbar-inner::before,
.catbar-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  z-index: 2;
}
.catbar-inner::before { left: 0; background: linear-gradient(90deg, #fff 12%, rgba(255, 255, 255, 0)); }
.catbar-inner::after { right: 0; background: linear-gradient(270deg, #fff 12%, rgba(255, 255, 255, 0)); }
.catbar-wrap.can-left .catbar-inner::before { opacity: 1; }
.catbar-wrap.can-right .catbar-inner::after { opacity: 1; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 0; justify-content: space-between; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  padding: 9px 5px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
/* Fanatics 同款：悬停变红色斜切色块 + 白字，移开恢复 */
.nav button:hover { background: #cf2519; color: #fff; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); border-radius: 0; }
/* Fanatics 无黑胶囊：当前项=深色加粗纯文字 */
.nav button.active { background: transparent; color: #111; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
/* AliExpress 同款搜索框：白底黑边胶囊，占满 logo 与功能按钮之间的中间宽度；
   右侧依次是以图搜款扫描图标和黑色圆形搜索按钮（白色放大镜） */
.search {
  flex: 1;
  min-width: 0;
  max-width: 630px; /* 搜索框长度 800→730→630（两次共缩短 170px） */
  height: 42px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #111;
  border-radius: 999px;
  padding: 0 4px 0 18px;
}
.search:focus-within { border-color: #000; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}
.search input::placeholder { color: #b0b0b0; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-cam {
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f1f1f;
}
.search-cam:hover { background: #f1f1f1; }
.search-go {
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #181818;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-go:hover { background: #000; }
/* 购物车按钮（AliExpress 同款）：黑色购物车图标 + 右上黑色数量胶囊 + 下方 Cart 文字 */
.cart-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 2px;
  border-radius: 8px;
}
.cart-btn:hover { background: #f1f4f9; }
.cart-icon-wrap { position: relative; display: inline-flex; line-height: 0; }
.cart-count {
  position: absolute;
  top: -9px;
  right: -16px;
  min-width: 23px;
  height: 15px;
  padding: 0 5px;
  background: #000;
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.cart-label { font-size: 12px; font-weight: 500; line-height: 1.1; }

/* ---------------- hero ---------------- */
/* 首页动态海报容器：只负责圆角、裁切与外边距，视觉全部来自里面的视频 */
.hero {
  margin: 22px 0 8px;
  border-radius: 24px;
  background: #0b1220;
  overflow: hidden;
  position: relative;
}

/* ---------------- 顶部球队跑马灯（复刻 club-marquee） ---------------- */
/* 白底跑马灯，队徽横向无缝滚动；悬停暂停、单个放大。 */
.club-marquee {
  --cm-h: 44px;
  margin: 0 0 8px;
  background: #ffffff;
  border-bottom: 1px solid var(--line, #e7ebf2);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.club-marquee__track {
  display: flex;
  width: max-content;
  animation: club-marquee-run 70s linear infinite;
}
.club-marquee:hover .club-marquee__track { animation-play-state: paused; }
.club-marquee__group { display: flex; align-items: center; }
.club-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
}
.club-marquee__item img {
  height: var(--cm-h);
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.10));
  transition: transform 0.25s ease, filter 0.25s ease;
  transform-origin: center;
}
.club-marquee__item:hover img {
  transform: scale(1.14);
  filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.16));
}
.club-marquee__item:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; border-radius: 8px; }
@keyframes club-marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-16.6667%); }
}
@media (max-width: 749px) {
  .club-marquee { --cm-h: 34px; }
  .club-marquee__item { padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .club-marquee__track { animation: none; }
  .club-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------- toolbar ---------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0 14px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
.chip:hover { border-color: #c7d2e4; color: var(--ink); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.count-note { font-size: 12.5px; color: var(--muted); }

/* ---------------- category navigation (分类图标) ---------------- */
.cat-nav { margin: 4px 0 18px; }
.cat-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crumb-back {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; color: var(--brand); cursor: pointer;
}
.crumb-back:hover { border-color: var(--brand); }
.crumb-path { font-size: 13px; color: var(--muted); }
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px;
}
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 14px 8px; cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.cat-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.cat-card.active { border-color: var(--brand); background: #f5f8ff; }
.cat-icon { width: 44px; height: 44px; object-fit: contain; }
.cat-icon-empty { display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: #eef1f6; }
.cat-name { font-size: 12px; color: var(--ink); text-align: center; line-height: 1.3; }

/* ---------------- product grid ---------------- */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-bottom: 24px; }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { margin: 14px 0 6px; border-radius: 16px; }
  .search input { width: 130px; }
  .brand img { height: 62px; }
}
/* ≤520px：App 端常规两列商品卡（单列信息密度太低，改为双列紧凑卡） */
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------------- 商品网格页码条 ---------------- */
.grid-pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; padding: 8px 0 48px;
}
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--text, #17233b);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pager-btn:hover:not(:disabled) { border-color: #16233f; }
.pager-btn.active { background: #16233f; border-color: #16233f; color: #fff; }
.pager-btn:disabled { opacity: .38; cursor: default; }
.pager-nav { font-size: 18px; line-height: 1; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.grid-pager-note { font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.grid-pager-single { justify-content: center; }

/* ---------------- 首页动态海报（视频） ---------------- */
.hero-video video {
  display: block; width: 100%; height: 380px;
  object-fit: cover; border-radius: inherit;
}
@media (max-width: 820px) { .hero-video video { height: 270px; } }

/* ---------------- 尺寸表（SIZE GUIDE） ---------------- */
.size-guide-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.size-guide-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--text, #17233b);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.size-guide-btn:hover { border-color: #16233f; background: #f6f8fc; }
/* 小号版：嵌在 SIZE 选项组标题右侧（原 Choose size 提示的位置），紧凑不抢视觉 */
.size-guide-btn-sm {
  height: 24px; padding: 0 9px; gap: 4px;
  border-radius: 999px; font-size: 10.5px; letter-spacing: .05em;
  color: var(--muted);
}
.size-guide-btn-sm:hover { color: var(--text, #17233b); }
.size-guide-btn-sm svg { flex-shrink: 0; }
/* 弹窗定高 + 内部纵向滚动：三张表（男/童/女）全部可达，数据再增也只需滚动查看 */
.size-guide-card {
  width: min(960px, calc(100vw - 32px));
  display: flex; flex-direction: column;
}
/* 三张表完整平铺：弹窗高度随内容展开（男款→儿童款→女款），超出视口时由外层 modal 统一纵向滚动 */
.size-guide-body { padding-top: 4px; }
.sg-toggle { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sg-unit {
  min-width: 64px; height: 34px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.sg-unit:first-child { border-radius: 8px 0 0 8px; }
.sg-unit:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.sg-unit.active { background: #111; border-color: #111; color: #fff; }
.sg-block { margin-bottom: 18px; }
.sg-table-name { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--text, #17233b); }
.sg-table-wrap { border: 1px solid var(--line, #e2e7f0); border-radius: 10px; }
/* 表格在弹窗宽度内完整显示：不设 min-width、无横向滚动；
   数据格禁止换行；表头只允许在单词空格处换行（keep-all），绝不拆词拆字 */
.sg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sg-table th, .sg-table td { border: 1px solid var(--line, #e2e7f0); padding: 6px 6px; text-align: center; }
.sg-table td { white-space: nowrap; }
.sg-table th { white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.sg-table th { background: #f6f8fc; font-weight: 700; color: var(--text, #17233b); }
.sg-note { font-size: 12.5px; color: var(--muted); margin: 2px 0 14px; }
.sg-how { border-top: 1px dashed var(--line, #e2e7f0); padding-top: 12px; }
.sg-how h4 { margin: 0 0 8px; font-size: 15px; text-align: center; }
.sg-how ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text, #17233b); line-height: 1.8; }

/* ---------------- 三级球队分类头部介绍 ----------------
   结构照抄参考站：队徽（居中）→ 红色标题 → 要点 → 横幅。
   参考站各队原始尺寸不一（标题 28px/48px、队徽 130~260px 宽），这里统一成一套，
   否则同一列表里高低不齐，就是用户看到的"乱放"。
   横幅一律按内容宽度等比缩放（width:100% + height:auto），绝不拉伸、不溢出。 */
.group-intro { margin: 6px 0 18px; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.group-intro-logo { display: block; margin: 0 auto 16px; width: auto; height: auto; max-height: 150px; max-width: 200px; object-fit: contain; }
.group-intro-title { margin: 0 0 14px; text-align: center; font-size: 28px; font-weight: 800; line-height: 1.25; color: #e03e2d; }
.group-intro-bullets { margin: 0 auto 14px; padding-left: 22px; max-width: 1080px; }
.group-intro-bullets li { font-size: 13.5px; line-height: 1.85; color: var(--text, #17233b); margin-bottom: 4px; }
.group-intro-banner { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; border-radius: 12px; background: #f6f8fc; }
@media (max-width: 720px) {
  .group-intro { padding: 16px 14px 14px; }
  .group-intro-title { font-size: 21px; }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #cbd7ea; }
.card-media { position: relative; aspect-ratio: 1 / 1; background: #eef2f8; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-row { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  letter-spacing: 0.3px;
}
.badge.dark { background: rgba(11, 18, 32, 0.88); }
.badge.sky { background: var(--brand-2); color: #04263a; }
.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-cat { font-size: 11.5px; color: var(--muted); letter-spacing: 0.6px; }
.card-title { font-size: 13.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-sub { font-size: 11.5px; color: var(--muted); }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.price-now { font-size: 18px; font-weight: 800; color: var(--sale); }
.price-was { font-size: 12.5px; color: #94a3b8; text-decoration: line-through; }
.price-off { font-size: 11.5px; font-weight: 700; color: var(--sale); background: #fee2e2; border-radius: 6px; padding: 2px 6px; }
.opt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.opt-tag { font-size: 10.5px; color: #475569; background: #eef2f9; border-radius: 6px; padding: 2px 6px; }

/* ---------------- detail ---------------- */
.detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; padding: 24px 0 48px; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.gallery-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { width: 68px; height: 68px; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: #fff; cursor: pointer; }
.thumbs button.active { border-color: var(--brand); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.buy-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.buy-title { font-size: 21px; font-weight: 700; line-height: 1.35; margin: 6px 0 0; }
.buy-local { color: var(--muted); font-size: 13px; margin-top: 6px; }
.buy-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 4px; flex-wrap: wrap; }
.buy-price .now { font-size: 32px; font-weight: 800; color: var(--sale); }
.buy-price .was { font-size: 15px; color: #94a3b8; text-decoration: line-through; }
.buy-price .off { font-size: 13px; font-weight: 700; background: var(--sale); color: #fff; border-radius: 8px; padding: 3px 9px; }
.buy-save { font-size: 12.5px; color: var(--ok); }
.divider { height: 1px; background: var(--line); margin: 18px 0; }

.opt-group { margin-bottom: 18px; }
/* 2026-10-07 用户要求：提示语不再悬空最右侧，改为紧跟组标题（文字保留）；SIZE 按钮组仍靠右 */
.opt-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin-bottom: 9px; }
.opt-name { font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.opt-hint { font-size: 11.5px; color: var(--muted); }
/* SIZE 组两个按钮右对齐、横向平行排列：SIZE GUIDE 在前、Size Assistant 在后，间隔 3px（2026-10-07 用户要求） */
.opt-actions-vert { display: inline-flex; flex-direction: row; align-items: center; gap: 3px; margin-left: auto; }
.opt-items { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-pill {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-width: 52px;
}
.opt-pill:hover { border-color: #b9c7dd; }
.opt-pill.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.opt-pill small { display: block; font-size: 10.5px; opacity: 0.75; margin-top: 2px; }
/* 补丁卡片：卡片 72px 宽 / 51px 图（在 52/31 基础上全部 +20px），只露图片 */
.opt-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  width: 72px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.opt-card img { width: 100%; height: 51px; object-fit: contain; }
.opt-card-ph { display: block; width: 100%; height: 51px; background: #f6f8fc; border-radius: 4px; }
.opt-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.14); }
/* 补丁文字与价格：默认隐藏，悬停/聚焦时白底浮层显示在补丁照片正上方（黑字说明 + 红字价格），移开自动隐藏 */
.opt-patch { position: relative; }
.opt-patch .opt-tip {
  position: absolute; z-index: 30;
  bottom: calc(100% + 5px); left: 50%; top: auto;
  transform: translate(-50%, 4px);
  width: max-content; max-width: 220px;
  padding: 5px 9px; border-radius: 8px;
  background: #fff; color: #17233b;
  border: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.45; text-align: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.opt-patch .opt-tip .opt-tip-label { display: block; color: #17233b; }
.opt-patch .opt-tip b { display: block; color: var(--sale, #dc2626); }
.opt-patch:hover .opt-tip, .opt-patch:focus-visible .opt-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

.custom-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-bottom: 9px; }
.custom-row label { font-size: 12.5px; color: #475569; display: flex; align-items: center; gap: 8px; }
.custom-row input {
  height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  width: 100%;
}
.custom-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.13); }
.custom-row .fee { font-size: 12px; font-weight: 700; color: var(--sale); white-space: nowrap; }

.summary { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: #475569; }
.summary-row.total { border-top: 1px dashed #cbd5e1; margin-top: 8px; padding-top: 10px; font-size: 17px; font-weight: 800; color: var(--ink); }
.summary-total-price { color: var(--sale); }
.buy-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-primary, .btn-ghost {
  height: 46px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  border: 1px solid transparent;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-soft); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: #b9c7dd; }

.detail-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 18px; }
.detail-section h3 { margin: 0 0 10px; font-size: 14px; }
.detail-section p { margin: 0; font-size: 13px; color: #475569; line-height: 1.85; }
.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.spec-list div { font-size: 12.5px; color: #475569; }
.spec-list b { color: var(--ink); font-weight: 600; }

/* ---------------- drawer ---------------- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 18px; }
.icon-btn { border: 0; background: transparent; font-size: 15px; cursor: pointer; color: var(--muted); }
.cart-item { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.cart-item img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: #eef2f8; }
.cart-item .t { font-size: 13px; font-weight: 600; }
.cart-item .o { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.cart-item .p { font-size: 13px; font-weight: 700; color: var(--sale); margin-top: 5px; }
.scrim { position: fixed; inset: 0; background: rgba(11, 18, 32, 0.42); z-index: 50; }

/* ---------------- misc ---------------- */
.site-footer { background: var(--navy); color: #93a4bd; margin-top: 20px; padding: 34px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer strong { color: #fff; font-size: 14px; letter-spacing: 1.4px; }
.site-footer p { margin: 6px 0 0; font-size: 12.5px; }
.arch { margin: 0; display: grid; gap: 6px; font-size: 12px; }
.arch div { display: flex; gap: 10px; }
.arch dt { color: #d1d5db; min-width: 68px; }
.arch dd { margin: 0; color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 80;
  box-shadow: var(--shadow-lg);
}
.loading, .skeleton-note, .empty-note, .error-note {
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.error-note { color: var(--sale); }
.crumbs { font-size: 12.5px; color: var(--muted); padding-top: 20px; }
.crumbs a:hover { color: var(--brand); }
.section-title { font-size: 17px; font-weight: 700; margin: 30px 0 14px; display: flex; align-items: center; gap: 10px; }
.section-title span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pill-note { font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

/* ---------------- 商品页社交账号入口（主图下方） ---------------- */
.social-row {
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.social-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.social-row-head b { font-size: 13px; letter-spacing: 0.3px; }
.social-row-head span { font-size: 11.5px; color: var(--muted); }
.social-row-list { display: flex; flex-wrap: wrap; gap: 9px; }

/* 图标是单色 SVG，靠 mask 上色：默认深灰，悬停变平台品牌色 */
.social-link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  /* 默认态即平台官方品牌色（--brand/--brand-fg 由 app.js 按平台内联注入） */
  background: var(--brand, #f8fafc);
  color: var(--brand-fg, #475569);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}
/* Instagram 用官方四色渐变（其余平台用 SOCIAL_META 里的官方纯色） */
.social-link[data-platform='instagram'] {
  background: radial-gradient(circle at 28% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: transparent;
}
.social-link .social-glyph {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.social-link:hover,
.social-link:focus-visible {
  border-color: rgba(148, 163, 184, 0.45);
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}
.social-link:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

@media (max-width: 820px) {
  .social-link { width: 38px; height: 38px; }
  .social-link .social-glyph { width: 18px; height: 18px; }
}

/* ================= 右上角：订单查询 / 登录注册 ================= */
.hbtn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.hbtn:hover { border-color: #b9c7dd; color: var(--brand); }
.hbtn svg { flex-shrink: 0; }
/* 订单查询按钮：缩短边框宽度（收紧内边距/间距/字号） */
#track-btn { padding: 0 8px; gap: 5px; font-size: 12px; }
/* 登录/注册按钮：黑色描边，粗细与搜索框黑边一致（2px solid #111） */
#account-btn { border: 2px solid #111; }
#account-btn:hover { border-color: #111; }
/* 支付方式图标行（详情页支付按钮下方，1:1 复刻参考站） */
.pay-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pay-icons img { height: 28px; width: auto; display: block; border-radius: 3px; }
/* 收藏按钮：与购物车按钮同款布局——28px 正圆图标框 + 红色角标在上，Favorite 小字在下；外边距与字号收紧 */
#fav-btn {
  width: auto; height: auto; padding: 3px 7px 2px; gap: 3px;
  border: 0; background: transparent; border-radius: 8px; flex-shrink: 0;
  flex-direction: column; align-items: center;
}
#fav-btn:hover { border-color: transparent; background: #f1f4f9; color: var(--ink); }
.fav-icon-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; line-height: 0;
}
#fav-btn:hover .fav-icon-wrap { border-color: #b9c7dd; }
#fav-btn svg { color: #e03e2d; }
#fav-btn .hbtn-text { display: block; font-size: 10.5px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
#fav-btn .fav-count {
  position: absolute; top: -8px; right: -11px;
  min-width: 15px; height: 15px; padding: 0 4px;
  font-size: 9.5px; line-height: 15px;
}
/* 已登录时按钮变成品牌色，一眼能看出当前状态 */
.hbtn.is-in { background: var(--navy); border-color: var(--navy); color: #fff; }
.hbtn.is-in:hover { background: var(--navy-soft); color: #fff; }

/* ================= 弹窗（登录注册 / 订单查询 / 我的账户） ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-card {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head strong { font-size: 15px; letter-spacing: 0.2px; }
.modal-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
}
.modal-tabs button {
  flex: 1;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.modal-tabs button.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.modal-body { padding: 16px 20px 20px; }
.modal-lead { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

.modal-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 12px; }
.form-legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.form-legend span { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row label { font-size: 12.5px; color: #475569; }
.form-row label i { color: var(--sale); font-style: normal; margin-left: 3px; }
.form-row input {
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  background: #fff;
  outline: none;
  width: 100%;
}
.form-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.13); }
.form-row input.invalid { border-color: var(--sale); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.form-submit { width: 100%; margin-top: 4px; }
.form-submit[disabled] { opacity: 0.6; cursor: default; }
.form-switch { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.form-switch button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}
.form-msg {
  font-size: 12.5px;
  line-height: 1.6;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.form-msg.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* ---- 物流查询结果 ---- */
.track-foot { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.track-foot a { color: var(--brand); text-decoration: underline; }
.track-result { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.track-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fbfcfe; }
.track-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.track-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; font-weight: 700; }
.track-status { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #e2e8f0; color: #334155; }
.track-status.tone-amber { background: #fef3c7; color: #92400e; }
.track-status.tone-blue { background: #dbeafe; color: #1d4ed8; }
.track-status.tone-emerald { background: #d1fae5; color: #047857; }
.track-status.tone-slate { background: #e2e8f0; color: #475569; }
.track-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-top: 10px; }
.track-meta div { font-size: 12px; color: #475569; display: flex; gap: 8px; }
.track-meta b { color: var(--ink); font-weight: 600; }
.track-items { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 9px; display: grid; gap: 5px; }
.track-items div { font-size: 12px; color: #475569; display: flex; justify-content: space-between; gap: 12px; }
.track-items .track-opt { font-style: normal; font-size: 11px; color: var(--muted); }
.track-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.track-actions a {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
}
.track-actions .primary { background: var(--navy); color: #fff; }
.track-actions .primary:hover { background: var(--navy-soft); }
.track-actions .ghost { border: 1px solid var(--line); color: var(--ink); }
.track-actions .ghost:hover { border-color: #b9c7dd; }

/* ---- 语言 / 币种选择 ---- */
.locale-card { width: min(680px, 100%); }
.locale-section { margin-bottom: 18px; }
.locale-section:last-child { margin-bottom: 0; }
.locale-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.locale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.locale-opt {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.locale-opt:hover { border-color: #b9c7dd; }
.locale-opt.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.locale-foot { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- 我的账户 ---- */
.acct-top { display: flex; align-items: center; gap: 12px; }
.acct-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}
.acct-name { font-size: 14.5px; font-weight: 700; word-break: break-all; }
.acct-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.acct-section { margin-top: 16px; }
.acct-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.acct-list { display: grid; gap: 8px; }
.acct-list div { display: flex; gap: 12px; font-size: 13px; }
.acct-list b { color: var(--muted); font-weight: 400; min-width: 76px; flex-shrink: 0; }
.acct-list span { color: var(--ink); word-break: break-all; }
.acct-actions { display: flex; gap: 10px; margin-top: 18px; }
.acct-actions button {
  flex: 1;
  height: 42px;
  border-radius: 11px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.acct-actions button.danger { border-color: #fecaca; color: #b91c1c; }
.acct-actions button.danger:hover { background: #fef2f2; }

/* 窄屏顶栏：四个动作放不下文字，统一只留图标 + 收紧间距和搜索框（购物车本就是图标+文字竖排，仅隐藏文字） */

@media (max-width: 820px) {
  .header-inner { gap: 12px; }
  .hbtn { padding: 0 11px; }
  .hbtn-text { display: none; }
  .cart-btn { padding: 4px 6px 2px; }
  .cart-label { display: none; }
  /* 窄屏：logo + 功能按钮一行，搜索框独占下一行（AliExpress 移动端同款）；
     header 不再吸顶（两行太高），分类栏改为吸顶 top:0 */
  .header-inner { flex-wrap: wrap; height: auto; padding: 9px 0; row-gap: 9px; }
  .search { order: 10; flex: 1 1 100%; max-width: none; }
  .site-header { position: static; }
  .catbar-wrap { top: 0; }
  .modal { padding: 16px 12px; }
  .modal-card { border-radius: 14px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .track-meta { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 6px; }
  .brand img { height: 56px; }
}

/* --------------------- Ship to / Language / Currency（AliExpress 风格） --------------------- */

/* 头部入口按钮：国旗 + EN/ 两行文字 + 下拉箭头 */
.locale-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.locale-btn:hover { background: #f1f5f9; }
.locale-btn-flag { width: 21px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); flex-shrink: 0; }
.locale-btn-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.locale-btn-lang { font-size: 12px; font-weight: 700; }
.locale-btn-cur { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.locale-btn-chev { color: var(--muted); }

/* 面板（popover）：固定于头部按钮下方右侧 */
.locale-pop {
  position: fixed;
  top: 96px; /* = .header-inner 高度 + 8px 间距，header 变高必须同步 */
  right: 14px;
  z-index: 60;
  width: 344px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.08);
  padding: 20px 20px 18px;
}
.locale-pop-arrow {
  position: absolute;
  top: -7px;
  right: 26px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: -2px -2px 4px rgba(15, 23, 42, 0.04);
}
.locale-sec-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 4px 0 10px; }
.locale-sec-title + .locale-sec-title, .locale-list + .locale-sec-title, .locale-select + .locale-sec-title { margin-top: 16px; }

/* 下拉选择框 */
.locale-select {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d4d9e1;
  background: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 10px;
  text-align: left;
}
.locale-select:hover { border-color: #9aa7b8; }
.locale-sel-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-sel-chev { color: var(--muted); flex-shrink: 0; }

/* 展开的候选列表 */
.locale-list {
  border: 1px solid #d4d9e1;
  border-radius: 10px;
  margin: -4px 0 10px;
  overflow: hidden;
  background: #fff;
}
.locale-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px;
  padding: 0 12px;
  height: 38px;
  background: #f1f3f6;
  border-radius: 999px;
  color: var(--muted);
  flex-shrink: 0;
}
.locale-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.locale-list-scroll { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.locale-group-letter { font-size: 13px; font-weight: 700; color: var(--ink); padding: 8px 14px 4px; }
.locale-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.locale-list-item:hover { background: #f4f6f9; }
.locale-opt-flag { width: 21px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); flex-shrink: 0; }
.locale-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; }

/* Save 按钮：黑色胶囊 */
.locale-save {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.locale-save:hover { background: #1e293b; }

@media (max-width: 560px) {
  /* 移动端 header 不吸顶，弹窗紧贴 logo 行下方；logo 52→62 后同步下移 10px */
  .locale-pop { top: 84px; right: 12px; left: 12px; width: auto; }
  .locale-pop-arrow { display: none; }
}

/* --------------------- Search by image（AliExpress 同款以图搜款） --------------------- */
/* 面板锚定在搜索框正下方（left/top 由 JS 按搜索框位置计算），遮罩复用全局 .scrim */
.imgsearch-modal { align-items: flex-start; justify-content: flex-start; padding: 0; }
.imgsearch-panel {
  position: fixed;
  z-index: 71;
  width: min(400px, calc(100vw - 24px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
  padding: 18px 20px 16px;
}
.imgsearch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.imgsearch-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: #0a0a0a; letter-spacing: 0.1px; }
.imgsearch-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #1a1a1a;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.imgsearch-close:hover { background: #f1f1f1; }
.imgsearch-sub { margin: 8px 0 14px; font-size: 13px; line-height: 1.55; color: #555; }
.imgsearch-drop {
  border: 1px solid #d5d5d5;
  background: #f5f5f5;
  border-radius: 10px;
  min-height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.imgsearch-drop.dragover { border-color: #d3061d; background: #fdf1f2; }
.imgsearch-empty { display: flex; flex-direction: column; align-items: center; }
.imgsearch-ph { color: #b9b9b9; }
.imgsearch-drag { font-size: 13.5px; color: #555; margin-top: 6px; }
.imgsearch-or { font-size: 12px; color: #757575; margin: 3px 0 8px; }
.imgsearch-upload {
  border: 0;
  cursor: pointer;
  background: #d3061d;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  height: 34px;
  padding: 0 22px;
  border-radius: 999px;
}
.imgsearch-upload:hover { background: #b50518; }
.imgsearch-busy { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.imgsearch-busy img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e5e5;
}
.imgsearch-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.imgsearch-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  border-top-color: #d3061d;
  animation: imgsearch-spin 0.8s linear infinite;
}
@keyframes imgsearch-spin { to { transform: rotate(360deg); } }
.imgsearch-tip { margin: 12px 0 0; font-size: 12px; color: #757575; line-height: 1.5; }

/* 以图搜款结果页 */
.imgsearch-result-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0 18px;
  flex-wrap: wrap;
}
.imgsearch-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #f5f5f5;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
}
.imgsearch-result-meta { flex: 1; min-width: 200px; }
.imgsearch-result-meta h2 { margin: 0; font-size: 20px; color: var(--ink); }
.imgsearch-result-meta p { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.imgsearch-again {
  border: 2px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
}
.imgsearch-again:hover { background: #111; color: #fff; }

/* ==================================================================
   结算 / 支付 / 订单 —— 下单链路页面
   复用既有设计变量（--brand / --line / --muted / --radius …），
   桌面两栏（左内容 + 右摘要），窄屏折叠为单栏。
   ================================================================== */

.page-title { font-size: 20px; font-weight: 600; margin: 22px 0 14px; letter-spacing: -0.01em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; }
.muted { color: var(--muted); }

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.panel-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.panel-title small { font-weight: 400; font-size: 11.5px; }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; padding-bottom: 40px; }
.checkout-main { min-width: 0; }
.checkout-side { position: sticky; top: 164px; } /* = header 88 + 分类栏；header 变高需同步 */
.checkout-side .panel { margin-bottom: 0; }

/* ---- 购物车行 ---- */
.cart-item-body { min-width: 0; }
.cart-item .t { font-size: 13.5px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item .o { font-size: 11.5px; color: var(--muted); margin-top: 3px; word-break: break-word; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cart-item .p { font-size: 14px; font-weight: 600; color: var(--sale); }
.cart-item.compact { padding: 10px 0; }
.cart-item.compact .cart-item-foot { margin-top: 6px; }

/* 购物车行整行可点回商品详情（图片/标题是真链接，其余空白由 JS 委托跳转） */
.cart-item[data-cart-goto] { cursor: pointer; }
.cart-item[data-cart-goto]:hover .cart-item-thumb img,
.cart-item[data-cart-goto]:hover .cart-item-title { opacity: .78; }
.cart-item-thumb { display: block; width: 62px; height: 62px; }
.cart-item-thumb img { transition: opacity .15s ease; }
a.cart-item-title { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .15s ease; }
a.cart-item-title:hover { text-decoration: underline; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty-btn { width: 28px; height: 26px; border: 0; background: #fff; color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.qty-btn:hover { background: #f1f5f9; }
.qty-value { min-width: 30px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.link-btn { border: 0; background: none; color: var(--brand); font-size: 12px; cursor: pointer; padding: 0; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--sale); }

.cart-foot-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ---- 摘要区 ---- */
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #475569; padding: 3px 0; }
.summary-line span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-divider { height: 1px; background: var(--line); margin: 9px 0; }
.summary-row.discount { color: var(--ok); }
.summary-row.total { font-size: 15px; font-weight: 600; color: var(--ink); padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--line); }
.summary-total-price { color: var(--sale); }
.ship-hint { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 11.5px; line-height: 1.5; }
.fine-print { margin: 10px 0 0; font-size: 11px; line-height: 1.55; color: var(--muted); }

/* ---- 配送方式 ---- */
.ship-option, .pay-option {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ship-option:hover, .pay-option:not(.disabled):hover { border-color: #93c5fd; }
.ship-option.active, .pay-option.active { border-color: var(--brand); background: #eff6ff; }
.ship-option input, .pay-option input { accent-color: var(--brand); flex-shrink: 0; }
.ship-option-body, .pay-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ship-option-body b, .pay-option-body b { font-size: 13px; font-weight: 500; }
.ship-option-body small, .pay-option-body small { font-size: 11px; color: var(--muted); }
.ship-option-fee { font-size: 13px; font-weight: 600; }
.pay-option.disabled { opacity: 0.55; cursor: not-allowed; background: #f8fafc; }
.pay-option-off { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sandbox-tag { display: inline-block; padding: 0 5px; border-radius: 4px; background: #fef3c7; color: #b45309; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; vertical-align: 1px; }

/* ---- 订单摘要：商品封面图列表（PRODUCT / SUBTOTAL，仿参考站结算摘要格式） ---- */
.sum-products { display: flex; flex-direction: column; }
.sum-products-head {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.sum-product { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef2f7; }
.sum-product:last-child { border-bottom: 0; padding-bottom: 2px; }
.sum-product-img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; flex-shrink: 0; }
.sum-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sum-product-title { font-size: 12.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sum-product-opt { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 定制补丁照片（购物车行 / 结算摘要通用）：只出照片，不带任何文字标签 */
.patch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.patch-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.patch-chip img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; background: #f6f8fb; display: block; }

/* 客户自定义印字/印号（Name / Number）：要比灰色选项更醒目，顾客下单前要一眼核对 */
.line-custom {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.line-custom em { font-style: normal; font-weight: 400; color: var(--muted); }
.sum-product .line-custom { font-size: 11.5px; }
.sum-product-qty { font-size: 11px; color: var(--muted); }
.sum-product-price { font-size: 13px; font-weight: 600; color: var(--ink); flex-shrink: 0; }

/* ---- PayPal 智能按钮 / 银行卡字段（PayPal Card Fields 托管输入框） ---- */
#paypal-buttons { margin-top: 12px; min-height: 45px; }
.card-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.card-fields .form-row { margin: 0; }
.card-fields label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }
#card-number, #card-expiry, #card-cvv {
  min-height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 8px 12px;
}
#card-number iframe, #card-expiry iframe, #card-cvv iframe { width: 100%; border: 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- 优惠券 ---- */
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 10px; border-radius: 10px; background: #ecfdf5; color: #047857; font-size: 12px; }

/* ---- 提示条 ---- */
.banner { padding: 12px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; line-height: 1.55; }
.banner-sub { margin-top: 4px; font-size: 11.5px; opacity: 0.85; }
.banner.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.banner.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.banner.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.banner.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---- 订单明细 ---- */
.order-items { display: flex; flex-direction: column; }
.order-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.order-item:last-child { border-bottom: 0; }
.order-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.order-item .t { font-size: 13px; font-weight: 500; line-height: 1.4; }
.order-item .o { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.order-item .p { font-size: 13px; font-weight: 600; white-space: nowrap; }

.addr-block { font-size: 12.5px; line-height: 1.7; color: #334155; }

.bank-box { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line); }
.bank-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0; }
.bank-row span { color: var(--muted); }

/* ---- 我的订单（账户弹窗内） ---- */
.acct-order { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; font-size: 12.5px; transition: border-color 0.15s, background 0.15s; }
.acct-order:hover { border-color: #93c5fd; background: #eff6ff; }
.acct-order-status { flex: 1; color: var(--muted); font-size: 11.5px; }
.acct-order b { color: var(--sale); }

.empty-note.big { padding: 60px 20px; font-size: 14px; line-height: 2; }

/* ---- 窄屏 ---- */
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
  .wrap { width: min(1220px, 100% - 24px); }
}

/* ==================================================================
   列表工具条 / 排序 / 价格区间
   ================================================================== */
.list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.lt-label { font-size: 12.5px; color: var(--muted); }
.lt-sort,
.lt-sale { display: inline-flex; align-items: center; gap: 7px; }
.lt-sort select,
.lt-sale select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  padding: 0 8px;
  cursor: pointer;
}
.lt-price { display: inline-flex; align-items: center; gap: 6px; }
.lt-price input {
  width: 84px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
}
.lt-dash { color: var(--muted); font-style: normal; }
.lt-apply {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.lt-apply:hover { background: #1a45c0; }
.lt-reset { font-size: 12.5px; }
@media (max-width: 749px) {
  .list-tools { gap: 8px; }
  .lt-price input { width: 68px; }
}

/* ==================================================================
   收藏（卡片心形 / 详情页按钮 / 头部计数）
   ================================================================== */
.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s, border-color 0.15s;
}
.fav-btn:hover { color: var(--sale); border-color: rgba(220, 38, 38, 0.35); transform: scale(1.06); }
.fav-btn.active { color: var(--sale); }
.fav-btn.active svg { fill: var(--sale); }

.btn-now {
  height: 46px;
  flex: 1;
  border: 1px solid var(--sale);
  border-radius: 12px;
  background: var(--sale);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-now:hover { background: #b91c1c; }

.fav-detail { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; }
.fav-detail.active { color: var(--sale); border-color: rgba(220, 38, 38, 0.4); }
.fav-detail.active svg { fill: var(--sale); }

.buy-actions { flex-wrap: wrap; }
.buy-actions .fav-detail { flex: 0 0 auto; }

.fav-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ==================================================================
   详情页数量选择
   ================================================================== */
.qty-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.qty-stock { font-size: 12px; color: var(--ok); }
.qty-stock.low { color: var(--sale); }

/* ==================================================================
   最近浏览
   ================================================================== */
.recent-strip { margin: 34px 0 8px; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.recent-head h3 { margin: 0; font-size: 16px; color: var(--ink); }
.recent-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.recent-row .card { flex: 0 0 186px; width: 186px; scroll-snap-align: start; }

/* ==================================================================
   回到顶部
   ================================================================== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.to-top:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (max-width: 749px) { .to-top { right: 14px; bottom: 84px; width: 40px; height: 40px; } }

/* ------------ 最近成交动态（首页左下角轮播，2026-10-14） ------------
   固定左下角，避免与右侧悬浮客服球（.cx-fab-group）、右下返回顶部（.to-top）
   以及底部对比浮条（.cmp-bar）抢位。显隐靠 .rp-in 类切换 transform/opacity，
   触发过渡而不是直接 display 切换。 */
.rp-toast {
  position: fixed;
  left: 20px;
  bottom: 22px;
  z-index: 55;
  width: 332px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}
.rp-toast.rp-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rp-card { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.rp-thumb { width: 58px; height: 58px; flex: none; object-fit: cover; border-radius: 8px; background: #f1f5f9; }
.rp-body { min-width: 0; flex: 1; }
.rp-line { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
/* 商品名最多两行，超出省略 —— 长标题不能把卡片撑高，否则每条高度不一、跳动明显 */
.rp-title {
  margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-time { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.rp-close {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: rgba(241, 245, 249, 0.92); color: #64748b;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.rp-close:hover { background: #e2e8f0; color: #334155; }
@media (max-width: 749px) {
  /* 右侧必须留出悬浮客服球组的宽度（球 54px + 右边距 18px + 6px 间隙）：
     球组是「垂直居中再下移 100px」，视口一矮（横屏手机、扁窗口）就会下移到
     卡片所在高度，全宽卡片会被球压住右上角，连关闭按钮都点不到。 */
  .rp-toast {
    left: 12px; right: 78px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none;
  }
  .rp-thumb { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-toast { transition: none; }
}

/* ------------ 一级分类悬停大菜单（Fanatics 式）+ 导航图标 ------------ */
.chip-icon { width: 19px; height: 19px; object-fit: contain; border-radius: 3px; margin-right: 5px; vertical-align: -4px; }
.nav button .chip-icon { margin-right: 5px; vertical-align: -4.5px; }
.nav-item { position: relative; display: flex; }
.nav-item > button { flex: 1; }

#mega-root.mega {
  position: fixed; z-index: 90; display: none;
  background: #fff; border: 1px solid #d2d2d2;
  border-radius: 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#mega-root.mega.open { display: block; }
/* Fanatics 同款：面板内二级 4 列平铺（白底、13px 文字、28px 行高、行悬停浅灰） */
.mega-inner { display: block; max-height: min(72vh, 650px); overflow-y: auto; }
.mega-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 10px; padding: 8px 14px 10px; background: #fff; border-right: 0;
}
.mega-l2 {
  display: flex; width: 100%; gap: 8px; align-items: center;
  padding: 3px 6px; min-height: 28px; border: 0; border-radius: 2px; background: none;
  font: inherit; font-size: 13px; font-weight: 400; color: #333; cursor: pointer; text-align: left;
}
.mega-l2:hover, .mega-l2.active { background: #dfdfdf; color: #333; font-weight: 400; }
.mega-l2-icon { width: 20px; height: 20px; object-fit: contain; border-radius: 0; flex: 0 0 20px; }
.mega-l2-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-l2-count { color: #93a4bd; font-size: 11px; font-style: normal; font-weight: 400; }
/* Fanatics 同款三区布局：球队网格 + 右侧 Top Players 侧栏 + 底部历史球队灰条 */
.mega-rail-zoned { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 0; padding: 0; }
.mega-rail-zoned .mega-main {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 10px; padding: 8px 14px 10px; align-content: start;
}
.mega-side { border-left: 1px solid #ececec; padding: 8px 12px 10px; overflow: hidden; }
.mega-side-title {
  font-size: 13px; font-weight: 700; color: #333; padding: 4px 6px 7px; margin: 0;
}
.mega-side-title:not(:first-child) { margin-top: 8px; border-top: 1px solid #ececec; padding-top: 10px; }
.mega-side .mega-l2 { padding: 3px 6px; }
.mega-partnership { margin-top: 10px; padding-top: 12px; border-top: 1px solid #ececec; display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; }
/* 联赛 SHOP 标与 MXQ SHOP 新横标等高 28px 并排（原为带旧 logo 的合成图，已拆分） */
.mega-partnership .mp-league { display: block; height: 88px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.mega-partnership .mp-mxq { display: block; height: 23px; width: auto; margin-top: -50px; }
.mega-historic {
  background: #f3f5f7; border-top: 1px solid #e3e6ea; padding: 7px 14px;
  display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center;
}
.mega-historic .mega-l2 { width: auto; min-height: 24px; font-size: 12px; padding: 2px 8px; }
.mega-historic .mega-l2 .mega-l2-icon { display: none; }
.mega-historic .mega-l2:hover { background: #e2e6ea; }
.mega-body { overflow: visible; padding: 10px 16px 14px; border-top: 1px solid #ececec; background: #fff; }
/* 二级无三级内容时隐藏底部空带（Fanatics 面板无此区域） */
.mega-body:has(.mega-empty) { display: none; }
.mega-columns { column-width: 205px; column-gap: 24px; }
.mega-col { break-inside: avoid; margin-bottom: 16px; }
.mega-col-title {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 13px; font-weight: 700; color: #333;
  padding: 2px 0 6px; cursor: pointer;
}
.mega-col-title:hover { color: #cf2519; text-decoration: underline; }
.mega-link {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-size: 13px; color: #333; padding: 3px 5px; cursor: pointer;
}
.mega-link:hover { background: #dfdfdf; color: #333; text-decoration: none; }
.mega-more { color: #cf2519; font-weight: 600; }
.mega-empty { padding: 26px; color: #93a4bd; font-size: 13px; }
@media (max-width: 720px) {
  #mega-root.mega { left: 8px !important; right: 8px; width: auto !important; }
  .mega-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-rail-zoned { grid-template-columns: 1fr; }
  .mega-rail-zoned .mega-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-side { border-left: 0; border-top: 1px solid #ececec; }
}

/* 大菜单二三四级图标：图片/首字母徽章统一布局 */
.mega-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: #eef2f8; color: #5a6b85; font-weight: 700; font-size: 11px; line-height: 1;
}
.mega-l2-icon { flex: 0 0 20px; }
.mega-l2-icon.mega-badge { width: 20px; height: 20px; border-radius: 3px; }
.mega-col { padding-right: 6px; }
.mega-col-title { display: flex; align-items: center; gap: 7px; }
.mega-col-title .mega-title-icon { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex: 0 0 20px; }
.mega-col-title .mega-title-icon.mega-badge { font-size: 10px; }
.mega-link { display: flex; align-items: center; gap: 7px; }
.mega-link .mega-link-icon { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; flex: 0 0 18px; }
.mega-link .mega-link-icon.mega-badge { font-size: 9px; }
.mega-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-columns { column-width: 205px; }

/* --------------------- Shop Your Teams 组件（Fanatics 式） --------------------- */
.team-widget { background: #fff; border-bottom: none; box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.12); }
.team-widget-inner { display: flex; align-items: center; gap: 18px; min-height: 122px; padding-top: 8px; padding-bottom: 8px; }
.tw-head { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.tw-title { font-size: 15px; font-weight: 700; color: #111; white-space: nowrap; }
.tw-seeall { background: none; border: 0; padding: 0; font-size: 12px; color: #555; text-decoration: underline; cursor: pointer; text-align: left; }
.tw-seeall:hover { color: #c8102e; }
.tw-teams { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tw-team { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; background: none; border: 0; padding: 4px 2px; cursor: pointer; border-radius: 8px; }
.tw-team:hover { background: #f5f5f5; }
.tw-team-logo, .tw-league-icon { width: 44px; height: 44px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tw-team-logo img, .tw-league-icon img { width: 30px; height: 30px; object-fit: contain; }
.tw-team-name { font-size: 11px; color: #333; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-divider { width: 1px; align-self: stretch; margin: 10px 0; background: #e0e0e0; flex: 0 0 1px; }
.tw-marquee { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tw-track { display: flex; align-items: flex-start; gap: 4px; width: max-content; animation: tw-scroll 42s linear infinite; }
.tw-marquee:hover .tw-track { animation-play-state: paused; }
.tw-league { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; background: none; border: 0; padding: 4px 2px; cursor: pointer; border-radius: 8px; flex: 0 0 auto; }
.tw-league:hover { background: #f5f5f5; }
.tw-league-name { font-size: 11px; color: #333; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes tw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) {
  .team-widget-inner { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .tw-head { flex-direction: row; align-items: baseline; gap: 10px; width: 100%; }
  .tw-divider { display: none; }
  .tw-teams { order: 3; }
  .tw-marquee { order: 2; width: 100%; }
}

/* ======== Soccer Jersey 二级面板专属布局变体（仅悬停 Soccer Jersey 时生效，?sjp=v1..v4 切换） ======== */
/* 通用：面板加宽加高（JS 侧宽度 1220px），内容区上限放宽 */
#mega-root.mega-sj .mega-inner { max-height: min(80vh, 800px); }
#mega-root.mega-sj .mega-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---- V1 胶囊速链 + 联赛卡片网格：顶部圆角胶囊横排，联赛分组变成浅灰圆角卡片 ---- */
#mega-root.sj-v1 .mega-rail { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 14px; }
#mega-root.sj-v1 .mega-rail .mega-l2 {
  width: auto; min-height: 32px; padding: 4px 14px;
  border: 1px solid #e2e5ea; border-radius: 999px; background: #fff;
  transition: border-color .12s, background .12s;
}
#mega-root.sj-v1 .mega-rail .mega-l2:hover,
#mega-root.sj-v1 .mega-rail .mega-l2.active { background: #fdeceb; border-color: #cf2519; color: #cf2519; font-weight: 600; }
#mega-root.sj-v1 .mega-body { padding: 4px 14px 14px; }
#mega-root.sj-v1 .mega-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#mega-root.sj-v1 .mega-col {
  background: #f7f8fa; border: 1px solid #ececf0; border-radius: 10px;
  padding: 10px 12px 8px; margin-bottom: 0;
}
#mega-root.sj-v1 .mega-col-title { padding: 2px 4px 8px; border-bottom: 1px solid #ececf0; margin-bottom: 4px; }
#mega-root.sj-v1 .mega-col .mega-link { padding: 3px 4px; border-radius: 6px; }
#mega-root.sj-v1 .mega-col .mega-link:hover { background: #fff; }

/* ---- V2 大磁贴 + 三栏宽卡片：速链变成带底色的大磁贴（图标+文字），联赛卡片更大更透气 ---- */
#mega-root.sj-v2 .mega-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; }
#mega-root.sj-v2 .mega-rail .mega-l2 {
  flex-direction: column; justify-content: center; gap: 5px; min-height: 62px; padding: 8px 4px;
  background: #f7f8fa; border: 1px solid #ececf0; border-radius: 10px; text-align: center;
}
#mega-root.sj-v2 .mega-rail .mega-l2 .mega-l2-icon { width: 26px; height: 26px; flex: 0 0 26px; }
#mega-root.sj-v2 .mega-rail .mega-l2 .mega-l2-name { white-space: normal; font-size: 12px; line-height: 1.25; }
#mega-root.sj-v2 .mega-rail .mega-l2:hover,
#mega-root.sj-v2 .mega-rail .mega-l2.active { background: #fdeceb; border-color: #cf2519; }
#mega-root.sj-v2 .mega-body { padding: 4px 14px 14px; }
#mega-root.sj-v2 .mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#mega-root.sj-v2 .mega-col {
  background: #fff; border: 1px solid #ececf0; border-radius: 12px;
  padding: 12px 14px 10px; margin-bottom: 0; box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
#mega-root.sj-v2 .mega-col-title { padding: 2px 4px 9px; border-bottom: 1px solid #f1f2f5; margin-bottom: 5px; font-size: 14px; }
#mega-root.sj-v2 .mega-col .mega-link { padding: 4px 6px; border-radius: 6px; }

/* ---- V3 经典双区：左侧竖栏速链 + 右侧联赛卡片（左导航右内容，视线动线最顺） ---- */
#mega-root.sj-v3 .mega-inner { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
#mega-root.sj-v3 .mega-rail { grid-template-columns: 1fr; gap: 1px; padding: 8px 6px; background: #fafbfc; min-height: 100%; }
#mega-root.sj-v3 .mega-rail .mega-l2 { min-height: 34px; padding: 5px 10px; border-radius: 8px; }
#mega-root.sj-v3 .mega-rail .mega-l2:hover,
#mega-root.sj-v3 .mega-rail .mega-l2.active { background: #fdeceb; color: #cf2519; font-weight: 600; }
#mega-root.sj-v3 .mega-body { border-top: 0; border-left: 1px solid #ececf0; padding: 12px 14px 14px; }
#mega-root.sj-v3 .mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#mega-root.sj-v3 .mega-col {
  background: #f7f8fa; border: 1px solid #ececf0; border-radius: 10px;
  padding: 10px 12px 8px; margin-bottom: 0;
}
#mega-root.sj-v3 .mega-col-title { padding: 2px 4px 8px; border-bottom: 1px solid #ececf0; margin-bottom: 4px; }
#mega-root.sj-v3 .mega-col .mega-link { padding: 3px 4px; border-radius: 6px; }

/* ---- V4 紧凑五列：顶链细窄一行，联赛五列窄卡，一屏放下不滚动 ---- */
#mega-root.sj-v4 .mega-rail { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 8px 12px; }
#mega-root.sj-v4 .mega-rail .mega-l2 {
  width: auto; min-height: 26px; padding: 2px 10px; font-size: 12px;
  border: 1px solid #e2e5ea; border-radius: 6px; background: #fff;
}
#mega-root.sj-v4 .mega-rail .mega-l2:hover,
#mega-root.sj-v4 .mega-rail .mega-l2.active { background: #fdeceb; border-color: #cf2519; color: #cf2519; }
#mega-root.sj-v4 .mega-body { padding: 2px 12px 12px; }
#mega-root.sj-v4 .mega-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#mega-root.sj-v4 .mega-col { background: #f7f8fa; border: 1px solid #ececf0; border-radius: 8px; padding: 8px 10px 6px; margin-bottom: 0; }
#mega-root.sj-v4 .mega-col-title { padding: 1px 2px 6px; border-bottom: 1px solid #ececf0; margin-bottom: 3px; font-size: 13px; }
#mega-root.sj-v4 .mega-col .mega-link { padding: 2px 3px; font-size: 12px; }
#mega-root.sj-v4 .mega-col .mega-link .mega-link-icon { width: 16px; height: 16px; flex-basis: 16px; }

/* 窄屏兜底：变体卡片网格退化为单列/双列 */
@media (max-width: 1180px) {
  #mega-root.sj-v1 .mega-columns, #mega-root.sj-v2 .mega-columns, #mega-root.sj-v3 .mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mega-root.sj-v4 .mega-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ Trending Collections 横滑轮播（1:1 复刻 fanatics 联盟页 LEAGUE_PAGE_HM_SLIVER_2） ============ */
.tc-carousel {
  position: relative;
  margin: 18px 0 22px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 14px 0 16px;
}
.tc-head {
  display: flex;
  align-items: center;
  padding: 0 20px 10px;
}
.tc-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.2px;
}
.tc-row-wrap { position: relative; }
.tc-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2px 20px 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tc-row::-webkit-scrollbar { display: none; }
.tc-card {
  flex: 0 0 176px;
  width: 176px;
  scroll-snap-align: start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
}
.tc-img {
  width: 176px;
  height: 234px; /* 480x639 等比 */
  object-fit: cover;
  background: #f4f4f4;
  display: block;
  border-radius: 2px;
}
.tc-card-title {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-card-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-card:hover .tc-img { opacity: 0.88; }
.tc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #111;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tc-arrow:hover { background: #f2f2f2; }
.tc-arrow-left { left: 6px; }
.tc-arrow-right { right: 6px; }
@media (max-width: 820px) {
  .tc-card { flex-basis: 132px; width: 132px; }
  .tc-img { width: 132px; height: 176px; }
}

/* ============ 队店导航行（1:1 复刻 fanatics 球队店 Men/Women/Kids/Jerseys/... 导航） ============ */
.team-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 4px 0 14px;
  padding: 15px 20px;
  min-height: 150px; /* 用户要求：实测行高 150px（fanatics 球队店头样式） */
  background: #041e42; /* 每队底色由 JS 内联覆盖（各队官方品牌色） */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.team-nav::-webkit-scrollbar { display: none; }
.tnav-logo { width: 120px; height: 120px; object-fit: contain; flex: 0 0 auto; }
/* 深色底球队：队徽/MXQ 图标用 2px 白色描边保证可读（drop-shadow 四向叠加成描边） */
.tnav-logo.on-dark {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.tnav-team {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* logo 与队名左对齐 */
  white-space: nowrap;
  flex: 0 0 auto;
}
.tnav-name {
  font-size: 40px; /* 用户要求：队名实测高 40px，白色粗体压在队色上 */
  line-height: 1;
  font-weight: 800;
  color: #fff;
}
.tnav-brand {
  display: flex;
  align-items: center; /* MXQ 图标与店名垂直居中成一组 */
  gap: 8px;
  margin-top: 6px;
}
.tnav-brand-logo {
  /* 新版组合标（M 焰标 + MXQ SHOP 渐变字，一张图）：显示高度与旧图标一致 50px */
  height: 50px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.tnav-brand-logo.on-dark {
  /* 用户要求（2026-10-07）：恢复白色描边且比原 1px 更细 → 0.5px 四向 */
  filter: drop-shadow(0.5px 0 0 #fff) drop-shadow(-0.5px 0 0 #fff) drop-shadow(0 0.5px 0 #fff) drop-shadow(0 -0.5px 0 #fff);
}


/* --------------------- Footer（对照 Fanatics 结构） --------------------- */
.site-footer {
  margin-top: 48px;
  background: #e5e7eb;
  color: #1f2937;
  border-top: 1px solid #cfd4da;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
  gap: 32px;
  /* 左右必须保留 .wrap 的 20px 内边距。此前写 `40px 0 28px` 把左右清零，
     导致整块页脚贴到视口边缘（x=0），再叠加 .footer-logo 的 left:-13px，
     logo 左侧被推出视口裁掉 —— 表现为 logo 左边少一座山峰。 */
  padding: 40px 20px 28px;
}
.footer-col h4 {
  margin: 0 0 14px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111827;
}
.footer-col .footer-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.footer-col .footer-link:hover { color: #111827; text-decoration: underline; }
.footer-brand .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
  /* 原为 left:-13px（负偏移），会把 logo 推出容器左边界造成裁切，已移除。 */
  margin-bottom: 10px;
}
.footer-brand {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 页脚浅灰底专用横版 logo（MXQ SHOP 已并入图内）：桌面 85px，随宽度自适应 */
.footer-brand .footer-logo img {
  height: 85px;
  width: auto;
  display: block;
}
.footer-brand .footer-logo-text {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  position: relative;
  left: -1px;
}
.footer-brand .footer-logo:hover { opacity: 0.88; }
.footer-brand p { margin: 0 0 18px; font-size: 12.5px; color: #4b5563; }
/* 社交块沉到栏底，与右侧订阅框底部对齐 */
.footer-social-head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #374151; margin: auto 0 10px; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 35px; }
.footer-socials .social-link { width: 36px; height: 36px; }
.footer-news p { margin: 0 0 12px; font-size: 13px; color: #4b5563; }
#newsletter-form { display: flex; gap: 8px; }
#newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #9ca3af;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
}
#newsletter-form input::placeholder { color: #6b7280; }
#newsletter-form button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 0;
  background: #e11d48;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
#newsletter-form button:disabled { opacity: 0.6; cursor: default; }
.newsletter-msg { margin-top: 10px; font-size: 12.5px; }
.newsletter-msg.ok { color: #15803d; }
.newsletter-msg.bad { color: #dc2626; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 26px;
  border-top: 1px solid #cfd4da;
}
.footer-bottom .pay-icons { margin-top: 0; }
.footer-bottom .pay-icons img {
  height: 26px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.15);
}
.footer-bottom .copyright { margin: 0; font-size: 12px; color: #4b5563; }
/* 经营主体披露行（跨境支付 KYC / 独立站合规）：独占整行，排在支付图标与版权之下。
   2026-10-15 新增，类名 .footer-legal 为专用（勿复用到其他块）。 */
.footer-bottom .footer-legal {
  flex-basis: 100%;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #6b7280;
}
.footer-bottom .footer-legal b { color: #4b5563; font-weight: 600; }
.footer-bottom .footer-legal a { color: #4b5563; text-decoration: underline; }
.footer-bottom .footer-legal a:hover { color: #111827; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ---- 移动端页脚撑破布局修复（2026-10-09）----
   症状：390px 视口下整页出现横向滚动，文档宽 432 > 视口 390。
   根因：grid 子项默认 min-width:auto，里面的长链接/订阅框不肯收缩，
        把 1fr 轨道撑到 400px（可用宽仅 326px），把 .footer-grid 顶破 54px。
   注意：900px 断点生效的是 1fr 1fr 两列，560px 才单列 —— 390px 虽命中
        560 规则，但两列 + min-width:auto 仍会超宽，故两处都要修。
   修法：列宽改minmax(0, 1fr)（允许轨道收缩到 0），
        并给 .footer-col 加 min-width:0 让子项也能收缩。 */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-col { min-width: 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .footer-col { min-width: 0; }
}

/* --------------------- Footer 内容页 --------------------- */
.content-page { max-width: 760px; margin: 0 auto; padding: 28px 0 40px; }
.cp-head h1 {
  margin: 0 0 18px;
  font-size: 26px;
  color: #0f172a;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
}
.cp-body { font-size: 14.5px; line-height: 1.75; color: #334155; }
.cp-body h2 { font-size: 16px; margin: 22px 0 8px; color: #0f172a; }
.cp-body p { margin: 0 0 10px; }
.cp-body a { color: #e11d48; }
.cp-body b { color: #0f172a; }

/* ==================================================================
   移动端 App 化（2026-09-30）
   目标：手机浏览器 / 添加到主屏后获得 App 式购物体验，功能与 PC 端一致
   ================================================================== */

/* 1) 小屏商品卡紧凑排版（配合 ≤520px 两列网格） */
@media (max-width: 520px) {
  .card { border-radius: 12px; }
  .card:hover { transform: none; box-shadow: var(--shadow); }
  .card-body { padding: 10px 10px 12px; gap: 6px; }
  .card-cat { font-size: 10px; letter-spacing: 0.4px; }
  .card-title { font-size: 12.5px; }
  .card-sub { font-size: 10.5px; }
  .price-row { gap: 6px; }
  .price-now { font-size: 16px; }
  .price-was { font-size: 11px; }
  .price-off { font-size: 10.5px; padding: 1px 5px; }
  .badge { font-size: 10px; padding: 3px 7px; }
  .badge-row { top: 7px; left: 7px; gap: 4px; }
  .fav-btn { transform: scale(0.92); }
}

/* 2) 购物车抽屉：小屏全宽（App 式整页购物车） */
@media (max-width: 520px) {
  .drawer { width: 100vw; border-left: 0; }
}

/* 3) 详情页底部吸底购买栏（仅移动端显示，由 app.js 在详情路由挂载） */
#mobile-buy-bar { display: none; }
@media (max-width: 749px) {
  #mobile-buy-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.10);
  }
  .mbb-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
  .mbb-price { font-size: 17px; font-weight: 800; color: var(--sale); white-space: nowrap; }
  .mbb-stock { font-size: 10.5px; color: var(--ok); white-space: nowrap; }
  .mbb-stock.low { color: var(--sale); }
  #mobile-buy-bar .btn-primary,
  #mobile-buy-bar .btn-now { height: 44px; padding: 0 8px; white-space: nowrap; }
  /* 吸底栏占位：详情页内容不被遮挡 */
  body.mbb-on { padding-bottom: 74px; }
}

/* 4) 回到顶部按钮避开吸底购买栏 */
@media (max-width: 749px) {
  .to-top { bottom: 92px; }
}

/* 5) PWA / 添加到主屏：状态栏与主题色（配合 manifest.webmanifest） */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
}

/* ==================== M5/M7 基础架构模块补充样式（2026-10-06） ==================== */

/* ---- M5 骨架屏：与商品卡同构的占位块，微光扫过动画 ---- */
.skeleton-grid { margin-top: 14px; }
.sk-card { pointer-events: none; }
.sk-block {
  width: 100%; height: 100%;
  background: linear-gradient(100deg, #e9edf4 40%, #f5f7fb 50%, #e9edf4 60%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line {
  height: 12px; border-radius: 6px; margin: 8px 0;
  background: linear-gradient(100deg, #e9edf4 40%, #f5f7fb 50%, #e9edf4 60%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line.w50 { width: 50%; } .sk-line.w60 { width: 60%; }
.sk-line.w70 { width: 70%; } .sk-line.w80 { width: 80%; } .sk-line.w90 { width: 90%; }
@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-block, .sk-line { animation: none; }
}

/* ---- M7 a11y：跳转主内容链接（仅键盘聚焦时可见）+ 统一焦点指示 ---- */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 9999;
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  background: #0b1220; color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#app:focus { outline: none; }

/* 内容页（无障碍声明等）排版 */
.cp-body ul { margin: 8px 0 14px 22px; list-style: disc; }
.cp-body li { margin: 6px 0; }

/* ==================== 商品与目录模块（2026-10-06） ==================== */

/* ---- M3 搜索页 ---- */
.search-page-head { padding: 18px 0 6px; }
.search-page-title { font-size: 22px; margin: 0 0 6px; }
.search-page-count { color: #64748b; font-size: 13px; }
.search-didyoumean { margin-top: 8px; font-size: 14px; color: #334155; }
.search-didyoumean a { color: #2563eb; font-weight: 700; text-decoration: underline; }
.search-empty-actions { padding: 8px 0 30px; }

/* ---- M2 品牌/尺码筛选（复用 list-tools 布局） ---- */
.lt-brand select, .lt-size select { min-width: 110px; max-width: 100%; }
/* 移动端：筛选项必须允许收缩，否则 select 的固有宽度会撑破 .list-tools
   （实测 390px 视口下 .lt-size 宽 363 > 内容区 302，右溢出 18px 导致整页横向滚动）。
   flex 子项默认 min-width:auto 不肯收缩，需显式 min-width:0 + flex:1 1 auto。 */
.lt-size, .lt-brand { min-width: 0; flex: 1 1 130px; }
@media (max-width: 749px) {
  .list-tools > .lt-size, .list-tools > .lt-brand { flex: 1 1 100%; }
}

/* ---- M1/M6 库存状态与缺货登记 ---- */
.stock-badge { display: inline-block; margin: 6px 0 2px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.stock-badge.low { background: #fef3c7; color: #92400e; }
.stock-badge.out { background: #fee2e2; color: #b91c1c; }
.oos-note { margin-top: 8px; font-size: 13px; color: #64748b; line-height: 1.6; }
.btn-primary.is-disabled, .btn-now.is-disabled { opacity: 0.45; cursor: not-allowed; }
.notify-form { margin: 12px 0 4px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.notify-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: #0f172a; }
.notify-row { display: flex; gap: 8px; }
.notify-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; }
.notify-msg { margin-top: 8px; font-size: 13px; color: #15803d; }
.notify-msg.bad { color: #b91c1c; }

/* ---- M6 发货仓 ---- */
.ships-from { margin-top: 12px; font-size: 13px; color: #475569; }
.ships-from b { color: #0f172a; margin-left: 6px; }

/* ---- M7 合规信息 ---- */
.detail-section.compliance { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; background: #fcfdff; }
.compliance-hint { color: #64748b; font-size: 13px; margin: 6px 0; }
.eu-responsible { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13px; color: #334155; }
.eu-responsible b { display: block; margin-bottom: 4px; color: #0f172a; }
.eu-responsible p { margin: 0; line-height: 1.6; }

/* ---- M5 相关推荐 / 评价区横滑复用 ---- */
.related, .reviews { max-width: 1200px; margin: 34px auto 0; padding: 0 18px; }
.related h3, .reviews h3 { font-size: 19px; margin: 0 0 12px; }
.related-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

/* ---- M4 评价 ---- */
.reviews-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.reviews-summary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; }
.stars-bg { color: #e2e8f0; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f59e0b; }
.stars-input { display: inline-flex; gap: 4px; }
.star-btn { font-size: 24px; line-height: 1; color: #d1d5db; background: none; border: none; cursor: pointer; padding: 0 2px; }
.star-btn.on { color: #f59e0b; }
.review-form { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.review-form.collapsed { display: none; }
.review-form .form-row { margin-bottom: 10px; }
.review-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #0f172a; }
.review-form label i { color: #dc2626; font-style: normal; margin-left: 2px; }
.review-form input, .review-form textarea { width: 100%; max-width: 560px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
.review-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-thumbs { display: inline-flex; gap: 8px; }
.review-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-thumb button { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(15,23,42,0.72); color: #fff; font-size: 11px; line-height: 18px; cursor: pointer; padding: 0; }
.review-add { padding: 8px 14px; border: 1px dashed #94a3b8; border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; color: #334155; }
.review-add:hover { border-color: #2563eb; color: #2563eb; }
.review-submit { max-width: 220px; }
.review-note { font-size: 12px; color: #94a3b8; margin: 8px 0 0; }
.review-item { padding: 16px 0; border-bottom: 1px solid #f1f5f9; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-head .stars { font-size: 16px; }
.review-author { font-size: 15px; color: #0f172a; }
.review-date { font-size: 13px; color: #94a3b8; }
.review-content { margin: 8px 0 0; font-size: 16px; color: #334155; line-height: 1.75; }
.review-imgs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.review-imgs img { width: 116px; height: 116px; object-fit: cover; border-radius: 10px; border: 1px solid #e2e8f0; cursor: zoom-in; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.review-imgs img:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14); }
.review-empty { padding: 16px 0; color: #64748b; font-size: 14px; }
.review-more { margin-top: 10px; }

/* ---- 商品标题下的评分条（2026-10-14）：星级 + 均值 + N 条评价，点击跳到评价区 ---- */
.buy-rating { margin: 7px 0 3px; }
.buy-rating-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: #334155; cursor: pointer; }
.buy-rating-btn:hover .buy-rating-avg, .buy-rating-btn:hover .buy-rating-count { text-decoration: underline; }
.buy-rating .stars { font-size: 16px; }
.buy-rating-static { display: inline-flex; align-items: center; gap: 8px; }
.buy-rating-static .stars { opacity: 0.55; }
.buy-rating-avg { font-size: 14px; color: #0f172a; }
.buy-rating-sep { color: #cbd5e1; }
.buy-rating-count { font-size: 14px; color: #475569; }
.buy-rating-meta { font-size: 14px; color: #64748b; }

/* ---- 评价晒图灯箱（2026-10-14）：点击放大 / 左右切换 / ESC 关闭 ---- */
.rv-lb { position: fixed; inset: 0; z-index: 2147483610; display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; background: rgba(8, 12, 22, 0.9); }
.rv-lb[hidden] { display: none; }
.rv-lb-img { max-width: 100%; max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); background: #0b1220; }
.rv-lb-btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.rv-lb-btn:hover { background: rgba(255, 255, 255, 0.3); }
.rv-lb-btn[hidden] { display: none; }
.rv-lb-close { top: 18px; right: 20px; }
.rv-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.rv-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.rv-lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); color: #e2e8f0; font-size: 13px; }
.rv-lb-count[hidden] { display: none; }
@media (max-width: 560px) {
  .review-imgs img { width: 92px; height: 92px; }
  .review-content { font-size: 15.5px; }
  .rv-lb-btn { width: 38px; height: 38px; font-size: 19px; }
  .rv-lb-close { top: 12px; right: 12px; }
  .rv-lb-prev { left: 8px; }
  .rv-lb-next { right: 8px; }
}

/* ==================== 交易与支付模块（2026-10-06） ==================== */

/* 税费行 */
.summary-row.tax > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tax-hint {
  font-size: 11px;
  color: var(--muted, #8a8f98);
  font-weight: 400;
}
.summary-row.tax-estimate span:last-child {
  color: var(--muted, #8a8f98);
  font-style: italic;
}

/* 礼品卡输入行 */
.giftcard-row input {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.giftcard-applied {
  border-color: #b8912f;
}

/* 支付徽章带（结账页合规展示） */
.pay-badges {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.pay-badges-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.pay-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pay-badges-row .pay-badge {
  height: 22px;
  width: auto;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 4px;
  padding: 2px 4px;
  background: #fff;
}
.pay-chip {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 4px;
  padding: 3px 7px;
  background: #fff;
  color: var(--ink, #111827);
}
.terms-links a {
  color: inherit;
  text-decoration: underline;
}

/* 礼品卡码展示（订单页） */
.giftcard-code-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px dashed #b8912f;
  border-radius: 8px;
  margin: 6px 0;
  background: #fffdf5;
}
.giftcard-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}
.giftcard-balance {
  font-size: 12px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

/* 礼品卡购买页面额选择 */
.gc-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gc-amounts .gc-amount {
  border: 1px solid var(--line, #d1d5db);
  border-radius: 999px;
  background: #fff;
  padding: 7px 18px;
  font-weight: 600;
  cursor: pointer;
}
.gc-amounts .gc-amount.active {
  border-color: var(--ink, #111827);
  background: var(--ink, #111827);
  color: #fff;
}

/* Stripe 组件容器 */
#stripe-payment-element,
#stripe-wallet {
  margin-top: 8px;
  min-height: 40px;
}
#paypal-buttons {
  min-height: 45px;
}

/* ==================================================================
   Footer「Get the App」块（Fanatics 式：订阅栏上方，右下角）
   品牌二维码 + Google Play / App Store 官方徽章
   ================================================================== */
.footer-app-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
.footer-app-qr {
  flex: 0 0 auto;
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
  transition: transform 0.15s;
}
.footer-app-qr:hover { transform: none; } /* 二维码纯展示不跳转，去掉悬停动效（2026-10-07） */
.footer-app-qr { cursor: default; }
.footer-app-qr img { display: block; width: 96px; height: 96px; }
.footer-app-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-app-badges a { display: block; line-height: 0; transition: transform 0.15s; }
.footer-app-badges a:hover { transform: translateY(-1px); }
/* 两徽章统一为 App Store 尺寸 108x36（用户要求同尺寸，2026-10-07） */
.footer-app-badges img { width: 108px; height: 36px; border-radius: 5px; }
@media (max-width: 900px) {
  .footer-app-badges { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ==================== U 系列用户与会员模块（2026-10-07） ==================== */
/* 登录弹窗：第三方登录 */
.oauth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: #94a3b8; font-size: 12px; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.oauth-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 12.5px; cursor: pointer; transition: border-color .15s, transform .15s; }
.oauth-btn:hover { border-color: #94a3b8; transform: translateY(-1px); }
.oauth-apple svg { color: #111; }
/* 2FA 步骤 */
#twofa-form .form-row label { font-size: 12.5px; color: #475569; }
#tf-code { letter-spacing: 6px; text-align: center; font-size: 18px; }
/* 账号中心页 */
.acct-page-head { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.account-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.account-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: 13px; cursor: pointer; }
.account-tab.active { background: #111318; color: #fff; border-color: #111318; }
.u-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.u-card h3 { margin: 0 0 10px; font-size: 14.5px; }
.u-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.u-card-head h3 { margin: 0; }
.u-form { display: flex; flex-direction: column; gap: 8px; }
.u-form input, .u-form select { padding: 9px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; width: 100%; }
.u-form-row { flex-direction: row; gap: 8px; }
.u-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }
.u-check input { width: auto; }
.ok-note { color: #16a34a; font-size: 13px; margin: 4px 0 10px; }
.u-qr { margin: 10px 0; }
.u-qr canvas { border-radius: 8px; border: 1px solid #e2e8f0; }
.session-row, .ledger-row, .alert-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.session-row:last-child, .ledger-row:last-child { border-bottom: 0; }
.tag-current, .tag-default { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: 11px; margin-left: 6px; }
.tag-new { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #b45309; font-size: 11px; margin-left: 6px; }
.tag-drop { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 11.5px; font-weight: 600; margin-left: 8px; }
.btn-ghost { padding: 6px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; font-size: 12.5px; cursor: pointer; }
.btn-ghost.danger { color: #b91c1c; border-color: #fecaca; }
.small { font-size: 11.5px; }
.selectable { user-select: all; }
/* 地址簿 */
.addr-card { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.addr-card.is-default { background: #fafaff; }
.addr-actions { display: flex; gap: 6px; align-items: flex-start; }
/* 会员积分 */
.loyalty-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.loyalty-tier { font-size: 20px; font-weight: 700; }
.loyalty-balance { font-size: 26px; font-weight: 700; color: #4f46e5; }
.loyalty-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin: 8px 0 6px; }
.loyalty-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 999px; }
.ledger-row .up { color: #16a34a; }
.ledger-row .down { color: #b91c1c; }
/* 收藏增强列表 */
.fav-list { display: flex; flex-direction: column; gap: 12px; }
.fav-row { display: flex; gap: 14px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.fav-thumb { flex: 0 0 96px; }
.fav-thumb img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: #f8fafc; }
.fav-info { flex: 1; min-width: 0; }
.fav-title { font-weight: 600; font-size: 14px; color: inherit; text-decoration: none; }
.fav-price { margin: 6px 0; display: flex; align-items: center; flex-wrap: wrap; }
.fav-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* 结算页已存地址 */
.ck-saved { margin: 4px 0 12px; }
.ck-saved-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ck-addr-chip { padding: 6px 12px; border: 1px dashed #cbd5e1; border-radius: 999px; background: #f8fafc; font-size: 12px; cursor: pointer; }
.ck-addr-chip:hover { border-color: #4f46e5; color: #4f46e5; }
.u-center-link { background: #f1f5f9; border: 1px solid #e2e8f0; color: #0f172a; }
@media (max-width: 640px) {
  .oauth-row { grid-template-columns: 1fr; }
  .fav-row { flex-direction: row; }
  .loyalty-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   X 客服信任 + 合规模块样式（命令1 & 命令3）
   ============================================================ */

/* ---------- CMP Cookie 同意（命令3.1） ---------- */
.cmp-banner {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 2147483600;
  background: #0f172a; color: #e2e8f0; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.45); padding: 16px 18px;
  max-width: 720px; margin: 0 auto; font-size: 13px;
}
.cmp-inner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cmp-text b { display: block; margin-bottom: 4px; font-size: 14px; }
.cmp-text p { margin: 0 0 8px; color: #94a3b8; line-height: 1.5; }
.cmp-text a { color: #7dd3fc; text-decoration: underline; }
.cmp-cats { display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-cat { display: inline-flex; align-items: center; gap: 5px; color: #cbd5e1; font-size: 12.5px; cursor: pointer; }
.cmp-cat input { accent-color: #7c3aed; }
.cmp-cat.on { opacity: 0.75; cursor: default; }
.cmp-cats.vertical { flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0; }
.cmp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-btn {
  border: 1px solid #475569; background: #1e293b; color: #e2e8f0;
  border-radius: 10px; padding: 9px 16px; font-size: 13px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.cmp-btn:hover { background: #334155; }
.cmp-btn.primary { background: linear-gradient(135deg, #7c3aed, #db2777); border: none; color: #fff; }
.cmp-btn.primary:hover { filter: brightness(1.1); background: linear-gradient(135deg, #7c3aed, #db2777); }
.cmp-btn.ghost { background: transparent; border-color: #334155; }
.cmp-modal-mask {
  position: fixed; inset: 0; z-index: 2147483601; background: rgba(2, 6, 23, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.cmp-modal {
  position: relative; background: #0f172a; color: #e2e8f0; border-radius: 18px;
  padding: 22px; max-width: 480px; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.6); font-size: 13.5px;
}
.cmp-modal h3 { margin: 0 0 8px; font-size: 17px; }
.cmp-modal p { color: #94a3b8; line-height: 1.55; margin: 0 0 10px; }
.cmp-modal a { color: #7dd3fc; }
.cmp-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #94a3b8; font-size: 16px; cursor: pointer; padding: 4px;
}
.cmp-close:hover { color: #e2e8f0; }

/* 年龄门槛（命令3.4） */
.age-gate .cmp-modal { max-width: 380px; text-align: center; }
.age-gate .cmp-actions { justify-content: center; margin-top: 14px; }

/* 受限地区拦截（命令3.4） */
.cx-block-page {
  position: fixed; inset: 0; z-index: 2147483647; background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.cx-block-card { text-align: center; color: #e2e8f0; padding: 30px; }
.cx-block-card h2 { font-size: 34px; letter-spacing: 4px; margin-bottom: 14px; }
.cx-block-card a { color: #7dd3fc; }

/* 区域合规横幅（命令3.3） */
.cx-region-banner {
  position: relative; z-index: 60; background: #fef3c7; color: #78350f;
  font-size: 12.5px; padding: 8px 0;
}
.cx-region-banner .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-resp { opacity: 0.8; }

/* ---------- 信任展示（命令1.5） ---------- */
.trust-strip { padding: 26px 0 8px; }
.trust-strip-inner h3 { font-size: 18px; margin: 0 0 14px; text-align: center; }
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.trust-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; color: #0f172a;
}
.trust-item svg { flex: none; color: #7c3aed; margin-top: 2px; }
.trust-item b { display: block; font-size: 13.5px; }
.trust-item span { display: block; font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.45; }
.trust-mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.trust-chip {
  font-size: 11px; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 999px; padding: 3px 10px;
}

/* ---------- 尺码助手（命令1.4） ---------- */
.size-assist .cmp-modal { max-width: 460px; }
.sa-intro { margin-top: 0; }
.sa-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.sa-row label { display: flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 13px; }
.sa-row input {
  width: 90px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.sa-result { min-height: 26px; margin: 8px 0; font-size: 15px; color: #e2e8f0; }
.sa-size { color: #a78bfa; font-size: 19px; letter-spacing: 1px; }
.sa-measure { margin-top: 14px; color: #94a3b8; font-size: 12.5px; }
.sa-measure b { color: #cbd5e1; display: block; margin-bottom: 6px; }
.sa-measure ol { margin: 0; padding-left: 18px; line-height: 1.7; }
.sa-fit { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; color: #cbd5e1; font-size: 13px; }

/* ---------- 在线客服聊天窗（命令1.1）+ AI 客服 + WhatsApp 悬浮按钮组 ---------- */
.cx-fab-group {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(calc(-50% + 100px));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 2147483590;
}
.cx-fab {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.cx-fab:hover { filter: brightness(1.08); transform: scale(1.05); }
.cx-fab-ai {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}
.cx-fab-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}
@media (max-width: 640px) {
  .cx-fab-group { right: 12px; gap: 10px; }
  .cx-fab { width: 46px; height: 46px; }
  .cx-fab svg { width: 22px; height: 22px; }
}
.cx-fab .cx-fab-badge {
  position: absolute; top: -2px; right: -2px; background: #22c55e; color: #fff;
  border-radius: 50%; width: 16px; height: 16px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.cx-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483591;
  width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(2, 6, 23, 0.35);
  display: flex; flex-direction: column; overflow: hidden; color: #0f172a;
}
.cx-ai-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483591;
  width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(2, 6, 23, 0.35);
  display: flex; flex-direction: column; overflow: hidden; color: #0f172a;
}
.cx-ai-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.cx-ai-links a { font-size: 12.5px; color: #2563eb; text-decoration: none; word-break: break-all; }
.cx-ai-links a:hover { text-decoration: underline; }
.cx-chat-head {
  background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff;
  padding: 13px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.cx-chat-head b { display: block; font-size: 14.5px; }
.cx-chat-head span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: 0.9; margin-top: 3px; }
.cx-chat-head .cmp-close { color: rgba(255, 255, 255, 0.8); }
.cx-chat-head .cmp-close:hover { color: #fff; }
.cx-chat-body { flex: 1; overflow-y: auto; padding: 12px; background: #f8fafc; }
.cx-chat-faq { padding: 0 12px; max-height: 110px; overflow-y: auto; }
.cx-chat-faq b { display: block; font-size: 11px; color: #64748b; margin: 6px 0 4px; }
.cx-chat-faq a { display: block; font-size: 12.5px; color: #2563eb; padding: 4px 0; text-decoration: none; }
.cx-chat-faq a:hover { text-decoration: underline; }
.cx-chat-foot { padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.cx-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block; }
.cx-dot.on { background: #22c55e; }
.cx-thread { display: flex; flex-direction: column; gap: 10px; }
.cx-msg { max-width: 82%; font-size: 13px; line-height: 1.5; }
.cx-msg.theirs { align-self: flex-start; }
.cx-msg.mine { align-self: flex-end; text-align: right; }
.cx-msg b { font-size: 10.5px; color: #7c3aed; display: block; margin-bottom: 2px; }
.cx-msg.mine b { color: #64748b; }
.cx-msg p { margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 11px; }
.cx-msg.mine p { background: #ede9fe; border-color: #ddd6fe; }
.cx-msg time { font-size: 10px; color: #94a3b8; margin-top: 2px; display: block; }
.cx-loading { color: #94a3b8; font-size: 12px; text-align: center; padding: 18px 0; }
.cx-form { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cx-form p { margin: 0 0 4px; color: #64748b; font-size: 12.5px; }
.cx-form input, .cx-form textarea, .cx-form select {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.cx-form textarea { resize: vertical; }
.cx-error { color: #dc2626; font-size: 12px; min-height: 15px; word-break: break-all; }
.cx-error.ok { color: #059669; }
.cx-inputrow, .cx-faqrow { display: flex; gap: 8px; }
.cx-inputrow input, .cx-faqrow input {
  flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 11px; font-size: 13px;
}
.cx-inputrow .cmp-btn { padding: 8px 14px; }

/* 支持页（命令1.1） */
.support-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; margin-top: 14px; }
.support-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
  margin-bottom: 12px; font-size: 13.5px;
}
.support-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.support-card p { margin: 4px 0; color: #475569; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.support-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
.support-form h3 { margin: 0 0 10px; font-size: 14.5px; }

/* ---------- 帮助中心（命令1.3） ---------- */
.cx-page { max-width: 860px; margin: 0 auto; }
.help-top { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.help-cat { margin-bottom: 20px; }
.help-cat h2 { font-size: 16px; margin: 0 0 10px; }
.help-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.help-link {
  display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 11px 14px; font-size: 13.5px; color: #0f172a; text-decoration: none;
}
.help-link:hover { border-color: #7c3aed; color: #7c3aed; }
.help-article-body { font-size: 14.5px; line-height: 1.75; }
.help-article-body a { color: #2563eb; }

/* ---------- 政策版本页（命令1.2） ---------- */
.policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.policy-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 15px;
  text-decoration: none; color: #0f172a; display: flex; flex-direction: column; gap: 5px;
}
.policy-card:hover { border-color: #7c3aed; }
.policy-card b { font-size: 14px; }
.policy-card span { font-size: 12px; color: #64748b; }
.policy-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 12.5px; color: #475569; }
.policy-badge {
  background: #ede9fe; color: #6d28d9; border-radius: 999px; padding: 3px 12px; font-weight: 700;
}
.policy-sum { color: #64748b; }
.policy-versions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px;
  font-size: 12.5px; color: #475569;
}
.policy-ver-btn {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; cursor: pointer; color: #334155;
}
.policy-ver-btn.on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.policy-body { font-size: 14.5px; line-height: 1.8; }
.policy-body h3 { margin: 20px 0 8px; }
.policy-body a { color: #2563eb; }
.policy-body ul, .policy-body ol { padding-left: 22px; }

/* ---------- 隐私自助（命令3.2） ---------- */
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.pp-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
.pp-form h3 { margin: 0 0 10px; font-size: 14.5px; }
.pp-form label { font-size: 13px; color: #475569; display: flex; flex-direction: column; gap: 5px; }
.pp-status { font-size: 13px; color: #0f172a; margin-top: 8px; line-height: 1.6; word-break: break-all; }

/* 响应式 */
@media (max-width: 720px) {
  .support-grid, .pp-grid { grid-template-columns: 1fr; }
  .cx-chat { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .cmp-banner { left: 8px; right: 8px; bottom: 8px; }
  .cmp-inner { flex-direction: column; align-items: stretch; }
}

/* ==================================================================
   M1 多市场站点结构（2026-10-08）：市场选择项
   ================================================================== */
.locale-list-market {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.locale-list-market .locale-list-item { border-bottom: 1px solid var(--line); }
.locale-list-market .locale-list-item:last-child { border-bottom: 0; }
.market-item.active { background: #eef2ff; color: #3730a3; font-weight: 700; }
.market-item.active::after {
  content: '✓';
  margin-left: auto;
  font-weight: 800;
  color: #4338ca;
}
.market-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.locale-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-cur {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
}
.market-item.active .market-cur { background: #e0e7ff; color: #3730a3; }

/* ==================================================================
   M3/M4/M5 移动端 PWA + 性能 + 无障碍（2026-10-08）
   ================================================================== */

/* 注：skip-link 与 :focus-visible 已在 M7 a11y 段定义（2158 行），此处不重复。 */

/* ---- M3 触控目标：移动端可点元素不小于 44×44（WCAG 2.5.5 AAA / 平台 HIG） ---- */
@media (pointer: coarse) {
  .btn-primary,
  .btn-now,
  .btn-ghost,
  .pay-option,
  .locale-list-item,
  .qty-btn,
  .size-guide-btn,
  .opt-actions-vert button,
  .footer-app-badges a,
  .icon-btn,
  .nav-item > button {
    min-height: 44px;
  }
  .icon-btn { min-width: 44px; }
  /* 移动端按钮间距按 44px 目标重排 */
  .btn-primary + .btn-primary,
  .btn-now + .btn-now { margin-top: 10px; }
}

/* ---- M3 移动端支付体验：数字键盘 + 44px 触控 + 16px 以上字号防 iOS 自动缩放 ---- */
@media (max-width: 749px) {
  input[type="tel"],
  input[type="number"],
  input[type="email"],
  input[type="text"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px; /* <16px 会触发 iOS Safari 聚焦时自动放大，破坏移动端体验 */
    min-height: 44px;
  }
  .pay-option { padding: 14px 12px; }
  #card-pay, [data-pay-order] { min-height: 52px; font-size: 16px; }
}

/* ---- M4 性能：离屏内容跳过渲染，降低首屏主线程压力（LCP/INP） ---- */
@media (prefers-reduced-motion: no-preference) {
  .footer-col, .site-footer nav, .trust-strip { content-visibility: auto; contain-intrinsic-size: auto 400px; }
}

/* ---- M5 a11y：尊重系统「减少动态效果」设置 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- M3 PWA 离线兜底提示条 ---- */
.offline-bar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 560px);
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: #1f2937;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.32);
}
.offline-bar[hidden] { display: none; }
.offline-retry {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.offline-retry:hover { background: #e5e7eb; }

/* ==================================================================
   P1-4 多仓库存与预售（2026-10-08）
   ================================================================== */
.ships-from { line-height: 1.6; }
.wh-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wh-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #475569;
}
.wh-name { font-weight: 600; color: #0f172a; }
.wh-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.wh-tag.in { background: #dcfce7; color: #15803d; }
.wh-tag.pre { background: #fef3c7; color: #b45309; }
.wh-eta { margin-left: auto; color: #64748b; font-size: 12px; }

/* ==================================================================
   M8 结账页税费口径与合规展示（2026-10-08）
   ================================================================== */
.tax-disclosure {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}
.tax-disclosure .summary-row { padding: 3px 0; }
.tax-disclosure .summary-row.tax { color: #0f172a; font-weight: 600; }
.tax-disclosure .summary-row.tax-est { color: #64748b; font-size: 13px; }
.tax-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #475569;
}
.checkout-compliance {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.cc-link { font-size: 12.5px; color: #475569; text-decoration: underline; }
.cc-link:hover { color: #0f172a; }
.cc-note {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ==================================================================
   P0-4 前台优惠券展示（2026-10-08）
   ================================================================== */
.promo-coupons {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 100%);
}
.promo-heading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #0f172a;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.promo-hint { font-size: 12px; font-weight: 500; color: var(--muted); }
.promo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.promo-card:hover { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.promo-card.with-apply { cursor: pointer; }
.promo-card.urgent { border-color: #fb923c; background: #fff7ed; }
.promo-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.promo-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.promo-desc { font-size: 12px; color: #64748b; }
.promo-copy {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid #0f172a;
  border-radius: 8px;
  background: #0f1720;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.promo-copy:hover { background: #1e293b; }
.promo-copy code { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; }
.promo-copy span { font-size: 10px; opacity: 0.75; }
.promo-terms-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.promo-terms-note a { color: #475569; }
/* 购物车抽屉内紧凑些 */
.drawer-promo .promo-coupons { margin: 0 0 10px; padding: 12px; }
.drawer-promo .promo-list { grid-template-columns: 1fr; }
/* 结算侧栏：单列，窄栏里不横向挤压 */
.checkout-side .promo-list { grid-template-columns: 1fr; }
@media (max-width: 749px) {
  .promo-list { grid-template-columns: 1fr; }
}

/* ==================================================================
   P2-4 UGC 精选（顾客晒单，2026-10-08）
   ================================================================== */
.ugc-strip { margin: 18px 0 4px; }
.ugc-strip h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.ugc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.ugc-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ugc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1); }
.ugc-img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef2f8;
}
.ugc-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.ugc-meta { font-size: 12px; }
.ugc-meta b { color: #0f172a; font-weight: 700; }
.ugc-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.ugc-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
}
.ugc-link:hover { text-decoration: underline; }
@media (max-width: 749px) {
  .ugc-row { grid-template-columns: 1fr; }
  .ugc-img { width: 52px; height: 52px; }
}


/* X 尺码助手 v2：推荐来源标注（2026-10-08）
   注意：.sa-size 已有主题样式（深色弹窗内的浅紫色），此处只补 .sa-note，
   不要再给 .sa-size 设 color —— 那会把浅色字覆盖成深色，在深色弹窗上完全看不见。 */
.sa-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #94a3b8;
}

/* ============================================================
 * #7 搜索历史 / 热搜（复用既有 .chips/.chip 体系，仅加区块与热搜修饰）
 * ============================================================ */
.search-hist { margin: 14px 0 4px; }
.search-hist-block + .search-hist-block { margin-top: 12px; }
.search-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.chip-hist { color: var(--ink); }
.chip-hot { border-style: dashed; }

/* ============================================================
 * #7 无结果页优化（推荐 + 热门分类）
 * ============================================================ */
.search-empty-extras { margin: 18px 0 8px; }
.search-rec-cats { margin-bottom: 18px; }
.search-rec-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.search-rec-title { font-size: 16px; font-weight: 600; margin: 6px 0 12px; }
.search-rec-grid { margin: 0 -6px; }
.search-rec-grid .product-card { margin: 0; }

/* ============================================================
 * #5 商品对比(Compare)
 * ============================================================ */
/* 注意：这里的类名是 .cmp-fab（商品卡左下角圆形对比按钮）。
   不要叫 .cmp-btn —— 那是 Cookie 同意弹窗/客服等通用按钮的类（styles.css 前部 2528 行起），
   同名会因 CSS 后定义覆盖导致同意弹窗按钮被渲染成 30px 白色圆形（2026-10-12 修复）。 */
.cmp-fab {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  border-radius: 50%;
  color: #475569;
  cursor: pointer;
  z-index: 3;
}
.cmp-fab:hover { border-color: #94a3b8; color: var(--ink); }
.cmp-fab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.cmp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(15, 23, 42, .08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cmp-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cmp-bar-items { display: flex; gap: 8px; align-items: center; }
.cmp-bar-item, .cmp-bar-slot {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}
.cmp-bar-item img { width: 100%; height: 100%; object-fit: cover; }
.cmp-bar-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.cmp-bar-actions { display: flex; gap: 8px; align-items: center; }

.cmp-table-wrap { overflow-x: auto; margin: 16px 0 40px; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  vertical-align: middle;
}
.cmp-table th { background: #f8fafc; font-weight: 600; }
.cmp-table th img { width: 100%; max-width: 160px; border-radius: 6px; }
.cmp-th-title { font-size: 12.5px; margin: 6px 0; line-height: 1.4; }
.cmp-row-label { text-align: left; color: var(--muted); font-weight: 600; background: #f8fafc; white-space: nowrap; }

/* ============================================================
 * #4 商品问答 Q&A
 * ============================================================ */
.qa-section {
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.qa-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.qa-head h3 { margin: 0; font-size: 17px; }
.qa-summary { font-size: 12.5px; color: var(--muted); }
.qa-head .link-btn { margin-left: auto; }

.qa-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 16px;
}
.qa-form.collapsed { display: none; }
.qa-form .form-row { display: grid; gap: 6px; }
.qa-form label { font-size: 13px; font-weight: 600; }
.qa-form label i { color: #dc2626; font-style: normal; }
.qa-form input, .qa-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.qa-form input:focus, .qa-form textarea:focus {
  outline: none;
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}
.qa-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qa-form-note { font-size: 12.5px; color: var(--muted); }

.qa-list { display: grid; gap: 14px; }
.qa-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.qa-q, .qa-a { display: flex; gap: 10px; }
.qa-a { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.qa-badge {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0f172a; color: #fff;
  font-size: 12px; font-weight: 700;
}
.qa-badge-a { background: var(--brand); }
.qa-body { min-width: 0; }
.qa-text { margin: 2px 0 4px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.qa-meta { font-size: 12px; color: var(--muted); }
.qa-pending { margin-top: 8px; font-size: 12.5px; color: #b45309; }

/* ============================================================
 * #16 发票与单据
 * ============================================================ */
.invoice-list { display: grid; gap: 10px; }
.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.invoice-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.invoice-no { font-size: 12.5px; color: var(--muted); }
.invoice-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
 * #15 退货退款 / #18 换货申请
 * ============================================================ */
.rma-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rma-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.rma-load-wrap, .rma-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rma-items { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.rma-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.rma-item:hover { border-color: #94a3b8; }
.rma-item-body { display: grid; gap: 2px; min-width: 0; }
.rma-item-title { font-size: 13.5px; line-height: 1.45; }
.rma-type-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rma-type {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 13.5px; background: #fff;
}
.rma-type.active { border-color: var(--brand); color: var(--brand); background: rgba(211, 51, 51, .05); }
.rma-done { border-color: #16a34a; }
.rma-result { margin-top: 12px; }
.rma-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rma-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.rma-ok { background: #dcfce7; color: #15803d; }
.rma-bad { background: #fee2e2; color: #b91c1c; }
.rma-info { background: #e0f2fe; color: #0369a1; }
.rma-muted { background: #f1f5f9; color: #64748b; }
.rma-result-table { width: 100%; border-collapse: collapse; }
.rma-result-table th, .rma-result-table td {
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; vertical-align: top; word-break: break-word;
}
.rma-result-table th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 92px; }

/* ============================================================
 * #8 心愿单跨设备同步 + 订阅
 * ============================================================ */
.wl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fafc, #fff);
}
.wl-bar-text { display: grid; gap: 2px; min-width: 0; }
.wl-bar-text b { font-size: 14px; }
.wl-bar-text .muted { font-size: 12.5px; }
.wl-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-count {
  font-size: 12.5px;
  color: var(--brand);
  background: rgba(211, 51, 51, .06);
  padding: 3px 10px;
  border-radius: 999px;
}
.wl-share-out {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
.wl-share-out input {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
}

.wl-sub { margin-top: 10px; }
.wl-sub-toggle { font-size: 12.5px; }
.wl-sub-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.wl-sub-panel[hidden] { display: none; }
.wl-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.wl-sub-row input[type="number"] {
  width: 110px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.wl-sub-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.wl-sub-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
 * #31 推荐好友 / #47 站内消息（2026-10-11）
 * ============================================================ */
.referral-card .referral-share { margin: 12px 0; }
.referral-link-row { display: flex; gap: 8px; margin: 6px 0; }
.referral-link { flex: 1; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; background: #f8fafc; color: #0f172a; }
.referral-share-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.referral-code-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.referral-code { background: #0f172a; color: #fff; padding: 4px 10px; border-radius: 8px; letter-spacing: 1px; font-size: 14px; }
.referral-stats { display: flex; gap: 18px; margin-top: 10px; }
.referral-stat { display: flex; flex-direction: column; }
.referral-stat b { font-size: 20px; }
.referral-stat span { font-size: 12px; color: var(--muted); }
.msg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: background .15s; }
.msg-item:hover { background: #f8fafc; }
.msg-item.unread { border-color: var(--brand, #e11d48); background: #fff7f9; }
.msg-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg-type { text-transform: uppercase; letter-spacing: .5px; }
.msg-title { font-weight: 600; font-size: 14px; }
.msg-body { font-size: 13px; margin-top: 4px; }
.msg-count {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: #e11d48; color: #fff; border-radius: 9px; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
.msg-bell .fav-icon-wrap { position: relative; display: inline-flex; }

/* ==================== #23 本地自提 ==================== */
.fulfill-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.fulfill-opt {
  flex: 1; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted);
}
.fulfill-opt.active { border-color: var(--brand, #e11d48); color: var(--brand, #e11d48); background: #fff7f9; }
.pickup-wrap { margin-bottom: 12px; }
.pickup-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pickup-list { display: flex; flex-direction: column; gap: 8px; }
.pickup-point {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0;
  border-radius: 10px; cursor: pointer;
}
.pickup-point.active { border-color: var(--brand, #e11d48); background: #fff7f9; }
.pickup-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pickup-body small { color: var(--muted); font-size: 12px; }
.pickup-fee { color: #16a34a; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ==================== #27 会员专属价 ==================== */
.member-price { color: var(--brand, #e11d48); font-weight: 800; }
.member-price-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(90deg,#7c3aed,#db2777); color: #fff; font-size: 11px; font-weight: 700;
}
.cart-member-save { font-size: 13px; color: #16a34a; margin: 6px 0; }

/* ==================== #51 订阅制定期购 ==================== */
.sub-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.sub-panel { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.sub-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.sub-row:last-child { border-bottom: none; }
.sub-list { display: flex; flex-direction: column; gap: 8px; }
.sub-item { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.sub-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.sub-badge.active { background: #dcfce7; color: #16a34a; }
.sub-badge.paused { background: #fef9c3; color: #a16207; }
.sub-badge.cancelled { background: #f1f5f9; color: #64748b; }

/* ==================== #48/#49 B2B 门户 ==================== */
.b2b-hero { background: linear-gradient(120deg,#0f172a,#312e81); color: #fff; border-radius: 16px; padding: 28px; margin-bottom: 18px; }
.b2b-hero h1 { color: #fff; margin: 0 0 8px; }
.b2b-tiers { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin: 18px 0; }
.b2b-tier { border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
.b2b-tier b { font-size: 22px; }
.b2b-form { max-width: 560px; }
.b2b-form .form-row { margin-bottom: 12px; }
.b2b-form input, .b2b-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; }

/* ===== #48/#49 B2B 门户 + 团队订单 ===== */
.b2b-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin: 8px 0 28px; }
.b2b-form-card { border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; background: #fff; }
.b2b-form-card h3 { margin: 0 0 10px; font-size: 16px; }
.b2b-form label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 12px; }
.b2b-form input, .b2b-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; margin-top: 4px; }
.b2b-form textarea { resize: vertical; }
.b2b-form-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.b2b-form-msg.ok { color: #16a34a; }
.b2b-form-msg.err { color: #dc2626; }
.b2b-team-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.b2b-team-row .b2b-team-product { flex: 1; }
.b2b-team-row .b2b-team-qty { width: 90px; }
.b2b-hr { border: none; border-top: 1px dashed #e2e8f0; margin: 14px 0; }
.b2b-my { margin-top: 8px; }
.b2b-inq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.b2b-inq { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.b2b-inq-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; margin-right: 6px; }

/* ===== #51 订阅 — 账户中心 tab 列表 ===== */
.sub-list-row { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sub-list-actions { display: flex; gap: 14px; }

/* ================= 导入的客户评价墙（2026-10-14） =================
   数据：/api/store/imported-reviews；图片：/uploads/reviews/<file>
   两处使用：首页精选区块 .iw-section、独立页 /reviews .iw-page */

.iw-section { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.iw-section-head { text-align: center; margin-bottom: 22px; }
.iw-section-head h2 {
  margin: 0 0 8px; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.iw-section-sub { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; }
.iw-section-sub .iw-stars { font-size: 18px; }
.iw-section-more { text-align: center; margin-top: 22px; }

.iw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }

.iw-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.iw-head { display: flex; align-items: center; gap: 9px; }
.iw-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: #eff6ff; color: var(--brand); font-size: 13px; font-weight: 700;
}
.iw-name { font-size: 14px; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-date { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.iw-meta { display: flex; align-items: center; gap: 8px; }
.iw-stars { font-size: 16px; }
.iw-badge {
  font-size: 11px; font-weight: 600; color: var(--ok); background: #ecfdf5;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.iw-content {
  margin: 0; font-size: 14px; color: #334155; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.iw-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 176px; }
.iw-photos:has(> .iw-photo:only-child) { grid-template-columns: 1fr; }
.iw-photos:has(> .iw-photo:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.iw-photo {
  display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: #f8fafc; height: 100%;
}
.iw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.iw-photo:hover img { transform: scale(1.04); }
.iw-photos--fallback .iw-photo { background: #fff; }
.iw-photos--fallback .iw-photo img { object-fit: contain; padding: 8px; }
.iw-photos--fallback .iw-photo:hover img { transform: none; }

.iw-product {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line);
}
/* 可点击态（评价已定位到目录商品）：整块即站内链接，hover / 键盘聚焦给出明确提示 */
a.iw-product--link {
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
a.iw-product--link .iw-prod-title {
  text-decoration: underline;
  text-decoration-color: rgba(100, 116, 139, .45);
  text-underline-offset: 2px;
}
a.iw-product--link:hover { border-color: var(--brand); background: #fff; box-shadow: 0 2px 10px rgba(29, 78, 216, .10); }
a.iw-product--link:hover .iw-prod-title { color: var(--brand); text-decoration-color: var(--brand); }
a.iw-product--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.iw-product--link { transition: none; } }
.iw-prod-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.iw-prod-title {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.iw-loading { grid-column: 1 / -1; padding: 34px; text-align: center; color: var(--muted); font-size: 14px; }

/* 独立页 /reviews */
.iw-page { padding: 6px 0 48px; }
.iw-page-head { text-align: center; margin: 6px 0 26px; }
.iw-page-head h1 { margin: 0 0 10px; font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; }
.iw-page-sub { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; }
.iw-page-sub .iw-stars { font-size: 20px; }
.iw-page-more { text-align: center; margin-top: 26px; }

@media (max-width: 640px) {
  .iw-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .iw-card { padding: 12px; gap: 8px; }
  .iw-av { width: 26px; height: 26px; font-size: 12px; }
  .iw-content { -webkit-line-clamp: 4; }
  .iw-page-head h1 { font-size: 22px; }
  .iw-prod-title { font-size: 11.5px; }
}