/* =============================================================================
 * 弘度集市 V8 · 统一设计系统 (market-v8.css)
 * 对标：盒马 / 美团小象生鲜 / 优盛生鲜 —— 品牌级生鲜电商交互视觉规范
 * -----------------------------------------------------------------------------
 * 设计原则
 *  1. 单一事实来源：尺寸/圆角/间距/色彩全部走下方 Token，禁止页面内硬编码色值。
 *  2. 语义化：--mkt-* 为集市语义变量，映射到全局 token.css（--color-* / --red-600）。
 *  3. 一致性：所有卡片、区块、Tab、按钮共用同一组半径/间距/阴影/字号。
 *  4. 安全兜底：未引入 token.css 时，:root 提供完整回退值，页面独立可渲染。
 * 引用顺序：global.css → token.css → market-v8.css → 页面内极少定制
 * ========================================================================== */

:root {
  /* =====================================================================
   * 品牌色彩宪法（2026-10-12 强制执行 · 全站唯一权威）
   * ---------------------------------------------------------------------
   * 主色   #0EA5E9 盒马天蓝 —— 平台信任：顶部Tab选中态/搜索图标/分类主标题/金刚区图标主题
   * 辅色   #22C55E 生鲜绿   —— 生鲜标签：分类图标点缀/生鲜标签/品质承诺/底部集市选中态
   * 促销色 #F97316 橙色     —— 转化核心（受限）：仅加购按钮/现价/折扣标签“降X元”，禁大面积背景
   * 背景   #FFFFFF 纯白 + #F8FAFC 浅灰 —— 卡片纯白，模块间隔/页面底色浅灰
   * ===================================================================== */
  --brand-trust:  #0EA5E9;   /* 主色 · 平台信任（天蓝） */
  --brand-trust-soft: rgba(14, 165, 233, 0.10);
  --brand-fresh:  #22C55E;   /* 辅色 · 生鲜标签（生鲜绿） */
  --brand-fresh-soft: rgba(34, 197, 94, 0.12);
  --brand-sale:   #F97316;   /* 促销色 · 转化核心（橙，受限使用） */
  --brand-sale-soft: rgba(249, 115, 22, 0.10);
  --brand-bg:     #F8FAFC;   /* 页面底色 · 浅灰 */
  --brand-card:   #FFFFFF;   /* 卡片背景 · 纯白 */

  /* ---------- 品牌色（生鲜红 + 鲜绿点缀，对齐盒马/小象） ---------- */
  --mkt-red:          var(--brand-sale);  /* 主行动色 / 现价 / CTA（宪法：促销橙） */
  --mkt-red-dark:     #D9480F;
  --mkt-red-soft:     var(--brand-sale-soft);
  --mkt-green:        var(--brand-fresh); /* 生鲜/新鲜感点缀 */
  --mkt-green-soft:   var(--brand-fresh-soft);
  --mkt-gold:         #F5A623;            /* 促销金色（保留兼容） */
  --mkt-brand:        var(--brand-trust); /* 全局主色（青）做次强调 */

  /* ---------- 中性色 ---------- */
  --mkt-bg:           #F5F6F8;            /* 页面底色 */
  --mkt-card:         #FFFFFF;            /* 卡片底 */
  --mkt-text:         #1F2329;            /* 主文 */
  --mkt-text-2:       #6B7280;            /* 次文 */
  --mkt-text-3:       #9AA0A6;            /* 弱文 */
  --mkt-border:       #EEF0F2;            /* 分割线 */
  --mkt-shade:        #F2F3F5;            /* 图片占位渐变浅 */
  --mkt-subtle:       #E9EBEF;            /* 图片占位渐变深 */

  /* ---------- 圆角标尺（统一） ---------- */
  --mkt-r-sm:  8px;
  --mkt-r-md:  12px;
  --mkt-r-lg:  16px;
  --mkt-r-pill: 999px;

  /* ---------- 间距标尺（4px 基准） ---------- */
  --mkt-s-1: 4px;  --mkt-s-2: 8px;  --mkt-s-3: 12px;
  --mkt-s-4: 16px; --mkt-s-5: 20px; --mkt-s-6: 24px;

  /* ---------- 阴影标尺 ---------- */
  --mkt-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --mkt-shadow-md: 0 2px 10px rgba(17, 24, 39, 0.08);
  --mkt-shadow-lg: 0 6px 18px rgba(17, 24, 39, 0.10);

  /* ---------- 字号标尺 ---------- */
  --mkt-f-xs: 0.6875rem;   /* 11px 角标/规格 */
  --mkt-f-sm: 0.75rem;     /* 12px 弱文 */
  --mkt-f-base: 0.8125rem; /* 13px 正文 */
  --mkt-f-md: 0.875rem;    /* 14px 名称 */
  --mkt-f-lg: 1rem;        /* 16px 标题 */
  --mkt-f-xl: 1.125rem;    /* 18px 大标题 */

  /* ---------- 布局 ---------- */
  --mkt-page-max: 480px;   /* 移动端最大宽度 */
  --mkt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mkt-safe-top: env(safe-area-inset-top, 0px);
  --mkt-z-tab: 50;
  --mkt-z-fab: 80;
  --mkt-z-bar: 90;

  /* ---------- 兼容旧页面别名（统一由本系统供给，页面内不再重复定义 --mkt-*） ---------- */
  --mkt-red-light: #FF6B81;
  --mkt-red-bg:    #FFF0F2;
  --mkt-ink:       var(--mkt-text);   /* #1F2329 主文 */
  --mkt-sub:       var(--mkt-text-2); /* #6B7280 次文 */
  --mkt-orange:    var(--mkt-gold);   /* #F5A623 促销金 */
  --mkt-shadow:    var(--mkt-shadow-md);
}

/* ============================ 基础容器 ============================ */
.mkt-page {
  max-width: var(--mkt-page-max);
  margin: 0 auto;
  background: var(--mkt-bg);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(64px + var(--mkt-safe-bottom)); /* 避让底部全局导航 */
  box-sizing: border-box;
}
.mkt-content { padding: 0 var(--mkt-s-3) var(--mkt-s-5); }

/* ============================ 顶部 4 Tab ============================ */
/* 片段：fragments/market-v8-tabs :: tabs(active) 统一输出，禁止页面硬编码 */
.mkt-tabs {
  display: flex;
  background: var(--mkt-card);
  border-bottom: 1px solid var(--mkt-border);
  position: sticky;
  top: 0;
  z-index: var(--mkt-z-tab);
}
.mkt-tabs .t {
  flex: 1;
  text-align: center;
  padding: var(--mkt-s-3) 0;
  font-size: var(--mkt-f-lg);
  color: var(--mkt-text-2);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}
/* 宪法：Tab 选中态 = 天蓝加粗 + 天蓝短横线指示器（transition 0.3s） */
.mkt-tabs .t.active { color: var(--brand-trust); font-weight: 700; }
.mkt-tabs .t.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: var(--mkt-r-pill);
  background: var(--brand-trust);
  transition: all 0.3s ease;
}

/* ============================ 金刚区 / 分类网格 ============================ */
.mkt-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mkt-s-3) var(--mkt-s-2);
  background: var(--mkt-card);
  border-radius: var(--mkt-r-lg);
  padding: var(--mkt-s-4) var(--mkt-s-3);
  margin-bottom: var(--mkt-s-3);
}
.mkt-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mkt-s-2);
  cursor: pointer;
  text-decoration: none;
  border: none; background: none;
}
.mkt-cat-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--mkt-r-pill);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--mkt-shade);
  transition: transform 0.15s ease;
}
.mkt-cat-item:active .mkt-cat-icon { transform: scale(0.94); }
.mkt-cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.mkt-cat-label { font-size: var(--mkt-f-sm); color: var(--mkt-text); }

/* 图标占位兜底（onerror 触发）：纯色圆 + 文字/emoji，不出现裂图 */
.mkt-cat-icon.is-fallback,
.hema-cat-icon.is-fallback {
  background: var(--mkt-red-soft);
  font-size: 1.25rem; line-height: 1;
  color: var(--mkt-red-dark);
}

/* ============================ 区块容器 ============================ */
.mkt-section {
  background: var(--mkt-card);
  border-radius: var(--mkt-r-lg);
  padding: var(--mkt-s-4) var(--mkt-s-3) var(--mkt-s-3);
  margin-bottom: var(--mkt-s-3);
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-sec-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--mkt-s-3);
}
.mkt-sec-title h3 {
  margin: 0; font-size: var(--mkt-f-lg); font-weight: 700; color: var(--mkt-text);
  display: flex; align-items: center; gap: var(--mkt-s-2);
}
.mkt-sec-sub { font-size: var(--mkt-f-xs); color: var(--mkt-text-3); font-weight: 400; }
.mkt-more { font-size: var(--mkt-f-sm); color: var(--mkt-text-3); cursor: pointer; }
.mkt-empty-tip { text-align: center; padding: var(--mkt-s-6); color: var(--mkt-text-3); font-size: var(--mkt-f-base); }

/* ============================ 商品卡片（2 列瀑布） ============================ */
.mkt-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mkt-s-3); }
.mkt-grid2 > .mkt-card { min-width: 0; } /* 防止内容撑破栅格 */

.mkt-card {
  background: var(--mkt-card);
  border-radius: var(--mkt-r-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-card:active { transform: scale(0.98); }
.mkt-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(2.5rem, 12vw, 4rem);
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--mkt-shade), var(--mkt-subtle));
}
.mkt-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.mkt-card-img .tag {
  position: absolute; bottom: var(--mkt-s-1); left: var(--mkt-s-1); right: var(--mkt-s-1);
  z-index: 2;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: var(--mkt-f-xs);
  padding: 2px 6px;
  border-radius: 6px;
  text-align: center;
  backdrop-filter: blur(4px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mkt-card-add {
  position: absolute; right: var(--mkt-s-2); bottom: var(--mkt-s-2);
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--mkt-r-pill);
  background: var(--mkt-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; font-weight: 700;
  z-index: 3;
  box-shadow: var(--mkt-shadow-md);
}
.mkt-card-info { padding: var(--mkt-s-2) var(--mkt-s-2) var(--mkt-s-3); }
.mkt-card-name {
  font-size: var(--mkt-f-md); color: var(--mkt-text);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-card-price { color: var(--mkt-red); font-size: var(--mkt-f-lg); font-weight: 700; margin-top: 2px; }
.mkt-card-price s { color: var(--mkt-text-3); font-size: var(--mkt-f-xs); font-weight: 400; margin-left: 4px; }

/* 横向滚动卡（爆款/猜你喜欢） */
.mkt-scroll-x {
  display: flex; gap: var(--mkt-s-3);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.mkt-scroll-x::-webkit-scrollbar { display: none; }
.mkt-card-h { flex: 0 0 7rem; cursor: pointer; }
.mkt-card-h .mkt-card-img { border-radius: var(--mkt-r-md); }
.mkt-card-h .mkt-card-name { font-size: var(--mkt-f-sm); margin-top: 4px; }
.mkt-card-h .mkt-card-price { font-size: var(--mkt-f-base); }

/* ============================ 闪购（限时抢购） ============================ */
.mkt-flash {
  background: linear-gradient(135deg, var(--mkt-red), #FF6B81);
  margin: 0 var(--mkt-s-3) var(--mkt-s-3);
  border-radius: var(--mkt-r-lg);
  padding: var(--mkt-s-3) var(--mkt-s-4);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.mkt-flash-left { display: flex; align-items: center; gap: var(--mkt-s-3); }
.mkt-flash-title { font-size: var(--mkt-f-lg); font-weight: 800; }
.mkt-flash-timer { display: flex; gap: var(--mkt-s-1); align-items: center; }
.mkt-flash-timer span {
  background: rgba(0, 0, 0, 0.18);
  font-size: var(--mkt-f-md); font-weight: 700;
  padding: 2px 6px; border-radius: 6px; min-width: 1.5rem; text-align: center;
}
.mkt-flash-timer .sep { background: none; min-width: auto; padding: 0; }
.mkt-flash-more { font-size: var(--mkt-f-sm); opacity: 0.92; cursor: pointer; }
.mkt-flash-scroll {
  display: flex; gap: var(--mkt-s-2);
  overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--mkt-s-3) var(--mkt-s-3);
}
.mkt-flash-scroll::-webkit-scrollbar { display: none; }
.mkt-flash-item {
  flex: 0 0 5rem;
  background: var(--mkt-card);
  border-radius: var(--mkt-r-md);
  padding: var(--mkt-s-2);
  text-align: center; cursor: pointer;
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-flash-item .emoji { font-size: 2rem; margin-bottom: 2px; line-height: 1; }
.mkt-flash-item .price { font-size: var(--mkt-f-sm); color: var(--mkt-red); font-weight: 700; }
.mkt-flash-item .orig { font-size: var(--mkt-f-xs); color: var(--mkt-text-3); text-decoration: line-through; }

/* ============================ 购物车 ============================ */
.mkt-cart-wrap { padding: 110px var(--mkt-s-3) calc(90px + 3.5rem + var(--mkt-safe-bottom, 0px)); max-width: var(--mkt-page-max); margin: 0 auto; }
.mkt-cart-item {
  display: flex; align-items: center;
  background: var(--mkt-card);
  padding: var(--mkt-s-3);
  border-radius: var(--mkt-r-md);
  margin-bottom: var(--mkt-s-3);
  box-shadow: var(--mkt-shadow-sm);
}
.mkt-cart-check {
  width: 22px; height: 22px;
  border: 1px solid #DDDDDD; border-radius: var(--mkt-r-pill);
  margin-right: var(--mkt-s-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: transparent; font-size: 0.875rem;
}
.mkt-cart-check.checked { background: var(--mkt-red); border-color: var(--mkt-red); color: #fff; }
.mkt-cart-img {
  width: 80px; height: 80px;
  border-radius: var(--mkt-r-sm);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; line-height: 1;
  background: linear-gradient(135deg, #FFE9E9, #FFD6D6);
}
.mkt-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.mkt-cart-info { flex: 1; margin-left: var(--mkt-s-3); min-width: 0; }
.mkt-cart-name { font-size: var(--mkt-f-md); color: var(--mkt-text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-cart-spec { font-size: var(--mkt-f-xs); color: var(--mkt-text-3); margin: 2px 0; }
.mkt-cart-price { color: var(--mkt-red); font-size: var(--mkt-f-lg); font-weight: 700; }
.mkt-cart-credit { color: var(--mkt-gold); font-size: var(--mkt-f-xs); }
.mkt-cart-qty { display: flex; align-items: center; margin-top: 6px; }
.mkt-cart-qty button {
  width: 26px; height: 26px; border: 1px solid #DDDDDD; background: var(--mkt-card);
  border-radius: var(--mkt-r-sm); font-size: 1rem;
}
.mkt-cart-qty input { width: 40px; height: 26px; text-align: center; border: 1px solid #DDDDDD; border-left: none; border-right: none; }
.mkt-cart-del { color: var(--mkt-text-3); font-size: var(--mkt-f-sm); margin-left: auto; padding: var(--mkt-s-1) var(--mkt-s-2); cursor: pointer; }
.mkt-cart-empty, .mkt-state {
  text-align: center; padding: 100px var(--mkt-s-4); color: var(--mkt-text-3);
  font-size: var(--mkt-f-base);
}
.mkt-state .mkt-state-emoji { font-size: 2.5rem; display: block; margin-bottom: var(--mkt-s-3); }
.mkt-retry {
  margin-top: var(--mkt-s-4);
  display: inline-block;
  background: var(--mkt-red); color: #fff;
  padding: var(--mkt-s-2) var(--mkt-s-5);
  border-radius: var(--mkt-r-pill);
  font-size: var(--mkt-f-base); cursor: pointer; border: none;
}
.mkt-cart-bar {
  position: fixed; left: 0; right: 0; bottom: calc(3.5rem + var(--mkt-safe-bottom, 0px));
  max-width: var(--mkt-page-max); margin: 0 auto;
  background: var(--mkt-card);
  padding: var(--mkt-s-3) var(--mkt-s-4);
  display: flex; align-items: center;
  box-shadow: 0 -2px 8px rgba(17, 24, 39, 0.08);
  z-index: var(--mkt-z-bar);
  padding-bottom: calc(var(--mkt-s-3) + var(--mkt-safe-bottom));
}
.mkt-cart-check-all { display: flex; align-items: center; gap: 6px; }
.mkt-cart-total { flex: 1; text-align: right; padding-right: var(--mkt-s-3); }
.mkt-cart-total b { color: var(--mkt-red); font-size: var(--mkt-f-xl); }
.mkt-cart-checkout {
  background: linear-gradient(135deg, var(--mkt-red), #FF7675);
  color: #fff; padding: var(--mkt-s-3) var(--mkt-s-5);
  border-radius: var(--mkt-r-pill);
  font-size: var(--mkt-f-md); font-weight: 600; cursor: pointer; border: none;
}

/* FIX-CHECK:20261010 购物车结算条上滑动画（对标美团小象） */
.mkt-cart-bar {
  animation: mktBarUp .25s ease-out;
}
@keyframes mktBarUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.mkt-cart-item {
  transition: opacity .22s ease, transform .22s ease;
}
.mkt-cart-item.v8-item-removing {
  opacity: 0;
  transform: translateX(40px);
}

/* FIX-CHECK:20261010 降价标签（宪法：促销橙 10% 透明底 + 纯橙字） */
.hema-price-cut {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--brand-sale-soft);
  color: var(--brand-sale);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ============================ 营养表（仅生鲜） ============================ */
.mkt-nutrition-table { width: 100%; border-collapse: collapse; font-size: var(--mkt-f-base); margin-top: var(--mkt-s-2); }
.mkt-nutrition-table th {
  background: var(--mkt-shade); padding: var(--mkt-s-2);
  text-align: left; font-weight: 600; color: var(--mkt-text-2);
  border-bottom: 2px solid var(--mkt-border);
}
.mkt-nutrition-table th:first-child { border-radius: var(--mkt-r-sm) 0 0 0; }
.mkt-nutrition-table th:last-child { border-radius: 0 var(--mkt-r-sm) 0 0; }
.mkt-nutrition-table td { padding: var(--mkt-s-2); border-bottom: 1px solid var(--mkt-border); }
.mkt-nutrition-table tr:last-child td { border-bottom: none; }
.mkt-nutrition-note { margin-top: var(--mkt-s-3); padding-top: var(--mkt-s-3); border-top: 1px dashed var(--mkt-border); font-size: var(--mkt-f-sm); color: var(--mkt-text-3); }

/* ============================ 悬浮购物车按钮 ============================ */
.mkt-fab-cart {
  position: fixed; right: var(--mkt-s-4); bottom: calc(72px + var(--mkt-safe-bottom));
  width: 3rem; height: 3rem; border-radius: var(--mkt-r-pill);
  background: var(--mkt-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; z-index: var(--mkt-z-fab);
  box-shadow: var(--mkt-shadow-lg);
  cursor: pointer; text-decoration: none;
}

/* ============================ 通用骨架/加载态（宪法：#F8FAFC 微光 Shimmer） ============================ */
.mkt-skeleton {
  background: linear-gradient(90deg, #F8FAFC 25%, #EEF2F6 37%, #F8FAFC 63%);
  background-size: 400% 100%;
  animation: mkt-shimmer 1.4s ease infinite;
  border-radius: var(--mkt-r-sm);
}
@keyframes mkt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* 大屏适配：平板/桌面保持移动版心，卡片列数增加 */
@media (min-width: 768px) {
  .mkt-grid2 { grid-template-columns: repeat(5, 1fr); gap: var(--mkt-s-4); }
  .mkt-card-img { font-size: 5rem; }
}
@media (min-width: 1024px) {
  .mkt-page { max-width: 1024px; }
  .mkt-grid2 { grid-template-columns: repeat(4, 1fr); }
}

/* 尊重无障碍：减少动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
 * 盒马风格门头（Hema Header）— V8 集市页专用
 * 浅蓝/白底、圆形品类图标横排、左侧分类竖栏、大留白商品流
 * ============================================================================= */

/* ---------- 顶层搜索栏（宪法：纯白底 + 天蓝描边/图标，悬浮天蓝微光） ---------- */
.hema-search-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--brand-card);
  padding: 10px 12px 8px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.10);
}
.hema-search-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-card);
  border-radius: 20px;
  height: 40px;
  padding: 0 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1.5px solid rgba(14, 165, 233, 0.35);
  cursor: text;
}
.hema-search-capsule i {
  color: var(--brand-trust);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.hema-search-capsule input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.875rem;
  color: #1F2329;
  min-width: 0;
}
.hema-search-capsule input::placeholder { color: #9AA0A6; }

/* ---------- 购物车入口（角标） ---------- */
/* FIX-CHECK:2026-09-27 购物车角标入口；2026-10-12 宪法化：天蓝描边 + 天蓝图标 */
.hema-cart-entry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--brand-card);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1.5px solid rgba(14, 165, 233, 0.35);
  cursor: pointer;
  flex-shrink: 0;
}
.hema-cart-entry i {
  color: var(--brand-trust);
  font-size: 1.25rem;
}
.hema-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: #E74C3C;
  color: #FFFFFF;
  border-radius: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ---------- 圆形品类图标横排（宪法：浅灰底 + 扁平统一 48px + 栅格 16px） ---------- */
.hema-cat-row {
  /* FIX-CHECK:2026-09-24 分类图标路由图：5列网格，不再横向滚动/截断 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 12px 12px 14px;
  background: var(--brand-bg);
}
.hema-cat-row::-webkit-scrollbar { display: none; }
.hema-cat-item-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* 宪法：扁平/半扁平图标容器 —— 浅灰底 #F8FAFC、圆角 16px、48×48px，主体色绿/蓝 */
.hema-cat-circle {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--brand-bg);
  border: 1px solid rgba(14, 165, 233, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: relative;
  transition: transform 0.15s;
}
.hema-cat-circle img { width: 100%; height: 100%; object-fit: contain; }
.hema-cat-circle .dot-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 16px;
  background: var(--brand-fresh);
  border: 1.5px solid var(--brand-card);
  display: none;
}
.hema-cat-item-row.active .dot-indicator { display: block; }
.hema-cat-item-row:active .hema-cat-circle { transform: scale(0.92); }
.hema-cat-row-label {
  font-size: 0.6875rem;
  color: #4A5568;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hema-cat-item-row.active .hema-cat-row-label { color: var(--brand-trust); font-weight: 600; }

/* ---------- 主布局：左分类栏 + 右商品流 ---------- */
.hema-layout {
  display: flex;
  gap: 0;
  background: #FFFFFF;
  min-height: 60vh;
}
.hema-sidebar {
  width: 88px;
  flex-shrink: 0;
  background: #F7FAFC;
  border-right: 1px solid #E8EEF4;
  overflow-y: auto;
  scrollbar-width: none;
}
.hema-sidebar::-webkit-scrollbar { display: none; }
.hema-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px;
  cursor: pointer;
  border-bottom: 1px solid #EDF2F7;
  text-decoration: none;
  color: #4A5568;
  transition: background 0.12s;
  min-height: 64px;
}
.hema-sidebar-item:hover { background: #EDF2F7; }
.hema-sidebar-item.active {
  background: #FFFFFF;
  color: #2E7D32;
  font-weight: 600;
  border-left: 3px solid #2E7D32;
  padding-left: 1px;
}
.hema-sidebar-item i { font-size: 1.1rem; }
.hema-sidebar-item span {
  font-size: 0.6875rem;
  text-align: center;
  line-height: 1.2;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hema-main {
  flex: 1;
  padding: 12px;
  background: #F5F6F7;
  overflow-y: auto;
}
/* FIX-CHECK: 2026-09-25 P1-002 mobile hide left sidebar */
@media (max-width: 768px) {
  .hema-sidebar { display: none; }
  .hema-layout { display: block; }
}
/* 宪法：猜你喜欢标题 —— 天蓝竖条 + 深色主文 */
.hema-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1F2329;
  margin: 12px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hema-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--brand-trust);
  border-radius: 2px;
}
.hema-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* FIX-CHECK:2026-09-26 盒马式二级分类网格：2列圆角卡片（图块+名称） */
.hema-subcat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.hema-subcat-card {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.12s;
}
.hema-subcat-card:active { transform: scale(0.97); }
.hema-subcat-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F2F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.hema-subcat-img img { width: 100%; height: 100%; object-fit: cover; }
.hema-subcat-label {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  color: #1F2329;
  padding: 8px 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hema-grid-item {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.15s;
}
.hema-grid-item:active { transform: scale(0.97); }
.hema-grid-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F7FAFC;
  overflow: hidden;
  position: relative;
}
.hema-grid-img img { width: 100%; height: 100%; object-fit: cover; }
.hema-grid-info { padding: 8px 8px 10px; }
/* 宪法：商品主标题 —— 14px 纯黑加粗，超出两行打点 */
.hema-grid-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1F2329;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  min-height: 2.7em;
}
/* 宪法：现价 = 促销橙 16px 加粗；划线价 = 12px 浅灰删除线 */
.hema-grid-price {
  color: var(--brand-sale);
  font-size: 1rem;
  font-weight: 700;
}
.hema-grid-price s {
  color: #9AA0A6;
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 4px;
  text-decoration: line-through;
}
.hema-grid-unit {
  font-size: 0.6875rem;
  color: #9AA0A6;
  margin-top: 2px;
}

/* ---------- FIX-CHECK:2026-09-26 盒马式楼层专区（2026-10-12 宪法化） ---------- */
.hema-floors { display: block; }
.hema-floor {
  background: var(--brand-card);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 10px 12px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hema-floor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
/* 宪法：分类主标题 = 天蓝（主色） */
.hema-floor-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-trust);
  display: flex;
  align-items: center;
  gap: 4px;
}
.hema-floor-more {
  font-size: 0.75rem;
  color: #8A9099;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.hema-floor-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.hema-floor-chips::-webkit-scrollbar { display: none; }
/* 宪法：子分类标签 —— 未选中浅灰，选中生鲜绿 */
.hema-floor-chip {
  flex-shrink: 0;
  background: var(--brand-bg);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: #4A5568;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.hema-floor-chip:active,
.hema-floor-chip.active { background: var(--brand-fresh); color: #FFFFFF; border-color: var(--brand-fresh); }
.hema-floor-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hema-floor-scroll::-webkit-scrollbar { display: none; }
.hema-floor-card {
  flex-shrink: 0;
  width: 104px;
  cursor: pointer;
}
.hema-floor-card-img {
  width: 104px;
  height: 104px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-bg);
  margin-bottom: 6px;
}
.hema-floor-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* 宪法：楼层卡名称 13px 加粗两行打点 */
.hema-floor-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1F2329;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.1em;
  margin-bottom: 3px;
}
/* 宪法：楼层卡现价 = 促销橙 14px 加粗 */
.hema-floor-card-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-sale);
}
.hema-floor-loading {
  font-size: 0.75rem;
  color: #9AA0A6;
  padding: 16px 0;
  width: 100%;
  text-align: center;
}
/* 宪法：楼层空状态 = 浅灰底圆角卡 + 天蓝重试按钮（拒绝生硬“加载失败”） */
.hema-floor-empty {
  font-size: 0.75rem;
  color: #6B7280;
  padding: 16px 0;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.v8-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-trust);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.v8-retry-btn:active { transform: scale(0.95); }
/* 食安溯源特殊样式 */
.hema-trace-banner {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.hema-trace-banner i { font-size: 1.5rem; color: #2E7D32; }
.hema-trace-banner .trace-text { flex: 1; }
.hema-trace-banner .trace-title { font-size: 0.8125rem; font-weight: 600; color: #1B5E20; }
.hema-trace-banner .trace-sub { font-size: 0.6875rem; color: #388E3C; margin-top: 2px; }

/* ==================================================================
   2026-10-09 集市首页 · 卡片信息密度对齐小象 + 楼层骨架屏
   ================================================================== */
.hema-card-spec,
.hema-grid-spec {
    font-size: 0.6875rem;
    color: var(--legacy-text-light, #9aa0a6);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hema-grid-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.625rem;
    color: var(--legacy-text-light, #9aa0a6);
    min-height: 14px;
}
.hema-grid-origin {
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.hema-grid-sales { flex: 1; text-align: right; }
.hema-card-sales {
    font-size: 0.625rem;
    color: var(--legacy-text-light, #9aa0a6);
    margin-top: 1px;
}
.hema-grid-price { position: relative; }
.hema-grid-add {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #2E7D32;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
}
.hema-grid-add:active { transform: scale(0.9); }

/* 楼层骨架屏 */
.hema-skeleton { pointer-events: none; }
.hema-skeleton .sk-img,
.hema-skeleton .sk-ln {
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ee 37%, #f0f2f5 63%);
    background-size: 400% 100%;
    animation: hemaSk 1.2s ease infinite;
    border-radius: 6px;
}
.hema-skeleton .sk-img { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 6px; }
.hema-skeleton .sk-ln { height: 10px; margin-bottom: 5px; }
.hema-skeleton .sk-ln.short { width: 55%; }
@keyframes hemaSk {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hema-skeleton .sk-img,
    .hema-skeleton .sk-ln { animation: none; }
}