/* TABLE WRAPPER */
.brands-table{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* ONE ROW */
.brands-row{
  display:grid;
  grid-template-columns: 110px 1fr 120px 190px;
  align-items:center;
  column-gap:24px;
  padding:16px 0;
  border-bottom:1px solid #eee;
}



/* LOGO */
.brands-logo img{
  width:90px;
  height:auto;
  display:block;
}

.brands-logo-placeholder{
  width:90px;
  height:50px;
  background:#f2f2f2;
  border-radius:6px;
}

/* TEXT */
.brands-name{
  font-size:16px;
}

.brands-count{
  white-space:nowrap;
}

/* ACTION ALIGN RIGHT (like screenshot) */
.brands-action{
  justify-self:end;
}

/* BUTTON: RED DEFAULT -> BLACK ON HOVER */
.brands-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 18px;
  font-weight:700;
  text-decoration:none;

  background:#CE0037;
  color:#fff !important;
  border:0;
  border-radius:0;

  transition: background-color .2s ease, color .2s ease;
}

.brands-btn:hover{
  background:#000;
  color:#fff;
}

/* nicer keyboard focus */
.brands-btn:focus-visible{
  outline:2px solid #DC181F;
  outline-offset:2px;
}

.brands-link{
  color: #CE0037 !important;
  text-decoration: none;
}

.brands-link:hover{
  color: #000 !important;
}
/* MOBILE LAYOUT */
/* TABLET + MOBILE: keep button on the right */
@media (max-width: 1024px){
  .brands-row{
    grid-template-columns: 80px 1fr auto;
    grid-template-areas:
      "logo name  action"
      "logo count action";
    column-gap:16px;
    row-gap:8px;
    align-items:center;
  }

  .brands-logo{ grid-area:logo; }
  .brands-name{ grid-area:name; }
  .brands-count{ grid-area:count; }

  .brands-action{
    grid-area:action;
    justify-self:end;     /* <-- moves button to the right */
    align-self:center;
  }
}

/* SMALL PHONES: optional cleaner layout (button full width below) */
@media (max-width: 480px){
  .brands-row{
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "logo name"
      "logo count"
      "action action";
  }

  .brands-action{
    justify-self:stretch;
  }

  .brands-btn{
    width:100%;           /* full-width button on small phones */
    justify-content:center;
  }
}