body { padding-bottom: 110px; }
.topo { padding: 28px 16px 14px; max-width: 1100px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 10px; }
.selo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--mel); box-shadow: 0 0 0 4px var(--mel-claro); }
.topo h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.saudacao { font-family: var(--titulo); font-size: 1.25rem; margin: 18px 0 2px; }
.saudacao:empty { display: none; }
.topo .mudo { margin: 4px 0 0; }
.chips { max-width: 1100px; margin: 0 auto; }

.grade {
  display: grid; gap: 14px; padding: 6px 16px 16px; max-width: 1100px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.cat-titulo { grid-column: 1 / -1; font-size: 1.3rem; margin: 12px 0 -2px; }
.produto { display: grid; grid-template-columns: 112px 1fr; overflow: hidden; }
.produto .foto { width: 112px; height: 100%; min-height: 140px; object-fit: cover; }
.produto .info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.produto h3 { font-size: 1.08rem; }
.produto .desc { font-size: .88rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produto .rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.produto .un { font-size: .8rem; color: var(--suave); display: block; font-weight: 400; }
.produto.no-carrinho { box-shadow: 0 0 0 2.5px var(--mel), var(--sombra); }

.add { min-height: 42px; padding: 0 16px; }

.barra {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--tinta); color: #fff; border-radius: 20px; padding: 10px 10px 10px 18px; box-shadow: 0 10px 30px rgba(30, 20, 5, .3);
}
.barra[hidden] { display: none; }
.barra small { display: block; opacity: .75; font-size: .8rem; }
.barra strong { font-size: 1.2rem; }

.linha-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.linha-item:last-of-type { border-bottom: 0; }
.ok { text-align: center; padding: 8px 0 4px; }
.ok b { font-size: 3rem; display: block; }