/* ========== Variables ========== */
.popup-overlay.active {
  display: flex;
}

:root{
  --bg-1: #ffefb8;
  --bg-2: #f7d86b;
  --accent: #d1981c;
  --card-bg: #ffffff;
  --muted: #6b6b6b;
  --radius: 18px;
  --container-padding: 16px;
  --max-width: 1100px;
  --shadow: 0 8px 20px rgba(15,15,15,0.06);
  --text: #2b2b2b;
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background: #fff; /* fundo único */
  line-height:1.35;
  position: relative;
}

.copyright{
  text-align:center;
  font-size:14px;
  margin-top:20px;
  opacity:0.8;
}

/* Container */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* Header */
.site-header{
  background: linear-gradient(180deg,var(--bg-2), #fbe8a8 60%);
  padding:18px 0 20px;
  border-radius: 0 0 32px 32px;
  transform: none !important;
 
}

/* ============================= */
/* FOOTER AMARELO */
/* ============================= */

.site-footer{
  background: linear-gradient(180deg,var(--bg-2), #fbe8a8 60%);
  padding: 28px 0 40px;
  margin-top: 60px;

  /* borda arredondada em cima */
  border-radius: 32px 32px 0 0;
}

.site-footer p{
  margin: 6px 0;
}


.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo img{
  height:50px;
  object-fit:contain;
}

.redes-sociais{
    position: absolute;
    top: 30px;
    right: 40px;
    display: flex;
    gap: 15px;
}

.redes-sociais i{
    font-size: 28px;
    color: #333;
    transition: 0.3s;
}

.fa-instagram:hover{
    color: #E1306C;
}

.fa-whatsapp:hover{
    color: #25D366;
}
/* Hero */
.hero-title{
  font-size:48px;
  font-weight:800;
  color:#5b3f0f;
}

/* Controls */
.controls{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.pill{
  background:rgba(255,255,255,0.6);
  border:none;
  padding:10px 14px;
  border-radius:30px;
  cursor:pointer;
}

.pill.active{
  background:#fff;
  box-shadow:var(--shadow);
}

/* Main */
.main{ padding:20px 0 80px }

.product-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.product-card{
  display:flex;
  gap:14px;
  background:#fff;
  padding:16px;
  border-radius:16px;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}

.product-card:hover{
  transform:translateY(-3px);
}

.product-media{
  width:88px;
  height:88px;
  background:#fdeecb;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-media img{
  width:72px;
  height:72px;
  object-fit:contain;
}

.product-title{
  font-size:20px;
  margin:0 0 6px;
}

.product-desc{
  font-size:14px;
  color:var(--muted);
}

/* Popup */
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.popup-overlay.show{
  display:flex;
}

.popup-content{
  background:#fff;
  border-radius:18px;
  max-width:420px;
  padding:22px;
  position:relative;
  animation:popupFade .3s ease;
}

@keyframes popupFade{
  from{ transform:scale(.9); opacity:0 }
  to{ transform:scale(1); opacity:1 }
}

.close-popup{
  position:absolute;
  top:12px;
  right:12px;
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
}

.popup-img{
  width:100%;
  max-height:300px;
  object-fit:contain;
}

.popup-sabores{
  margin-top:6px;
  font-size:14px;
  color:#444;
  line-height:1.6;
}


/* ============================= */
/* NOTIFICAÇÃO FLUTUANTE FIXA */
/* ============================= */

.floating-notice{
  position: fixed;

  /* posição padrão */
  bottom: 16px;
  right: 16px;

  /* garante que nunca saia da tela */
  width: min(320px, calc(100vw - 24px));

  background: #ffffff;
  border-radius: 14px;
  padding: 16px;

  box-shadow: 0 18px 45px rgba(0,0,0,0.18);

  z-index: 999999;

  /* animação */
  opacity: 0;
  transform: translateY(20px);
  animation: noticeAppear .4s ease forwards;
}

/* botão X */
.notice-close{
  position: absolute;
  top: 8px;
  right: 8px;

  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

/* animação */
@keyframes noticeAppear{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* AJUSTE EXCLUSIVO PARA CELULAR */
/* ============================= */

@media (max-width: 600px){
  .floating-notice{
    right: 12px;
    bottom: 12px;
    left: auto;

    /* impede que o mobile empurre ela */
    margin: 0;
  }
}

/* Focus acessível */
button:focus,
select:focus,
a:focus{
  outline:3px solid rgba(209,164,48,.25);
  outline-offset:3px;
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:30px 0 10px;
}

.pagination button{
  background:#f7d86b;
  border:none;
  padding:10px 14px;
  border-radius:50%;
  font-size:18px;
  cursor:pointer;
}

.pagination span{
  font-weight:600;
  font-size:16px;
}

.product-card.is-hidden-by-pagination {
  display: none !important;
}