/* Grainforge — catalog page: breadcrumb, filters, toolbar */

.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:18px 0 0}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--oxide)}
.crumb span{margin:0 8px;color:var(--rule)}

.page-head{border-bottom:3px solid var(--ink);padding:12px 0 18px;margin-bottom:26px}
.page-head h1{font-size:clamp(28px,4vw,46px);margin-bottom:8px}
.page-head p{color:var(--ink-2);max-width:70ch;margin:0}

.cat-layout{display:grid;grid-template-columns:246px 1fr;gap:34px;align-items:start}
aside.filters{border:2px solid var(--ink);background:var(--card);position:sticky;top:126px}
.fgroup{border-bottom:1px solid var(--rule-2);padding:16px 16px 15px}
.fgroup:last-child{border-bottom:0}
.fgroup h4{font-size:12px;letter-spacing:.18em;margin-bottom:12px}
.fgroup label{display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11.5px;color:var(--ink-2);cursor:pointer;padding:3px 0;letter-spacing:.03em}
.fgroup label:hover{color:var(--oxide)}
.fgroup input[type=checkbox],.fgroup input[type=radio]{accent-color:var(--oxide);
  width:14px;height:14px;margin:0}
.fgroup .cnt{margin-left:auto;color:var(--ink-3);font-size:10px}
.fscroll{max-height:238px;overflow-y:auto}
.fscroll::-webkit-scrollbar{width:6px}
.fscroll::-webkit-scrollbar-thumb{background:var(--rule)}
.frange{display:flex;gap:8px;align-items:center}
.frange input{width:100%;border:1px solid var(--rule);background:var(--paper);
  padding:7px 8px;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.fclear{width:100%;border:0;border-top:2px solid var(--ink);background:var(--ink);
  color:var(--paper);padding:11px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.fclear:hover{background:var(--oxide)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:22px;flex-wrap:wrap}
.toolbar .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.toolbar .n b{color:var(--ink)}
.sortsel{border:2px solid var(--ink);background:var(--card);color:var(--ink);
  padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{border:1px solid var(--ink);background:var(--card);font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;
  cursor:pointer;color:var(--ink)}
.chip:hover{background:var(--oxide);border-color:var(--oxide);color:#fff}
.chip::after{content:" ×";color:var(--oxide)}
.chip:hover::after{color:#fff}
.empty{border:2px dashed var(--rule);padding:56px 24px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.mobile-fbtn{display:none}

@media(max-width:960px){
  .cat-layout{grid-template-columns:1fr}
  aside.filters{position:static;display:none}
  aside.filters.open{display:block}
  .mobile-fbtn{display:inline-block}
}