/* ===== catalog page ===== */
.sc-page { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.cat-hero { padding: 40px 0 8px; }
.cat-hero h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing:-.03em; }
.cat-hero p { font-size:18px; color:var(--ink-2); max-width:680px; margin-top:14px; }
.crumbs { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-3); padding:22px 0 10px; }
.crumbs a:hover{ color:var(--brand-700); } .crumbs .sep{ opacity:.5; }

.toolbar { display:flex; gap:14px; align-items:center; margin:30px 0 14px; flex-wrap:wrap; position:sticky; top:78px; z-index:20; background:var(--paper); padding:10px 0; }
.bigsearch { flex:1; min-width:260px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:12px 20px; box-shadow:var(--sh-sm); }
.bigsearch:focus-within{ border-color:var(--brand-500); }
.bigsearch svg{ width:19px;height:19px;color:var(--ink-3); }
.bigsearch input{ flex:1; border:none; outline:none; font-family:var(--font); font-size:16px; background:transparent; }
.count-pill{ font-size:14px; color:var(--ink-3); font-weight:600; white-space:nowrap; }

.filters{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px; }
.fbtn{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill); padding:8px 15px; font-size:14px; font-weight:600; color:var(--ink-2); transition:all .15s; }
.fbtn:hover{ border-color:var(--brand-300); color:var(--brand-700); }
.fbtn.on{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }

.cat-section{ margin-bottom:40px; }
.cat-section h2{ font-size:22px; display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-top:8px; }
.cat-section h2 .ci{ width:36px;height:36px;border-radius:10px;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;flex:none; }
.cat-section h2 .ci svg{ width:20px;height:20px; }
.cat-section h2 a.cat-title-link{ color:inherit; }
.cat-section h2 a.cat-title-link:hover{ color:var(--brand-700); }
.cat-section h2 .num{ font-size:13px; color:var(--ink-3); font-weight:600; background:var(--surface-2); border-radius:var(--r-pill); padding:4px 11px; }

.items{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.item{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:transform .14s,box-shadow .2s,border-color .14s; min-height:128px; }
.item:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-300); }
.item .it-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.item h3{ font-size:16.5px; line-height:1.3; }
.item p{ font-size:13.5px; color:var(--ink-3); }
.item .it-foot{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); }
.it-foot .freq{ display:inline-flex; align-items:center; gap:5px; }
.it-foot .freq i{ width:6px;height:6px;border-radius:50%; }
.freq.v i{ background:var(--brand-500);} .freq.s i{ background:var(--gold-500);} .freq.n i{ background:var(--line); }
.item .arrow{ margin-left:auto; color:var(--brand-600); opacity:0; transition:opacity .15s,transform .15s; }
.item:hover .arrow{ opacity:1; transform:translateX(2px); }
.empty{ text-align:center; padding:70px 0; color:var(--ink-3); display:none; }

@media (max-width:920px){ .items{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .items{ grid-template-columns:1fr; } .toolbar{ position:static; } }