/* ============================================================
 * recommend.css — 公共推荐模块样式（首页 / 购物车 / 全部订单 共用）
 * 依赖：recommendProducts.js 生成的卡片结构
 * ============================================================ */
.home-rec-card {
    background: #fff;
    border-radius: 0.21rem;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}
.home-rec-card .hr-img {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    display: block;
    background: #f5f5f5;
    flex-shrink: 0;
}
.home-rec-card .hr-info {
    padding: 0.13rem 0.18rem 0 0.18rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.home-rec-card .hr-title {
    font-size: 0.31rem;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.08rem;
}
.home-rec-card .hr-spec {
    font-size: 0.29rem;
    color: #999;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.13rem;
}
.home-rec-card .hr-price {
    display: flex;
    align-items: baseline;
    font-size: 0.39rem;
    font-weight: 700;
    color: #f44336;
    margin-top: auto;
    padding: 0.24rem 0 0.29rem 0;
}
.home-rec-card .hr-price > * + * { margin-left: 4px; }
.home-recommend-section {
    padding: 0 0.31rem 2.09rem 0.31rem;
    background: #f5f5f5;
}
/* APP 内嵌 WebView（无底部导航）：2.09rem 是为 #bottom-nav 预留的底部间距，
   底部栏隐藏后直接裸露成大片空白，这里收敛为正常留白 */
html.no-bottom-nav .home-recommend-section,
body.no-bottom-nav .home-recommend-section {
    padding-bottom: 0.4rem;
}
.home-recommend-title {
    font-size: 0.37rem;
    font-weight: 400;
    color: #555;
    padding: 0.31rem 0 0.31rem 0;
    text-align: left;
}
#home-recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.21rem;
    row-gap: 0.21rem;
}
/* 宽屏 → 3列+ 矩阵对齐 */
@media (min-width: 641px) {
    #home-recommend-grid {
        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    }
}

/* ============================================================
 * 隐藏主滚动容器滚动条（iOS Safari / Firefox / Edge 全兼容）
 * 首页：#home-scroll-viewport；购物车/全部订单：#scroll-root
 * 注意：iOS Safari 上 ::-webkit-scrollbar 仅对 -webkit-overflow-scrolling:auto
 * 的容器生效（touch 是系统 overlay 滚动条，无法隐藏），故三页整页容器统一 auto。
 * ============================================================ */
#home-scroll-viewport,
#scroll-root {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / 旧 Edge */
}
#home-scroll-viewport::-webkit-scrollbar,
#scroll-root::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}