/* ============================================================
   ▼ 设计令牌覆盖层（v2 · 步骤⑦-B） 2026-10-06
   原 theme-light.css:7-46 的 :root 是"象牙白 + 墨黑 + 香槟金"，
   本层把品牌色改为蓝紫 #2f6bff → #7c4dff、底色改为冷白。
   ★ 全站换色只需改本层；删掉本层即还原原来的香槟金。
   ============================================================ */
:root {
  /* 品牌主色：香槟金 → 蓝紫 */
  --accent:       #5b5bf0;
  --accent-2:     #7c4dff;
  --accent-soft:  rgba(91,91,240,.10);
  --gold-grad:    linear-gradient(135deg,#2f6bff 0%,#7c4dff 100%);
  --shadow-glow:  0 8px 24px rgba(47,107,255,.22);

  /* 背景：暖象牙 #f7f6f3 → 冷白 */
  --bg:           #f7f8fc;
  --surface-2:    #f4f6fc;
  --surface-3:    #e9edf9;

  /* 描边：暖灰 → 冷灰 */
  --border:       rgba(23,32,63,.10);
  --border-strong:rgba(23,32,63,.18);
}
body {
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(47,107,255,.10), transparent 60%),
    radial-gradient(880px 460px at 92% 0%,  rgba(124,77,255,.07), transparent 58%),
    var(--bg) !important;
  background-attachment: fixed;
}

/* ---------- 硬编码暖色修正（这些不吃变量）---------- */
::-webkit-scrollbar-thumb:hover { background: #c2c9d6; }
::selection { background: rgba(47,107,255,.26) !important; color: var(--ink); }
.brand-mark svg path { fill: #c2d0ff !important; }          /* Logo 金色小字 → 浅蓝紫 */
.notice {
  background: linear-gradient(120deg, rgba(47,107,255,.10), rgba(124,77,255,.04)) !important;
  border-left: 3px solid var(--accent-2);
}

/* ============================================================
   三洋501商城 · 风格B（浅色精致）全站样式升级层
   只做"覆盖增强"，不删除任何原有样式；可整文件删除以还原
   ============================================================ */

/* ---------- 基础：字体与过渡 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  background: #f7f8fc;
}
a { transition: color .18s ease, opacity .18s ease; }

/* ---------- 公告条 ---------- */
.notice {
  background: linear-gradient(100deg, rgba(47,107,255,.07), rgba(124,77,255,.07)) !important;
  border-bottom: 1px solid #eceef4;
}
.notice .row, .notice .container { color: #4b5563; }
.notice h4 {
  font-size: 13px !important;
  font-weight: 700;
  color: #2f6bff !important;
  letter-spacing: .5px;
}

/* ---------- 卡片：圆角 + 柔和阴影 + 悬浮上浮 ---------- */
.card {
  border: 1px solid #eceef4 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(23,32,63,.07) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(23,32,63,.15) !important;
}
.card-body { padding: 14px 15px 15px !important; }
.card-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1b1f27;
  line-height: 1.45;
  min-height: 38px;
}

/* ---------- 商品图：统一比例 + 轻微放大 ---------- */
.card-img-top {
  height: 148px !important;
  object-fit: cover;
  background: linear-gradient(135deg, #eef2ff, #f6f0ff);
  transition: transform .35s ease;
}
.card:hover .card-img-top { transform: scale(1.04); }

/* ---------- 角标（库存/热销）---------- */
.badge.bg-success, .badge.bg-danger, .badge.bg-primary {
  background: linear-gradient(135deg, #2f6bff, #7c4dff) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(47,107,255,.28);
}
.badge.bg-secondary { border-radius: 999px; }

/* ---------- 按钮：渐变 + 圆角 + 阴影 ---------- */
.btn {
  border-radius: 11px !important;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-primary {
  background: linear-gradient(135deg, #2f6bff, #7c4dff) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(47,107,255,.28) !important;
}
.btn-outline-success {
  border: 1px solid #dfe3e8 !important;
  color: #4b5563 !important;
  background: #fff !important;
  border-radius: 10px !important;
}
.btn-outline-success:hover {
  border-color: #2f6bff !important;
  color: #2f6bff !important;
  background: rgba(47,107,255,.05) !important;
}
.btn-outline-secondary { border-radius: 10px !important; }

/* ---------- 价格 ---------- */
.card .text-danger, .card b, .price {
  font-weight: 800;
}
.text-danger { color: #e5484d !important; }

/* ---------- Tab 分组：胶囊样式 ---------- */
.nav-tabs {
  border-bottom: 0 !important;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-tabs .nav-link {
  border: 1px solid #e8eaf1 !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 13.5px;
  color: #6b7280 !important;
  background: #fff;
  margin: 0 !important;
}
.nav-tabs .nav-link:hover { color: #2f6bff !important; border-color: #cfd8ff !important; }
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #2f6bff, #7c4dff) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(47,107,255,.28);
}
.nav-item { margin: 0 !important; }

/* ---------- 标题层级 ---------- */
h1, h2, h3, h4 { color: #1b1f27; letter-spacing: .2px; font-weight: 700; }
.container { max-width: 1180px; }

/* ---------- 商品详情页（买页）增强 ---------- */
.buy .card, .buy-box, .goods-info {
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(23,32,63,.09) !important;
}
.buy img, .goods-img img, .card-img-top { border-radius: 0; }
.form-control, .input-group-text {
  border-radius: 10px !important;
  border-color: #e8eaf1 !important;
}
.form-control:focus {
  border-color: #2f6bff !important;
  box-shadow: 0 0 0 3px rgba(47,107,255,.12) !important;
}

/* ---------- 入场动画（轻微，不影响可用性）---------- */
@keyframes v2fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .v2-cat, .v2-p { animation: v2fade .45s ease both; }

/* ---------- 响应式细节 ---------- */
@media (max-width: 768px) {
  .card-img-top { height: 118px !important; }
  .card-title { font-size: 12.5px !important; min-height: 34px; }
  .card-body { padding: 11px 12px 12px !important; }
  .card:hover { transform: none; }
  .container { padding-left: 12px; padding-right: 12px; }
  .nav-tabs .nav-link { padding: 6px 13px !important; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .v2-cat, .v2-p { animation: none; }
  .card:hover { transform: none; }
}

/* ===== 详情页适配层 =====
   /buy 与 cashier 走 .good-card 结构，通用卡片规则（148px 图高、13.5px 标题、
   hover 上浮）会砸坏详情页，这里按 .good-card 作用域还原。
   删掉本节即还原为仅通用规则。 */
.good-card .card:hover { transform: none; }
.good-card .card-body { padding: 20px 22px !important; }
.good-card .card-title {
  font-size: 23px !important;
  font-weight: 800 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}
.good-card .card-img-top {
  height: auto !important;
  max-height: 330px !important;
  object-fit: contain !important;
  background: transparent !important;
  transform: none !important;
}
.good-card .card:hover .card-img-top { transform: none; }
.good-card .card-header {
  background: linear-gradient(135deg, rgba(47,107,255,.06), rgba(124,77,255,.06)) !important;
  border-bottom: 1px solid #eceef4 !important;
}
@media (max-width: 768px) {
  .good-card .card-title { font-size: 19px !important; }
  .good-card .card-body { padding: 15px 16px !important; }
  .good-card .card-img-top { max-height: 240px !important; }
}

/* ---------- 硬编码暖色修正（第 2 段 · 步骤⑦-C）----------
   以下原主题里的金色/暖棕是"写死"的，不吃 :root 变量，
   必须在组件层按更高优先级覆盖。删掉本节即还原金色。 */

/* /order-search「立即查询」等：原 border rgba(154,123,79,.55) + color #7d6238 */
.btn-outline-primary {
  border: 1px solid rgba(47,107,255,.55) !important;
  color: #2f4fd0 !important;
  background: var(--accent-soft) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: linear-gradient(135deg,#2f6bff,#7c4dff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(47,107,255,.28) !important;
}

/* 首页「今天需要一点什么?」标题渐变：原 #16181d → #6c5a36（暖棕） */
.category h3 {
  background: linear-gradient(120deg,#16181d 0%,#4c3fd6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 公告卡：原 linear-gradient(120deg, 金.13, 金.04) + 左侧金条 */
.notice .card {
  background: linear-gradient(120deg, rgba(47,107,255,.11), rgba(124,77,255,.04)) !important;
  border-left: 3px solid var(--accent-2) !important;
}

/* /buy 支付方式选中态：原 rgba(154,123,79,.65) / .22 */
.pay-method .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(47,107,255,.22) !important;
}
.pay-method:has(.form-check-input:checked) {
  border-color: rgba(61,90,254,.65) !important;
  background: var(--accent-soft) !important;
}
.pay-method:hover { border-color: var(--accent) !important; }

/* 商品卡 hover 描边：原 rgba(154,123,79,.45) */
.goods-list .card:hover { border-color: rgba(47,107,255,.45) !important; }

/* Logo 方块内描边：原 rgba(226,203,150,.38) 金色 → 浅蓝紫 */
.brand-mark::after { box-shadow: inset 0 0 0 1px rgba(194,208,255,.45) !important; }

/* ---------- 商品封面美化（第 3 段 · 步骤⑦-D）----------
   ① .v2-p 图片区（首页热门推荐，内联了蓝紫渐变底）：
      加深蓝紫渐变 + 淡网格纹理，图片带白底圆角浮在上面
   ② .goods-list / .category 卡片图片底：原有暖金残留 → 干净白
   ③ 防止新增背景压到 /buy 详情页大图
   删掉本节即还原。 */

/* ① 首页热门推荐封面 */
.v2-p > a > div:first-child {
  background:
    radial-gradient(120% 105% at 50% 0%, #f5f8ff, #f7f3ff) !important;
  padding: 13px 15px !important;
  height: 152px !important;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden;
}
.v2-p > a > div:first-child::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(47,107,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,107,255,.05) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
}
.v2-p > a > div:first-child > img {
  position: relative; z-index: 1;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* ② 商品列表 / 分类页封面：干净白底（原为暖金 radial 残留） */
.goods-list .card-img-top {
  background: #fff !important;
  padding: 10px !important;
}
.v2-cat .thumb, .category .card-img-top { background: #fff !important; }

/* ③ 保护 /buy 详情页大图，不被上面的白底规则影响 */
.good-card .card-img-top { background: transparent !important; }

/* ---------- 按钮尺寸 + 封面白边修正（第 4 段 · 步骤⑦-I）----------
   实测依据（390px 视口）：卡片内宽 169px；价格 ¥300.00=67.8px，
   按钮最少需 86px，而 row 只有 141px → 按钮被压成 2 行（32.6px vs 53.3px）。
   同时图片外层 padding 13px 把 img 从 169px 挤到 139px，四周留白。
   删掉本节即还原。 */

/* ① 价格 + 按钮 那一行：允许换行，按钮不许被压缩/折行 */
.v2-p > a > div:last-child > div:last-child {
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
}
.v2-p > a > div:last-child > div:last-child > span:last-child {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  line-height: 1.35 !important;
}

/* ② 封面去掉四周白边，图片占满卡片宽度 */
.v2-p > a > div:first-child {
  padding: 0 !important;
  border-radius: 0 !important;
}
.v2-p > a > div:first-child > img {
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

/* ③ 窄屏：图片区高度降到 150px（消除 4:3 框带来的上下空白），按钮独占一行右对齐 */
@media (max-width: 768px) {
  .v2-p > a > div:first-child { height: 150px !important; }
  .v2-p > a > div:last-child > div:last-child { justify-content: space-between !important; }
}

/* ---------- 图片区改用原始 3:4 比例（第 5 段 · 步骤⑦-L）----------
   商品图统一是 675×900（3:4）竖图，而原来的 152px 高横框用 cover
   会裁掉上下大半。改成 aspect-ratio:3/4 → 完整显示且占满卡片，无留白。
   删掉本节即回到 cover 裁剪。 */
.v2-p > a > div:first-child {
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
}
@media (max-width: 768px) {
  .v2-p > a > div:first-child { height: auto !important; }
}