@import url('https://fonts.googleapis.com/css2?family=Jomolhari&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --cor-fundo: #fefefe;
    --cor-primaria: #493422;
    --cor-secundaria: #6b4c3b;
    --cor-destaque: #a57C52;
    --cor-suporte: #caae86;
    --cor-clara: #eae2d5;
    --cor-fundo-claro: #f4f0ea;
}
/* reset CSS */
body, ul,li, h1{
    margin:0;
    padding: 0;
}
body{
    background-color: #EBE3D6;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
header{
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background-color: #493422;
  padding: .5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
#carrinho-flutuante{
  background: var(--cor-secundaria);
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
}
.modal{
  display:none;
  position: fixed;
  overflow-y:auto;
  top: 0;
  left: 0; 
  width:100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}
.modal-conteudo{
  background:white;
  margin:  auto;
  padding: 20%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main{
  padding-top: 50px;
}
.lista-compra{
  list-style:none;
}
.modal-conteudo{
  color: var(--cor-primaria);
}
.hero{
    padding:1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.hero h1{
    text-align: center;
    color: #493422;
    margin-top: 2rem;
}
.hero h2{
    margin-top: 1rem;
    text-align: center;
    color: #493422;
}
/* .hero .card-informacoes{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
} */
.hero #informacoes{
  background-color: rgba(202, 174, 134,0.95);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
  width: 95%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 20px;
  padding: 10px 20px;
  overflow: auto;
  /* display: none; */
}
#informacoes .dia-retirada{
  display: block;
  font-weight: 800;
  font-size: 2rem;
  padding-top: 10px;
  color: var(--cor-primaria);
}
.modal-whatsApp{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--cor-fundo-claro);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-suporte);
  border-radius: 40px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: sans-serif;
  font-size: 14px;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.modal-whatsApp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.modal-whatsApp a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-whatsApp i {
  font-size: 30px;
  color: var(--cor-destaque);
}

.modal-whatsApp span {
  display: none;
}
.hero button{
  background-color: var(--cor-destaque);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor:pointer;
  transition: background-color 0.3 ease, transform 0.2 ease;
}
.titulo-secao{
    background-color: var(--cor-primaria);
    color: var(--cor-suporte);
    text-align: center;
    font-weight: 800;
    padding: 0.2rem 0;
}
.produtos{
    padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.categoria-titulo {
  font-size: 1.8rem;
  color: var(--cor-primaria);
  border-bottom: 2px solid var(--cor-destaque);
  padding-bottom: 0.5rem;
  margin-top: 2rem;
  text-align: center;
}

.subcategoria-titulo {
  font-size: 1.4rem;
  color: var(--cor-secundaria);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.produtos-grid {
  display: flex;
  flex-direction: column;
}


.produto-card {
  background-color: var(--cor-fundo-claro);
  border: 1px solid var(--cor-clara);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
  margin: 1rem 1rem;
  position: relative;
}

.produto-card:hover {
  transform: scale(1.02);
}
.tag-novidade {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--cor-destaque);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  z-index: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.produto-img {
  width: 100%;
  /* height: 200px; */
  object-fit: cover;
  background-color: var(--cor-fundo-escuro);
}

.produto-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.produto-info h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--cor-primaria);
}

.produto-info p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--cor-secundaria);
}

.produto-info .produto-preco {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--cor-destaque);
  margin-top: 0.5rem;
}

.produto-variacoes {
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
    margin-top: 0.75rem; 
}
.variacao-btn {
    background-color: var(--cor-fundo-claro); 
    color: var(--cor-secundaria); 
    border: 1px solid var(--cor-clara); 
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.variacao-btn.selecionado {
    background-color: var(--cor-primaria); 
    color: white; 
    border-color: var(--cor-primaria); 
    font-weight: bold;
}

.variacao-btn:hover:not(.selecionado) {
    background-color: var(--cor-clara); 
    border-color: var(--cor-primaria); 
    color: var(--cor-primaria);
}

.quantidade-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.quantidade-selector input {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid var(--cor-clara);
    border-radius: 4px;
    text-align: center;
}

.quantidade-selector label {
    color: var(--cor-secundaria);
    font-size: 0.9rem;
}

.produto-variacoes {
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.variacao-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--cor-clara);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.variacao-btn.selecionado {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}
.botao-adicionar-carrinho{
  background-color: var(--cor-destaque);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor:pointer;
  transition: background-color 0.3 ease, transform 0.2 ease;
}
.botao-adicionar-carrinho:hover{
  background-color: var(--cor-secundaria);
  transform: scale(1.05);
}
.modal-button{
  background-color: var(--cor-destaque);
  color: white;
  border: none;
  padding: 10px 16px;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.modal-button:hover{
  background-color: var(--cor-secundaria);
  transform: scale(1.03);
}
.modal-button:active{
  transform: scale(0.97);
}
footer {
    background-color: var(--cor-clara);
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

@media (min-width:768px){
    nav ul{
        display:flex;
        justify-content: space-between;
    }
    .produtos-grid{
      flex-direction: row;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }
    .produto-card{
      width: 20rem;
    }
    .modal-whatsApp span {
    display: inline;
  }
}


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

.feedback-toast {
    animation: slideIn 0.3s ease forwards;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}