: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 行上方，高度贴合按钮） ---------------- */
/* 顶部细栏：灰色底、高 28px，Track Order 按钮靠左上角（白色、高 20px、带边框） */
.topbar { background: #9aa0a6; border-bottom: 1px solid #878d93; }
.topbar-inner { display: flex; justify-content: flex-start; align-items: center; padding: 3px 20px; min-height: 28px; }
.topbar-inner .hbtn {
  height: 20px; min-width: 110px; justify-content: center;
  background: #fff; border-color: #c9ccd1;
  font-size: 11px; gap: 4px; padding: 0 14px;
}
.topbar-inner .hbtn svg { width: 12px; height: 12px; }

.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-inner { display: flex; align-items: center; gap: 22px; height: 80px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* logo 是「球员 + MXQ + 球徽」的横版组合标：按高度自适应宽度，不能按方块拉伸 */
.brand img { height: 62px; width: auto; display: block; }
/* 商品分类导航栏：独立一行，位于 logo 导航下方（横向可滚动，两侧渐隐提示还有更多分类） */
.catbar-wrap {
  position: sticky;
  top: 80px;
  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: 46px; }
}
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }

/* ---------------- 商品网格页码条 ---------------- */
.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; }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; 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); }
.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: #64748b; 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 var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.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 {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-fg, #fff);
  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: 40px; }
}

/* --------------------- 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: 82px;
  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) {
  .locale-pop { top: 74px; 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: 150px; }
.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; }

.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; gap: 6px;
  padding: 2px 8px 2px 2px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.patch-chip img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: #f6f8fb; }
.patch-chip-label {
  font-size: 11px; color: var(--text, #1f2937); max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.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; } }

/* ------------ 一级分类悬停大菜单（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; }
.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; }
.mega-partnership img { display: block; width: 150px; height: auto; }
.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 {
  height: 50px; /* 用户要求：MXQ 图标实测高 50px，无白圆底托 */
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.tnav-brand-logo.on-dark {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.tnav-brand-text {
  font-size: 14px; /* 用户要求：店名 14px */
  line-height: 1;
  font-weight: 800;
  letter-spacing: 2px; /* 用户要求：字距 2px */
  color: #fff;
  white-space: nowrap;
}