:root{
  --brand-divider: rgba(0,0,0,.28);  /* цвят на разделителите */
  --brand-gap-x: 16px;               /* хоризонтална дистанция между колони */
  --brand-gap-y: 12px;               /* вертикална дистанция между редовете */
}

/* хоризонтален скрол контейнер */
.brand-strip-viewport{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  scrollbar-gutter:stable both-edges;
  scroll-snap-type:x proximity;
}

/* ред от колони (по ширина), без визуален gap – ще ползваме padding+border за чисти линии */
.brand-strip{
  display:flex;
  align-items:flex-start;
}

/* една колона = 2 реда (горе/долу) */
.brand-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  /* отстояния вляво, за да има място за вертикалната линия */
  padding-left: var(--brand-gap-x);
  margin-left: var(--brand-gap-x);
  scroll-snap-align:start;
  position:relative;
}

/* вертикален разделител за всички колони, освен първата */
.brand-col::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background: var(--brand-divider);
}
.brand-col.first-col{
  padding-left:0;
  margin-left:0;
}
.brand-col.first-col::before{ display:none; }

/* чип линк (име на марка) – без underline/синьо */
.brand-chip{
  display:flex; align-items:center; justify-content:center;
  min-width: 160px; max-width: 260px;
  padding:10px 16px;
  font-weight:600; line-height:1.2; letter-spacing:.2px;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  color:inherit; text-decoration:none !important;
  border-radius:0;                      /* чипът е плосък – линиите са на контейнерите */
  transition:transform .12s ease,color .12s ease;
}

/* хоризонтален разделител между горния и долния ред – върху долния елемент */
.brand-chip.bottom{
  margin-top: var(--brand-gap-y);
  padding-top: var(--brand-gap-y);
  border-top:1px solid var(--brand-divider);
}

/* “празно” долно място, ако броят е нечетен – само да пази височината и линията в колоната */
.brand-spacer{
  pointer-events:none;
  opacity:0;
}

/* заглавието вътре */
.brand-title{
  max-width: 18ch;
}

/* hover/фокус ефект върху текста (без да разваляме линиите) */
.brand-chip:hover,
.brand-chip:focus-visible{
  color: #111;
  transform: translateY(-1px);
  outline: none;
}
/* плавност и отделна анимация за текста */
.brand-chip{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s;
}
.brand-chip .brand-title{
  display:inline-block;
  transition: transform .20s cubic-bezier(.2,.8,.2,1);
  transform-origin: 50% 60%;
}

/* по-силен bump */
.brand-chip:hover,
.brand-chip:focus-visible{
  transform: translateY(-3px);   /* беше -1px */
  color:#000;
}
.brand-chip:hover .brand-title,
.brand-chip:focus-visible .brand-title{
  transform: scale(1.12);        /* беше ~1.02–1.06, сега е по-осезаемо */
}

/* ако потребителят е с reduced motion – намали ефекта */
@media (prefers-reduced-motion: reduce){
  .brand-chip,
  .brand-chip .brand-title{ transition:none; }
  .brand-chip:hover,
  .brand-chip:focus-visible{ transform:none; }
}


/* responsive */
@media (max-width: 1200px){
  .brand-chip{ min-width:140px; padding:9px 14px; }
}
@media (max-width: 576px){
  .brand-chip{ min-width:120px; padding:8px 12px; }
  .brand-title{ max-width: 16ch; }
}

/* по желание: скрол с колелце -> хоризонтално
.brand-strip-viewport::-webkit-scrollbar{ height:8px; }
.brand-strip-viewport::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:8px; }
*/