/* import */

@import url("theme.css");
/* #region IMAGENS DE CATEGORIA */

.painel-categorias__categoria-itens.ativo {
    /* #region VIDROS */
    --parabrisa: url("/img/preview/Vidro Parabrisa.jpg");
    --cantoneira: url("/img/preview/Cantoneira.jpg");
    --janela: url("/img/preview/Janela.jpg");
    --quebra-vento: url("/img/preview/Quebra-Vento.jpg");
    --vidro-de-porta: url("/img/preview/Vidro-de-Porta.jpg");
    --vidro-traseiro: url("/img/preview/Vidro-Traseiro.jpg");
    /* #endregion VIDROS */
    /* #region FARÓIS */
}

/* #endregion IMAGENS DE CATEGORIA */

/* #region ÍCONES */

.menu-icon::before {
    content: url("/img/menu-icon.png");
    height: 22px;
}

.map-marker-icon::before {
    content: url("/img/map-marker.svg");
    height: 20px;
}

.arrow-down-icon::before {
    content: url("/img/arrow-down-blue.svg");
    height: 20px;
}

.arrow-down-icon-white::before {
    content: url("/img/arrow-down.svg");
    height: 20px;
}

.user-avatar-icon::before {
    content: url("/img/user-avatar.svg");
    height: 20px;
}

.search-icon::before {
    content: url("/img/search.svg");
    height: 20px;
}

.veiculos-compativeis-search__search-input .search-icon::before {
    content: "\f11c";
    color: #a8a8a8;
    font-family: "FontAwesome";
    font-style: normal;
    font-size: 22px;
}

.search-icon-blue::before {
    content: url("/img/search-blue.svg");
    height: 20px;
}

.cart-icon::before {
    content: url("/img/cart-arrow-down.svg");
    height: 20px;
    transition: 0.5s;
}

.mi-carrito:hover .cart-icon::before {
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.4));
}

#prev-btn i:before {
    content: url("/img/categoria-arrow.svg");
    display: inline-block;
    height: 32px;
    transform: rotateY(180deg);
}

#next-btn i:before {
    content: url("/img/categoria-arrow.svg");
    height: 32px;
}

#next-btn i,
#prev-btn i,
button {
    transition: 0.2s;
}

#next-btn i:hover,
#prev-btn i:hover {
    transform: scale(1.2);
}

i.categorias-icon::before {
    content: url("/img/categorias-icon.png");
    height: 16px;
    margin-right: 15px;
}

i.user-icon::before {
    content: url("/img/user-icon.png");
    height: 12px;
    width: 27px;
    width: fit-content;
}

i.arrow-icon::before {
    content: url("/img/arrow-icon.png");
    height: 12px;
}

.arrow-down-icon-gray::before {
    content: url("/img/arrow-down-gray.png");
    height: 20px;
}

/* #endregion ÍCONES */

/* GLOBAL MODIFIERS */

@media (max-width: 1200px) {
    .desktop {
        display: none !important;
    }
    .mobile {
        display: unset;
    }
    .nav {
        height: 48px !important;
    }
}

@media (min-width: 1201px) {
    .desktop {
        display: unset;
    }
    .mobile {
        display: none !important;
    }
}

/* BLOCKS */

/* #region TOPO */

.topo {
    height: 40px;
    width: 100%;
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    justify-content: center;
    background-color: var(--primary);
}

.topo * {
    color: var(--white);
}

.topo a,
.topo .usuario span {
    margin-left: 5px;
    padding: 10px 0;
    cursor: pointer;
}

.topo .container,
.nav .container {
    display: flex;
    align-items: center;
    /*margin: 0 15px;*/
    padding: 0 10px;
    width: 100%;
    max-width: 1280px;
    position: relative;
}

.geo-picker {
    display: flex;
    width: 100%;
    align-items: center;
}

.geo-picker > i {
    margin-right: 5px;
}

.topo .geo-picker button:hover {
    text-decoration: underline;
}

.topo .geo-picker button {
    background: none;
    border: 0;
    margin: 0 5px;
}

.topo .geo-picker .header-qd-v1-valid-prices-local {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.topo .links {
    margin-left: auto;
}

.topo .links a + a {
    margin-left: 25px;
}

.topo .usuario {
    display: flex;
    align-items: center;
    margin-left: 50px;
    white-space: nowrap;
}

.topo .usuario a {
    text-decoration: none;
}

.topo .usuario span b {
    text-transform: capitalize;
}

.topo .usuario .usuario__opcoes {
    display: none;
    list-style: none;
    position: absolute;
    background: var(--white);
    color: var(--gray-700);
    /*border: 1px solid var(--gray-300);*/
    box-shadow: 0 0 5px;
    z-index: 1;
    min-width: 135px;
    top: 40px;
    font-size: 0.8rem;
}

.topo .usuario:hover .usuario__opcoes {
    display: unset;
}

.topo .usuario .usuario__opcoes li:hover {
    background-color: var(--gray-300);
}

.topo .usuario .usuario__opcoes li#logout {
    border-top: 1px solid var(--gray-300);
}

.topo .usuario .usuario__opcoes a,
.topo .usuario .usuario__opcoes #logout button {
    color: var(--gray-700);
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: unset;
    padding: 10px;
}

.topo .usuario .usuario__opcoes #logout button {
    text-align: left;
    background: transparent;
    border: 0;
}

.topo .usuario .arrow-down-icon-white {
    margin-left: 5px;
}

/* #endregion TOPO */

/* NAV */

.nav {
    height: 80px;
    width: 100%;
    position: sticky;
    z-index: 9;
    top: 40px;
    display: flex;
    justify-content: center;
    background: var(--white);
    box-shadow: 0 0 0.2rem 0 var(--gray-500);
}

.nav .container {
    justify-content: space-between;
}

/* .nav .container.mobile {
  display: flex;
  margin: unset;
} */

.nav .container .logo {
    transition: all 0.1s ease-in;
    width: 95px;
}

.nav .container.mobile .logo {
    width: 58px;
}

.nav .container .logo:hover {
    opacity: 0.8;
}

.nav .container button.menu-btn {
    font-weight: var(--semi-bold);
    text-transform: uppercase;
    font-size: 1.1667rem;
    /*14pt*/
    color: var(--blue-700);
    background: transparent;
    border: 0;
}

.nav .container.mobile button.menu-btn {
    font-size: 0.875rem;
    min-width: 80px;
    display: flex;
    font-weight: normal;
    outline: 0;
}

.nav .container button.menu-btn .menu-icon {
    margin-right: 10px;
}

.nav .container.mobile .whatsapp-and-cart {
    display: flex;
    align-items: center;
}

.nav .container.mobile a.fa-whatsapp {
    background: #39b54a;
    color: #fff;
    font-size: 24px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    text-align: center;
    padding-top: 5px;
    margin-right: 20px;
    /* box-shadow: 5px 5px 10px -2px rgb(0 0 0 / 50%); */
}

.nav .container.mobile a.fa-whatsapp:hover,
.nav .container.mobile a.fa-whatsapp:focus {
    text-decoration: none;
}

.nav .container.mobile .mi-carrito {
    position: relative;
}

.nav .container.mobile .mi-carrito > .badge {
    top: 0;
}

.nav .container.mobile .mi-carrito.loaded > .badge {
    top: -10px;
    right: -15px;
}

/* #region Box de Pesquisa */

.search-box.ativo > .search-icon::before {
    content: url("/img/search-blue.svg");
}

.search-box-mobile {
    display: none;
}

@media (max-width: 1200px) {
    .search-box-mobile {
        display: block;
        position: sticky;
        overflow: inherit;
        top: 85px;
        right: 0px;
        left: 0px;
        z-index: 7;
        background: rgba(0, 0, 0, 0.65);
        transition: height 0.5s ease-in-out;
    }
}

.search-box-mobile__form {
    width: 100%;
    background-color: var(--gray-100);
    padding: 10px;
    position: relative;
}

.search-box-mobile__form-group {
    display: flex;
    align-items: center;
    position: relative;
}

.search-box-mobile .busca {
    width: 100%;
}

.search-box-mobile .busca input {
    outline: none;
    width: 100%;
    color: var(--gray-500);
    transition: border 500ms;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--gray-500);
}

.search-box-mobile__form-input {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--gray-500);
    display: none;
}

.search-mobile-autocomplete {
    position: absolute;
    top: 38px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--gray-500);
    border-radius: 0px 0px 5px 5px;
    z-index: 1;
}

.search-mobile-autocomplete li {
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

.search-mobile-autocomplete li a {
    flex: 1;
    padding: 15px 0px;
}

.search-mobile-autocomplete li a img {
    margin-right: 10px;
}

.search-mobile-autocomplete li + li a {
    border-top: 1px solid var(--gray-500);
}

/* #endregion Box de Pesquisa */

.container .search-box {
    width: 100%;
    max-width: 525px;
    display: flex;
    align-items: center;
    position: relative;
}

.nav .container.mobile .search-box {
    transition: 0.2s ease-in-out 0s;
    margin-left: 25px;
}

.nav .container.mobile .search-box:hover {
    transform: scale(1.2);
}

.container .search-box fieldset.busca {
    width: 100%;
}

.container .search-box fieldset.busca + i.search-icon {
    line-height: 1;
}

.container.desktop .search-box .busca select,
.container.desktop .search-box .busca label,
.container.desktop .search-box .busca legend,
.container.desktop .search-box .busca input[type="button"],
.search-box-mobile .busca select,
.search-box-mobile .busca label,
.search-box-mobile .busca legend,
.search-box-mobile .busca input[type="button"] {
    display: none;
}

.container .search-box .busca input {
    outline: none;
    padding: 10px 15px;
    border: 1px solid;
    border-color: var(--gray-500);
    border-radius: 4px;
    width: 100%;
    color: var(--gray-500);
    transition: border 500ms;
}

.container .search-box fieldset.busca input:focus,
.container .search-box fieldset.busca input:hover {
    border-color: var(--primary);
    transition: border 500ms;
}

.container .search-box fieldset.busca + .search-icon::before {
    margin-left: -30px;
}

.container .search-box input:focus + .search-icon::before {
    content: url("/img/search-blue.svg");
}

.container .search-box #autocomplete-search {
    background: var(--white);
    position: absolute;
    z-index: 1;
    list-style: none;
    top: 50px;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.4);
    border-radius: 4px;
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    color: var(--gray-500);
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}

.container .search-box #autocomplete-search li:not(:first-of-type) {
    border-top: none;
}

.container .search-box #autocomplete-search li {
    border: 1px solid var(--gray-300);
}

.container .search-box #autocomplete-search li:hover,
.container .search-box #autocomplete-search li:focus {
    background: var(--gray-300);
}

.container .search-box #autocomplete-search li a {
    display: block;
    text-decoration: none;
    height: 100%;
    padding: 10px 10px;
    text-transform: capitalize;
}

.container .search-box #autocomplete-search li a.no-capitalize {
    text-transform: unset;
}

.container .search-box #autocomplete-search li a img {
    margin-right: 5px;
}

.container .conversacion-whatsapp {
    height: 100%;
    display: table;
}

.container .conversacion-whatsapp a {
    display: flex;
    align-items: center;
    height: 100%;
    transition: 0.5s;
}

.container .conversacion-whatsapp a:hover {
    text-decoration: none;
    transform: scale(1.05);
}

.container .conversacion-whatsapp a:hover::before {
    box-shadow: 5px 5px 10px -2px rgb(0 0 0 / 50%);
}

.container .conversacion-whatsapp a::before {
    transition: 0.5s;
    font-family: "FontAwesome";
    content: "\f232";
    background: #39b54a;
    color: #fff;
    width: 33px;
    font-size: 22px;
    border-radius: 50%;
    text-align: center;
    margin: 10px;
}

.container .mi-carrito {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 140px;
    height: 100%;
    cursor: pointer;
    transition: 0.5s;
}

.nav .container.mobile .mi-carrito {
    min-width: unset;
}

.container .mi-carrito:hover {
    transform: scale(1.05);
}

.container .mi-carrito > * {
    margin: 0 5px -5px;
}

.container .mi-carrito > .badge {
    position: absolute;
    right: -13px;
    top: 35%;
    background: var(--danger);
    color: var(--white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

.container .mi-carrito.loaded > .badge {
    visibility: visible;
    opacity: 1;
    top: 35%;
}

.container .mi-carrito .confirmacao {
    position: absolute;
    top: 110%;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    width: 420px;
    height: 160px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgb(0, 0, 0, 0.3);
    transition: 1s;
    opacity: 0;
    visibility: hidden;
}

.container.mobile .mi-carrito .confirmacao {
    top: 167%;
    right: -10px;
    width: 340px;
}

.container .mi-carrito .confirmacao > .item {
    display: flex;
    align-items: center;
    height: 100%;
}

.container .mi-carrito .confirmacao > .item > * {
    margin: 10px;
}

.container .mi-carrito .confirmacao > .item > img {
    width: 80px;
}

.container .mi-carrito .confirmacao > .mensagem {
    color: var(--white);
    background-color: var(--blue-500);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 4px 4px;
}

.container .mi-carrito .confirmacao > .mensagem:before {
    content: "\f058";
    display: inline-block;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    height: 1em;
    text-align: center;
    text-decoration: inherit;
    text-rendering: optimizelegibility;
    width: 1em;
    font-family: "FontAwesome";
    position: absolute;
    bottom: 20px;
    left: 35px;
    color: #fff;
    font-size: 14px;
}

.container .mi-carrito .confirmacao:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -8px;
    right: 10px;
    position: absolute;
}

.side-menu-backdrop {
    display: none;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 8;
    transition: 0.5s;
}

.side-menu {
    height: calc(100% - 88px);
    width: 0;
    position: fixed;
    z-index: 900000;
    top: 88px;
    left: 0;
    bottom: 0;
    background-color: white;
    /* overflow-x: hidden; */
    transition: 0.5s;
    box-shadow: 0 0 1px black;
    display: none;
    font-size: 1rem;
}

.side-menu hr {
    width: 90%;
    margin: 0 auto;
}

.side-menu > a {
    padding: 0 !important;
}

.side-menu a {
    opacity: 0;
    padding: 25px 8px 12px 50px;
    text-decoration: none;
    font-weight: 500;
    color: #818181;
    display: block;
    transition: background 0.8s, 0.3s;
}

.side-menu a:hover {
    background: white radial-gradient(circle, transparent 1%, white 1%)
        center/15000%;
}

.side-menu a:active {
    background-color: var(--gray-300);
    background-size: 100%;
    transition: background 0s;
}

.side-menu a + a {
    padding: 12px 8px 12px 50px;
}

.side-menu a.destaque {
    font-weight: bold;
    color: #183884;
    padding: 25px 8px 25px 15px;
    display: flex;
}

.side-menu .closebtn {
    position: absolute;
    top: 0;
    right: -40px;
    font-size: 36px;
    margin-left: 50px;
    z-index: 1;
    color: white;
    background: transparent !important;
}

.side-menu #main-menu,
.side-menu #category-menu {
    overflow-x: hidden;
}

.side-menu #main-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.side-menu .side-menu-content {
    height: 100%;
}

.side-menu .side-menu-footer a {
    display: flex;
    align-items: center;
}

.side-menu .side-menu-footer a > i {
    margin-right: 15px;
}

.side-menu .side-menu-footer.usuario .usuario-container-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 15px;
}

.side-menu .side-menu-footer.usuario .usuario-mobile {
    display: flex;
    align-items: center;
}

.side-menu .side-menu-footer.usuario .usuario-mobile .user-icon {
    margin-right: 5px;
    width: 40px;
    height: 40px;
}

.side-menu .side-menu-footer.usuario .usuario-mobile .destaque {
    font-weight: bold;
    color: #183884;
    text-transform: capitalize;
}

.side-menu
    .side-menu-footer.usuario
    .usuario-container-mobile
    #logout-mobile
    button {
    background: none;
    outline: 0;
    border: 0;
    text-transform: uppercase;
}

.side-menu .side-menu-footer.usuario .usuario__opcoes-mobile a {
    padding-top: 12px;
}

.side-menu #category-menu {
    display: none;
    opacity: 0;
    transition: 0.5s;
}

.side-menu #category-menu h2,
.side-menu #category-menu a {
    padding-left: 15px;
}

.side-menu #category-menu h2 {
    color: #183884;
}

.side-menu-header > a {
    padding: 15px 8px 15px 15px;
    font-size: 0.9rem;
}

.side-menu #category-menu .side-menu-header > a {
    display: flex;
    align-items: center;
}

.side-menu #category-menu .side-menu-header > a i {
    margin-right: 15px;
}

.side-menu-categorias {
    margin-top: 5px;
    overflow-y: scroll;
    height: calc(100% - 88px);
}

.side-menu-categorias .side-menu-categorias__categoria-header {
    display: flex;
}

.side-menu-categorias .side-menu-categorias__categoria-header.ativo {
    position: sticky;
    /* box-shadow: 0 0 1px grey; */
    top: 0;
}

.side-menu-categorias .side-menu-categorias__categoria-header.ativo a {
    background: white;
    box-shadow: inset 0 0 5px #80808059;
}

.side-menu-categorias .side-menu-categorias__categoria-header img {
    height: 40px;
}

.side-menu-categorias .side-menu-categorias__categoria-header h3 {
    width: 100%;
    font-size: 0.9rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 15px;
}

.side-menu-categorias .side-menu-categorias__categoria-header a {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 15px;
}

.side-menu-categorias .side-menu-categorias__categoria-header a i {
    margin-left: 5px;
}

.side-menu-categorias .side-menu-categorias__categoria-itens {
    height: 0;
    overflow: hidden;
    transition: 0.5s;
}

.side-menu-categorias
    .side-menu-categorias__categoria-header.ativo
    + .side-menu-categorias__categoria-itens {
    height: fit-content;
    height: -moz-fit-content;
}

.side-menu-categorias .side-menu-categorias__categoria-itens a {
    padding: 12px 8px 12px 50px !important;
    font-size: 0.9rem;
}

.side-menu-categorias
    .side-menu-categorias__categoria-itens
    .side-menu-categorias__categoria-sub-itens
    > li
    > a {
    padding-left: 60px !important;
}

.painel-categorias-section {
    background-color: #fff;
}

@media (max-width: 1200px) {
    .painel-categorias-section {
        display: none;
    }
}

.painel-categorias-desktop:not(:hover) .painel-categorias .arrow {
    transform: scaleY(0) rotate(45deg);
    bottom: 0px;
}

.painel-categorias-desktop:not(:hover)
    .painel-categorias
    .painel-categorias__categoria-conteudo {
    transform: scaleY(0.2);
    top: -160px;
    z-index: 1;
}

.painel-categorias-desktop:not(:hover)
    .painel-categorias
    .painel-categorias__categoria-conteudo {
    box-shadow: 0px 0px 0px 0px #fff;
}

.painel-categorias-desktop:not(:hover)
    .painel-categorias
    .painel-categorias__categoria-conteudo
    hr {
    border-color: #fff;
}

.painel-categorias-desktop {
    max-width: 1280px;
    margin: 0 auto;
}

.painel-categorias {
    position: relative;
    width: 100%;
    left: 0;
    padding: 0px 10px;
    background-color: #fff;
    font-size: 1.25rem;
    transition: all 0.1s ease-in;
}

.painel-categorias li {
    list-style: none;
}

.painel-categorias .slider-handlers {
    width: 100%;
    height: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.painel-categorias .slider-handlers button {
    background: transparent;
    position: relative;
    top: 72.5px;
    border: 0;
    outline: 0;
    z-index: 5;
}

.painel-categorias .slider-handlers button i {
    display: flex;
}

.painel-categorias .painel-categorias__categoria {
    display: inline-block;
    margin: 0 20px;
}

.painel-categorias .painel-categorias__categoria:first-child {
    margin-left: 0;
}

.painel-categorias .painel-categorias__categoria h2 {
    transition: 0s ease-in-out 0.1s;
}

.painel-categorias .painel-categorias__categoria:hover h3 {
    color: var(--blue-500);
    font-weight: var(--semi-bold);
}

.painel-categorias .painel-categorias__menu {
    position: relative;
    overflow: hidden;
    background: #fff;
    height: 125px;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 1%,
        rgba(0, 0, 0, 1) 98%,
        rgba(0, 0, 0, 0)
    );
    z-index: 4;
}

.painel-categorias .painel-categorias__menu > ul {
    transition: 1s;
}

.painel-categorias
    .painel-categorias__menu
    .painel-categorias__categoria-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 146px;
    min-width: 92px;
    height: 155px;
    color: var(--gray-500);
    font-weight: var(--light);
    text-align: center;
    white-space: normal;
    transition: all 0.2s ease-in;
}

.painel-categorias
    .painel-categorias__menu
    .painel-categorias__categoria-header:hover {
    transform: scale(1.05);
}

.painel-categorias .painel-categorias__categoria-header img {
    margin-bottom: 10px;
    transform: scale(0.8);
}

.painel-categorias ul li:first-child .painel-categorias__categoria-header img {
    transform: scale(0.64);
    filter: grayscale(100%);
    transition: 0.2s;
    opacity: 0.5;
}

.painel-categorias-section
    .painel-categorias:hover
    ul
    li:first-child
    .painel-categorias__categoria-header.ativo
    img {
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0));
    opacity: 1;
}

.painel-categorias-section
    .painel-categorias
    ul
    li:first-child:hover
    .painel-categorias__categoria-header.ativo
    img {
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.2));
}

.painel-categorias-section
    .painel-categorias:hover
    .painel-categorias__menu
    .painel-categorias__categoria-header.ativo {
    color: var(--blue-500);
    font-weight: var(--semi-bold);
}

.painel-categorias .painel-categorias__categoria-header h2 {
    font-size: 0.875rem;
    font-weight: unset;
}

.painel-categorias .painel-categorias__categoria-header a {
    text-decoration: none;
    color: unset;
}

.painel-categorias .painel-categorias__categoria-conteudo {
    position: absolute;
    left: 0px;
    display: flex;
    border-radius: 0px 0px 4px 4px;
    background: #fff;
    width: 100%;
    overflow: hidden;
    box-shadow: 11px 13px 15px -4px rgb(0 0 0 / 35%);
    transition: 0.4s;
    top: 125px;
    z-index: 4;
}

.painel-categorias .arrow {
    position: absolute;
    background-color: var(--white);
    border: solid var(--gray-300);
    border-width: 0 2px 2px 0;
    display: inline-block;
    width: 15px;
    height: 15px;
    transform: scaleY(1) rotate(45deg);
    bottom: -9px;
    left: 75px;
    z-index: 5;
    transition: 0.5s;
}

ul.menu-division {
    position: absolute;
    height: 85%;
    left: 400px;
    border-left: 1px solid #eee;
}

.painel-categorias .painel-categorias__categoria-itens {
    font-size: 0.875rem;
    padding: 32px 50px;
    display: none;
    min-height: 250px;
}

.painel-categorias .painel-categorias__categoria-itens a {
    text-decoration: none;
    transition: all 0.1s ease-in;
}

.painel-categorias__categoria-itens.ativo a:hover:after {
    position: absolute;
    right: -30px;
    bottom: -20px;
    transform: scale(0.5);
}

/* #region PREVIEW - VIDROS */

#vidros.painel-categorias__categoria-itens.ativo a#parabrisa:hover:after {
    content: var(--parabrisa);
}

#vidros.painel-categorias__categoria-itens.ativo a#cantoneira:hover:after {
    content: var(--cantoneira);
}

#vidros.painel-categorias__categoria-itens.ativo a#janela:hover:after {
    content: var(--janela);
}

#vidros.painel-categorias__categoria-itens.ativo a#quebra-vento:hover:after {
    content: var(--quebra-vento);
}

#vidros.painel-categorias__categoria-itens.ativo a#vidro-de-porta:hover:after {
    content: var(--vidro-de-porta);
}

#vidros.painel-categorias__categoria-itens.ativo a#vigia:hover:after {
    content: var(--vidro-traseiro);
}

/* #endregion PREVIEW - VIDROS */

/* #region PREVIEW - FARÓIS */

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#aro-farol-auxiliar:hover:after {
    content: var(--aro-farol-auxiliar);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#farol-auxiliar:hover:after {
    content: var(--farol-auxiliar);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#farol-diurno:hover:after {
    content: var(--farol-diurno);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#farol-principal:hover:after {
    content: var(--farol-principal);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#moldura-farol-auxiliar:hover:after {
    content: var(--moldura-farol-auxiliar);
}

/* #endregion PREVIEW - FARÓIS */

/* #region PREVIEW - LÂMPADAS */

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lampada-farol-auxiliar:hover:after {
    content: var(--lampada-farol-auxiliar);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lampada-lanterna:hover:after {
    content: var(--lampada-lanterna);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lampada-lanterna-traseira:hover:after {
    content: var(--lampada-lanterna-traseira);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lampada-painel:hover:after {
    content: var(--lampada-painel);
}

/* #endregion PREVIEW - LÂMPADAS */

/* #region PREVIEW - LANTERNAS */

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lanterna:hover:after {
    content: var(--lanterna);
}

#farois-lanternas-e-lampadas.painel-categorias__categoria-itens.ativo
    a#lanterna-para-choque:hover:after {
    content: var(--lanterna-parachoque);
}

/* #endregion PREVIEW - LANTERNAS */

/* #region PREVIEW - PARA-CHOQUES */

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#grade-para-choque:hover:after {
    content: var(--grade-parachoques);
}

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#guia-para-choque:hover:after {
    content: var(--guia-parachoques);
}

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#moldura-para-choque:hover:after {
    content: var(--moldura-parachoques);
}

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#moldura-paralama:hover:after {
    content: var(--moldura-paralama);
}

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#para-choque-dianteiro:hover:after {
    content: var(--parachoque-dianteiro);
}

#parachoques-grades-e-molduras.painel-categorias__categoria-itens.ativo
    a#para-choque-traseiro:hover:after {
    content: var(--parachoque-traseiro);
}

/* #endregion PREVIEW - PARA-CHOQUES */

/* #region PREVIEW - RETROVISORES */

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#retrovisor:hover:after {
    content: var(--retrovisores);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#capa-retrovisor:hover:after {
    content: var(--capa-de-retrovisores);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#espelho-retrovisor-externo:hover:after {
    content: var(--espelho-retrovisor-externo);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#espelho-retrovisor-interno:hover:after {
    content: var(--espelho-retrovisor-interno);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#lente-do-retrovisor:hover:after {
    content: var(--lente-do-retrovisor);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#pisca-retrovisor:hover:after {
    content: var(--pisca-retrovisor);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#retrovisor-externo:hover:after {
    content: var(--retrovisor-externo);
}

#retrovisores-internos-e-externos.painel-categorias__categoria-itens.ativo
    a#retrovisor-interno:hover:after {
    content: var(--retrovisor-interno);
}

/* #endregion PREVIEW - RETROVISORES */

/* #region PREVIEW - SUSPENSÕES */

#suspensao.painel-categorias__categoria-itens.ativo
    a#amortecedor-suspensao:hover:after {
    content: var(--amortecedor-suspensao);
}

#suspensao.painel-categorias__categoria-itens.ativo
    a#bandeja-de-suspensao:hover:after {
    content: var(--bandeja-suspensao);
}

#suspensao.painel-categorias__categoria-itens.ativo
    a#bieleta-de-suspensao:hover:after {
    content: var(--bieleta-suspensao);
}

#suspensao.painel-categorias__categoria-itens.ativo
    a#pivo-de-suspensao:hover:after {
    content: var(--pivo-suspensao);
}

/* #endregion PREVIEW - SUSPENSÕES */

/* #region PREVIEW - RADIADORES */

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#aditivo-radiador:hover:after {
    content: var(--aditivo-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#defletor-radiador:hover:after {
    content: var(--defletor-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#eletroventilador-radiador:hover:after {
    content: var(--eletroventilador-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#gmv-radiador:hover:after {
    content: var(--gmv-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#grade-do-radiador:hover:after {
    content: var(--grade-do-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#grade-do-radiador:hover:after {
    content: var(--grade-do-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#moldura-grade-radiador:hover:after {
    content: var(--moldura-grade-radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#radiador:hover:after {
    content: var(--radiador);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#reservatorio-de-agua-radiador:hover:after {
    content: var(--reservatorio-de-agua-radiador);
}

/* #endregion PREVIEW - RADIADORES */

/* #region PREVIEW - CONDENSADORES */

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#condensador-ar-condicionado:hover:after {
    content: var(--condensador-ar-condicionado);
}

#radiadores-e-condensadores.painel-categorias__categoria-itens.ativo
    a#gmv-condensador:hover:after {
    content: var(--gmv-condensador);
}

/* #endregion PREVIEW - CONDENSADORES */

/* #region PREVIEW - AROMATIZANTES */

#higienizadores-e-filtros.painel-categorias__categoria-itens.ativo
    a#aromatizante:hover:after {
    content: var(--aromatizante-aromatizante);
}

/* #endregion PREVIEW - AROMATIZANTES */

/* #region PREVIEW - HIGIENIZADORES */

#higienizadores-e-filtros.painel-categorias__categoria-itens.ativo
    a#higienizador-ar-condicionado:hover:after {
    content: var(--higienizador-de-ar-condicionado);
}

/* #endregion PREVIEW - HIGIENIZADORES */

/* #region PREVIEW - FILTROS */

#higienizadores-e-filtros.painel-categorias__categoria-itens.ativo
    a#filtro-ar-condicionado:hover:after {
    content: var(--filtro-ar-condicionado);
}

/* #endregion PREVIEW - FILTROS */

/* #region PREVIEW - BORRACHAS */

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#borracha-janela:hover:after {
    content: var(--borracha-janela);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#borracha-universal-parabrisa:hover:after {
    content: var(--borracha-universal-parabrisa);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#borracha-universal-vigia:hover:after {
    content: var(--borracha-universal-vigia);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#borracha-vigia:hover:after {
    content: var(--borracha-vigia);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#borracha-parabrisa:hover:after {
    content: var(--borracha-parabrisa);
}

/* #endregion PREVIEW - BORRACHAS */

/* #region PREVIEW - PALHETAS */

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#palheta-para-brisa:hover:after {
    content: var(--palheta-para-brisa);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#palheta-vigia:hover:after {
    content: var(--palheta-vigia);
}

#palhetas-e-borrachas.painel-categorias__categoria-itens.ativo
    a#reservatorio-de-agua-limpador:hover:after {
    content: var(--reservatorio-de-agua-limpador);
}

/* #endregion PREVIEW - PALHETAS */

/* #region PREVIRE - LATARIAS */

#paralama-e-capo.painel-categorias__categoria-itens.ativo
    a#latarias-capo:hover:after {
    content: var(--latarias-capo);
}

#paralama-e-capo.painel-categorias__categoria-itens.ativo
    a#latarias-para-barro:hover:after {
    content: var(--latarias-para-barro);
}

#paralama-e-capo.painel-categorias__categoria-itens.ativo
    a#latarias-paralama:hover:after {
    content: var(--latarias-paralama);
}

/* #endregion REVIRE - LATARIAS */

.painel-categorias .painel-categorias__categoria-itens a:hover {
    padding-left: 5px;
}

.painel-categorias .painel-categorias__categoria-itens.ativo {
    display: flex;
}

.painel-categorias .painel-categorias__categoria-itens.ativo > ul {
    margin-right: 70px;
}

.painel-categorias .painel-categorias__categoria-itens-lista > a {
    color: var(--blue-500);
    font-weight: var(--bold);
    display: block;
    margin-bottom: 25px;
}

.painel-categorias .painel-categorias__categoria-itens-lista > ul > li {
    color: var(--gray-700);
    min-width: 220px;
    min-height: 34px;
}

.painel-categorias
    .painel-categorias__categoria-itens-lista
    .painel-categorias__categoria-itens-lista-menu
    > li {
    min-width: 250px;
}

.painel-categorias .painel-categorias__categoria-itens-lista > ul > li > a {
    color: var(--gray-700);
    display: block;
    height: 100%;
    padding: 7px 0;
    border-radius: 4px;
}

.painel-categorias
    .painel-categorias__categoria-itens-lista
    > ul
    > li
    > a:hover {
    background: var(--gray-100);
}

.painel-categorias
    .painel-categorias__categoria-itens-lista
    .painel-categorias__categoria-itens-lista-menu
    > li
    > a:hover {
    color: var(--blue-500);
    font-weight: var(--bold);
}
/* #region RESET MAEZTRA (╯°□°）╯︵ ┻━┻ */

.topo .container:before,
.nav .container:before,
.topo .container:after,
.nav .container:after {
    display: unset;
    content: none;
    clear: none;
}

body.home {
    padding-top: 0;
}

.shelf-qd-v1:hover {
    z-index: unset;
}

.header-qd-v1 {
    padding-top: 0;
    padding-bottom: 0;
}

.topo {
    /* z-index: 900001; */
}

.nav {
    /* z-index: 900000; */
}

body[data-qd-scroll-0="1"] {
    padding-top: 0;
}

.product-qd-v1-float-bar {
    top: 120px !important;
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.3);
}

@media (min-width: 1200px) {
    body[data-qd-scroll-1="1"] .product-qd-v1-float-bar {
        top: 110px;
    }
}

.fixed-buttons-qd-v1 {
    display: none !important;
}

@media (max-width: 991px) {
    .geo-picker {
        width: calc(100% - 60px);
    }

    body:not(.home) {
        padding-top: unset;
    }
}

body div#ajaxBusy {
    display: none !important;
}

/* #endregion RESET MAEZTRA (╯°□°）╯︵ ┻━┻ */

hr {
    position: absolute;
    width: 100%;
    border: 0;
    border-top: 1px solid #eee;
    margin: 0;
}

#banner_topo_desktop,
#banner_topo_mobile {
    display: block;
    width: 100%;
}
#banner_topo_desktop {
    object-fit: contain;
    vertical-align: middle;
    min-height: 34px;
    max-height: 50px;
}

@media (min-width: 992px) {
    #banner_topo_mobile {
        display: none;
    }
}

@media (max-width: 992px) {
    #banner_topo_desktop {
        display: none;
    }
}