/* =============================================================
   列表页（list.html）紧凑化样式
   作用域隔离在 .list-compact 内，不污染 moban / 默认样式。
   复用的类：.product-grid-view / .single-product 等由 moban 提供。
   ============================================================= */

/* 1. 压掉 moban 的 80px 大间距 */
.list-compact .mt-80 { margin-top: 30px; }

/* 列表容器卡片化（替代原来的整行灰底） */
.list-compact .product-grid-view { padding: 16px; }

/* 2. 列表项：图左 + 内容右 的紧凑卡片 */
.hp-listitem {
    display: flex;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 12px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.hp-listitem:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    border-color: #ffd2ad;
}
.hp-listitem .li-img {
    width: 200px;
    height: 150px;
    flex: none;
    overflow: hidden;
    border-radius: 4px;
    background: #f3f4f6;
}
.hp-listitem .li-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-listitem .li-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.hp-listitem .li-title {
    font-size: 15px;
    margin: 0 0 8px;
}
.hp-listitem .li-title a { color: #333; }
.hp-listitem .li-title a:hover { color: #ff6a00; }

/* 标签 chips */
.hp-listitem .li-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.hp-listitem .li-chip {
    background: #fff3ea;
    color: #ff6a00;
    border: 1px solid #ffe0c7;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 18px;
}
.hp-listitem .li-chip-rec { background:#fff0f3; color:#e40046; border-color:#ffd2dc; }
.hp-listitem .li-chip-ok  { background:#eafaf1; color:#1a9e5b; border-color:#c8eed6; }
.hp-listitem .li-chip-time{ background:#f2f4f7; color:#888; border-color:#e6e9ee; }

/* 扩展字段（价格/面积等） */
.hp-listitem .li-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 8px;
    color: #666;
    font-size: 13px;
}
.hp-listitem .li-desc {
    color: #888;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
}
.hp-listitem .li-action { margin-top: auto; }
.hp-listitem .li-btn {
    display: inline-block;
    background: #ff6a00;
    color: #fff;
    padding: 7px 18px;
    border-radius: 3px;
    font-size: 14px;
}
.hp-listitem .li-btn:hover { background: #e96405; }

/* 3. 顶部提示条 */
.list-compact .shop-topbar-wrapper {
    background: #fff7e6;
    border: 1px solid #ffe2a8;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.list-compact .shop-topbar-wrapper .show-product,
.list-compact .shop-topbar-wrapper .toolbar-shorter .show-product {
    color: #8a6d1a;
    font-size: 13px;
    margin: 0;
}

/* 4. “查看信息”按钮统一橙色（覆盖 moban 默认蓝） */
.list-compact .pro-add-btn,
.list-compact .product-list-action > ul > li > a.pro-add-btn {
    background: #ff6a00 !important;
    border-bottom-color: #e96405 !important;
}
.list-compact .pro-add-btn:hover { background: #e96405 !important; }

/* 5. 分页 */
.list-compact .pagination-product { border-color: #eee; margin-top: 16px; }
.list-compact .page-list a {
    border: 1px solid #ddd;
    padding: 3px 8px;
    margin: 3px;
    color: #999;
    border-radius: 3px;
}
.list-compact .page-list a:hover,
.list-compact .page-list .current {
    border-color: #ff6a00;
    color: #ff6a00;
}
.list-compact .page-list .current {
    border: 1px solid #ff6a00;
    padding: 3px 8px;
    margin: 3px;
}

/* 6. 响应式：窄屏图在上、内容在下 */
@media (max-width: 768px) {
    .hp-listitem { flex-direction: column; }
    .hp-listitem .li-img { width: 100%; height: 180px; }
}