/*
 * Products Overview (Phase B1) — search/filter controls, the dynamic product grid and its
 * empty state. Category tiles reuse the existing .category-grid/.category-card patterns
 * from product-pages.css; this file only adds what is new to the overview page.
 */

/* Phase B3 fix: .catalogue-card{display:flex} and .catalogue-grid{display:grid} below
   share the browser default [hidden]{display:none} rule's specificity (0,1,0); as author
   rules loaded after the UA stylesheet they were winning the cascade, so filtered-out
   cards and the empty grid stayed visually displayed even though `hidden` was set on them
   (search/filter/subcategory results were computed correctly but never actually hidden on
   screen). This also covers the category-page template (B2), which reuses these same
   classes. Making the hidden state explicit here is what actually hides them. */
[hidden]{
display:none !important
}

.category-count{
display:block;
margin-top:8px;
color:#568d8d;
font:500 var(--text-xs) var(--font-mono);
letter-spacing:.4px
}

.discovery{
background:#fff
}

.catalogue-filters{
display:grid;
grid-template-columns:1.4fr 1fr 1fr auto;
align-items:end;
gap:16px;
margin-bottom:var(--space-4)
}

.field{
display:flex;
flex-direction:column;
gap:8px
}

.field label{
color:var(--color-muted);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.4px;
text-transform:uppercase
}

.filter-input,
.filter-select{
height:48px;
padding:0 16px;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-paper);
color:var(--color-text);
font:var(--text-base) var(--font-sans)
}

.filter-input:focus-visible,
.filter-select:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}

.clear-filters{
height:48px;
padding:0 4px;
border:0;
background:transparent;
color:var(--color-primary);
white-space:nowrap
}

.results-count{
margin-bottom:var(--space-3);
color:var(--color-muted);
font:500 var(--text-sm) var(--font-mono)
}

.catalogue-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
gap:14px
}

.catalogue-card{
display:flex;
flex-direction:column;
overflow:hidden;
background:#edf4f2;
border-radius:var(--radius-sm)
}

.catalogue-card-media{
display:flex;
align-items:center;
justify-content:center;
height:96px;
background:repeating-linear-gradient(135deg,#dcebe8,#dcebe8 10px,#d1e3df 10px,#d1e3df 20px)
}

.catalogue-card-media span{
padding:6px 14px;
border:1px solid rgba(15,47,47,.22);
border-radius:999px;
background:rgba(255,255,255,.7);
color:var(--color-primary);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:1px
}

.catalogue-card-body{
display:flex;
flex:1;
flex-direction:column;
padding:20px 22px 22px
}

.catalogue-card-meta{
margin-bottom:8px;
color:#568d8d;
font:500 var(--text-xs) var(--font-mono);
letter-spacing:.3px;
text-transform:uppercase
}

.catalogue-card h3{
font-size:17px;
letter-spacing:-.4px
}

.catalogue-card-reference{
margin-top:4px;
color:var(--color-muted);
font:var(--text-xs) var(--font-mono)
}

.catalogue-card-description{
flex:1;
margin:12px 0 18px;
color:var(--color-muted);
font-size:13px;
line-height:1.55
}

.catalogue-card-footer{
margin-top:auto
}

.catalogue-card-cta{
font-size:11px;
font-weight:800
}

.catalogue-card-cta-pending{
color:#75918e;
font-weight:600;
text-transform:none;
letter-spacing:0
}

.empty-state{
padding:60px var(--page-padding);
background:var(--color-mist);
border-radius:var(--radius-sm);
color:var(--color-muted);
text-align:center
}

@media(max-width:780px){
.catalogue-filters{
grid-template-columns:1fr
}
.clear-filters{
justify-self:start
}
.catalogue-grid{
grid-template-columns:1fr
}
}