.brand-directory { max-width: 1200px; margin: auto; padding: 4rem 5vw; }
.brand-directory h1 { margin: 0 0 .5rem; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 2rem 0; }
.brand-grid a { display: grid; height: 100%; box-sizing: border-box; grid-template-rows: 90px auto; gap: .75rem; align-items: center; text-align: center; padding: 1rem; color: #171717; background: #fff; border: 1px solid #ccc; border-radius: .35rem; text-decoration: none; }
.brand-grid a:hover, .brand-grid a:focus-visible { border-color: currentColor; text-decoration: underline; }
.brand-grid img { display: block; width: 100%; height: 90px; object-fit: contain; }
.brand-grid span { overflow-wrap: anywhere; font-weight: 600; }
.brand-pagination { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.brand-pagination > * { padding: .65rem .85rem; border: 1px solid currentColor; border-radius: .25rem; }
.brand-pagination [aria-current] { color: #fff; background: #222; }
.brand-page-size { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.brand-page-size a, .brand-page-size [aria-current] { padding: .4rem .75rem; border: 1px solid currentColor; border-radius: .25rem; }
.brand-page-size [aria-current] { color: #fff; background: #222; }

.brand-page-size { justify-content: center; margin-bottom: 1rem; }
.brand-directory [hidden] { display: none !important; }
.brand-search { margin: 1.5rem 0; }
.brand-search form label, .brand-inquiry { display: grid; gap: .5rem; }
.brand-search form > div, .brand-contact-options { display: flex; flex-wrap: wrap; gap: .75rem; }
.brand-search input, .brand-search textarea { font: inherit; color: #171717; background: #fff; padding: .6rem; border: 1px solid #777; border-radius: .25rem; box-sizing: border-box; }
.brand-search input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.brand-search button, .brand-directory > button { font: inherit; color: #fff; background: #222; padding: .6rem 1rem; border: 1px solid #222; border-radius: .25rem; cursor: pointer; }
.brand-no-results details { margin-top: 1rem; }
.brand-no-results summary { cursor: pointer; }
.brand-inquiry { max-width: 35rem; margin-top: .75rem; }
.brand-inquiry button { justify-self: start; }