.header__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 65%
}

.btn-veiculo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.btn-veiculo a {
    min-width: 250px;
    max-width: 100%;
    margin: 0 8px 8px 0
}

.calc {
    background: url(../img/icons/calc.png) no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 8px -1px 0
}

.btn-whats {
    background-color: #27ae60;
    margin-top: 10px
}

.btn-whats i {
    background: url(../img/icons/whatsapp-white.svg) no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    margin-right: 8px
}

.car-card img {
    width: 100%;
    margin: 0 auto;
    max-height: 180px;
    min-height: 87px;
    height: 100%;
    object-fit: cover;
    display: block
}

.jplist-list .car-card img {
    border-radius: 5px;
    margin-top: 0
}

.jplist-list .car-card figure:before {
    height: 100%;
    margin-top: 0;
    border-radius: 5px
}

.jplist-list .card-content {
    align-items: center
}

.jplist-list .card-content h3 {
    min-height: auto;
    margin: 0
}

.jplist-list .card-content p {
    text-align: right;
    padding-right: 12px
}

.jplist-list .list-icons {
    display: block;
    margin-right: 5%
}

.jplist-list .list-icons .car-detail--icons {
    flex-wrap: initial
}

.jplist-list .car-detail--icons p {
    font-weight: 500;
    text-align: center
}

.jplist-list .card-content>p {
    margin-right: 12px
}

.jplist-grid .list-icons {
    display: none
}

.jplist-grid .show-grid {
    display: block
}

.jplist-list .show-grid {
    display: none
}

.jplist-list .show-on-list {
    display: block
}

.jplist-grid .show-on-list {
    display: none
}

.list-wp-icon {
    background: url(../img/icons/whatsapp-black.svg) no-repeat;
    padding-left: 25px;
    color: #333;
    display: block;
    margin: 10px 0 0 25px;
    transition: .4s;
    font-size: .9em
}

.list-wp-icon:hover {
    color: #27ae60;
    transition: .4s
}

iframe.maps {
    min-height: 220px;
    max-height: 220px
}

.header--overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0, rgba(255, 255, 255, 0) 0%)
}

.slides-header--wrap {
    position: absolute;
    z-index: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto
}

.slides-header {
    width: 100%
}

.slider-car {
    max-width: 800px;
    max-height: 600px;
    margin: 0 auto
}

.slider-car img {
    width: 100%;
    margin: 0 auto;
    max-height: 600px;
    height: 100%;
    object-fit: cover;
    display: block
}

.slider-car--thumbs div img {
    max-height: 130px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block
}

@media only screen and (max-width:56em) {
    .header__menu {
        width: 95px;
        flex-direction: row-reverse
    }
}

@media only screen and (max-width:47em) {
    .header {
        height: 100%;
        background-size: fill;
    }

    .search-component {
        margin-top: 0
    }

    .search-component .field-group {
        flex-direction: row
    }

    .search-component .field--half {
        width: 100%
    }

    .slides-header {
        width: 100%
    }

    .slides-header img {
        object-fit: contain
    }

    .slider-car {
        max-height: 280px
    }

    .slider-car img {
        max-height: 280px
    }

    .slider-thumbs div {
        height: 70px
    }

    .slider-car--thumbs div img {
        max-height: 70px
    }

    #marcas {
        grid-auto-flow: column;
        grid-template-columns: 65px;
        grid-auto-columns: 65px;
        overflow-x: scroll;
        overflow-y: hidden;
        grid-gap: 10px;
        width: 80vw;
    }
}

#marcas {
    grid-column-gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    width: 100%
}

#marcas .brand {
    background-color: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    color: #171717;
    display: block;
    font-size: .875rem;
    padding: 5px;
    text-align: center;
    margin: 6px 0 6px 0;
    max-width: 260px
}

#marcas .brand.selected,
#marcas .brand:hover {
    background-color: #dcdcdc;
    box-shadow: 0px 0px 1px 1px;
}

#lojas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8px;
    gap: 12px;
    margin-bottom: 8px
}

#lojas .loja {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    background-color: #fff;
    transition: .3s
}

#lojas .loja:hover,
#lojas .loja.selected {
    background-color: #dcdcdc;
    box-shadow: 0px 0px 1px 1px
}

#lojas .loja img {
    max-height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain
}

.field-group:has(#lojas),
.field-group:has(#marcas) {
    width: 100%;
    flex-wrap: wrap
}

.field-group--left:has(#marcas),
.field-group--left:has(#lojas) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0
}

#marcas {
    flex: 1 1 100%;
    min-width: 0
}

#lojas {
    flex: 1 1 100%;
    min-width: 0
}
.card-loja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #f9f9f9
}

.card-loja img {
    max-height: 36px;
    width: auto;
    max-width: 115px;
    object-fit: contain
}

.card-loja span {
    font-size: .75em;
    font-weight: 600;
    color: var(--main-text-color);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.card-loja--text {
    justify-content: center
}

/* Loja no ícone da página individual do veículo */
.car-detail--icons .loja-icon img {
    max-height: 48px;
    width: auto;
    max-width: 100px;
    object-fit: contain
}

/* Correção para o container de Lojas e Marcas */
#lojas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
    justify-content: center;
    width: 100% !important;
    margin-bottom: 20px;
}

#marcas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
    justify-content: center;
    width: 100% !important;
    margin-bottom: 20px;
}

#lojas .loja {
    display: flex !important; /* Garante que o link apareça */
    min-width: 60px;
    justify-content: center;
}

#marcas .brand {
    display: flex !important; /* Garante que o link apareça */
    min-width: 60px;
    justify-content: center;
}

#marcas img {
    max-height: 30px; /* Reduz um pouco no mobile para caber mais */
    width: auto;
}

#lojas img {
    max-height: 30px; /* Reduz um pouco no mobile para caber mais */
    width: auto;
}

/* Ajuste Responsivo para os Selects */
@media only screen and (max-width: 64em) {
    .field-group {
        flex-direction: column !important; /* Empilha tudo o que for grupo */
    }

    .field.field--half {
        width: 100% !important; /* Ocupa a largura total no celular */
        margin-left: 0 !important;
    }

    .search-component form {
        padding: 10px;
        width: 100%;
        box-sizing: border-box; /* Evita que o padding jogue o conteúdo pra fora */
    }
    
    /* Garante que o seletor não fique gigante */
    .select-wrapper select {
        width: 100% !important;
    }
}

.preco-input {
    padding: 16px 32px 16px 16px !important;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    -webkit-appearance: none;
    display: block;
    width: 100% !important;
    font-size: 1em;
    color: var(--main-text-color);
    background: var(--main-bg-color);
    margin-bottom: 0 !important;
    box-sizing: border-box
}

.preco-input::placeholder {
    color: #aaa
}

.select-wrapper:has(.preco-input)::after {
    display: none
}

.km-input {
    padding: 16px 32px 16px 16px !important;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    -webkit-appearance: none;
    display: block;
    width: 100% !important;
    font-size: 1em;
    color: var(--main-text-color);
    background: var(--main-bg-color);
    margin-bottom: 0 !important;
    box-sizing: border-box
}

.km-input::placeholder {
    color: #aaa
}


/* Permite que o container principal de inputs quebre linha quando faltar espaço */
#filters2.field-group {
    flex-wrap: wrap;
    gap: 15px; /* Adiciona um respiro legal entre os campos que caírem pra linha de baixo */
    align-items: flex-end; /* Alinha os botões e inputs pela base caso tenham alturas diferentes */
}

/* Faz com que os campos e subgrupos internos se ajustem melhor */
#filters2 > .field, 
#filters2 > .field-group {
    flex: 1 1 200px; /* Permite crescer, encolher e define uma largura base de 200px */
    width: auto;
    margin-bottom: 0; /* Remove margens zoadas caso o gap já esteja fazendo o trabalho */
}

/* Ajuste específico para o botão não ficar esticadão se ele cair sozinho numa linha */
#filters2 .button {
    width: 100%;
}

/* Nivelando os botões das lojas */
#lojas .loja {
    width: 120px; /* Largura fixa pra todo mundo ficar igual */
    height: 60px; /* Altura fixa */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px; /* Dá um respiro interno */
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
}

#lojas .loja img {
    width: 100%;
    height: 100%;
    max-height: 100%; /* Remove aquela limitação de 30px/40px antiga */
    object-fit: contain; /* A mágica acontece aqui: ajusta o logo sem distorcer */
}

.car-card figure img {
    width: 100%;
    height: 180px !important;
    object-fit: cover;
    display: block;
    min-height: unset;
    max-height: unset;
}

/* Um reforço de segurança para a logo da loja voltar ao normal,
   caso alguma outra regra esteja esbarrando nela */
.car-card .card-loja img {
    height: auto !important;
    max-height: 40px !important; /* Altura original da logo menorzinha */
    width: auto !important;
    max-width: 115px !important;
    object-fit: contain !important;
}