/* ============================================================
   JIEAPI 商店 · 品牌定制样式
   加载顺序：在 theme.min.css 之后，用于覆盖与增强
   ============================================================ */

/* ---- 品牌色 ---- */
:root {
  --jie-primary: #6366f1;
  --jie-primary-2: #8b5cf6;
  --jie-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* ---- 商品卡片：悬浮抬升 + 阴影 + 圆角 ---- */
.product-card {
  border-radius: 1.1rem !important;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 1.2rem 2.4rem rgba(99, 102, 241, 0.20) !important;
}
.product-card > a,
.product-card .d-flex.bg-body-tertiary {
  border-radius: 1.1rem 1.1rem 0 0 !important;
}
.product-card img {
  transition: transform 0.4s ease;
}
.product-card:hover img {
  transform: scale(1.05);
}

/* ---- 价格：品牌紫渐变文字 ---- */
.product-card .h6 {
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--jie-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-card .h6 del {
  -webkit-text-fill-color: currentColor;
}

/* ---- 库存进度条：渐变 ---- */
.progress-bar.bg-dark {
  background: var(--jie-gradient) !important;
}

/* ---- 分类 tab：激活态渐变胶囊 ---- */
.nav-pills .btn-outline-secondary {
  border-radius: 9999px;
  transition: all 0.25s ease;
}
.nav-pills .btn-outline-secondary.active {
  background: var(--jie-gradient);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 0.5rem 1.2rem rgba(99, 102, 241, 0.38);
}
.nav-pills .btn-outline-secondary:not(.active):hover {
  border-color: var(--jie-primary);
  color: var(--jie-primary);
}

/* ---- Hero 标题更醒目 ---- */
.display-4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* ---- 深色按钮 → 品牌渐变胶囊 ---- */
.btn-dark {
  background: var(--jie-gradient);
  border: none;
  border-radius: 9999px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-dark:hover,
.btn-dark:focus {
  background: var(--jie-gradient);
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 0.6rem 1.4rem rgba(99, 102, 241, 0.35);
}

/* ---- 搜索框：圆角胶囊 ---- */
.quicksearch {
  border-radius: 9999px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.quicksearch:focus {
  border-color: var(--jie-primary);
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.18);
}

/* ---- 角标：圆角胶囊 ---- */
.badge {
  border-radius: 9999px;
  padding: 0.45em 0.85em;
  font-weight: 600;
}

/* ---- 顶栏公告条：淡紫渐变底 ---- */
.alert.rounded-0 {
  background: linear-gradient(90deg, #eef2ff 0%, #faf5ff 100%);
}
[data-bs-theme="dark"] .alert.rounded-0,
.d-block-dark .alert.rounded-0 {
  background: linear-gradient(90deg, #1e1b4b 0%, #2e1065 100%);
}

/* ---- 导航吸顶药丸：柔和阴影 ---- */
.navbar-sticky .navbar.rounded-pill {
  box-shadow: 0 0.6rem 1.6rem rgba(15, 23, 42, 0.10) !important;
}

/* ---- 页脚链接 hover ---- */
.footer .nav-link:hover,
.footer a:hover {
  color: var(--jie-primary) !important;
}

/* ---- 轮播滚动条：品牌色 ---- */
.swiper-scrollbar .swiper-scrollbar-drag {
  background: var(--jie-gradient);
}

/* ---- 购买页/表单主按钮统一品牌 ---- */
.btn-primary {
  background: var(--jie-gradient);
  border: none;
  border-radius: 0.7rem;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--jie-gradient);
  filter: brightness(1.08);
}

/* ---- 滚动到顶按钮 ---- */
.btn-scroll-top {
  transition: transform 0.25s ease;
}
.btn-scroll-top:hover {
  transform: translateY(-4px);
}