@charset "UTF-8";
/* ================================================================
   ESTILOS DA CASA — css/style.css
   ----------------------------------------------------------------
   Aqui fica só o que o Tailwind não resolve sozinho: o menu de
   vidro, a textura do fundo, as animações e a barra de quantidade.
   As CORES do site NÃO ficam aqui — elas estão em js/cores.js.
================================================================ */
/* >>> COR PRINCIPAL usada por este arquivo (barra de quantidade e borda
       do menu). Deve ser a MESMA de "marca" em js/cores.js. <<< */
:root { --cor-marca: #b08b61; }

html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

/* Compensa o menu fixo quando clica nos links âncora */
section[id], main[id] { scroll-margin-top: 5.5rem; }

/* ===== MENU COM EFEITO VIDRO (glassmorphism) =====
   Fica translúcido sobre o banner e fecha (fica mais opaco)
   assim que o usuário rola a página. */
#cabecalho {
  background: rgba(27, 25, 23, .28);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(250, 247, 242, .12);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#cabecalho.rolado {
  background: rgba(27, 25, 23, .88);
  border-bottom-color: color-mix(in srgb, var(--cor-marca) 55%, transparent);
  box-shadow: 0 10px 30px rgba(15, 14, 13, .35);
}
/* Navegadores sem suporte a backdrop-filter: fundo sólido para não perder leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #cabecalho { background: rgba(27, 25, 23, .82); }
}

/* Esconde a barra de rolagem dos filtros horizontais (mobile) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Textura sutil de "papel/açougue" no fundo */
.bg-textura {
  background-color: #faf7f2;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(27,25,23,.06) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Animações */
@keyframes pop { 0%{transform:scale(.85);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.anim-pop { animation: pop .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes slideUp { from{transform:translateY(120%);opacity:0} to{transform:translateY(0);opacity:1} }
.anim-toast { animation: slideUp .3s cubic-bezier(.2,.8,.3,1) both; }

/* Impede o "scroll atrás" quando o carrinho está aberto */
body.travado { overflow: hidden; }

/* ===== BOTÃO FLUTUANTE DO WHATSAPP =====
   Ele mora no canto de baixo à direita. No CELULAR, quando o cliente põe
   algo no carrinho, a barra do carrinho toma o rodapé da tela — então o
   botão sobe para não ficar um em cima do outro. Quem liga e desliga a
   classe "com-barra" é o js/script.js (bloco 8), no mesmo lugar em que a
   barra do carrinho aparece.
   No COMPUTADOR essa barra não existe (md:hidden), por isso a regra de
   subir vale só até 767px. */
#whatsFlutuante { transition: bottom .3s ease, transform .2s ease; }

@media (max-width: 767px) {
  #whatsFlutuante.com-barra { bottom: 6.25rem; }
}

/* ===== BARRA DE QUANTIDADE (kg / unidades) =====
   O <input type="range"> nasce feio e diferente em cada navegador,
   então o desenho da trilha e da bolinha é feito aqui na mão. */
.barra-qtd {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px;
  background: transparent; cursor: pointer;
}
/* trilha */
.barra-qtd::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--cor-marca) var(--preenchido, 0%), rgba(27,25,23,.12) var(--preenchido, 0%));
}
.barra-qtd::-moz-range-track {
  height: 6px; border-radius: 999px; background: rgba(27,25,23,.12);
}
.barra-qtd::-moz-range-progress {
  height: 6px; border-radius: 999px; background: var(--cor-marca);
}
/* bolinha */
.barra-qtd::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 999px; background: #fff;
  border: 3px solid var(--cor-marca);
  box-shadow: 0 2px 6px rgba(27,25,23,.25);
  transition: transform .15s ease;
}
.barra-qtd::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; border: 3px solid var(--cor-marca);
  box-shadow: 0 2px 6px rgba(27,25,23,.25);
}
.barra-qtd:active::-webkit-slider-thumb { transform: scale(1.15); }
.barra-qtd:focus-visible { outline: none; }
.barra-qtd:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-marca) 25%, transparent); }
.barra-qtd:focus-visible::-moz-range-thumb   { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-marca) 25%, transparent); }