/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

body {
  background: #faf5ff;
  color: #3d2352;
  overflow-x: hidden;
  position: relative;
}

/* CURSOR CUSTOMIZADO */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8a2be2;
  pointer-events: none;
  box-shadow: 0 0 5px #8a2be2;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: normal;
}

@media(max-width:768px){
  .custom-cursor {
    display: none;
  }
}

/* HEADER */
header {
  padding: 80px 20px;
  text-align: center;
  background: linear-gradient(270deg,#b383d4,#e4b7f0,#cfa2e8);
  background-size: 600% 600%;
  animation: gradientAnim 25s ease infinite;
  position: relative;
}
@keyframes gradientAnim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header h1 {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 10px;
}

header p {
  font-size: 1.2rem;
  color: #fff;
}

/* CATEGORIA */
.categoria {
  display: block;
  width: fit-content;
  margin: 40px auto 20px auto;
  padding: 10px 25px;
  font-size: 1.8rem;
  color: #4a207b;
  border: 2px solid #8a2be2;
  border-radius: 25px;
  text-align: center;
  background: #f3e7ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* PRODUTOS */
.produtos {
  padding: 0 10%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

.produto {
  background: #f3e7ff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  text-align: center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.produto:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.produto img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 10px;
  object-fit: cover;
}

.produto h3 {
  font-size: 1.2rem;
  color: #4a207b;
}

.produto p {
  font-size: 0.95rem;
  margin: 10px 0;
  flex-grow: 1;
}

.produto span {
  display: block;
  font-weight: bold;
  color: #8a2be2;
  margin: 10px 0;
}

.produto button {
  background: #8a2be2;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.3s;
}

.produto button:hover {
  background: #a64af0;
}

/* ESSÊNCIAS */
.essencias {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.essencia {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  transition: transform 0.2s ease, border 0.2s ease;
}

.essencia.selected {
  border: 2px solid #000;
  transform: scale(1.2);
}

.lavanda { background: #b383d4; }
.melaleuca { background: #2ecc71; }
.maracuja { background: #f1c40f; }

/* CARRINHO DESKTOP */
#carrinho {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #f5e9ff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  padding: 10px;
  width: 160px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 10000;
  transition: all 0.3s ease;
}

#carrinho.expanded {
  width: 400px;
  max-height: 80vh;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
}

#carrinho h2 {
  color: #4a207b;
  margin-bottom: 10px;
  text-align:center;
}

#itens-carrinho div {
  background: #fff;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#itens-carrinho button {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

#total {
  font-weight: bold;
  color: #8a2be2;
  text-align:center;
  margin: 10px 0;
}

.opcoes-pagamento, .opcoes-entrega {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

#dados-entrega {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

#dados-entrega input {
  padding: 8px;
  border-radius: 12px;
  border: 2px solid #8a2be2;
  background: #f3e7ff;
  color: #3d2352;
  font-weight: 500;
}

#dados-entrega.hidden {
  display: none;
}

#carrinho button {
  background: #8a2be2;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 15px;
  width: 100%;
  margin-top: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#carrinho button:hover {
  background: #a64af0;
}

/* FOOTER */
footer {
  background: #b383d4;
  color: white;
  text-align: center;
  padding: 20px;
}
footer a {
  color:white;
  text-decoration:none;
  font-weight:bold;
}

/* RESPONSIVO */
@media(max-width:1024px){
  .produtos { grid-template-columns: repeat(2, 1fr); padding: 0 5%; }
}
@media(max-width:768px){
  .produtos { grid-template-columns: 1fr; padding: 0 5%; }
  #carrinho.expanded { width: 90%; }

  /* Carrinho mobile */
  #carrinho {
    display: none; /* esconde o carrinho desktop */
  }

  #carrinho-mobile {
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #8a2be2;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: transform 0.2s ease;
  }

  #carrinho-mobile:hover {
    transform: scale(1.1);
  }

  #carrinho-count {
    position: absolute;
    top: 6px;
    right: 6px;
    background: white;
    color: #8a2be2;
    font-weight: bold;
    border-radius: 50%;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* garante que ao adicionar .expanded o carrinho apareça no mobile */
  #carrinho.expanded {
    display: flex !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: 16px !important;
    z-index: 10001 !important;
    flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    background: #f5e9ff;
  }
}

/* Carrinho desktop */
#carrinho {
  display: block;
}

#carrinho-mobile {
  display: none;
}

@media(max-width:768px){
  #carrinho {
    display: none; /* esconde o desktop */
  }

  #carrinho-mobile {
    display: flex; /* mostra o mobile */
  }
}



/* BOLINHAS FLUTUANTES */
.bolinha {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: flutuar 20s linear infinite;
}

@keyframes flutuar {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-50px) translateX(20px); }
  100% { transform: translateY(-100px) translateX(0); }
}

/* SELECT DE ESSÊNCIAS */
.essencia-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 25px;
  border: 2px solid #8a2be2;
  background: white;
  color: #4a207b;
  font-size: 1rem;
  cursor: pointer;
  text-align-last: center;
}

.essencia-select option {
  padding: 5px;
}

/* SABONETES EM BARRA - linha única */
#barra-produtos {
  display: flex;
  flex-wrap: nowrap; /* todos em uma linha */
  gap: 20px;
  overflow-x: auto; /* permite scroll horizontal se não couber */
  padding: 10px 5%;
}

#barra-produtos .produto {
  flex: 0 0 auto; /* largura fixa e não encolhe */
  width: 220px; /* ajuste conforme preferir */
}
/* Remove o select das essências apenas na seção de sabonetes em barra 
#barra-produtos .essencias {
  display: none;
}*/

#kits-produtos {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 colunas iguais */
  gap: 20px; /* espaço entre os cards */
  padding: 0 10%; /* espaço nas laterais */
}

#kits-produtos .produto {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#barra-produtos {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 5%;
}

#barra-produtos .produto {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.carousel {
  position: relative;
  width: 100%;
  padding-top: 100%; /* mantém proporção quadrada, se quiser */
  overflow: hidden;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* evita corte */
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 0;
}

.carousel img.active {
  opacity: 1;
  z-index: 1;
}

.essencia-img {
  display: none;
  width: 100%; /* ou o tamanho que quiser */
}

.essencia-img.active {
  display: block;
}

.produto .carousel {
  width: 100%;
  height: 200px; /* ou o tamanho que quiser para o card */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.produto .carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* faz a imagem preencher mantendo proporção, cortando o excesso */
  display: none;
}

.produto .carousel img.active {
  display: block;
}

/* Cards padrão para desktop */
.produto .carousel {
  width: 100%;
  height: 200px; /* altura fixa para desktop */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.produto .carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.produto .carousel img.active {
  display: block;
}

/* Responsivo para celular */
@media (max-width: 768px) {
  .produto .carousel {
    height: 0;
    padding-top: 75%; /* mantém proporção 4:3, ajusta se quiser mais alto ou baixo */
  }

  .produto .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}
.produto {
  display: flex;
  width: 100%;
  max-width: 300px; /* ou o tamanho que você quiser */
  margin: 10px;
  box-sizing: border-box;
}

.produto img {
  width: 100%;
  height: auto; /* altura automática, mantém proporção */
  object-fit: cover; /* garante que preencha horizontal sem distorcer */
  border-radius: 8px;
}

/* Cards em grid no desktop */
.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

/* Responsivo para celular */
@media (max-width: 768px) {
  .produtos {
    grid-template-columns: 1fr; /* um card por linha */
  }
  .produto {
    max-width: 100%;
  }
}

/* RESPONSIVO PARA CELULAR */
@media (max-width: 768px) {
body, html {
overflow-x: hidden; /* impede scroll horizontal */
width: 100vw;       /* garante largura máxima da tela */
}

/* Container de produtos */
.produtos {
display: flex;
gap: 15px;
padding: 0 5px;   /* pequena margem */
width: 100%;
box-sizing: border-box;
}

/* Cards de produtos */
.produto {
flex: 1 1 100%;
width: 100%;       /* ocupa todo espaço horizontal */
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}

/* Carrossel de imagens */
.carousel, .produto img {
width: 100%;
height: auto;
max-height: none; /* sem limite de altura */
object-fit: cover;
}

.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Essências */
.essencias select {
width: 100%;
}

/* Botões */
button.add-carrinho {
width: 100%;
padding: 12px;
font-size: 1rem;
}

/* Carrinho mobile */
#carrinho {
display: none; /* desktop escondido */
}

#carrinho-mobile {
display: flex;
}

#carrinho.expanded {
width: 95% !important;
max-height: 85vh !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
padding: 16px !important;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0,0,0,0.35);
background: #fff;
display: flex !important;
overflow-y: auto !important;
z-index: 10001 !important;
}

/* Footer menor no celular */
footer {
padding: 15px;
font-size: 0.85rem;
}
}
/* RESPONSIVO CELULAR UNIFICADO */
@media (max-width: 768px) {
body, html {
overflow-x: hidden;
width: 100vw;
}

/* Todas as seções de produtos */
#barra-produtos,
#novos-produtos,
#kits-produtos,
.produtos {
display: flex;
gap: 20px;
padding: 10px;
}

/* Todos os cards */
.produto {
width: 100%;
display: flex;
justify-content: space-between; /* botão sempre no final */
align-items: stretch;
box-sizing: border-box;
padding: 15px;
border-radius: 15px;
background: #f3e7ff;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Carrossel de imagens */
.produto .carousel {
width: 100%;
padding-top: 75%; /* proporção 4:3 */
position: relative;
overflow: hidden;
margin-bottom: 10px;
}

.produto .carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Essências e selects */
.essencias {
display: flex;
justify-content: center;
gap: 10px;
margin: 10px 0;
}

.essencias select {
width: 100%;
padding: 10px;
font-size: 1rem;
border-radius: 25px;
}

/* Botão ocupar toda a largura */
button.add-carrinho {
width: 100%;
padding: 12px;
font-size: 1rem;
margin-top: 10px;
flex-shrink: 0;
}

/* Carrinho mobile */
#carrinho {
display: none;
}

#carrinho-mobile {
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #8a2be2;
border-radius: 50%;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
cursor: pointer;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
z-index: 9999;
transition: transform 0.2s ease;
}

#carrinho-mobile:hover {
transform: scale(1.1);
}

#carrinho-count {
position: absolute;
top: 6px;
right: 6px;
background: white;
color: #8a2be2;
font-weight: bold;
border-radius: 50%;
font-size: 12px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}

/* Carrinho expandido */
#carrinho.expanded {
display: flex !important;
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 95% !important;
max-height: 85vh !important;
overflow-y: auto !important;
padding: 16px !important;
z-index: 10001 !important;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0,0,0,0.35);
background: #f5e9ff;
}
}

/* BARRA HORIZONTAL FUNCIONANDO - MOBILE E DESKTOP */
#barra-produtos, .produtos {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 10px 0;      /* padding horizontal mínimo */
  margin: 0;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
}

#barra-produtos .produto, .produtos .produto {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 220px;
  margin: 0;
  box-sizing: border-box;
}

/* Scrollbar opcional */
#barra-produtos::-webkit-scrollbar, .produtos::-webkit-scrollbar {
  height: 8px;
}
#barra-produtos::-webkit-scrollbar-thumb, .produtos::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}

/* MOBILE - força barra horizontal */
@media(max-width:768px){
  #barra-produtos, .produtos {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 15px !important;
    padding: 10px !important;
  }
  #barra-produtos .produto, .produtos .produto {
    width: 220px !important;
  }
  /* Primeiro card encosta na borda */
  #barra-produtos .produto:first-child, .produtos .produto:first-child {
    margin-left: 0 !important;
  }
}
.produto-content {
  flex-grow: 1; /* ocupa todo o espaço do card acima do botão */
}

.produto button.add-carrinho {
  margin-top: auto; /* empurra sempre para baixo */
}
.produto {
  display: flex;
  justify-content: flex-start;
}

.produto button.add-carrinho {
  margin-top: auto; /* força o botão para o final */
}
.produto {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 300px;
  margin: 10px;
  box-sizing: border-box;
  min-height: 400px; /* ajusta conforme o tamanho médio do card */
}
#barra-produtos, .produtos {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
#barra-produtos {
  display: flex;
  flex-wrap: nowrap; /* linha única */
  overflow-x: auto;
  gap: 16px;
  scroll-snap-type: x mandatory;
}
.produtos {
  display: grid; /* grid normal para líquidos e geleias */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}
@media(max-width:768px){
  #barra-produtos {
    flex-direction: row;
    overflow-x: auto;
    gap: 15px;
  }
}

.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* cards no tamanho certo */
  gap: 25px;
}

.produto {
  width: 100%;
  max-width: 300px;  /* mantém tamanho dos cards */
  min-height: 400px; /* ajusta altura mínima */
  margin: 10px;
  box-sizing: border-box;
}
/* ===== FORÇA LAYOUT DESKTOP ===== */
@media(min-width:769px){
  .produtos {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 25px !important;
    flex-direction: initial !important; /* ignora qualquer flex do mobile */
    padding: 0 10% !important;
  }

  .produto {
    width: 100% !important;
    max-width: 300px !important;
    min-height: 400px !important;
    margin: 10px !important;
    flex: initial !important; /* ignora flex do mobile */
  }

  #barra-produtos {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 16px !important;
  }

  #barra-produtos .produto {
    width: 220px !important;
    flex: 0 0 auto !important;
  }
}
/* ===== Alinha cards no desktop ===== */
@media(min-width:769px){
  .produtos {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 25px !important;
    align-items: start; /* alinha todos os cards no topo */
  }

  .produto {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin: 0 !important; /* remove margens extras que desalinhavam */
    min-height: 400px !important; /* altura consistente */
  }

  #barra-produtos {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: flex-start; /* alinha todos no topo */
  }

  #barra-produtos .produto {
    margin: 0 !important; /* remove margem extra do primeiro card */
  }
}
.produto {
  display: flex !important;
  flex-direction: column !important; /* coluna vertical */
  justify-content: flex-start;        /* conteúdo começa do topo */
  min-height: 400px;                  /* altura consistente */
  margin: 10px;
  box-sizing: border-box;
}

.produto-content {
  flex-grow: 1; /* ocupa todo o espaço acima do botão */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.produto button.add-carrinho {
  margin-top: auto; /* força o botão para a base do card */
}
/* ===== CORREÇÃO BOTÃO ADICIONAR AO CARRINHO - BARRA HORIZONTAL ===== */
#barra-produtos .produto {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: 100% !important;      /* força ocupar toda altura do container */
}

#barra-produtos .produto .produto-content {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}

#barra-produtos .produto button.add-carrinho {
margin-top: auto !important;  /* força o botão para o final do card */
}
.essencias select {
  display: block !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  position: relative !important;
}