/* ============================================================
   LÁ PIPOKITA — "Tapa no visual" (refinamentos)
   Mantém 100% a identidade atual. Só padroniza botões,
   animações e dá mais respiro/acabamento. Carrega DEPOIS
   do styles.css, então apenas refina o que já existe.
   ============================================================ */

:root{
  --ease: cubic-bezier(.2,.8,.3,1);
  --ring: 0 0 0 3px rgba(247,200,67,.5);
}

/* ---- Transições suaves e consistentes em tudo que é interativo ---- */
.btn, .btn-add, .btn-cart, .btn-account, .card, .benefit, .step, .testi,
.faq details, nav.main a, .social a, .qty button, .sec-link, .fav-heart,
.field input, #busca, details summary{
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), border-color .28s var(--ease),
              color .28s var(--ease);
}

/* ---- Botões: mesma "pegada" em todos ---- */
.btn{ letter-spacing:.01em; will-change:transform; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.98); }
.btn-primary:hover{ box-shadow:0 16px 34px rgba(233,163,25,.50); }
.btn-red:hover{ box-shadow:0 16px 34px rgba(214,40,40,.45); }
.btn-outline:hover{ background:rgba(74,46,26,.06); border-color:var(--brown); }

/* CTA principal com um brilho sutil ao passar o mouse */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .65s var(--ease); pointer-events:none;
}
.btn-primary:hover::after{ left:130%; }

/* Botão "Adicionar ao carrinho" dos cards: hover + clique padronizados */
.btn-add:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(214,40,40,.40); }
.btn-add:active{ transform:scale(.97); }

/* Carrinho no topo: realce mais elegante */
.btn-cart:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--shadow); }

/* ---- Foco acessível (navegação por teclado) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:12px;
}

/* ---- Cards de produto: lift e sombra mais coerentes ---- */
.card{ border-color:#f1e6d0; }
.card:hover{ transform:translateY(-10px); box-shadow:0 26px 60px rgba(74,46,26,.16); }
.card-img img{ transition:transform .6s var(--ease); }
.card:hover .card-img img{ transform:scale(1.06); }

/* Benefícios, passos e depoimentos: mesmo comportamento dos cards */
.benefit:hover, .step:hover, .testi:hover{
  transform:translateY(-8px); box-shadow:0 22px 50px rgba(74,46,26,.14);
}

/* ---- Respiro: seções e títulos com um pouco mais de espaço ---- */
section.block{ padding:76px 0; }
.sec-head{ margin-bottom:46px; }
.sec-head h2::after{ transition:width .4s var(--ease); }

/* ---- Inputs mais suaves ---- */
.field input:focus, #busca:focus{ box-shadow:0 0 0 3px rgba(247,200,67,.28); }

/* ---- FAQ: seta e abertura mais suaves ---- */
.faq summary::after{ transition:transform .3s var(--ease); }
.faq details[open]{ box-shadow:var(--shadow); }

/* ---- Reveal de scroll um tico mais refinado ---- */
.reveal{ transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ---- WhatsApp flutuante: hover mais gostoso ---- */
.wa-float:hover{ transform:translateY(-2px) scale(1.10); }

/* ============================================================
   SISTEMA DE BOTÕES — padronização (todos com a mesma pegada)
   ============================================================ */
/* Base: alinhamento central, altura mínima e emoji bem centralizado */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:52px; line-height:1; cursor:pointer; text-align:center;
}
.btn-add{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:48px; cursor:pointer;
}

/* Variante SECUNDÁRIA (ações de apoio): botão de verdade, com borda e hover */
.btn-secondary{
  background:var(--cream-2); color:var(--brown);
  border:1.5px solid #ecd9b0; box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{ background:#f3e6c4; border-color:var(--gold); box-shadow:var(--shadow); }
.btn-secondary:active{ transform:translateY(-1px) scale(.98); }

/* Tamanho COMPACTO (botão ao lado de input, ações inline) */
.btn-sm{ min-height:46px; padding:11px 20px; font-size:.92rem; }

/* Estado DESABILITADO consistente (ex.: carrinho vazio / enviando pedido):
   cinza-creme neutro, dentro da paleta — nada de vermelho desbotado */
.btn:disabled, .btn[disabled], .btn-add:disabled{
  background:#e7decd !important; background-image:none !important;
  color:#9a8f7d !important; border-color:#e7decd !important;
  cursor:not-allowed; box-shadow:none; transform:none !important;
}
.btn:disabled::after{ display:none !important; }

/* Botão "esgotado / avise-me" nos cards: aparência neutra, sem hover */
.btn-add.soldout{ background:#e6ded0; color:#8a7f70; box-shadow:none; }
.btn-add.soldout:hover{ transform:none; box-shadow:none; }

/* ============================================================
   CARRINHO na paleta da marca (dourado + marrom)
   ============================================================ */
/* Cabeçalho: marrom com título dourado */
.drawer-head{ background:linear-gradient(135deg,#6B4423,var(--brown)); color:var(--butter); }
.drawer-head h3{ color:var(--butter); }
.drawer-head .drawer-close{ background:rgba(255,248,238,.16); color:#FFF8EE; }
.drawer-head .drawer-close:hover{ background:rgba(255,248,238,.28); }

/* Botão finalizar compra: dourado da marca (igual "Quero provar") */
#btn-checkout:not(:disabled){
  background:linear-gradient(180deg,#FFD56B,var(--butter)); color:var(--brown);
  box-shadow:0 8px 22px rgba(233,163,25,.4);
}
#btn-checkout:not(:disabled):hover{ box-shadow:0 16px 34px rgba(233,163,25,.50); }

/* Botões de quantidade: dourado em vez de vermelho */
.qty button{ border-color:var(--gold); color:var(--gold); }
.qty button:hover{ background:var(--gold); color:#fff; }

/* ---- Respeita quem prefere menos movimento ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
}