.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: 180px;
    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(70px, 1fr));
    justify-items: center;
    align-items: center;
}

#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;
    min-width: 5vw;
}

.vehicle-options {
    display: inline-flex;
    gap: 8px;
}

.vehicle-option {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #555;
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none; /* importantíssimo */
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vehicle-option:hover {
    background: #222;
    color: #fff;
}

.vehicle-option.active {
    background: #ff7a00;
    border-color: #ff7a00;
    color: #000;
    font-weight: 600;
}

#vehicle-type {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 1vh;
}

#vehicle-type > span,
#vehicle-type > label,
#vehicle-type > strong {
    color: #fff;
}

.vehicle-option:focus {
    outline: 2px solid #ff7a00;
    outline-offset: 2px;
}


.vehicle-label {
    margin-right: 8px;
}