@charset "UTF-8";

@media screen and (min-width: 389px) and (max-width: 670px){ 
/*TELAS DE 389PX A 670PX - CELULARES*/

    header{ /*AJUSTAR CABEÇALHO*/
        height: 6.5rem;
        z-index: 1007;
    }

    .logo h1 { /*AJUSTAR LOGO E NOME LOJA*/
        position: absolute;
        top: 32px;
        left: 50.1%;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-size: 2.1rem;
        transform: translate(-50%);
    }

    .logo p { /*ACENTO LOGO CEL*/
        top: 11px;
        left: 6.6rem;
        font-size: 2.7rem;
        display: block;
    }

    .navbar{ /*AJUSTAR MENU NAVEGAÇÃO*/
        width: 65vw;
        background-color: #fff;
        top: 0;
        left: 0;
        height: 100%;
        display: block;
        transition: .5s;
        transform: translate(-100%,0);
        z-index: 1005;
        color: var(--cor_text);
    }

    .navbar a { /*LINKS MENU NAVEGAÇÃO*/
        color: var(--cor_text);
    }

    .navbar .openNav { /*TRES TRAÇOS MENU CELULAR*/
        display: block;
        position: absolute;
        left: 106%;
        top: 2.2rem;
        width: 40px;
        height: 40px;
        padding: 5px;
    }

    .navbar .openNav span{ /*TRAÇOS MENU CELULAR*/
        display: block;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: var(--cor2);
        width: 25px;
        height: 2px;
        margin: 4px 0;
        transition: .5s;
    }

    .navbar:has(input[name="openNav"]:checked){ /*MOSTRAR MENU NAVEGAÇÃO*/
        transform: translate(0, 0);
    }

    .navbar:has(input[name="openNav"]:checked) .openNav span:nth-child(2){ 
    /*ESCONDER TRAÇO DO MEIO*/
        opacity: 0;
        transition: 0s;
    }

    .navbar:has(input[name="openNav"]:checked) .openNav span:nth-child(1){ 
    /*TRANSFORMAR PRIMEIRO TRAÇO*/
        transform: rotate(50deg) translate(6px, 4px);
        position: absolute;
        left: -2.9rem;
        top: -15px;
        background-color: #000000;
        width: 17px;
    }

    .navbar:has(input[name="openNav"]:checked) .openNav span:nth-child(3){
    /*TRANSFORMAR TERCEIRO TRAÇO*/
        transform: rotate(-50deg) translate(6px, -5.5px); 
        position: absolute;
        left: -2.8rem;
        top: 0;
        background-color: #000000;
        width: 17px;
    }

    .navbar input{ /*ESCONDER INPUT AO ABRIR MENU*/
        display: none;
    }

    .navbar li{ /*ITENS MENU NAVEGAÇÃO*/
        display: block;
        position: unset;
        border-bottom: .5px solid var(--cor1);
        padding: 1rem 1rem;
        position: relative;
        top: 3rem;
        font-size: 15px;
        font-family: var(--font);
        font-weight: 700;
    }

    .navbar .otherOption,
    .navbar .menu{ /*AJUSTAR OPÇÕES E MENU*/
        width: 100%;
        text-align: left;
    }

    .navbar .otherOption { /*AJUSTAR OPÇÕES ENTRAR/INSCREVER-SE*/
        width: 100%;
        text-align: center;
        position: absolute;
        top: 86.3%;
        right: 10px;
        color: var(--cor_text);
    }

    .navbar .otherOption ion-icon{ /*MOSTRAR ÍCONES OPÇÕES*/
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
    }

    .navbar .otherOption li{ /*ITENS OPÇÕES*/
        display: inline-block;
        border: none;
    }

    .navbar .menu li:hover{ /*EFEITO HOVER ITENS MENU*/
        background-color: unset ;
        border-left: 10px solid var(--cor7);
    }

    .navbar .menu label{ /*POSIÇÃO SETA SUBMENU*/
        cursor: pointer;
        display: block;
        float: right;
    }

    .navbar .menu label i{ /*ÍCONE SETA SUBMENU*/
        display: block;
        transition: .5s;
        margin-right: 0;
    }

    .navbar label:has(input:checked) ~ ul{ /*ABRIR SUBMENU*/
        max-height: 50vh;
    }

    .navbar .menu li ul{ /*AJUSTAR SUBMENU*/
        width: 100%;
        max-height: 0;
        position: unset;
        background-color: unset;
        display: block;
        overflow: hidden;
        transform: 1.5s;
        opacity: .8;
        border-left: 1px solid #ffffff22;
    }

    .navbar li li:hover{ /*EFEITO HOVER ITENS SUBMENU*/
        border-left: unset !important;
    }

    .submenu li { /*ITENS SUBMENU*/
        border-bottom: 0;
        padding: 10px 10px 10px 30px;
        position: relative;
        top: 2px;
    }

    .navbar label input:checked ~i { /*ROTACIONAR ÍCONE SETA SUBMENU*/
        transform: rotate(180deg);
    }

    .search-box{ /*AJUSTAR CAIXA PESQUISA*/
        top: 9%;
        margin-top: 2.3rem;
        width: 100%;
        z-index: 998;
    }

    .li.active{ /*AJUSTAR LISTA PESQUISA ATIVA*/
        margin-top: 5.02rem;
        z-index: 990;
        height: 45%;
    }

    .listProduct{ /*ITENS CARRINHO DE COMPRAS*/
        top: 1.5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .item_c { /*CADA ITEM DA LISTA DE PRODUTOS*/
        width: 170px;
        height: 350px;
        margin: 1rem auto 0;
    }

    .item_c a{
        height: 100%;
    }

    .item_c:hover{ /*HOVER CADA ITEM DA LISTA DE PRODUTOS*/
        transform: none;
    }

    .listCart .totalPrice{ /*PREÇO ITENS CARRINHO DE COMPRAS*/
        left: .9rem;
        top: 27px;
    }

    .categoria-vazia {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -200%);
        width: 90%;
    }

    .btn-remover-carrinho{ /*BOTÃO REMOVER ITENS CARRINHO*/
    position: relative;
    left: 17rem;
    bottom: 5rem;
    }

    .cart-summary { /*RESUMO CARRINHO DE COMPRAS*/
    top: 25rem;
    }

    .cartTab .btn_cart .checkOut { /*BOTÃO FINALIZAR COMPRA*/
        top: -3rem;
    }

    .slider{ /*POSIÇAO SLIDE*/
        margin-top: 7.97rem;
    }

    .manual-btn:hover{ /*MUDAR COR BOTÕES NAVEGAÇÃO MANUAL SLIDE*/
        opacity: .8;
        background-color: #00000000;
    }

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{  /*SEÇÕES DO FOOTER*/
        display: block; 
		width: 100%;
		margin-bottom: 40px;
		text-align: left;
	}

	.footer-distributed .footer-center i{ /*ÍCONES DO FOOTER CENTRO*/
		margin-left: 0;
	}
}