/* ═══════════════════════════════════════════════════════════════
   通用板块层 v1.0 · 跨页共用组件的唯一定义处
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中 1 行 link。共 2 步。
   机制：加载于所有既有样式之后，靠"同权重后者生效"覆盖旧值；严禁 !important。
        严禁出现任何字面色值（只能消费令牌；仅允许 rgba(0,0,0,.x) 遮罩/投影用途）。
   依赖：复用 skin-nearby.css 声明的 :root 令牌。
   ───────────────────────────────────────────────────────────────
   为什么单独成层（而不是写进某一页的皮肤）：
     商品卡板块与帖子/公示行板块是**跨页共用组件** —— 出现在
       设备页(#page-nearby) / 商品详情页(#page-product-detail) / 我的页(#page-profile)
       / 客服页(#page-messages 的商品面板与公示面板)
     四页共用同一套类名（.product-card / .product-grid / .order-list-item …）。
     塞进任一页的皮肤都会造成"同一组件多份定义"（当前 .product-card 已有 4 处定义）。
     独立成层后：① 一个组件只有一处定义；② 独立版本号；③ 可独立回滚；
     ④ 未来把"我的页收藏板块"迁过来时，只需给它加同样的容器类 + 删旧重复段即可。
   ───────────────────────────────────────────────────────────────
   配色约定（用户要求 4：通用板块的颜色随所在页面的主导色而定）：
     本层只消费"所属页面已声明的 --theme 族"与"板块内容色 --blk-* 族"，
     故同一份样式在不同页面自动呈现该页主导色。
     本轮只挂 #page-messages（客服页），其 --blk-goods / --blk-notice = 蒂芙尼蓝。
     若将来挂到我的页，只需在 #page-profile 内补 --blk-* 声明即可，规则一行不用改。
   ───────────────────────────────────────────────────────────────
   容器约定（类名挂在**滚动容器**上，不碰卡片元素本身，避免与 JS 生成的 DOM 冲突）：
     .blk-products → 商品卡网格板块（.product-grid / .product-card / .product-image …）
     .blk-posts    → 帖子/公示行板块（.order-list-item / .order-list-img …）
   ═══════════════════════════════════════════════════════════════ */

/* ───────────── §1 商品卡板块：去卡面 + 令牌化 ─────────────
   逐值对齐我的页「收藏商品」(#page-profile .ph-favorite-content …)，
   使"收藏商品"这同一语义在两个入口长得一样。 */

#page-messages .blk-products .product-grid{ gap:20px 16px; }
#page-messages .blk-products .product-card{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:flex; flex-direction:column; gap:9px;
  transition:transform 100ms ease-out;
}
#page-messages .blk-products .product-card:active{ transform:scale(.97); }
#page-messages .blk-products .product-image{
  width:100%; aspect-ratio:1/1; position:relative; overflow:hidden;
  border-radius:var(--r-md); background:var(--surface-strong);
}
#page-messages .blk-products .product-image img{
  width:100%; height:100%; object-fit:cover;
}
#page-messages .blk-products .product-badge{
  position:absolute; top:8px; left:8px; height:23px; padding:0 9px;
  display:flex; align-items:center;
  border-radius:var(--r-full);
  background:var(--blk-goods); color:var(--blk-goods-ink);   /* ← 2026-09-27 二改：原 var(--ink)，改为与官方徽章同色的绿字 */
  font-size:var(--t-tiny); font-weight:600; letter-spacing:.2px;
}
#page-messages .blk-products .product-info{
  padding:0; display:flex; flex-direction:column; gap:9px;
}
#page-messages .blk-products .product-title{
  font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#page-messages .blk-products .product-price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
}
#page-messages .blk-products .price{
  font-size:17px; font-weight:700; color:var(--blk-goods-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.2px; line-height:normal;
}
#page-messages .blk-products .price-symbol{
  font-size:var(--t-micro); font-weight:600; margin-right:1px;
}
#page-messages .blk-products .meta-text{
  font-size:var(--t-tiny); color:var(--muted-soft); white-space:nowrap;
}

/* ───────────── §2 帖子/公示行板块：去卡面 + 发丝线 + 令牌化 ───────────── */

#page-messages .blk-posts .order-list-item{
  background:none;
  padding:16px 0;
  border-bottom:1px solid var(--hairline-soft);
}
#page-messages .blk-posts .order-list-item:last-child{ border-bottom:none; }
#page-messages .blk-posts .order-list-item:active{ background:var(--surface-soft); }
#page-messages .blk-posts .order-list-img{
  width:56px; height:56px; flex-shrink:0;
  border-radius:var(--r-md); background:var(--surface-strong);
  margin-right:12px; overflow:hidden;
}
#page-messages .blk-posts .order-list-img img{
  width:100%; height:100%; object-fit:cover;
}
#page-messages .blk-posts .order-list-info{ flex:1; min-width:0; overflow:hidden; }
#page-messages .blk-posts .order-list-title{
  font-size:var(--t-body); font-weight:600; color:var(--ink);
}
#page-messages .blk-posts .order-list-body{
  font-size:var(--t-caption); color:var(--body); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* 状态徽章的形状与配色统一托管在 skin-messages.css §12（因为 ongoing/ended 类名由 JS 生成，
   且徽章同时出现在面板行与聊天卡片两处），此处不重复声明，避免两处漂移。 */