@charset "UTF-8";
/* Aldre Hortifruti — catálogo + montador de lista */

.cat-hero {
  background: linear-gradient(160deg, var(--carvao) 0%, #2c241f 100%);
  color: #fff; padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.cat-hero::before {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgb(242 73 10 / .28), transparent 68%);
  pointer-events: none;
}
.cat-hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem); color: #fff;
  margin-bottom: .35em;
}
.cat-hero .lead { color: #c6bab0; max-width: 54ch; }
.migalhas { font-size: .85rem; color: #9c9188; margin-bottom: 1.25rem; }
.migalhas a:hover { color: var(--laranja-claro); }
.migalhas span { opacity: .5; margin-inline: .4rem; }

/* ------------------------------------------------------------- toolbar */
.ferramentas {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgb(251 248 244 / .94);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borda);
  padding-block: .9rem;
}
.busca-wrap { position: relative; display: flex; gap: .6rem; align-items: center; }
.busca {
  position: relative; flex: 1; min-width: 0;
}
.busca svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--texto-suave); pointer-events: none;
}
.busca input {
  width: 100%; padding: .85rem 2.6rem .85rem 2.9rem;
  border: 1.5px solid var(--borda-forte); border-radius: var(--r-full);
  background: var(--branco); font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca input:focus {
  outline: none; border-color: var(--laranja);
  box-shadow: 0 0 0 4px rgb(242 73 10 / .12);
}
.busca__limpar {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--creme-2); color: var(--texto-suave);
  cursor: pointer; display: none; place-items: center; font-size: 1.1rem; line-height: 1;
}
.busca__limpar.ativo { display: grid; }
.busca__limpar:hover { background: var(--borda-forte); color: var(--carvao); }

.chips {
  display: flex; gap: .5rem; margin-top: .8rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip {
  flex: none; scroll-snap-align: start;
  padding: .5rem 1rem; border-radius: var(--r-full);
  border: 1.5px solid var(--borda-forte); background: var(--branco);
  font-size: .88rem; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.chip:hover { border-color: var(--carvao); }
.chip[aria-pressed="true"] {
  background: var(--carvao); color: #fff; border-color: var(--carvao);
}
.chip small { opacity: .6; margin-left: .35rem; font-size: .95em; }

.contagem {
  font-size: .88rem; color: var(--texto-suave); margin-top: .75rem;
}
.contagem strong { color: var(--carvao); font-weight: 700; }

/* -------------------------------------------------------------- lista */
.catalogo { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(4rem, 8vw, 6rem); }

.bloco-cat { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); scroll-margin-top: 180px; }
.bloco-cat__topo {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1.35rem;
  border-bottom: 2px solid var(--borda);
}
.bloco-cat__topo h2 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); margin: 0;
  display: flex; align-items: center; gap: .6rem;
}
.bloco-cat__topo h2 svg { width: 24px; height: 24px; color: var(--laranja); flex: none; }
.bloco-cat__topo p { margin: 0; font-size: .9rem; color: var(--texto-suave); flex: 1; min-width: 12rem; }
.bloco-cat__qtd {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .82rem;
  background: var(--laranja-tint); color: var(--laranja-escuro);
  padding: .25rem .7rem; border-radius: var(--r-full);
}

.itens {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .75rem .7rem 1rem;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--r-md);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.item:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }
.item.na-lista { border-color: var(--laranja); background: var(--laranja-tint); }
.item__txt { flex: 1; min-width: 0; }
.item__nome {
  font-size: .94rem; font-weight: 550; line-height: 1.35;
  overflow-wrap: anywhere;
}
.item__uns { display: flex; gap: .3rem; margin-top: .3rem; flex-wrap: wrap; }
.item__un {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 5px;
  background: var(--creme-2); color: var(--texto-suave);
}
.item.na-lista .item__un { background: rgb(255 255 255 / .7); }
.item__add {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  border: 1.5px solid var(--borda-forte); background: var(--branco);
  color: var(--carvao); cursor: pointer;
  display: grid; place-items: center;
  transition: var(--transicao);
}
.item__add svg { width: 18px; height: 18px; }
.item__add:hover { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.item.na-lista .item__add { background: var(--laranja); border-color: var(--laranja); color: #fff; }

.vazio {
  text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem;
}
.vazio h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.vazio p { color: var(--texto-suave); max-width: 40ch; margin-inline: auto; }

.skeleton { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.skeleton div {
  height: 62px; border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--creme-2) 25%, #efe7dc 50%, var(--creme-2) 75%);
  background-size: 300% 100%; animation: brilha 1.4s ease-in-out infinite;
}
@keyframes brilha { to { background-position: -300% 0; } }

/* ------------------------------------------------------------- gaveta */
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--branco); z-index: 200;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgb(20 17 15 / .2);
  transform: translateX(102%);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.gaveta.aberta { transform: none; }
.gaveta__topo {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--borda);
}
.gaveta__topo h2 { font-size: 1.15rem; margin: 0; flex: 1; }
.gaveta__topo .pill {
  font-size: .78rem; font-weight: 700; padding: .2rem .6rem;
  background: var(--laranja); color: #fff; border-radius: var(--r-full);
}
.gaveta__fechar {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--creme-2); cursor: pointer; font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; color: var(--texto-suave);
}
.gaveta__fechar:hover { background: var(--borda-forte); color: var(--carvao); }

.gaveta__corpo { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.gaveta__vazia { text-align: center; padding: 3rem 1rem; color: var(--texto-suave); }
.gaveta__vazia svg { width: 46px; height: 46px; margin: 0 auto 1rem; color: var(--borda-forte); }

.li {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem;
  padding: .8rem 0; border-bottom: 1px dashed var(--borda);
  align-items: center;
}
.li:last-child { border-bottom: 0; }
.li__nome { font-size: .92rem; font-weight: 550; line-height: 1.35; }
.li__ctrl { display: flex; align-items: center; gap: .35rem; }
.li__qtd {
  width: 62px; padding: .35rem .45rem; text-align: center;
  border: 1.5px solid var(--borda); border-radius: 8px; font-size: .9rem;
  background: var(--creme);
}
.li__qtd:focus { outline: none; border-color: var(--laranja); background: #fff; }
.li__un {
  padding: .35rem .4rem; border: 1.5px solid var(--borda); border-radius: 8px;
  font-size: .82rem; background: var(--creme);
}
.li__rm {
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--texto-suave); font-size: 1.15rem; line-height: 1;
  display: grid; place-items: center;
}
.li__rm:hover { background: #fdecec; color: #c0392b; }

.gaveta__rodape {
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda); background: var(--creme);
  display: grid; gap: .6rem;
}
.gaveta__obs { display: grid; gap: .35rem; }
.gaveta__obs label { font-size: .8rem; font-weight: 600; }
.gaveta__obs input {
  padding: .6rem .8rem; border: 1.5px solid var(--borda); border-radius: var(--r-sm);
  font-size: .92rem; background: #fff;
}
.gaveta__obs input:focus { outline: none; border-color: var(--laranja); }
.gaveta__limpar {
  background: none; border: 0; color: var(--texto-suave); font-size: .84rem;
  cursor: pointer; text-decoration: underline; justify-self: center; padding: .25rem;
}
.gaveta__limpar:hover { color: #c0392b; }

.veu {
  position: fixed; inset: 0; z-index: 190; background: rgb(20 17 15 / .45);
  opacity: 0; pointer-events: none; transition: opacity 320ms ease;
  backdrop-filter: blur(2px);
}
.veu.ativo { opacity: 1; pointer-events: auto; }

/* botão flutuante da lista */
.btn-lista {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.35rem; border: 0; border-radius: var(--r-full);
  background: var(--carvao); color: #fff; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 22px rgb(0 0 0 / .22);
  transition: transform var(--transicao), background-color var(--transicao);
}
.btn-lista:hover { transform: translateY(-3px); background: var(--carvao-2); }
.btn-lista svg { width: 20px; height: 20px; }
.btn-lista__n {
  min-width: 22px; height: 22px; padding-inline: 5px; border-radius: var(--r-full);
  background: var(--laranja); display: grid; place-items: center;
  font-size: .78rem; font-weight: 800;
}
@media (max-width: 700px) {
  .bloco-cat__topo {
    position: relative; flex-direction: column; align-items: flex-start;
    gap: .35rem; padding-right: 5.5rem;
  }
  .bloco-cat__topo p { min-width: 0; }
  .bloco-cat__qtd { position: absolute; right: 0; top: 2px; }
}
@media (max-width: 560px) {
  .btn-lista { left: 14px; right: 14px; bottom: 14px; justify-content: center; }
  .catalogo { padding-bottom: 7rem; }
}

@media (max-width: 560px) {
  .gaveta { width: 100%; top: auto; height: min(88svh, 720px); border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(102%); }
  .gaveta.aberta { transform: none; }
}

@media print {
  .site-header, .topbar, .ferramentas, .btn-lista, .gaveta, .veu, .rodape, .zap-flutua { display: none !important; }
  .cat-hero { background: none; color: #000; }
  .item { break-inside: avoid; }
}