/* ==========================================================================
   BRAND WALL v14 — logo above name, category tabs, show-all toggle
   Replaces the old .brand-card text-abbreviation tiles on brands.html.
   ========================================================================== */

.bw-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--line);
}
.bw-tabs{display:flex;gap:6px;flex-wrap:wrap}
.bw-tab{
  border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;transition:.15s;font-family:inherit;
}
.bw-tab:hover{border-color:var(--navy-500);color:var(--navy-700)}
.bw-tab.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.bw-tab em{
  font-style:normal;margin-left:6px;font-size:11px;font-weight:700;
  opacity:.55;
}
.bw-tab.on em{opacity:.8}

.bw-search{
  margin-left:auto;border:1px solid var(--line);border-radius:6px;
  height:35px;padding:0 12px;font-size:12.5px;outline:none;min-width:210px;
  font-family:inherit;color:var(--ink-1);
}
.bw-search:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(15,76,129,.08)}

/* ---- grid: 10 per row desktop, 4 tablet, 3 phone ---- */
.bw-grid{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:10px;
}
.bw-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:8px;padding:13px 8px 11px;background:#fff;
  border:1px solid var(--line);border-radius:8px;
  text-decoration:none;text-align:center;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.bw-tile:hover{
  border-color:var(--navy-500);box-shadow:0 3px 12px rgba(15,40,70,.10);
  transform:translateY(-2px);
}
.bw-logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:44px;flex:none;
}
.bw-logo img{
  max-width:92%;max-height:44px;width:auto;height:auto;
  object-fit:contain;display:block;
}
.bw-nm{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;width:100%;font-size:10.5px;font-weight:700;color:#4a5665;
  line-height:1.22;letter-spacing:-.05px;overflow-wrap:anywhere;
  transition:color .15s;
}
.bw-tile:hover .bw-nm{color:var(--navy-700)}

/* hidden until "show all" */
.bw-tile[hidden]{display:none}

.bw-foot{
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:22px;
}
.bw-more{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--navy-500);background:#fff;color:var(--navy-700);
  border-radius:6px;padding:10px 20px;font-size:13px;font-weight:800;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.bw-more:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.bw-shown{font-size:12px;color:var(--ink-4);font-weight:600}

.bw-empty{
  grid-column:1/-1;padding:40px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:8px;background:#fafbfc;
}
.bw-empty b{display:block;font-size:14px;margin-bottom:6px;color:var(--ink-1)}
.bw-empty span{font-size:12.5px;color:var(--ink-4)}

@media (max-width:1180px){
  .bw-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (max-width:960px){
  .bw-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bw-search{margin-left:0;width:100%;min-width:0}
}
@media (max-width:760px){
  .bw-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .bw-logo{height:38px}
  .bw-logo img{max-height:38px}
  .bw-tile{padding:10px 6px 9px;gap:6px}
  .bw-nm{font-size:9.5px}
  .bw-tab{padding:6px 11px;font-size:11.5px}
}
@media (max-width:430px){
  .bw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bw-logo{height:34px}
  .bw-logo img{max-height:34px}
  .bw-nm{font-size:9px}
}