:root {
	--amarelo-primario: #ffd700;
	--amarelo-secundario: #c7a200;
	--vermelho-primario: #e53935;
	--vermelho-secundario: #f44336;
	--branco: #ffffff;
	--preto: #212121;
	--cinza: #757575;
}

* {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
	text-decoration: none;
	color: inherit;
}
@keyframes relord {
	0% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

body {
	background-color: #ffffff;
	color: var(--preto);
}

/*Responsividade*/
@media (max-width: 600px){

	.logo-containe{

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.logo{
		position: relative;
		right: 5%;
		width: 70%;

	}
	header{
		position: fixed;
		top: 0;
		height: 15%;
		width: 90%;
		display: flex;
		flex-direction: column;
	}
	header .valentines-hearts-area{
		display: none;
	}
	.whatsAppECarrinho{
		position: absolute;
		top: 95vh;
		right: 10vw;
		bottom: 10vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.whatsapp-btn{
		font-size: 1vh;
		padding: 0%;
		margin-bottom: 10%;
		border-radius: 50%;
	}
	.fab p{
		display: none;
	}
	#banner{
		top: 15vh;
		margin-bottom: 10vh;
	}
	.categorias{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

}

/* Cabeçalho */
header {
	position: fixed;
	width: 2vh; /* Isso parece ser um erro, 2vh para largura é muito pequeno, talvez fosse 100vw? Deixei como estava no original, mas verifique. */
	background: rgb(252, 174, 5);
	padding: 15px 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	top: 0;
	left: 0;
	width: 100%; /* Redefinido aqui novamente, o anterior de 2vh será sobrescrito */
	color: white;
	padding: 15px; /* Redefinido aqui novamente */
	text-align: center;
	z-index: 1000;
}

.logo-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding: 10px 0;
}

.logo {
	max-width: 300px;
	height: auto;
	margin: 0;
	padding: 0;
}

.logo:hover{
	animation: logoHouver 1s forwards 100ms;
}
@keyframes logoHouver {
	100%{ transform: scale(1.1)}
}

.whatsAppECarrinho {
	width: 30%;
	display: flex;
	justify-content: space-evenly;
	align-items: end;
	margin: 0;
}

/*banner*/
 #banner{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	left: -5%;
	margin-top: 17%;
	width: 110%;
	max-height:300px ;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#e92f2f;;
 }

 #banner img{
	width: 100%;
 }

/* Navegação */
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5%;
	background-color: var(--branco);
}

.menu {
	display: flex;
	gap: 20px;
}

.menu a {
	text-decoration: none;
	color: var(--preto);
	font-weight: 500;
	padding: 10px 15px;
	border-radius: 5px;
	transition: all 0.3s;
}

.menu a:hover,
.menu a.active {
	background-color: var(--amarelo-primario);
	color: var(--preto);
}

.whatsapp-btn,
.cart-btn {
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;
	align-items: center;
	transition: all 0.3s ease;
}

.whatsapp-btn {
	background-color: #25d366;
	color: white;
	border: none;
}

.whatsapp-btn:hover {
	background-color: #128c7e;
	transform: translateY(-2px);
}

.cart-btn:hover {
	background-color: #ff0000;
	transform: translateY(-2px);
}

.cart-btn {
	background-color: var(--vermelho-primario);
	color: white;
	border: none;
	position: relative;
}

.cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: var(--amarelo-primario);
	color: var(--preto);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}

/* Container de categorias */
.categorias-container {
	position: relative;
	bottom: -20px;
	left: -30px;
	width: 110%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--branco);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Categorias */
.categoria-produtos {
	display: block;
	animation: sectionCategoria 0.3s linear backwards;
}
@keyframes sectionCategoria {
	0% {
		opacity: 10%;
	}
}

.categorias {
	display: flex;
	overflow-x: auto;
	padding: 10px 5%;
	gap: 10px;
}

.categoria-btn {
	padding: 8px 15px;
	border-radius: 20px;
	background-color: #f0f0f0;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s;
}

.categoria-btn:hover,
.categoria-btn.active {
	background-color: var(--vermelho-primario);
	color: white;
}



/* Conteúdo Principal */
main {
	position: relative;
	padding: 40px 5%;
}

.categoria-titulo {
	margin: 30px 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--amarelo-primario);
	color: var(--vermelho-primario);
}


.produtos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.produto-card {
	background-color: var(--branco);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	position: relative;
}

.produto-card:hover {
	transform: translateY(-5px);
}

.produto-imagem {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.produto-info {
	padding: 20px;
}

.produto-titulo {
	font-size: 18px;
	margin-bottom: 10px;
	color: var(--preto);
}

.produto-preco {
	font-size: 22px;
	font-weight: bold;
	color: var(--vermelho-primario);
	margin-bottom: 15px;
}

.add-to-cart {
	width: 100%;
	padding: 12px;
	background-color: var(--amarelo-primario);
	border: none;
	border-radius: 5px;
	color: var(--preto);
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s;
}

.add-to-cart:hover {
	background-color: var(--amarelo-secundario);
}

.produto-categoria {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: var(--vermelho-primario);
	color: white;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: bold;
}

/* Carrinho de Compras */
.cart-overlay {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	max-width: 400px;
	height: 100%;
	background-color: var(--branco);
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease;
	z-index: 1000;
	padding: 20px;
	overflow-y: auto;
}

.cart-overlay.active {
	right: 0;
}

.cart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.close-cart {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--cinza);
	position: absolute; /* Posição absoluta para o botão de fechar dentro do overlay */
	top: 10px;
	right: 10px;
}

/* Remover itens do carrinho*/
.cart-item-remove {
	border: none;
	background-color: white;
	color: #ff3333;
	text-align: center;
	font-size: 50px; /* Tamanho grande para o ícone de remover */
	padding: 1px;
	margin: 5px;
}

.cart-item-remove:hover {
	animation: remove 100ms linear forwards;
}

@keyframes remove {
	100% {
		color: #ff0000;
		transform: scale(1.2);
	}
}

.cart-item {
	display: flex;
	justify-content: center; /* Isso pode centralizar o conteúdo do item, talvez ajustar */
	align-items: center; /* Isso também */
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px; /* Adicionado para consistência com o padding do .cart-items */
	border-left: 4px solid #25d366; /* Cor diferente por item - mantido do original */
}

.cart-item-img {
	width: 80px; /* Original 80px */
	height: 80px; /* Original 80px */
	object-fit: cover;
	border-radius: 5px;
	margin-right: 15px; /* Original 15px */
}

.cart-item-details {
	flex: 1;
}

.cart-item-title {
	font-size: 16px;
	margin-bottom: 5px;
}

.cart-item-price {
	font-weight: bold;
	color: var(--vermelho-primario);
	margin-bottom: 5px;
}

/* Controles de quantidade no carrinho */
.cart-item-quantity {
	display: flex;
	align-items: center;
	margin-top: 5px;
	gap: 10px; /* Original era 10px */
}

.quantity-btn {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background-color: #e0e0e0; /* Unificado */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: bold; /* Unificado */
	margin: 0 5px; /* Unificado */
	transition: background-color 0.3s; /* Unificado */
}

.quantity-btn:hover {
	background-color: #bdbdbd; /* Unificado */
}

.quantity-value {
	min-width: 20px;
	text-align: center;
}

.remove-item {
	/* Esta classe foi usada uma vez e pode ter sido substituída por .cart-item-remove */
	background: none;
	border: none;
	color: var(--cinza);
	cursor: pointer;
	align-self: flex-start;
}

.cart-total {
	font-size: 20px;
	font-weight: bold;
	text-align: right;
	margin: 20px 0;
}

.checkout-btn {
	width: 100%;
	padding: 15px;
	background-color: #25d366;
	color: white;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.checkout-btn:hover {
	background-color: #128c7e;
}

/* Rodapé */
footer {
	background: linear-gradient(
		135deg,
		var(--vermelho-primario),
		var(--amarelo-primario)
	);
	color: white;
	text-align: center;
	font-size: 12pt;
	padding: 30px 5%;
	position: relative;
	margin-top: 22%;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 20px 0;
}

.footer-links a {
	color: white;
	text-decoration: none;
}

.social-icons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
}

.social-icons a {
	color: white;
	font-size: 24px;
}

.empty-cart-message {
	text-align: center;
	color: var(--cinza);
	padding: 20px;
}

/* Estilo específico para panfletos */
.produto-card[data-id^="g7"] .produto-categoria {
	background-color: #4caf50; /* Verde para diferenciar */
}

.produto-card[data-id^="g7"] .add-to-cart {
	background-color: #8bc34a;
}

/* Estilo para produtos com frete grátis */
.produto-card.frete-gratis {
	border: 2px solid #4caf50;
}

.frete-badge {
	background-color: #4caf50;
	color: white;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 12px;
	margin-left: 10px;
}



.slides {
	display: flex;
	width: 400%;
	height: 100%;
	transition: transform 0.5s ease-in-out; /* Original era ease, outra cópia tinha ease-in-out */
}

.slide {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	min-width: 100%; /* Adicionado de uma das repetições */
}

.slide img {
	width: 100%;
	height: 100%; /* Original era 100% e outra cópia tinha auto, mantive 100% */
	object-fit: cover; /* 🔥 Faz a imagem preencher a caixa sem distorcer */
	display: block; /* Adicionado de uma das repetições */
}

.navigation {
	position: absolute;
	width: 100%;
	bottom: 15px; /* Original 15px, outra cópia 10px, mantive 15px */
	display: flex;
	justify-content: center;
	z-index: 10;
	padding: 10px 0; /* Adicionado de uma das repetições */
	left: 0; /* Adicionado de uma das repetições */
	right: 0; /* Adicionado de uma das repetições */
}

.nav-dot {
	height: 12px;
	width: 12px;
	margin: 0 6px; /* Original 6px, outra cópia 5px, mantive 6px */
	background-color: white; /* Original white, outra cópia rgba(255,255,255,0.5) */
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.5; /* Unificado */
	transition: all 0.3s; /* Unificado */
}

.nav-dot.active {
	opacity: 1; /* Unificado */
	background-color: red; /* Original red, outra cópia var(--amarelo-primario) */
}

/* 📱 Responsividade */
@media (max-width: 768px) {
	.carousel {
		aspect-ratio: 16 / 7;
		height: 250px; /* Adicionado do outro media query */
	}
}

@media (max-width: 480px) {
	.carousel {
		aspect-ratio: 16 / 9;
		height: 180px; /* Adicionado do outro media query */
	}
}

.oferta-relampago {
	animation: piscar 1s infinite;
	background-color: #ff4081;
	color: white;
	padding: 5px;
	border-radius: 3px;
}
@keyframes piscar {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

/* Container da imagem com posição relativa */
.container-imagem {
	position: relative;
	display: inline-block;
}

/* Estilo do selo de oferta */
.selo-oferta {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 80px !important;
	height: auto;
	animation: pulsar 1.5s infinite;
	z-index: 2; /* Adicionado do .container-imagem-anuncio .selo-oferta */
}

/* Animação personalizada */
@keyframes pulsar {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* Texto de oferta */
.oferta-relampago-texto {
	background-color: #ff4081;
	color: white;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 12px;
}

/* Preço antigo riscado */
.preco-antigo {
	text-decoration: line-through;
	color: #757575;
	font-size: 14px;
	margin-right: 5px;
}

/* Destaque no carrinho */
.cart-item[data-oferta="true"] {
	border-left: 4px solid #ff4081;
}

.dados-cliente {
	margin: 20px 0;
	padding: 15px;
	background-color: #f5f5f5;
	border-radius: 8px;
}

.dados-cliente h3 {
	margin-bottom: 15px;
	color: #e53935;
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}

.form-group textarea {
	height: 60px;
	resize: vertical;
}

#cliente-telefone {
	font-family: monospace;
}

/* Banner de Ofertas */
.banner-ofertas {
	background: linear-gradient(135deg, #ff5252, #e53935);
	color: white;
	padding: 15px;
	border-radius: 10px;
	margin: 20px 5%;
	display: none; /* Inicialmente escondido */
	box-shadow: 0 4px 12px rgba(230, 223, 223, 0.15);
}

.oferta-relampago-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.selo-banner {
	width: 80px;
	height: auto;
	animation: pulsar 1.5s infinite;
}

.contador {
	font-weight: bold;
	font-size: 18px;
}

.ver-ofertas-btn {
	background-color: white;
	color: #e53935;
	border: none;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s;
}

.ver-ofertas-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Mostrar apenas na categoria Todos */
.categoria-todos #banner-ofertas,
[data-categoria="todos"] #banner-ofertas {
	display: block;
}

/* Mostrar carrossel apenas na categoria Todos */
#carrossel-container {
	display: none; /* Inicialmente escondido */
}

body.categoria-todos #carrossel-container,
[data-categoria="todos"] ~ #carrossel-container {
	/* Esse seletor pode ser um pouco frágil dependendo da estrutura HTML */
	display: block;
}

/* Estilo base (sempre aplicado) para oferta especial */
.oferta-especial {
	position: relative;
	border: 2px solid #ff5252;
	margin-bottom: 30px; /* Adicionado de uma das repetições */
	display: none; /* Inicialmente escondido */
}

.oferta-especial .container-imagem-anuncio {
	position: relative;
}

/* Esconder em outras categorias */
.produtos-grid:not([data-categoria="todos"]) .oferta-especial {
	display: none;
}

/* Mostrar apenas na categoria Todos */
[data-categoria="todos"] .oferta-especial {
	display: block;
}

/* Container principal do anúncio */
.anuncio-destaque {
	width: 100%;
	max-width: 1200px; /* Ajuste conforme seu layout */
	margin: 0 auto 30px;
	border: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Container da imagem */
.container-imagem-anuncio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 25%; /* Proporção 4:1 (ajuste conforme necessidade) */
	overflow: hidden;
}

/* Imagem do anúncio */
.imagem-anuncio {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Garante que a imagem cubra todo o espaço */
	object-position: center;
	transition: transform 0.5s ease;
	border-radius: 8px; /* Adicionado do .oferta-especial .imagem-anuncio */
}

/* Efeito hover opcional */
.imagem-anuncio:hover {
	transform: scale(1.03);
}

/* Selo de oferta no anúncio */
.container-imagem-anuncio .selo-oferta {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 80px;
	z-index: 2;
	animation: pulsar 1.5s infinite;
}

/* Responsividade do anúncio */
@media (max-width: 768px) {
	.container-imagem-anuncio {
		padding-bottom: 40%; /* Proporção maior em mobile */
	}

	.container-imagem-anuncio .selo-oferta {
		width: 60px;
		top: 10px;
		right: 10px;
	}
}

/* Botão Limpar Carrinho */
.clear-cart-btn {
	background-color: #f44336; /* Unificado */
	color: white;
	border: none;
	padding: 15px; /* Unificado para 15px */
	margin-top: 10px; /* Adicionado para ser consistente */
	margin-left: 0; /* Garantir que não tenha margem lateral */
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	width: 100%; /* Garantir largura total quando em um contexto de coluna, como no carrinho */
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s;
}

.clear-cart-btn:hover {
	background-color: #ff0000; /* Unificado */
}

.clear-cart-btn i {
	margin-right: 8px;
}

/* Notificações */
.notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 15px 25px;
	border-radius: 5px;
	color: white;
	font-weight: 500;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	animation: slide-in 0.5s ease-out;
}

.notification.success {
	background-color: #4caf50;
}

.notification.error {
	background-color: #f44336;
}

.notification.fade-out {
	animation: fade-out 0.5s ease-out;
}

@keyframes slide-in {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Contêiner do Carrinho de Compras */
.cart-container {
	padding: 20px;
}

.cart-items {
	max-height: 60vh;
	overflow-y: auto;
}

.cart-icon {
	position: relative;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
}

.logo-container {
    position: relative; /* importante para o contexto do position absolute */
}

.valentines-hearts-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Para não atrapalhar cliques nos botões */
    overflow: hidden;
}

.heart {
    position: absolute;
    color: red;
    font-size: 50px;
    animation: floatUp 3s ease-out forwards;
    opacity: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(1.5);
        opacity: 0;
    }
}

 .meu-botao {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(to right, #FFD700, #FF4500);
            color: white;
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 16px;
            text-decoration: none;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .meu-botao:hover {
            background: linear-gradient(to right, #FFA500, #FF0000);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }

        .meu-botao:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }