/* ============================================
   中聚企服 — 前台商城主题
   ============================================ */

:root {
  --brand: #4F6EF7;
  --brand-light: #6B85F9;
  --brand-dark: #3B57D9;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --text: #1A1A2E;
  --text-sub: #6B7280;
  --text-light: #9CA3AF;
  --border: #E5E7EB;
  --radius: 16px;
  --radius-sm: 12px;
}

* {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body, page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* === 顶部搜索栏 === */
.search-box,
.header-search,
.index-search {
  background: var(--brand) !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

.search-input,
.search-box input {
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #fff !important;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.7) !important;
}

/* === 轮播图 === */
.banner-swiper,
.swiper-container {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin: 12px !important;
}

/* === 导航菜单 === */
.nav-menu,
.menu-list,
.category-nav {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  margin: 12px !important;
  padding: 16px 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.menu-item,
.nav-item {
  text-align: center !important;
}

.menu-item image,
.nav-item image {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
}

.menu-item text,
.nav-item text {
  font-size: 13px !important;
  color: var(--text) !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
}

/* === 商品卡片 === */
.goods-item,
.product-card,
.goodList-item {
  background: var(--card) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  margin: 8px !important;
}

.goods-item image,
.product-card image {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.goods-title,
.goods-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  padding: 8px 12px 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.goods-price,
.price {
  color: var(--danger) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 4px 12px 12px !important;
}

.goods-price .yen,
.price .yen {
  font-size: 13px !important;
}

.goods-sales,
.sales {
  font-size: 12px !important;
  color: var(--text-light) !important;
}

/* === 标签 === */
.tag-hot,
.tag-new {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}

.tag-free {
  background: var(--success) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}

/* === 按钮 === */
.btn-buy,
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(79,110,247,0.3) !important;
}

.btn-cart {
  background: var(--card) !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: 20px !important;
}

/* === 分类页 === */
.category-sidebar {
  background: var(--card) !important;
}

.category-item.active {
  background: var(--bg) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--brand) !important;
}

/* === 商品详情页 === */
.product-detail {
  background: var(--bg) !important;
}

.product-info-card {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  margin: 12px !important;
  padding: 16px !important;
}

.product-detail .price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--danger) !important;
}

.service-tag {
  display: inline-block !important;
  background: #EFF6FF !important;
  color: var(--brand) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  margin-right: 6px !important;
}

/* === 优惠券 === */
.coupon-card {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
}

.coupon-amount {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* === 个人中心 === */
.user-header {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

.user-menu-item {
  background: var(--card) !important;
  border-radius: var(--radius-sm) !important;
  margin: 8px 12px !important;
}

/* === 底部导航 === */
.tabbar,
.bottom-nav {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
}

.tabbar-item.active,
.bottom-nav .active {
  color: var(--brand) !important;
}

/* === 文章/资讯 === */
.article-item {
  background: var(--card) !important;
  border-radius: var(--radius-sm) !important;
  margin: 8px 12px !important;
  padding: 12px !important;
}

.article-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.article-desc {
  font-size: 13px !important;
  color: var(--text-sub) !important;
  margin-top: 4px !important;
}

/* === 加载状态 === */
.loading-box {
  background: var(--bg) !important;
}

/* === 空状态 === */
.empty-box {
  color: var(--text-light) !important;
}

/* === 全局卡片间距 === */
.section {
  margin-bottom: 12px !important;
}

.section-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 16px 16px 8px !important;
}

.section-more {
  color: var(--text-light) !important;
  font-size: 13px !important;
}