:root{}
.efl-logos-wrap{width:100vw;max-width:100%;margin:0 calc(50% - 50vw);} /* edge-to-edge */
.efl-logos{position:relative; width:100%; overflow:hidden; padding:16px 0;}
.efl-logos .efl-track{
  display:flex;
  gap:var(--efl-gap,12px);
  align-items:center;
  /* JS will manage transform for carousel */
  will-change: transform;
}
.efl-logos .efl-item{
  flex:0 0 auto;
  width:var(--efl-logo-size,96px);
  height:var(--efl-logo-size,96px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:8px;
  text-decoration:none;
}
.efl-logos .efl-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:0;
}

.efl-logos .efl-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  background:#e44541;
  color:#fff;
  border:none;
  border-radius:5px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  z-index:2;
  opacity:0.9;
}
.efl-logos .efl-prev{ left:16px; }
.efl-logos .efl-next{ right:16px; }

/* GRID mode */
.efl-mode-grid .efl-track{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--efl-logo-size,96px), 1fr));
}

/* Responsive paddings to keep arrows visible */
@media (max-width: 640px){
  .efl-logos{ padding:12px 36px; }
  .efl-logos .efl-arrow{ width:32px; height:32px; font-size:18px; }
}

.efl-logos .efl-track{flex-wrap:nowrap;}

.efl-debug{pointer-events:none}