/* ══ /brands — the brand index ═══════════════════════════════════════════════
   A plain alphabetical grid, deliberately. The homepage carries a ranked
   carousel for browsing; this page exists for looking a specific brand UP, and
   the two need different orders and different controls.

   Card treatment matches the homepage brand cards and the category discs:
   white, hairline ring, product image CONTAINED rather than cropped, multiply
   blend so a packshot's white background dissolves into the card. Three
   surfaces, one look.
   ═══════════════════════════════════════════════════════════════════════════ */

.br-wrap{
  max-width:1380px;
  margin:0 auto;
  padding:0 5% 88px;
}

/* ── A–Z jump rail ───────────────────────────────────────────────────────────
   Rendered only past CC_BRAND_INDEX_MIN brands. Below that it is a row of
   mostly-dead letters above a list you can already see in full. */
.br-az{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 34px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line, #E8ECF1);
}
.br-az a{
  min-width:34px;
  min-height:34px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill, 9999px);
  font-family:var(--body-font);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  color:var(--cos-700);
  background:#fff;
  box-shadow:inset 0 0 0 1px #E8ECF1;
  transition:background .16s, box-shadow .16s;
}
.br-az a:hover{ background:#F4F8FC; box-shadow:inset 0 0 0 1px #CFDCE9; }

.br-group{ margin-bottom:44px; }
.br-group:last-child{ margin-bottom:0; }
.br-letter{
  font-family:var(--heading-font);
  font-size:20px;
  font-weight:700;
  color:var(--club-900);
  margin:0 0 18px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line, #E8ECF1);
  /* Offset for the floating nav pill, so a jump-link lands below it rather
     than underneath it. */
  scroll-margin-top:96px;
}

.br-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:28px 20px;
}

.br-card{
  text-decoration:none;
  color:inherit;
  display:block;
}
.br-img{
  aspect-ratio:1 / 1;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1px #E8ECF1;
  box-sizing:border-box;
  padding:12%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s ease;
}
.br-card:hover .br-img{
  transform:translateY(-6px);
  box-shadow:inset 0 0 0 1px #DCE2EA, 0 18px 44px rgba(26,26,26,.13);
}
.br-card:focus-visible{ outline:none; }
.br-card:focus-visible .br-img{
  outline:2px solid var(--cos-700);
  outline-offset:4px;
}
.br-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:multiply;
}
.br-ph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--heading-font);
  font-size:2.6rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:#C9D2DC;
}
.br-name{
  margin-top:12px;
  text-align:center;
  font-family:var(--body-font);
  font-size:10px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--club-900);
  line-height:1.5;
}

@media (max-width:600px){
  .br-grid{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:22px 14px; }
  .br-letter{ font-size:18px; }
}

@media (prefers-reduced-motion:reduce){
  .br-img{ transition:none; }
  .br-card:hover .br-img{ transform:none; }
}