/* ============================================================
   产品列表 / 分类页 — 小米商城风格
   简洁、大气、好筛选：左分类侧栏 + 排序工具条 + 商品网格
   依赖 common.css 的设计令牌与通用类（.mi-wrap/.breadcrumb/.btn/.empty-state/.toast）
   本文件同时承载 search.liquid / compare.liquid 复用到的 .products-page / .page-header
   ============================================================ */

/* ---------- 页面容器 ---------- */
.products-page { padding-top: 0; }
/* layout 已提供 .container（1226 定宽）：宽屏由 .mi-wrap 补左右内边距，
   ≤1260px 时 .container 自带内边距，这里归零避免双重内边距 */
@media (max-width: 1260px) {
    .products-page > .mi-wrap { padding-left: 0; padding-right: 0; }
}

/* 通用页头（search.liquid / compare.liquid 复用） */
.page-header { margin-bottom: 16px; }
.page-header h1 { font-size: 22px; font-weight: 600; color: var(--text-strong); letter-spacing: .3px; }

/* ---------- 布局：侧栏 + 主区 ---------- */
.mi-plist-layout {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
/* 网格子项默认 min-width:auto，会被内部横向滚动内容撑宽导致整页溢出，显式归零 */
.mi-plist-layout > .mi-cat,
.mi-plist-layout > .mi-plist-main { min-width: 0; }

/* ---------- 分类侧栏 ---------- */
.mi-cat-box {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px 0;
    box-shadow: var(--shadow-s);
    position: sticky;
    top: calc(var(--header-h) + 12px);
    max-width: 100%;
}
.mi-cat-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    padding: 0 20px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-2);
}
.mi-cat-list { padding: 0 10px; }
.mi-cat-item { list-style: none; }
.mi-cat-list li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text);
    border-radius: var(--radius-s);
    position: relative;
    transition: background var(--fast), color var(--fast);
}
.mi-cat-link:hover { background: var(--brand-light); color: var(--brand); }
.mi-cat-link.active {
    color: var(--brand);
    font-weight: 600;
    background: var(--brand-light);
}
/* 激活项左侧橙色竖条 */
.mi-cat-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand);
}
.mi-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-cat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    background: var(--bg);
    border-radius: 999px;
    padding: 1px 8px;
}
.mi-cat-link.active .mi-cat-count { background: #fff; color: var(--brand); }

/* 子层级缩进 */
.mi-cat-children { padding-left: 0; }
.mi-cat-children--2 li > a { padding-left: 26px; font-size: 13px; }
.mi-cat-children--3 li > a { padding-left: 40px; font-size: 13px; color: var(--text-2); }
.mi-cat-children--3 li > a.active { color: var(--brand); }

/* ---------- 工具条 ---------- */
.mi-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-s);
}
.mi-sort { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mi-sort-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
    transition: color var(--fast), background var(--fast);
}
.mi-sort-item:hover { color: var(--brand); background: var(--bg); }
.mi-sort-item.active { color: #fff; background: var(--brand); font-weight: 600; }
.mi-sort-item.active:hover { color: #fff; background: var(--brand-hover); }

/* 价格升降箭头（纯 CSS 三角） */
.mi-sort-arrows { display: inline-flex; flex-direction: column; gap: 2px; }
.mi-sort-arrows i {
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.mi-sort-arrows .ar-up { border-bottom: 5px solid var(--text-3); }
.mi-sort-arrows .ar-down { border-top: 5px solid var(--text-3); }
.mi-sort-item.active .mi-sort-arrows .ar-up { border-bottom-color: rgba(255, 255, 255, .5); }
.mi-sort-item.active .mi-sort-arrows .ar-down { border-top-color: rgba(255, 255, 255, .5); }
.mi-sort-item.active.on-asc .ar-up { border-bottom-color: #fff; }
.mi-sort-item.active.on-desc .ar-down { border-top-color: #fff; }

.mi-result { font-size: 13px; color: var(--text-2); margin-left: auto; }
.mi-result strong { color: var(--brand); }

.mi-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
    transition: border-color var(--fast), background var(--fast);
}
.mi-search:focus-within { border-color: var(--brand); background: var(--card); }
.mi-search input {
    border: none;
    outline: none;
    background: transparent;
    height: 36px;
    padding: 0 14px;
    width: 190px;
    font-size: 13px;
    color: var(--text);
}
.mi-search button {
    border: none;
    background: transparent;
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--fast);
}
.mi-search button:hover { color: var(--brand); }

/* ---------- 商品网格 ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.product-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--fast), transform var(--fast);
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

/* 新版：缩略图（正方形） */
.product-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--card);
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform var(--mid);
}
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-thumb-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d5d5d5;
    background: #fafafa;
}

.product-body { padding: 2px 16px 16px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.product-name, .product-card h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-strong);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-name a, .product-card h3 a { color: var(--text-strong); }
.product-name a:hover, .product-card h3 a:hover { color: var(--brand); }

.product-card .description {
    font-size: 12px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
    min-height: 18px;
}

.product-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}
.product-card .price {
    font-size: 17px;
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
}
.product-card .price::first-letter { font-size: 13px; font-weight: 600; }

/* 旧版卡片兼容（relatedproducts 等扁平结构，用 padding 内缩） */
.product-card > h3, .product-card > .description, .product-card > .price, .product-card > .meta {
    padding-left: 16px;
    padding-right: 16px;
}
.product-card > h3 { padding-top: 16px; }
.product-card > .meta {
    font-size: 12px;
    color: var(--text-3);
    padding-bottom: 14px;
}
.product-card > .meta .category {
    background: var(--bg);
    padding: 2px 10px;
    border-radius: 999px;
}

/* 对比按钮：桌面端 hover 显现，移动端常显 */
.btn-compare-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-2);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fast), color var(--fast), border-color var(--fast), background var(--fast);
}
.product-card:hover .btn-compare-card,
.product-card:focus-within .btn-compare-card { opacity: 1; pointer-events: auto; }
.btn-compare-card:hover { border-color: var(--brand); color: var(--brand); }
.btn-compare-card.added { border-color: var(--brand); color: #fff; background: var(--brand); }
.compare-btn-text { line-height: 1; }

/* ---------- 空状态（白卡承载） ---------- */
.product-grid .empty-state {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
}

/* ---------- 对比浮动球 ---------- */
.compare-float {
    position: fixed;
    right: 24px;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-hover);
    transition: transform var(--fast), background var(--fast);
}
.compare-float:hover { transform: scale(1.08); background: var(--brand-hover); color: #fff; }
.compare-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 侧栏折叠为横向滚动分类 chips + 工具条换行 */
@media (max-width: 900px) {
    .mi-plist-layout { grid-template-columns: 1fr; }
    .mi-cat-box {
        position: sticky;
        top: var(--header-h);
        z-index: 20;
        padding: 8px 0;
        overflow: hidden;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .mi-cat-title { display: none; }
    .mi-cat-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mi-cat-list::-webkit-scrollbar { display: none; }
    .mi-cat-item { flex: 0 0 auto; }
    .mi-cat-children { display: none; }
    .mi-cat-list li > a {
        white-space: nowrap;
        min-height: 40px;
        padding: 9px 16px;
        background: var(--bg);
    }
    .mi-cat-link.active { background: var(--brand); color: #fff; }
    .mi-cat-link.active::before { display: none; }
    .mi-cat-link.active .mi-cat-count { background: rgba(255, 255, 255, .25); color: #fff; }
    .mi-cat-count { display: none; }

    .mi-toolbar { padding: 12px; gap: 10px; }
    .mi-search { order: 1; flex: 1 1 100%; }
    .mi-search input { width: 100%; flex: 1; min-width: 0; height: 40px; }
    .mi-search button { width: 44px; height: 40px; }
    .mi-result { order: 2; margin-left: 0; flex: 1 1 auto; }
    .mi-sort {
        order: 3;
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mi-sort::-webkit-scrollbar { display: none; }
    .mi-sort-item { flex: 0 0 auto; min-height: 40px; padding: 9px 16px; font-size: 14px; }
}

@media (max-width: 768px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-body { padding: 2px 10px 12px; }
    .product-thumb img { padding: 10px; }
    .product-name, .product-card h3 { font-size: 13px; }
    .product-card .price { font-size: 16px; }
    /* 移动端对比按钮常显，并加大触摸目标 */
    .btn-compare-card { opacity: 1; pointer-events: auto; height: 36px; padding: 0 12px; }
}

@media (max-width: 400px) {
    .btn-compare-card { padding: 0 9px; gap: 3px; }
    .compare-float { right: 14px; }
}

/* 触屏无 hover：去掉上浮卡顿并常显对比按钮 */
@media (hover: none) {
    .product-card:hover { transform: none; box-shadow: var(--shadow-s); }
    .product-card:active { transform: scale(.985); }
    .btn-compare-card { opacity: 1; pointer-events: auto; }
}