/* A–Z Brand Index – Cosmetic layout */
.azbi-page {
  --azbi-bg1: #fdf2f8;
  --azbi-bg2: #eff6ff;
  --azbi-bg3: #ecfeff;
  --azbi-ink: #0f172a;
  --azbi-muted: #64748b;
  --azbi-card: rgba(255,255,255,0.78);
  --azbi-border: rgba(15,23,42,0.10);
  --azbi-shadow: 0 10px 30px rgba(15,23,42,0.10);
  --azbi-radius: 22px;
  padding: 18px 0 40px;
}

.azbi-hero {
  position: relative;
  border-radius: var(--azbi-radius);
  background: radial-gradient(900px 400px at 10% 10%, var(--azbi-bg1), transparent 65%),
              radial-gradient(900px 400px at 90% 0%, var(--azbi-bg2), transparent 60%),
              radial-gradient(900px 500px at 30% 110%, var(--azbi-bg3), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border: 1px solid var(--azbi-border);
  box-shadow: var(--azbi-shadow);
  overflow: hidden;
}

.azbi-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(18px 18px at 15% 25%, rgba(236,72,153,0.18), transparent 70%),
    radial-gradient(24px 24px at 80% 30%, rgba(59,130,246,0.18), transparent 70%),
    radial-gradient(22px 22px at 55% 85%, rgba(34,211,238,0.18), transparent 70%);
  pointer-events:none;
  filter: blur(0.2px);
}

.azbi-hero__inner{
  position: relative;
  padding: 26px 22px;
}

.azbi-title{
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--azbi-ink);
  margin: 0 0 8px;
}

.azbi-subtitle{
  margin: 0 0 18px;
  color: var(--azbi-muted);
  font-size: 15px;
}

.azbi-alpha{
  display:grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1200px){
  .azbi-alpha{ grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .azbi-alpha{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.azbi-letter{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 58px;
  border-radius: 16px;
  background: var(--azbi-card);
  border: 1px solid var(--azbi-border);
  color: var(--azbi-ink);
  text-decoration:none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.azbi-letter:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
}

.azbi-letter.is-active{
  background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(59,130,246,0.15));
  border-color: rgba(59,130,246,0.22);
}

.azbi-letter.is-disabled{
  opacity: .35;
  pointer-events:none;
}

.azbi-section{
  margin-top: 18px;
  border-radius: var(--azbi-radius);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--azbi-border);
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
  overflow:hidden;
}

.azbi-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.azbi-section__h{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  color: var(--azbi-ink);
}

.azbi-count{
  color: var(--azbi-muted);
  font-size: 13px;
}

.azbi-brands{
  padding: 14px 18px 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px 16px;
}

@media (max-width: 992px){
  .azbi-brands{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .azbi-brands{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.azbi-brand a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
  text-decoration:none;
  color: var(--azbi-ink);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}

.azbi-brand a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,0.08);
}

.azbi-empty{
  padding: 18px;
  color: var(--azbi-muted);
}