/* ============================================================
   home.css —— 首页“niub 风”零侵入皮肤 v3（仅作用于前台首页 #hn-shop）
   高保真还原 niub 浅色版：官方圆角 Banner（不改，本就同款）+
   左侧分类卡（蓝色竖条 / 实心蓝激活 / 圆形箭头）+
   右侧搜索框 + 按分类分组的商品卡片流（商品坚持卡片式）。
   注：该皮肤不暴露 --primary 等 CSS 变量，颜色按 niub 浅色实测值硬编码。
   ============================================================ */

.hn-shop {
  --hn-primary: #0071e3;
  --hn-primary-fg: #ffffff;
  --hn-card: #ffffff;
  --hn-border: rgba(0, 0, 0, 0.12);
  --hn-fg: #1d1d1f;
  --hn-muted: #6e6e73;
  --hn-muted-bg: #efeff1;
  --hn-primary-10: rgba(0, 113, 227, 0.10);
  --hn-ring: rgba(0, 113, 227, 0.18);
  position: relative; z-index: 10; padding: 5.5rem 0 3rem;
  color: var(--hn-fg);
}
.hn-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
/* 栅格：左分类卡纵向跨行，右上 Banner，右下搜索+商品（分类卡到 Banner 左边） */
.hn-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  column-gap: 1.4rem; row-gap: 1.3rem;
  /* 第一行：分类卡 | Banner（等高）；第二行：商品区跨满整行（宽度=分类+Banner 总宽） */
  grid-template-areas: "side hero" "main main";
}
.hn-side { grid-area: side; width: 15rem; align-self: stretch; display: flex; position: relative; }
.hn-hero { grid-area: hero; min-width: 0; align-self: stretch; margin: 0; padding: 0 !important; border-bottom: 0 !important; display: flex; flex-direction: column; }
/* Banner 卡拉伸填满整格，与左侧分类卡严格等高；去掉官方 container 重复的左右内边距以与搜索框对齐 */
.hn-hero > .container { flex: 1 1 auto; min-height: 0; display: flex; padding-left: 0; padding-right: 0; }
.hn-hero > .container > .rounded-2xl { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; }
.hn-main { grid-area: main; grid-column: 1 / -1; min-width: 0; align-self: start; }

/* ---------- 左侧分类卡 ---------- */
.hn-sidecard {
  position: static;
  flex: 1 1 auto; min-height: 0; box-sizing: border-box; height: 100%;
  display: flex; flex-direction: column;
  background: var(--hn-card);
  border: 1px solid var(--hn-border);
  border-radius: 16px;
  padding: .65rem;
}
.hn-sidehead { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem .55rem; }
.hn-bar { width: 4px; height: 18px; border-radius: 999px; background: var(--hn-primary); flex: none; }
.hn-sidehead .hn-side-title { font-size: 16px; font-weight: 600; color: var(--hn-fg); margin: 0; }

.hn-cats { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.hn-cats::-webkit-scrollbar { width: 6px; }
.hn-cats::-webkit-scrollbar-thumb { background: var(--hn-border); border-radius: 999px; }
.hn-cat {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  padding: .5rem .7rem; border-radius: 12px; min-height: 41px;
  font-size: 14px; line-height: 1.2; color: var(--hn-fg);
  transition: background .15s ease, color .15s ease;
}
.hn-cat:hover { background: var(--hn-muted-bg); }
.hn-catname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-ico {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: var(--hn-primary-10); color: var(--hn-primary);
}
.hn-arrow {
  flex: none; width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--hn-border); display: inline-flex; align-items: center; justify-content: center;
  color: var(--hn-muted); background: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.hn-arrow svg { width: 13px; height: 13px; }
.hn-cat:hover .hn-arrow { border-color: var(--hn-primary); color: var(--hn-primary); }

/* 激活态：实心主题蓝、白字（niub 侧栏特征） */
.hn-cat.active { background: var(--hn-primary); color: var(--hn-primary-fg); }
.hn-cat.active:hover { background: var(--hn-primary); }
.hn-cat.active .hn-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.hn-cat.active .hn-arrow { border-color: rgba(255, 255, 255, .45); color: #fff; }

/* ---------- 悬停弹出的“下一级分类”面板（贴分类卡右缘、顶部对齐；按内容完整展开，仅当超出视口高度时才内部滚动） ---------- */
.hn-flyout {
  position: absolute; top: 0; left: calc(100% + 12px); z-index: 60;
  min-width: 224px; max-width: 268px; max-height: calc(100vh - 7rem); box-sizing: border-box;
  overflow-y: auto; padding: .5rem;
  background: var(--hn-card); border: 1px solid var(--hn-border); border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .16);
  display: none;  /* 即时显隐，不依赖淡入过渡，避免动画被暂停时浮层永远不可见 */
}
.hn-flyout.open { display: block; }
.hn-flyout::-webkit-scrollbar { width: 6px; }
.hn-flyout::-webkit-scrollbar-thumb { background: var(--hn-border); border-radius: 999px; }
.hn-fly-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: 13px; font-weight: 600; color: var(--hn-muted);
  padding: .35rem .55rem .45rem;
}
.hn-fly-title::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--hn-primary); }
.hn-fly-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; color: var(--hn-fg); padding: .5rem .55rem; border-radius: 10px;
}
.hn-fly-item:hover { background: var(--hn-primary-10); color: var(--hn-primary); }
.hn-fly-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-fly-all {
  display: block; margin-top: .2rem; padding: .5rem .55rem;
  font-size: 12.5px; color: var(--hn-primary); border-radius: 10px; text-decoration: none;
}
.hn-fly-all:hover { background: var(--hn-primary-10); }
@media (max-width: 1023px) { .hn-flyout { display: none !important; } }
/* 这些元素由 <a> 改为 <button>：去除按钮 UA 默认边框/背景/字体，沿用原文字/胶囊样式 */
button.hn-groupmore,
button.hn-fly-all { border: 0; background: transparent; cursor: pointer; font: inherit; }
button.hn-groupmore { padding: 0; }
button.hn-fly-all { width: 100%; text-align: left; }
button.hn-more { font: inherit; cursor: pointer; }
button.hn-more:disabled { opacity: .6; cursor: default; }
/* Banner 中指向商品中心的按钮型 CTA（无 href、Vue 客户端跳转），由 home.js 识别后加此类隐藏 */
.hn-cta-off { display: none !important; }

/* ---------- 右侧主区 ---------- */
.hn-main { flex: 1 1 auto; min-width: 0; }

/* 搜索框 */
.hn-search { position: relative; margin-bottom: 1.3rem; }
.hn-searchicon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--hn-muted); display: inline-flex; pointer-events: none; }
.hn-searchicon svg { width: 18px; height: 18px; }
.hn-searchinput {
  width: 100%; height: 48px; border-radius: 12px;
  border: 1px solid var(--hn-border); background: var(--hn-card);
  padding: 0 1rem 0 2.6rem; font-size: 14px; color: var(--hn-fg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hn-searchinput::placeholder { color: var(--hn-muted); }
.hn-searchinput:focus { outline: none; border-color: var(--hn-primary); box-shadow: 0 0 0 3px var(--hn-ring); }

/* 以图搜图相机按钮（vision-search.js 注入到 .hn-search 内）：固定在首页搜索框右侧，niub 配色 */
.hn-search .vs-cam {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hn-border); border-radius: 10px;
  background: var(--hn-card); color: var(--hn-muted); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hn-search .vs-cam:hover { background: var(--hn-muted-bg); color: var(--hn-primary); border-color: var(--hn-primary); }
.hn-search .vs-cam svg { width: 19px; height: 19px; }
.hn-search .vs-cam.vs-drag { border-color: var(--hn-primary); background: var(--hn-muted-bg); }
.hn-search:has(.vs-cam) .hn-searchinput { padding-right: 3.2rem; }

/* 分组标题 */
.hn-group { margin-bottom: 1.9rem; }
.hn-grouphead { display: flex; align-items: center; gap: .55rem; margin: 0 0 .85rem; }
.hn-grouphead .hn-gname { font-size: 16px; font-weight: 600; color: var(--hn-fg); }
.hn-grouphead .hn-gcount { font-size: 13px; color: var(--hn-muted); }
.hn-grouphead .hn-spacer { flex: 1 1 auto; }
.hn-groupmore { font-size: 13px; color: var(--hn-primary); text-decoration: none; white-space: nowrap; }
.hn-groupmore:hover { text-decoration: underline; }
.hn-ico-sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

/* 分组内商品：每组 5 件，等分排满并随容器宽度自适应（宽屏一行 5 个，平板 3 个、手机 2 个自动折行） */
.hn-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.hn-row a.hn-card { width: 100%; min-width: 0; }
@media (max-width: 1023px) { .hn-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } }
@media (max-width: 560px) { .hn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 网格视图（单分类 / 搜索结果） */
.hn-viewhead { display: flex; align-items: center; gap: .7rem; margin: .1rem 0 1rem; flex-wrap: wrap; }
.hn-viewhead .hn-vtitle { font-size: 17px; font-weight: 600; color: var(--hn-fg); }
.hn-viewhead .hn-vcount { font-size: 13px; color: var(--hn-muted); }
.hn-viewhead .hn-spacer { flex: 1 1 auto; }
.hn-vback {
  border: 1px solid var(--hn-border); background: var(--hn-card); color: var(--hn-fg);
  font-size: 13px; border-radius: 999px; padding: .4rem .9rem; cursor: pointer;
}
.hn-vback:hover { border-color: var(--hn-primary); color: var(--hn-primary); }
.hn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .hn-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .hn-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .hn-grid { grid-template-columns: repeat(5, 1fr); } }

a.hn-card { text-decoration: none; color: inherit; display: flex; }
.hn-msg { grid-column: 1 / -1; text-align: center; color: var(--hn-muted); padding: 3rem 1rem; font-size: .9rem; }
.hn-morewrap { display: flex; justify-content: center; margin-top: 1.6rem; }
.hn-more {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--hn-border); background: var(--hn-card); color: var(--hn-fg);
  padding: .6rem 1.5rem; border-radius: 999px; font-size: .875rem; cursor: pointer;
  text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.hn-more:hover { border-color: var(--hn-primary); color: var(--hn-primary); }

/* ---------- 移动端：单列，Banner 最上、分类条其次、搜索商品在下 ---------- */
@media (max-width: 1023px) {
  .hn-layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 1rem; grid-template-areas: "hero" "side" "main"; }
  .hn-side { width: auto; align-self: start; display: block; }
  .hn-main { grid-column: 1 / -1; }
  .hn-shop { padding-top: 4.5rem; }
  .hn-sidecard { position: static; height: auto; flex: none; overflow: visible; padding: .45rem; }
  .hn-sidehead { display: none; }
  .hn-cats { flex-direction: row; overflow: visible; overflow-x: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
  .hn-cat { flex: 0 0 auto; width: auto; min-height: 36px; }
  .hn-cat .hn-arrow { display: none; }
}

/* ---------- 首屏加载骨架（数据返回前占位，避免官方区块闪现） ---------- */
@keyframes hnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
.hn-cats .hn-sk-chip {
  display: block; height: 41px; margin: 2px 0; border-radius: 12px;
  background: #ececf0; animation: hnPulse 1.25s ease-in-out infinite;
}
.hn-sk-group { margin-bottom: 1.9rem; }
.hn-sk-gtitle { height: 18px; width: 190px; border-radius: 6px; background: #ececf0; animation: hnPulse 1.25s ease-in-out infinite; margin: 0 0 .85rem; }
.hn-sk-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.hn-sk-card { width: 100%; height: 252px; border-radius: 16px; background: #efeff2; animation: hnPulse 1.25s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hn-sk-chip, .hn-sk-gtitle, .hn-sk-card { animation: none; }
}
@media (max-width: 1023px) {
  .hn-cats .hn-sk-chip { display: inline-block; width: 92px; height: 36px; margin: 0 .4rem 0 0; }
  .hn-sk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .hn-sk-card { height: 212px; }
}
@media (max-width: 560px) {
  .hn-sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}