/* ═══════════════════════════════════════════════════════════
   巨量无限 · Likes 前台样式
   依赖全局 umv.css（tokens / layout / components，已提供 --primary 等）
   商品卡参照 search.moesr.com（Apple 风格 grid-4 竖卡）
   搜索栏参照 SMS 子站（umv-search-* 42px 规范）
   颜色/标签全用全局 tokens（黑白灰）
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

body { background: var(--bg-page); color: var(--text-primary); }

/* ═══════════ 搜索栏动作区（统计 + 下单必看/联系下单，与 sms 同款 outline）═══════════ */
.umv-search-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.umv-search-btn-outline {
  background: var(--bg-surface-solid);
  border: 1px solid var(--border);
  color: var(--primary);
  text-decoration: none;
}
.umv-search-btn-outline:hover { background: var(--bg-surface-solid); color: var(--primary); border-color: var(--primary); }
.likes-stats-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
  font-size: 12px; color: var(--text-tertiary);
}
/* 左侧统计组（平台/商品）靠左，结果标题靠右 */
.likes-stats-left { display: inline-flex; align-items: center; gap: 10px; }
/* 结果标题并入统计行：靠右显示（字号样式参考 SMS「共 X 个项目」filter-tip：12px/600/tertiary） */
.likes-stats-row .products-count { font-size: 12px; color: var(--text-tertiary); font-weight: 600; margin-left: auto; }
.likes-stats-row b { font-size: 14px; color: var(--text-primary); }
.likes-stats-divider { width: 1px; height: 12px; background: var(--border); }

/* ═══════════ 搜索排序栏（SMS 风格 umv-search-*，覆盖为 3 列）═══════════ */
.umv-search-grid { grid-template-columns: 1fr 170px auto; }
.search-input-wrap { position: relative; flex: 1; min-width: 0; }
.search-input-wrap .si-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary); pointer-events: none; z-index: 1;
}
.umv-search-field .search-input-wrap input { padding-left: 36px; padding-right: 34px; }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--text-tertiary); font-size: 18px; line-height: 1;
  display: none; z-index: 1;
}
.search-clear:hover { color: var(--primary); }

/* ═══════════ 分类筛选卡片（全局 pill）═══════════ */
.filter-card {
  background: var(--bg-surface-solid);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 10px 20px 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.filter-tags-row { display: flex; align-items: flex-start; gap: 8px; }
.filter-tags { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.filter-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface-solid);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
}
.filter-tag:hover { border-color: var(--primary); color: var(--primary); }
.filter-tag.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ═══════════ 商品列表头 ═══════════ */
.products-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.products-count { font-size: 13px; color: var(--text-tertiary); font-weight: 500; }

/* ═══════════ 商品网格（moesr grid-4 → 响应式）═══════════ */
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ═══════════ 商品卡（moesr 竖卡：图标+名称+副标题 / 底部价格胶囊+按钮）═══════════ */
.fe-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }

.fe-card-main { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 12px; align-items: center; }
.fe-thumb-wrap {
  width: 35px; height: 35px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  background: var(--bg-muted);
}
.fe-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s ease; }
.fe-thumb.loaded { opacity: 1; }
/* 商品图占位：品牌 logo 环形 svg（居中显示） */
.fe-thumb-placeholder { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; box-sizing: border-box; }
.fe-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fe-name {
  font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; white-space: normal;
}
.fe-meta {
  font-size: 10px; color: var(--text-tertiary); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fe-bottom { display: flex; align-items: center; margin-top: 2px; }
.fe-price {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.fe-price-orig {
  font-size: 10px; font-weight: 500;
  color: var(--text-tertiary, #9CA3AF);
  text-decoration: line-through;
  margin-left: 6px;
  white-space: nowrap;
}

/* ═══════════ 加载更多 ═══════════ */
/* 按钮容器：商品网格下方居中 */
.loadmore-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 0 6px;
}
.btn-loadmore {
  padding: 10px 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface-solid);
  color: var(--text-secondary);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-loadmore:hover { border-color: var(--primary); color: var(--primary); }

/* ═══════════ 空状态（无图标；标题 13.6px / 说明 11.2px = 原字号 × 0.8） ═══════════ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-tertiary); }
.empty-state h5 { font-size: 13.6px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.empty-state p { font-size: 11.2px; font-weight: 400; color: var(--text-tertiary); }

/* ═══════════ 弹窗 ═══════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all 0.25s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--bg-surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 90vw; width: 460px; max-height: 85vh;
  display: flex; flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.25s;
}
.modal-overlay.active .modal-box { transform: translateY(0); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.modal-header h5 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.modal-close {
  width: 32px; height: 32px; border: none; background: none;
  font-size: 20px; color: var(--text-tertiary); cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--bg-strong); color: var(--text-primary); }
.modal-body { padding: 18px 24px; overflow-y: auto; flex: 1; font-size: 13px; }
.info-content { font-size: 13px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
.info-content h2 { font-size: 17px; font-weight: 700; margin: 12px 0 6px; line-height: 1.4; }
.info-content h3 { font-size: 15px; font-weight: 700; margin: 10px 0 4px; line-height: 1.4; }
.info-content p { margin: 4px 0; }
.info-content ul, .info-content ol { padding-left: 20px; margin: 6px 0; }
.info-content blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--text-tertiary); margin: 8px 0; }
.info-content b, .info-content strong { font-weight: 700; }

/* ═══════════ Toast ═══════════ */
/* 提示窗口全站居中：顶部条与居中条统一为屏幕正中。
   注意：本站同时加载 umv.css(components.css 的 .toast 定义了 bottom:90px)，
   两条 .toast 级联后 top+bottom 同时生效会把 toast 拉成满高。
   必须显式 bottom:auto 覆盖，让定位只由 top 控制（垂直居中），否则黑块被撑高。 */
.toast {
  position: fixed; top: 50%; left: 50%; bottom: auto;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast-center {
  top: 50%; left: 50%; bottom: auto;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 14px 28px;
  border-radius: var(--radius-lg);
  font-size: 15px; font-weight: 600;
  background: var(--primary); color: #fff;
  border: none;
  box-shadow: var(--shadow-lg);
}
.toast-center.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast-success { background: var(--bg-surface-solid); color: var(--success); border: 1px solid var(--success); }
.toast-error { background: var(--bg-surface-solid); color: var(--danger); border: 1px solid var(--danger); }
.toast-info { background: var(--bg-surface-solid); color: var(--text-primary); border: 1px solid var(--border); }

/* ═══════════ 响应式 ═══════════ */
@media (max-width: 1150px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .umv-search-grid { grid-template-columns: 1fr 1fr; }
  .fe-card { padding: 12px; }
  .fe-card-main { grid-template-columns: 35px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; gap: 14px; }
  .fe-card { padding: 14px; }
}

/* ═══════════ 搜索筛选栏（搜索 + 1/2/3 级分类级联下拉，SMS 风格） ═══════════ */
/* 桌面宽屏：单行 grid（一级/二级/三级 + 搜索框弹性 + 按钮，无排序下拉） */
.likes-search-grid {
  display: grid;
  grid-template-columns: 160px 160px 160px minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: end;
}
.likes-search-grid .umv-search-field { min-width: 0; }
.likes-search-grid .umv-dropdown { width: 100%; }
.likes-search-grid .umv-dropdown-trigger,
.likes-search-grid .search-input-wrap input {
  height: 42px; box-sizing: border-box;
}
.likes-search-grid .umv-dropdown-panel { min-width: 200px; }
.likes-search-grid .umv-search-field:last-child .umv-search-actions { flex-wrap: nowrap; }
.likes-search-grid .umv-search-field:last-child .umv-search-btn { padding: 0 18px; }
@media (max-width: 1150px) {
  .likes-search-grid { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
  .likes-search-grid .umv-search-field:nth-child(-n+3) { flex: 1 1 150px; }
  .likes-search-grid .likes-search-kw { flex: 1.4 1 220px; }
  .likes-search-grid .umv-search-field:last-child { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .likes-search-grid .umv-search-field:nth-child(1),
  .likes-search-grid .umv-search-field:nth-child(2) { flex: 1 1 calc(50% - 7px); }
  .likes-search-grid .umv-search-field:nth-child(3),
  .likes-search-grid .likes-search-kw,
  .likes-search-grid .umv-search-field:last-child { flex: 1 1 100%; }
}


/* ═══════════ 搜索栏简化版（搜索框 + 搜索/下单必看按钮一行，无分类下拉） ═══════════ */
.umv-search-simple-inner { display: flex; align-items: center; gap: 10px; }
.umv-search-simple-inner .likes-search-kw { flex: 1 1 auto; min-width: 0; }
.umv-search-simple-inner .umv-search-actions { flex: 0 0 auto; }
@media (max-width: 600px) {
  .umv-search-simple-inner { flex-wrap: wrap; }
  .umv-search-simple-inner .likes-search-kw { flex: 1 1 100%; }
  .umv-search-simple-inner .umv-search-actions { flex: 1 1 100%; }
  .umv-search-simple-inner .umv-search-actions .umv-search-btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══════════ 分类标签卡（一级默认显示；二级/三级点选后展开） ═══════════ */
.cate-card-filter { margin: 6px 0 2px; }
.cate-tabs-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
/* 一级分类行：默认靠左自然换行（无需特殊规则，与二三级一致） */
.cate-tabs-row:empty { display: none; }
.cate-tab {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); background: var(--bg-surface-solid);
  /* 字号字重参考 SMS「国家/地区」下拉：13px / 600 */
  color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: border-color .12s, color .12s, background .12s;
}
.cate-tab:hover { border-color: var(--primary); color: var(--primary); }
.cate-tab.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600;
}
/* 一级分类标签：统一最小宽度 82px、文字居中（2026-09-03） */
#cate1Row .cate-tab { min-width: 82px; justify-content: center; }
/* 手机端分类标签（2026-09-06；不改电脑端）
   4 字及以内标签(带 .cate-tab-short)固定为每行 4 个等宽；
   4 字以上标签随文字自适应宽度，不强制每行几个 */
@media (max-width: 600px) {
  #cate1Row, #cate2Row, #cate3Row { display: flex; flex-wrap: wrap; gap: 8px; }
  #cate1Row .cate-tab, #cate2Row .cate-tab, #cate3Row .cate-tab { min-width: 0; justify-content: center; padding: 7px 10px; }
  .cate-tab-short { flex: 0 0 calc(25% - 6px); }
  .cate-tab:not(.cate-tab-short) { flex: 0 0 auto; white-space: nowrap; }
}


/* ═══════════ likes 搜索栏（参考 SMS：umv-search 组件，排分类卡之后） ═══════════ */
/* 三列：搜索输入(自适应) | 价格排序(固定 200px) | 操作按钮(auto) */
.umv-search-grid-likes { grid-template-columns: minmax(0, 1fr) 200px auto; }
.umv-search-grid-likes .kw-wrap { position: relative; }
.umv-search-grid-likes .kw-wrap input { padding-right: 36px; }
.umv-search-grid-likes .kw-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-tertiary); font-size: 14px; line-height: 1; z-index: 1; display: none;
}
.umv-search-grid-likes .kw-clear:hover { color: var(--primary); }
/* 分类卡区域与搜索栏上下间距 */
.cate-card-filter { margin: 0 0 6px; }
@media (max-width: 600px) {
  /* 移动端重排：搜索商品整行；价格排序 + 搜索 + 下单必看 同一行 */
  .umv-search-grid-likes { display:flex; flex-wrap:wrap; gap:10px; }
  .umv-search-grid-likes .umv-search-field { min-width:0; }
  .umv-search-grid-likes .umv-search-field:nth-child(1) { flex:1 1 100%; }
  .umv-search-grid-likes .umv-search-field:nth-child(2) { flex:0 0 100px; }
  .umv-search-grid-likes .umv-search-field:nth-child(3) { flex:1 1 0; min-width:0; }
  .umv-search-grid-likes .umv-search-actions { flex-wrap:nowrap; gap:6px; }
  .umv-search-grid-likes .umv-search-btn { padding:10px 10px; font-size:12px; white-space:nowrap; }
  /* 手机端：搜索按钮与「下单必看」等宽（各占按钮区一半） */
  .umv-search-grid-likes .umv-search-actions .umv-search-btn { flex:1 1 0; justify-content:center; text-align:center; }
}