body {
	font-family: "Michroma", sans-serif;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;  /* eixo Y (vertical) */
	align-items: center;      /* eixo X (horizontal) */
	width: 100%;
	height: auto;
	margin: 0;
}

.mensagem-confirmacao {
      max-width: 500px;
      margin: auto;
      background: #f0f0f0;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 8px rgba(0,0,0,0.05);
      text-align: center;
    }
    .mensagem-confirmacao h1 {
      color: green;
      font-size: 28px;
      margin-bottom: 20px;
    }
    .mensagem-confirmacao p {
      font-size: 18px;
      line-height: 1.6;
    }
    .btn-voltar {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background-color: black;
      color: white;
      font-weight: bold;
      text-decoration: none;
      border-radius: 6px;
    }




 .finalizar-formulario {
      max-width: 500px;
      margin: auto;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
	
    form input {
      width: 91%;
      padding: 20px;
      margin-top: 10px;
      font-size: 16px;
      border-radius: 6px;
      border: 1px solid #ccc;
    }
	
	form select {
      width: 100%;
      padding: 20px;
      margin-top: 10px;
      font-size: 16px;
      border-radius: 6px;
      border: 1px solid #ccc;
    }
	
    .btn-finalizar {
      margin-top: 20px;
      background: green;
      color: white;
      font-weight: bold;
      padding: 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      width: 280px;
    }






	
	
.imagem {
  width: 90%;
  height: auto;
}

/* Quando for tela de celular (máx. 768px de largura) */
@media (max-width: 768px) {
  #imagem {
    content: url('images/banner-01-web.jpg');
	margin-top:50px;
  }
}

  #btn-home {
    display: none;
  }
  
  
  
  
  #carsome{
		display:none;
	}
  
  

/*head*/	
	.head{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	
			
	.head-center{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
	}
	
	.line-menu{
		background: linear-gradient(to right, #491953, #2c0c32);
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
			
	.head-center img{
		width:100%;
	}
			
	.nav{
		background: linear-gradient(to right, #491953, #2c0c32);
		width:100%;
		height:10vh;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.menu-left{
		width:40%;
		height:10vh;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.menu-left img{
		width:18%;
		margin:10vw;
	}
	
	.menu-right{
		width:100%;
		height:10vh;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
/*menu nav*/
	
	
	.menu {
		position: relative;
		display: inline-block;
    }

    .menu-button {
		color: white;
		padding: 10px 16px;
		font-size: 0.750vw;
		font-weight:300;
		cursor: pointer;
		margin:0 1rem;
    }
	
	.menu-button-a {
		color: white;
		padding: 12px 1vw;
		text-decoration:none;
		font-size: 0.700vw;
		font-weight:300;
		cursor: pointer;
		margin:0 1rem;
    }
	
	.menu-button-a:hover {
		color: #fedc1b;
	}
	

    .dropdown-content {
		font-size: 0.750vw;
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		z-index: 1;		
		margin:10px 1rem 
    }

    .dropdown-content a {
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
    }

    .dropdown-content a:hover {
		color:#000;
		background-color: #fedc1b;
    }

    .menu:hover .dropdown-content {
		display: block;
    }

    .menu:hover .menu-button {
		background-color: #fedc1b;
		color:#000;
    }
	
	
	
	.banner{
		background-color:#000;
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.banner-center{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.banner-center img{
		width:100%;
		padding:0; margin:0;
	}
	
	
	/*divider*/	
	
	.divider{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.divider img{
		width:100%;
	}
		
		
	/*produtos*/	
	
	.produtos{
		width:100%;
		height:auto;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
		margin-bottom:100px;
	}
	
	.border{
		width:60%;
		height:auto;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	
	.produtos-center{
		width:95%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.produto{
		background-color:#fff;
		width:100%;
		max-width:300px;
		height:auto;
		display:flex;
		justify-content: center;
		align-items: center;
		margin:2vw;
		flex-direction:column;
	}
	
	.prod-img{
		width:100%;
		max-width:300px;
		height:300px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.prod-img img{
		display:flex;
		justify-content: center;
		align-items: center;
		width:100%;
	}
	
	.destaque{
		color:#fff;
		background-color:#000;
		display:flex;
		justify-content: center;
		align-items: center;
		width:15vw;
		height:40px;
	}
	
	.destaque-bar{
		background-color:#491953;
		display:flex;
		justify-content: center;
		align-items: center;
		width:80vw;
		height:40px;
	}
	
	
	.prod-price{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction:column;
		margin:10px
	}
	
	.prod-price h2{
		font-size:1vw;
		padding:5px 10px;
		text-align:left;
		margin:0;
	}
	
	.prod-price p{
		font-size:0.750vw;
		font-weight:400;
		padding:5px 10px;
		text-align:left;
		margin:0;
	}
	
	.pay-btn{
		font-size:0.750vw;
		padding:1rem 0;
		background-color:#491953;
		color:#fff;
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		cursor:pointer;
		transition:0.2s;
	}
	
	.pay-btn:hover{
		background-color:#fedc1b;
		color:#000;
		transition:0.2s;
		font-weight:400;
	}
	
	
	.recomendados {
		width:100%;
}

.recomendados h2 {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.lista-produtos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.produto-recomendado {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  width: 140px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.produto-recomendado img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}

.produto-recomendado button {
  background: #000;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

	
	
	
	
	/*item*/	
	
	.item{
		width:100%;
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		margin:75px 0;
	}
	
	.item-center{
		width:90%;
		display:flex;
		justify-content: center;
		align-items: flex-start;
	}
	
	.i-left{
		width:auto;
		display:flex;
		justify-content: center;
		align-items: flex-start;
		cursor: pointer;
	}
	
	.i-left img{
		width:40vw;
	}
	
	.i-right{
		width:30%;
		display:flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction:column;
	}
	
	.head-item{
		font-size:0.750vw;
	}
	
	.name-item{
		margin:1vw 0;
		font-size:2vw;
		font-weight:600;
		line-height:2vw;
	}
	
	.price-item{
		font-size:1.500vw;
		margin-bottom:1vw;
	}
	
	.btn-item{
		font-size:0.850vw;
		background-color:#000;
		color:#fff;
		padding:0.700vw 0;
		margin:1.500vw 0;
		cursor:pointer;
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		border:none;
	}
	
	.btn-item:hover{
		background-color:#ffde00;
		color:#000;
	}
	
	.desc-item{
		font-size:0.850vw;
		text-align:justify;
		line-height:1.500vw;;
	}
	
	 label {
      font-size: 14px;
      display: block;
      margin-bottom: 8px;
    }
	
	 .quantidade-wrapper {
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      width: fit-content;
      border-radius: 4px;
      overflow: hidden;
    }

    .quantidade-wrapper button {
      background: none;
      border: none;
      padding: 8px 12px;
      font-size: 18px;
      cursor: pointer;
      color: #555;
      transition: 0.2s;
    }

    .quantidade-wrapper button:hover {
      background-color: #eee;
    }

    .quantidade-wrapper input {
      width: 40px;
      text-align: center;
      border: none;
      font-size: 16px;
      pointer-events: none;
    }

    .quantidade-wrapper button:disabled {
      color: #ccc;
      cursor: default;
    }
	
	
	

	.botao-carrinho {
		width:30%;
		display: flex;
		align-items: center;
		gap: 10px;
		color: #fff;
		padding: 10px 16px;
		text-decoration: none;
		font-size: 0.850vw;
}

	.botao-carrinho i {
	font-size: 1vw;
}

.carshop{
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
	}
	
	 .contador-carrinho {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: red;
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 1vw;
      z-index: 999;
    }
    .item-carrinho {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
    .item-carrinho img {
      width: 60px;
      height: auto;
      border-radius: 10px;
    }
    .item-controles {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .item-controles button {
      font-size: 18px;
      padding: 4px 10px;
      border: none;
      background: #eee;
      border-radius: 6px;
      cursor: pointer;
    }
    .btn-limpar, .btn-finalizar {
		margin:3px 0;
		display:flex;
		justify-content: center;
		align-items: flex-start;
      padding: 10px 16px;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
    .btn-limpar { background: #333; color: white; }
    .btn-finalizar { background: green; color: white;}
	
	
	
	/*footer*/	
	
	.footer{
		background: linear-gradient(to right, #491953, #2c0c32);
		width:100%;
		height:400px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.footer-center{
		width:90%;
		display:flex;
		justify-content: center;
		align-items: flex-start;
	}
	
	.foot-a{
		width:75%;
		display:flex;
		justify-content:center;
		align-items:center;
		margin:30px;
	}
	
	.foot-a img{
		padding:10px;
		width:9vw;

	}
	
	.foot-b img{
		filter:invert(100%);
		width:5%;
		margin:0 1vw 0 0 ;
		
	}
	
	.foot-b{
		width:100%;
		display:flex;
		justify-content:center;
		align-items:center;
		margin:30px;
	}
	
	.foot-c{
		color:#fff;
		width:100%;
		display:flex;
		justify-content:center;
		align-items:center;
		margin:30px;
		flex-direction:column;
		font-size:1vw;
	}
	
	.head-menu{
		color:#fff;
		font-size:1.500vw;
		margin:0 0 20px 0;
	}
	
	.link-menu{
		font-size:0.750vw;
		color:#fff;
		padding:3px 0;
	}
	
	.foot-s{
		width:75%;
		display:flex;
		justify-content:center;
		align-items:flex-start;
		margin:30px;
		flex-direction:column;
	}
	
	.div-social{
		
		display:flex;
		justify-content:flex-start;
		align-items:flex-start;
		padding:1vw 0;
		flex-direction:column;
	}
	
	.socialweb{
		color:#fff;
		display:flex;
		justify-content:flex-start;
		align-items:center;
	}
	
	.socialweb img{
		width:10%;
		margin-right:1vw;
		
	}
	
	.div-social a{
		margin: 1vw 1vw 0 0;
	}
	
	.foot-a li{
		font-size:0.750vw;
		color:#fff;
		padding:3px 0;
	}
	
	.foot-a li:hover{
		color:#fedc1b;
	}
	
	.foot-a ul{
		padding:0 25px;
	}
	
	
	
	input{
		width:150px;
		padding:1rem;
		border:none;
		outline:none;
	}
	
	.send-btn{
		width:auto;
		padding:1rem;
		border:none;
		outline:none;
		background-color:#fedc1b;
	}
	
	
	
	
	
	.alerta-adicionado {
  position: fixed;
  top: 80px;
  right: 20px;
  background: #4CAF50;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: alertaAnimar 0.5s ease forwards;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
}

@keyframes alertaAnimar {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

	
	
	
		
	a{
		text-decoration:none;
	}
	
	ul, li{
		list-style:none;
		padding:0;
		margin:0;
	}
	
	
	
	
	/* Adicione estes estilos ao final do csshome.css */

/* Modal e Carrossel */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

.close-modal {
    position: relative;
    font-size: 30px;
    color: #000;
    cursor: pointer;
}

.carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-inner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 5px;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Adicione este estilo à .prod-img img para cursor de zoom */
.prod-img img {
    cursor: pointer;
}