/* product-center.css —— 由模板内联样式外置，15 语种共用 */

        .filter-bar {

            background: #fff;

            border-bottom: 1px solid var(--color-gray-100);

            padding: 10px 0;

            position: sticky;

            top: var(--header-height);

            z-index: 100;

            box-shadow: 0 2px 8px rgba(0,0,0,0.04);

        }

        .filter-bar .container {

            display: flex;

            flex-wrap: wrap;

            gap: 16px;

            align-items: center;

        }

        .filter-group {

            display: flex;

            flex-direction: column;

            gap: 6px;

            min-width: 180px;

            flex: 1;

        }

        .filter-group label {

            font-size: 12px;

            font-weight: 600;

            color: var(--color-gray-500);

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }

        .filter-group select {

            padding: 10px 14px;

            border: 1px solid var(--color-gray-200);

            border-radius: 8px;

            font-size: 14px;

            background: #fff;

            color: var(--color-gray-800);

            cursor: pointer;

            transition: all 0.2s;

            appearance: none;

            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

            background-repeat: no-repeat;

            background-position: right 12px center;

            padding-right: 36px;

        }

        .filter-group select:hover {

            border-color: var(--color-primary);

        }

        .filter-group select:focus {

            outline: none;

            border-color: var(--color-primary);

            box-shadow: 0 0 0 3px rgba(15,47,92,0.08);

        }

        .product-grid {

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            gap: 20px;

            padding: 40px 0;

        }

        @media (max-width: 1199px) {

            .product-grid { grid-template-columns: repeat(4, 1fr); }

        }

        @media (max-width: 1024px) {

            .product-grid { grid-template-columns: repeat(3, 1fr); }

        }

        @media (max-width: 768px) {

            .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

            .filter-bar .container { flex-direction: column; align-items: stretch; }

            .filter-group { min-width: auto; }

        }

        @media (max-width: 480px) {

            .product-grid { grid-template-columns: 1fr; }

        }

        .product-card {

            display: block;

            text-decoration: none;

            color: inherit;

            background: #fff;

            border-radius: 12px;

            overflow: hidden;

            border: 1px solid var(--color-gray-100);

            transition: all 0.3s ease;

        }

        .product-card:hover {

            transform: translateY(-4px);

            box-shadow: 0 12px 24px rgba(0,0,0,0.08);

        }

        .product-card-img {

            aspect-ratio: 1;

            background: #f8f9fa;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .product-card-img img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.4s ease;

        }

        .product-card:hover .product-card-img img {

            transform: scale(1.05);

        }

        .product-card-body {

            padding: 16px;

        }

        .product-card-title {

            font-size: 15px;

            font-weight: 600;

            color: var(--color-gray-900);

            line-height: 1.4;

            margin-bottom: 8px;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .product-card-tags {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

        }

        .product-card-tag {

            font-size: 11px;

            padding: 3px 8px;

            border-radius: 4px;

            background: var(--color-gray-50);

            color: var(--color-gray-500);

            font-weight: 500;

        }

        .result-count {

            padding: 20px 0 0;

            font-size: 14px;

            color: var(--color-gray-500);

        }

        .result-count strong {

            color: var(--color-gray-900);

            font-weight: 700;

        }

        .empty-state {

            text-align: center;

            padding: 80px 20px;

            color: var(--color-gray-400);

        }

        .empty-state svg {

            margin-bottom: 16px;

            opacity: 0.5;

        }

        .empty-state h3 {

            font-size: 18px;

            color: var(--color-gray-600);

            margin-bottom: 8px;

        }

/* ===== [STYLEATTR-FALLBACK-BEGIN] 由 _tools/_t_styleattr_responsive.js 生成，勿手改 =====
   原机制：protolabs-style.css 用 [style*="…"] 命中行内样式串做移动端降级；
   这些元素的内联样式外置后属性选择器不再命中，移动端会退回桌面尺寸。
   下面按类名重绘同样的降级，声明与 protolabs 逐字一致（含 !important）。 ===== */

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .filter-bar {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ===== [STYLEATTR-FALLBACK-END] ===== */