/* Brands page */
.dm-page--brands { padding: 28px 0 40px; }
.dm-brands-hero { max-width: 1200px; margin: 0 auto 18px; padding: 0 18px; }
.dm-brands-hero__head { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.dm-brands-hero__title { font-size: 44px; line-height: 1.05; margin: 0 0 8px; }
.dm-brands-hero__sub { margin:0; opacity:.9; max-width: 760px; }
.dm-brands-hero__actions { display:flex; gap:12px; align-items:center; }

.dm-btn { display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; padding: 12px 18px; font-weight: 800; text-decoration:none; border: 1px solid rgba(255,255,255,.18); }
.dm-btn--primary { background: rgba(120, 90, 255, .9); color: #fff; }
.dm-btn--ghost { background: rgba(255,255,255,.92); color: #0c1b3a; }

.dm-brands-search {
  margin-top: 16px;
  border-radius: 18px;
  padding: 18px;
  display:grid;
  grid-template-columns: 160px 1fr 320px;
  gap: 12px;
  align-items:center;
  /* match DM "news" glass tiles */
  background:
    radial-gradient(700px 280px at 18% 12%, rgba(215,180,106,.14) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  border: var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dm-brands-search__label { font-weight: 800; color: rgba(242,245,255,.92); }
.dm-brands-search__input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding: 14px 16px;
  font-size: 16px;
  outline: none;
  color: rgba(242,245,255,.95);
}
.dm-brands-search__input::placeholder{ color: rgba(242,245,255,.62); }
.dm-brands-search__input:focus {
  border-color: rgba(120, 90, 255, .65);
  box-shadow: 0 0 0 3px rgba(120, 90, 255, .22);
}
.dm-brands-search__hint { color: rgba(242,245,255,.72); font-size: 13px; }

.dm-brands-list { max-width: 1200px; margin: 0 auto; padding: 0 18px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.dm-brand-card {
  /* match DM "news" glass tiles (dark translucent) */
  background:
    radial-gradient(700px 280px at 18% 12%, rgba(215,180,106,.14) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 8px 10px;
  display:grid;
  grid-template-columns: 76px 1fr 190px;
  gap: 12px;
  align-items:center;
  box-shadow: var(--shadow2);
  border: var(--border);
}
.dm-brand-card__logo { width: 70px; height: 70px; border-radius: 18px; background: #fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border: 1px solid rgba(0,0,0,.10); box-sizing: border-box; padding: 8px; }
.dm-brand-card__logo img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display:block; }
.dm-brand-card__letters { font-weight: 900; font-size: 20px; color: rgba(242,245,255,.92); letter-spacing: .5px; }
.dm-brand-card__name { font-weight: 900; font-size: 14px; color: rgba(242,245,255,.95); margin-bottom: 4px; letter-spacing: .2px; }
.dm-brand-card__desc { margin-top: 4px; color: rgba(242,245,255,.78); font-size: 13px; line-height: 1.35; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }
.dm-brand-card__meta { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap: 6px; }
.dm-brand-card__count { font-weight: 900; color: rgba(242,245,255,.92); font-size: 14px; letter-spacing:.2px; }

/* CTA like on the etalon (keep DM primary color) */
.dm-brand-card__btn{
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: linear-gradient(180deg, rgba(120,90,255,1) 0%, rgba(92,66,235,1) 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  min-width: 180px;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  font-size: 16px;
}
.dm-brand-card__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.26);
}
.dm-brand-card__btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18);
}

@media (max-width: 980px){
  .dm-brands-search { grid-template-columns: 1fr; }
  .dm-brands-search__label { margin-bottom: -6px; }
  .dm-brand-card {
    background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(245,248,255,.74) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 12px 14px;
    display:grid;
    grid-template-columns: 90px 1fr 170px;
    gap: 12px;
    align-items:center;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.28);
  }
  .dm-brand-card__meta { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap: 10px; }
}
@media (max-width: 520px){
  .dm-brands-hero__title { font-size: 34px; }
  .dm-brand-card__logo { width: 70px; height: 70px; border-radius: 18px; background: #fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border: 1px solid rgba(0,0,0,.10); box-sizing: border-box; padding: 8px; }
  .dm-brand-card__name { font-size: 13px; }
  .dm-btn { width: 100%; }
  .dm-brands-hero__actions { width: 100%; }
  .dm-brand-card__meta { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap: 10px; }
}


/* Responsive */
@media (max-width: 900px){
  .dm-brands-list{ grid-template-columns: 1fr; }
  .dm-brand-card{ grid-template-columns: 82px 1fr; }
  .dm-brand-card__meta{ grid-column: 1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (max-width: 520px){
  .dm-brand-card{ padding: 12px; }
  .dm-brand-card__desc{ -webkit-line-clamp: 3; }
}

/* === Brands top buttons: make both identical outline pills (etalon) === */
.dm-page--brands .dm-brands-hero__actions .dm-brands-topbtn,
.dm-page--brands .dm-brands-hero__actions .dm-brands-topbtn:visited{
  background: rgba(15, 29, 52, 0.35) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.dm-page--brands .dm-brands-hero__actions .dm-brands-topbtn:hover,
.dm-page--brands .dm-brands-hero__actions .dm-brands-topbtn:focus{
  background: rgba(15, 29, 52, 0.45) !important;
  border-color: rgba(255,255,255,0.40) !important;
  transform: translateY(-1px);
}
.dm-page--brands .dm-brands-hero__actions .dm-brands-topbtn:active{
  transform: translateY(0);
  background: rgba(15, 29, 52, 0.40) !important;
}