/* ============================================================
   theme_unify.css — 全站统一视觉层
   目的：在不重写各页面结构的前提下，将 68ecshopcom_360buy 模板的
   旧 360buy 观感（方角、旧蓝、重边框）统一为 moban/HutBazar 现代风格：
   主色 #3366CC、价格红 #dc3545、圆角、轻阴影、统一按钮/标题/表格/表单/分页。
   本文件应在 moban/style.css 之后加载（已通过 <!--moban end--> 后注入），
   因此同特异性下后发优先；关键视觉属性加 !important 以稳妥覆盖旧样式。
   ============================================================ */

:root {
  --tp: #3366CC;          /* 主色，与 moban --green 一致 */
  --tp-dark: #2a55ab;
  --tp-light: #eaf0fb;
  --accent: #dc3545;      /* 价格红 */
  --accent-dark: #c82333;
  --bg: #f5f6fa;
  --text: #333;
  --muted: #888;
  --border: #e8e8e8;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-hover: 0 8px 24px rgba(51, 102, 204, .15);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Heebo", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- 全局基础 ---- */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 14px;
  line-height: 1.6;
}
* { box-sizing: border-box; }

a { color: #555; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--tp); }

img { max-width: 100%; }

/* ---- 按钮：统一主色圆角 ---- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.bnt_blue,
.bnt_blue_1,
.bnt_blue_2,
.bnt_bonus,
.bnt_green,
.cart-btn,
.buy-btn {
  display: inline-block;
  background-color: var(--tp) !important;
  background-image: none !important;
  border: 1px solid var(--tp) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
  text-align: center;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.btn:hover,
.bnt_blue:hover,
.bnt_blue_1:hover,
.bnt_blue_2:hover,
.bnt_bonus:hover,
.cart-btn:hover,
.buy-btn:hover {
  background-color: var(--tp-dark) !important;
  border-color: var(--tp-dark) !important;
  color: #fff !important;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

/* 描边/次要按钮（保留文字主色、白底） */
.bnt_blue_1.ghost,
.btn-outline,
.btn-green-outline,
.usBox .bnt_blue_2 {
  background-color: #fff !important;
  color: var(--tp) !important;
  border: 1px solid var(--tp) !important;
}
.bnt_blue_1.ghost:hover,
.btn-outline:hover,
.btn-green-outline:hover,
.usBox .bnt_blue_2:hover {
  background-color: var(--tp-light) !important;
  color: var(--tp-dark) !important;
}

/* ---- 表单控件：圆角描边 + 聚焦主色光环 ---- */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background-color: #fff !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--tp) !important;
  box-shadow: 0 0 0 3px rgba(51, 102, 204, .15) !important;
}

/* ---- 区块标题 / 面板标题统一 ---- */
.box-title,
.cart-title,
.title,
.box_1 .title,
h1,
h2 {
  color: #222 !important;
  font-weight: 600 !important;
}
/* 内容区 h1 页面标题 */
h1 {
  font-size: 22px !important;
  margin: 0 0 16px !important;
}
/* 盒子/区块标题条：去掉旧背景图，改用底部主色细线 + 左侧强调 */
.box-title,
.cart-title,
.title {
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid var(--tp) !important;
  padding: 10px 0 10px 12px !important;
  margin-bottom: 16px !important;
  font-size: 18px !important;
  position: relative;
}
.box-title::before,
.cart-title::before,
.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: var(--tp);
  border-radius: 2px;
}

/* ---- 面板 / 卡片：白底圆角轻阴影 ---- */
.box,
.cart-box,
.goods-info,
.goods-section,
.usBox,
.usBox_1,
.usBox_2,
.fieldset,
.cart-table,
.flowBox,
.order-area {
  background-color: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* ---- 表格：圆角、斑马纹、统一表头 ---- */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: #fff;
}
th, td {
  border: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  text-align: left;
  vertical-align: middle;
}
thead th,
th {
  background-color: var(--bg) !important;
  color: #444 !important;
  font-weight: 600 !important;
}
tbody tr:nth-child(even) {
  background-color: #fafbfc !important;
}
tbody tr:hover {
  background-color: var(--tp-light) !important;
}

/* ---- 价格统一 ---- */
.shop_price,
.goods-price,
.product-price b,
.price {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.market_price,
.del,
.product-price del {
  color: var(--muted) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* ---- 面包屑 ---- */
.breadcrumb,
.ur_here,
.crumbs-nav,
.crumb {
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 10px 0 !important;
  margin-bottom: 16px !important;
}
.breadcrumb a,
.ur_here a {
  color: #666 !important;
}
.breadcrumb a:hover,
.ur_here a:hover {
  color: var(--tp) !important;
}

/* ---- 分页：圆角胶囊，当前页主色填充 ---- */
.pagebar,
.pager,
.pages,
.page {
  margin: 20px 0 !important;
  text-align: center;
  line-height: 2;
}
.pagebar a,
.pager a,
.pages a,
.page a,
.pagination a {
  display: inline-block;
  min-width: 32px;
  padding: 6px 12px !important;
  margin: 0 3px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: #555 !important;
  background: #fff !important;
  transition: all .2s ease;
}
.pagebar a:hover,
.pager a:hover,
.pages a:hover,
.page a:hover {
  border-color: var(--tp) !important;
  color: var(--tp) !important;
}
.pagebar span.page-now,
.pagebar .page-now,
.pager span,
.page span.cur,
.pagination .active a {
  display: inline-block;
  min-width: 32px;
  padding: 6px 12px !important;
  margin: 0 3px;
  border: 1px solid var(--tp) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--tp) !important;
  color: #fff !important;
  font-weight: 600;
}

/* ---- 分类树 / 导航当前态 ---- */
.cat_list li a.cur,
.tree li.on > a,
.category_tree li.cur a,
.menu .on a,
.left_menu .cur a {
  color: var(--tp) !important;
  font-weight: 600 !important;
}

/* ---- 选中/高亮/标签 ---- */
mark,
.highlight {
  background: var(--tp-light) !important;
  color: var(--tp-dark) !important;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ---- 通用卡片悬浮抬升（用于明确为卡片的容器） ---- */
.goodsItem:hover,
.product-single:hover,
.box:hover {
  box-shadow: var(--shadow-hover);
  transition: box-shadow .25s ease;
}