/* ============================================================================
   商品列表页 · 侧栏搜索框 + 整页贴顶（2026-10-23）
   ----------------------------------------------------------------------------
   需求：
     1. 搜索框从顶部横栏移到左侧「商品分类」标题上方
     2. 整页贴顶，去掉顶部大留白
     3. 搜索框必须兼顾手机端（手机无侧栏，顶部搜索保留并重做样式）

   实现策略：
     - 桌面（>915px）：侧栏 .bx-aside-search 显示，顶部 .bx-search-inline 隐藏
     - 手机（≤915px）：侧栏整体折叠进抽屉，顶部 .bx-search-inline 重新设计为
       通栏胶囊搜索条，不依赖 Element UI 的 el-input 默认样式
     - 贴顶：把 el-main / main-card 的上内边距压到 0，仅保留一条细分隔
   ============================================================================ */

/* ---------- 一、整页贴顶 ---------- */

/* Element UI 的 el-main 默认有 20px 内边距，是顶部留白的主因 */
.template .el-main {
  padding: 0 !important;
  overflow: visible !important;
}

.bx-main-card {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* topMenu 下方的第一段空白一并压掉 */
.template .el-container > .el-main > .main-card,
.template .el-container > .el-main > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 顶部公告横幅与内容之间原来有 20px，收紧到 12px */
.bx-announcement-banner {
  margin-bottom: 12px !important;
}

/* ---------- 二、侧栏搜索框（桌面） ---------- */

.bx-aside-search {
  padding: 0 0 12px;
  margin-bottom: 2px;
}

.bx-aside-search-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  padding-left: 34px;
  padding-right: 40px;
  border-radius: 10px;
  background: #f4f7fc;
  border: 1px solid #e2e9f4;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

/* 聚焦：蓝色描边 + 外发光，与站内蓝色主色一致 */
.bx-aside-search-box:focus-within {
  background: #ffffff;
  border-color: #2f5fd0;
  box-shadow: 0 0 0 3px rgba(47, 95, 208, .12);
}

.bx-aside-search-ico {
  position: absolute;
  left: 11px;
  color: #8b98ab;
  pointer-events: none;
  flex-shrink: 0;
  transition: color .16s ease;
}

.bx-aside-search-box:focus-within .bx-aside-search-ico {
  color: #2f5fd0;
}

/* 输入框：重置浏览器默认样式 */
.bx-aside-search-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: #1c2c40;
  font-family: inherit;
  /* iOS 上 <16px 会触发聚焦自动放大，桌面侧栏无需考虑，手机端另有覆盖 */
}

.bx-aside-search-input::placeholder {
  color: #a3aebe;
}

/* 搜索按钮：右侧圆形小按钮 */
.bx-aside-search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #2f5fd0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}

.bx-aside-search-btn:hover {
  background: #244bb0;
}

.bx-aside-search-btn:active {
  transform: translateY(-50%) scale(.94);
}

.bx-aside-search-btn:disabled {
  opacity: .6;
  cursor: wait;
}

/* 加载转圈 */
.bx-aside-search-spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: bxAsideSpin .7s linear infinite;
}

@keyframes bxAsideSpin {
  to { transform: rotate(360deg); }
}

/* 搜索状态摘要 */
.bx-aside-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding: 0 2px;
  font-size: 11.5px;
  color: #6b7c93;
}

.bx-aside-search-exit {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #d8e2f0;
  background: #fff;
  color: #4a5d78;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s ease;
  font-family: inherit;
}

.bx-aside-search-exit:hover {
  border-color: #2f5fd0;
  color: #2f5fd0;
  background: #f2f6ff;
}

/* ---------- 三、手机端顶部搜索条（重做，不用 el-input 默认外观） ---------- */

.bx-search-inline {
  display: none;   /* 桌面隐藏，手机端在下面开启 */
}

@media screen and (max-width: 915px) {
  /* 手机没有侧栏，顶部搜索条恢复显示 */
  .bx-topbar {
    display: block !important;
    padding: 2px 0 10px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #eef2f8 !important;
  }

  .bx-search-inline {
    display: flex !important;
    align-items: center;
    gap: 0;
    width: 100% !important;
    padding: 0 !important;
  }

  /* el-input 改造成圆角胶囊 */
  .bx-search-inline .search-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bx-search-inline .search-input .el-input__inner {
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 999px 0 0 999px !important;
    background: #f4f7fc !important;
    border: 1px solid #e2e9f4 !important;
    border-right: 0 !important;
    padding-left: 36px !important;
    /* 16px 避免 iOS 聚焦时页面自动缩放 */
    font-size: 16px !important;
    color: #1c2c40 !important;
    transition: border-color .16s ease, background .16s ease !important;
  }

  .bx-search-inline .search-input .el-input__inner::placeholder {
    color: #a3aebe !important;
    font-size: 13.5px;
  }

  .bx-search-inline .search-input .el-input__inner:focus {
    background: #ffffff !important;
    border-color: #2f5fd0 !important;
  }

  .bx-search-inline .search-input .el-input__prefix {
    left: 13px !important;
    color: #8b98ab !important;
    line-height: 40px !important;
  }

  /* 按钮与输入框拼成一体 */
  .bx-search-inline .search-btn {
    flex: 0 0 auto;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 0 999px 999px 0 !important;
    background: #2f5fd0 !important;
    border-color: #2f5fd0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  /* 搜索结果的分类筛选条：手机端换行排布 */
  .bx-search-filter {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
  }

  .bx-search-filter-select {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* 手机端贴顶：内边距再压一档 */
  .template .el-main {
    padding: 0 !important;
  }
}

/* ---------- 四、平板段（915~1180）侧栏变窄，搜索框同步收 ---------- */
@media screen and (min-width: 916px) and (max-width: 1180px) {
  .bx-aside-search-box {
    height: 36px;
    padding-left: 31px;
    padding-right: 37px;
  }
  .bx-aside-search-input {
    font-size: 12.5px;
  }
  .bx-aside-search-btn {
    width: 26px;
    height: 26px;
  }
}

/* ---------- 五、尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bx-aside-search-box,
  .bx-aside-search-btn,
  .bx-aside-search-exit {
    transition: none !important;
  }
  .bx-aside-search-spin {
    animation-duration: 1.6s;
  }
}