/* =====================================================
   烟火云 · 首页样式（稳态 + 不缩小Tabs字）
   - Banner 下四格：玻璃容器 + 轻 hover
   - 四格 ICON：禁用雪碧动画（防消失）
   - 分类 Tabs：玻璃激活态 + 轻 hover
   - ✅ 省去分类Tab左侧图标，但不影响文字字号
   ===================================================== */

li{ list-style:none; }

:root{
  --yh-radius: 10px;
  --yh-radius-lg: 18px;
  --yh-ease: cubic-bezier(.2,.8,.2,1);
  --yh-mid: 240ms;
  --yh-shadow-soft: 0 10px 16px rgba(192,199,209,.55);
  --yh-shadow-hover: 0 14px 28px rgba(160,175,200,.35);
  --yh-shadow-inner: 0 0 16px 10px #fff;
  --yh-glass-bg:
    linear-gradient(177.5deg, rgba(230,238,255,.60), rgba(232,240,255,.60)),
    linear-gradient(270deg, rgba(255,225,225,.48), rgba(248,222,237,.60) 28.88%, rgba(231,225,251,.60) 60.65%, rgba(192,216,255,.54)),
    linear-gradient(90deg, #f9faff, #f7f9ff);
}

/* ========== 1) Banner 下四格玻璃容器 ========== */
.bannerbelow-layoutcontainer.b .bannerbelow-row,
.bannerbelow-row{
  box-shadow: 0px 10px 16px 0px rgba(192,199,209,.60), 0px 0px 16px 10px #fff !important;
  background: var(--yh-glass-bg) !important;
  border-radius: 10px !important;
}

.bannerbelow-layoutcontainer.b .bannerbelow-row .bannerbelow-list{
  border-radius: var(--yh-radius) !important;
  transition: transform var(--yh-mid) var(--yh-ease),
              box-shadow var(--yh-mid) var(--yh-ease),
              filter var(--yh-mid) var(--yh-ease);
}
.bannerbelow-layoutcontainer.b .bannerbelow-row .bannerbelow-list:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: var(--yh-shadow-hover);
}

/* ✅ 四格 icon 永不消失：禁用雪碧动画 */
.bannerbelow-layoutcontainer .bannerbelow-item-icon,
.bannerbelow-layoutcontainer.b .bannerbelow-row .bannerbelow-list:hover .bannerbelow-item-icon{
  animation: none !important;
  background-position: center 0 !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
.bannerbelow-layoutcontainer .bannerbelow-icon-container .bannerbelow-item-icon{
  width: 48px;
  height: 48px;
  display: block;
  transition: transform var(--yh-mid) var(--yh-ease);
  transform-origin: center;
}
.bannerbelow-layoutcontainer.b .bannerbelow-row .bannerbelow-list:hover .bannerbelow-item-icon{
  transform: scale(1.06);
}

/* ========== 2) 分类 Tabs（红框那一排） ========== */

/* 容器（你原本 noIcon 也兼容） */
.systemproduct-categories.noIcon,
.systemproduct-layoutcontainer .systemproduct-categories{
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  padding: 10px 18px;
  border-radius: 18px 18px 0px 0px;
  background-color: #f5f6f8;
}

/* ✅ 关键：明确写回字号，禁止被其它规则缩小 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category{
  /* 布局 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  height: 48px;
  line-height: 48px;

  /* ✅ 字体：这里保证不会变小 */
  font-size: 14px !important;      /* 你不想小，就固定 14（想更大可改 15） */
  font-weight: 600 !important;
  color: #222;

  /* 外观 */
  padding: 0 20px;
  border-radius: 10px;
  transition: transform var(--yh-mid) var(--yh-ease),
              box-shadow var(--yh-mid) var(--yh-ease),
              background-color var(--yh-mid) var(--yh-ease);
}

/* active：玻璃态 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category.active{
  box-shadow: 0px 5px 10px 0px rgba(192,199,209,.60);
  background: var(--yh-glass-bg);
}

/* 去掉模板 active 下划线 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category.active::after,
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category::after{
  width: 0% !important;
  border-bottom: 0 !important;
}

/* hover：轻微抬起 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category:hover{
  background-color: rgba(255,255,255,.90);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(180,190,210,.35);
}

/* ✅ 省去“电脑图标”：只隐藏图标，不动文字 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category-img{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* （可选）如果你的标题文字在 .systemproduct-category-name 上，也写回字号 */
.systemproduct-layoutcontainer .systemproduct-categories .systemproduct-category .systemproduct-category-name{
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ========== 3) 右侧产品卡 hover（稳态） ========== */
.systemproduct-layoutcontainer
.systemproducts-subclass
.systemproduct-container
.systemproduct-right-container
.systemproduct-item{
  border-radius: 10px;
  transition: transform var(--yh-mid) var(--yh-ease),
              box-shadow var(--yh-mid) var(--yh-ease);
}
.systemproduct-layoutcontainer
.systemproducts-subclass
.systemproduct-container
.systemproduct-right-container
.systemproduct-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--yh-shadow-hover);
}

/* ========== 4) 顶部菜单 hover 变白（柔和） ========== */
.horizontal-menu-navbar:hover .headerBg.translucent{
  background-color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

/* ========== 5) 购物车页参数区（你参考里这段保留） ========== */
.product-card .product-Parameters{
  display: block;
  padding: 4px 20px 15px;
}
.product-card .product-Parameters .pricing-info{
  text-align: left;
  padding: 2px 0 0 !important;
}

/* ========== 6) 移动端优化 ========== */
@media (max-width: 768px){
  .systemproduct-layoutcontainer .systemproduct-categories{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .viewMore,.viewmore,.view-more{ display:none !important; }
}