/* Baseball Wear Hub — Navigation v5.3 (full-width + team logos) | 作用域化版，勿删顶部注释 */
/* ===== v1 视觉样式完整保留（Apple spring / 毛玻璃 / 抽屉 / Tab Bar） ===== */
:root {
  --bwh-black: #000000;
  --bwh-text-hi: #f5f5f7;
  --bwh-text-sub: #a1a1a6;
  --bwh-panel-bg: rgba(255, 255, 255, 0.96);
  --bwh-panel-text: #1d1d1f;
  --bwh-panel-muted: #6e6e73;
  --bwh-surface-subtle: #f5f5f7;
  --bwh-hairline-dark: rgba(255, 255, 255, 0.14);
  --bwh-hairline-light: rgba(0, 0, 0, 0.08);
  --bwh-accent-red: #e32636;
  --bwh-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --bwh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bwh-menu-h: 58px;
  /* [v5] 顶栏与下拉共用同一条安全边距，通铺时两侧仍对齐 */
  --bwh-gutter: clamp(16px, 2.2vw, 40px);
}
/* ===== 全局样式已作用域化：绝不影响主题其它模块 =====
   独立演示版里的 `* {margin:0;padding:0}` / `body{background:#fafafa}` /
   `a{}` / `button{}` / `img{}` 若原样塞进主题，会重置整站盒模型、
   改掉页面背景色、清掉所有链接与按钮默认样式。此处全部限定到 .bwh-* 根节点。 */
.bwh-header, .bwh-header *, .bwh-header *::before, .bwh-header *::after,
.bwh-drawer, .bwh-drawer *, .bwh-drawer *::before, .bwh-drawer *::after,
.bwh-tabbar, .bwh-tabbar *, .bwh-tabbar *::before, .bwh-tabbar *::after,
.bwh-desktop-backdrop, .bwh-mask { box-sizing: border-box; }
.bwh-header, .bwh-drawer, .bwh-tabbar {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  color: var(--bwh-panel-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.bwh-header a, .bwh-drawer a, .bwh-tabbar a { text-decoration: none; color: inherit; }
.bwh-header button, .bwh-drawer button, .bwh-tabbar button {
  background: none; border: 0; font: inherit; cursor: pointer; color: inherit;
}
.bwh-header img, .bwh-drawer img, .bwh-tabbar img { display: block; max-width: 100%; }
.bwh-header a:focus-visible, .bwh-header button:focus-visible,
.bwh-drawer a:focus-visible, .bwh-drawer button:focus-visible, .bwh-drawer summary:focus-visible {
  outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .bwh-header *, .bwh-header *::before, .bwh-header *::after,
  .bwh-drawer *, .bwh-drawer *::before, .bwh-drawer *::after,
  .bwh-tabbar *, .bwh-tabbar *::before, .bwh-tabbar *::after {
    transition: none !important; animation: none !important;
  }
}
.bwh-header { background: var(--bwh-black); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--bwh-hairline-dark); }
/* ===== [v5] 一级菜单通铺占满：去掉 1320px 收口，8 项等分整条宽度 ===== */
.bwh-header__inner { max-width: none; margin: 0; padding: 0 var(--bwh-gutter); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 1.6vw, 32px); height: var(--bwh-menu-h); }
.bwh-logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.08em; white-space: nowrap; margin-right: 0; flex: none; transition: opacity 0.2s var(--bwh-ease-out); }
.bwh-logo:hover { opacity: 0.85; }
.bwh-nav { display: flex; align-items: stretch; height: 100%; flex: 1 1 auto; min-width: 0; justify-content: stretch; }
.bwh-nav__item { display: flex; align-items: center; flex: 1 1 0; min-width: 0; justify-content: center; }
.bwh-nav__link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; flex: 0 0 100%; width: 100%; color: var(--bwh-text-hi); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.055em; padding: 0 6px; height: var(--bwh-menu-h); transition: color 0.25s var(--bwh-ease-out); }
.bwh-nav__link::after { content: ""; position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px; background: #fff; transform: scaleX(0); transform-origin: center; transition: transform 0.32s var(--bwh-spring); }
.bwh-nav__item:hover > .bwh-nav__link, .bwh-nav__item:focus-within > .bwh-nav__link, .bwh-nav__item.is-open > .bwh-nav__link { color: #fff; }
.bwh-nav__item:hover > .bwh-nav__link::after, .bwh-nav__item:focus-within > .bwh-nav__link::after, .bwh-nav__item.is-open > .bwh-nav__link::after { transform: scaleX(1); }
.bwh-nav__link .caret { width: 9px; height: 6px; stroke: currentColor; stroke-width: 1.7; fill: none; opacity: 0.6; transition: transform 0.35s var(--bwh-spring), opacity 0.25s; }
.bwh-nav__item:hover .caret, .bwh-nav__item.is-open .caret { transform: rotate(180deg); opacity: 1; }
.bwh-flag { width: 7px; height: 7px; border-radius: 50%; background: var(--bwh-accent-red); margin-left: 2px; flex: none; box-shadow: 0 0 0 3px rgba(227, 38, 54, 0.26); }
.bwh-nav__link--new { font-weight: 700; color: #fff; }
.bwh-panel { position: absolute; top: var(--bwh-menu-h); left: 0; right: 0; min-width: 100%; background: var(--bwh-panel-bg); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border-bottom: 1px solid var(--bwh-hairline-light); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 0.28s var(--bwh-spring), transform 0.32s var(--bwh-spring), visibility 0s linear 0.28s; }
.bwh-nav__item:hover .bwh-panel, .bwh-nav__item:focus-within .bwh-panel, .bwh-nav__item.is-open .bwh-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity 0.32s var(--bwh-spring), transform 0.36s var(--bwh-spring), visibility 0s; }
.bwh-desktop-backdrop { position: fixed; top: var(--bwh-menu-h); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 990; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--bwh-spring), visibility 0s linear 0.35s; }
body.bwh-mega-active .bwh-desktop-backdrop { opacity: 1; visibility: visible; transition: opacity 0.35s var(--bwh-spring), visibility 0s; }
.bwh-panel__inner { max-width: 1160px; margin: 0 auto; padding: 34px 32px 38px; display: flex; gap: 48px; }
.bwh-col { flex: 1; min-width: 0; }
.bwh-col--wide { flex: 1.35; }
.bwh-divider { width: 1px; background: var(--bwh-hairline-light); align-self: stretch; }
.bwh-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bwh-panel-muted); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--bwh-hairline-light); }
.bwh-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--bwh-hairline-light); padding-bottom: 14px; margin-bottom: 20px; }
.bwh-panel__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bwh-panel-muted); margin-bottom: 3px; }
.bwh-panel__title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--bwh-panel-text); line-height: 1.25; }
.bwh-panel__more { flex: none; font-size: 12.5px; font-weight: 600; color: var(--bwh-panel-text); display: inline-flex; align-items: center; gap: 4px; border-bottom: 1.5px solid var(--bwh-panel-text); padding-bottom: 2px; transition: opacity 0.2s var(--bwh-ease-out), transform 0.2s var(--bwh-ease-out); }
.bwh-panel__more:hover { opacity: 0.7; transform: translateX(2px); }
.bwh-group + .bwh-group { margin-top: 24px; }
.bwh-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--bwh-panel-text); font-size: 13.5px; font-weight: 500; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; transition: background 0.2s var(--bwh-ease-out), transform 0.2s var(--bwh-ease-out); }
.bwh-link:hover { background: rgba(0, 0, 0, 0.045); transform: translateX(2px); }
.bwh-link small { color: var(--bwh-panel-muted); font-size: 11px; font-weight: 500; background: var(--bwh-surface-subtle); padding: 2px 7px; border-radius: 100px; }
.bwh-teams-wrap { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.bwh-leagues { display: flex; gap: 40px; }
.bwh-lg-half { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.bwh-league-title { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bwh-panel-muted); margin-bottom: 6px; }
.bwh-league-title::after { content: ""; flex: 1; height: 1px; background: var(--bwh-hairline-light); }
.bwh-teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 8px; }
.bwh-team { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px; border-radius: 10px; transition: background 0.2s var(--bwh-ease-out), transform 0.2s var(--bwh-spring); }
.bwh-team:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-2px); }
.bwh-team:active { transform: scale(0.96); }
/* ===== [v5.3] 真实队徽 ==============================================
   30 张队徽已下载并上传到店铺自有图片 CDN（img-va.myshopline.com），
   HTML 里是 <img class="bwh-team__logo">，26px 与原字母圆章同尺寸。
   不再有任何 ESPN 外链，也不依赖第三方防盗链策略。 */
.bwh-team__logo,
.bwh-m-team__logo {
  width: 26px; height: 26px; flex: none;
  object-fit: contain; -webkit-user-drag: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* ===== [v5.1 遗留] 纯 CSS 缩写徽标 ==================================
   队徽恢复为真实图片后，这套圆章只作备用（HTML 中已不再出现）。
   保留规则是为了将来图片 CDN 出问题时可一键回退。 */
.bwh-badge {
  --bwh-t: #b8b8bd;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #303036, #17171b);
  color: #fff; font-size: 8.6px; font-weight: 800; line-height: 1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bwh-t), inset 0 0 0 1px rgba(255,255,255,.16),
              0 2px 5px rgba(0,0,0,.10);
  transition: transform .22s var(--bwh-spring, ease-out);
  -webkit-user-select: none; user-select: none;
}
/* v1 遗留的 `.bwh-team span` 含类型选择器，优先级高于单类 `.bwh-badge`，
   会把徽标文字盖成深灰 10.5px。用子代双类选择器明确夺回排版控制权。 */
.bwh-team > .bwh-badge, .bwh-m-team > .bwh-badge {
  font-size: 8.6px; font-weight: 800; line-height: 1; color: #fff; text-align: center;
}
.bwh-team > .bwh-badge[data-abbr="KC"], .bwh-m-team > .bwh-badge[data-abbr="KC"],
.bwh-team > .bwh-badge[data-abbr="SD"], .bwh-m-team > .bwh-badge[data-abbr="SD"],
.bwh-team > .bwh-badge[data-abbr="SF"], .bwh-m-team > .bwh-badge[data-abbr="SF"],
.bwh-team > .bwh-badge[data-abbr="TB"], .bwh-m-team > .bwh-badge[data-abbr="TB"] { font-size: 10px; }
.bwh-team:hover .bwh-badge, .bwh-m-team:hover .bwh-badge {
  transform: translateY(-1px) scale(1.08);
}
/* 只输出颜色变量，缩写→配色集中在这一处，改色不必动 HTML */
/* 单色模式：给 <body> 加 bwh-mono-badge 即全队统一灰环 */
body.bwh-mono-badge .bwh-badge { --bwh-t: #b8b8bd; }
/* 分队色（细环），按缩写映射 */
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="ARI"] { --bwh-t: #A71930; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="ATL"] { --bwh-t: #CE1141; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="BAL"] { --bwh-t: #F47B20; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="BOS"] { --bwh-t: #BD3039; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="CHC"] { --bwh-t: #0E3386; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="CWS"] { --bwh-t: #27251F; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="CIN"] { --bwh-t: #C6011F; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="CLE"] { --bwh-t: #E31937; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="COL"] { --bwh-t: #33006F; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="DET"] { --bwh-t: #0C2340; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="HOU"] { --bwh-t: #EB6E1F; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="KC"] { --bwh-t: #004687; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="LAA"] { --bwh-t: #BA0021; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="LAD"] { --bwh-t: #005A9C; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="MIA"] { --bwh-t: #00A3E0; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="MIL"] { --bwh-t: #12284B; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="MIN"] { --bwh-t: #002B5C; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="NYM"] { --bwh-t: #002D72; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="NYY"] { --bwh-t: #0C2340; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="ATH"] { --bwh-t: #003831; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="PHI"] { --bwh-t: #E81828; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="PIT"] { --bwh-t: #27251F; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="SD"] { --bwh-t: #8C8179; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="SEA"] { --bwh-t: #0C2C56; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="SF"] { --bwh-t: #FD5A1E; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="STL"] { --bwh-t: #C41E3A; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="TB"] { --bwh-t: #092C5C; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="TEX"] { --bwh-t: #003278; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="TOR"] { --bwh-t: #134A8E; }
body:not(.bwh-mono-badge) .bwh-badge[data-abbr="WSH"] { --bwh-t: #AB0003; }
@media (prefers-reduced-motion: reduce) {
  .bwh-badge { transition: none; }
  .bwh-team:hover .bwh-badge, .bwh-m-team:hover .bwh-badge { transform: none; }
}
.bwh-team span { font-size: 10.5px; font-weight: 500; color: #2c2c2e; text-align: center; line-height: 1.2; }
.bwh-feat { background: #0d0d0f; border-radius: 16px; color: #fff; padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; min-width: 230px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.08); }
.bwh-feat__badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a1a1a6; margin-bottom: 8px; }
.bwh-feat__t { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.bwh-feat__s { font-size: 12.5px; color: #a1a1a6; margin-top: 8px; line-height: 1.55; }
.bwh-feat__cta { margin-top: 18px; align-self: flex-start; background: #fff; color: #000; font-weight: 600; font-size: 12px; border-radius: 100px; padding: 8px 18px; transition: transform 0.2s var(--bwh-spring), opacity 0.2s; }
.bwh-feat__cta:hover { opacity: 0.9; transform: translateY(-1px); }
.bwh-feat--light { background: var(--bwh-surface-subtle); color: var(--bwh-panel-text); border: 1px solid var(--bwh-hairline-light); }
.bwh-feat--light .bwh-feat__badge, .bwh-feat--light .bwh-feat__s { color: var(--bwh-panel-muted); }
.bwh-feat--light .bwh-feat__cta { background: var(--bwh-panel-text); color: #fff; }
/* [v4] 右侧工具图标组（Search/Account/Cart）与桌面搜索面板已整体移除：
   店铺现有页头已自带这些功能，本组件只负责导航，不重复渲染。
   下面只保留汉堡按钮所需的基础样式（v1 中它复用了 .bwh-icon）。 */
.bwh-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--bwh-text-hi); margin-left: -8px; transition: background .2s var(--bwh-ease-out), transform .15s var(--bwh-spring); }
.bwh-burger:hover { background: rgba(255, 255, 255, 0.12); }
.bwh-burger:active { transform: scale(0.92); }
.bwh-burger svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bwh-drawer { display: none; }
.bwh-mask { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 1998; opacity: 0; transition: opacity 0.36s var(--bwh-spring); }
body.bwh-drawer-open .bwh-mask { opacity: 1; pointer-events: auto; }
@media (max-width: 1024px) {
  .bwh-header__inner { padding: 0 12px 0 8px; }
  .bwh-nav, .bwh-desktop-backdrop { display: none; }
  .bwh-burger { display: flex; }
  .bwh-logo { margin-right: 0; }
  .bwh-mask { display: block; pointer-events: none; }
  .bwh-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(350px, 88vw); background: #ffffff; z-index: 1999; transform: translate3d(-100%, 0, 0); transition: transform 0.38s var(--bwh-spring); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 12px 0 36px rgba(0, 0, 0, 0.16); }
  body.bwh-drawer-open .bwh-drawer { transform: translate3d(0, 0, 0); }
  body.bwh-drawer-open { overflow: hidden; }
  .bwh-drawer__head { position: sticky; top: 0; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 14px 18px 12px; border-bottom: 1px solid #ececf0; z-index: 5; }
  .bwh-drawer__toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .bwh-drawer__toprow span { font-weight: 800; font-size: 13.5px; letter-spacing: 0.08em; color: #1d1d1f; }
  .bwh-drawer__close { width: 34px; height: 34px; border-radius: 50%; background: #f5f5f7; display: flex; align-items: center; justify-content: center; color: #1d1d1f; transition: transform 0.15s var(--bwh-spring); }
  .bwh-drawer__close:active { transform: scale(0.9); background: #e8e8ed; }
  .bwh-drawer__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .bwh-drawer__search { display: flex; align-items: center; background: #f5f5f7; border-radius: 10px; padding: 0 12px; height: 38px; }
  .bwh-drawer__search svg { width: 15px; height: 15px; stroke: #86868b; stroke-width: 1.8; fill: none; flex: none; }
  .bwh-drawer__search input { border: 0; background: none; width: 100%; padding: 0 8px; font-size: 13.5px; color: #1d1d1f; outline: none; }
  .bwh-acc__top { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 18px; font-size: 14.5px; font-weight: 600; color: #1d1d1f; border-bottom: 1px solid #ececf0; transition: background 0.15s; }
  .bwh-acc__top::after { content: "\203A"; font-size: 20px; font-weight: 400; color: #86868b; line-height: 1; }
  .bwh-acc__top:active { background: #f5f5f7; }
  .bwh-acc { border-bottom: 1px solid #ececf0; }
  .bwh-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 18px; font-size: 14.5px; font-weight: 600; color: #1d1d1f; cursor: pointer; user-select: none; transition: background 0.15s; }
  .bwh-acc > summary::-webkit-details-marker { display: none; }
  .bwh-acc > summary .bwh-acc__icon { width: 22px; height: 22px; border-radius: 50%; background: #f5f5f7; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 400; color: #6e6e73; transition: transform 0.3s var(--bwh-spring), background 0.2s, color 0.2s; }
  .bwh-acc[open] > summary .bwh-acc__icon { transform: rotate(45deg); background: #1d1d1f; color: #fff; }
  .bwh-acc > summary:active { background: #f5f5f7; }
  .bwh-acc__body { padding: 2px 18px 16px; background: #fcfcfd; }
  .bwh-acc__grp { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #86868b; margin: 12px 0 6px; }
  .bwh-acc__body a:not(.bwh-m-team):not(.bwh-acc__all) { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 6px 0; font-size: 13.5px; font-weight: 500; color: #2c2c2e; border-bottom: 1px solid #f0f0f3; }
  .bwh-acc__body a:last-child { border-bottom: 0; }
  .bwh-acc__body a:active { opacity: 0.65; }
  .bwh-m-teams-scroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
  .bwh-m-team { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 1px solid #ececf0; border-radius: 10px; padding: 8px 4px; font-size: 10.5px; font-weight: 600; color: #1d1d1f; text-align: center; }
  .bwh-m-team:active { transform: scale(0.95); background: #f5f5f7; }
    /* [v5.1] 移动端徽标继承 .bwh-badge，无需单独尺寸规则 */
  .bwh-acc__all { display: flex; align-items: center; justify-content: center; margin-top: 12px; background: #1d1d1f; color: #fff !important; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 12px 14px; transition: transform 0.15s var(--bwh-spring); }
  .bwh-acc__all:active { transform: scale(0.98); }
  .bwh-drawer__foot { margin-top: auto; padding: 16px 18px 24px; background: #f5f5f7; border-top: 1px solid #e8e8ed; }
  .bwh-drawer__foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .bwh-drawer__foot-links a { background: #fff; border: 1px solid #e5e5ea; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: #1d1d1f; display: flex; align-items: center; justify-content: space-between; }
  .bwh-drawer__trust { font-size: 11.5px; color: #6e6e73; display: flex; flex-direction: column; gap: 5px; line-height: 1.4; }
  .bwh-drawer__trust strong { color: #1d1d1f; }
}
/* [v4] .demo-hero 演示占位区已删除：它从来不是主题板块，只是本演示文件的假页面背景。 */
.bwh-tabbar { display: none; }
@media (max-width: 1024px) {
  .bwh-tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid #e8e8ed; z-index: 997; padding: 7px 0 max(10px, env(safe-area-inset-bottom)); }
  .bwh-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; color: #86868b; transition: color 0.2s, transform 0.15s var(--bwh-spring); }
  .bwh-tab:active { transform: scale(0.92); }
  .bwh-tab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bwh-tab.is-active { color: #000; font-weight: 700; }
  /* 仅当启用本组件底部 Tab Bar 时才需要；若主题自带 tabbar 请删除本行 */
  body.bwh-has-tabbar { padding-bottom: 64px; }
}

/* ===== [v2] 增量样式：仅覆盖，不改动 v1 任何视觉参数 ===== */
/* [v2→v5] 下拉内容宽度与顶栏对齐：v1 是 1160、v2 提到 1320，
   v5 顶栏通铺后改为全宽 + 共用 --bwh-gutter，两侧与一级菜单精确对齐 */
.bwh-panel__inner { max-width: none; padding-left: var(--bwh-gutter); padding-right: var(--bwh-gutter); }
/* 2. 收编 v1 里 4 处内联 style="display:flex" */
.bwh-col--wide { display: flex; }
/* 3. 球员面板 30 项紧凑排布，避免下拉过高 */
.bwh-panel--players .bwh-link { padding: 5px 10px; font-size: 12.5px; }
.bwh-panel--players .bwh-label { padding-bottom: 8px; }
/* 4. 第三方 Logo 失效时的字母缩写兜底 */
/* [v5.1] 已无图片，第三方 Logo 失效兜底样式一并移除 */
/* 5. 移动端球队「横滑」名实相符（v1 类名带 scroll 但实为 4 列定宽网格） */
@media (max-width: 1024px) {
  .bwh-m-teams-scroll { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bwh-m-teams-scroll::-webkit-scrollbar { display: none; }
  .bwh-m-team { flex: 0 0 76px; scroll-snap-align: start; }
}

/* ===== [v3] 政策页占位状态 & 一级 8 项窄桌面兜底 ===== */
/* 占位项：文字降一档 + Soon 徽标；点击由脚本拦截，绝不产生 404 或跳回页首 */
.bwh-todo { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bwh-panel-muted); background: var(--bwh-surface-subtle); border: 1px solid var(--bwh-hairline-light); padding: 2px 7px; border-radius: 100px; line-height: 1.4; }
.bwh-link.is-todo { color: var(--bwh-panel-muted); cursor: default; }
.bwh-link.is-todo:hover { background: transparent; transform: none; }
.bwh-nav__link.is-todo { cursor: default; }
/* 上线时不想要徽标：给 <body> 加 class="bwh-hide-todo"，或删除下面这行以外的徽标规则 */
body.bwh-hide-todo .bwh-todo { display: none; }
@media (max-width: 1024px) {
  .bwh-acc__body a.is-todo { color: #86868b; }
  .bwh-acc__body a.is-todo:active { opacity: 1; }
  .bwh-acc__body a .bwh-todo { font-size: 9px; }
}
/* 1025–1280px：通铺等分后每项宽度收窄，缩小字号避免 SHOP BY VERSION 折行 */
@media (min-width: 1025px) and (max-width: 1280px) {
  .bwh-nav__link { padding: 0 4px; font-size: 11.5px; letter-spacing: .035em; }
  .bwh-logo { font-size: 13.5px; }
}
/* 超宽屏：等分后单项变宽，同步放大字号维持视觉密度 */
@media (min-width: 1700px) {
  .bwh-nav__link { font-size: 13px; }
  .bwh-logo { font-size: 16px; }
}
/* ===== [v4] 移动端同行胶囊快捷栏 =====
   构图参考用户提供的 utility bar：汉堡键 + 数个胶囊按钮同处一行。
   桌面完全隐藏；≤1024px 横向可滑，不撑破 58px 页头，也不产生换行。
   胶囊三类：纯信息（不可点）/ 政策页占位（Soon，复用 v3 data-page 机制）/
   真实分类（立即可点、已验证 handle）。 */
.bwh-logo__short { display: none; }
.bwh-caps { display: none; }
@media (max-width: 1024px) {
  .bwh-logo__full { display: none; }
  .bwh-logo__short { display: inline; font-size: 13px; letter-spacing: .06em; }
  .bwh-caps {
    display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px;
    margin-left: 10px; padding: 2px 2px 2px 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .bwh-caps::-webkit-scrollbar { display: none; }
  .bwh-cap {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    min-height: 28px; padding: 0 11px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
    color: var(--bwh-text-hi); font-size: 11px; font-weight: 600;
    letter-spacing: .01em; white-space: nowrap; text-decoration: none;
    scroll-snap-align: start;
    transition: background .2s var(--bwh-ease-out), border-color .2s, transform .15s var(--bwh-spring);
  }
  .bwh-cap:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
  a.bwh-cap:active { transform: scale(.96); }
  .bwh-cap svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .85; }
  /* 纯信息：不做成链接，避免顾客点了个没反应的按钮 */
  .bwh-cap--info { cursor: default; background: transparent; border-color: transparent; padding-left: 2px; padding-right: 4px; font-weight: 500; color: var(--bwh-text-sub); }
  .bwh-cap--info:hover { background: transparent; border-color: transparent; }
  /* 占位：淡化 + 点击被脚本拦截，与桌面政策页入口表现一致 */
  .bwh-cap.is-todo { opacity: .5; cursor: default; }
  .bwh-cap.is-todo:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
  .bwh-cap .bwh-todo { font-size: 8px; padding: 1px 5px; background: rgba(255,255,255,.16); border: 0; color: rgba(255,255,255,.9); }
  @media (max-width: 360px) {
    .bwh-cap { font-size: 10px; padding: 0 9px; min-height: 26px; }
    .bwh-cap svg { width: 12px; height: 12px; }
    .bwh-caps { margin-left: 6px; gap: 5px; }
  }
}

/* ==========================================================================
   [v5.2] 主题集成层
   这段是塞进 Shopline 店铺「Custom SLINE」区块后才需要处理的真实冲突，
   独立演示稿里看不出来，线上实测（1440×900 / 390×844）逐个确认：
   ① 主题把区块内容包进 <div class="rte">，外层 .custom-sline__inner 又是
      display:flex + align-items:center，flex 子项按内容宽度收缩 → 1440 视口
      只给到 916px，一级菜单被挤成一团、文字互相重叠。必须强制撑满。
   ② 店铺页头已有官方 Logo（BASEBALL WEAR HUB 图片标），本组件的文字 Logo
      与之重复出现 → 隐藏组件内的 logo。
   ③ 主题原生汉堡打开的是空菜单（实测只有一条 Log in），与本组件汉堡并存
      会让顾客不知道该点哪个 → 隐藏主题原生汉堡，保留本组件汉堡（含完整分类树）。
   ④ 主题页头自身是 sticky（sticky_on_scroll_up），本组件若也 sticky 会与它
      在同一 top:0 重叠 → 本组件改为 relative，跟随文档流。
   注：:has() 在 2026 年的 Chrome / Safari / Firefox 均已支持。
   ========================================================================== */
.custom-sline__inner:has(> .rte > .bwh-header) { display: block; align-items: stretch; width: 100%; }
.custom-sline__inner > .rte:has(> .bwh-header) { width: 100%; }
.bwh-header { width: 100%; position: relative; }
.bwh-logo { display: none !important; }
.header-section .header-action-bar__menu { display: none !important; }

/* ⑤ 主题 .rte a { color:#1D1D1F } 的选择器权重是 (0,1,1)，压过我们单类选择器
   (0,1,0) —— 结果黑条上的白字全部被改成深灰，实测 computed color 就是
   rgb(29,29,31)，连带 chevron 箭头（stroke: currentColor）一起看不见。
   ⚠️ 这里必须「点名」黑条上的元素，不能一刀切 .bwh-header a：
   上一版就是这么写的，结果白底下拉面板里的 .bwh-link、黑卡里那颗白底
   按钮 .bwh-feat__cta、手机抽屉白底头部的关闭按钮全被刷成白字，
   表现为「面板里的字全部看不见」。 */
.rte .bwh-header .bwh-nav > .bwh-nav__item > .bwh-nav__link,
.rte .bwh-header .bwh-burger,
.rte .bwh-header .bwh-caps .bwh-cap,
.rte .bwh-header .bwh-caps a,
.rte .bwh-header .bwh-caps button { color: var(--bwh-text-hi) !important; }
.rte .bwh-header .bwh-caps .bwh-cap { color: rgba(255, 255, 255, 0.9) !important; }
.rte .bwh-header .bwh-nav__item:hover > .bwh-nav__link,
.rte .bwh-header .bwh-nav__item:focus-within > .bwh-nav__link,
.rte .bwh-header .bwh-nav__item.is-open > .bwh-nav__link,
.rte .bwh-header .bwh-nav__link--new { color: #fff !important; }

/* ⑤-a 白底区域显式还原深色字（不依赖继承，防止主题其它规则再插一脚） */
.rte .bwh-header .bwh-panel .bwh-link,
.rte .bwh-header .bwh-panel .bwh-panel__more,
.rte .bwh-header .bwh-panel .bwh-panel__title { color: var(--bwh-panel-text) !important; }
.rte .bwh-header .bwh-panel .bwh-link small,
.rte .bwh-header .bwh-panel .bwh-label,
.rte .bwh-header .bwh-panel .bwh-league-title,
.rte .bwh-header .bwh-panel .bwh-panel__kicker { color: var(--bwh-panel-muted) !important; }
.rte .bwh-header .bwh-panel .bwh-link.is-todo { color: var(--bwh-panel-muted) !important; }
.rte .bwh-header .bwh-feat__cta { color: #000 !important; background: #fff !important; }
/* ⚠️ 抽屉与底部 Tab 栏是 <header> 的兄弟节点（不在 .bwh-header 内），
   凡是要作用于它们的规则必须用 .rte .bwh-drawer 前缀，否则永远匹配不到。
   抽屉是白底：主题 .rte a 给的 #1D1D1F 正好是我们想要的深色，不需要再覆盖；
   只有那颗深色实心按钮 .bwh-acc__all 需要单独保白字，否则会被刷成深灰。
   手机抽屉里 .bwh-acc__top / .bwh-acc__body a / 底栏链接的内边距同样被
   .rte a { padding:0 1px } 清零过（首行文字会顶到屏幕左边），一并还原。 */
.rte .bwh-drawer .bwh-acc__all { color: #fff !important; }

/* ⑦ 宽屏白边：主题 .page-width 是 max-width:1820px + 自动外边距，
   1920 屏实测导航左右各空 50px（截图里的白边就是这个）。
   用 :has() 只命中「装着本导航的那一个 .page-width」，不动其它区块。 */
.page-width:has(> .custom-sline__inner > .rte > .bwh-header) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ⑧ 内边距被主题清零 —— 这才是"下拉菜单挤成一坨"的真正原因。
   主题 `.rte a { padding: 0 1px }` 权重 (0,1,1)，压过组件里的单类选择器：
   实测下拉每行高度从 37.6px 塌成 22px，行与行贴在一起，和演示稿完全不一样。
   主题只认"更具体 + !important"，所以按元素逐条还原原始值。
   ⚠️ 这里的数值必须与组件自身的 padding 保持一致；改组件时同步改这里。 */
.rte .bwh-header .bwh-nav__link { padding: 0 6px !important; }
.rte .bwh-header .bwh-panel .bwh-link { padding: 8px 10px !important; }
.rte .bwh-header .bwh-panel--players .bwh-link { padding: 5px 10px !important; }
.rte .bwh-header .bwh-panel .bwh-link small { padding: 2px 7px !important; }
.rte .bwh-header .bwh-panel .bwh-panel__more { padding: 0 0 2px !important; }
.rte .bwh-header .bwh-team { padding: 7px 4px !important; }
.rte .bwh-header .bwh-m-team { padding: 8px 4px !important; }
.rte .bwh-header .bwh-feat__cta { padding: 8px 18px !important; }
.rte .bwh-drawer .bwh-drawer__foot-links a { padding: 10px 12px !important; }
.rte .bwh-drawer .bwh-acc__all { padding: 12px 14px !important; }
@media (max-width: 1024px) {
  .rte .bwh-drawer .bwh-acc__top { padding: 0 18px !important; }
  .rte .bwh-header .bwh-caps .bwh-cap { padding: 0 11px !important; }
  .rte .bwh-header .bwh-caps .bwh-cap--info {
    padding-left: 2px !important; padding-right: 4px !important;
  }
  .rte .bwh-drawer .bwh-acc__body a:not(.bwh-m-team):not(.bwh-acc__all) { padding: 6px 0 !important; }
}

/* ⑥ 手机端胶囊栏是横向滚动条，但信息胶囊太长会把「Track Order」切在半截。
   让信息文案可收缩 + 省略号，保证后面至少有一个可点的胶囊完整露出。 */
@media (max-width: 1024px) {
  .bwh-caps { padding-right: 4px; }
  /* 胶囊本身不许压缩（否则只剩一个图标），只压缩里面的文案 */
  .bwh-cap--info { flex: 0 0 auto; }
  .bwh-cap--info .bwh-cap__txt {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 42vw;
  }
}