/* ========== Products Page Additional Styles ========== */
/* Page Hero 扩展 */
.page-hero p {
    max-width:650px;
    margin-top:12px;
    opacity:0.9;
}

/* Products Listing Container */
.products-listing {
    padding:60px 0;
}
.products-inner {
    display:grid;
    grid-template-columns:280px 1fr;
    gap:32px;
}

/* Filter Sidebar */
.filter-sidebar {
    padding:24px;
    background:#f7f9fc;
    border-radius:6px;
    height:fit-content;
}
.filter-block {
    margin-bottom:28px;
}
.filter-block h4 {
    font-size:15px;
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:1px solid #e2e8f0;
}
.filter-list li {
    margin-bottom:8px;
}
.filter-list a {
    display:flex;
    justify-content:space-between;
    color:#333;
    font-size:14px;
}
.filter-list li.active a {
    color:var(--primary-blue);
    font-weight:600;
}
.checkbox-list li {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    font-size:14px;
}
.checkbox-list input {
    width:16px;
    height:16px;
}
.reset-filter {
    width:100%;
    justify-content:center;
    gap:8px;
}

/* Product Grid Area */
.product-grid-area {
    display:flex;
    flex-direction:column;
    gap:24px;
}
.product-top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.results-info {
    font-size:14px;
    color:var(--text-gray);
}
.sort-select {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
}

/* Products Grid */
.products-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.product-card {
    border:1px solid #eee;
    border-radius:6px;
    overflow:hidden;
    transition:0.25s ease;
}
.product-card:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.07);
    transform:translateY(-3px);
}
.product-img img {
    width:100%;
    height:200px;
    object-fit:cover;
}
.product-card h3 {
    font-size:16px;
    padding:14px 16px 4px;
}
.product-card p {
    font-size:13px;
    color:var(--text-gray);
    padding:0 16px 10px;
}
.view-details {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px 14px;
    font-size:13px;
    color:var(--primary-blue);
    font-weight:500;
}

/* Pagination */
.pagination {
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:16px;
}
.page-num, .page-arrow {
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    border:1px solid #ddd;
    font-size:14px;
}
.page-num.active {
    background:var(--primary-blue);
    color:#fff;
    border-color:var(--primary-blue);
}

/* Custom Solution CTA Block */
.custom-cta-block {
    background:#f7f9fc;
    border-radius:6px;
    padding:24px;
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:24px;
}
.cta-icon {
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--primary-blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}
.cta-text {
    flex:1;
}
.cta-text h4 {
    margin-bottom:6px;
    font-size:17px;
}
.cta-text p {
    font-size:14px;
    color:var(--text-gray);
}

/* ====== Responsive Products Page ====== */
@media(max-width:1100px) {
    .products-grid {
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:900px) {
    .products-inner {
        grid-template-columns:1fr;
    }
    .filter-sidebar {
        margin-bottom:24px;
    }
}
@media(max-width:640px) {
    .products-grid {
        grid-template-columns:1fr;
    }
    .custom-cta-block {
        flex-direction:column;
        text-align:center;
    }
    .product-top-bar {
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}



.breadcrumbs{
    font-size: 14px;
    color: #ffffff;
}

.page-hero-content H1{
    font-size: 26px;
    color: #fff;
}



