html, body {
        min-height: 100vh;       /* altura mínima da tela */
        height: 100%;
        margin: 0;
        padding: 0;

        background-color: white;
        font-family: Arial, sans-serif;
        overflow-x: hidden;
}

@keyframes aparecer{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.vitrine-fotos {
    width: 100%;
    height: 10vh;
    margin: 10px 0;

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

.pagina2  .vitrine-fotos  img {
    width: 20%;
    aspect-ratio: 1 / 1;
    object-fit: cover; /* preenche o espaço da célula */
    border-radius: 10px;
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
}


/* Pagina ===================================================================== */
    div.pagina {
        width: 95%;
        padding: 0;
        height: auto;
        padding-bottom: 10vh;
        color: rgb(50, 50, 50);
        margin: 0 auto;
        background-color: white;
        border-radius: 0 0 60px 60px;

        animation: aparecer 0.5s ease;
    }

    img.logo {
        width: auto !important;
        height: 40px !important;
        display: block !important;
        margin: 0px !important;
        max-width: 200px;
        object-fit: contain;
    }

    div.pagina  img.banner {
        width: 100%;
        display: block;
        margin: 20px auto 0 auto;
        border-radius: 10px;
    }

    div.pagina  h4 {
        width: 100%;
        display: block;
        margin: 20px 0 0 0;
    }

    div.pagina h1 {
        display: block;
        margin: 0 auto 6% auto;
        text-align: center;
     }




    .compartilhar {
        width: auto !important;
        height: 22px !important;
        margin: auto 15px !important;
        padding: 0 !important;
     }
     .compartilhar:hover {
        opacity: 0.7;
        cursor: pointer;
     }



    div.fotoProduto {
        width: 100vw;
        height: auto;
        margin: 5% 0 0 -3%; 

    }
    div.fotoProduto img {
        width: 100vw !important;
        max-height: 100vw;
        object-fit: cover;
    }

    div.pagina2 {
        width: 95%;
        height: auto;
        padding: 1% 2.5% 10vh 2.5%;
        margin: auto;

        color: rgb(50, 50, 50);
        background-color: white;

        animation: aparecer 0.5s ease;
    }


    div.pagina2 h4.nomeProduto {
        display: block;
        margin: 10px 0 0 0;
        font-size: 17px !important;
    }
    div.pagina2 h4 {
        display: block;
        margin: 20px 0 0 0;
        font-size: 14px !important;
    }
    div.pagina2 h3 {
        display: block;
        margin: 0 0 20px 0;
        color: #00B6B2;
        font-size: 18px;
    }
    div.pagina2 img {
        width: 20%;
        height: auto;
    }

    
    div.buttonComprar {
        width: 95%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        background-color: #00B6B2;
        color: white;
        padding: 1px;
        font-size: 17px;
        border-radius: 10px;
        text-align: center;
    }
    div.buttonComprar:active {
        background-color: #333;
        transform: translateY(-5px);
        opacity: 0.3;
    }

    div.buttonComprar img {
        width: 23px;
        height: auto;
    }

    img.buttonZap {
        width: 95% !important;
        height: auto !important;
    }
    img.buttonZap:active {
        transform: translateY(-5px);
        opacity: 0.3;
    }


    div.opcao {
        background-color: #EAEAEA;
        color: black;
        border-radius: 30px;
        width: 30%;
        height: 40px;

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

    div.cores {
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: left;    
        margin: 5px 0 20px 0;    
    }


    div.cores  h4 {
        margin: 0 5px 0 0;
    }

    div.todasCores {
        display: flex;
        overflow-x: auto;       /* habilita scroll horizontal */
        flex-wrap: nowrap;      /* evita quebra de linha */
        padding: 0;   /* espaço para scrollbar, se houver */
        gap: 5px;
    }
    div.todasCores::-webkit-scrollbar {
        height: 0; /* altura da barra de rolagem horizontal */
    }

    div.todasCores::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0);
        border-radius: 3px;
    }

    div.todasCores  div.cor {
        flex: 0 0 auto; /* evita que os itens encolham */
        display: block;
        width: 22px;
        height: 22px;
        background-color: black;
        margin: 0;
        border-radius: 20px;
        border: 1px solid black; /* 👈 borda preta de 2px */
    }




    div.cor {
        display: block;
        width: 12px;
        height: 12px;
        background-color: black;
        margin: 0;
        border-radius: 20px;
        border: 1px solid black; /* 👈 borda preta de 2px */
        transition: all 0.2s ease;
    }
    div.cor:active {
        transform: translateY(-1px);
        opacity: 0.3;
    }
    div.cor:hover {
        opacity: 0.7;
        cursor: pointer;
    }






    div.painelDescricao {
        width: 100%;
        margin: 0 0 120px 0;
        padding: 0;
    }

    div.painelDescricao p {
        font-size: 14px;
    }


    div.painelTamanho {
        width: 100%;
        height: auto;
        margin: 5px 0 0 0;
        padding: 0;
        
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        gap: 10px;

    }

    div.painelTamanho h4 {
        padding: 8px 0;
        border-radius: 5px;
        background-color: #fff;
        border: solid 1px rgba(0, 0, 0, 0.13);
        text-align: center;
        margin: 1px 0;
        transition: all 0.2s ease;
    }
    div.painelTamanho h4:active {
        transform: translateY(-5px);
        opacity: 0.3;
    }
    div.painelTamanho h4:hover {
        opacity: 0.7;
        cursor: pointer;
    }








    div.categorias {
        display: flex;
        width: 107%;
        margin-left: -2.5%;
        gap: 5vw;

        overflow-x: auto;       /* habilita scroll horizontal */
        flex-wrap: nowrap;      /* evita quebra de linha */
        padding: 0 15px 15px 15px;   /* espaço para scrollbar, se houver */
        box-sizing: border-box;
        overflow-y: hidden;
    }

    /* opcional: esconder scrollbar no Chrome/Safari */
    div.categorias::-webkit-scrollbar {
        height: 0px;
    }

    div.categorias::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 3px;
    }



    div.cat {
        flex: 0 0 auto;         /* impede que o card encolha */
        position: relative;
        width: 18.5vw;         /* largura do card */
        height: auto;        /* altura do card */
        border-radius: 10px;
        /* overflow: visible; */    /* permite que a imagem saia do card */
        display: flex;
        padding: 0;
        margin: 5px 5px 20px 0px;
        transition: all 0.2s ease;
    }
    div.cat:active {
        background-color: rgb(150, 150, 150);
        transform: translateY(-5px);
        opacity: 0.3;
    }

    .cat-text {
        position: absolute;   /* texto sobreposto */
        bottom: -35px;
        left: 0;
        margin: 10px 0 0 0;
        color: black;
        font-size: 1.5vh;
        height: 30px;
        width: 100%;
        text-align: center;

        padding: 0;
        margin: 0;
    }

    .cat-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
    }




    div.fixed-comprar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 80px;
        left: 0;

        display: flex;              /* organiza itens na horizontal */
        justify-content: space-between; /* espaça os itens para as extremidades */
        align-items: center;        /* centraliza verticalmente */
        overflow: hidden;           /* evita que conteúdo extrapole */
        padding: 1.5% 2%;
        box-sizing: border-box;
        margin: 0;
        background-color: white;
    }




    div.barrinha2 {
        width: 100%;
        height: auto;
        display: flex;              /* organiza itens na horizontal */
        justify-content: space-between; /* espaça os itens para as extremidades */
        align-items: center;        /* centraliza verticalmente */
        border-radius: 5px;         /* opcional: cantos arredondados */
        overflow: hidden;           /* evita que conteúdo extrapole */
        padding: 0;
        margin: 0;
    }

    div.barrinha {
        width: 100%;
        height: auto;
        display: flex;              /* organiza itens na horizontal */
        justify-content: space-between; /* espaça os itens para as extremidades */
        align-items: center;        /* centraliza verticalmente */
        border-radius: 5px;         /* opcional: cantos arredondados */
        overflow: hidden;           /* evita que conteúdo extrapole */
        padding: 0;
        margin: 12px 0;
    }

    div.barrinha  h4 {
        width: 50%;
        color: #000000;
        font-size: 17px;
        padding: 0;
        margin: 0;
    }

    div.barrinha  .h4-2 {
        color: #7E7E7E;
        font-size: 14px;
        font-weight: 100;
        padding: 0;
        margin: 0;
    }

    div.barrinha  a {
        text-decoration: none;
        color: #00B6B2;
        font-size: 14px;
        transition: all 0.2s ease;
    }
    div.barrinha  a:active {
        transform: translateY(-5px);
        opacity: 0.3;
    }


    div.vitrine {
        display: flex;
        flex-wrap: wrap;   /* permite quebrar linha */
        gap: 4%;
        width: 100%;
        height: auto;
    }

    .estoque {
        position: relative;
        width: 100%;
        height: 1px;
    }

    .textoEstoque{
        position: absolute;

        bottom: 0;
        right: 10px;

        background-color: #F5F5F5;
        border-radius: 15px;
        color: #FD7777;
        padding: 5px 12px;
        font-size: 9px;
    }

    div.left {
        display: flex;
        align-items: center;
        justify-content: left;
    }
    div.right {
        display: flex;
        align-items: center;
        justify-content: right;
    }



    div.DivisorProduto {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    div.left-colunm {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
    div.right-colunm {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
   


    


    div.vitrine  div.produto {
        width: 48%;
        height: auto;
        margin-bottom: 30px;
        box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.1);
        border-radius: 10px;
        padding-bottom: 10px;
        transition: all 0.2s ease;
    }
    div.produto:active {
        transform: translateY(-5px);
        opacity: 0.3;
    }

    div.vitrine  div.produto  img {
        width: 100%;
        height: 20vh;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
    }

    div.vitrine  div.produto  p.preco {
        color: rgb(0, 0, 0);
        font-size: 12px;
        margin: 10px 10px;
    }

    div.vitrine  div.produto  p.info {
        color: rgb(0, 0, 0);
        font-size: 12px;
        margin: 6px 10px;
    }





    div.tela-buscar {
        width: 100%;
        height: 100vh;
        background-color: rgb(0, 0, 0, 0.5);

        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
    }

    div.buscar {
        width: 70%;
        height: auto;
        padding: 20px 25px 50px 25px;
        background-color: rgb(255, 255, 255);
        margin: auto;
        border-radius: 10px;
        transform: translateY(-50px);
    }

    div.buscar div.up {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    div.buscar div.up svg {
        width: 30px;
        height: 30px;
    }
    div.buscar div.up svg path {
        fill: black;
    }
    div.buscar div.up svg circle {
        fill: #975959;
    }




    div.inputBuscar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 35px;

        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 15px;

        margin: auto;
        padding: 8px 0;
    }
    
    div.inputBuscar  img {
        width: 18px !important;
        height: 18px !important;
        opacity: 0.3;

        margin: 0 10px 0 20px !important;
        padding: 0 !important;
    }

    input {
      width: 100%;
      height: 100%;
      font-size: 3.5vw;
      padding: 0;
      border: 0px solid black;
      background-color: rgb(0, 0, 0, 0);
      color: black;
      box-sizing: border-box;
      outline: none; /* 👈 remove o contorno no clique/foco */ 
     }
     input::placeholder {
        color: rgba(0, 0, 0, 0.3);
     }

     .space-up {
        height: 70px;
     }




     div.barra-up {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        width: 100%;
        background-color: rgb(255, 255, 255);
        padding-bottom: 0px;
     }

     div.barra-up2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 50;
        width: 100%;
        padding-bottom: 0px;
     }

     div.barra-up  div.up, div.barra-up2  div.up {
        display: block;
        margin: auto;
        width: 95%;

        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3% 0 2% 0;
        position: relative;
     }

     div.quantidadeCarrinho {
        width: 20px;
        height: 20px;

        position: absolute;
        top: 20px;
        right: 5px;
        background-color: black;
        color: white;
        border-radius: 50px;
        pointer-events: none;

        display: flex;
        justify-items: center;
        align-items: center;

        p {
            width: 100%;
            font-size: 1;
            font-weight: bold;
            padding: 0;
            margin: 0;
            text-align: center;
        }
     }




     div.barra-up svg {
        width: auto;
        height: 25px;
        padding: 0 10px;
        margin: 0;
     }
     div.barra-up img {
        width: auto;
        height: 25px;
        padding: 0;
        margin: 0 20px;
     }

     div.barra-up2 svg {
        width: auto;
        height: 25px;
        padding: 0 10px;
        margin: 0;
        /* filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4)); */
     }




     div.barra-up #buttonCarrinho {
        width: 30px;
        height: 30px;
        padding: 0 10px;
        margin: 0;
     }

     div.barra-up2 #buttonCarrinho {
        width: 50px;
        height: 50px;
        padding: 0 10px;
        margin: 0;
     }





     


     div.barra-up #buttonVoltar {
        width: 40px;
        height: 40px;
        padding: 0 10px;
        margin: 0;
     }

     div.barra-up2 #buttonVoltar {
        width: 65px;
        height: 65px;
        padding: 0 10px;
        margin: 0;
     }



     img.voltar {
        width: auto !important;
        height: 17px !important;
        margin: 0 20px !important;
        padding: 0 !important;
     }
    img.voltar:hover {
    cursor: pointer;
    opacity: 0.7;
    }





    div.barra-down {
        position: fixed;
        bottom: 0px;
        left: 0;
        z-index: 50;
        width: 100%;
        background-color: #FFFFFF;
        padding: 10px 0;
     }

     div.barra-down  div.down {
        display: block;
        margin: auto;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
     }

    div.barra-down  div.down  .button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        width: 80px;
        height: 60px;

        padding: 0;
        margin: 0;
        transition: all 0.2s ease;
    }
    div.barra-down  div.down  .button-icon:hover {
        transform: scale(1.05);
        cursor: pointer;
     }


     div.barra-down  div.down  .button-icon:active {
        transform: translateY(-5px);
        opacity: 0.3;
    }

     div.barra-down  div.down  .button-icon img {
        width: 20px;
        height: 20px;
        padding: 0 10px;
     }

     div.barra-down  div.down  .button-icon p {
        font-size: 10px;
        margin: 5px 0 0 0;
        text-align: center;
     }

      div.barra-down  div.down  .button-icon h6 {
        position: absolute;
        top: -20px;
        right: 20px;
        width: 10px;
        height: 10px;

        background-color: #E00000;
        color: #ffffff;
        padding: 3px;
        border-radius: 100px;
        text-align: center;
     }






    div.rodape {
        width: 90%;
        padding: 100px 5% 15vh 5%;
        height: auto;
        background-color: #999B85;
        margin: 0px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    div.rodape img{
        width: 30%;
        object-fit: contain; /* mantém proporção e evita distorção */
    }

    div.buttonWhatsapp {
        width: 30%;
        background-color: #25D82D;
        padding: 1% 20% 1% 4%;
        border-radius: 40px;
        display: flex;
        color: white;
        transition: all 0.2s ease;
    }
    div.buttonWhatsapp:active {
        background-color: #1b8b21;

        img {
            filter: brightness(0.6); /* escurece a imagem */
        }
        p {
            filter: brightness(0.6); /* escurece a imagem */
        }
    }

    div.buttonWhatsapp p {
        margin-left: 10px;
    }





    div.pagina3 {
        width: 90%;
        min-height: 80%;
        background-color: white;
        margin: 0 auto;
        padding: 0 0 80% 0;
        box-sizing: border-box;

        animation: aparecer 0.5s ease;
    }

    div.pagina3 h1 {
        display: block;
        margin: auto;
        text-align: left;
        font-size: 17px;
        font-weight: 600;
    }

    div.pagina3 h2 {
        display: block;
        margin: auto;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
    }



    div.pagina4 {
        width: 90%;
        min-height: 80%;
        background-color: white;
        margin: 0 auto;
        padding: 0 0 25% 0;

        animation: aparecer 0.5s ease;
    }

    div.pagina4 h1 {
        display: block;
        margin: auto;
        text-align: left;
        font-size: 17px;
        font-weight: 600;
    }

    div.pagina4 h2 {
        display: block;
        margin: auto;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
    }




    div.vitrineCarrinho {
        width: 100%;
        height: auto;
    }

    div.vitrineCarrinho div.item {
        display: flex;
        width: 100%;
        height: 100%;

        margin: 10px 0;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        box-sizing: border-box;
    }




    div.vitrineCarrinho div.item img {
        width: 10vh;
        height: 10vh;
        border-radius: 10px;
        object-fit: cover;
    }

    div.vitrineCarrinho div.item img.cat-voltar {
        width: auto;
        height: 17px;
        margin: 0 auto;
        padding: 0;

        transform: scaleX(-1);
    }

    div.vitrineCarrinho div.item div.info {
        width: 100%;
        padding: 0 0 0 20px;
    }


    div.vitrineCarrinho div.item img.lixo {
        width: 27px;
        height: 27px;
        transition: all 0.2s ease;
    }
    div.vitrineCarrinho div.item img.lixo:active {
        transform: translateY(-1px);
        opacity: 0.3;
    }
    div.vitrineCarrinho div.item img.lixo:hover {
        cursor: pointer;
        opacity: 0.8;
    }

   

    div.vitrineCarrinho div.item h4 {
        font-size: 14px;
        margin: 0 0 5px 0;
        padding: 0;
    }

    div.vitrineCarrinho div.item p {
        font-size: 10px;
        margin: 5px 0;
        padding: 0;
        color: #666666;
    }

    div.vitrineCarrinho div.item h3 {
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        padding: 0;
        color: #00B6B2;
    }



    div.vitrineCarrinho div.item svg {
        width: 20px;
        height: 20px;
        margin: 20px 0 0 0;
    }

    div.buttonPedido {
        display: none;
        width: 100%;
        height: 70px;
        background-color: #2FAE4A;
        margin: 0 auto;

        border-radius: 10px;
        color: white;
        font-size: 15px;
        display: flex;              /* ativa flexbox */
        align-items: center;        /* centraliza vertical */
        justify-content:space-evenly;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    div.buttonPedido:active {
        background-color: #333;
        transform: translateY(-5px);
        opacity: 0.3;
    }

     div.buttonPedido img {
        width: 30px;
        height: 30px;
    }


    select {
        padding: 8px 12px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
        background-color: #f9f9f9;
        color: #333;
    }


    div.resumo-down {
        position: fixed;
        bottom: 80px;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 1% 5%;
        box-sizing: border-box;
        background-color: white;
    }

    div.resumo-down div.banner-resumo {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        border: solid 1px rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    div.resumo-down div.div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 25px;
    }

    div.resumo-down h1 {
        width: 100%;
        height: auto;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    div.resumo-down p {
        font-size: 14px;
    }

    div.resumo p#totalValor {
        font-size: 20px;
        font-weight: bold;
        color: #00B6B2;
    }





@media only screen and (min-width: 768px) {

    /* PAGINA INDEX ---------------------------------------------------------------------------------------- */

    div.inputBuscar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 20px;

        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 10px;

        margin: auto;
        padding: 8px 0;
    }
    
    div.inputBuscar  img {
        width: 15px !important;
        height: 15px !important;
        opacity: 0.3;

        margin: 0 10px 0 20px !important;
        padding: 0 !important;
    }


    input {
      width: 100%;
      height: 100%;
      font-size: 11px;
      padding: 0;
      border: 0px solid black;
      background-color: rgb(0, 0, 0, 0);
      color: black;
      box-sizing: border-box;
      outline: none; /* 👈 remove o contorno no clique/foco */ 
    }
    input::placeholder {
        color: rgba(0, 0, 0, 0.3);
    }

    div.pagina  img.banner {
        width: 100%;
        aspect-ratio: 3 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
    }


    div.categorias {
        display: flex;
        width: 107%;
        margin-left: -2.5%;
        gap: 15px;

        overflow-x: auto;       /* habilita scroll horizontal */
        flex-wrap: nowrap;      /* evita quebra de linha */
        padding: 0 15px 25px 30px;   /* espaço para scrollbar, se houver */
        box-sizing: border-box;
        overflow-y: hidden;
    }


    div.cat {
        flex: 0 0 auto;         /* impede que o card encolha */
        position: relative;
        width: 5.5vw;         /* largura do card */
        height: auto;        /* altura do card */
        border-radius: 10px;
        /* overflow: visible; */    /* permite que a imagem saia do card */
        display: flex;
        padding: 0;
        margin: 5px 5px;
        transition: all 0.2s ease;
    }
    div.cat:hover {
        background-color: rgb(150, 150, 150);
        transform: translateY(-5px);
        opacity: 0.7;
        cursor: pointer;
    }

    .cat-text {
        position: absolute;   /* texto sobreposto */
        bottom: -35px;
        left: 0;
        margin: 10px 0 0 0;
        color: black;
        font-size: 1.5vh;
        height: 30px;
        width: 100%;
        text-align: center;

        padding: 0;
        margin: 0;
    }

    .cat-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }


    div.vitrine  div.produto {
        width: 16.8%;
        height: auto;
        margin-bottom: 30px;
        box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.1);
        border-radius: 10px;
        padding-bottom: 10px;
        transition: all 0.2s ease;
    }
    div.produto:hover {
        transform: translateY(-5px);
        opacity: 0.8;
        cursor: pointer;
    }


    div.vitrine  div.produto  img {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px 10px 0 0;
        object-position: center;
        object-fit: cover;
        transition: all 0.4s ease;
    }
    div.vitrine  div.produto  img:hover {
        object-fit: contain;
    }

    

    div.vitrine  div.produto  p.info {
        color: rgb(0, 0, 0);
        font-size: 12px;
        margin: 6px 10px;
    }
    div.vitrine  div.produto:hover  p.info {
        color: #00B6B2;
    }
    div.vitrine  div.produto  p.preco {
        color: rgb(0, 0, 0);
        font-size: 12px;
        margin: 10px 10px;
    }


    div.barra-down {
        position: fixed;
        bottom: 0px;
        left: 0;
        z-index: 50;
        width: 100%;
        background-color: #FFFFFF;
        padding: 5px 0;
     }

     div.barra-down  div.down {
        display: block;
        margin: auto;
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: space-between;
     }

    div.barra-down  div.down  .button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        width: 50px;
        height: 40px;

        padding: 0;
        margin: 0;
        transition: all 0.2s ease;
    }
     div.barra-down  div.down  .button-icon img {
        width: 15px;
        height: 15px;
        padding: 0 10px;
     }

     div.barra-down  div.down  .button-icon p {
        font-size: 8px;
        margin: 5px 0 0 0;
        text-align: center;
     }

      div.barra-down  div.down  .button-icon h6 {
        position: absolute;
        top: -20px;
        right: 10px;
        width: 8px;
        height: 8px;

        background-color: #E00000;
        color: #ffffff;
        padding: 3px;
        border-radius: 100px;
        text-align: center;
        font-size: 8px;
     }

    /* PAGINA PRODUTO ---------------------------------------------------------------------------------------- */


    div.DivisorProduto {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
    }
    div.left-colunm {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        margin-bottom: 120px;
    }
    div.right-colunm {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }



    div.fotoProduto {
        width: 90%;
        height: auto;
        margin: 0;

    }
    div.fotoProduto img {
        width: 100% !important;
        height: auto;
        object-fit: cover;
    }


    .vitrine-fotos {
        width: 50%;
        height: 10vh;
        margin: 10px 0;
        gap: 10px;

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

    .pagina2  .vitrine-fotos  img {
        width: auto;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover; /* preenche o espaço da célula */
        border-radius: 10px;
        margin: 0;
        padding: 0;
    }
    .pagina2  .vitrine-fotos  img:hover {
       opacity: 0.8;
       cursor: pointer;
    }





     div.fixed-comprar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 50px;
        left: 0;

        display: flex;              /* organiza itens na horizontal */
        justify-content: space-between; /* espaça os itens para as extremidades */
        align-items: center;        /* centraliza verticalmente */
        overflow: hidden;           /* evita que conteúdo extrapole */
        padding: 1px 2%;
        box-sizing: border-box;
        margin: 0;
        background-color: white;
    }

    img.buttonZap {
        width: 20% !important;
        height: auto !important;
    }
    img.buttonZap:hover {
        transform: translateY(-1px);
        opacity: 0.8;
        cursor: pointer;
    }

    div.buttonComprar {
        width: 30%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        background-color: #00B6B2;
        color: white;
        padding: 1px;
        font-size: 14px;
        border-radius: 10px;
        text-align: center;
    }
    div.buttonComprar:hover {
        background-color: #333;
        transform: translateY(-1px);
        opacity: 0.8;
        cursor: pointer;
    }

    div.buttonComprar img {
        width: 15px;
        height: auto;
    }



    /* PAGINA CARRINHO ---------------------------------------------------------------------------------------- */

    div.pagina3 {
        width: 90%;
        min-height: 80%;
        background-color: white;
        margin: 0 auto;
        padding: 0 0 20% 0;
        box-sizing: border-box;
    }

    div.resumo-down {
        position: fixed;
        bottom: 50px;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 1% 5%;
        box-sizing: border-box;
        background-color: white;
    }


    div.buttonPedido {
        display: none;
        width: 20%;
        height: 40px;
        background-color: #2FAE4A;
        margin: 0;

        border-radius: 10px;

        display: flex;              /* ativa flexbox */
        align-items: center;        /* centraliza vertical */
        justify-content:space-evenly;
        box-sizing: border-box;
        transition: all 0.2s ease;

        img {
            width: 20px;
            height: 20px;
        }

        p {
            color: white;
            font-size: 11px;
        }
    }
    div.buttonPedido:hover {
        background-color: #333;
        transform: translateY(-5px);
        opacity: 0.3;
        cursor: pointer;
    }
}