/* ============================================================================
   CASA VERDE ALIMENTOS — ESTILOS
   Mobile first. As cores vêm do config.js (injetadas como variáveis CSS),
   mas os valores abaixo funcionam como padrão caso o JS ainda não carregou.
   ========================================================================== */

:root{
  --oliva:#61764B;
  --oliva-claro:#7C9163;
  --verde:#26382A;
  --verde-2:#1B2A1E;
  --terracota:#D96C3B;
  --terracota-escuro:#BF5628;
  --creme:#FFF7EA;
  --creme-2:#F6EAD6;
  --branco:#FFFFFF;
  --marrom:#5B4636;
  --marrom-claro:#8A7260;

  --tinta:#2A2622;
  --tinta-2:#6B6259;
  --linha:rgba(91,70,54,.14);
  --linha-forte:rgba(91,70,54,.24);

  --sombra-1:0 1px 2px rgba(38,56,42,.06), 0 4px 14px rgba(38,56,42,.06);
  --sombra-2:0 8px 30px rgba(38,56,42,.12);
  --sombra-3:0 24px 60px rgba(38,56,42,.22);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;

  --fonte-titulo:'Poppins', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --max:1180px;
  --header-h:64px;
  --barra-cat-h:58px;
  --easing:cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--barra-cat-h) + 8px); }
body{
  margin:0; background:var(--creme); color:var(--tinta);
  font-family:var(--fonte-texto); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.trava{ overflow:hidden; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--fonte-titulo); font-weight:700; line-height:1.18; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
::selection{ background:var(--terracota); color:#fff; }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:18px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--r-full); font-weight:600; font-size:15px;
  font-family:var(--fonte-titulo); letter-spacing:-.01em; transition:transform .18s var(--easing), box-shadow .18s var(--easing), background-color .18s, color .18s, border-color .18s;
  white-space:nowrap; border:1.5px solid transparent;
}
.btn:active{ transform:scale(.97); }
.btn-primario{ background:var(--terracota); color:#fff; box-shadow:0 6px 18px rgba(217,108,59,.28); }
.btn-primario:hover{ background:var(--terracota-escuro); box-shadow:0 10px 26px rgba(217,108,59,.34); }
.btn-verde{ background:var(--verde); color:#fff; box-shadow:0 6px 18px rgba(38,56,42,.22); }
.btn-verde:hover{ background:var(--verde-2); }
.btn-contorno{ border-color:var(--linha-forte); color:var(--verde); background:var(--branco); }
.btn-contorno:hover{ border-color:var(--oliva); background:#fff; }
.btn-claro{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.btn-claro:hover{ background:rgba(255,255,255,.24); }
.btn-bloco{ width:100%; }
.btn-lg{ padding:16px 26px; font-size:16px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ---------- SELOS ---------- */
.selo{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-full);
  font-size:11px; font-weight:700; letter-spacing:.02em; font-family:var(--fonte-titulo);
  background:var(--creme-2); color:var(--marrom); line-height:1.5; white-space:nowrap;
}
.selo--saudavel,.selo--lowcarb,.selo--vegetariano{ background:#E7EEDF; color:#41562F; }
.selo--caseiro,.selo--natural{ background:#F3E7D8; color:var(--marrom); }
.selo--proteico{ background:#E4EAF2; color:#3C5670; }
.selo--destaque{ background:var(--terracota); color:#fff; }
.selo--novo{ background:var(--verde); color:#fff; }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo{
  position:sticky; top:0; z-index:60; background:var(--verde); color:#fff;
  box-shadow:0 2px 20px rgba(27,42,30,.28);
}
.topo__in{ height:var(--header-h); display:flex; align-items:center; gap:14px; }

.logo{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.logo__marca{ width:38px; height:38px; flex:0 0 auto; }
.logo__txt{ min-width:0; }
.logo__cat{ display:block; font-family:var(--fonte-titulo); font-size:9px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#9DB57C; line-height:1.2; }
.logo__nome{ font-family:var(--fonte-titulo); font-weight:700; font-size:16.5px; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo__nome em{ font-style:normal; color:#F0A575; }
.logo__slogan{ font-size:11px; color:rgba(255,255,255,.62); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav{ display:none; }
.nav a{
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.82); padding:8px 11px; border-radius:var(--r-full);
  transition:color .16s, background-color .16s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.1); }

.topo__acoes{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.btn-pedido{
  display:inline-flex; align-items:center; gap:8px; background:var(--terracota); color:#fff;
  padding:9px 14px; border-radius:var(--r-full); font-weight:650; font-size:14px; font-family:var(--fonte-titulo);
  box-shadow:0 4px 14px rgba(217,108,59,.35); transition:transform .18s var(--easing), background-color .18s;
}
.btn-pedido:hover{ background:var(--terracota-escuro); }
.btn-pedido:active{ transform:scale(.96); }
.btn-pedido span.rotulo{ display:none; }
.btn-pedido .bolha{
  min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-full); background:#fff; color:var(--terracota);
  font-size:12px; font-weight:800; display:grid; place-items:center;
}
.menu-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#fff; }
.menu-btn:hover{ background:rgba(255,255,255,.1); }

/* status aberto/fechado */
.status{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:var(--r-full); background:rgba(255,255,255,.1); color:#fff;
}
.status .ponto{ width:7px; height:7px; border-radius:50%; background:#7ED08C; box-shadow:0 0 0 3px rgba(126,208,140,.25); }
.status--fechado .ponto{ background:#E8A33D; box-shadow:0 0 0 3px rgba(232,163,61,.22); }
.faixa-status{ background:var(--oliva); color:#fff; font-size:12.5px; }
.faixa-status .container{ display:flex; align-items:center; justify-content:center; gap:10px; padding-block:7px; text-align:center; }

/* menu mobile */
.menu-mob{
  position:fixed; inset:0; z-index:90; background:rgba(20,30,22,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.menu-mob.on{ opacity:1; visibility:visible; }
.menu-mob__painel{
  position:absolute; top:0; right:0; bottom:0; width:min(84vw,320px); background:var(--verde); color:#fff;
  padding:18px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .3s var(--easing);
}
.menu-mob.on .menu-mob__painel{ transform:none; }
.menu-mob a{ padding:14px 12px; border-radius:12px; font-weight:600; font-family:var(--fonte-titulo); font-size:17px; }
.menu-mob a:hover{ background:rgba(255,255,255,.1); }
.menu-mob__topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.menu-mob__rodape{ margin-top:auto; font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; background:var(--verde-2); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,30,22,.82) 0%, rgba(20,30,22,.72) 40%, rgba(20,30,22,.92) 100%);
}
.hero__in{ position:relative; padding:44px 0 34px; color:#fff; }
.hero__txt{ min-width:0; }
.hero__fotos{ display:none; }
.hero__foto{
  position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--creme-2);
  box-shadow:0 26px 60px rgba(12,20,14,.5); border:5px solid rgba(255,255,255,.9);
}
.hero__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__foto--a{ aspect-ratio:5/4; }
.hero__foto--b{
  aspect-ratio:1/1; width:50%; margin:-18% 0 0 auto; transform:translateX(4%);
  border-width:4px; box-shadow:0 18px 44px rgba(12,20,14,.46);
}
.hero__tag{
  position:absolute; left:14px; bottom:14px; background:var(--branco); color:var(--verde);
  padding:8px 14px; border-radius:var(--r-full); font-family:var(--fonte-titulo); font-weight:700; font-size:13.5px;
  box-shadow:0 8px 22px rgba(12,20,14,.3); line-height:1.25;
}
.hero__tag b{ display:block; color:var(--terracota); font-size:17px; letter-spacing:-.02em; }
.hero__olho{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:#D9E5C9; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:6px 13px; border-radius:var(--r-full); margin-bottom:16px;
}
.hero h1{ font-size:clamp(30px,8vw,54px); line-height:1.06; letter-spacing:-.03em; max-width:14ch; }
.hero h1 em{ font-style:normal; color:#F0B48C; }
.hero__sub{ margin-top:14px; font-size:clamp(15px,4vw,19px); color:rgba(255,255,255,.86); max-width:46ch; }
.hero__botoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hero__destaques{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); }
.hero__destaques div{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:550; color:rgba(255,255,255,.9); }
.hero__destaques svg{ flex:0 0 auto; color:#B9D19A; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{ padding:44px 0; }
.secao--creme2{ background:linear-gradient(180deg,var(--creme) 0%, var(--creme-2) 100%); }
.secao__olho{
  font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--terracota);
  font-family:var(--fonte-titulo); margin-bottom:8px;
}
.secao__titulo{ font-size:clamp(24px,6vw,34px); color:var(--verde); letter-spacing:-.025em; }
.secao__sub{ margin-top:9px; color:var(--tinta-2); font-size:15.5px; max-width:56ch; }
.secao__cab{ margin-bottom:24px; }

/* ---------- PRATO DO DIA ---------- */
.dia{
  background:var(--branco); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sombra-2); border:1px solid var(--linha);
  display:grid; grid-template-columns:1fr;
}
.dia__foto{ position:relative; aspect-ratio:16/11; background:var(--creme-2); }
.dia__foto img{ width:100%; height:100%; object-fit:cover; }
.dia__flag{
  position:absolute; top:14px; left:14px; background:var(--terracota); color:#fff;
  padding:7px 14px; border-radius:var(--r-full); font-size:12.5px; font-weight:750; font-family:var(--fonte-titulo);
  box-shadow:0 6px 18px rgba(191,86,40,.35);
}
.dia__corpo{ padding:24px 22px 26px; display:flex; flex-direction:column; gap:12px; }
.dia__corpo h3{ font-size:clamp(22px,5.5vw,30px); color:var(--verde); }
.dia__corpo p{ color:var(--tinta-2); font-size:15.5px; }
.dia__linha{ display:flex; flex-wrap:wrap; gap:6px; }
.dia__preco{ font-family:var(--fonte-titulo); color:var(--marrom); font-size:14px; margin-top:2px; }
.dia__preco b{ color:var(--terracota); font-size:27px; letter-spacing:-.02em; }
.dia__nutri{ display:flex; flex-wrap:wrap; gap:7px; }

/* ---------- ESCOLHA RÁPIDA ---------- */
.escolhas{ display:grid; gap:14px; }
.escolha{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:24px 22px 22px; color:#fff;
  min-height:186px; display:flex; flex-direction:column; justify-content:flex-end; gap:9px;
  box-shadow:var(--sombra-1); transition:transform .25s var(--easing), box-shadow .25s var(--easing);
  border:1px solid rgba(0,0,0,.05);
}
.escolha:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); }
.escolha__arte{ position:absolute; inset:0; z-index:0; }
.escolha__arte svg{ width:100%; height:100%; }
.escolha > *:not(.escolha__arte){ position:relative; z-index:1; }
.escolha h3{ font-size:21px; letter-spacing:-.02em; }
.escolha p{ font-size:14px; color:rgba(255,255,255,.85); max-width:34ch; }
.escolha .btn{ align-self:flex-start; margin-top:6px; }
.escolha--trad{ background:var(--marrom); }
.escolha--saud{ background:var(--oliva); }
.escolha--montar{ background:var(--verde); }

/* ============================================================
   CARDÁPIO
   ============================================================ */
.barra-cat{
  position:sticky; top:var(--header-h); z-index:50; background:rgba(255,247,234,.94);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--linha);
}
.barra-cat__in{ display:flex; align-items:center; gap:10px; height:var(--barra-cat-h); }
.chips{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; padding:4px 0; scroll-behavior:smooth; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding:8px 15px; border-radius:var(--r-full); background:var(--branco);
  border:1.5px solid var(--linha); color:var(--marrom); font-weight:600; font-size:14px; font-family:var(--fonte-titulo);
  transition:background-color .18s, color .18s, border-color .18s, transform .18s var(--easing);
}
.chip:hover{ border-color:var(--oliva-claro); }
.chip.on{ background:var(--verde); color:#fff; border-color:var(--verde); }
.chip:active{ transform:scale(.96); }

.busca{ position:relative; flex:0 0 auto; }
.busca input{
  width:44px; height:40px; padding:0 12px 0 38px; border-radius:var(--r-full);
  border:1.5px solid var(--linha); background:var(--branco); font-size:14.5px; outline:none;
  transition:width .3s var(--easing), border-color .18s, box-shadow .18s;
}
.busca input:focus, .busca input.aberta{ width:min(58vw,260px); border-color:var(--oliva); box-shadow:0 0 0 3px rgba(97,118,75,.14); }
.busca svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--marrom-claro); pointer-events:none; }
.busca__limpar{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; display:none; place-items:center; color:var(--marrom-claro); }
.busca__limpar.on{ display:grid; }

.grupo{ margin-top:34px; }
.grupo:first-child{ margin-top:8px; }
.grupo__titulo{ font-size:20px; color:var(--verde); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.grupo__titulo::after{ content:''; flex:1; height:1px; background:var(--linha); }

.grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }

.card{
  background:var(--branco); border-radius:var(--r-lg); overflow:hidden; text-align:left;
  border:1px solid var(--linha); box-shadow:var(--sombra-1); display:flex; flex-direction:column;
  transition:transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s;
  animation:sobe .45s var(--easing) both;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); border-color:rgba(97,118,75,.32); }
.card__foto{ position:relative; aspect-ratio:4/3; background:var(--creme-2); overflow:hidden; }
.card__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--easing); }
.card:hover .card__foto img{ transform:scale(1.055); }
.card__badge{
  position:absolute; top:9px; left:9px; background:var(--terracota); color:#fff; padding:4px 10px;
  border-radius:var(--r-full); font-size:11px; font-weight:750; font-family:var(--fonte-titulo);
  box-shadow:0 4px 12px rgba(191,86,40,.3);
}
.card__badge--verde{ background:var(--oliva); box-shadow:0 4px 12px rgba(97,118,75,.3); }
.card__corpo{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card__nome{ font-family:var(--fonte-titulo); font-weight:650; font-size:15.5px; color:var(--verde); line-height:1.25; letter-spacing:-.015em; }
.card__desc{ font-size:12.8px; color:var(--tinta-2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__selos{ display:flex; flex-wrap:wrap; gap:5px; }
.card__nutri{ font-size:11.5px; color:var(--oliva); font-weight:600; display:flex; flex-wrap:wrap; gap:8px; }
.card__rodape{ margin-top:auto; padding-top:8px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.card__preco{ font-family:var(--fonte-titulo); line-height:1.15; }
.card__preco small{ display:block; font-size:10.5px; color:var(--marrom-claro); font-weight:600; letter-spacing:.02em; }
.card__preco b{ font-size:18px; color:var(--terracota); font-weight:700; letter-spacing:-.02em; }
.card__add{
  width:36px; height:36px; border-radius:12px; background:var(--verde); color:#fff; display:grid; place-items:center;
  flex:0 0 auto; transition:transform .2s var(--easing), background-color .2s;
}
.card__add:hover{ background:var(--terracota); }
.card__add:active{ transform:scale(.9); }
.card--off{ opacity:.62; }
.card--off .card__foto::after{
  content:'Indisponível hoje'; position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(38,56,42,.55); color:#fff; font-family:var(--fonte-titulo); font-weight:700; font-size:13.5px;
}
.card--off .card__add{ background:var(--marrom-claro); cursor:not-allowed; }

.vazio{ text-align:center; padding:50px 20px; color:var(--tinta-2); }
.vazio b{ display:block; font-family:var(--fonte-titulo); color:var(--verde); font-size:18px; margin-bottom:6px; }

/* ============================================================
   COMBOS
   ============================================================ */
.combos{ display:grid; gap:14px; }
.combo{
  background:var(--branco); border-radius:var(--r-lg); border:1px solid var(--linha); overflow:hidden;
  box-shadow:var(--sombra-1); display:flex; flex-direction:column;
  transition:transform .25s var(--easing), box-shadow .25s var(--easing);
}
.combo:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); }
.combo__foto{ position:relative; aspect-ratio:16/9; background:var(--creme-2); }
.combo__foto img{ width:100%; height:100%; object-fit:cover; }
.combo__corpo{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.combo__corpo h3{ font-size:19px; color:var(--verde); }
.combo__corpo p{ font-size:14px; color:var(--tinta-2); }
.combo__precos{ margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.combo__de{ font-size:13.5px; color:var(--marrom-claro); text-decoration:line-through; }
.combo__por{ font-family:var(--fonte-titulo); font-size:24px; font-weight:750; color:var(--terracota); letter-spacing:-.02em; }
.combo__eco{ font-size:11.5px; font-weight:700; color:var(--oliva); background:#E7EEDF; padding:3px 8px; border-radius:var(--r-full); }

/* ============================================================
   SEMANA / KITS
   ============================================================ */
.semana{
  background:var(--verde); border-radius:var(--r-xl); padding:30px 22px; color:#fff; position:relative; overflow:hidden;
}
.semana__arte{ position:absolute; right:-60px; top:-60px; width:260px; height:260px; opacity:.13; }
.semana > *{ position:relative; z-index:1; }
.semana h2{ font-size:clamp(23px,6vw,32px); letter-spacing:-.025em; }
.semana p{ margin-top:10px; color:rgba(255,255,255,.82); max-width:52ch; font-size:15.5px; }
.kits{ display:grid; gap:12px; margin-top:22px; }
.kit{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--r); padding:18px;
  display:flex; flex-direction:column; gap:6px; text-align:left; transition:background-color .2s, transform .2s var(--easing), border-color .2s;
}
.kit:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34); transform:translateY(-3px); }
.kit__qtd{ font-family:var(--fonte-titulo); font-size:30px; font-weight:750; line-height:1; letter-spacing:-.03em; }
.kit__nome{ font-weight:650; font-family:var(--fonte-titulo); font-size:15px; }
.kit__desc{ font-size:13px; color:rgba(255,255,255,.72); }
.kit__eco{ margin-top:6px; align-self:flex-start; background:var(--terracota); color:#fff; padding:4px 11px; border-radius:var(--r-full); font-size:12px; font-weight:750; font-family:var(--fonte-titulo); }

/* ============================================================
   MONTE SEU PRATO
   ============================================================ */
.montar{ background:var(--branco); border-radius:var(--r-xl); border:1px solid var(--linha); box-shadow:var(--sombra-1); overflow:hidden; }
.passo{ padding:20px 18px; border-bottom:1px solid var(--linha); }
.passo:last-of-type{ border-bottom:0; }
.passo__cab{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.passo__n{
  width:29px; height:29px; border-radius:50%; background:var(--oliva); color:#fff; display:grid; place-items:center;
  font-family:var(--fonte-titulo); font-weight:750; font-size:14px; flex:0 0 auto;
}
.passo__tit{ font-family:var(--fonte-titulo); font-weight:650; font-size:16.5px; color:var(--verde); }
.passo__dica{ font-size:12.5px; color:var(--tinta-2); font-weight:500; }
.passo__aviso{ margin-left:auto; font-size:12px; font-weight:700; color:var(--terracota); }

.opcoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:9px; }
.opcao{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; border:1.5px solid var(--linha);
  background:var(--creme); text-align:left; transition:border-color .18s, background-color .18s, transform .18s var(--easing);
}
.opcao:hover{ border-color:var(--oliva-claro); }
.opcao:active{ transform:scale(.98); }
.opcao.on{ border-color:var(--oliva); background:#EEF3E7; }
.opcao__marca{
  width:20px; height:20px; border-radius:6px; border:2px solid var(--linha-forte); flex:0 0 auto; display:grid; place-items:center;
  background:#fff; transition:background-color .18s, border-color .18s;
}
.opcao.on .opcao__marca{ background:var(--oliva); border-color:var(--oliva); }
.opcao.on .opcao__marca svg{ opacity:1; }
.opcao__marca svg{ opacity:0; color:#fff; transition:opacity .15s; }
.opcao--radio .opcao__marca{ border-radius:50%; }
.opcao__txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.opcao__nome{ display:block; font-size:14px; font-weight:600; color:var(--verde); line-height:1.25; }
.opcao__extra{ display:block; font-size:11.5px; color:var(--terracota); font-weight:700; line-height:1.3; }
.opcao__peso{ display:block; font-size:11.5px; color:var(--tinta-2); line-height:1.3; }

.montar__rodape{
  position:sticky; bottom:0; background:var(--creme-2); border-top:1px solid var(--linha);
  padding:14px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.montar__resumo{ flex:1 1 200px; min-width:0; font-size:12.8px; color:var(--tinta-2); line-height:1.4; }
.montar__resumo b{ color:var(--verde); font-family:var(--fonte-titulo); }

/* ============================================================
   SOBRE / CONTATO / RODAPÉ
   ============================================================ */
.sobre{ display:grid; gap:26px; align-items:center; }
.sobre__foto{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--sombra-2); background:var(--creme-2); }
.sobre__foto img{ width:100%; height:100%; object-fit:cover; }
.difs{ display:grid; gap:14px; margin-top:22px; }
.dif{ display:flex; gap:13px; align-items:flex-start; }
.dif__ico{ width:42px; height:42px; border-radius:13px; background:#E7EEDF; color:var(--oliva); display:grid; place-items:center; flex:0 0 auto; }
.dif h3{ font-size:16px; color:var(--verde); margin-bottom:3px; }
.dif p{ font-size:14px; color:var(--tinta-2); }

.contato-grade{ display:grid; gap:14px; }
.contato-card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sombra-1); }
.contato-card h3{ font-size:16px; color:var(--verde); margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.contato-card p{ font-size:14.5px; color:var(--tinta-2); line-height:1.7; }
.contato-card .btn{ margin-top:14px; }

.rodape{ background:var(--verde-2); color:rgba(255,255,255,.72); padding:38px 0 30px; margin-top:10px; }
.rodape__grade{ display:grid; gap:24px; }
.rodape h4{ color:#fff; font-size:15px; margin-bottom:10px; }
.rodape a:hover{ color:#fff; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14px; }
.rodape__base{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }

/* ============================================================
   BARRA FLUTUANTE DO CARRINHO (MOBILE)
   ============================================================ */
.barra-carrinho{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
  background:var(--verde); color:#fff; border-radius:var(--r-full); padding:12px 14px 12px 18px;
  display:flex; align-items:center; gap:12px; box-shadow:0 14px 40px rgba(20,30,22,.4);
  transform:translateY(140%); transition:transform .35s var(--easing); font-family:var(--fonte-titulo);
}
.barra-carrinho.on{ transform:none; }
.barra-carrinho__txt{ flex:1; min-width:0; font-size:14.5px; font-weight:600; }
.barra-carrinho__txt small{ display:block; font-size:11.5px; color:rgba(255,255,255,.65); font-weight:500; }
.barra-carrinho__cta{ background:var(--terracota); color:#fff; padding:10px 18px; border-radius:var(--r-full); font-weight:700; font-size:14px; }

/* ============================================================
   MODAIS / PAINÉIS
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(20,30,22,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s; overscroll-behavior:contain;
}
.overlay.on{ opacity:1; visibility:visible; }

/* folha inferior (mobile) / painel lateral (desktop) */
.sh{
  position:absolute; left:0; right:0; bottom:0; max-height:94dvh; height:auto;
  background:var(--creme); border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%); transition:transform .34s var(--easing);
  box-shadow:var(--sombra-3);
}
.overlay.on .sh{ transform:none; }

.sh-head{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:16px 18px 13px;
  border-bottom:1px solid var(--linha); background:var(--branco);
}
.sh-head h2{ font-size:18px; color:var(--verde); flex:1; min-width:0; letter-spacing:-.02em; }
.sh-head .fechar{ width:36px; height:36px; border-radius:50%; background:var(--creme-2); color:var(--marrom); display:grid; place-items:center; flex:0 0 auto; transition:background-color .18s; }
.sh-head .fechar:hover{ background:var(--linha); }

/* >>> REGRA OBRIGATÓRIA DO CHECKOUT (item 39) <<<
   O corpo (itens do carrinho) encolhe; o pé (formulário) rola;
   o botão final fica sempre visível, grudado embaixo. */
.sh-body{
  flex:0 1 auto;
  min-height:0;
  overflow-y:auto;
  max-height:34vh;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px;
}
.sh-foot{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--branco); border-top:1px solid var(--linha);
}
.sh-foot__in{ padding:16px 18px 0; }
.sh-acao{
  position:sticky; bottom:0;
  background:var(--branco); padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha); box-shadow:0 -10px 24px rgba(38,56,42,.07);
}
/* quando o painel é só um modal simples (produto, combo, kit) o corpo pode usar tudo */
.sh--cheio .sh-body{ max-height:none; flex:1 1 auto; }
.sh--cheio .sh-foot{ flex:0 0 auto; overflow:visible; }

/* ---------- MODAL DO PRODUTO ---------- */
.p-foto{ position:relative; margin:-14px -18px 16px; aspect-ratio:16/10; background:var(--creme-2); }
.p-foto img{ width:100%; height:100%; object-fit:cover; }
.p-nome{ font-family:var(--fonte-titulo); font-size:22px; font-weight:700; color:var(--verde); letter-spacing:-.02em; }
.p-desc{ margin-top:7px; color:var(--tinta-2); font-size:15px; }
.p-ing{ margin-top:12px; font-size:13.5px; color:var(--marrom); background:var(--creme-2); border-radius:12px; padding:12px 14px; line-height:1.6; }
.p-ing b{ display:block; font-family:var(--fonte-titulo); color:var(--verde); font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; }
.p-selos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }

.nutri{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.nutri div{ background:#E7EEDF; border-radius:12px; padding:10px 6px; text-align:center; }
.nutri b{ display:block; font-family:var(--fonte-titulo); font-size:16px; color:var(--verde); line-height:1.2; }
.nutri small{ font-size:10.5px; color:#5B6E48; font-weight:650; letter-spacing:.02em; }

.bloco{ margin-top:20px; }
.bloco__tit{ font-family:var(--fonte-titulo); font-weight:650; font-size:14.5px; color:var(--verde); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bloco__tit span{ font-size:12px; font-weight:600; color:var(--tinta-2); }

.tams{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.tam{
  border:1.5px solid var(--linha); background:var(--branco); border-radius:14px; padding:12px 8px; text-align:center;
  transition:border-color .18s, background-color .18s, transform .18s var(--easing);
}
.tam:hover{ border-color:var(--oliva-claro); }
.tam:active{ transform:scale(.97); }
.tam.on{ border-color:var(--oliva); background:#EEF3E7; box-shadow:0 0 0 3px rgba(97,118,75,.12); }
.tam b{ display:block; font-family:var(--fonte-titulo); font-size:14.5px; color:var(--verde); }
.tam small{ display:block; font-size:11px; color:var(--tinta-2); margin:1px 0 4px; }
.tam i{ font-style:normal; font-family:var(--fonte-titulo); font-weight:700; font-size:14.5px; color:var(--terracota); }

.campo{ width:100%; padding:13px 14px; border-radius:13px; border:1.5px solid var(--linha); background:var(--branco); font-size:15px; outline:none; transition:border-color .18s, box-shadow .18s; }
.campo:focus{ border-color:var(--oliva); box-shadow:0 0 0 3px rgba(97,118,75,.14); }
.campo::placeholder{ color:#A79A8C; }
textarea.campo{ resize:vertical; min-height:74px; line-height:1.5; }
.rotulo{ display:block; font-size:12.5px; font-weight:650; color:var(--marrom); margin-bottom:6px; font-family:var(--fonte-titulo); }
.grade2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.grade2--3{ grid-template-columns:1fr 1fr 1fr; }

.qtd{ display:inline-flex; align-items:center; gap:2px; background:var(--branco); border:1.5px solid var(--linha); border-radius:var(--r-full); padding:4px; }
.qtd button{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--verde); transition:background-color .18s; }
.qtd button:hover{ background:var(--creme-2); }
.qtd b{ min-width:30px; text-align:center; font-family:var(--fonte-titulo); font-size:16px; }

/* leve junto */
.junto{ display:grid; gap:8px; }
.junto__item{
  display:flex; align-items:center; gap:11px; padding:9px; border-radius:14px; border:1.5px solid var(--linha);
  background:var(--branco); text-align:left; transition:border-color .18s, background-color .18s;
}
.junto__item:hover{ border-color:var(--oliva-claro); }
.junto__item.on{ border-color:var(--oliva); background:#EEF3E7; }
.junto__foto{ width:46px; height:46px; border-radius:11px; overflow:hidden; background:var(--creme-2); flex:0 0 auto; }
.junto__foto img{ width:100%; height:100%; object-fit:cover; }
.junto__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.junto__nome{ display:block; font-size:13.8px; font-weight:600; color:var(--verde); line-height:1.25; }
.junto__preco{ display:block; font-size:12.8px; color:var(--terracota); font-weight:700; font-family:var(--fonte-titulo); line-height:1.2; }
.junto__mais{ width:30px; height:30px; border-radius:50%; background:var(--creme-2); color:var(--verde); display:grid; place-items:center; flex:0 0 auto; }
.junto__item.on .junto__mais{ background:var(--oliva); color:#fff; }

/* ---------- CARRINHO ---------- */
.ci{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--linha); }
.ci:last-child{ border-bottom:0; }
.ci__foto{ width:62px; height:62px; border-radius:14px; overflow:hidden; background:var(--creme-2); flex:0 0 auto; }
.ci__foto img{ width:100%; height:100%; object-fit:cover; }
.ci__txt{ flex:1; min-width:0; }
.ci__nome{ font-family:var(--fonte-titulo); font-weight:650; font-size:14.5px; color:var(--verde); line-height:1.3; }
.ci__cfg{ font-size:12.2px; color:var(--tinta-2); line-height:1.45; margin-top:2px; }
.ci__obs{ font-size:12.2px; color:var(--marrom); font-style:italic; margin-top:3px; }
.ci__linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.ci__qtd{ display:inline-flex; align-items:center; gap:1px; background:var(--branco); border:1.5px solid var(--linha); border-radius:var(--r-full); padding:2px; }
.ci__qtd button{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--verde); }
.ci__qtd button:hover{ background:var(--creme-2); }
.ci__qtd b{ min-width:24px; text-align:center; font-family:var(--fonte-titulo); font-size:14px; }
.ci__preco{ font-family:var(--fonte-titulo); font-weight:700; font-size:15px; color:var(--verde); }

.frete-barra{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:12px 14px; margin-bottom:12px; }
.frete-barra__txt{ font-size:13px; font-weight:600; color:var(--marrom); display:flex; align-items:center; gap:7px; }
.frete-barra__txt b{ color:var(--terracota); }
.frete-barra--ok .frete-barra__txt{ color:var(--oliva); }
.frete-barra--ok .frete-barra__txt b{ color:var(--oliva); }
.frete-barra__trilho{ height:7px; background:var(--creme-2); border-radius:var(--r-full); margin-top:9px; overflow:hidden; }
.frete-barra__preenche{ height:100%; background:linear-gradient(90deg,var(--terracota),#E89A5F); border-radius:var(--r-full); width:0; transition:width .5s var(--easing); }
.frete-barra--ok .frete-barra__preenche{ background:linear-gradient(90deg,var(--oliva),var(--oliva-claro)); }

.sugestoes{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:14px; margin-top:14px; }
.sugestoes h4{ font-size:14.5px; color:var(--verde); margin-bottom:10px; }
.sug-linha{ display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sug-linha::-webkit-scrollbar{ display:none; }
.sug{ flex:0 0 116px; text-align:left; border:1.5px solid var(--linha); border-radius:14px; overflow:hidden; background:var(--creme); transition:border-color .18s, transform .18s var(--easing); }
.sug:hover{ border-color:var(--oliva-claro); transform:translateY(-2px); }
.sug__foto{ aspect-ratio:4/3; background:var(--creme-2); }
.sug__foto img{ width:100%; height:100%; object-fit:cover; }
.sug__txt{ padding:8px 9px 9px; display:block; }
.sug__nome{ font-size:12.2px; font-weight:600; color:var(--verde); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:31px; }
.sug__preco{ display:block; font-size:12.5px; font-weight:750; color:var(--terracota); font-family:var(--fonte-titulo); margin-top:3px; }

.cupom-linha{ display:flex; gap:8px; }
.cupom-linha .campo{ flex:1; }
.cupom-msg{ font-size:12.5px; margin-top:7px; font-weight:600; }
.cupom-msg.ok{ color:var(--oliva); }
.cupom-msg.erro{ color:#C0492A; }
.cupom-dicas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cupom-dica{ font-size:11.5px; font-weight:700; letter-spacing:.03em; background:var(--creme-2); color:var(--marrom); border:1px dashed var(--linha-forte); padding:4px 9px; border-radius:8px; font-family:var(--fonte-titulo); }

.abas{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--creme-2); padding:5px; border-radius:var(--r-full); }
.aba{ padding:10px; border-radius:var(--r-full); font-weight:650; font-size:14px; font-family:var(--fonte-titulo); color:var(--marrom); transition:background-color .2s, color .2s, box-shadow .2s; }
.aba.on{ background:var(--branco); color:var(--verde); box-shadow:var(--sombra-1); }

.pgto{ display:grid; gap:8px; }
.pgto__op{ display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--linha); border-radius:14px; background:var(--branco); text-align:left; transition:border-color .18s, background-color .18s; }
.pgto__op.on{ border-color:var(--oliva); background:#EEF3E7; }
.pgto__op b{ font-family:var(--fonte-titulo); font-size:14.5px; color:var(--verde); font-weight:650; display:block; }
.pgto__op small{ font-size:12px; color:var(--tinta-2); }
.pgto__marca{ width:19px; height:19px; border-radius:50%; border:2px solid var(--linha-forte); flex:0 0 auto; display:grid; place-items:center; }
.pgto__op.on .pgto__marca{ border-color:var(--oliva); }
.pgto__op.on .pgto__marca::after{ content:''; width:9px; height:9px; border-radius:50%; background:var(--oliva); }

.totais{ display:grid; gap:7px; font-size:14px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--linha-forte); }
.totais div{ display:flex; justify-content:space-between; gap:12px; color:var(--tinta-2); }
.totais div b{ color:var(--tinta); font-weight:600; }
.totais .desc{ color:var(--oliva); }
.totais .desc b{ color:var(--oliva); }
.totais .total{ font-family:var(--fonte-titulo); font-size:19px; color:var(--verde); padding-top:8px; margin-top:3px; border-top:1px solid var(--linha); }
.totais .total b{ color:var(--terracota); font-size:23px; font-weight:750; letter-spacing:-.02em; }

.carrinho-vazio{ text-align:center; padding:34px 16px; }
.carrinho-vazio svg{ color:var(--linha-forte); margin-bottom:12px; }
.carrinho-vazio b{ display:block; font-family:var(--fonte-titulo); font-size:17px; color:var(--verde); margin-bottom:5px; }
.carrinho-vazio p{ font-size:14px; color:var(--tinta-2); margin-bottom:16px; }

.retirada-box{ background:var(--creme-2); border-radius:14px; padding:15px; font-size:14px; color:var(--marrom); line-height:1.65; }
.retirada-box b{ color:var(--verde); font-family:var(--fonte-titulo); }

/* repetir pedido */
.repetir{
  display:flex; align-items:center; gap:12px; background:var(--branco); border:1px solid var(--linha);
  border-left:4px solid var(--terracota); border-radius:var(--r); padding:14px 16px; margin-bottom:18px;
  box-shadow:var(--sombra-1);
}
.repetir__txt{ flex:1; min-width:0; }
.repetir__txt b{ font-family:var(--fonte-titulo); color:var(--verde); font-size:15px; display:block; }
.repetir__txt small{ font-size:12.8px; color:var(--tinta-2); }

/* aviso PWA */
.pwa{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:65; display:none; align-items:center; gap:12px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sombra-2);
}
.pwa.on{ display:flex; }
.pwa__ico{ width:40px; height:40px; border-radius:11px; overflow:hidden; flex:0 0 auto; }
.pwa__txt{ flex:1; min-width:0; font-size:13.2px; color:var(--tinta-2); line-height:1.35; }
.pwa__txt b{ display:block; font-family:var(--fonte-titulo); color:var(--verde); font-size:14px; }
.pwa .btn{ padding:9px 15px; font-size:13.5px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:86px; z-index:120; transform:translate(-50%,20px);
  background:var(--verde); color:#fff; padding:12px 20px; border-radius:var(--r-full);
  font-family:var(--fonte-titulo); font-weight:600; font-size:14px; box-shadow:var(--sombra-3);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--easing); max-width:calc(100vw - 32px); text-align:center;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

@keyframes sobe{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes pulso{ 0%{ transform:scale(1);} 40%{ transform:scale(1.16);} 100%{ transform:scale(1);} }
.pulsa{ animation:pulso .42s var(--easing); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (min-width:560px){
  .grade{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
  .kits{ grid-template-columns:repeat(3,1fr); }
  .btn-pedido span.rotulo{ display:inline; }
  .hero__in{ padding:64px 0 52px; }
}

@media (min-width:760px){
  :root{ --header-h:72px; }
  .container{ padding-inline:24px; }
  .secao{ padding:60px 0; }
  .escolhas{ grid-template-columns:repeat(3,1fr); }
  .combos{ grid-template-columns:repeat(3,1fr); }
  .contato-grade{ grid-template-columns:repeat(3,1fr); }
  .sobre{ grid-template-columns:1fr 1fr; gap:40px; }
  .rodape__grade{ grid-template-columns:2fr 1fr 1fr; gap:40px; }
  .dia{ grid-template-columns:1.05fr 1fr; }
  .dia__foto{ aspect-ratio:auto; height:100%; min-height:330px; }
  .dia__corpo{ padding:34px 32px; }
  .passo{ padding:24px 26px; }
  .montar__rodape{ padding:16px 26px; }
  .semana{ padding:40px 36px; }
  .p-foto{ margin:-16px -22px 18px; }
  .sh-body,.sh-foot__in,.sh-head,.sh-acao{ padding-inline:22px; }
}

@media (min-width:960px){
  .nav{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
  .menu-btn{ display:none; }
  .hero__in{ display:grid; grid-template-columns:minmax(0,1.05fr) 400px; gap:56px; align-items:center; }
  .hero__fotos{ display:block; animation:sobe .7s var(--easing) both .12s; }
  .barra-carrinho{ display:none; }
  .grade{ grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
  .hero__in{ padding:88px 0 72px; }
  .logo__marca{ width:42px; height:42px; }
  .logo__nome{ font-size:18px; }

  /* painéis viram gaveta lateral no desktop */
  .sh{
    left:auto; top:0; bottom:0; width:min(460px,100%); max-height:none; height:100%;
    border-radius:var(--r-xl) 0 0 var(--r-xl); transform:translateX(100%);
  }
  .overlay.on .sh{ transform:none; }
  .sh-body{ max-height:42vh; }
  .sh--cheio{ width:min(560px,100%); }
  .pwa{ display:none !important; }
}

@media (min-width:1120px){
  .grade{ grid-template-columns:repeat(5,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}