body{background-color: #FFFAF0;

color: #8B4513;

}

body a{
	color: #8B4513;
		/*#8B4568; */
}

.normal{ color: #8B4513; font-family: arial,"Open Sans", sans-serif, cursive; font-size:16px;}

.pCenter{text-align: center; color: #eeeeee; font-family: 'Brush Script MT', cursive;}
.header{/*column-count: 3; column-gap: 1em;*/ position: relative; background-color: #8B4513; align-items: center;}

.container-menu{
	display: grid; 
	grid-template-columns: repeat(3, 1fr);
	/*grid-auto-rows: auto;*/
	column-gap: 1em;
	position: relative;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	width: 100%;	
	float: center;
	align-items:right;
	}

.div-menu{
	display: flex;
	gap: 1px;
	align-items: center;
	width: 10%; 
	float: center;
	position: relative;
	
	
	
}

/* --- Estilos para a Barra de Pesquisa --- */
 .barra-pesquisa {
	display: flex;
    gap: 1px;
    margin-bottom: 30px; /* Espaço abaixo da barra de pesquisa */
    align-items: center;
	width: 33%;
	min-width: 400px;
}

.barra-pesquisa input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex-grow: 1; /* Faz o input ocupar o máximo de espaço possível */
    font-size: 16px;
}

.barra-pesquisa img {
    background-color: #ffffff;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0px;
    transition: background-color 0.3s ease;
}

.barra-pesquisa img:hover {
    background-color: #666666;
}


/* Estilos Menu */
 .menu-navegacao {
	display: flex;
	/*width: 33%;*/
     
  }

        .menu-navegacao ul {			
            list-style: none; /* Remove os marcadores da lista */
            margin: 10px;
            padding: 10px;
            display: flex; /* Transforma os itens em linha */
            justify-content: center; /* Centraliza os itens horizontalmente */
            gap: 10px; /* Espaço entre os itens do menu */
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
			
        }

        .menu-navegacao li {
            /* Os itens da lista já estarão em linha devido ao flexbox no ul */
            margin: 0; /* Garante que não há margens indesejadas */
			width: 33%;
			padding: 10px;
			
			
			text-decoration: none; /* Remove o sublinhado dos links */
            padding: 2px 3px; /* Espaçamento interno para os links */
            display: block; /* Garante que o padding e hover funcionem em toda a área do link */
            transition: background-color 0.3s ease; /* Transição suave ao passar o mouse */
            font-weight: bold;
			font-size:18px;
			color:#8B4513;
			
        }
/*
        .menu-navegacao a {
            /*color: white; /* Cor do texto dos links 
            text-decoration: none; /* Remove o sublinhado dos links 
            padding: 2px 3px; /* Espaçamento interno para os links 
            display: block; /* Garante que o padding e hover funcionem em toda a área do link 
            transition: background-color 0.3s ease; /* Transição suave ao passar o mouse 
            font-weight: bold;
			font-size:18px;
			color:#8B4513;
        }*/

        .menu-navegacao li:hover,
        .menu-navegacao li.ativo {
            background-color: #F5DEB3; /* Cor de fundo ao passar o mouse ou item ativo */
            border-radius: 5px; /* Bordas arredondadas ao passar o mouse */
        }



/*Estila da Saudação, loguin e carrinho*/
.saudacao {
    text-align: right;
	color: #ffffff
}
.div-login {
	/*display: flex;*/
    /*gap: 1px;*/
    margin-bottom: 0px; /* Espaço abaixo da barra de pesquisa */
	margin-right: 0px;
	margin-left: auto;
    
	
	float: right;
	border-style: solid;
	border-color: #888;
	
	display: grid;
	grid-template-columns: 1fr 1fr; /* 4 colunas com igual espaço */
	/*grid-auto-rows: auto;*/ /* Cada linha tem altura automática */
	grid-gap: 1px;
	height: 80px;
	width: 150px;
	/*top:200;*/
	padding: 0px;
	background-color:#8B4513;	
	justify-content: center;	
	
}
.div-login img {
    background-color: #ffffff;    
    border: none;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;	
	margin-left:0px;
	margin-top:10px;
	height: 40px;
	display: flex;
	
}

.div-login p,a {      
    text-align: center; color: #ffffff; font-family: 'Brush Script MT', cursive;
	padding: 1px;
	margin:0 0 0 0;
}
#divLog {
    width: 70px;
	height: 80px;
	padding: 1px;
	margin:0 5px 5px 5px;
	align-items:center;
	 
	
}
#totalCarrinho {
	position:relative;
    width: 50px;
	height: 80px;
	padding: 1px;
	margin:0 0 0 0;
	
}


#totalCarrinho2 {      
            position: absolute;
			top:10px;
			right:10px;
			z-index:998;
			
			font-size: 24px;			
			height: 25px;
			width: 15px;
			color:red;
        }

table{border-collapse:collapse;}


td{border:1px solid black;}

.container2{
	display: flex;
	justify-content: space-between;
	top:200;
}
.container{
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 colunas com igual espaço */
	grid-auto-rows: auto; /* Cada linha tem altura automática */
	grid-gap: 20px;
	width: 100%;
	top:200;
}


@media (max-width: 1500px){
	.container{
		grid-template-columns: repeat(3, 1fr);
	}
	.menu-navegacao ul {display: block; /* Transforma os itens em linha*/ }
}

@media (max-width: 1000px){
	.container{
		grid-template-columns: repeat(2, 1fr);
	}
	.container-menu{grid-template-columns: repeat(2, 1fr);}
	
	  
	.menu-navegacao ul {display: block; /* Transforma os itens em linha*/ }
}

/*diminui o número de colunas de container conforme tamanho da tela*/
@media (max-width: 500px){
	.container{
		grid-template-columns: 1fr;
	}
	.container-menu{grid-template-columns: repeat(1, 1fr);}
}

.itens{
	border: 1px solid #333333;
	padding: 10px;
	margin-Bottom: 10px;
	/*background-color: #bbbbbb;*/
	height: 600px;
	text-align:center;
}

.itens img{
	border: 1px solid #333333;
	padding: 10px;
	/*margin-Bottom: 10px;*/
	max-height: 75%; /*imagem não ultrapassa 80% da altura do container*/
	max-width: 95%; /*imagem não ultrapassa largura do container*/
	
}

.itens2{
	border: 1px solid #333333;
	padding: 10px;
	margin-Bottom: 10px;
	/*background-color: #eeeeee;*/
	height: 100vw;
	width: 100vw;
	text-align:center;
}

.itens2 img{
	border: 1px solid #333333;
	padding: 10px;
	/*margin-Bottom: 10px;*/
	max-height: 40%; /*imagem não ultrapassa 80% da altura do container*/
	max-width: 40%; /*imagem não ultrapassa largura do container*/
	
}


.imgZoo {
	border: 1px solid #333333;
	padding: 10px;
	margin-Bottom: 10px;
	/*background-color: #bbbbbb;*/
	height: 600px;
	text-align:center;
}

.imgZoom:hover {
	transform: scale(2); /* Increase image size when hovered */
	transition: transform 5s ease;
}

.iAtualizar {
	background-color: transparent;
	border:none;
}



.produto {
           /* background-color: #fff;*/
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
.produto h2 {
            color: #0056b3;
            margin-top: 0;
        }
.produto p {
            margin: 5px 0;
        }
.produto button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
.produto button:hover {
            background-color: #218838;
        }
		
		
/* estilo para carrinho de compras */
#carrinho-container {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 30px;
			position: absolute;
			align: right;
			top:0;
			right:0;
			z-index:999;
			display: none;
        }
		
 #carrinho-tabela {
            width: 100%; /* Ocupa toda a largura do contêiner */
            border-collapse: collapse; /* Remove o espaçamento entre as bordas das células */
            margin-bottom: 15px;
        }
        #carrinho-tabela th, #carrinho-tabela td {
            border: 1px solid #e0e0e0;
            padding: 10px;
            text-align: left;
        }
        #carrinho-tabela th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #555;
        }
        #carrinho-tabela tbody tr:nth-child(even) { /* Estilo para linhas pares (zebra effect) */
            background-color: #f9f9f9;
        }
        #carrinho-tabela .remover-item {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #carrinho-tabela .remover-item:hover {
            background-color: #c82333;
        }
		
        #carrinho-lista {
            list-style: none;
            padding: 0;
            margin-bottom: 15px;
        }
        #carrinho-lista li {
            background-color: #e9ecef;
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #carrinho-lista li .remover-item {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-left: 10px;
        }
        #carrinho-lista li .remover-item:hover {
            background-color: #c82333;
        }
        #total-carrinho {
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 15px;
            text-align: right;
        }
        #botoes-carrinho {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        #botoes-carrinho button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        #botoes-carrinho button:hover {
            background-color: #0056b3;
        }
        #botoes-carrinho button.limpar {
            background-color: #6c757d;
        }
        #botoes-carrinho button.limpar:hover {
            background-color: #5a6268;
        }
		
		

		
 






.div-larustica {
	/*display: flex;*/
    gap: 10px;
    margin-bottom: 30px; /* Espaço abaixo da barra de pesquisa */
    align-items: center;
	/*right:0;*/
	float: center;
}

/*
.menu{
	display: grid;
	grid-template-columns: repeat(7, 1fr); 
	grid-auto-rows: auto; 
	grid-gap: 20px;
	width: 100%;
	top:200;
}
*/


/* estilo para carrinho de compras */
#loginContainer {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
	border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 30px;
	position: absolute;
	top:-300px;
	right:0;
	z-index:999;
	display: none;
 }
 
 
 .form-group {
    margin-bottom: 15px;
    text-align: left;
 }

input[type="text"],input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

footer{
	
	font-family: 'Brush Script MT', arial,"Open Sans", sans-serif, cursive; 
	font-size:14px;
	 
}

footer li{
	font-size:18px;
	margin: 90px;
	/*list-style-type: square;/*, square; /*disclosure-closed;/*"\1F44D";*/
	list-style-image: url("../img/iGaucho1.jpg");
}



.confirmar {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
 }
.confirmar:hover {
	background-color: #0056b3;
}

.error-text {
    color: #e74c3c; /* Vermelho */
    font-size: 14px;
    margin-top: 5px;
    height: 18px; /* Mantém a altura para evitar pulos no layout */
    display: block; /* Garante que o span ocupe uma nova linha */
    visibility: hidden; /* Esconde o texto por padrão */
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

/* Estilo para quando a mensagem de erro deve ser visível */
.error-text.visible {
    visibility: visible;
    opacity: 1;
}
input.error-border { /* Alterado para uma classe mais genérica */
    border-color: #e74c3c; /* Vermelho */
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); /* Sombra vermelha */
}

.preco {
   color:#D2691E;
 }
 
 .rodape {
    display:none;
 }