.cat-hero {padding: 40px 0;}.cat-hero h1 { font-size: 2rem; margin: 0 0 8px; }.cat-hero .meta { color: #6b7280; font-size: .95rem; }.cat-toolbar {display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;flex-wrap: wrap;}.cat-toolbar .left { display: flex; gap: 10px; align-items: center; }.pill { padding: 12px 30px; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 1rem; }.pill.active { background: #000; color: #fff; border-color: #000; }.pill-all {background-color: #000;color: #fff;transition: background-color 0.3s ease;}.pill-all:hover {background-color: #72b7e4;}.sort {border: 1px solid #e5e7eb; border-radius: 2rem; padding: 10px 30px; background: #fff;font-size: 1rem;font-weight: 600;}.cat-grid {margin: 30px 0 250px 0;display: grid; gap: 20px;grid-template-columns: repeat(4, minmax(0, 1fr));}@media (max-width: 1024px){ .cat-grid{ grid-template-columns: repeat(3, 1fr);} }@media (max-width: 768px){ .cat-grid{ grid-template-columns: repeat(2, 1fr);} }@media (max-width: 480px){ .cat-grid{ grid-template-columns: 1fr;} }.empty {max-width: 1200px; margin: 40px auto; padding: 0 20px; color:#6b7280;}@media (max-width: 600px) {.cat-hero h1 { font-size: 1.6rem; }.cat-hero .meta {font-size: .8rem; }.pill { padding: 8px 30px;font-size: .9rem; }.sort {padding: 8px 30px; font-size: .8rem; } .cat-grid {margin: 10px 0 60px 0;}}