/* bw-all-products.css — extras on top of bw-category.css for the flat catalogue.
   Filter chip bar, per-category badge on cards, and default accent for .cat-all.
*/

/* Default brand-neutral accent for the all-products page (Innovation blue) until
   the user activates a filter, at which point JS swaps the body class. */
.cat-all { --cat-dark: #006c99; --cat-bright: #009CD9; --cat-light: #38bbef; }

/* FILTER BAR */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 auto 2.5rem;
    max-width: 920px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: white;
    color: var(--text-body);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}
.filter-chip:hover { border-color: var(--cat-bright); color: var(--cat-bright); }
.filter-chip.is-active {
    background: var(--cat-bright);
    color: white;
    border-color: var(--cat-bright);
}
.filter-chip .chip-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    line-height: 1;
}
.filter-chip.is-active .chip-count { background: rgba(255,255,255,0.25); }

/* CATEGORY BADGE on each card */
.cat-badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    color: white;
    line-height: 1.4;
}
.cat-badge-innovation { background: #009CD9; }
.cat-badge-shade      { background: #FDB827; color: #4a3500; }
.cat-badge-banners    { background: #EE3826; }
.cat-badge-flags      { background: #3BB54A; }
.cat-badge-display    { background: #7E3FB0; }

/* Empty-state line when a filter shows zero results (defensive) */
.no-results-msg {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
    font-size: 1rem;
}

/* Hidden products simply don't render in the grid flow */
.product-card[hidden] { display: none !important; }

/* Tighter cards on the flat list since there are 50 of them */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

@media (max-width: 600px) {
    .filter-bar { gap: 0.4rem; margin-bottom: 1.75rem; }
    .filter-chip { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
}