/* ==============================================================
       Style A: 对应 Texture Library (原本的 Gallery 样式 -> 现给材质库)
       特点：白色背景，居中，悬停放大
       ============================================================== */
    .texture-section {
        background-color: #f5f5f5; /* 白色背景 */
        padding: 50px 20px;
        text-align: center;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    .texture-title {
        font-size: 28px;
        font-weight: bold;
        color: #0f403f;
        margin-bottom: 50px;
    }

    .texture-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
        gap: 20px; 
        max-width: 1300px;
        margin: 0 auto;
    }

    .texture-item {
        /* 5个项目，在PC端让它们稍微宽一点，或者自动分配 */
        flex: 1;
        min-width: 200px; 
        max-width: 230px; /* 限制最大宽度，防止图片过大 */
        text-align: center; 
        margin-bottom: 30px;
    }

    .texture-image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        transition: transform 0.3s ease; /* 悬停动效 */
    }

    .texture-image img:hover {
        transform: scale(1.05);
    }

    .texture-item-title {
        margin-top: 15px;
        font-size: 18px;
        font-weight: bold;
        color: #0f403f;
        margin-bottom: 10px;
    }
    
    .texture-description {
        font-size: 14px;
        line-height: 1.5;
        color: #666;
        padding: 0 5px; /* 给文字一点左右间距 */
    }

    .texture-btn-container {
        margin-top: 40px;
        width: 100%;
    }

    /* ==============================================================
       Style B: 对应 Product Gallery (原本的 B2 样式 -> 现给产品展示)
       特点：灰色背景，卡片感，左对齐或整齐排列
       ============================================================== */
    .product-section {
        background-color: #ffffff; /* 灰色背景 */
        padding: 40px 30px;
        text-align: center;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    .product-title {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 40px;
    }

    .product-container {
        display: flex;
        justify-content: center;
        gap: 15px;
        max-width: 1200px;
        margin: 0 auto;
        flex-wrap: wrap; /* 允许换行 */
    }

    .product-item {
        /* PC端一行3个或4个，根据容器宽度自适应 */
        flex: 0 0 calc(33.33% - 15px); 
        max-width: 380px; 
        background-color: transparent; 
        padding: 0;
        border-radius: 8px;
        text-align: center; /* 产品标题居中 */
        margin-bottom: 20px;
    }

    .product-image {
        margin-bottom: 15px;
    }

    .product-image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
    }

    .product-item-title {
        font-size: 16px;
        font-weight: bold;
        color: #0f403f;
        line-height: 1.4;
    }
    
    .product-item-title a {
        text-decoration: none;
        color: #0f403f;
    }

    .product-btn-container {
        margin-top: 30px;
        width: 100%;
    }

    /* =========================================
       通用按钮 (Common)
       ========================================= */
    .common-btn {
        display: inline-block;
        padding: 12px 30px;
        background-color: #2a494a;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        transition: background-color 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .common-btn:hover {
        background-color: #3e6d6e;
    }

    /* =========================================
       移动端适配
       ========================================= */
    @media (max-width: 768px) {
        /* 材质库 (Style A) 移动端：一行2个或1个 */
        .texture-container {
            gap: 15px;
        }
        .texture-item {
            flex: 0 0 calc(50% - 10px); /* 一行两个 */
            max-width: none;
        }

        /* 产品展示 (Style B) 移动端：垂直排列 */
        .product-container {
            flex-direction: column;
            gap: 30px;
            padding: 0 15px;
        }
        .product-item {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    
    @media (max-width: 480px) {
        /* 手机极小屏幕：全部单列 */
        .texture-item {
            flex: 0 0 100%;
        }
    }