﻿/* ==========================================================================
   优采产品库列表页样式（Version/V2025/Provider/ProductList.aspx 专用）
   --------------------------------------------------------------------------
   版式参考老站 HealthyHouseList.aspx：
     筛选行 = 左侧灰底标签 + 中间 10 列选项 + 右侧「展开」
     已选条件 = 灰色小标签 + 红色「清除筛选」
     排序条 = 浅灰底通栏
     商品区 = 4 列 1px 边框卡片，图片居中，底部红色「去看看」按钮
   说明：
     1) 所有选择器统一挂在 .product-library 作用域下，
        避免影响同目录的 ProductListCompany.aspx（它仍用 list.css）。
     2) 本页不出现「品牌」筛选行，也不出现底部「品牌企业」广告图。
   ========================================================================== */

/* ---------- 容器 ---------- */
.product-library {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 48px;
    font-size: 14px;
    color: #222;
}

.product-library .library-clear::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

.product-library .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ---------- 搜索条 ----------
   搜索框已移进站点头部（Master/ProviderHeader.html + css/master/provider-header.css），
   页面内容区不再重复放一份，相关样式一并移除。 */

.product-library .library-publish {
    display: inline-block;
    margin-left: 16px;
    width: 110px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 26px;
    background: #ed3d35;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.product-library .library-publish:hover {
    color: #fff;
    opacity: .9;
}

/* ---------- 面包屑 + 已选条件 ---------- */
.product-library .urlbohsi {
    padding: 14px 0 4px;
    font-size: 12px;
    line-height: 22px;
}

.product-library .library-crumb {
    color: #909399;
}

.product-library .library-crumb em {
    font-style: normal;
    margin: 0 6px;
    color: #c8ccd4;
}

.product-library .library-crumb a {
    color: #909399;
    text-decoration: none;
}

.product-library .library-crumb a:hover {
    color: #e60012;
}

.product-library .cdde {
    display: inline-block;
    margin-left: 20px;
    color: #e60012;
    vertical-align: top;
}

.product-library .cdde .condition-item {
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 1px 10px;
    border: 1px solid #dad9d9;
    color: #5d5d5d;
    background: #fff;
    line-height: 20px;
}

.product-library .cdde .condition-item .delete-condition-item {
    display: inline-block;
    margin-left: 5px;
    color: #e60012;
    cursor: pointer;
}

.product-library .xktag {
    display: inline-block;
    padding: 1px 10px;
    border: 1px solid #dad9d9;
    color: #5d5d5d;
    line-height: 20px;
}

.product-library .xktagde {
    display: inline-block;
    padding: 1px 10px;
    margin-left: 6px;
    border: 1px solid #e60012;
    color: #e60012;
    cursor: pointer;
    line-height: 20px;
}

/* ---------- 筛选行（分类 / 使用场景） ---------- */
.product-library .checksbox {
    border-bottom: 1px solid #dad9d9;
}

.product-library .checksbox.checksbox-first {
    border-top: 1px solid #dad9d9;
    margin-top: 16px;
}

.product-library .checksbox-row {
    display: flex;
    align-items: stretch;
}

.product-library .checksbox-title {
    flex: 0 0 8%;
    width: 8%;
    background: #f3f3f3;
    color: #666e80;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    min-height: 80px;
}

.product-library .checksbox-body {
    flex: 1;
    width: 86%;
    padding-top: 15px;
    min-width: 0;
}

.product-library .checksbox-more {
    flex: 0 0 72px;
    width: 72px;
    padding-top: 28px;
    text-align: center;
}

.product-library .morese {
    display: inline-block;
    padding: 3px 18px 3px 10px;
    border: 1px solid #dad9d9;
    color: #666e80;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    line-height: 16px;
}

.product-library .morese::after {
    content: "﹀";
    position: absolute;
    right: 5px;
    top: 2px;
    transition: all ease 300ms;
}

.product-library .morese.morese-open::after {
    transform: rotate(180deg);
    top: 0;
}

/* 分类：大类一行（首屏只有这一行，10 列） */
.product-library .firstChildli {
    padding: 0 10px;
    margin: 0;
    overflow: hidden;
}

.product-library .firstChildli li {
    float: left;
    width: calc(100% / 10);
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #666e80;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-library .firstChildli li.hover {
    color: #fd482c;
    font-weight: bold;
}

/* 分类：小类区（点大类才出现，浅灰底块；未点大类时整个容器隐藏） */
.product-library .industry-child {
    background: #fafafa;
    margin: 4px 10px;
    padding: 11px 5px;
    overflow: hidden;
    font-size: 12px;
}

.product-library .industry-child .checklist {
    overflow: hidden;
    max-height: none;
}

.product-library .industry-child .checklist li {
    float: left;
    width: calc((100% - 10px * 9) / 10);
    margin: 0 10px 8px 0;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #666e80;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-library .industry-child .checklist li:nth-child(10n) {
    margin-right: 0;
}

.product-library .industry-child .checklist li.condition-item-selected {
    color: #e60012;
    font-weight: bold;
}

/* 选项网格：一行 10 个（使用场景用；默认只露一行，点「展开」看全部） */
.product-library .checklist {
    overflow: hidden;
    max-height: 22px;
    transition: all ease 200ms;
}

.product-library .checklist.checklist-open {
    max-height: 1000px;
}

.product-library .checklist li {
    float: left;
    width: calc((100% - 10px * 9) / 10);
    margin: 0 10px 10px 0;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #666e80;
    cursor: pointer;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-library .checklist li:nth-child(10n) {
    margin-right: 0;
}

.product-library .checklist li.condition-item-selected {
    color: #e60012;
    font-weight: bold;
}

.product-library .checklist li.condition-item {
    display: block;
    padding: 0;
    margin-left: 0;
}

/* 筛选行的正文区左右内缩（老站是挂在 ul 上而不是容器上） */
.product-library .checksbox-body > .condition-items {
    padding: 0 10px;
}

.product-library .industry-child .checklist li.condition-item {
    margin-left: 0;
}

/* 已选中的条件（服务端渲染后回填） */
.product-library .condition-item-selected {
    color: #e60012;
}

/* ---------- 排序条 ---------- */
.product-library .shx-toip {
    display: flex;
    align-items: center;
    height: 45px;
    line-height: 45px;
    margin-top: 25px;
    padding: 0 16px;
    background: #fafafa;
    color: #666e80;
    font-size: 13px;
}

.product-library .shx-toip .pxrank {
    margin-right: 24px;
    cursor: pointer;
}

.product-library .shx-toip .pxrank.ck {
    color: #e60012;
}

.product-library .shx-toip .shx-toip-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.product-library .redfonrr {
    color: #ff0036;
    font-weight: bold;
}

/* ---------- 商品网格 ---------- */
.product-library .goodsbox {
    margin-top: 20px;
    overflow: hidden;
}

.product-library .goods-item {
    float: left;
    width: calc((100% - 45px * 3) / 4);
    margin: 0 45px 20px 0;
    padding: 5px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    transition: box-shadow ease 200ms;
}

.product-library .goods-item:nth-child(4n) {
    margin-right: 0;
}

.product-library .goods-item:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.product-library .goods-item .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    overflow: hidden;
}

.product-library .goods-item .imgbox img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.product-library .goods-item .detie {
    height: 38px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666e80;
    font-size: 15px;
    text-align: center;
}

.product-library .goods-item .goods-company,
.product-library .goods-item .goods-model {
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    color: #909399;
}

.product-library .goods-item .btiboxdf {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.product-library .goods-item .tgtodebtn {
    display: inline-block;
    padding: 6px 20px;
    background: #ff0036;
    color: #fff;
}

.product-library .nodata {
    display: block;
    margin: 60px auto;
    text-align: center;
    color: #909399;
}

/* ---------- 分页 ---------- */
.product-library .product-pager {
    margin: 8px auto 32px;
}

.product-library .product-pager #pagerInfo {
    text-align: center;
    color: #666e80;
    font-size: 13px;
    line-height: 28px;
}

.product-library .product-pager .blue {
    color: #e60012;
    margin: 0 4px;
}

/* ---------- 窄屏兜底（后台运营页也可能在移动端打开） ---------- */
@media screen and (max-width: 1240px) {
    .product-library {
        width: auto;
        padding-left: 12px;
        padding-right: 12px;
    }
}
