/* ============================================================
   supplier_shared/css/products.css — 供应商产品列表页专属样式（D 方向）
   依赖：../../css/variables.css, ../../css/supplier.css, ./common.css
   卡片/分页/面包屑由主站 .product-card / .pagination / .breadcrumb 组件提供。
   本文件只保留分类标签条 + 网格容器，其余旧卡片样式已删除。
   ============================================================ */

@layer pages {

/* ============================================================
   页面包裹层（上下留白；原依赖主站 /css/products.css，迁移后自带）
   ============================================================ */
.products-layout {
    padding: var(--space-xl) 0;
}

/* ============================================================
   分类横向标签条
   ============================================================ */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    background: var(--color-bg-white);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.category-tab {
    padding: 6px 20px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-gray);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: var(--transition-fast);
    border: 1px solid var(--color-border);
}

.category-tab:hover {
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

.category-tab.active {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

/* 折叠控件：checkbox 仅作状态载体(视觉隐藏)，toggle 按钮默认(桌面)不显示 */
.category-tabs__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.category-tabs__toggle { display: none; }

/* ============================================================
   5 列产品网格容器（卡片样式由主站 .product-card 组件提供）
   ============================================================ */
.product-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* ============================================================
   响应式断点
   ============================================================ */
@media (max-width: 1399px) {
    .product-grid-5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1199px) {
    .product-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .product-grid-5 { grid-template-columns: repeat(2, 1fr); }
    .category-tab   { padding: 5px 12px; font-size: var(--font-size-sm); }

    /* 分类标签手机端折叠为 ~2 行，避免 13 个分类爆成 7 行占满首屏 */
    .category-tabs {
        padding: var(--space-sm);
        max-height: 82px;                 /* 约 2 行 */
        overflow: hidden;
        margin-bottom: var(--space-sm);
        transition: max-height 0.25s ease;
    }
    .category-tabs__cb:checked ~ .category-tabs { max-height: 1000px; }  /* 展开 */

    /* Show all / Show less 切换按钮 */
    .category-tabs__toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 0 var(--space-md) 2px;
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        user-select: none;
    }
    .category-tabs__toggle::after { content: "Show all \25BE"; }         /* ▾ */
    .category-tabs__cb:checked ~ .category-tabs__toggle::after { content: "Show less \25B4"; }  /* ▴ */
}

} /* end @layer pages */