.brands-carousel { margin: 2rem 0; }
.brands-carousel .section-title { text-align:center; margin-bottom:1rem; }
.bc-viewport { position: relative; width: 100%; overflow: hidden; }
.bc-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; align-items: stretch; transition: transform 400ms ease; }
.bc-item { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 12px; border: 1px solid #eee; border-radius: 8px; background:#fff; text-decoration:none; }
.bc-logo img { max-width: 100%; max-height: 60px; object-fit: contain; display:block; }
.bc-name { display:block; margin-top:8px; font-size: .9rem; color:#333; }

.bc-prev, .bc-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color:#fff; border:0; width:34px; height:34px;
  border-radius:50%; cursor:pointer; z-index:2;
}
.bc-prev { left: 6px; }
.bc-next { right: 6px; }

/* Responsive columns computed in JS; CSS ensures min widths work nicely */