/* ============================================================================
   heima 模板 · 商城首页
   ----------------------------------------------------------------------------
   视觉口径照参照站 xj.lltlmt.cn/s（appui + liquid glass）：青色品牌条、浅蓝侧栏、
   iOS 蓝主色、全药丸控件、18px 圆角磨砂卡。取色/尺寸均由参照站整页截图实采：
     品牌条 #5ccdde / 顶部栏 #f4f4ff / 主色 #007aff / 深蓝 #0060df
     侧栏 #e6f4fe→#cbe7fd→#e6f1fd / 页面 #f6f6fe→#eef1fb→#d9ecf2
     品牌条 50px、顶部栏 50px、控件 44px、卡片圆角 18px、侧栏 232px
   结构（排查顺序）：变量 → 底 → 侧栏 → 顶栏 → 栅格 → 卡片 → 表单 → 按钮
                   → 提示/表格/列表 → 公告 → 页脚 → 弹层 → 响应式
   ========================================================================== */

/* ── 变量 ────────────────────────────────────────────────────────────────── */
.hm-home {
  --hm-blue: #007aff;
  --hm-blue-2: #409cff;
  --hm-blue-deep: #0060df;
  --hm-teal: #5ccdde;
  --hm-ink: #1c2530;
  --hm-ink-2: #55617a;
  --hm-ink-3: #8a93a6;
  --hm-hair: rgba(120, 140, 170, .18);
  --hm-hair-2: rgba(120, 140, 170, .12);
  --hm-card: rgba(255, 255, 255, .46);
  --hm-field: rgba(255, 255, 255, .74);
  --hm-radius: 18px;
  --hm-pill: 999px;
  --hm-shadow: 0 6px 20px -10px rgba(31, 55, 96, .22);
  --hm-shadow-lg: 0 18px 40px -22px rgba(31, 55, 96, .34);
  --hm-side-w: 232px;
  --hm-brand-h: 50px;
  --hm-top-h: 50px;

  position: relative;
  min-height: 100vh;
  margin: 0;
  background: #eef1fb;
  color: var(--hm-ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.hm-home * {
  box-sizing: border-box;
}

/* ── 底 ──────────────────────────────────────────────────────────────────── */
.hm-home-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 极光必须够「花」：毛玻璃后面没有色块，blur 出来的就是一片白，
     卡片透明度压得再低也看不出玻璃。取色按参照站整页截图 7×8 网格实采：
     左上 #aedffe 天空蓝 / 右上 #d9d6f4 薰衣草 / 中部 #eef1f6 中性 / 右下 #a7e5ea 薄荷。 */
  background:
    radial-gradient(75% 34% at 6% 4%, #a9dcff 0%, rgba(169, 220, 255, 0) 68%),
    radial-gradient(58% 28% at 80% 6%, #d9d5f5 0%, rgba(217, 213, 245, 0) 70%),
    radial-gradient(72% 32% at 90% 84%, #a7e5ea 0%, rgba(167, 229, 234, 0) 72%),
    radial-gradient(62% 28% at 18% 92%, #cfe6f7 0%, rgba(207, 230, 247, 0) 72%),
    linear-gradient(180deg, #f0f3fb 0%, #eef1f6 44%, #eaf0f4 70%, #e4eef4 100%);
}

/* ── 侧栏 ────────────────────────────────────────────────────────────────── */
.hm-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: var(--hm-side-w);
  display: flex;
  flex-direction: column;
  /* 参照站实测：bg rgba(248,249,252,.55) + saturate(1.9) blur(22px)，蓝色是极光透上来的 */
  background-color: rgba(248, 249, 252, .55);
  background-image: linear-gradient(180deg, rgba(206, 233, 254, .55) 0%, rgba(238, 248, 255, .3) 100%);
  border-right: 1px solid rgba(255, 255, 255, .5);
  box-shadow: var(--hm-shadow);
  -webkit-backdrop-filter: saturate(1.9) blur(22px);
  backdrop-filter: saturate(1.9) blur(22px);
}

.hm-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--hm-brand-h);
  padding: 0 16px;
  background: var(--hm-teal);
  color: var(--hm-ink);
  text-decoration: none;
  flex: 0 0 auto;
}

.hm-side-brand:hover,
.hm-side-brand:focus {
  color: var(--hm-ink);
  text-decoration: none;
}

.hm-side-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 品牌图标是位图（assets/img/logo.png 方形牛标），26px 时剪影细节会糊，放到 28px */
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #24444b;
}

.hm-side-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hm-side-logo svg {
  width: 24px;
  height: 24px;
}

.hm-side-name {
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-side-nav {
  flex: 1 1 auto;
  padding: 14px 10px;
  overflow-y: auto;
}

.hm-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin-bottom: 6px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--hm-ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.hm-nav-item i {
  width: 16px;
  font-size: 15px;
  color: var(--hm-ink-3);
  text-align: center;
  transition: color .18s ease;
}

.hm-nav-item:hover,
.hm-nav-item:focus {
  color: var(--hm-blue-deep);
  background: rgba(255, 255, 255, .52);
  text-decoration: none;
}

.hm-nav-item:hover i,
.hm-nav-item:focus i {
  color: var(--hm-blue);
}

/* 参照站选中项是淡蓝药丸 #cbe6fd —— 但那上面的 #007aff 只有 3.1:1，
   沿用本项目「品牌色当文字要另立深色」的规矩，文字压到 #0050c8（5.5:1）。 */
.hm-nav-item.is-active {
  color: #0050c8;
  font-weight: 600;
  background: linear-gradient(180deg, #d8ecfe 0%, #cbe6fd 100%);
  box-shadow: 0 8px 18px -12px rgba(31, 55, 96, .5);
}

.hm-nav-item.is-active i {
  color: var(--hm-blue-deep);
}

/* 选中项右缘的青色竖条（参照站同款） */
.hm-nav-item.is-active::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--hm-teal);
}

.hm-side-foot {
  flex: 0 0 auto;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, .55);
  color: var(--hm-ink-3);
  font-size: 12.75px;
  line-height: 1.7;
}

.hm-side-foot a {
  color: var(--hm-ink-2);
  text-decoration: none;
}

.hm-side-mask {
  display: none;
}

/* ── 主区 / 顶栏 ─────────────────────────────────────────────────────────── */
.hm-main {
  position: relative;
  z-index: 1;
  margin-left: var(--hm-side-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hm-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--hm-top-h);
  padding: 0 18px;
  /* 顶栏要「看得出来」：参照站是 rgba(255,255,255,.45)+blur(16)，叠在极光上本来就模糊成一片；
     这里把白提到 .62 并留一条发丝边 + 落影 —— 既保留毛玻璃，又能看出一条栏。 */
  background: rgba(255, 255, 255, .62);
  border-bottom: 1px solid rgba(120, 140, 170, .2);
  box-shadow: 0 6px 20px -10px rgba(31, 55, 96, .28);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
}

.hm-top-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hm-ink);
  font-size: 15px;
  font-family: inherit;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .18s ease;
}

.hm-top-menu:hover,
.hm-top-menu:focus {
  background: rgba(255, 255, 255, .7);
  outline: 0;
}

.hm-top-menu i {
  font-size: 15px;
  color: var(--hm-ink-2);
}

/* 桌面端品牌名在侧栏，顶栏标题只在窄屏补位 */
.hm-top-title {
  display: none;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hm-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .68);
  color: var(--hm-ink-2);
  font-size: 14px;
  box-shadow: var(--hm-shadow);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.hm-round:hover,
.hm-round:focus {
  color: var(--hm-blue);
  background: #fff;
  outline: 0;
}

.hm-user.open .hm-round {
  color: var(--hm-blue);
  background: #fff;
}

/* 已登录：头像 + 用户名 + 箭头的胶囊（首页与用户中心共用） */
.hm-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 3px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: var(--hm-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--hm-shadow);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.hm-user-btn:hover,
.hm-user-btn:focus {
  background: #fff;
  outline: 0;
}

.hm-user-btn .hm-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #c9d3e0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.hm-user-btn .hm-user-name {
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hm-user-btn .hm-caret {
  color: var(--hm-ink-3);
  font-size: 13px;
  transition: transform .18s ease;
}

.hm-user.open .hm-user-btn .hm-caret {
  transform: rotate(180deg);
}

.hm-home .hm-menu-head small {
  display: block;
  margin-top: 3px;
  color: var(--hm-ink-3);
  font-size: 11.5px;
  font-weight: 400;
}

.hm-home .dropdown-menu.hm-menu {
  min-width: 168px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--hm-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--hm-shadow-lg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hm-home .hm-menu > li > a {
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--hm-ink-2);
  font-size: 14px;
}

.hm-home .hm-menu > li > a:hover,
.hm-home .hm-menu > li > a:focus {
  background: rgba(0, 122, 255, .08);
  color: var(--hm-blue-deep);
}

.hm-home .hm-menu-head {
  padding: 6px 12px;
  color: var(--hm-ink);
  font-size: 13px;
  text-align: center;
}

/* ── 内容栅格 ────────────────────────────────────────────────────────────── */
/* 两栏平铺满整个页面宽度（原来 max-width:1180 居中，1440 以上左右各空一大片） */
.hm-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

.hm-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px;
  align-items: start;
}

/* 下单卡在 DOM 里靠前（手机端先出现），桌面端用显式栅格放到右侧 */
.hm-card--order {
  grid-column: 2;
  grid-row: 1;
}

.hm-card--notice {
  grid-column: 1;
  grid-row: 1;
}

/* ── 卡片 ────────────────────────────────────────────────────────────────── */
/* 参照站 .block 的实测配方（computed style 直接读出来的，不是猜的）：
     background-color: rgba(255,255,255,.21)
     backdrop-filter : saturate(1.85) blur(20px)
     border           : 1px solid rgba(255,255,255,.42)
     border-radius    : 18px
     box-shadow       : 0 10px 34px -12px / 0 2px 8px -4px / 内高光
   ⚠ 底色不能改成不透明渐变：那样玻璃立刻消失（之前就栽在这）。
     卡片自己的淡紫/淡蓝用 background-image 半透明渐变叠上去，玻璃照样透。
   ⚠ 子元素（输入框、按钮、addon）绝对不能再挂 backdrop-filter：
     父级已有 ⇒ 子级失效并渲成纯白。 */
.hm-card {
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--hm-radius);
  background-color: rgba(255, 255, 255, .21);
  box-shadow:
    0 10px 34px -12px rgba(31, 55, 96, .28),
    0 2px 8px -4px rgba(31, 55, 96, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(1.85) blur(20px);
  backdrop-filter: saturate(1.85) blur(20px);
  overflow: hidden;
}

.hm-content > .hm-card + .hm-card {
  margin-top: 18px;
}

/* 参照站两张卡各自带色（整页截图像素实测 #e7e7f7 / #d3ecfe）：下单卡淡紫、公告卡淡蓝 */
.hm-card--order {
  background-image: linear-gradient(160deg, rgba(226, 226, 248, .58) 0%, rgba(240, 240, 252, .34) 100%);
}

.hm-card--notice {
  background-image: linear-gradient(160deg, rgba(188, 224, 255, .62) 0%, rgba(222, 242, 255, .38) 100%);
}

/* 公告卡的标题下面参照站没有分隔线 */
.hm-card--notice .hm-card-head {
  padding-bottom: 8px;
  border-bottom: 0;
}

.hm-card-head {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hm-hair);
}

.hm-card-head--tabs {
  padding: 0;
  border-bottom: 1px solid var(--hm-hair);
}

.hm-card-title {
  margin: 0;
  font-size: 17px;      /* 参照站 h4 实测 17px / 600 */
  font-weight: 600;
  color: var(--hm-ink);
}

.hm-card-title i {
  margin-right: 6px;
  color: var(--hm-ink);
}

.hm-card-title svg {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -3px;
}

.hm-card-body {
  padding: 20px;
}

/* ── 标签页（参照站：等分居中 + 蓝色下划线占满半宽） ─────────────────────── */
.hm-home .hm-tabhead {
  display: flex;
  margin: 0;
  border: 0;
}

.hm-home .hm-tabhead > li {
  flex: 1 1 0;
  float: none;
  margin: 0;
  text-align: center;
}

.hm-home .hm-tabhead > li > a {
  display: block;
  position: relative;
  margin: 0;
  padding: 16px 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hm-ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}

.hm-home .hm-tabhead > li > a i {
  margin-right: 4px;
  color: currentColor;
}

.hm-home .hm-tabhead > li > a:hover,
.hm-home .hm-tabhead > li > a:focus {
  background: transparent;
  color: var(--hm-blue-deep);
}

.hm-home .hm-tabhead > li.active > a,
.hm-home .hm-tabhead > li.active > a:hover,
.hm-home .hm-tabhead > li.active > a:focus {
  background: transparent;
  color: var(--hm-blue);
  font-weight: 600;
}

.hm-home .hm-tabhead > li.active > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--hm-blue);
}

/* ── 表单：全药丸控件 ────────────────────────────────────────────────────── */
.hm-home .form-group {
  margin-bottom: 14px;
}

.hm-home .input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-collapse: separate;
}

/* ⚠ bootstrap 给 .input-group-addon 定了 width:1%、给 .form-control 定了 width:100%，
   放进 flex 行里会各自按百分比算基准宽度：标签被压到 6px 宽（文字被后面的输入框盖住），
   输入框则把右侧按钮顶出卡片。两个 width 都必须显式改回 auto。 */
.hm-home .input-group-addon {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 42px;
  white-space: nowrap;
  vertical-align: middle;
}

.hm-home .input-group-addon.onclick {
  cursor: pointer;
  color: var(--hm-ink-2);
}

.hm-home .input-group-addon.onclick:hover {
  color: var(--hm-blue);
  border-color: rgba(0, 122, 255, .35);
}

/* 搜索按钮：原版是带「开始搜索」四个字的 addon，参照站只留一个放大镜方块 ——
   文字留在 DOM 里（main.js 靠 #doSearch 触发搜索），视觉上换成图标。 */
.hm-home #doSearch {
  flex: 0 0 auto;
  width: 44px;
  padding: 0;
  border-radius: 14px;
  font-size: 0;
  text-align: center;
  cursor: pointer;
}

.hm-home #doSearch::before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  line-height: 42px;
  color: var(--hm-ink-2);
}

.hm-home #doSearch:hover {
  border-color: rgba(0, 122, 255, .35);
}

.hm-home #doSearch:hover::before {
  color: var(--hm-blue);
}

.hm-home .input-group .form-control,
.hm-home .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: var(--hm-field);
  color: var(--hm-ink);
  font-size: 14.5px;
  line-height: 42px;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hm-home .input-group .form-control:focus,
.hm-home .form-control:focus {
  border-color: rgba(0, 122, 255, .45);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .12);
  outline: 0;
}

.hm-home .form-control::placeholder {
  color: var(--hm-ink-3);
}

.hm-home .input-group .form-control[readonly],
.hm-home .form-control[disabled] {
  background: rgba(255, 255, 255, .5);
  color: var(--hm-ink-2);
  opacity: 1;
}

.hm-home select.form-control {
  padding-right: 40px;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

.hm-home .input-group-btn {
  flex: 0 0 auto;
  width: auto;
  font-size: 0;
}

.hm-home .input-group-btn > .btn,
.hm-home .input-group-btn > .btn-group > .btn {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink-2);
  font-size: 14.5px;
  line-height: 42px;
  box-shadow: none;
}

.hm-home .input-group-btn > .btn:hover {
  color: var(--hm-blue);
  border-color: rgba(0, 122, 255, .35);
}

/* 查询订单里的类型下拉（下单手机号 / 17位订单号） */
.hm-home .input-group-btn select.form-control {
  width: 132px !important;
  padding: 0 32px 0 16px;
}

/* ── 按钮 ────────────────────────────────────────────────────────────────── */
.hm-home .btn {
  border-radius: var(--hm-pill);
  font-size: 15px;      /* 参照站按钮实测 15px / 500 */
  font-weight: 500;
  box-shadow: none;
  transition: filter .16s ease, box-shadow .16s ease, background .16s ease;
}

.hm-home .btn:active:focus,
.hm-home .btn:focus {
  outline: 0;
}

.hm-home .btn-primary {
  border-color: transparent;
  background: linear-gradient(180deg, #1e88f5 0%, var(--hm-blue-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0, 96, 223, .9);
}

.hm-home .btn-primary:hover,
.hm-home .btn-primary:focus {
  border-color: transparent;
  background: linear-gradient(180deg, #1e88f5 0%, var(--hm-blue-deep) 100%);
  color: #fff;
  filter: brightness(1.05);
}

.hm-home .btn-default {
  border: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink);
}

.hm-home .btn-default:hover,
.hm-home .btn-default:focus {
  border-color: rgba(0, 122, 255, .3);
  background: #fff;
  color: var(--hm-blue-deep);
}

.hm-home .btn-block {
  width: 100%;
}

/* 加入购物车 / 立即购买：两颗等宽药丸 */
.hm-home .btn-group-justified {
  display: flex;
  gap: 12px;
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
}

.hm-home .btn-group-justified > .btn,
.hm-home .btn-group-justified > .btn-group > .btn {
  float: none;
  flex: 1 1 0;
  width: auto !important;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--hm-pill);
  font-size: 15px;
  line-height: 44px;
}

.hm-home #submit_cart_shop {
  border: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink);
  box-shadow: none;
}

.hm-home #submit_cart_shop:hover,
.hm-home #submit_cart_shop:focus {
  border-color: rgba(0, 122, 255, .3);
  background: #fff;
  color: var(--hm-blue-deep);
}

.hm-home .btn-info,
.hm-home .btn-warning,
.hm-home .btn-danger {
  border: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink-2);
}

.hm-home .btn-xs {
  padding: 0 10px;
  height: 24px;
  border-radius: var(--hm-pill);
  font-size: 12px;
  line-height: 22px;
}

.hm-home .btn-sm {
  height: 36px;
  padding: 0 14px;
  line-height: 34px;
}

/* 商品价格 */
.hm-home #display_price .form-control {
  color: var(--hm-blue-deep);
  font-weight: 700;
}

/* 份数加减 */
.hm-home #num {
  text-align: center;
}

/* ⚠ 这两个按钮在 default/shop.inc.php 里写死了 style="border-radius:0px"
   （原版要拼成首尾相接的方按钮组），不加 !important 压不掉。 */
.hm-home #num_min,
.hm-home #num_add {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--hm-pill) !important;
  font-size: 14px;
}

/* ── 提示 / 购物车条 / 表格 ──────────────────────────────────────────────── */
.hm-home .alert {
  padding: 12px 16px;
  border: 1px solid var(--hm-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  color: var(--hm-ink-2);
  font-size: 14px;
}

/* 商品说明卡：原版铺了行内 background-color:#b4ffe0 / color:#214cb1，改色必须 !important */
.hm-home #alert_frame {
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 122, 255, .16);
  border-radius: 14px;
  background: rgba(234, 243, 255, .9) !important;
  color: var(--hm-ink-2) !important;
  line-height: 1.7;
}

.hm-home #alert_title {
  margin-bottom: 4px;
  color: #0b63c5;
  font-weight: 700;
  text-align: center;
}

.hm-home #alert_content {
  color: var(--hm-ink-2);
}

.hm-home .panel-body.border-t {
  padding: 12px 16px;
  border: 1px solid var(--hm-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  color: var(--hm-ink-2);
  font-size: 14px;
}

.hm-home .panel-body.border-t i {
  color: var(--hm-blue);
}

/* 「点击注册」在 partial 里带行内 #FFCC33，只能 !important 压成主题色 */
.hm-home .panel-body.border-t .btn-danger {
  border-color: transparent !important;
  background: rgba(0, 122, 255, .12) !important;
  color: var(--hm-blue-deep) !important;
  font-weight: 600;
}

.hm-home .panel-body.border-t .btn-danger:hover {
  background: rgba(0, 122, 255, .2) !important;
}

.hm-home #cart_count {
  padding: 0 4px;
  color: #d70015;
}

.hm-home .table-responsive {
  margin-top: 14px;
  border-radius: 14px;
}

.hm-home .table {
  margin-bottom: 0;
  background: rgba(255, 255, 255, .72);
  border-radius: 14px;
  overflow: hidden;
}

.hm-home .table > thead > tr > th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .6);
  color: var(--hm-ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hm-home .table > tbody > tr > td {
  padding: 10px 12px;
  border-top: 1px solid var(--hm-hair-2);
  color: var(--hm-ink-2);
  font-size: 13.5px;
}

.hm-home .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(240, 245, 255, .5);
}

.hm-home .help-block {
  margin: 8px 2px 0;
  color: var(--hm-ink-3);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 售后客服卡（template/default/query.inc.php）
   ⚠ 这行的 DOM 顺序是 [pull-left 头像][pull-right「联系」][pull-left 文案]，
     「联系」排在文案**前面**。改成 flex 后 float 全部失效，元素就按 DOM 序排成
     「头像 - 按钮 - 文案」，按钮卡在中间、文案被挤到右边（shop.php / 首页查单都中招）。
     所以用 order 重排，再用 margin-left:auto 把按钮顶到最右。 */
.hm-home .list-group.media {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--hm-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.hm-home .list-group.media > * {
  float: none !important;
}

.hm-home .list-group.media > .thumb-sm {
  order: 1;
  /* ⚠ 头像别让它自己撑高：span 是行内盒，img 原来 44px 高、宽又被外面
     `.img-thumbnail` 的内距挤成 30px ⇒ 30×44 的「方图拉长」，QQ 头像整个变扁。
     这里把外框钉死成 40×40 方块、行高归零。 */
  width: 40px;
  height: 40px;
  /* ⚠ vendor 的 .thumb-sm 带 `padding: 0 10px 0 0`：内容盒只剩 30px，
     里面的 img 有 `max-width:100%`⇒宽度被卡在 30（高度却是 40）——就是「QQ 头像被压扁」的第二个来源。 */
  padding: 0;
  flex: 0 0 40px;
  line-height: 0;
}

.hm-home .list-group.media > .pull-left:not(.thumb-sm) {
  order: 2;
  min-width: 0;
}

.hm-home .list-group.media > .pull-right {
  order: 3;
  margin-left: auto;
}

/* 文案块里的 .push-5 原来靠 cmui 给左边距，这里已经有 gap，别再叠一层 */
.hm-home .list-group.media .push-5 {
  margin-left: 0;
}

/* .img-thumbnail 自带 4px 内距 + 1px 灰边，会把方形头像内部挤成 30×44；
   改成 0 内距 + 2px 白环，内外都是 40×40，图片不再被拉伸（object-fit 只是兜底）。 */
.hm-home .list-group.media .img-avatar {
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  object-fit: cover;
}

.hm-home .list-group.media .font-w600 {
  color: var(--hm-ink);
  font-weight: 600;
}

.hm-home .list-group.media .text-muted {
  color: var(--hm-ink-3);
  font-size: 13px;
}

.hm-home .pull-right {
  float: right;
}

.hm-home .push-5 {
  margin-left: 12px;
}

.hm-home .list-group-item {
  border-color: var(--hm-hair-2);
}

.hm-home .list-group-item a {
  color: var(--hm-blue-deep);
}

/* ── 公告正文 ────────────────────────────────────────────────────────────── */
.hm-notice-body {
  padding: 16px 20px 18px;
  color: var(--hm-ink-2);
  font-size: 14.5px;
  line-height: 1.65;   /* 参照站 li 实测 23.9/14.5 = 1.65 */
}

.hm-notice-body > :first-child {
  margin-top: 0;
}

.hm-notice-body > :last-child {
  margin-bottom: 0;
}

.hm-notice-body p {
  margin: 0 0 10px;
}

.hm-notice-body a {
  color: var(--hm-blue-deep);
}

.hm-notice-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.hm-notice-body ol,
.hm-notice-body ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: hm-ann;
}

.hm-notice-body ol > li,
.hm-notice-body ul > li {
  position: relative;
  padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--hm-hair-2);
  counter-increment: hm-ann;
}

.hm-notice-body ol > li:last-child,
.hm-notice-body ul > li:last-child {
  border-bottom: 0;
}

.hm-notice-body ol > li::before {
  content: counter(hm-ann);
  position: absolute;
  left: 0;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hm-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.hm-notice-body ul > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hm-blue);
}

.hm-notice-body b,
.hm-notice-body strong {
  color: var(--hm-ink);
}

.hm-notice-body .btn {
  margin-right: 6px;
}

/* ── 公告里「编号药丸 + 列表」写法（参考站前台公告就是这个结构） ───────────
   站长把参考站的公告整段粘进来时，会带 bootstrap 的 .list-group-item / .btn.btn-xs：
   · .list-group-item 自带 1px 边框和 10px 15px 内距，和我们 ul>li 的「小圆点 + 40px 缩进」
     叠在一起会双标记、双边框，所以这里整组接管；
   · .btn.btn-xs 在 bootstrap 里是方块小按钮，参考站渲染成 22px 彩色圆形编号
     （红/绿/蓝/橙/深蓝 = danger/success/info/warning/primary）。
   用户中心那张公告卡用的是 .hm-ann-b，一起写在这儿（home.css 两页都加载），
   这样同一段公告在「前台首页」和「用户中心」长得完全一样。 */
.hm-notice-body ul > li.list-group-item,
.hm-ann-b ul > li.list-group-item {
  position: relative;
  padding: 12px 0 12px 40px;
  border: 0;
  background: none;
  counter-increment: none;
}

/* 分隔线用「相邻行之间」而不是每行下边：折叠时最后一条可见行不会拖着一条线，
   和参考站收起来的样子一致；展开后 4~8 行的线也跟着出来 */
.hm-notice-body ul > li.list-group-item + li.list-group-item,
.hm-ann-b ul > li.list-group-item + li.list-group-item {
  border-top: 1px solid var(--hm-hair-2);
}

.hm-notice-body ul > li.list-group-item::before,
.hm-ann-b ul > li.list-group-item::before {
  content: none;
}

.hm-notice-body .list-group-item > .btn.btn-xs,
.hm-ann-b .list-group-item > .btn.btn-xs {
  position: absolute;
  left: 0;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
}

/* 颜色直接写死成 bootstrap 默认色（参考站就是这套），用户中心没加载 bootstrap 也不会变灰 */
.hm-notice-body .list-group-item > .btn.btn-xs.btn-danger,
.hm-ann-b .list-group-item > .btn.btn-xs.btn-danger {
  background-color: #d9534f !important;
}

.hm-notice-body .list-group-item > .btn.btn-xs.btn-success,
.hm-ann-b .list-group-item > .btn.btn-xs.btn-success {
  background-color: #5cb85c !important;
}

.hm-notice-body .list-group-item > .btn.btn-xs.btn-info,
.hm-ann-b .list-group-item > .btn.btn-xs.btn-info {
  background-color: #5bc0de !important;
}

.hm-notice-body .list-group-item > .btn.btn-xs.btn-warning,
.hm-ann-b .list-group-item > .btn.btn-xs.btn-warning {
  background-color: #f0ad4e !important;
}

.hm-notice-body .list-group-item > .btn.btn-xs.btn-primary,
.hm-ann-b .list-group-item > .btn.btn-xs.btn-primary {
  background-color: #337ab7 !important;
}

/* 「展开全部」后露出来的三连按钮（0 元搭建 / 自助注册 / APP 下载）：
   默认 display:none 由公告里的脚本控制，这里只管展开后的排布 */
.hm-notice-body .btn-group,
.hm-ann-b .btn-group {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.hm-notice-body .btn-group > .btn,
.hm-ann-b .btn-group > .btn {
  flex: 1 1 0;
  min-width: 0;
  /* 图标 + 文字当一个整体居中：按钮被 flex 拉成等高后，光有 text-align:center
     只水平居中，文字会贴着盒子上沿（实测上 10px / 下 23px） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.hm-notice-body .btn-group > .btn.btn-success,
.hm-ann-b .btn-group > .btn.btn-success {
  background: #5cb85c !important;
}

.hm-notice-body .btn-group > .btn.btn-primary,
.hm-ann-b .btn-group > .btn.btn-primary {
  background: #337ab7 !important;
}

.hm-notice-body .btn-group > .btn.btn-danger,
.hm-ann-b .btn-group > .btn.btn-danger {
  background: #d9534f !important;
}

/* 用户中心那张公告卡是整行宽（~1158），宣传按钮带的是行内 width:100%，
   原样渲染会变成一根贯穿整行的黑条：限宽居中，和前台首页窄卡里的观感对齐 */
.hm-ann-b #ann-body > div:first-child > a {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* 公告自带的「展开全部 / 收起」（#ann-toggle 行内样式给了蓝色文字） */
.hm-notice-body #ann-toggle,
.hm-ann-b #ann-toggle {
  font-size: 14px;
  font-weight: 600;
}

.hm-notice-empty {
  padding: 28px 0 30px;
  color: var(--hm-ink-3);
  font-size: 14px;
  text-align: center;
}

/* ── 资讯 ────────────────────────────────────────────────────────────────── */
.hm-home .panel-body {
  padding: 0;
}

.hm-home #newsTab .nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--hm-hair);
}

.hm-home #newsTab .nav-tabs > li {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
}

.hm-home #newsTab .nav-tabs > li > a {
  margin: 0;
  padding: 12px 10px;
  border: 0;
  border-radius: 0;
  color: var(--hm-ink-2);
  font-size: 14px;
  background: transparent;
}

.hm-home #newsTab .nav-tabs > li.active > a,
.hm-home #newsTab .nav-tabs > li.active > a:hover,
.hm-home #newsTab .nav-tabs > li.active > a:focus {
  border: 0;
  background: transparent;
  color: var(--hm-blue);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--hm-blue);
}

.hm-home #newsTab .table > tbody > tr > td {
  padding: 10px 14px;
  border-color: var(--hm-hair-2);
}

/* ── 页脚 / 客服浮标 ─────────────────────────────────────────────────────── */
.hm-foot {
  margin-top: 22px;
  color: var(--hm-ink-3);
  font-size: 13px;
  text-align: center;
}

.hm-foot a {
  color: var(--hm-ink-2);
  text-decoration: none;
}

.hm-foot a:hover {
  color: var(--hm-blue-deep);
}

/* 右下角原来还有一个 .hm-fab「网页客服」（QQ 跳转），和在线客服悬浮窗压在一起，已移除 */

/* ── 弹层（layer / bootstrap modal） ─────────────────────────────────────── */
.hm-home .layui-layer {
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -28px rgba(31, 55, 96, .55) !important;
  overflow: hidden;
}

.hm-home .layui-layer .layui-layer-title {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hm-hair);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, .96);
  color: var(--hm-ink);
  font-size: 15px;
  font-weight: 600;
}

.hm-home .layui-layer .layui-layer-content {
  padding: 18px;
  color: var(--hm-ink-2);
  font-size: 14px;
  line-height: 1.7;
}

/* ⚠ layer.msg 沿用 layer 自带的黑底（`.layui-layer-hui` ≈ rgba(0,0,0,.6)），
   上面那条 content 字色会把它染成黑底深灰字（对比度 ~1.1:1）⇒ 提示条整个看不见。
   msg 单独回浅色玻璃，别跟弹窗共用一套内边距/字色。 */
.hm-home .layui-layer-msg,
.hm-home .layui-layer-hui {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--hm-hair);
  box-shadow: 0 16px 38px -14px rgba(31, 55, 96, .35);
  color: var(--hm-ink);
}

.hm-home .layui-layer-msg .layui-layer-content,
.hm-home .layui-layer-hui .layui-layer-content {
  padding: 13px 24px;
  color: var(--hm-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.hm-home .layui-layer .layui-layer-btn {
  padding: 0 14px 14px;
  border-top: 0;
  text-align: center;
}

.hm-home .layui-layer .layui-layer-btn a {
  height: 40px;
  min-width: 96px;
  margin: 0 5px;
  padding: 0 20px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--hm-ink-2);
  font-size: 14px;
  line-height: 38px;
}

.hm-home .layui-layer .layui-layer-btn .layui-layer-btn0 {
  border-color: transparent;
  background: linear-gradient(180deg, #1e88f5 0%, var(--hm-blue-deep) 100%);
  color: #fff;
  font-weight: 600;
}

.hm-home .modal-content {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 60px -28px rgba(31, 55, 96, .55);
}

.hm-home .modal-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hm-hair);
}

.hm-home .modal-title {
  color: var(--hm-ink);
  font-size: 15px;
  font-weight: 600;
}

.hm-home .modal-body {
  padding: 18px 20px;
  color: var(--hm-ink-2);
  font-size: 14px;
  line-height: 1.75;
}

.hm-home .modal-footer {
  padding: 0 20px 18px;
  border-top: 0;
}

.hm-home .modal-footer .btn {
  height: 40px;
  padding: 0 22px;
  border-radius: var(--hm-pill);
}

/* ── 响应式 ──────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .hm-side {
    width: 246px;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 0 24px 60px -20px rgba(24, 42, 84, .45);
  }

  .hm-home.is-menu-open .hm-side {
    transform: translateX(0);
  }

  .hm-home.is-menu-open .hm-side-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(20, 32, 60, .28);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .hm-main {
    margin-left: 0;
  }

  .hm-top-title {
    display: block;
  }

  .hm-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-card--order,
  .hm-card--notice {
    grid-column: 1;
    grid-row: auto;
  }

  .hm-content {
    padding: 16px 14px 34px;
  }
}

@media (max-width: 575px) {
  .hm-top {
    padding: 0 12px;
    gap: 8px;
  }

  .hm-top-menu {
    padding: 0 4px;
    gap: 6px;
  }

  .hm-card {
    border-radius: 16px;
  }

  .hm-card-body,
  .hm-notice-body {
    padding: 14px;
  }

  .hm-home .btn-group-justified {
    gap: 8px;
  }

  .hm-home .input-group-addon {
    padding: 0 12px;
    font-size: 13.5px;
  }

  .hm-home .input-group {
    gap: 6px;
  }

  .hm-home .btn-group-justified > .btn,
  .hm-home .btn-group-justified > .btn-group > .btn {
    font-size: 14px;
  }

  /* 公告底部三连按钮：窄屏一行硬塞三个，14px 的图标+文字会顶到按钮边
     （实测左右各只剩 1.8px），这里单独收一档 */
  .hm-notice-body .btn-group > .btn,
  .hm-ann-b .btn-group > .btn {
    gap: 4px;
    padding: 8px 4px;
    font-size: 12px;
  }

  /* 窄屏顶栏只留头像，用户名/箭头会挤掉菜单按钮 */
  .hm-user-btn .hm-user-name,
  .hm-user-btn .hm-caret {
    display: none;
  }

  .hm-user-btn {
    padding: 0 3px;
  }
}