/* ══════════════════════════════════════════════════════════════════════════
   页头 · 三层结构（对齐 Nuxt 4.3 设计）
   --------------------------------------------------------------------------
   ① .nv-topbar  公告条：品牌渐变底，左公告右快捷入口
   ② .nv-mainbar 主导航：Logo + 搜索框 + 右侧操作（★ 唯一吸顶的一层）
   ③ .nv-subbar  快捷导航条：当前项品牌实心高亮

   尺寸基准（按参考图 1456px 换算）：公告 52px / 主导航 100px / 快捷条 56px

   ★★ 为什么只让 .nv-mainbar 吸顶：
     三层合计 208px，若整体 sticky，滚动后会一直占掉五分之一屏。
     真实电商站的做法是「主导航固定、公告与快捷条随页面滚走」，
     这样既保住导航可达性，又不挤压内容区。
   ══════════════════════════════════════════════════════════════════════════ */

/* 外层不再吸顶（旧版 .nv-header 是 sticky，这里撤销） */
.nv-header {
  position: static;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.nv-header::before { display: none; }

/* ── ① 公告条 ─────────────────────────────────────────────── */
.nv-topbar {
  position: relative;
  /* ★★ 必须高于 .nv-mainbar 的层级：
     .nv-mainbar 是 position:sticky + z-index(var(--nv-z-header))，
     sticky 会创建层叠上下文。公告条里的语言下拉菜单虽然 DOM 在前，
     但若公告条 z-index 为 auto，菜单会被主导航的白色背景盖住
     —— 实测菜单只露出最后一项，其余被遮成一片白。
     z-index 取 header + 1，保证下拉浮在主导航之上。 */
  z-index: calc(var(--nv-z-header) + 1);
  background-image: var(--nv-gradient);
  color: #fff;
}
.nv-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  min-height: 52px;
}
.nv-topbar__tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--nv-radius-chip);
  background: rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: var(--nv-weight-medium);
  letter-spacing: .02em;
}
/* 后台公告是富文本（实测带 <font color="#f9963b"> 橙色内联样式），
   放蓝底上会看不清。这里统一洗成继承色 —— 只在本容器内生效。 */
.nv-topbar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-topbar__text :where(p, span, strong, b, em, i, font, a, div) {
  color: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.nv-topbar__text a:hover { text-decoration: underline; }

/* 主题配置拼出来的公告链接（notice_title + notice_url）。
   继承公告条的文字色。★ 本项必须放在上面那条 a:hover 之后 ——
   否则同名特异性下后者生效，hover 时仍会冒出下划线。
   不加下划线，靠 hover 变淡 + 手型光标提示可点。 */
.nv-topbar__link,
.nv-topbar__link:hover,
.nv-topbar__link:focus,
.nv-topbar__link:active {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}
.nv-topbar__link:hover { opacity: .85; }
.nv-topbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.nv-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* ★ 定高：不同按钮的内容行高不同 ——
       纯图标按钮内容高 16px、带中文的按钮被文字行高撑到 21px，
       只靠 padding 会导致两者差 5px，hover 时看着高矮不齐。
       固定高度 + 统一行高，四个按钮外形完全一致。 */
  height: 30px;
  padding: 0 11px;
  border-radius: var(--nv-radius-chip);
  font-size: 13px;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
  transition: background-color var(--nv-dur-fast) var(--nv-ease-out),
              color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-topbar__btn:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.nv-topbar__btn:active { background: rgba(255, 255, 255, .28); }
.nv-topbar__btn .material-icons-outlined { font-size: var(--nv-icon-sm); }


/* ── ② 主导航 ─────────────────────────────────────────────── */
.nv-mainbar {
  position: sticky;
  top: 0;
  z-index: var(--nv-z-header);
  background: var(--nv-elevated);
  border-bottom: 1px solid var(--nv-border-soft);
}
.nv-mainbar__inner {
  display: flex;
  align-items: center;
  gap: var(--nv-space-6);
  min-height: 100px;
}
.nv-mainbar__right {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  /* ★ margin-left:auto 是「按钮靠右」的硬保险：
     只靠搜索框 flex:1 撑开也能把它推右，但一旦搜索框被隐藏
     （窄屏）或宽度受限，按钮组就会紧贴左边。显式声明后无论何种情况都贴右。 */
  margin-left: auto;
  flex: 0 0 auto;
}

/* ★ 44px 只作用于主导航内的 logo（drawer 里仍用 base.css 的 28px） */
.nv-mainbar .nv-brand {
  align-items: center;
}
.nv-mainbar .nv-brand__mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
}
/* ★ 收紧行高：30px 字号默认行高约 49px，比方块高 9px，
   导致整行视觉重心偏移。设为 1.1 后与方块齐平。 */
.nv-mainbar .nv-brand__name {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.nv-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* ★ 48px：与本行搜索框同高，整行交互元素统一 */
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  background: var(--nv-elevated);
  font-size: 13px;
  line-height: 1;
  color: var(--nv-text-primary);
  white-space: nowrap;
  transition:
    background-color var(--nv-dur-fast) var(--nv-ease-out),
    border-color var(--nv-dur-fast) var(--nv-ease-out),
    color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-ghost-btn:hover {
  background: var(--nv-soft);
  border-color: var(--nv-border);
  /* ★ 钉住文字色：否则会被 base.css 的全局 `a:hover{color:品牌蓝}` 接管。
     按钮 hover 时文案保持主文本色更稳，不跟着变蓝（那是链接的语义）。 */
  color: var(--nv-text-primary);
}
.nv-ghost-btn:active {
  background: var(--nv-muted);
  color: var(--nv-text-primary);
}
.nv-ghost-btn .material-icons-outlined {
  font-size: var(--nv-icon-sm);
  color: var(--nv-text-muted);
  transition: color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-ghost-btn:hover .material-icons-outlined { color: var(--nv-text-secondary); }
.nv-ghost-btn--primary {
  background: var(--nv-brand-solid);
  color: #fff;
  border-color: transparent;
}
/* ★★ hover 必须【同时】压住背景与文字色。
   原来只写了 background，没写 color ——
   结果被 base.css 的全局 `a:hover { color: var(--nv-brand-hover) }` 抢走，
   文字变成 #1d4ed8（品牌蓝），而按钮 hover 背景也是同一族蓝色，
   → 【文字与背景撞色，整行字看不见】。
   注意那条全局 a:hover 的权重(0,1,1) 高于 .nv-ghost-btn--primary(0,1,0)，
   所以必须用 :hover 后缀 + 更具体的选择器把 color 重新钉牢。 */
.nv-ghost-btn--primary:hover {
  background: var(--nv-brand-hover);
  color: #fff;
}
.nv-ghost-btn--primary:active {
  background: var(--nv-brand-ink);
  color: #fff;
}
/* ★ 实心按钮上的图标必须是白色 ——
   不加这条会被上面的 .nv-ghost-btn .material-icons-outlined（灰）盖住，
   表现为「深蓝底 + 灰图标」，明显不搭。 */
.nv-ghost-btn--primary .material-icons-outlined,
.nv-ghost-btn--primary:hover .material-icons-outlined {
  color: #fff;
}
/* ── 已登录的用户菜单按钮（2026-10-16 改）─────────────────────────────
   ★★ 改动原因：原来它只是个「24px 头像」的图标按钮（padding: 0 10px），
      与同排的「订单查询」和未登录时的「登录 / 注册」相比层级明显偏弱 ——
      用户反馈"这里变成一个小图标"，建议做成和登录按钮一样大的按钮。

   ★ 现在的构成：头像(24px 圆形) + 「用户中心」文字，
      整体尺寸/描边/圆角完全交给 .nv-ghost-btn（48px 高，与本行搜索框同高）。
   ★ 只覆盖 padding：图标按钮用 0 10px 会太窄，
      有文字后需要与 .nv-ghost-btn 默认的 0 18px 一致；这里留 0 14px，
      因为头像本身有视觉重量，比纯文字按钮稍紧一点更平衡。
   ------------------------------------------------------------------------ */
.nv-user-btn { padding: 0 14px; gap: 8px; }

/* 按钮文字：与 .nv-ghost-btn 的字号/字重一致 */
.nv-user-btn__txt { white-space: nowrap; }

/* 未设置头像时的占位图标 —— 模板在 $user.avatar 为空时用它顶替 <img>。
   尺寸对齐 24×24 头像；颜色自动继承
   .nv-ghost-btn .material-icons-outlined 的灰，无需重复声明。 */
.nv-user-btn .nv-user-ph { font-size: 24px; line-height: 1; }

/* 窄屏：只留头像，文字收起（与 .nv-ghost-btn 里「订单查询」的处理一致） */
@media (max-width: 900px) {
  .nv-user-btn { padding: 0 10px; }
  .nv-user-btn__txt { display: none; }
}

/* 主搜索框（覆盖 base.css 的抽屉版）
   ★ .item-search-input 是核心契约类名，回车搜索由核心 index.js 接管，
     这里只做外观。
   ★★ 必须显式写 max-width: none ——
     base.css 里的 .nv-search 是【抽屉版】，带 max-width: 420px。
     主搜索框要撑满中间剩余空间，若不覆盖这条，就会被卡在 420px，
     表现为「搜索框很窄、右侧空出一大片」（用户实测就是这个）。 */
.nv-mainbar .nv-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  /* ★ 与右侧 .nv-ghost-btn 同高（48px），整行交互元素尺寸统一。
     原来这里是 52px，比按钮高 8px，视觉上不齐。 */
  height: 48px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  background-color: var(--nv-elevated);
  overflow: hidden;
}
.nv-mainbar .nv-search:focus-within {
  border-color: var(--nv-brand);
  background-color: var(--nv-elevated);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.nv-mainbar .nv-search__ico {
  margin-left: 16px;
  flex: 0 0 auto;
  font-size: 17px;
}
.nv-mainbar .nv-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  font-size: 15px;
}
.nv-mainbar .nv-search__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 22px;
  border-radius: 0;
  background-image: none;
  background-color: var(--nv-brand-solid);
  color: #fff;
  font-size: 14px;
  font-weight: var(--nv-weight-medium);
  transition: background-color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-mainbar .nv-search__btn:hover {
  opacity: 1;
  background-color: var(--nv-brand-hover);
}
.nv-mainbar .nv-search__btn .material-icons-outlined { font-size: 16px; }

/* ── ③ 快捷导航条 ───────────────────────────────────────────
   ★ 定位：这是「助手层」—— 主导航之下的一排快捷入口。
     所以选中态【不用】整块品牌渐变：那会让它在视觉上超过主导航、
     甚至与「立即购买」这类真正的 CTA 争焦点。
     改为「浅品牌底 + 深品牌字 + 加粗」，权重刚好压过普通项一档。
   ★ 宽度由内容决定（padding 撑），不设等宽 ——
     菜单项文字长度不可控（「首页」2 字 vs「联系我们」4 字），
     等宽会让短项空、长项挤。 */
.nv-subbar {
  background: var(--nv-elevated);
  border-bottom: 1px solid var(--nv-border);
}
.nv-subbar__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nv-subbar__inner::-webkit-scrollbar { display: none; }
.nv-subbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 13px;
  border-radius: var(--nv-radius-btn);
  font-size: 14px;
  color: var(--nv-text-secondary);
  white-space: nowrap;
  transition: background-color var(--nv-dur-fast) var(--nv-ease-out),
              color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-subbar__link:hover {
  background: var(--nv-soft);
  color: var(--nv-text-primary);
}
/* 图标比文字大 3~4px，才能当「扫读锚点」用；
   16px 只比正文大 1.5px，等于没拉开层级。 */
.nv-subbar__link .material-icons-outlined {
  font-size: 18px;
  color: var(--nv-text-muted);
  transition: color var(--nv-dur-fast) var(--nv-ease-out);
}
.nv-subbar__link:hover .material-icons-outlined { color: var(--nv-text-secondary); }
.nv-subbar__link.is-active {
  background: var(--nv-brand-softer);
  color: var(--nv-brand-ink);
  font-weight: var(--nv-weight-bold);
}
.nv-subbar__link.is-active .material-icons-outlined { color: var(--nv-brand-ink); }
.nv-subbar__link.is-active:hover { background: var(--nv-brand-soft); color: var(--nv-brand-ink); }

/* ── 窄屏降级 ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .nv-mainbar__inner { gap: var(--nv-space-3); min-height: 76px; }
  .nv-ghost-btn span:not(.material-icons-outlined) { display: none; }
  .nv-ghost-btn { padding: 0 10px; }
  .nv-topbar__btn span:not(.material-icons-outlined) { display: none; }
  .nv-brand__name { font-size: 20px; }

  /* ══════════════════════════════════════════════════════════════════════
     ★★★ 窄屏顶栏：搜索框常显 + 右侧只留 2 个按钮（2026-10-17 二次改版）
     ══════════════════════════════════════════════════════════════════════
     用户要求：
       ① 移动端默认也显示搜索框（上一版是点放大镜才展开）
       ② 右侧只保留 2 个按钮：登录/用户、菜单

     ★ 宽度预算（393px 视口）：
         可用 = 393 − 32(容器内边距) = 361
         右侧 = 登录48 + gap8 + 菜单36 = 92
         logo（收窄后）= 44（只留标记，隐藏站名）
         gap 2 处 = 12 × 2 = 24
         → 搜索框 = 361 − 92 − 44 − 24 = 201px ✓ 够放占位文案
       ★ 因此必须隐藏站名（.nv-brand__name）——
         保留 140px 宽的完整品牌会让搜索框只剩 105px，占位文案被截断。

     ★ 为什么可以隐藏站名而不是缩字号：
       logo 标记本身已经是品牌识别，站名在手机顶栏属于冗余信息；
       缩字号只会得到一个"小字 + 窄搜索框"，两头不讨好。

     ★ 隐藏的两个按钮及去处：
       · .nv-search-toggle —— 搜索框常显后它失去作用
       · .nv-order-query    —— 「订单查询」入口移到抽屉菜单里
     ---------------------------------------------------------------------- */

  /* ① 搜索框常显：覆盖 base.css 里 .nv-search 的 display:none
        ★ 必须写 :not(.nv-search--drawer) ——
          抽屉里也有一个 .nv-search（.nv-search--drawer），
          它是抽屉的独立搜索框，不该被这里的 flex 拉进顶栏布局。 */
  .nv-mainbar .nv-search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: 44px;              /* 与右侧按钮等高，整行对齐 */
    order: 0;
  }
  /* 顶栏搜索框内部的提交按钮：窄屏只留图标，把空间让给输入框
     ★★ 必须同时覆盖三件事，否则会出现"蓝块漂浮"的观感（实测踩到）：
        ① height —— base.css 里是 28px，不覆盖就成了 44px 容器里漂着的 28px 方块
        ② border-radius —— base.css 是胶囊（pill），贴在输入框右端会很怪
        ③ flex/width —— 让它成为右侧的整块，而不是靠 padding 撑开
        → height:100% / border-radius:0 → 变成"嵌在框内右端的整高色块"，
          与左侧圆角由父容器 overflow:hidden 统一裁切，视觉上是一个整体。
     ★★ 宽度 40 → 32（2026-10-17 二次调）：
        右侧两个按钮统一到 44px 后，搜索框从 211px 缩到 203px，
        占位文案「搜索商品名称或关键词」需要 148px 而只有 139px —— 差 9px。
        把提交按钮从 40 收窄到 32（仍 > 24px 图标 + 点按留白），
        配合下面图标缩进 6→4，刚好补回这 9px，文案完整显示。 */
  .nv-mainbar .nv-search__btn {
    flex: 0 0 32px;
    width: 32px;
    height: 100%;
    padding: 0;
    justify-content: center;
    border-radius: 0;
  }
  .nv-mainbar .nv-search__btn span:not(.material-icons-outlined) {
    display: none;
  }
  .nv-mainbar .nv-search__btn .material-icons-outlined { font-size: 17px; }
  /* 窄屏把左侧装饰图标改为 4px 缩进 */
  .nv-mainbar .nv-search__ico { margin-left: 4px; font-size: 16px; }
  /* 输入框文字 14px：与移动端正文档一致，也比 15px 多容纳约 1 个字
     ★ 左右内边距压到 2/3px —— 顶栏搜索框里"文字贴着图标"是可接受的，
       不必留太多留白（这里宽度是硬约束）。 */
  .nv-mainbar .nv-search__input { padding: 0 2px 0 3px; font-size: 14px; }

  /* ② 隐藏两个多余按钮 */
  .nv-search-toggle { display: none !important; }
  .nv-order-query   { display: none !important; }

  /* ③ 品牌：收窄为「只留标记」，把宽度让给搜索框 */
  .nv-mainbar .nv-brand__name { display: none; }
  .nv-mainbar .nv-brand { flex: 0 0 auto; }

  /* ④ 右侧按钮组：只保留登录/用户 + 菜单，间距收紧 */
  .nv-mainbar__right { gap: 8px; }

  /* ★★★ 整行等高：搜索框 / 登录 / 菜单 统一 44px（2026-10-17）
     ----------------------------------------------------------------------
     用户反馈「登录和菜单 2 个按钮和搜索的高度不一致」。
     实测（393px）：
       搜索框 44px（y=68）· 登录 48px（y=66）· 菜单 36px（y=72）
     —— 三种高度、三个 y，上下都错位。

     ★ 为什么统一到 44px 而不是 48px 或 36px：
       · 44px 是 WCAG / Apple HIG 的触控目标下限 —— 再小就难点了
       · 搜索框本来就是 44px，改它要动内部输入框/按钮的连锁尺寸
       · 菜单从 36 → 44 是"放大"，不是压缩，点按更容易
     ★ 用 .nv-mainbar__right 限定作用域，避免影响抽屉/页脚里的同类按钮。 */
  .nv-mainbar__right .nv-ghost-btn,
  .nv-mainbar__right .nv-user-btn {
    height: 44px;
    min-height: 44px;
  }
  .nv-mainbar__right .nv-burger {
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}
@media (max-width: 640px) {
  .nv-topbar__text { font-size: 12px; }
  .nv-brand__name { font-size: 17px; }
  .nv-subbar__inner { min-height: 46px; gap: 2px; }
  .nv-subbar__link { font-size: 13px; padding: 0 10px; gap: 5px; height: 34px; }
  .nv-subbar__link .material-icons-outlined { font-size: 16px; }
}

/* ★ 桌面端：搜索框常驻可见，展开入口无需存在 */
@media (min-width: 1024px) {
  .nv-search-toggle { display: none; }
}