/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/* DEFINICAO DO GRID */
.container__inicio {
	width: 100vw;
	min-height: 100vh;
	display: grid;
	grid-template-areas: "navc navc navc"
						 ". main ."
						 "ftc ftc ftc";
	grid-template-columns: 1fr min(100%, 1400px) 1fr;
	grid-template-rows: 60px 
						1fr
						auto;
	
	/*overflow: hidden;*/
}
.nav__principal__inicio--container {
	position: fixed;
	z-index: 9;
	width: 100%;
	grid-area: navc;
	display: grid;
	grid-template-areas: ". nav ."						
						 ". navr .";
	grid-template-columns: 1fr min(100%, 1400px) 1fr;
	grid-template-rows: 80px 
						30px;	
	border-bottom: 1px solid var(--cor-bordas);	
	transition: top 0.3s;
} 

.nav__principal__inicio {
	grid-area: nav;	
}
.nav__principal--row {
	grid-area: navr;

	padding-top: 1px;
	font-size: var(--fonte-p);

}

.produtos__inicio--container {
	grid-area: main;
	min-height: 100vh;
}

.footer__inicio--container {
	margin-top: 2rem;
	width: 100%;
	grid-area: ftc;
	display: grid;
	grid-template-areas: ". footer ."
						 ". fcontato .";
	grid-template-columns: 1fr min(100%, 1400px) 1fr;
	grid-template-rows: auto 
						auto;

}
.footer__inicio--container {
	grid-area: ftc;
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
@media (max-width: 800px) {
					.container__inicio {
					grid-template-areas: "navc navc navc"
					 ". main ."
					 "ftc ftc ftc";
					grid-template-rows: auto 
					1fr
					auto;	
					}
				.nav__principal__inicio {
					display: grid;
					grid-template-areas: "logo icone"
										 "pesq pesq";

					grid-template-columns: 1fr 1fr;
					grid-template-rows: 80px 60px;			
				} 
				.flex-iten-1 {
					grid-area: logo;
				}
				.flex-iten-2 {
					grid-area: pesq;
					border-bottom: 1px solid var(--cor-bordas);
				}
				.flex-iten-3 {
					display: none;
				}
				.flex-iten-4 {
					grid-area: icone;
				}
				.flex-iten-5 {
					display: none;
				}
				.produtos__container {
					padding-top: 50px;
				}
				.nav_lateral--links li {
					font-size: 14px;
				}
				.nav__lateral--categoria p {
					font-size: 14px;
				}

}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*NAVBAR*/
.flex-iten-1 {
	height: 100%;
}
.flex-iten-2 {
	height: 100%;
	flex: 1;
	background-color: var(--cor-600);
}
.flex-iten-3 {
	justify-content: flex-start;
	align-items: flex-start;
	min-width: 130px;
	height: 100%;
}
.flex-iten-4 {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	padding-right: 20px;
}

.flex-iten-5 {
	height: 25px;
}
.titulo--user span {
	color: var(--cor-laranja);
}
.icone--cart {
	position: relative;
	height: 40px;
	margin-inline: 20px ;
}

.icone-carrinho-wrapper::before {
	z-index: 1;
	position: absolute;
	content: attr(total-carrinho);
	bottom: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	background-color: var(--cor-vermelho);
	font-size: 10px;
	font-weight: bolder;
	text-align: center;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.icones {
	width: 30px;
}
.icones:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.nav__cliente__container {
	padding-top: 10px;
}

.btn--usuario--wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.nav__cliente__container i {
	color: var(--cor-900);
}
.nav__cliente__container button {
	font-size: 10px;
	height: 30px;
  padding: .5rem;
  width: 75px;
}
.btn-painel {
	width: 30px;
}

.titulo--user span {display:inline-block}
.titulo--user span::first-letter {
	text-transform: uppercase;
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*NAV LINKS*/

.nav_lateral--row--links {
	width: 100%;
	/*height: 60px;*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--cor-600);
	padding-left: 1rem;
}

.nav--itens--row {
	margin-inline: 2px;
	letter-spacing: 1px;
	border-bottom: 3px solid transparent;
	font-weight: bolder;
	font-size: 12px;
}
.nav--itens--row:hover {
	/*background-color: rgba(var(--rgb-laranja),0.02);*/
	/*border: 1px solid rgba(var(--rgb-laranja),0.2);*/
	color: var(--cor-laranja);
	border-bottom: 3px solid var(--cor-laranja);
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*NAV LATERAL*/
.nav__lateral--inicio {
	z-index: 99;
	position: absolute;
	right: 15px;
	width: 300px;
	height: 600px;
	background-color: var(--cor-600);
	flex-direction: column;
	justify-content: flex-start;
	border: 1px solid var(--cor-azul);
	border-radius: 8px;
}

.nav__lateral--icons {
	width: 100%;
	height: 20px;

	position: relative;
}
.nav__lateral--icons::after {
		content: "X";
		position: absolute;
		top: -10px;
		right: -10px;
		width: 30px;
		height: 30px;
		font-weight: bold;

		color: var(--cor-100);
		background-color: rgba(var(--rgb-vermelho),1);
		border-radius: 50%;
		/*border: 2px solid var(--cor-azul);*/

		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

}

.nav__lateral--usuario {
	gap: 10px;
	width: 100%;
	height: 90px;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	/*border-bottom: 1px solid var(--cor-bordas);*/
	padding-inline: 25px;
}
.nav__lateral--categoria {
	align-items: flex-start;
	padding-left: .5rem;
	padding-top: .5rem;
	width: 100%;
	flex-direction: column;
}
.titulo--usuarios--wrapper {
	width: 320px;
}
.titulo--usuarios--wrapper p {
	width: 100%;
}

.nav__lateral--categoria p {
	font-weight: bolder;
	letter-spacing: 2px;
	font-size: 16px;
	width: 100%;
	padding: 15px;
	
	background-color: rgba(var(--rgb-azul),0.02);
	border: 1px solid rgba(var(--rgb-azul),0.2);
	border-right: 3px solid var(--cor-azul);
	color: var(--cor-azul);
	border-radius: 8px 0px 0px 8px;
}
.nav_lateral--links {
	margin-top: .5rem;
	width: 100%;
}
.nav_lateral--links a {
	width: 100%;
	font-weight: bolder;
	letter-spacing: 2px;
	color: var(--cor-100);
	text-decoration: none;	
}
.nav--itens {
	padding: .5rem;
	font-size: 12px;
}
.nav--itens:hover {
	background-color: rgba(var(--rgb-laranja),0.02);
	border: 1px solid rgba(var(--rgb-laranja),0.2);
	color: var(--cor-laranja);
	border-right: 3px solid var(--cor-laranja);
	border-radius: 8px 0px 0px 8px;
}
.btn--usuarios--wrapper i {
	color: var(--cor-900);
}

.btn--usuarios--wrapper {
	font-size: var(--fonte-p);	
	width: 100%;
	height: 60px;

	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.btn--usuarios--wrapper button {
	width: 100px;
	height: 35px;
}


/*------------------------------------------------*/
.remove-nav-lateral {
	display: none;
}	
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/* IMPUT SEARCH */
.input-search-wrapper {
	width: 94%;
}
.icone-search {
	width: 100%;
	border: 1px solid var(--cor-bordas);
	color: var(--cor-100);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cor-900);

}

.icone-search i {
/*	width: 50px;
	height: 35px;*/
	padding-inline: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;

}
.input-search {
	width: 100%;
	padding-left: .75rem;
	height: 35px;
	background-color: var(--cor-900);
	border: none;
	outline: none;
	color: var(--cor-100);

}

.input-search:focus  {
	color: var(--cor-laranja);
}

.icone-apagar {
	/*width: 42px;*/
	/*height: 25px;*/
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cor-900);
	/*border-bottom: 1px solid var(--cor-laranja);*/
	cursor: pointer;
}
.icone-apagar i {
	color: var(--cor-vermelho);
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*PROMOCOES SLIDE*/
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
  width: min(90%,1000px);
  min-height: 395px;
  position: relative;
  margin: auto;
  border: 1px solid var(--cor-bordas);
  margin-top: 80px;
  cursor: pointer;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1rem;
  /*margin-top: -22px;*/
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(var(--rgb-laranja),0.4);
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 /*background-color: rgba(var(--rgb-vermelho),0.8);*/
 background-color: rgba(var(--rgb-laranja),1);
}
/* Caption text */
.text {
  overflow: hidden;
  background-color: rgba(0,0,0,0.8);
  color: var(--cor-100);
  font-size: var(--fonte-m);
  padding: .25rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-family: var(--ff-titulo);
}

.text-cima {
  font-family: var(--ff-destaques)!important;
  overflow: hidden;
  background-color: rgba(0,0,0,0.8);
  color: var(--cor-laranja);
  font-size: min(5vw, 4rem);
  text-align: center;
  padding: .5rem;
  font-family: var(--ff-titulo);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid var(--cor-laranja);
  border-radius: 10px;

}
/* Number text (1/3 etc) */
.numbertext {
  z-index: 10;
  background-color: rgba(var(--rgb-vermelho),0.8);
  color: var(--cor-100);
  font-size: 12px;
  padding: .25rem;
  margin: .25rem;
  position: absolute;
  top: 0;
  left: 0;
}
.dots-container {
	display: flex;
	justify-content: center;
	flex-direction: row;
	margin-top: -10px;
	gap: 2rem;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 20px;
  width: 20px;
  background-color: #bbb;
  border-radius: 50%;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: rgba(var(--rgb-laranja),0.8);
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media (max-width: 800px) {
		.produtos__destaques {
			display: none;
		}
		.msg-balao p {
			font-size: 14px;
		}
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/

.ver-tudo:hover {
	color: var(--cor-laranja);
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
html {
   scroll-padding-top: 135px;
}

.produtos__acao__container {
		padding-top: 50px;
}

.produtos__container  {
	margin-inline: 15px;
	margin-top: 125px;
	margin-bottom: 0;
}

.div__titulo {
	margin-bottom: 2rem;
}

.cards-wrapper {
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 50px;
  display: flex;
  gap: 1.5rem;
  overflow-x: scroll;
  scrollbar-color: #f0ad4e #303134;
}

.card {
	width: 200px;
	overflow: hidden;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid var(--cor-bordas);
	/*border: 3px solid rgba(var(--rgb-azul),1);*/
	position: relative;
	opacity: 0.8;

		box-shadow:
		0px 4px 5px 0px hsla(0,0%,0%,0.14), 
		0px 1px 10px 0px hsla(0,0%,0%,0.12), 
		0px 2px 4px -1px hsla(0,0%,0%,0.2);
}

.card-btns-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-btns-wrapper button {
	width: 100%;
	height: 40px;
}
.btncard {
	opacity: 0;
	transition: all .3s ease-in-out;
	font-size: var(--fontep-p);
	cursor: pointer;
	border: 1px solid var(--cor-bordas);
	background-color: var(--cor-900);
	border-radius: 8px;

}
.card-container:hover button {
	opacity: 1;
}

.card-container:hover .card-valor {
	background-color: rgba(var(--rgb-vermelho),1);
}

.card-container:hover .svg-bluray-container {
	background-color: rgba(var(--rgb-azul),1);
}

.card:hover {
	opacity: 1;
}
.btn-cart:hover {
	background-color: rgba(var(--rgb-vermelho),1);
}
.btn-detalhes:hover {
	background-color: rgba(var(--rgb-azul),1);
}
.svg-bluray-container {
	/*background-color: rgba(var(--rgb-azul),1);*/
	background-color: var(--cor-600);
	width: 100%;
	/*height: 30px;*/
	text-align: center;
}
.svg-bluray {
	padding: .25rem;	
	width: 60px;
}
.card-img img {
	width: 200px;
	height: 300px;
	/*max-width: 250px;*/
}
.card-valor {
	width: 100%;
	padding: .25rem;
	/*background-color: rgba(var(--rgb-azul),0.8);*/
	background-color: var(--cor-900);
	font-size: var(--fonte-g);
	font-family: var(--ff-titulo);
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.card-valor p {
	color: var(--cor-100);
	text-shadow: 0 0 4px #000000;
}
.card-titulo {
	font-size: var(--fonte-m);
	padding: .5rem;
	max-width: 250px;
}

/*/// SOBRE*/
.footer__inicio--container {
	background-color: var(--cor-600);
	border-top: 1px solid var(--cor-bordas);
	border-bottom: 1px solid var(--cor-bordas);
}

.sobre-wrapper {
	display: flex;
	min-height: 200px;
	gap: 2rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	flex-wrap: wrap;
	grid-area: footer;
}

.sobre-wrapper > * {
	/*flex: 1;*/
	padding: .15rem;	
}

.sobre__constitucional li {
	padding: .5rem;
	min-width: 250px;
}
.sobre__constitucional li a:hover {
	color: var(--cor-laranja);
}
.sobre__formulario {
	flex: 3;
	min-width: 300px;
}
.sobre__formulario form {
	display: flex;
	width: 95%;
	flex-direction: column;
	margin-inline: 1rem;

}
.sobre__formulario input, button {
	padding: .5rem;
	margin: .5rem;
	color: var(--cor-100);
	background-color: var(--cor-900);
	border: 1px solid var(--cor-bordas);
	outline: none;

}

.sobre__formulario button {
	cursor: pointer;
}
.sobre__formulario input:focus {
	border: 1px solid var(--cor-laranja);

}

.sobre__formulario button {
	background-color: var(--cor-azul);
	width: 180px;

}

.div-contato-footer {
	grid-area: fcontato;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: .5rem;
	height: 50px;
}
.div-contato-footer h3 {
	font-size: 12px;
	letter-spacing: 3px;
}
.div-contato-footer span {
	color: var(--cor-vermelho);
}
.div-contato-footer i {
	font-size: 24px;
	padding: .35rem;
}

a:hover .fa-brands { 
	color: var(--cor-vermelho); 
	transform: scale(1.1);
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*MODAL-LOGIN*/
.modal--login--container {
	z-index: 99999999999999999;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--cor-900);
	/*backdrop-filter: blur(8px);*/
	width: 100vw;
	min-height: 100vh;

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

.modal--login--wrapper {
	margin: auto;
	margin-block: 80px;
	position: relative;
	width: min(90%,1000px);
	min-height: 600px;
	background-color: var(--cor-600);
	/*border: 2px solid transparent;*/
	border-radius: 8px;
	z-index: -10;
}

.modal--login--wrapper::after {
		content: "X";
		position: absolute;
		top: -10px;
		right: -10px;
		width: 30px;
		height: 30px;
		font-weight: bold;

		color: var(--cor-100);
		background-color: rgba(var(--rgb-vermelho),1);
		border-radius: 50%;
		/*border: 2px solid var(--cor-azul);*/

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


.btn--modal--wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-modal-login {
	margin-bottom: 0;
}

.btn-entrar-login {
	position: absolute;
	top: -41px;
	left: 25px;
	height: 35px;
	width: 135px;
	cursor: pointer;
	border-radius: 8px 8px 0 0;

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

	color: var(--cor-100);
	background-color: var(--cor-900);
	border: 1px solid var(--cor-bordas);
	border-bottom: none;

	font-size: 12px;
	font-weight: bolder;
	letter-spacing: 1px;
	z-index: -1;
}
.btn-entrar-login.active {
	color: var(--cor-azul);
	background-color: var(--cor-600);
	border: 1px solid var(--cor-azul);
	border-bottom: 1px solid var(--cor-600);
	z-index: 10;
}
.btn-entrar-login.active i {
		color: var(--cor-azul);
}


.btn-cadastrar-login {
	position: absolute;
	top: -40px;
	left: 159px;
	height: 35px;
	width: 135px;
	cursor: pointer;
	border-radius: 8px 8px 0 0;

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

	color: var(--cor-100);
	background-color: var(--cor-900);
	border: 1px solid var(--cor-bordas);
	border-bottom: none;

	font-size: 12px;
	font-weight: bolder;
	letter-spacing: 1px;
}
.btn-cadastrar-login.active {
	color: var(--cor-laranja);
	background-color: var(--cor-600);
	border: 1px solid var(--cor-laranja);
	border-bottom: 1px solid var(--cor-600);
	z-index: 10;
}
.btn-cadastrar-login.active i {
		color: var(--cor-laranja);
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*TELA ENTRAR*/
.tela--entrar {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;

	width: 100%;
	height: 100%;
	
	border-radius: 8px;
	border: 1px solid var(--cor-azul);
}

.tela--entrar form {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 1rem;

	width: 100%;
	height: 500px;
	/*flex: 1;*/
	top: 100px;

}

.tela--entrar h3,
.tela--entrar h3 i {
	font-size: 20px;
	padding: 1rem;
	color: var(--cor-azul);
}

.tela--entrar input {
	font-size: var(--fonte-m);
	width: 80%;
	height: 25px;
	border-radius: 8px;
	background-color: var(--cor-900);
	outline: none;
	border: 1px solid var(--cor-bordas);
	padding: 1.25rem;
	text-transform: lowercase;
}

.tela--entrar .inputs:focus {
	border: 1px solid var(--cor-azul);
}

.tela--entrar button {
	/*height: 25px;*/
	width: 125px;
	color: var(--cor-100);
	font-weight: bolder;
	font-size: 12px;
	letter-spacing: 2px;
	cursor: pointer;
}

.tela--entrar summary {
	cursor: pointer;
	font-size: 12px;
	color: var(--cor-azul);
}
.tela--entrar details{
	background-color: var(--cor-600);
	border: 1px solid var(--cor-bordas);
	padding: .5rem;
	border-radius: 8px;	

}
.tela--entrar details p {
	color: var(--cor-laranja);
}

.tela--entrar details summary::before { 
  content:"\02193    "; 
  font-size: 14px;
  font-weight: bolder;
  color: var(--cor-azul); 
}
.tela--entrar details[open] summary::before { 
  content:"\02191    ";
  font-size: 14px;
  font-weight: bolder; 
  color: var(--cor-azul); 
}
.dica {
	width: 80%;
	line-height: 1.5;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 400;
}
.dica i {
	color: var(--cor-azul);
	cursor: pointer;
}
.dica span {
	color: var(--cor-azul);
	font-weight: bolder;
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*TELA CADASTAR*/
.tela--cadastrar {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;

	width: 100%;
	height: 100%;
	
	border-radius: 8px;
	border: 1px solid var(--cor-laranja);
}

.tela--cadastrar form {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 1rem;

	width: 100%;
	height: 500px;
	/*flex: 1;*/
	top: 100px;

}

.tela--cadastrar h3,
.tela--cadastrar h3 i {
	font-size: 20px;
	padding: 1rem;
	color: var(--cor-laranja);
}

.tela--cadastrar input {
	font-size: var(--fonte-m);
	width: 80%;
	height: 25px;
	border-radius: 8px;
	background-color: var(--cor-900);
	outline: none;
	border: 1px solid var(--cor-bordas);
	padding: 1.25rem;
	text-transform: lowercase;
}

.tela--cadastrar .inputs:focus {
	border: 1px solid var(--cor-laranja);
}

.tela--cadastrar button {
	/*height: 40px;*/
	width: 150px;
	color: var(--cor-900);
	font-weight: bolder;
	font-size: 12px;
	letter-spacing: 2px;
	cursor: pointer;
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*DIV CONTAINER MENSAGEM */
.mensagem-tela-entrar,
.mensagem-tela-cadastro {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;


}
.mensagem-tela-entrar img,
.mensagem-tela-cadastro img {
  padding: .5rem;
  filter: invert(99%) sepia(3%) saturate(157%) hue-rotate(112deg) brightness(112%) contrast(84%);
  width: 70px;
}
.msg-login-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: .25rem;
	width: 100%;
	height: 100%;

}
.msg-balao {
	position: relative;
	
	width: clamp(200px, 100%, 400px);

	margin-right: .5rem;
  height: 80px; 

	
	font-size: 18px;
	letter-spacing: 2px;

	border-radius: 8px;
	border: 1px solid var(--cor-100);
	
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: .5rem;
}

.msg-balao:after {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid var(--cor-borda-after);
    clear: both;
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/* MENSAGEM DANGER*/

.msg-erro {
	background-color: rgba(var(--rgb-vermelho),0.75);
	border: 1px solid var(--cor-borda-after);	
}
.msg-erro p {
	letter-spacing: 2px;
	padding-left: .5rem;
	color: var(--cor-900);
	font-weight: 800;
}

.msg-sucesso {
	background-color: rgba(var(--rgb-verde),0.75);
	border: 1px solid var(--cor-borda-after);
}
.msg-sucesso p {
	letter-spacing: 2px;
	padding-left: .5rem;
	color: var(--cor-900);
	font-weight: 800;
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/* MODAL DETALHE PRODUTO*/
.modal__detalhe--wrapper {
	z-index: 2;	
	position: absolute;
	top: 0;
	left: 0;
  padding-block: 2rem ;

  background-color: var(--cor-900);

	width: 100vw;
	min-height: 100vh;

	transition: background-color 0.6s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}


.modal__detalhe {
	padding-block: 1rem ;
	z-index: 9;
	position: relative;
	border: 1px solid var(--cor-azul);
	border-radius: 8px;
	background-color: var(--cor-600);

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	padding-block: .5rem;

	width: clamp(300px, 80%, 800px);
	

}
.modal__detalhe::after {
	content: "X";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	font-weight: bold;

	color: var(--cor-100);
	background-color: rgba(var(--rgb-vermelho),1);
	border-radius: 50%;
	/*border: 2px solid var(--cor-laranja);*/

	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

}
.modal__detalhe > * {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: .5rem;
	width: 320px;
}
@media (max-width: 940px) {
	.modal__detalhe > * {
		width: 80%;
	}
	.detalhe--img {
		display: none;
	}
}


/*------------------------------------------------*/
/*  DETALHE IMGAGEM*/
.detalhe--img img {
	width: 300px;	
	border: 2px solid var(--cor-bordas);
}

.detalhe-inf {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .5rem;
	margin: 2rem;
}
.detalhe-inf h1 {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	flex: 1;

	letter-spacing: 3px;
	/*font-family: var(--ff-titulo);*/
	color: var(--cor-laranja);
	font-size: var(--fonte-xg);

}
.detalhe-inf p {
	display: flex;
	align-items: center;
	justify-content: center;

	letter-spacing: 1px;
	line-height: 1.5;

	font-size: var(--fonte-g);

	width: 100%;
	flex: 3;
}
.detalhe-inf button {
	display: flex;
	align-items: center;
	justify-content: center;


	width: 100%;
	height: 50px;
	/*flex: 1;*/

	font-size: var(--fonte-g);
	font-family: var(--ff-titulo);
	color: var(--cor-100);
}
/*------------------------------------------------*/
/*AVALIACAO*/
.nota {
	color: var(--cor-laranja);
	font-weight: bolder;
	
}
.valor {
	color: var(--cor-vermelho);
	font-weight: bolder;
}

/*------------------------------------------------*/
/*------------------------------------------------*/
/*TELA CARRINHO*/

.modal__carrinho__wrapper {
	padding-block: 5rem;
	z-index: 99999999999999999;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--cor-900);

	width: 100vw;
	min-height: 100vh;

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

.carrinho--container {
	position: relative;

	width: 90%;
	border: 1px solid var(--cor-azul);
	background-color: var(--cor-600);
	border-radius: 8px;
	width: min(90%,1000px);


}

.carrinho--container::after {
	content: "X";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	font-weight: bold;

	color: var(--cor-100);
	background-color: rgba(var(--rgb-vermelho),1);
	border-radius: 50%;

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


/*------------------------------------------------*/
/*------------------------------------------------*/
/*TELA CARRINHO VAZIU*/

.carrinho-vazio--wraper {
	width: 100%;
	/*height: 100%;	*/
	min-height: 500px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	gap: 2rem;
}

.carrinho-vazio--wraper img {
	filter: var(--svg-vermelho);
	width: 8rem;
}
.carrinho-vazio--wraper h1 {
	font-size: var(--fonte-xg);
	text-align: center;
}
.carrinho-vazio--wraper button {
	background-color: var(--cor-laranja);
	color: var(--cor-900);
	padding: 1rem;
	cursor: pointer;
	border-radius: 8px;
	opacity: 0.8;
	width: 300px;
	transition: all 100ms;
}

.carrinho-vazio--wraper button:hover {
	opacity: 1;
	transform: scale(1.05);
}
/*------------------------------------------------*/
/*------------------------------------------------*/
/*TELA CARRINHO */

.carrinho--wrapper {
	padding-block: .25rem;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 50px 1fr 70px;
	grid-template-columns: 1fr;
	grid-template-areas: "titulo" 	
												"itens" 
												"finalizar";

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.carrinho__titulo {
	grid-area: titulo;
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: calc(var(--fonte-xg) + 2px);
	width: 100%;
	height: 80px;
}
.carrinho__itens {
	grid-area: itens;
	min-height: 250px;
	width: 90%;
}
.finalizar-compra-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	grid-area: finalizar;
}
.finalizar-compra-wrapper button {
	width: 300px;
	border-radius: 8px;
	background-color: var(--cor-azul);
	cursor: pointer;
	color: var(--cor-900);
	opacity: 0.8;
	padding: 1rem;
	margin-bottom: 3rem;
}
.finalizar-compra-wrapper button:hover {
	opacity: 1;
	transform: scale(1.05);
}
/*.carrinho__total {
	grid-area: totais;
}*/
/*------------------------------------------------*/

.tabela__carrinho__itens {
 margin-block:  1rem;
}
.tabela__carrinho__itens,
th,
td,
tr {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--cor-bordas);
	font-size: 12px;
	padding: .25rem;
}
/*PRIMEIRA COLUNA*/
.tabela__carrinho__itens td:nth-child(1),
.tabela__carrinho__itens th:nth-child(1) {
	text-align: center;
	width: 0%;

}

.tabela__carrinho__itens td:nth-child(2),
.tabela__carrinho__itens th:nth-child(2) {
	text-align: left;
	width: 0%;

}

.tabela__carrinho__itens td:nth-child(3),
.tabela__carrinho__itens th:nth-child(3) {
	text-align: center;
	width: 10%;

}

.tabela__carrinho__itens td:nth-child(4),
.tabela__carrinho__itens th:nth-child(4) {
	text-align: left;
	width: 65%;

}

.tabela__carrinho__itens td:nth-child(5),
.tabela__carrinho__itens th:nth-child(5) {
	text-align: center;
	width: 0%;
	
}

.tabela__carrinho__itens td:nth-child(6),
.tabela__carrinho__itens th:nth-child(6) {
	text-align: center;
	width: 10%;

}

.tabela__carrinho__itens td:nth-child(7),
.tabela__carrinho__itens th:nth-child(7) {
	text-align: center;
	width: 5%;
	
}

.tabela__carrinho__itens td:nth-child(8),
.tabela__carrinho__itens th:nth-child(8) {
	text-align: center;
	width: 5%;
}



.tabela__carrinho__itens tfoot td {
	border: none;
	padding: .5rem;
}
.qtd-input {
	width: 60px;
	height: 40px;
	padding: .5rem;
	border: none;
	background-color: transparent;
	outline: none;
}
.tabela__carrinho__itens i {
	color: var(--cor-vermelho);
	cursor: pointer;
}
.total-tfoot {
	text-align: right;
	width: 100%;
	height: 40px;
	padding: .5rem;
	border: none;
	background-color: transparent;
	outline: none;
	font-size: 16px;
}


.tremer {
	animation: tremer  0.5s;
}
@keyframes tremer {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.fa-eye {
	z-index: -10;
}