/* === RESET ESSENCIAL === */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --bg:#1A1210; --card:#E8F5E9; --accent:#07fcdb; --muted:#1A1210; --gold:#ac940d;
  --glass: rgb(248, 252, 4); --ok:#29864b;
  --header-collapsed-h: 58px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

button, .btn, .add-btn, .cat, .destaque-add, .footer-cart, .meus-pedidos, .kbd button {
  transition: transform .08s ease, filter .12s ease;
}
button:active, .btn:active, .add-btn:active, .cat:active, .destaque-add:active, .footer-cart:active, .meus-pedidos:active, .kbd button:active {
  transform: scale(0.94); filter: brightness(0.88);
}

html,body{height:100%;margin:0;background:linear-gradient(180deg,#1A1210 0%, #1A1210 60%);color:#e6eef6;-webkit-font-smoothing:antialiased; scroll-behavior: smooth;}
html, body{ -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width: 0; height: 0; }
.app{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;gap:1px;padding:4px 12px 90px;box-sizing:border-box;}

header{ position: sticky; top: -110px; z-index: 60; display: grid; place-items: center; padding: 6px 16px 4px; background-image: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(26,18,16,0.9)), url('img/pasterry_fundo_header.jpg'); background-size: cover; background-position: center 60%; border-bottom: 1px solid #1A1210; }
.brand{ display: flex; flex-direction: column; align-items: center; }
.logo{ width: 90px; height: 90px; border-radius: 100px; overflow: hidden; display:flex; align-items:center; justify-content:center; background:#1A1210; box-shadow: 0 10px 30px #1A1210; animation: logo-fade linear both; animation-timeline: scroll(); animation-range: 150px 250px; }
.logo img{ width:100%; height:100%; object-fit:cover; display:block }
@keyframes logo-fade { to { opacity: 0; transform: scale(0.7) translateY(-20px); filter: blur(4px); } }

.meus-pedidos{ 
  background:linear-gradient(135deg,#dc3545 0%, #ff4757 100%); 
  color:#fff; 
  position:absolute; 
  left:6px; 
  top:74px; 
  z-index:70; 
  padding:5px 13px; 
  border:none; 
  border-radius:12px; 
  font-weight:900; 
  font-size:14px; 
  cursor:pointer; 
  box-shadow:0 6px 18px rgba(220,53,69,0.5), inset 0 -2px 0 rgba(0,0,0,0.2); 
  text-transform:uppercase; 
  letter-spacing:0.6px;
  animation: pulsePedido 2.5s infinite;
  transition: transform .15s ease;
}
.meus-pedidos:active{ transform: scale(0.95); }
@keyframes pulsePedido { 
  0%,100%{ box-shadow:0 6px 18px rgba(220,53,69,0.5) } 
  50%{ box-shadow:0 8px 24px rgba(220,53,69,0.7) } 
}





.categories{ position: sticky; top: 4px; z-index: 70; display: flex; gap: 6px; overflow-x: auto; padding:8px 12px; margin: 2px -12px 0 -12px; background: #1A1210; border-radius:0; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding: 0 12px; flex-wrap: nowrap; }
.categories::-webkit-scrollbar{display:none}
.cat { flex: 0 0 auto; min-width: 78px; max-width: 88px; padding: 6px 6px; border-radius: 14px; font-size: 12px; scroll-snap-align: start; background: var(--glass); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 800; color: #1a1600; white-space: normal; text-align: center; min-height: 44px; line-height: 1.05; }
.cat.active { outline: 3px solid var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.5); transform: scale(1.05); }

/* DESTAQUES - 3 CARDS FIXOS */
.destaques{ margin: px -12px 8px -12px; overflow: visible; }
.destaques h2{ font-size:12px; font-weight:800; margin:0 auto 6px; color:#e6eef6; text-align:center; background:#1A1210; padding:4px 0; position:relative; z-index:5; }
.destaques-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; padding:6px 12px 12px 12px; width:100%; overflow:hidden; transition: opacity .35s ease, transform .35s ease; }
.destaques-grid.animating{ opacity:0.6; transform: scale(0.98); }

.destaque-card{ width:100%; position: relative; display: flex; flex-direction: column; background: rgba(0,0,0,0.18); border: 1px solid var(--gold); border-radius: 10px; padding: 0px; box-shadow: 0 4px 12px rgba(172,148,13,0.25); cursor:pointer; transition: transform .4s ease, opacity .4s ease; animation: cardIn .5s ease; }
@keyframes cardIn { from { opacity:0; transform: translateY(12px) rotate(-2deg);} to { opacity:1; transform: translateY(0) rotate(0);} }
.destaque-card .img-wrap{ width:100%; aspect-ratio:1/0.9; border-radius:4px; overflow:hidden; background:#0c1220; position:relative; }
.destaque-card .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.destaque-card .badge{ position:absolute; top:4px; left:4px; background:#f8fc04; color:#1a1600; padding:2px 4px; border-radius:3px; font-size:6px; font-weight:700; z-index:2; }
.destaque-card .info{ padding:3px 1px 18px; }
.destaque-card .price{ font-size:15px; font-weight:800; color:#fff; line-height:1.1; }
.destaque-card .title{ font-size:15.5px; font-weight:600; color:#e6eef6; margin-top:1px; line-height:1.2; height:2.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* DESTAQUES MENOS ESTICADOS */
.destaque-card{ padding:4px; border-radius:8px; }
.destaque-card.img-wrap{ aspect-ratio:1/0.75; } /* era 0.9, agora mais baixo */
.destaque-card.info{ padding:4px 2px 4px; }
.destaque-card.price{ font-size:11px; }
.destaque-card.title{ font-size:8px; height:2em; }

.destaque-btns{
  display:flex;
  gap:4px;
  margin-top:4px;
  justify-content:space-between;
}
.destaque-add{
  position:static; /* tira o absolute */
  padding:4px 6px;
  font-size:10px;
  border-radius:4px;
  background:var(--ok);
  color:#fff;
  border:0;
  font-weight:800;
  flex:0 0 auto;
}
.destaque-adicional{
  flex:1;
  padding:4px 6px;
  font-size:9px;
  border-radius:4px;
  background:#6c757d;
  color:#fff;
  border:0;
  font-weight:700;
}




/* cards menos esticados */
.product{ padding:6px; gap:8px; align-items:flex-start; }
.product .media{ width:70px; height:70px; }
.product .title{ font-size:14px; }
.product .price{ font-size:13px; }
.product .info-footer{ margin-top:2px; }
.add-btn.adicional{ background:#6c757d!important; }











.cat-section{ display:block; margin: 2px 4px 8px; }
.cat-section > .muted{ font-weight: 800; letter-spacing: .5px; margin: 2px auto 6px; opacity: .95; text-align:center; width:100%; font-size:18px; text-transform:uppercase; }
.products{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.product{ background:linear-gradient(180deg, rgba(30,30,0,0.02), rgba(25,25,0,0.01)); padding:8px; border-radius:14px; display:flex; flex-direction:row; gap:10px; align-items: center; scroll-margin-top: 20px; border: 1px solid #ac940d; box-shadow: 0 0 6px rgba(172,148,13,0.15); }
.product .media{ position:relative; flex-shrink: 0; width: 80px; height: 80px; border-radius:8px; overflow:hidden; background:#0c1220; }
.product .media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.product .text-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.title{font-weight:700; font-size:15px; line-height: 1.15;}
.price{color:var(--gold); font-weight:700; font-size:14px}
.muted{color:#9aa6b2; font-size:11px; line-height: 1.2;}
.product .info-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.add-btn{ width: auto; padding:6px 12px; border-radius:6px; background:var(--ok); border:0; color:#fff; font-weight:700; font-size:13px; cursor:pointer; flex-shrink: 0; }

.overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:80;}
.dialog{width:840px; max-width:94%; background:#272323; border-radius:12px; padding:14px; display:flex; gap:16px; box-shadow:0 20px 60px rgba(2,6,23,0.8); max-height: 90vh; overflow-y: auto; flex-direction: column; margin: 10px auto;}
.left-panel{flex:1; display:flex; flex-direction:column; gap:10px}

.kbd{display:flex; flex-direction:column; gap:8px}
#sizeOptions button, #sizeOptions .btn, .kbd button, .dialog .kbd button, .overlay .kbd button {
  display:flex!important; justify-content:space-between!important; align-items:center!important; width:100%!important; padding:14px 16px!important; font-size:15px!important; font-weight:800!important; border-radius:12px!important; background:#29864b!important; color:#fff!important; border:none!important; box-shadow:0 3px 10px rgba(0,0,0,0.4)!important; min-height:48px!important;
}

.num-display{font-size:32px; background:#021522; padding:10px; border-radius:10px; text-align:right; color:var(--accent); font-weight:800}
.size-image-wrap{width:100%; display:flex; flex-direction:column; gap:10px; align-items:stretch}
.size-image{width:100%; height:auto; max-height:35vh; object-fit:cover; border-radius:12px; background:#0c1220;}

#sizeOverlay .dialog { max-width: 360px !important; width: 92% !important; padding: 12px !important; gap: 10px !important; }
#sizeOverlay .size-image { max-height: 22vh !important; }
#sizeOverlay #sizeTitle { font-size: 16px !important; }
#sizeOverlay #sizeOptions { gap: 8px !important; margin-top: 8px !important; }

#toastWrap{ position:fixed; left:0; right:0; top:14px; z-index:120; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; background:rgba(7,20,40,.92); color:#e6eef6; border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.5); padding:12px 14px; border-radius:12px; min-width:280px; max-width:90vw; transform:translateY(-12px); opacity:0; animation:toastIn .18s ease forwards, toastOut .18s ease forwards 1.6s }
@keyframes toastIn{ to{ transform:translateY(0); opacity:1 } }
@keyframes toastOut{ to{ transform:translateY(-8px); opacity:0 } }

.footer-bar{ position:fixed; left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(7,20,40,0.0), rgba(7,20,40,0.85) 30%, rgba(7,20,40,0.95)); border-top:1px solid rgba(255,255,255,0.06); z-index:70 }
.footer-cart{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-radius:14px; background:var(--gold); color:#fff; font-weight:900; font-size:18px; border:0; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.15) }
.footer-cart .cart-badge{ min-width:28px; height:28px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); color:#fff; font-weight:900; font-size:14px; }

/* TELA GRANDE - BOTÕES SE ESTICAM E CENTRALIZAM */
@media (min-width: 700px){
  .categories{
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: 8px;
  }
  .cat{
    flex: 1 1 100px;
    max-width: 130px;
    min-width: 90px;
    font-size: 13px;
    padding: 8px 8px;
  }
}