/* Carrossel "Nossas Marcas" — estava embutido inline no index.html original
   e ficou perdido na modernização. Recuperado aqui. */

.carousel-track-container {
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    max-width: 100%;
    width: 100%;
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    animation: scroll-marcas 18s linear infinite;
}

.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-track a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    padding: 0;
    text-decoration: none;
}

.carousel-track a img {
    height: 50px;
    width: auto;
    object-fit: contain;
    border: none;
    outline: none;
    box-shadow: none;
}

@keyframes scroll-marcas {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Faz o bloco "Nossas Marcas" (2º item da lista .thubmnails-home) ocupar
   a largura toda e ficar embaixo do "Produtos em Destaque", em vez de
   lado a lado. Não precisa mudar nada no HTML. */
.thubmnails-home li:nth-child(2) {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
}

.thubmnails-home li:nth-child(2) h2 {
    text-align: center !important;
}