/* OCMB Digital 2027 PRO v2.17.0
 * Editable distributor directory: authentic logos, clear product groups and
 * a calm white presentation that keeps every manufacturer's mark legible. */

.brands-section{
  position:relative;
  overflow:hidden;
  padding:76px 0 80px;
  background:linear-gradient(135deg,#f4f8fb 0%,#fff 52%,#fff7f8 100%);
  border-top:1px solid #dce7ef;
  border-bottom:1px solid #dce7ef;
}
.brands-section:before{
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--red) 0 18%,var(--deep) 18% 100%);
  content:"";
}
.brands-section .ribbon-head{margin-bottom:25px}
.brands-section .ribbon-head h2{max-width:760px}
.brand-groups{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.brand-groups__item{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border:1px solid #d5e1ea;
  border-radius:999px;
  background:#fff;
  color:#173a5d;
  font-size:10px;
  font-weight:850;
  letter-spacing:.035em;
}
.brand-groups__item:before{
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:var(--red);
  content:"";
}
.brand-directory-line{
  display:flex;
  justify-content:space-between;
  margin-bottom:16px;
  padding:13px 16px;
  border-color:#d5e1ea;
  background:rgba(255,255,255,.9);
}
.brand-directory-line p{margin:0;color:#4f6475;font-size:13px}
.brand-directory-link{color:var(--blue);font-size:12px;font-weight:900}
.brand-directory-link:hover,.brand-directory-link:focus{color:var(--red)}
.brands-section .logo-ticker{
  border:1px solid #cbd9e4;
  border-radius:18px;
  background:#eaf1f6;
  box-shadow:0 18px 38px rgba(6,42,73,.11);
}
.brands-section .ticker-track{gap:1px;background:#dce6ed}
.brands-section .ticker-logo{
  position:relative;
  width:228px;
  min-height:174px;
  padding:18px 17px 15px;
  border:0;
  background:#fff;
  color:var(--ink);
  gap:0;
  justify-content:flex-start;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.brands-section .ticker-logo:after{
  position:absolute;
  inset:auto 17px 0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--red);
  opacity:0;
  content:"";
  transition:opacity .2s ease;
}
.brands-section .ticker-logo:hover,
.brands-section .ticker-logo:focus-visible{
  z-index:2;
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 12px 25px rgba(5,37,67,.14);
}
.brands-section .ticker-logo:hover:after,
.brands-section .ticker-logo:focus-visible:after{opacity:1}
.brands-section .ticker-logo__category{
  align-self:flex-start;
  min-height:21px;
  padding:4px 7px;
  border-radius:999px;
  background:#edf3f7;
  color:#315570;
  font-size:8px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.brands-section .ticker-logo__visual{
  display:flex;
  flex:1;
  width:100%;
  min-height:68px;
  align-items:center;
  justify-content:center;
  padding:9px 3px 5px;
}
.brands-section .ticker-logo__image,
.brands-section .ticker-logo__visual img{
  display:block;
  max-width:158px;
  max-height:58px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;
  transform:none;
}
.brands-section .ticker-logo:hover img{filter:none;transform:scale(1.025)}
.brands-section .ticker-logo__name{
  color:var(--deep);
  font-size:17px;
  font-weight:950;
  line-height:1.05;
}
.brands-section .ticker-logo__note{
  display:block;
  margin:-2px 0 5px;
  color:#a31531;
  font-size:9px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.brands-section .ticker-logo__meta{
  display:block;
  max-width:190px;
  color:#5b7080;
  font-size:8px;
  font-weight:850;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.brands-section .ticker-logo--official{background:#f7fbf9}
.brands-section .ticker-logo__meta--official{color:#087544}
.brands-section .ticker-logo--official .ticker-logo__category:after{content:" · ✓";color:#087544}
.logo-ticker:hover .ticker-track,
.logo-ticker:focus-within .ticker-track{animation-play-state:paused}

@media (max-width:780px){
  .brands-section{padding:56px 0 60px}
  .brands-section .ribbon-head{margin-bottom:20px}
  .brand-directory-line{align-items:flex-start;flex-direction:column}
  .brand-directory-link{white-space:normal}
  .brands-section .logo-ticker{
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-color:#9ab0c0 #eaf1f6;
  }
  .brands-section .ticker-track{animation:none}
  .brands-section .ticker-logo{width:202px;min-height:164px;scroll-snap-align:start}
  .brands-section .ticker-logo[aria-hidden="true"]{display:none}
  .brands-section .ticker-logo__image,
  .brands-section .ticker-logo__visual img{max-width:142px;max-height:54px}
}

@media (max-width:520px){
  .brand-groups{gap:6px}
  .brand-groups__item{min-height:29px;padding:5px 9px;font-size:9px}
  .brands-section .ticker-logo{width:188px;min-height:158px;padding:15px}
}

@media (prefers-reduced-motion:reduce){
  .brands-section .ticker-track{animation:none}
  .brands-section .ticker-logo{transition:none}
  .brands-section .ticker-logo[aria-hidden="true"]{display:none}
}