.lmw-logobox-container {
    width: 100%;
}

.lmw-logobox-grid {
    --lmw-lb-gap: 30px;
    --lmw-lb-per-row: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lmw-lb-gap);
}

.lmw-logobox-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: calc((100% - (var(--lmw-lb-gap) * (var(--lmw-lb-per-row) - 1))) / var(--lmw-lb-per-row));
    height: 90px;
    padding: 10px;
    box-sizing: border-box;
    --lmw-lb-scale: 1.06;
}

.lmw-logobox-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    --lmw-lb-opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.lmw-logobox-grid--grayscale .lmw-logobox-item img {
    filter: grayscale(100%);
    opacity: var(--lmw-lb-opacity);
}

.lmw-logobox-grid--grayscale .lmw-logobox-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.lmw-logobox-grid--zoom .lmw-logobox-item:hover img {
    transform: scale(var(--lmw-lb-scale));
}

/* Imagem que segue o mouse — um único elemento flutuante reaproveitado por todos os logos da
   instância (só um pode estar em hover por vez). Posição em "fixed" + JS atualizando left/top no
   mousemove; deslocada do cursor (--lmw-lb-mouse-offset) pra ficar no canto do mouse, nunca em
   cima do próprio logo. pointer-events:none pra não atrapalhar cliques no logo/link por baixo. */
.lmw-logobox-mouse-img {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    max-width: var(--lmw-lb-mouse-size, 160px);
    max-height: var(--lmw-lb-mouse-size, 160px);
    border-radius: var(--lmw-lb-mouse-radius, 8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: translate(-9999px, -9999px);
    transition: opacity 0.15s ease;
}

.lmw-logobox-mouse-img.is-visible {
    opacity: 1;
    /* Sem isso, a imagem nunca aparecia de verdade (bug desde a criação do widget, não algo que
       o BUG-013 tenha causado) — o estado "escondido" usa transform:translate(-9999px,-9999px)
       pra tirar a imagem da tela antes do hover, mas .is-visible só resetava a opacity, nunca o
       transform. O JS posiciona a imagem via left/top (mousemove) — mas left/top e transform são
       propriedades INDEPENDENTES que se somam no cálculo final da posição: o transform de -9999px
       continuava aplicado por cima da posição calculada via left/top pra sempre, empurrando a
       imagem pra bem longe da tela mesmo com left/top corretos e opacity:1. Resultado: a imagem
       carregava (né visível no DOM, evento de hover disparava certo), só nunca aparecia on-screen. */
    transform: translate(0, 0);
}

/* ───────────────────────── MOBILE: carrossel com scroll horizontal ───────────────────────── */
@media (max-width: 768px) {
    .lmw-logobox-container {
        overflow: hidden;
    }

    .lmw-logobox-grid {
        --lmw-lb-per-row-mobile: 3;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        scrollbar-width: none;
    }

    .lmw-logobox-grid::-webkit-scrollbar {
        display: none;
    }

    .lmw-logobox-item {
        flex: 0 0 calc((100% - (2 * 20px)) / var(--lmw-lb-per-row-mobile));
        width: auto;
        scroll-snap-align: start;
        height: 70px;
    }
}