/*!
 * 混排主题样式层（Bootstrap 5 之上的自定义，不 fork 框架）
 * ------------------------------------------------------------
 * 结构：变量 → 壳层（顶栏 / 导航 / 页头 / 页脚）→ 卡片与列表 → 商城专用 → 会员专用 → 工具类。
 * 只使用 Bootstrap 已有工具类做布局（container / row / col / card / list-group / pagination），
 * 本文件负责配色、密度与少量框架没有的形态（多行截断、价格字号、步骤条、结算吸顶）。
 * 移动端断点跟随 Bootstrap（lg = 992px）：导航折叠、表格横向滚动、汇总卡改为普通流。
 */

:root {
  --mx-primary: #1a6b52;
  --mx-primary-soft: #e8f2ee;
  --mx-ink: #172029;
  --mx-muted: #6b7480;
  --mx-line: #e6e8eb;
  --mx-bg: #f6f7f9;
  --mx-radius: 12px;
  --mx-gap: 1rem;
}

/* ---------------- 壳层 ---------------- */
body.mx-body {
  background: var(--mx-bg);
  color: var(--mx-ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

a { color: var(--mx-primary); }

.mx-topbar {
  background: var(--mx-ink);
  color: #fff;
}

.mx-topbar a {
  color: #dfe6e3;
  text-decoration: none;
}

.mx-topbar a:hover { color: #fff; text-decoration: underline; }

.mx-lang .btn-link { color: #dfe6e3; }
.mx-lang .btn-link:hover,
.mx-lang .btn-link:focus-visible { color: #fff; }

nav.mx-nav {
  background: #fff;
  border-bottom: 1px solid var(--mx-line);
  box-shadow: 0 1px 2px rgb(23 32 41 / 4%);
}

.mx-brand { gap: .5rem; }

.mx-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--mx-primary);
  color: #fff;
  font-size: 14px;
}

.mx-brand-text { font-weight: 700; letter-spacing: .2px; }

.mx-search .form-control { min-width: 180px; }

.mx-nav .nav-link {
  color: var(--mx-ink);
  font-weight: 500;
}

.mx-nav .nav-link:hover,
.mx-nav .nav-link.active { color: var(--mx-primary); }

.mx-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
}

main.mx-main { padding-block: 1.25rem 2.5rem; }

/* ---------------- 页头与面包屑 ---------------- */
.mx-pagehead {
  background: linear-gradient(180deg, #fff 0%, var(--mx-primary-soft) 140%);
  border-bottom: 1px solid var(--mx-line);
}

.mx-pagehead-title {
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
}

.mx-pagehead-lead { color: var(--mx-muted); }

.mx-crumb .breadcrumb { font-size: .8125rem; margin: 0; }
.mx-crumb .breadcrumb-item + .breadcrumb-item::before { color: var(--mx-muted); }

/* ---------------- 卡片与列表 ---------------- */
.card {
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius);
  box-shadow: none;
}

.card-header {
  background: #fff;
  border-bottom-color: var(--mx-line);
  font-weight: 600;
}

.mx-lead {
  padding: .75rem 1rem;
  border-left: 3px solid var(--mx-primary);
  background: #fff;
  border-radius: 6px;
  color: var(--mx-muted);
}

.mx-meta i { margin-right: .3rem; }

.mx-entry-body { line-height: 1.85; }
.mx-entry-body img { max-width: 100%; height: auto; border-radius: 8px; }
.mx-entry-body table { width: 100%; border-collapse: collapse; }
.mx-entry-body th,
.mx-entry-body td { border: 1px solid var(--mx-line); padding: .4rem .6rem; }
.mx-entry-body pre { background: #f2f4f3; padding: .75rem; border-radius: 8px; overflow-x: auto; }

.mx-adjacent a { max-width: 46%; }

.mx-hot { counter-reset: mxhot; }
.mx-hot li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding-block: .3rem;
  border-bottom: 1px dashed var(--mx-line);
}
.mx-hot li:last-child { border-bottom: 0; }
.mx-hot-no {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
  background: #b6bcc4;
}
.mx-hot-no-t1 { background: #d1495b; }
.mx-hot-no-t2 { background: #e07a5f; }
.mx-hot-no-t3 { background: #3d8f72; }

.mx-tag { font-weight: 500; color: var(--mx-muted); }
.mx-tag:hover { color: var(--mx-primary); border-color: var(--mx-primary) !important; }

.mx-links li { padding-block: .15rem; }

.mx-subcat:hover { border-color: var(--mx-primary); }

/* ---------------- 商品与资讯卡片 ---------------- */
.mx-product-media,
.mx-post-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef0f2;
  border-radius: var(--mx-radius) var(--mx-radius) 0 0;
}

.mx-product-media img,
.mx-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.mx-product-card:hover img,
.mx-post-card:hover img { transform: scale(1.04); }

.mx-product-placeholder,
.mx-post-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #9aa2ab;
  font-size: 26px;
}

.mx-price { color: #c93b3b; }
.mx-price-cur { font-size: .8em; margin-right: 1px; }
.mx-price-num { font-size: 1.15rem; font-weight: 700; }
.mx-price-from { font-size: .72rem; margin-left: 2px; font-weight: 500; }
.mx-market-price { margin-left: .4rem; font-size: .8rem; color: var(--mx-muted); }

/* ---------------- 商城：详情 ---------------- */
.mx-gallery-main img { object-fit: cover; }

.mx-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
}
.mx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mx-thumb.active { border-color: var(--mx-primary); }

.mx-pricebox {
  background: var(--mx-primary-soft);
  border-radius: var(--mx-radius);
}
.mx-pricebox .mx-price-num { font-size: 1.6rem; }

.mx-specs [data-value] { min-width: 3rem; }
.mx-specs [data-value].active {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
  color: #fff;
}

/* 规格未选齐：按钮保持可点（后端会二次校验），只做视觉提醒 */
.btn.mx-pending { opacity: .55; }

.mx-params th { width: 25%; font-weight: 400; color: var(--mx-muted); }

.mx-stars { color: #f0a500; letter-spacing: 1px; }

/* ---------------- 商城：购物车 / 结算 / 订单 ---------------- */
.w-1 { width: 1%; white-space: nowrap; }

.mx-cart-table td,
.mx-cart-table th { vertical-align: middle; }

.mx-summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .2rem;
}

.mx-pay-amount { color: #c93b3b; font-size: 1.2rem; }

.mx-steps .mx-step {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--mx-line);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  color: var(--mx-muted);
}
.mx-steps .mx-step span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d8dde2;
  color: #fff;
  font-size: 11px;
}
.mx-steps .mx-step.is-current {
  border-color: var(--mx-primary);
  color: var(--mx-primary);
  font-weight: 600;
}
.mx-steps .mx-step.is-current span { background: var(--mx-primary); }

.mx-ck-lines li:last-child { border-bottom: 0 !important; }

.mx-addr-option { cursor: pointer; }
.mx-addr-option:hover { border-color: var(--mx-primary) !important; }

/* 结算汇总：桌面端跟随视口吸顶，移动端退回普通流（避免遮挡表单） */
@media (min-width: 992px) {
  .mx-checkout-sticky { position: sticky; top: 1rem; }
}

/* 购物车与结算页在窄屏下不允许横向溢出：表格自带滚动容器，卡片留白收紧 */
@media (max-width: 575.98px) {
  .mx-cart-table { font-size: .8125rem; }
  .mx-shop-total { font-size: .875rem; }
}

.mx-order-items li:last-child { border-bottom: 0 !important; }
.mx-review-form { background: var(--mx-bg); border-radius: 8px; padding: .5rem; }
.mx-timeline li { border-bottom: 1px dashed var(--mx-line); }
.mx-timeline li:last-child { border-bottom: 0; }

.mx-coupon { border-color: var(--mx-primary); }
.mx-coupon-face { color: var(--mx-primary); font-size: 1.25rem; font-weight: 700; }

/* ---------------- 会员 ---------------- */
.mx-member-nav .list-group-item.active {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
}
.mx-catnav .list-group-item.active {
  background: var(--mx-primary-soft);
  border-color: var(--mx-primary-soft);
  color: var(--mx-primary);
  font-weight: 600;
}

.mx-auth { max-width: 560px; margin-inline: auto; }
.mx-quick { text-align: center; color: var(--mx-ink); }
.mx-quick:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.mx-quick i { font-size: 20px; color: var(--mx-primary); }

/* ---------------- 页脚 ---------------- */
.mx-footer {
  background: var(--mx-ink);
  color: #cbd3d9;
}
.mx-footer-title { font-weight: 600; color: #fff; }
.mx-footer a { color: #cbd3d9; text-decoration: none; }
.mx-footer a:hover { color: #fff; text-decoration: underline; }
.mx-footer .mx-contact i { margin-right: .4rem; }
.mx-footer-bar { background: #10171d; color: #8f9aa4; }

/* ---------------- 工具 ---------------- */
.text-truncate-2,
.text-truncate-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-2 { -webkit-line-clamp: 2; }
.text-truncate-3 { -webkit-line-clamp: 3; }

.min-w-0 { min-width: 0; }

.mx-required { color: #c93b3b; margin-left: 2px; }

.mx-empty { color: var(--mx-muted); }
.mx-empty-icon { font-size: 30px; color: #c3c9cf; margin-bottom: .5rem; }

.mx-backtop {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 1030;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ---------------- Bootstrap 组件的品牌色回写（只改配色，不改尺寸与结构） --------- */
.btn-primary {
  --bs-btn-bg: var(--mx-primary);
  --bs-btn-border-color: var(--mx-primary);
  --bs-btn-hover-border-color: #155944;
  --bs-btn-hover-bg: #155944;
  --bs-btn-active-bg: #124c3b;
  --bs-btn-disabled-bg: var(--mx-primary);
  --bs-btn-disabled-border-color: var(--mx-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--mx-primary);
  --bs-btn-border-color: var(--mx-primary);
  --bs-btn-hover-bg: var(--mx-primary);
  --bs-btn-hover-border-color: var(--mx-primary);
  --bs-btn-active-bg: var(--mx-primary);
  --bs-btn-active-border-color: var(--mx-primary);
}

.btn-link { --bs-btn-color: var(--mx-primary); --bs-btn-hover-color: #124c3b; }
.nav-pills .nav-link.active { background: var(--mx-primary); }
.page-item.active .page-link { background: var(--mx-primary); border-color: var(--mx-primary); }
.page-link { color: var(--mx-primary); }
.badge.text-bg-primary { background: var(--mx-primary) !important; }
.alert-success { --bs-alert-color: #14563f; --bs-alert-bg: #e6f3ed; --bs-alert-border-color: #bfe0d3; }

/* 首页头条大图：按容器宽等比裁切，避免原图过高把首屏撑长 */
.mx-hero-img {
  width: 100%;
  height: clamp(220px, 32vw, 400px);
  object-fit: cover;
  display: block;
}

/* 商品参数（shop_params）：名称 + 值成对展示，桌面两对/行，移动端一对/行 */
.vc-params-block {
  --vc-param-line: var(--vc-line, var(--tm-line, var(--mx-line, #e5e7eb)));
  --vc-param-muted: var(--vc-muted, var(--tm-muted, var(--mx-muted, #6b7280)));
  --vc-param-zebra: rgba(0, 0, 0, 0.025);
  margin-top: 18px;
}

.tm-accordion__body .vc-params-block {
  margin-top: 0;
}

.vc-params-title {
  margin: 0 0 10px;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.vc-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--vc-param-line);
  border-bottom: 0;
  border-radius: 6px;
}

.vc-param-grid__item {
  display: grid;
  grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid var(--vc-param-line);
}

.vc-param-grid__item:nth-child(odd) {
  border-right: 1px solid var(--vc-param-line);
}

.vc-param-grid__item:nth-child(4n + 3),
.vc-param-grid__item:nth-child(4n + 4) {
  background: var(--vc-param-zebra);
}

.vc-param-grid__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}

.vc-param-grid__name,
.vc-param-grid__value {
  min-width: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.vc-param-grid__name {
  color: var(--vc-param-muted);
}

.vc-param-grid__value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 767px) {
  .vc-param-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vc-param-grid__item,
  .vc-param-grid__item:nth-child(odd) {
    grid-template-columns: 96px minmax(0, 1fr);
    border-right: 0;
  }

  .vc-param-grid__item:nth-child(4n + 3),
  .vc-param-grid__item:nth-child(4n + 4) {
    background: transparent;
  }

  .vc-param-grid__item:nth-child(odd) {
    background: var(--vc-param-zebra);
  }
}