/* ==========================================================================
   fxcat · 选购大厅 v3 改造层
   本层置于文件末尾，覆盖前面所有旧版样式。
   改动要点：
     1. 侧边栏改为「一级折叠 + 二级标签一行三个」，宽度 232 → 272px
     2. 顶部区域横幅换成「分区公告」面板（内容由后台按二级分类配置）
     3. 商品卡按参考图重排：标题 + 库存状态标签、参数清单、
        居中价格框、周期后「平均 x/天」、蓝色立即购买按钮
     4. 售罄商品整卡灰白浅色
   ========================================================================== */

:root {
  /* 参考图取样：按钮与链接用的正蓝 */
  --fx-blue: #2563eb;
  --fx-blue-dark: #1d4ed8;
  --fx-blue-soft: #eff4ff;
  --fx-blue-border: #bfd3fb;

  /* 库存三档（充足 / 紧张 / 告警）+ 售罄 */
  --fx-stock-enough-ink: #15803d;
  --fx-stock-enough-bg: #ecfdf3;
  --fx-stock-enough-bd: #b7e6c9;
  --fx-stock-tense-ink: #b45309;
  --fx-stock-tense-bg: #fff7e8;
  --fx-stock-tense-bd: #f3d9a4;
  --fx-stock-alert-ink: #b91c1c;
  --fx-stock-alert-bg: #fdecec;
  --fx-stock-alert-bd: #f3c0c0;
  --fx-stock-out-ink: #9aa3b0;
  --fx-stock-out-bg: #f2f4f7;
  --fx-stock-out-bd: #e2e6ec;
}

/* ============================================================ 0. 顶部栏 */
/* 原「一级导航胶囊」已移除：分类筛选统一由左侧栏（桌面）/ 抽屉（手机）承担，
   顶部只保留搜索。这条规则兜底，防止旧模板或缓存残留再把它渲染出来。 */
.bx-type-tabs {
  display: none !important;
}

.bx-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--bx-border);
  margin-bottom: 18px;
}

.bx-topbar-spacer {
  flex: 1;
  min-width: 0;
}

/* 搜索结果分类筛选条 */
.bx-search-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.bx-search-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d21;
}

.bx-search-filter-select {
  width: 220px;
  flex-shrink: 0;
}

.bx-search-filter-select .el-input__inner {
  height: 34px !important;
  line-height: 34px !important;
  border-radius: 7px;
  border-color: #dbe3ef;
  font-size: 13px;
}

.bx-search-exit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 11px;
  border: 1px solid #e2e6ec;
  border-radius: 7px;
  background: #fff;
  color: #5b6676;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.bx-search-exit:hover {
  color: var(--fx-blue);
  border-color: var(--fx-blue-border);
  background: var(--fx-blue-soft);
}

/* 搜索框在顶部栏内固定宽度，手机端另用媒体查询拉满 */
.bx-search-inline .search-input {
  width: 280px;
}

/* ============================================================ 1. 侧边栏 */

.bx-layout {
  /* 稍微加宽：232 → 272，二级标签一行三个后需要更多横向空间 */
  grid-template-columns: 320px minmax(0, 1fr);
}

/* 侧栏容器（2026-10-26 改）
   原：.bx-region-list 固定 max-height:640px，内容多时出内部滚动条，
       侧栏底部与右侧商品区之间空出一大块。
   现：整个侧栏改为「sticky 贴顶 + 高度跟随视口」的 flex 纵向布局，
       内部列表吃掉剩余高度，列表长了就在栏内滚动，栏目本身不再定高。
   注意：只在桌面端生效，手机端侧栏整体进抽屉，不受影响。 */
.bx-region-panel {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /* 减掉顶栏 + 公告 + 上下间距，让侧栏几乎填满可视区 */
  max-height: calc(100vh - 132px);
  position: sticky;
  top: 12px;
  overflow: hidden;
  align-self: start;
}

.bx-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-text);
  background: #fff;
  border-bottom: 1px solid var(--bx-border);
}

.bx-region-head-count {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bx-text-mute);
  background: var(--bx-bg-soft);
  border: 1px solid var(--bx-border);
  border-radius: 10px;
  padding: 1px 8px;
}

/* 列表区：高度由父级 flex 分配，自身滚动。
   flex:1 1 auto + min-height:0 是让「子元素可滚动」的关键组合
   （不加 min-height:0 时 flex 子项默认最小高度为内容高度，无法收缩）。 */
.bx-region-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: #ccd6e4 transparent;
}

.bx-region-list::-webkit-scrollbar {
  width: 6px;
}

.bx-region-list::-webkit-scrollbar-thumb {
  background: #ccd6e4;
  border-radius: 3px;
}

.bx-region-list::-webkit-scrollbar-thumb:hover {
  background: #b3c1d3;
}

.bx-region-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 一级分类行 */
/* 一级分类行：深蓝实心条（参考图样式） */
.bx-nav-group + .bx-nav-group {
  margin-top: 2px;
}

.bx-nav-first {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  height: 46px;
  border-radius: 6px;
  cursor: pointer;
  color: #1a1d21;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  transition: background .16s ease, color .16s ease;
  user-select: none;
}

.bx-nav-first:hover {
  background: #f1f3f8;
}

/* 展开态 = 深蓝实心条；收起时是普通白底深字，形成清晰的"开/关"对照 */
.bx-nav-first.is-open {
  color: #fff;
  background: linear-gradient(100deg, #1e45c4 0%, #1b3fae 100%);
  box-shadow: 0 4px 12px -4px rgba(30, 69, 196, .45);
}

.bx-nav-first-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1e45c4;
}

.bx-nav-first.is-open .bx-nav-first-ico {
  color: #fff;
}

.bx-nav-first-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-nav-first-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #eef1f6;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.bx-nav-first.is-open .bx-nav-first-count {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.bx-nav-arrow {
  flex-shrink: 0;
  color: #9aa3b0;
  transition: transform .2s ease, color .2s ease;
  /* 参考图：展开时箭头朝上，收起时朝下 */
  transform: rotate(0deg);
}

.bx-nav-first.is-open .bx-nav-arrow {
  color: #fff;
}

.bx-nav-first:not(.is-open) .bx-nav-arrow {
  transform: rotate(180deg);
}

/* 二级清单：大按钮条目 + 图标（参考图样式） */
.bx-nav-second-wrap {
  padding: 6px 0 8px;
}

.bx-nav-list {
  display: flex;
  flex-direction: column;
}

.bx-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 46px;
  padding: 0 14px 0 22px;
  border-radius: 6px;
  cursor: pointer;
  color: #3c4655;
  font-size: 14px;
  font-weight: 500;
  transition: background .16s ease, color .16s ease;
  user-select: none;
}

.bx-nav-item:hover {
  background: #f5f7fb;
  color: #1e45c4;
}

/* 选中态：浅蓝底 + 蓝字（参考图里"轻量应用云"的处理） */
.bx-nav-item.active {
  background: #eef3fe;
  color: #1e45c4;
  font-weight: 600;
}

.bx-nav-item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #8a93a3;
}

.bx-nav-item:hover .bx-nav-item-ico,
.bx-nav-item.active .bx-nav-item-ico {
  color: #1e45c4;
}

.bx-nav-item-ico img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.bx-nav-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标签容器：贴右显示。
   侧边栏只有 272px，名称 + 3 枚标签横向放不下。
   方案：容器做成"最多 2 枚可见"，第 3 枚起由 JS 折成 +N
   （见 descTags 的 max 参数），保证名称永远有最小可读宽度。 */
.bx-metal-tags {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  margin-left: auto;
  max-width: 100%;
  overflow: hidden;
}

.bx-metal-tags .bx-metal-tag {
  margin-left: 0;
  flex-shrink: 0;
}

/* 名称最小可读宽度：宁可标签折行/减少，也不能把名称压成"香港…" */
.bx-nav-item .bx-nav-item-name {
  min-width: 72px;
}

.bx-nav-item .bx-metal-tags {
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}

/* 兼容旧的胶囊样式（若其它地方还在用） */
.bx-nav-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bx-nav-chip {
  padding: 6px 4px;
  border: 1px solid var(--bx-border);
  border-radius: 6px;
  background: #fff;
  color: var(--bx-text-sub);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  word-break: break-word;
}

.bx-nav-chip.active {
  color: #fff;
  background: #1e45c4;
  border-color: #1e45c4;
}

.bx-nav-empty {
  padding: 6px 2px;
  font-size: 12px;
  color: var(--bx-text-mute);
}

/* ============================================================
   红色 · 金属质感描述标签
   ------------------------------------------------------------
   设计思路：
     1. 金属感的核心是「自上而下的明暗渐变 + 顶部高光 + 底部阴影」，
        不是单纯填个红色。
     2. 顶边用 1px 亮红内高光模拟受光的金属棱边，
        底边用深红外阴影 + 外投影做出「压进面板」的厚度。
     3. 表面叠一层极淡的斜向扫光（-18deg），只在 0.5 秒内随 hover 位移，
        营造金属反光的动态感，但不做循环动画 —— 列表里几十个标签同时闪会晕。
     4. 文字加 0 1px 1px 的深红投影，让白字在红底上有"压印"的实感。
   ============================================================ */

.bx-metal-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 112px;
  height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 4px;
  overflow: hidden;
  /* 主体：上亮下暗的三段红，形成金属圆柱受光 */
  background: linear-gradient(180deg,
      #f4574c 0%,
      #e03a2f 42%,
      #c02a20 72%,
      #9d1d15 100%);
  /* 内阴影：顶部 1px 亮边（受光棱）+ 底部 1px 暗边（背光棱） */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 1px 2px rgba(154, 26, 18, .35),
    0 2px 6px -2px rgba(154, 26, 18, .45);
  cursor: default;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 斜向扫光：一层很淡的白色高光带，静态时不抢眼，hover 时滑过 */
.bx-metal-tag::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .38) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(18deg) translateX(0);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

/* 金属细纹理：极淡的横向拉丝，让哑光感不至于像塑料 */
.bx-metal-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .055) 0px,
      rgba(255, 255, 255, .055) 1px,
      rgba(0, 0, 0, .03) 1px,
      rgba(0, 0, 0, .03) 2px);
  pointer-events: none;
}

.bx-metal-tag-text {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  /* 白字压印：深红投影让文字"陷"进金属表面 */
  text-shadow: 0 1px 1px rgba(120, 12, 8, .75), 0 0 1px rgba(120, 12, 8, .5);
}

/* hover：整体微微提亮 + 上浮，扫光横向掠过 */
.bx-nav-item:hover .bx-metal-tag,
.bx-nav-item.active .bx-metal-tag {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 2px 4px rgba(154, 26, 18, .40),
    0 4px 10px -3px rgba(154, 26, 18, .50);
}

.bx-nav-item:hover .bx-metal-tag::before,
.bx-nav-item.active .bx-metal-tag::before {
  transform: rotate(18deg) translateX(320%);
}

/* 抽屉里的小尺寸 */
.bx-metal-tag.is-sm {
  max-width: 92px;
  height: 18px;
  margin-left: 8px;
  padding: 0 6px;
}

.bx-metal-tag.is-sm .bx-metal-tag-text {
  font-size: 10px;
}

/* +N 余量标：同款金属质感但更暗一档，语义是"还有更多"而不是卖点本身 */
.bx-metal-tag.is-more {
  padding: 0 5px;
  max-width: none;
  background: linear-gradient(180deg,
      #6b7280 0%,
      #525a67 45%,
      #3f4652 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 1px 2px rgba(35, 40, 50, .28);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

.bx-metal-tag.is-more::after {
  display: none;
}

/* 售罄分区里的标签：去色处理，避免"不可售"还挂着高饱和红标 */
.shopping-item.is-sold-out .bx-metal-tag {
  filter: grayscale(1) brightness(1.05);
}

/* ============================================================ 2. 手机端分组筛选抽屉 */

/* 桌面端一律隐藏：左栏常驻，抽屉是重复入口 */
.bx-mobile-filter-bar,
.bx-mf-mask,
.bx-mf-drawer {
  display: none;
}

@media screen and (max-width: 915px) {

  /* 手机端：左栏整块隐藏，改由抽屉承担筛选 */
  .bx-region-panel {
    display: none !important;
  }

  .bx-mobile-filter-bar {
    display: block;
    margin-bottom: 12px;
  }

  .bx-mf-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #dbe3ef;
    border-radius: 9px;
    background: #fff;
    color: #1a1d21;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bx-mf-btn:active {
    background: #f5f7fb;
  }

  .bx-mf-btn svg {
    color: #1e45c4;
    flex-shrink: 0;
  }

  .bx-mf-btn-text {
    flex-shrink: 0;
  }

  /* 当前分区名：蓝色、可省略，让用户随时知道在看哪个分区 */
  .bx-mf-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: #1e45c4;
    font-size: 13px;
    font-weight: 500;
  }

  .bx-mf-badge {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #eef3fe;
    color: #1e45c4;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  /* 遮罩 */
  .bx-mf-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .bx-mf-mask.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 底部抽屉：高度 78vh，一屏能看到更多一级 + 二级 */
  .bx-mf-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;
    max-height: 78vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
  }

  .bx-mf-drawer.is-open {
    transform: translateY(0);
  }

  .bx-mf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #eef1f6;
    font-size: 15px;
    font-weight: 700;
    color: #1a1d21;
  }

  .bx-mf-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #f4f6fa;
    color: #5b6676;
    cursor: pointer;
  }

  /* 内容区可滚动，超长分类列表不会顶出屏幕 */
  .bx-mf-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .bx-mf-group + .bx-mf-group {
    margin-top: 4px;
  }

  .bx-mf-first {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1d21;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bx-mf-first:active {
    background: #f5f7fb;
  }

  .bx-mf-first-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bx-mf-first-count {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #eef1f6;
    color: #8a93a3;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
  }

  .bx-mf-arrow {
    flex-shrink: 0;
    color: #9aa3b0;
    transition: transform .2s ease;
  }

  .bx-mf-arrow.is-open {
    transform: rotate(180deg);
    color: #1e45c4;
  }

  /* 二级条目：与左栏同款大按钮，触摸目标 ≥44px */
  .bx-mf-second {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px;
  }

  .bx-mf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    margin: 2px 4px;
    border-radius: 8px;
    font-size: 14px;
    color: #3c4655;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bx-mf-item:active {
    background: #f5f7fb;
  }

  .bx-mf-item.active {
    background: #eef3fe;
    color: #1e45c4;
    font-weight: 600;
  }

  .bx-mf-item-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #8a93a3;
  }

  .bx-mf-item.active .bx-mf-item-ico {
    color: #1e45c4;
  }

  .bx-mf-item-ico img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  }

  .bx-mf-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bx-mf-check {
    flex-shrink: 0;
    color: #1e45c4;
  }
}

/* ============================================================ 3. 分区公告 */

.bx-notice-panel {
  border: 1px solid var(--bx-border);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
}

.bx-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--bx-border);
}

.bx-notice-head-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.bx-notice-flag img {
  display: block;
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.bx-notice-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  flex-shrink: 0;
}

.bx-notice-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bx-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-notice-count {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--fx-blue-dark);
  background: var(--fx-blue-soft);
  border: 1px solid var(--fx-blue-border);
  border-radius: 10px;
  padding: 1px 8px;
  line-height: 1.7;
}

.bx-notice-list {
  padding: 6px 16px 12px;
}

.bx-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bx-text-sub);
  border-bottom: 1px dashed var(--bx-dashed);
}

.bx-notice-item:last-child {
  border-bottom: none;
}

.bx-notice-level {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 19px;
}

.bx-notice-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.bx-notice-date {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--bx-text-mute);
  font-variant-numeric: tabular-nums;
}

/* 四级语义色：与库存标签同一套逻辑，色相可预期 */
.bx-notice-item.is-info .bx-notice-level {
  color: var(--fx-blue-dark);
  background: var(--fx-blue-soft);
  border: 1px solid var(--fx-blue-border);
}

.bx-notice-item.is-success .bx-notice-level {
  color: var(--fx-stock-enough-ink);
  background: var(--fx-stock-enough-bg);
  border: 1px solid var(--fx-stock-enough-bd);
}

.bx-notice-item.is-warning .bx-notice-level {
  color: var(--fx-stock-tense-ink);
  background: var(--fx-stock-tense-bg);
  border: 1px solid var(--fx-stock-tense-bd);
}

.bx-notice-item.is-danger .bx-notice-level {
  color: var(--fx-stock-alert-ink);
  background: var(--fx-stock-alert-bg);
  border: 1px solid var(--fx-stock-alert-bd);
}

.bx-notice-item.is-danger .bx-notice-text {
  color: #8f1d1d;
}

/* ============================================================ 3. 商品卡 */

/* 网格：3 列固定约 420px。
   用 minmax(0, 420px) 而不是 1fr：商品少时列宽不会被拉伸，
   卡片始终保持竖长的"卡片比例"，不会变成扁平大长条。 */
.goods-list-div {
  /* 自适应列数：按可用宽度自动决定放几张卡，铺满整行不留空白。
     auto-fill + minmax(300px, 1fr)：
       - 容器窄（如 900px）→ 自动 2 列
       - 容器 1100px → 3 列
       - 容器 1400px → 4 列
     1fr 让每列等分剩余空间，右边缘永远对齐。
     原来写 repeat(3, minmax(0,420px)) 会把列数锁死为 3，
     宽屏时右侧空出一大片。 */
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)) !important;
  justify-content: stretch !important;
  gap: 16px !important;
  /* 卡片高度改为「各自按内容决定」（align-items: start）。
     原来用 stretch 让同排行内等高，但介绍区取消滚动后，
     只要有一张卡介绍很长，整行其它卡都会被拉到同样高，
     底部留出一大片空白，比参差不齐更难看。
     现在每张卡高度贴合自身内容，视觉更自然。 */
  align-items: start !important;
  /* 行高用 auto（内容最高者决定），不能写 1fr ——
     那会让所有行都被拉成同样高，短内容的行底部出现大片空白 */
  grid-auto-rows: auto !important;
}

/* 卡片本身也允许被纵向拉伸（旧样式的 min-height:0 / 固定高度会阻止） */
.goods-list-div > .shopping-item {
  align-self: start !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 介绍区：完整展示全部内容，绝不出现内部滚动条。
   —— 原来写了 max-height:300px + overflow-y:auto，介绍稍长就出滚动条，
      用户要求"显示完全、不要下滑"，这里彻底取消高度限制。
   同时保留 flex:1，让内容少的卡片把价格区推到底部，
   配合网格 align-items:stretch 实现同排等高。 */
.goods-list-div > .shopping-item .bx-spec-raw,
.goods-list-div > .shopping-item .bx-spec-table {
  flex: 1 1 auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  /* 内容含长英文/URL 时也要能换行，否则会横向撑破卡片 */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.goods-list-div > .shopping-item > .price-box {
  margin-top: auto !important;
}

/* 卡片宽度跟随列宽铺满。
   原 max-width:420px 会在列被拉宽时把卡片缩回去，导致行尾留白，
   现改为不限宽（列宽由 grid 的 minmax(300px,1fr) 控制）。
   设一个较大的上限防止超宽屏下卡片过宽（>560px 会显得空旷）。 */
.shopping-item {
  max-width: 560px !important;
  width: 100%;
  justify-self: stretch;
  padding: 0 0 16px !important;
  border-radius: 10px !important;
  /* 参考图 2：卡片白底 → 浅蓝渐变，底部略深，让价格区落地 */
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 55%, #eef4ff 100%) !important;
  border: 1px solid #dde8fa !important;
  box-shadow: 0 1px 2px rgba(30, 69, 196, .05), 0 0 0 1px rgba(30, 69, 196, .02) !important;
}

.shopping-item:hover {
  border-color: #b9cffa !important;
  box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .28), 0 2px 6px rgba(30, 69, 196, .06) !important;
  transform: translateY(-2px);
}

/* 标题行：蓝渐变卡片上保持白底会割裂，改为透明承接卡片渐变 */
.bx-card-title-row {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}

.bx-card-title-row::before {
  display: none !important;
}

.shopping-item:has(.client-box) .bx-card-title-row {
  padding-right: 16px !important;
  padding-top: 26px !important;
}

/* 标题：参考图 2 的亮蓝，是卡片第一视觉焦点 */
.bx-card-title-text {
  flex: 1;
  min-width: 0;
  min-height: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #1a3fb8 !important;
  letter-spacing: .1px;
  -webkit-line-clamp: 2;
}

.shopping-item:hover .bx-card-title-text {
  color: #14309a !important;
}

/* 库存状态标签 */
.bx-stock-tag {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.65;
  white-space: nowrap;
  border: 1px solid transparent;
}

.bx-stock-tag.is-enough {
  color: var(--fx-stock-enough-ink);
  background: var(--fx-stock-enough-bg);
  border-color: var(--fx-stock-enough-bd);
}

.bx-stock-tag.is-tense {
  color: var(--fx-stock-tense-ink);
  background: var(--fx-stock-tense-bg);
  border-color: var(--fx-stock-tense-bd);
}

.bx-stock-tag.is-alert {
  color: var(--fx-stock-alert-ink);
  background: var(--fx-stock-alert-bg);
  border-color: var(--fx-stock-alert-bd);
}

.bx-stock-tag.is-out {
  color: var(--fx-stock-out-ink);
  background: var(--fx-stock-out-bg);
  border-color: var(--fx-stock-out-bd);
}

/* 参数清单：参考图是"标签：值"左对齐的清单，标签灰、值深 */
.bx-spec-table {
  padding: 8px 16px 0 !important;
  margin-top: 0 !important;
}

/* 参考图 2：参数清单行距紧凑、整块占高度，标签灰值深 */
.bx-spec-row {
  display: flex !important;
  align-items: baseline;
  padding: 1px 0 !important;
  border-bottom: none !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
}

/* 隐藏模板换行产生的空白文本节点：
   原本 span 之间换行 → 浏览器渲染出一个空格，视觉上像多了个前导空格 */
.bx-spec-row,
.bx-price-frame {
  font-size: 0;
}

.bx-spec-row > *,
.bx-price-frame > * {
  font-size: 13px;
}

.bx-spec-label {
  display: inline-block !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  font-size: 13px !important;
}

.bx-spec-label::after {
  content: "：";
}

.bx-spec-value {
  display: inline-block !important;
  text-align: left !important;
  color: #374151 !important;
  font-weight: 400 !important;
  word-break: break-word;
  font-size: 13px !important;
}

.bx-spec-raw {
  padding: 10px 16px 0 !important;
  margin-top: 0 !important;
  font-size: 13px;
  line-height: 1.75;
  color: #374151;
}

/* 「说明 / 备注 / 注意」行：参考图使用红色警示，值也一并染红 */
.bx-spec-row.is-warn .bx-spec-label,
.bx-spec-row.is-warn .bx-spec-value {
  color: #d9363e !important;
}

.bx-spec-row.is-warn .bx-spec-value {
  font-weight: 500;
}

/* 介绍区不设高度上限，完整展示 */
.bx-spec-raw,
.bx-spec-table {
  max-height: none !important;
  overflow: visible !important;
}

/* 标签条 */
.shopping-item .goods-tag {
  padding: 0 16px !important;
  margin-top: 10px !important;
}

/* 价格区：居中价格框 + 通栏蓝色按钮 */
.shopping-item .price-box {
  padding: 0 16px !important;
  padding-top: 14px !important;
  gap: 12px !important;
  border-top: none !important;
  /* 让价格区跟着卡片渐变走，不额外铺白底 */
  background: transparent;
}

.bx-price-frame {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  /* 参考图 1：浅色底 + 居中，让红价与粉字同时成立。
     放在蓝渐变卡片上时，用半透白压住底色，避免价格框"发蓝" */
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 3px rgba(30, 69, 196, .06);
  text-align: center;
  color: var(--bx-price);
  font-variant-numeric: tabular-nums;
}

.bx-price-cur {
  font-size: 13px;
  font-weight: 700;
  color: var(--bx-price);
}

.shopping-item .bx-price-frame,
.shopping-item .bx-price-cur,
.shopping-item .bx-price-int,
.shopping-item .bx-price-dec {
  color: #ff0000;
}

/* 主价格：纯正红 #ff0000（用户指定），参考图 1 的字重与尺寸 */
.bx-price-int {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: #ff0000;
}

.bx-price-dec {
  font-size: 14px;
  font-weight: 800;
  color: #ff0000;
}

/* 周期：币种/周期合成一体（¥/月），灰色不与红价抢焦点 */
.bx-price-unit {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

/* 平均每天：粉色（参考图 1 里"平均0.71/天"的粉调），用桃粉而不是荧光粉 */
.bx-price-perday {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #e5e9f2;
  font-size: 13px;
  font-weight: 600;
  color: #ec4899;
}

.bx-price-origin {
  margin-left: 8px;
  font-size: 12px;
  color: #b0b7c3;
  text-decoration: line-through;
}

/* 立即购买：参考图蓝色通栏 */
.shopping-item .buy-btn,
.shopping-item .price-box .buy-btn {
  background: var(--fx-blue) !important;
  border: 1px solid var(--fx-blue) !important;
  border-radius: 8px !important;
  height: 42px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .55) !important;
}

.shopping-item .buy-btn:hover,
.shopping-item .price-box .buy-btn:hover {
  background: var(--fx-blue-dark) !important;
  border-color: var(--fx-blue-dark) !important;
  box-shadow: 0 8px 20px -6px rgba(29, 78, 216, .6) !important;
}

.shopping-item .buy-btn i {
  margin-right: 6px;
}

/* 售罄按钮：灰底灰字，去掉蓝色投影 */
.shopping-item .buy-btn.is-sold-out-btn,
.shopping-item .price-box .buy-btn.is-sold-out-btn {
  background: #f1f3f6 !important;
  border-color: #e2e6ec !important;
  color: #9aa3b0 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ============================================================ 4. 售罄卡片（灰白浅色） */

.shopping-item.is-sold-out {
  /* 售罄卡片保持正常配色：白底 → 浅蓝渐变，与在售卡片一致，
     只通过按钮和右上角三角标签区分状态（用户要求）。 */
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 55%, #eef4ff 100%) !important;
  border-color: #dde8fa !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7faff 55%, #eef4ff 100%) !important;
  opacity: 1 !important;
  filter: none !important;
}

.shopping-item.is-sold-out:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(30, 69, 196, .05), 0 0 0 1px rgba(30, 69, 196, .02) !important;
  border-color: #dde8fa !important;
}

/* ---------- 售罄：按钮变灰（唯一灰化的交互元素之一） ---------- */
.shopping-item.is-sold-out .buy-btn,
.shopping-item.is-sold-out .price-box .buy-btn,
.shopping-item.is-sold-out .buy-btn.is-sold-out-btn {
  background: #eef1f5 !important;
  border: 1px solid #e2e7ef !important;
  color: #98a2b3 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

.shopping-item.is-sold-out .buy-btn:hover,
.shopping-item.is-sold-out .price-box .buy-btn:hover {
  background: #eef1f5 !important;
  border-color: #e2e7ef !important;
  color: #98a2b3 !important;
  box-shadow: none !important;
  transform: none !important;
}

.shopping-item.is-sold-out .buy-btn i,
.shopping-item.is-sold-out .price-box .buy-btn i {
  color: #98a2b3 !important;
}

/* 其余内容全部恢复正常色系（标题 / 配置项 / 价格 / 标签） */
.shopping-item.is-sold-out .bx-card-hero {
  /* 深色顶栏保持原样 */
  filter: none !important;
  opacity: 1 !important;
}

.shopping-item.is-sold-out .bx-card-hero .bx-hero-cat {
  color: #ffffff !important;
}

.shopping-item.is-sold-out .bx-card-hero .bx-hero-name-text,
.shopping-item.is-sold-out .bx-card-hero .bx-hero-name {
  color: rgba(255, 255, 255, .9) !important;
}

.shopping-item.is-sold-out .bx-card-hero .bx-hero-art {
  color: rgba(120, 170, 235, .5) !important;
}

.shopping-item.is-sold-out .bx-spec-label,
.shopping-item.is-sold-out .bx-spec-label::after {
  color: #6b7280 !important;
}

.shopping-item.is-sold-out .bx-spec-value {
  color: #2b3340 !important;
}

/* 售罄卡片里，商品介绍要与在售完全一致。
   注意：绝对不能给子元素写 color:inherit !important —
   后台富文本里的 <span style="color:#e03e2d"> 行内样式会被强行覆盖成继承色，
   红/紫高亮就全丢了。这里只解除 filter/opacity，颜色一律放行。 */
.shopping-item.is-sold-out .bx-spec-raw {
  color: #2b3340 !important;
  filter: none !important;
  opacity: 1 !important;
}

.shopping-item.is-sold-out .bx-spec-raw * {
  filter: none !important;
  opacity: 1 !important;
  /* 不写 color —— 让 <span style="color:xxx"> 的行内样式正常生效 */
}

.shopping-item.is-sold-out .goods-tag .tag-item,
.shopping-item.is-sold-out .goods-active .active-name {
  filter: none !important;
  opacity: 1 !important;
}

/* 价格框恢复白底与正常红色价格 */
.shopping-item.is-sold-out .bx-price-frame {
  background: #ffffff !important;
  border-color: #eef2f8 !important;
}

.shopping-item.is-sold-out .bx-price-cur,
.shopping-item.is-sold-out .bx-price-int,
.shopping-item.is-sold-out .bx-price-dec {
  color: #e8203a !important;
}

.shopping-item.is-sold-out .bx-price-unit {
  color: #8b93a1 !important;
}

.shopping-item.is-sold-out .bx-price-perday {
  color: #e8408a !important;
}

/* 折扣信息（若有）也恢复正常色 */
.shopping-item.is-sold-out .bx-disc-origin,
.shopping-item.is-sold-out .bx-disc-origin-label {
  color: #a7aeba !important;
}

.shopping-item.is-sold-out .bx-disc-save {
  background: #fff0f2 !important;
  border-color: #ffd6dc !important;
  color: #e8203a !important;
}

/* ============================================================ 5. 响应式 */

@media screen and (max-width: 1500px) {
  /* 不再是死板的 2 列：跟随容器宽度自适应，右边缘永远铺满 */
  .goods-list-div {
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)) !important;
  }
}

@media screen and (max-width: 1180px) {
  .bx-layout {
    grid-template-columns: 290px minmax(0, 1fr);
  }
}

@media screen and (max-width: 1024px) {
  .bx-layout {
    grid-template-columns: 272px minmax(0, 1fr);
  }

  /* 同样自适应：窄屏能放几张就放几张，不强制 2 列 */
  .goods-list-div {
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)) !important;
  }
}

@media screen and (max-width: 915px) {
  .bx-layout,
  .bx-layout.is-domain {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 左栏已被抽屉取代，这里只需保留一个占位高度防止布局抖动 */
  .bx-region-list {
    max-height: 300px;
  }
}

@media screen and (max-width: 750px) {
  .goods-list-div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 手机单列：本就要铺满屏宽，解除 420px 封顶 */
  .shopping-item {
    max-width: none !important;
  }

  .bx-nav-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bx-price-int {
    font-size: 21px;
  }
}

/* ============================================================ 6. 移动端顶部栏 / 搜索结果筛选 */

@media screen and (max-width: 915px) {
  /* 顶部栏改成上下两行：搜索框整行 + 结果筛选整行，避免挤在一块 */
  .bx-topbar {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 10px;
    padding-bottom: 14px;
  }

  .bx-topbar-spacer {
    display: none;
  }

  .bx-search-inline {
    display: flex !important;
    order: 1;
    width: 100%;
    justify-content: stretch;
  }

  .bx-search-inline .search-input {
    flex: 1;
    width: auto !important;
  }

  .bx-search-inline .search-btn {
    width: 68px;
    flex-shrink: 0;
    margin-left: 0;
  }

  /* 结果筛选条：整行，下拉自适应剩余宽度 */
  .bx-search-filter {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bx-search-filter-label {
    max-width: 100%;
    flex: 1 1 100%;
    font-size: 12.5px;
  }

  .bx-search-filter-select {
    flex: 1;
    width: auto !important;
    min-width: 0;
  }

  .bx-search-filter-select .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
  }

  .bx-search-exit {
    height: 36px;
    flex-shrink: 0;
  }

  /* 隐藏遗留的移动端旧搜索盒（已并入顶部栏，避免出现两个搜索框） */
  .main-content-box .search-box.bx-mobile-only {
    display: none !important;
  }
}

/* ============================================================ 7. 基础商品公告卡片（可收起） */

.fx-agree-card {
  position: relative;
  /* 收起态用浅琥珀底提示"这是须知类内容"，与普通信息卡区分开 */
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 60%);
  border: 1px solid #f0e2c8;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* 左侧警示色竖条：一眼看出"这里有必读内容" */
.fx-agree-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.fx-agree-card:hover {
  border-color: #e8d3ae;
  box-shadow: 0 4px 14px -8px rgba(180, 83, 9, .3);
}

.fx-agree-card.is-open {
  background: #fff;
  border-color: #d7e2f5;
  box-shadow: 0 4px 16px -8px rgba(30, 69, 196, .16);
}

.fx-agree-card.is-open::before {
  background: linear-gradient(180deg, #3b82f6, #1e45c4);
}

.fx-agree-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 13px 20px;
  cursor: pointer;
  user-select: none;
  transition: background .16s ease;
}

.fx-agree-card:not(.is-open) .fx-agree-card__head:hover {
  background: #fffaf0;
}

.fx-agree-card__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(217, 119, 6, .34);
}

.fx-agree-card.is-open .fx-agree-card__seal {
  background: linear-gradient(135deg, #1e45c4, #16309a);
  box-shadow: 0 2px 8px rgba(30, 69, 196, .3);
}

.fx-agree-card__title-wrap {
  flex: 1;
  min-width: 0;
}

.fx-agree-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1d21;
  line-height: 1.4;
}

/* 收起时的引导文案：明确写出"需要阅读 + 怎么展开" */
.fx-agree-card__sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #a0691a;
  line-height: 1.5;
}

.fx-agree-card__badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  color: #b45309;
  background: #fff3d6;
  border: 1px solid #f0d79a;
}

/* 展开控件：实心按钮 + 明确文案，不再是一行灰字 */
.fx-agree-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px 0 14px;
  border-radius: 15px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(217, 119, 6, .55);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.fx-agree-card__toggle svg {
  transition: transform .22s ease;
}

.fx-agree-card__head:hover .fx-agree-card__toggle {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px -3px rgba(217, 119, 6, .65);
}

.fx-agree-card__head:active .fx-agree-card__toggle {
  transform: translateY(0) scale(.98);
}

/* 展开后按钮变低调（次要操作），避免和正文抢焦点 */
.fx-agree-card__toggle.is-expanded {
  background: #f1f4f9;
  color: #5b6676;
  box-shadow: none;
}

.fx-agree-card.is-open .fx-agree-card__title-wrap {
  color: #1a1d21;
}

.fx-agree-card__body {
  padding: 0 16px 14px;
  border-top: 1px solid #f1f4f9;
}

.fx-agree-card__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px dashed #eef1f6;
  margin-top: 10px;
}

.fx-agree-card__more {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #1e45c4;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.fx-agree-card__more:hover {
  background: #eff4ff;
  border-color: #bfd3fb;
}

/* ============================================================ 8. 富文本排版（卡片与弹窗共用） */

.fx-agree-richtext {
  font-size: 13px;
  line-height: 1.85;
  color: #3c4655;
  word-break: break-word;
}

.fx-agree-richtext p {
  margin: 0 0 6px;
}

.fx-agree-richtext p:last-child {
  margin-bottom: 0;
}

.fx-agree-richtext strong,
.fx-agree-richtext b {
  color: #1a1d21;
  font-weight: 700;
}

/* 编号条款前的序号：暖褐色，与截图的"1. 2. 3."一致 */
.fx-agree-richtext .fx-warn {
  color: #b45309;
  font-weight: 600;
}

/* 重要警示：红色（截图里"【钻石/王者手续费折半】"这类） */
.fx-agree-richtext .fx-red {
  color: #d9363e;
  font-weight: 600;
}

.fx-agree-richtext ul,
.fx-agree-richtext ol {
  margin: 6px 0;
  padding-left: 20px;
}

.fx-agree-richtext li {
  margin-bottom: 4px;
}

.fx-agree-richtext a {
  color: #1e45c4;
}

.fx-agree-richtext h1,
.fx-agree-richtext h2,
.fx-agree-richtext h3,
.fx-agree-richtext h4 {
  margin: 12px 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1d21;
}

/* ============================================================ 9. 强制阅读弹窗 */

.fx-agree-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
}

.fx-agree-modal.is-open {
  display: block;
}

.fx-agree-modal__mask {
  position: absolute;
  inset: 0;
  /* 【性能】去掉 backdrop-filter: blur —— 它在移动端 GPU 上开销极大，
     是弹窗"卡顿"的主因。纯半透明遮罩视觉上几乎一样，但省掉整层重绘。 */
  background: rgba(15, 23, 42, .55);
  animation: fxAgreeFade .16s ease-out;
  will-change: opacity;
}

.fx-agree-modal__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 【性能】只动 transform/opacity，全部走合成层，不做逐帧重排 */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(860px, calc(100vw - 40px));
  max-height: min(86vh, 820px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .4);
  overflow: hidden;
  animation: fxAgreePop .18s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes fxAgreeFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fxAgreePop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 尊重系统「减少动态效果」偏好：直接不做入场动画 */
@media (prefers-reduced-motion: reduce) {
  .fx-agree-modal__mask,
  .fx-agree-modal__dialog {
    animation: none;
  }
}

.fx-agree-modal__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 15px 20px;
  border-bottom: 1px solid #eef1f6;
}

.fx-agree-modal__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1e45c4, #16309a);
}

.fx-agree-modal__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #1a1d21;
}

.fx-agree-modal__badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  color: #b45309;
  background: #fff7e8;
  border: 1px solid #f3d9a4;
}

/* 阅读区：唯一可滚动区域，监听 scroll 判断是否到底 */
.fx-agree-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 22px 22px;
  background: #fff;
}

.fx-agree-modal__scroll .fx-agree-richtext {
  font-size: 13.5px;
  line-height: 1.95;
}

.fx-agree-modal__endmark {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #e6eaf1;
  text-align: center;
  font-size: 12px;
  color: #a8b0bd;
}

.fx-agree-modal__foot {
  display: flex;
  align-items: center;
  /* 提示文字靠左、按钮组靠右；nowrap 保证按钮不被打散到两行 */
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid #eef1f6;
  background: #fafbfd;
}

/* 手机端：提示文字独占一行，按钮组换到下一行整行排布 */
@media screen and (max-width: 750px) {
  .fx-agree-modal__foot {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fx-agree-modal__hint {
    flex: 1 1 100%;
  }
}

.fx-agree-modal__hint {
  min-width: 0;
  font-size: 12.5px;
}

.fx-agree-modal__warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b45309;
  font-weight: 500;
}

.fx-agree-modal__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #15803d;
  font-weight: 500;
}

/* 「已阅读并继续」：未读完置灰禁用，读完变黑（对齐截图） */
.fx-agree-modal__btn {
  flex-shrink: 0;
  height: 40px;
  min-width: 132px;
  padding: 0 20px;
  border: none;
  border-radius: 9px;
  background: #1a1d21;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}

.fx-agree-modal__btn:hover:not(:disabled) {
  background: #000;
}

/* ---------- 操作区：今日不再提醒 + 已阅读并继续 ----------
   主次分明：
     「今日不再提醒」是弱操作（用户想跳过），做成低存在感的幽灵按钮；
     「已阅读并继续」是主操作，保持黑色实心。
   如果两个都做成实心按钮，会分散注意力，也容易误点跳过。 */
.fx-agree-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fx-agree-modal__skip {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  color: #6b7c93;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.fx-agree-modal__skip:hover {
  color: #1f3b8a;
  border-color: #b9cdf0;
  background: #f5f9ff;
}

.fx-agree-modal__skip:active {
  transform: translateY(1px);
}

/* 键盘可达性：两个按钮都要有清晰焦点环 */
.fx-agree-modal__skip:focus-visible,
.fx-agree-modal__btn:focus-visible {
  outline: 2px solid #2f5fd0;
  outline-offset: 2px;
}

/* ---------- 手机端：按钮等分排列 ----------
   ⚠️ 2026-10-26 修复：原来这里写 `.fx-agree-modal__skip { flex: 1 1 0 }`，
   但被上方同优先级的 `.fx-agree-modal__skip { flex-shrink: 0 }` 覆盖
   （两条选择器权重相同，后出现的生效，而那条在主样式区）。
   结果两个按钮都保持 flex-shrink:0，在 390px 屏上总宽 358px 溢出，
   「已阅读并继续」被推出屏幕（实测 right=623 > 390），无法完成强制阅读。

   现在用更高优先级（父级限定）+ 显式解除 flex-shrink，确保真正可收缩。 */
@media screen and (max-width: 750px) {
  /* ⚠️ 关键：hint 占满一行后，justify-content:space-between 会把
     actions 推到剩余空间的右侧，导致 left=255 / right=591 溢出。
     手机端必须改成 stretch 起点对齐，让 actions 从 0 开始排。 */
  .fx-agree-modal__foot {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .fx-agree-modal__foot .fx-agree-modal__actions {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    margin-left: 0 !important;
    /* hint 已 flex:1 1 100% 独占一行，actions 自然落到第二行 */
    flex: 1 1 100% !important;
  }

  .fx-agree-modal__foot .fx-agree-modal__skip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 42px;
    padding: 0 8px;
    font-size: 12.5px;
    /* 窄屏允许折行，避免被截断成「今日不再…」 */
    white-space: normal;
    line-height: 1.25;
  }

  .fx-agree-modal__foot .fx-agree-modal__btn {
    flex: 1.25 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* 超窄屏（≤360，如 iPhone SE / 老安卓）：按钮改为上下两行，
   保证两个按钮都完整可见且高度够点。
   顺序调整：主操作「已阅读并继续」放上面，弱操作「今日不再提醒」放下。 */
@media screen and (max-width: 360px) {
  .fx-agree-modal__foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .fx-agree-modal__foot .fx-agree-modal__hint {
    order: 3;
    text-align: center;
  }

  .fx-agree-modal__foot .fx-agree-modal__actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .fx-agree-modal__foot .fx-agree-modal__skip,
  .fx-agree-modal__foot .fx-agree-modal__btn {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 44px;
  }
}


.fx-agree-modal__btn:active:not(:disabled) {
  transform: scale(.98);
}

/* 禁用态（未读到底部时）
   ⚠️ 2026-10-26：加过 `.buy-btn span{color:#fff}` 类似规则后，
   禁用态文字被刷成白色 → 灰底白字几乎不可见（实测截图一片空白）。
   这里给 span / i 一并覆盖为灰字，并加深底色让"不可点"更明确。
   对比度：文字 #8b95a3 on #eef1f6 ≈ 3.4:1，达到大字号 AA 标准。 */
.fx-agree-modal__btn.is-disabled,
.fx-agree-modal__btn:disabled {
  background: #eef1f6 !important;
  border-color: #e4e9f0 !important;
  color: #8b95a3 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.fx-agree-modal__btn.is-disabled span,
.fx-agree-modal__btn:disabled span,
.fx-agree-modal__btn.is-disabled i,
.fx-agree-modal__btn:disabled i {
  color: #8b95a3 !important;
}

/* 手机端禁用态按钮：再深一点，避免在浅背景上"消失" */
@media screen and (max-width: 750px) {
  .fx-agree-modal__btn.is-disabled,
  .fx-agree-modal__btn:disabled {
    background: #e9edf3 !important;
    color: #7d8898 !important;
  }
  .fx-agree-modal__btn.is-disabled span,
  .fx-agree-modal__btn:disabled span {
    color: #7d8898 !important;
  }
}

/* 进度条：贴在弹窗底部，读完走满 */
.fx-agree-modal__progress {
  flex-shrink: 0;
  height: 3px;
  background: #eef1f6;
}

.fx-agree-modal__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3b82f6, #1e45c4);
  transition: width .18s ease;
}

/* 移动端：弹窗铺满屏幕，按钮占满宽度，触摸目标够大 */
@media screen and (max-width: 640px) {
  .fx-agree-modal__dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    left: 0;
    top: 0;
    transform: none;
    animation: none;
  }

  .fx-agree-modal__head {
    padding: 14px 16px;
  }

  .fx-agree-modal__scroll {
    padding: 14px 16px 18px;
  }

  /* 底部区：改为纵向（提示一行 + 按钮一行），与 .fx-agree-modal__actions 配合。
     ⚠️ 2026-10-26：原来这里没有 justify-content，
     加上父级 space-between 会让 actions 被推到右侧溢出屏幕（实测 right=591）。
     现在显式声明 flex-start，保证从左侧开始排布。 */
  .fx-agree-modal__foot {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* 按钮组在纵向 foot 里独占一行。
     ⚠️ 2026-10-26：父级 flex-direction:column 理论上会上下堆叠，
     但实测 .hint 与 .actions 仍并排（hint left=15/w=230，
     actions left=255 = 15+230+10），原因是 flex-wrap:wrap + 子项 flex-basis 计算方式
     让它们挤在同一 flex 行。
     这里给 actions 加 flex-basis:100%，强制它开启新的一行。 */
  /* ⚠️ 关键（2026-10-26）：
     父级 .foot 是 flex-direction:column，但子项用 flex-basis 仍会被当作
     「主轴尺寸」，而 column 的主轴是纵向 → 100% 反而让它按高度算，
     横向依旧并排（实测 hint left=15/w=336、actions left=361）。
     解法：两个子项都改回 block 级宽度，flex 只做「不放大不缩小」。
     用 flex: 0 0 auto + width:100% + align-self:stretch 才能真正上下堆叠。 */
  .fx-agree-modal__foot .fx-agree-modal__hint {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
  }

  .fx-agree-modal__foot .fx-agree-modal__actions {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .fx-agree-modal__btn {
    width: 100%;
    height: 46px;
  }

  .fx-agree-card__title {
    font-size: 13.5px;
  }

  .fx-agree-card__head {
    padding: 11px 12px 11px 16px;
    gap: 8px;
    /* 手机上不换行：标题压缩省略，展开按钮始终在右侧固定位置
       （换行会让按钮跑到第二行，"展开"更容易被忽略） */
    flex-wrap: nowrap;
  }

  .fx-agree-card__seal {
    width: 26px;
    height: 26px;
  }

  .fx-agree-card__sub {
    font-size: 11.5px;
    /* 手机上副标题只留一行，避免撑高 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 角标在窄屏隐藏，把宽度让给"展开全文"按钮 */
  .fx-agree-card__badge {
    display: none;
  }

  .fx-agree-card__toggle {
    height: 28px;
    padding: 0 10px 0 12px;
    font-size: 12px;
  }
}

/* 收起态引导文案：桌面显示完整句，窄屏只显示短句（完整句会被截断成"点…"更难看） */
.fx-agree-card__sub-short {
  display: none;
}

@media screen and (max-width: 640px) {
  .fx-agree-card__sub {
    /* 用 JS 之外的纯 CSS 切换文案：把长句折成短句 */
    font-size: 0;
    white-space: normal;
  }

  .fx-agree-card__sub-short {
    display: inline;
    font-size: 11.5px;
    color: #a0691a;
  }
}

/* ============================================================ 10. 鸿蒙字体 HarmonyOS Sans SC
   子集化说明（2026-10-23 优化）：
     原始 woff2 每个约 930KB（3 字重共 2.8MB），把 readyState 拖在
     "interactive" 长达数秒，直接导致 window.onload 迟迟不触发。
     现在按「真实用字」做子集：
       - 主字体：815 字符（页面/数据库实际用字 + 业务高频词），84KB/字重
       - 三字重合计 2.8MB → 252KB（9%），首屏解析时间从数秒降到毫秒级

   ⚠️ 以后新增商品名如出现"方块字"（字体里没有该字形），
      把新词补进 .deploy/subset_v3.py 的业务词表后重跑即可。

   font-display: swap —— 字体未到达时先用系统字体渲染，绝不阻塞文字显示。
   ============================================================================ */

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("../fonts/subset/HarmonyOS_Sans_SC_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("../fonts/subset/HarmonyOS_Sans_SC_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("../fonts/subset/HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 字体缺失兜底说明 ----------
   主字体只含 815 个「真实用字 + 业务高频词」。
   遇到生僻字（后台新写的商品名等）时，浏览器会沿字体栈回落到
   系统中文黑体（PingFang SC / 微软雅黑），不会出现方块字。
   之所以不做 woff2 分片：字符在 Unicode 里是交错的，无法用
   unicode-range 精确切分，硬切会导致所有分片都被下载（实测 1.5MB），
   反而比单文件更慢。

   如需扩充字库：把新词补进 .deploy/subset_v3.py 的业务词表后重跑。
   ============================================================================ */

/* ---------- 字体栈 ----------
   鸿蒙字体优先；用户设备本身就装了 HarmonyOS Sans 时直接本地命中，
   没装则回落到下面的系统中文黑体，不会出现"方块字"。 */
:root {
  --fx-font: "HarmonyOS Sans SC", "HarmonyOS Sans", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
}

/* 整个购物车页面统一字体 */
.template,
.template body,
.shopping-item,
.bx-region-panel,
.fx-agree-card,
.fx-agree-modal,
.goods-list-div {
  font-family: var(--fx-font);
}

/* 覆盖 goodsList.css 里几处 !important 的旧字体声明 */
.shopping-item,
.shopping-item *:not(i):not(.el-icon-),
.bx-region-panel *:not(i):not(.el-icon-),
.fx-agree-card *,
.fx-agree-modal * {
  font-family: var(--fx-font) !important;
}

/* 图标字体必须还原成 element-ui 的 iconfont，否则 el-icon-* 会变成方块 */
.shopping-item i[class*="el-icon-"],
.fx-agree-modal i[class*="el-icon-"],
.bx-region-panel i[class*="el-icon-"] {
  font-family: element-icons !important;
}

/* ============================================================ 11. 商品介绍默认加粗
   后台写在 description 里的 HTML 介绍（<ul><li>、<p>、无标签纯文本都算），
   前台统一按「正文加 600 字重 + 深色」呈现，比常规 400 更醒目。
   注意：后台自己写的 <span style="font-weight:xxx"> 内联样式优先级更高，
   仍然会被尊重（运营想强调/弱化某一行时不会被吃掉）。
   ============================================================================ */

.bx-spec-raw,
.bx-spec-raw p,
.bx-spec-raw li,
.bx-spec-raw div,
.bx-spec-raw span,
.bx-spec-raw td,
.bx-spec-raw th {
  font-size: 13px;
  line-height: 1.9;
  /* 默认加粗显示 */
  font-weight: 600;
  /* 加粗后颜色略加深，避免"粗而灰"显得糊 */
  color: #2b3340;
}

/* 标题类仍然比正文更重，保持层级 */
.bx-spec-raw h1,
.bx-spec-raw h2,
.bx-spec-raw h3,
.bx-spec-raw h4 {
  font-weight: 800;
}

/* 列表符号与缩进：加粗后行距更密，缩进适当加大 */
.bx-spec-raw ul,
.bx-spec-raw ol {
  padding-left: 20px;
}

.bx-spec-raw li {
  margin-bottom: 3px;
}

/* 参数表分支（未使用 HTML 时）同样加粗 */
.bx-spec-row .bx-spec-label {
  font-weight: 500 !important;
}

.bx-spec-row .bx-spec-value {
  font-weight: 600 !important;
  color: #2b3340 !important;
}

/* ============================================================
   侧栏自适应高度 · 配套规则（2026-10-26）
   ============================================================ */

/* 底部「不确定选择哪款产品」条：始终贴在侧栏底部，不随列表滚动 */
.bx-region-panel .bx-region-foot {
  flex: 0 0 auto;
  margin-top: auto;
}

/* 标题条也不参与压缩 */
.bx-region-panel .bx-region-head,
.bx-region-panel .bx-aside-search {
  flex: 0 0 auto;
}

/* ---------- 手机/平板：彻底回退，避免 sticky 与抽屉叠加 ----------
   ≤915px 时侧栏已被折叠进抽屉，这里把桌面端的 sticky / flex 全部解除，
   保证抽屉内是正常文档流、可整体滚动。 */
@media screen and (max-width: 915px) {
  .bx-region-panel {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    align-self: auto;
  }

  .bx-region-list {
    flex: none;
    max-height: none;
    overflow-y: visible;
    padding: 8px 10px 12px;
  }

  .bx-region-panel .bx-region-foot {
    margin-top: 0;
  }
}

/* 矮屏幕（笔记本横向窄屏/小窗）：按视口再收一点，避免侧栏顶出屏幕 */
@media screen and (min-width: 916px) and (max-height: 800px) {
  .bx-region-panel {
    max-height: calc(100vh - 110px);
    top: 8px;
  }
}

/* ============================================================
   商品列表加载状态（2026-10-26）
   ============================================================ */

/* 加载失败提示：文案 + 重试按钮同行 */
.fx-main-card .tips-error,
.template .tips-error {
  color: #b42318;
}

.fx-main-card .tips-retry,
.template .tips-retry {
  display: inline;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: #2f5fd0;
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.fx-main-card .tips-retry:hover,
.template .tips-retry:hover {
  color: #1f3b8a;
}

/* v-loading 遮罩：列表已有内容时不要整块盖住，
   只在顶部显示一条细进度条，减少"页面卡死"的观感。
   （首次加载 goodsList 为空时仍用完整遮罩） */
.shopping-box .el-loading-mask {
  background-color: rgba(255, 255, 255, .72);
  transition: opacity .2s ease;
}

/* 有商品时：遮罩半透明 + 不拦截点击，避免"点了没反应"的错觉 */
.shopping-box.has-goods .el-loading-mask {
  background-color: transparent;
  pointer-events: none;
}

.shopping-box.has-goods .el-loading-spinner {
  top: auto;
  bottom: 12px;
  margin-top: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(22, 40, 61, .82);
  color: #fff;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px -6px rgba(20, 40, 70, .5);
}

.shopping-box.has-goods .el-loading-spinner .circular {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
}

.shopping-box.has-goods .el-loading-spinner .el-loading-text {
  color: #fff;
  font-size: 12.5px;
  display: inline;
}

/* ============================================================
   公告弹窗 · 手机端整体适配（2026-10-26）
   ------------------------------------------------------------
   问题：
     1. 底部两个按钮溢出屏幕（已在上方媒体查询修复）
     2. 弹窗贴满全屏时，圆角和内边距在窄屏显得拥挤
     3. 正文行高/字号在手机上偏小，长文阅读疲劳
     4. iOS 安全区（底部横条）会压住按钮
   ============================================================ */

@media screen and (max-width: 750px) {
  .fx-agree-modal__dialog {
    /* 手机上几乎全屏，留一点边缘让用户感知是浮层 */
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    /* 用 dvh 兼容移动端浏览器地址栏收起/展开导致的高度跳变；
       不支持的浏览器自动回落到上面的 vh */
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }

  .fx-agree-modal__head {
    padding: 13px 15px !important;
  }

  .fx-agree-modal__title {
    font-size: 14.5px !important;
  }

  /* 正文：字号提一档 + 行高放宽，手机阅读更舒适 */
  .fx-agree-modal__body {
    padding: 12px 15px !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    overscroll-behavior: contain;        /* 滚到底不带动页面 */
  }

  .fx-agree-modal__body p {
    margin: 0 0 9px !important;
  }

  /* 底部区：给 iOS 安全区留白，避免按钮压在系统横条下面 */
  .fx-agree-modal__foot {
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .fx-agree-modal__hint {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* 顶部与底部区固定不压缩，只有正文滚动 */
  .fx-agree-modal__head,
  .fx-agree-modal__foot {
    flex-shrink: 0 !important;
  }
}

/* 超窄屏（≤360）：再把字号和内边距收一档 */
@media screen and (max-width: 360px) {
  .fx-agree-modal__dialog {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .fx-agree-modal__head {
    padding: 11px 12px !important;
  }

  .fx-agree-modal__body {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .fx-agree-modal__foot {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}