/* Top brands page (brands.aspx): the brands Dexter marks "Top brands", A-Z, as logo tiles with the name underneath (6 across x about 25 rows for 150 brands). Loaded by brands.aspx.vb. */
.brands-page { padding: 1.25rem 0 2.5rem; }
.brands-page h1 { margin: 0 0 .35rem; font-size: 1.75rem; font-weight: 700; color: #101828; }
.brands-page__intro { margin: 0 0 1.5rem; max-width: 760px; color: #667085; line-height: 1.5; }

.brands-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 576px) { .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .brands-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.brands-grid li { margin: 0; }
.brands-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 100%; min-height: 112px; padding: .85rem .75rem .7rem; background: #fff; border: 1px solid #e4e7ec; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.brands-grid a:hover, .brands-grid a:focus-visible { border-color: #d0d5dd; box-shadow: 0 12px 28px rgba(16, 24, 40, .12); transform: translateY(-2px); }
.brands-grid__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
.brands-grid__logo img { display: block; max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.brands-grid a:hover .brands-grid__logo img, .brands-grid a:focus-visible .brands-grid__logo img { filter: none; opacity: 1; }
.brands-grid__name { font-size: .8rem; line-height: 1.25; color: #475467; text-align: center; overflow-wrap: anywhere; }
.brands-grid a:hover .brands-grid__name { color: #204d77; }
.brands-grid__textonly .brands-grid__name { font-size: 1rem; font-weight: 700; color: #344054; }

@media (prefers-reduced-motion: reduce) { .brands-grid a { transition: none; } .brands-grid a:hover, .brands-grid a:focus-visible { transform: none; } }