/* 基础样式 */
.product-list-container {
    margin: 20px 0;
}

/* 电脑端表头样式 */
.prolist-header.desktop-only {
    display: flex !important;
    background-color: #003366;
    color: white;
    padding: 15px 10px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
}

    .prolist-header.desktop-only .col-proSer {
        flex: 0 0 3%;
        text-align: center;
    }

    /*.prolist-header.desktop-only .col-proPic {
        flex: 0 0 8%;
        text-align: center;
    }*/

    .prolist-header.desktop-only .col-proName {
        flex: 0 0 12%;
    }
/*
    .prolist-header.desktop-only .col-proModle {
        flex: 0 0 12%;
    }*/

    .prolist-header.desktop-only .col-proIntro {
        flex: 0 0 71%;
    }

    .prolist-header.desktop-only .col-proPrice {
        flex: 0 0 7%;
    }

    .prolist-header.desktop-only .col-proManu {
        flex: 0 0 7%;
    }

/* 产品项 - 电脑端布局 */
.productlist-item {
    display: flex;
    align-items: center;
    padding: 2px;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}

    .productlist-item:hover {
        background-color: #f8f9fa;
    }

    .productlist-item .col-proSer {
        flex: 0 0 3%;
        text-align: center;
    }

    /*.productlist-item .col-proPic {
        flex: 0 0 8%;
        text-align: center;
    }*/

    .productlist-item .col-proName {
        flex: 0 0 12%;
        padding: 0 2px;
        text-align: left;
    }

    /*.productlist-item .col-proModle {
        flex: 0 0 12%;
        padding: 0 2px;
        text-align: left;
    }*/

    .productlist-item .col-proIntro {
        flex: 0 0 71%;
        padding: 0 2px;
        text-align: left;
    }

    .productlist-item .col-proPrice {
        flex: 0 0 7%;
        color: #e74c3c;
        font-weight: bold;
        font-size: 16px;
        text-align: right;
    }

    .productlist-item .col-proManu {
        flex: 0 0 7%;
        text-align: center;
    }

.mobiletop-only {
    display: none !important;
}
/* 产品图片样式 */
.product-pic img, .col-proPic img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
}

    .product-pic img:hover, .col-proPic img:hover {
        transform: scale(1.05);
    }

/* 链接样式 */
.product-item a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .product-item a:hover {
        color: #2980b9;
        text-decoration: underline;
    }

.description-content {
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-header.mobile-only {
    display: none; /* 默认隐藏，在移动端显示 */
    background-color: #003366;
    color: white;
    padding: 15px 10px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
}

    .mobile-header.mobile-only .col-itemName {
        width: 100%;
        text-align: center;
    }
/* 移动端整体卡片样式 */
.mobile-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 移动端每一行的容器 */
.mobile-row {
    display: flex;
    width: 100%;
    align-items: flex-start; /* 关键：顶部对齐，防止中间内容把标签挤下去 */
    padding: 2px;
}

/* 移动端标签列样式 */
.mobile-pic-col {
    flex: 0 0 150px; /* 标签宽度固定为150px */
    padding: 5px;
}

    /* 图片样式 */
    .mobile-pic-col img {
        width: 150px;
        height: 150px;
        object-fit: contain;
        border-radius: 4px;
    }

/* 价格特殊样式 */
.mobile-content-col .price,
.mobile-content-col #lblPrice {
    color: #000;
    font-weight: bold;
}

@media (max-width: 768px) {
    /* 隐藏电脑端元素 */
    .desktop-only {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mobile-only {
        display: none !important;
    }

    .tablet-computer-only {
        display: block;
    }
    /* 移动端卡片容器 */
    .product-list-container {
        display: block;
    }

    /* 第1列：图片 */
    /*.product-pic.mobile-only {
        flex: 0 0 150px;
        width:150px;
        padding:5px;
        align-self: flex-start;
    }

        .product-pic.mobile-only img {
            width: 150px;
            height: 150px;
            object-fit:contain;
        }*/
    /* 第2列：内容 */
    .mobile-content-column {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mobile-label-col {
        flex: 0 0 45px;
        font-weight: bolder;
        font-size: 14px;
    }


    .mobile-content-col {
        flex: 1;
        font-size: 14px;
        text-align: left;
    }

    .mobile-name {
        font-weight: bold;
        color: #000;
        font-size: 16px;
        text-align: left;
    }

    .mobile-price {
        color: #000;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
    }

    .mobile-intro {
        color: #000;
        line-height: 1.4;
        display: -webkit-box;
        text-align: left;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 重写原有列在移动端的样式 */
    .col-proSer,
    .col-proPic,
    .col-proName,
    .col-proModle,
    .col-proIntro,
    .col-proPrice,
    .col-proManu {
        display: none !important;
    }
}

/* 电脑端样式 */
@media (min-width: 769px) {
    /* 隐藏移动端元素 */
    .mobile-only {
        display: none !important;
    }

    .tablet-computer-only {
        display: none !important;
        height: 0 !important;
        padding: 0;
        margin: 0;
    }

    .mobile-label-column,
    .mobile-content-column {
        display: none !important;
    }

    /* 显示电脑端元素 */
    .desktop-only {
        display: block !important;
    }

    .mobile-header.mobile-only {
        display: none !important;
    }
}

@media (max-width: 576px) {
    /* 隐藏电脑端元素 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* 2. 隐藏所有桌面端元素 */
    .desktop-only,
    .tablet-computer-only,
    .col-proSer,
    .col-proPic,
    .col-proName,
    .col-proModle,
    .col-proIntro,
    .col-proPrice,
    .col-proManu {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* 3. 显示移动端元素 */
    .mobile-only {
        display: block !important;
    }

    .mobile-header.mobile-only {
        display: block !important;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        padding: 15px 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    /* 4. 重置产品列表容器 */
    .product-list-container {
        display: block !important;
        width: 100%;
        padding: 10px;
    }

    /* 5. 重新设计卡片布局 - 图片在上，文字在下 */
    .mobile-card {
        display: block !important;
        position: relative;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* 6. 完全重构图片容器 - 确保没有白块 */
    .mobile-pic-col {
        display: block !important;
        position: relative;
        width: 100% !important;
        height: 180px !important; /* 固定高度，避免抖动 */
        min-height: 180px !important;
        max-height: 180px !important;
        background-color: #f8f9fa !important; /* 设置背景色，避免白块 */
        border-bottom: 1px solid #eee;
        margin: 0 !important;
        padding: 10px !important;
        overflow: hidden;
        text-align: center;
        line-height: 160px; /* 垂直居中 */
        z-index: 1;
    }

        .mobile-pic-col a {
            display: inline-block !important;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            text-align: center;
            text-decoration: none;
        }

        .mobile-pic-col img {
            display: inline-block !important;
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            vertical-align: middle;
            background-color: white; /* 确保图片有背景色 */
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

    /* 7. 关键修复：移除原来的水平布局结构 */
    .mobile-row {
        display: block !important; /* 改为块级，垂直排列 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 8. 关键修复：确保文字容器在图片下面 */
    .mobile-content-column {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        margin: 0 !important;
    }

        /* 9. 文字行样式 */
        .mobile-content-column .mobile-row {
            display: flex !important;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            margin-bottom: 8px !important;
            padding: 0 !important;
            width: 100%;
            min-width: 100%;
        }

    /* 10. 标签列 */
    .mobile-label-col {
        flex: 0 0 50px !important;
        font-weight: bold;
        font-size: 14px;
        color: #666;
        text-align: left;
        padding: 0 5px 0 0;
        margin: 0;
        line-height: 1.4;
    }

    /* 11. 内容列 */
    .mobile-content-col {
        flex: 1 !important;
        font-size: 14px;
        color: #333;
        text-align: left;
        padding: 0;
        margin: 0;
        line-height: 1.4;
        min-width: 0; /* 防止内容溢出 */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 12. 产品名称样式 */
    .mobile-name {
        font-weight: bold;
        color: #000;
        font-size: 16px;
        line-height: 1.3;
        text-decoration: none;
    }

        .mobile-name:hover {
            color: #0066cc;
            text-decoration: underline;
        }

    /* 13. 价格样式 */
    .mobile-price {
        color: #e4393c;
        font-weight: bold;
        font-size: 16px;
    }

    /* 14. 简介样式 */
    .mobile-intro {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    /* 15. 链接样式 */
    .mobile-content-col a {
        color: #333;
        text-decoration: none;
    }

        .mobile-content-col a:hover {
            color: #0066cc;
            text-decoration: underline;
        }

    /* 16. 确保没有浮动元素 */
    .mobile-pic-col,
    .mobile-content-column,
    .mobile-row {
        float: none !important;
        clear: both !important;
    }

    /* 17. 重置任何可能的影响 */
    .product-list-container > div,
    .product-list-container > div > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 空数据提示 */
.no-products {
    text-align: center;
    padding: 50px 20px;
    color: #7f8c8d;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

    .no-products i {
        font-size: 48px;
        margin-bottom: 15px;
        color: #bdc3c7;
    }

/* 加载动画 */
.loading {
    text-align: center;
    padding: 40px;
    color: #3498db;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}