/*
 * Category page template (Phase B2) — cross-category navigation tabs, subcategory chip
 * filters and the hero product-count badge. Search/filter field, product grid and card
 * styles are reused as-is from css/products-overview.css (.catalogue-filters,
 * .catalogue-grid, .catalogue-card, .results-count, .empty-state) — nothing here
 * duplicates those selectors.
 */

.category-hero-count{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:22px;
padding:8px 16px;
border:1px solid rgba(255,255,255,.35);
border-radius:999px;
color:#fff;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.4px
}

.category-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:18px var(--page-padding);
background:#fff;
border-bottom:1px solid var(--color-line)
}

.category-tab,
.category-tab-current{
padding:10px 16px;
border-radius:999px;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.3px
}

.category-tab{
background:var(--color-mist);
color:var(--color-muted)
}

.category-tab:hover{
background:#dfeae7
}

.category-tab-current{
background:var(--color-primary);
color:#fff
}

.subcategory-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:var(--space-4)
}

.subcategory-chip{
padding:10px 18px;
border:1px solid var(--color-line);
border-radius:999px;
background:#fff;
color:var(--color-text);
font:600 var(--text-xs) var(--font-sans)
}

.subcategory-chip:hover{
border-color:var(--color-teal-dark)
}

.subcategory-chip[aria-pressed="true"]{
background:var(--color-primary);
border-color:var(--color-primary);
color:#fff
}

.subcategory-chip:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}

@media(max-width:780px){
.category-tabs{
padding:16px 6vw
}
}