/* Compact navigation and filters, existing Manrope / violet / light blue palette. */
.catalog-resource-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 4vw}
.catalog-resource-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid #9bc8ed;border-radius:8px;background:#fff;color:#201e38;font:600 16px/24px Manrope,sans-serif;text-decoration:none}
.catalog-resource-nav a[aria-current=page]{background:#edf7fd;border-color:#347da5}
.catalog-resource-nav a:focus-visible,.catalog-quick-sizes button:focus-visible,.materials-page .material-tools :is(input,select,button):focus-visible{outline:3px solid #226caa;outline-offset:3px}
.catalog-quick-sizes{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.catalog-quick-sizes>span{font:400 14px/20px Manrope,sans-serif;color:#4d596c}
.catalog-quick-sizes button{min-height:44px;padding:8px 12px;border:1px solid #9bc8ed;border-radius:8px;background:#fff;color:#201e38;font:600 14px/20px Manrope,sans-serif}
.catalog-quick-sizes button[aria-pressed=true]{background:#edf7fd;border-color:#347da5}
.catalog-reference-note{font:400 14px/20px Manrope,sans-serif;color:#4d596c;margin:12px 0 16px;max-width:68ch}
.material-shortcuts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 4vw 16px}.material-shortcuts a{display:inline-flex;align-items:center;min-height:44px;color:#175d8f;font:400 14px/20px Manrope,sans-serif;text-underline-offset:4px}
.material-tools{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:12px;align-items:end;margin:24px 0 12px}
.material-tools label{display:grid;gap:8px;min-width:0;font:600 14px/20px Manrope,sans-serif;letter-spacing:normal;text-transform:none;color:#201e38}
.material-tools :is(input,select){width:100%;min-height:48px;padding:8px 12px;border:1px solid #9bc8ed;border-radius:8px;background:#fff;color:#201e38;font:400 16px/24px Manrope,sans-serif;box-sizing:border-box}
.material-tools input::placeholder{color:#586579;opacity:1}.material-tools button{min-height:48px;padding:8px 12px;border:1px solid #9bc8ed;border-radius:8px;background:#fff;color:#201e38;font:600 14px/20px Manrope,sans-serif}
.material-tools button:disabled{opacity:.65;cursor:default}.material-count,.material-file-meta{font:400 14px/20px Manrope,sans-serif;color:#4d596c}.materials-page .material-file-meta{margin:0 0 8px}.material-empty{padding:24px;border:1px solid #b5d1e3;border-radius:8px;background:#fff;color:#201e38}.material-empty h3{font:600 20px/28px Manrope,sans-serif;margin:0 0 8px}.material-empty p{font:400 16px/24px Manrope,sans-serif}.material-document-link{margin-top:24px}
#material-grid>article[hidden],#material-tools[hidden],#material-empty[hidden],#catalog-quick-sizes[hidden]{display:none!important}
@media(max-width:620px){.catalog-resource-nav{margin:12px 24px}.catalog-resource-nav a{font-size:14px;line-height:20px}.material-shortcuts{margin:0 24px 12px;gap:4px 16px}.material-tools{grid-template-columns:minmax(0,1fr) auto}.material-tools>label:first-child{grid-column:1/-1}.catalog-quick-sizes{gap:8px}}

:is(.catalog-resource-nav a,.catalog-quick-sizes button,.material-tools button){transition:opacity 300ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover){:is(.catalog-resource-nav a,.catalog-quick-sizes button,.material-tools button):hover{background:#edf7fd}}
:is(.catalog-resource-nav a,.catalog-quick-sizes button,.material-tools button):active{opacity:.8}
@media(prefers-reduced-motion:reduce){:is(.catalog-resource-nav a,.catalog-quick-sizes button,.material-tools button){transition:none}}