/* ==========================================================================
   Sabor e Saúde — sistema de design
   Um arquivo governa o site inteiro: home, cardápio e páginas de produto.
   Flux Comunicação · v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------- tokens
   Paleta do site atual, mantida. Uma correção de acessibilidade: o verde
   vivo (#5FBF3F) dá 2,33:1 com branco e reprova em AA para qualquer texto —
   fica reservado a fundos, selos e detalhes. Quem carrega botão e link é o
   verde-médio, que já vinha na paleta e passa com folga (6,42:1). */
:root{
  --verde:#5fbf3f;        /* verde vivo — selos, detalhes, fundos */
  --verde-md:#2f6b33;     /* botões, links e texto verde — AA garantido */
  --verde-esc:#1e4620;    /* títulos e seções escuras */
  --cereja:#9b1b23;       /* acento — preço e destaques */
  --areia:#f2efe4;        /* fundo alternado */
  --creme:#fdfcf8;        /* fundo padrão */
  --grafite:#3a3a3a;      /* texto */
  --cinza:#65655c;        /* texto de apoio — escurecido do #6e6e68 original,
                             que dava 4,46:1 sobre a areia e reprovava em AA */
  --linha:#dfdbcc;        /* divisórias e bordas */
  --branco:#ffffff;
  --whats:#25d366;        /* WhatsApp — cor oficial, não alterar */

  /* tipografia — as mesmas do site atual */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corpo:'Karla',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* medidas */
  --wrap:1180px;
  --leitura:720px;
  --topo-h:87px;          /* altura do cabeçalho — o hero se encaixa por baixo */
  --raio:14px;
  --raio-sm:9px;
  --raio-pill:999px;
  --sombra:0 10px 28px -14px rgba(30,70,32,.34);
  --sombra-lg:0 22px 48px -22px rgba(30,70,32,.38);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}

body.ss{
  margin:0;background:var(--creme);color:var(--grafite);
  font-family:var(--corpo);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.ss h1,.ss h2,.ss h3,.ss h4{
  font-family:var(--display);color:var(--verde-esc);
  line-height:1.15;margin:0;font-weight:600;text-transform:none;
}
.ss h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);font-weight:700}
.ss h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);font-weight:700}
.ss h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem)}
.ss h4{font-size:1.05rem;font-weight:600}

.ss p{margin:0 0 1.05em;max-width:var(--leitura)}
.ss a{color:var(--verde-md);text-decoration:none}
.ss a:hover{color:var(--verde-esc);text-decoration:underline}
.ss img{max-width:100%;height:auto;display:block}
.ss p,.ss li{text-align:left}

.ss a:focus-visible,.ss button:focus-visible,
.ss input:focus-visible,.ss select:focus-visible,.ss textarea:focus-visible{
  outline:3px solid var(--verde-md);outline-offset:2px;border-radius:var(--raio-sm);
}

.ss-pular,.ss a.ss-pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--verde-esc);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--raio-sm) 0;font-weight:700;text-decoration:none;
}
.ss-pular:focus,.ss a.ss-pular:focus{left:0}

/* ------------------------------------------------------------ estrutura */
.ss-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.ss-secao{padding:clamp(56px,7vw,100px) 0}
.ss-secao--creme{background:var(--creme)}
.ss-secao--areia{background:var(--areia)}
.ss-secao--branca{background:var(--branco)}
.ss-secao--escura{background:var(--verde-esc);color:rgba(255,255,255,.92)}
.ss-secao--escura h2,.ss-secao--escura h3{color:#fff}
.ss-secao--escura p{color:rgba(255,255,255,.9)}

.ss-rotulo{
  display:inline-block;font-family:var(--corpo);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--verde-md);margin-bottom:.5rem;
}
.ss-secao--escura .ss-rotulo{color:var(--verde)}

.ss-cabeca{max-width:var(--leitura);margin-bottom:clamp(30px,4vw,52px)}
.ss-cabeca p{color:var(--cinza);font-size:1.0625rem;margin-top:.6rem}
/* o rótulo também é <p>: sem isto, `.ss-cabeca p` (0,2,0) vence
   `.ss-rotulo` (0,1,0) e o eyebrow sai cinza em vez de verde */
.ss-cabeca .ss-rotulo{color:var(--verde-md);font-size:.75rem;margin-top:0}
.ss-secao--escura .ss-cabeca .ss-rotulo{color:var(--verde)}
.ss-secao--escura .ss-cabeca p{color:rgba(255,255,255,.86)}

/* --------------------------------------------------------------- botões */
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.7rem;border:2px solid transparent;border-radius:var(--raio-pill);
  font-family:var(--corpo);font-size:1rem;font-weight:700;cursor:pointer;
  text-decoration:none;min-height:48px;
  transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.ss-btn:hover{transform:translateY(-2px);text-decoration:none}

/* especificidade proposital: `.ss a` (0,1,1) venceria uma classe sozinha */
.ss a.ss-btn--principal,.ss .ss-btn--principal{background:var(--verde-md);color:#fff;box-shadow:var(--sombra)}
.ss a.ss-btn--principal:hover,.ss .ss-btn--principal:hover{background:var(--verde-esc);color:#fff}

.ss a.ss-btn--contorno,.ss .ss-btn--contorno{background:transparent;color:var(--verde-esc);border-color:var(--linha)}
.ss a.ss-btn--contorno:hover,.ss .ss-btn--contorno:hover{background:var(--branco);border-color:var(--verde-md);color:var(--verde-esc)}

.ss a.ss-btn--whats,.ss .ss-btn--whats{background:var(--whats);color:#0b3d1f}
.ss a.ss-btn--whats:hover,.ss .ss-btn--whats:hover{background:#1fb857;color:#0b3d1f}

/* contexto escuro: precisa empatar em especificidade e vir depois */
.ss-secao--escura a.ss-btn--contorno,.ss-secao--escura .ss-btn--contorno,
.ss-phead a.ss-btn--contorno,.ss-phead .ss-btn--contorno,
.ss-rodape a.ss-btn--contorno{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.ss-secao--escura a.ss-btn--contorno:hover,.ss-secao--escura .ss-btn--contorno:hover,
.ss-phead a.ss-btn--contorno:hover,.ss-phead .ss-btn--contorno:hover,
.ss-rodape a.ss-btn--contorno:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

.ss-whats-flutua{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:var(--whats);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4);transition:transform .2s ease;
}
.ss-whats-flutua:hover{transform:scale(1.08)}
.ss-whats-flutua svg{width:30px;height:30px;fill:currentColor}

/* ------------------------------------------------------------ cabeçalho */
.ss-topo{
  position:sticky;top:0;z-index:100;
  background:rgba(253,252,248,.94);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha);
  transition:background .25s ease,border-color .25s ease;
}

/* Na home o banner passa POR BAIXO do menu: o cabeçalho fica transparente
   sobre o hero e só volta a ser sólido depois que a pessoa rola. O canto
   superior esquerdo da arte é creme claro, então o verde-escuro do menu
   continua legível ali — mas o hero ainda desenha um véu creme no topo
   para o caso de a imagem ser trocada por outra mais escura. */
@media (min-width:821px){
  .ss-topo--sobre:not(.ss-topo--solido){
    background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  }
}
.ss-topo__linha{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:86px}
.ss-marca{display:flex;align-items:center;gap:12px;text-decoration:none}
/* O emblema traz o nome arqueado dentro dele, mas em 60px essa letra tem 4px:
   serve como marca, não como texto. Quem lê o nome é o wordmark ao lado. */
.ss-marca img{height:60px;width:auto}
@media (max-width:620px){ .ss-marca img{height:48px} }
.ss-marca__txt{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.1;color:var(--verde-esc)}
.ss-marca__txt span{display:block;font-family:var(--corpo);font-size:.7rem;font-weight:600;
  color:var(--cinza);letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

.ss-nav{display:flex;align-items:center;gap:26px}
.ss-nav a{font-weight:600;font-size:.9375rem;color:var(--verde-esc);text-decoration:none;
  padding:.5rem 0;position:relative}
.ss-nav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--verde-md);transition:width .22s ease}
.ss-nav a:hover::after,.ss-nav a[aria-current=page]::after{width:100%}
.ss-nav a:hover,.ss-nav a[aria-current=page]{color:var(--verde-md);text-decoration:none}

.ss-topo__acao{display:flex;align-items:center;gap:12px}
.ss-topo__acao .ss-btn{padding:.6rem 1.3rem;font-size:.9375rem;min-height:44px}

.ss-hamburguer{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--linha);border-radius:var(--raio-sm);
  cursor:pointer;color:var(--verde-esc)}
.ss-hamburguer svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}

/* ------------------------------------------------------------------ hero
   Banner ocupando a largura inteira, texto do lado esquerdo, imagem passando
   por baixo do menu. A arte já nasce com o lado esquerdo vazio — o véu creme
   por cima só garante o contraste caso a imagem seja trocada depois. */
.ss-hero{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(84vh,740px);
  margin-top:calc(-1 * var(--topo-h));           /* imagem sob o cabeçalho */
  padding:calc(var(--topo-h) + clamp(40px,6vw,80px)) 0 clamp(48px,6vw,84px);
  background:linear-gradient(165deg,var(--areia) 0%,var(--creme) 60%);
  border-bottom:1px solid var(--linha);
  overflow:hidden;
}
.ss-hero__fundo{position:absolute;inset:0;z-index:-1;display:block}
.ss-hero__fundo img{width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.ss-hero__fundo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(251,235,203,.94) 0%, rgba(251,235,203,.90) 38%,
      rgba(251,235,203,.55) 56%, rgba(251,235,203,0) 74%),
    linear-gradient(180deg, rgba(251,235,203,.62) 0%, rgba(251,235,203,0) 20%);
}
.ss-hero__conteudo{position:relative}
.ss-hero__conteudo > *{max-width:min(560px,54%)}
/* um pouco menor que o h1 padrão: com a arte ao lado, quatro linhas de título
   empurram os botões para fora da primeira tela */
.ss-hero h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.05rem)}
/* sobre o banner o contorno cinza-claro quase some — o verde segura a borda */
.ss-hero a.ss-btn--contorno{border-color:rgba(47,107,51,.45);background:rgba(253,252,248,.5)}
.ss-hero a.ss-btn--contorno:hover{border-color:var(--verde-md);background:var(--branco)}
/* a linha de apoio é o trecho mais frágil: fonte menor e cinza. Ela fica
   dentro da faixa onde o véu ainda é forte — medido por pixel, não no olho */
.ss-hero__sub{font-size:1.125rem;color:var(--grafite);max-width:min(42ch,46%);margin-top:1rem}
.ss-hero__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.75rem}
.ss-hero__selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.75rem;padding-top:1.5rem;
  border-top:1px solid rgba(30,70,32,.18)}

/* No celular o banner não vira fundo: o texto fica no creme e a arte entra
   como faixa embaixo. Texto sobre pão em tela estreita não sobra espaço
   para nenhum dos dois. */
@media (max-width:820px){
  .ss-hero{min-height:0;margin-top:0;padding:clamp(36px,7vw,56px) 0 0;overflow:visible}
  .ss-hero__fundo{position:relative;inset:auto;z-index:0;order:2;
    margin-top:clamp(28px,6vw,40px);height:min(56vw,300px)}
  .ss-hero__fundo img{object-position:50% 50%}
  .ss-hero__fundo::after{background:none}
  .ss-hero__conteudo > *,.ss-hero__sub{max-width:none}
}

/* selo de restrição */
.ss-selo{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--verde);color:#0f2d10;
  font-size:.75rem;font-weight:700;letter-spacing:.02em;
  padding:.35rem .8rem;border-radius:var(--raio-pill);
}
.ss-selo--claro{background:#e2eeda;color:#1e4620}

/* --------------------------------------------------------------- grades */
.ss-grade{display:grid;gap:22px}
.ss-grade--2{grid-template-columns:repeat(2,1fr)}
.ss-grade--3{grid-template-columns:repeat(3,1fr)}
.ss-grade--4{grid-template-columns:repeat(4,1fr)}

.ss-card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:26px}
.ss-card h3{margin-bottom:.4rem}
.ss-card p{color:var(--cinza);font-size:.9375rem;margin:0}

/* --------------------------------------------------------- cartão de item */
.ss-item{
  display:flex;flex-direction:column;height:100%;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ss-item:hover{transform:translateY(-3px);box-shadow:var(--sombra-lg);border-color:var(--verde-md)}
.ss-item__figura{aspect-ratio:4/3;background:var(--areia);overflow:hidden}
.ss-item__figura img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ss-item:hover .ss-item__figura img{transform:scale(1.04)}
.ss-item__corpo{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.ss-item__cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cinza)}
.ss-item__nome{margin:.35rem 0 .4rem;font-size:1.0625rem;line-height:1.3}
.ss .ss-item__nome a{color:var(--verde-esc);text-decoration:none}
.ss .ss-item__nome a:hover{color:var(--verde-md)}
.ss-item__desc{color:var(--cinza);font-size:.875rem;line-height:1.6;margin:0 0 .9rem;flex:1}
.ss-item__selos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.ss-item__rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.ss-preco{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--cereja);white-space:nowrap}
.ss-item__rodape .ss-btn{padding:.55rem 1.1rem;font-size:.875rem;min-height:42px;flex:1 1 auto;white-space:nowrap}

/* --------------------------------------------------------------- filtros */
.ss-filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.ss-filtro{
  background:var(--branco);border:1px solid var(--linha);color:var(--verde-esc);
  border-radius:var(--raio-pill);padding:.55rem 1.15rem;
  font-family:var(--corpo);font-size:.875rem;font-weight:600;cursor:pointer;min-height:42px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ss-filtro:hover{border-color:var(--verde-md)}
.ss-filtro[aria-pressed=true]{background:var(--verde-md);border-color:var(--verde-md);color:#fff}
.ss-filtros__grupo{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ss-filtros__rotulo{font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cinza);margin-right:.25rem}
.ss-vazio{padding:40px 0;color:var(--cinza)}

/* ---------------------------------------------------------------- passos */
.ss-passo{position:relative;padding-left:56px}
.ss-passo__n{
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--verde-md);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.1rem;
}
.ss-passo h3{margin-bottom:.35rem}
.ss-passo p{color:var(--cinza);font-size:.9375rem;margin:0}

/* ----------------------------------------------------------------- sobre */
.ss-sobre{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.ss-sobre__figura img{border-radius:var(--raio);box-shadow:var(--sombra-lg);width:100%;aspect-ratio:3/4;object-fit:cover}
.ss-assinatura{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--verde-esc);margin-top:.5rem}

/* --------------------------------------------------------------- contato */
.ss-contato{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px)}
.ss-contato__lista{list-style:none;padding:0;margin:0}
.ss-contato__lista li{margin-bottom:1.4rem}
.ss-contato__lista strong{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cinza);margin-bottom:.2rem}

.ss-form{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(22px,3vw,32px)}
.ss-form label{display:block;font-weight:700;font-size:.9375rem;color:var(--verde-esc);margin-bottom:.3rem}
.ss-form input[type=text],.ss-form input[type=email],.ss-form input[type=tel],
.ss-form select,.ss-form textarea{
  width:100%;padding:.75rem 1rem;margin-bottom:1.1rem;min-height:48px;
  border:1px solid var(--linha);border-radius:var(--raio-sm);
  font-family:var(--corpo);font-size:1rem;color:var(--grafite);background:var(--branco);
}
.ss-form textarea{min-height:130px;resize:vertical}
.ss-form input:focus,.ss-form select:focus,.ss-form textarea:focus{
  border-color:var(--verde-md);box-shadow:0 0 0 4px rgba(47,107,51,.14);outline:none}
.wpcf7-not-valid-tip{color:#b3261e;font-size:.8125rem;margin:-.85rem 0 .85rem}
.wpcf7-response-output{border-radius:var(--raio-sm);border-width:2px!important;
  padding:.85rem 1.05rem!important;margin:1rem 0 0!important;font-size:.9375rem}

/* ------------------------------------------------------------ aviso legal
   Num negócio de alimentos para restrição alimentar isso não é rodapé
   decorativo: é a informação que separa "confie em mim" de "confira o rótulo". */
.ss-aviso{
  background:var(--areia);border-left:4px solid var(--cereja);
  border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  padding:1rem 1.25rem;font-size:.875rem;color:var(--grafite);margin:0;max-width:none;
}

/* ------------------------------------------------- ficha do produto */
.ss-ficha{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--linha)}
.ss-ficha h2{font-size:1.25rem;margin-bottom:.75rem}
.ss-ficha__lista{margin:0 0 1.25rem;padding-left:1.1rem;columns:2;column-gap:28px}
.ss-ficha__lista li{margin-bottom:.3rem;break-inside:avoid}
.ss-ficha__alerta{
  background:#fdecec;border-left:4px solid var(--cereja);
  border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  padding:.85rem 1.1rem;margin:0 0 1.25rem;max-width:none;
  font-size:.9375rem;font-weight:600;color:#7a1219;
}
.ss-ficha__dados{margin:0;display:grid;gap:.6rem}
.ss-ficha__dados > div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.ss-ficha__dados dt{font-weight:700;color:var(--verde-esc);min-width:11rem}
.ss-ficha__dados dd{margin:0;color:var(--grafite)}

@media (max-width:620px){
  .ss-ficha__lista{columns:1}
  .ss-ficha__dados dt{min-width:0;width:100%}
}

/* --------------------------------------------------------------- rodapé */
.ss-rodape{background:var(--verde-esc);color:rgba(255,255,255,.86);padding:clamp(44px,6vw,72px) 0 0}
.ss-rodape a{color:rgba(255,255,255,.86);text-decoration:none}
.ss-rodape a:hover{color:#fff;text-decoration:underline}
.ss-rodape__grade{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:36px}
.ss-rodape h4{color:#fff;font-family:var(--corpo);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:.9rem}
.ss-rodape ul{list-style:none;padding:0;margin:0}
.ss-rodape li{margin-bottom:.55rem;font-size:.9375rem}
.ss-rodape__marca{font-family:var(--display);font-weight:700;font-size:1.25rem;color:#fff;line-height:1.2}
.ss-rodape__marca span{display:block;font-family:var(--corpo);font-size:.7rem;font-weight:600;
  color:var(--verde);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.ss-rodape__sobre{font-size:.9375rem;line-height:1.7;margin:.9rem 0 0;max-width:40ch;color:rgba(255,255,255,.82)}
.ss-rodape__aviso{margin-top:clamp(28px,3vw,44px);padding:1rem 1.25rem;
  background:rgba(255,255,255,.08);border-radius:var(--raio-sm);
  font-size:.8125rem;color:rgba(255,255,255,.86);max-width:none}
.ss-rodape__barra{margin-top:22px;border-top:1px solid rgba(255,255,255,.16);
  padding:20px 104px 40px 0;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;font-size:.8125rem}

/* crédito da Flux — a versão clara da marca, que é a que vive sobre fundo
   escuro. O link recebe o alvo de toque inteiro, não só a imagem. */
.ss-rodape__credito{display:flex;align-items:center;gap:10px}
.ss-rodape__credito a{display:inline-flex;align-items:center;padding:6px 2px}
.ss-rodape__credito img{height:34px;width:auto;opacity:.92;transition:opacity .2s ease}
.ss-rodape__credito a:hover img{opacity:1}

/* ----------------------------------------------------------- faixa de topo */
.ss-phead{background:var(--verde-esc);color:#fff;padding:clamp(44px,5vw,76px) 0 clamp(36px,4vw,60px)}
.ss-phead h1{color:#fff;margin-top:.4rem}
.ss-phead p{color:rgba(255,255,255,.9);font-size:1.0625rem;margin-top:.7rem}
.ss-phead .ss-rotulo{color:var(--verde)}
.ss-migalha{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.3rem}
.ss-migalha a{color:rgba(255,255,255,.92)}
.ss-migalha span{margin:0 .4rem;opacity:.6}

/* ------------------------------------------------------------- movimento */
.ss-entra{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.ss-entra.ss-visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ss-entra{opacity:1;transform:none;transition:none}
  .ss *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------ responsivo */
@media (max-width:980px){
  .ss-nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);border-bottom:1px solid var(--linha);padding:10px 24px 18px}
  .ss-nav.aberto{display:flex}
  .ss-nav a{padding:.8rem 0;border-bottom:1px solid var(--linha);font-size:1rem}
  .ss-nav a::after{display:none}
  .ss-hamburguer{display:flex}
  .ss-topo__acao .ss-btn{display:none}

  .ss-sobre,.ss-contato{grid-template-columns:1fr;gap:32px}
  .ss-grade--4{grid-template-columns:repeat(2,1fr)}
  .ss-grade--3{grid-template-columns:repeat(2,1fr)}
  .ss-rodape__grade{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  body.ss{font-size:15.5px}
  .ss-wrap{padding-inline:18px}
  .ss-grade--2,.ss-grade--3,.ss-grade--4{grid-template-columns:1fr}
  .ss-rodape__grade{grid-template-columns:1fr}
  .ss-hero__acoes .ss-btn{width:100%}
  .ss-item__rodape{flex-direction:column;align-items:stretch}
  .ss-item__rodape .ss-btn{width:100%}
  .ss-rodape__barra{padding:20px 0 84px}
  .ss-whats-flutua{right:14px;bottom:14px}
}

@media print{
  .ss-topo,.ss-rodape,.ss-whats-flutua,.ss-filtros{display:none}
  body.ss{background:#fff;font-size:12pt}
}

/* ============================================================ o pedido
 *
 * Barra fixa no rodapé + painel. A barra só existe quando há item no pedido,
 * e o botão flutuante do WhatsApp sobe para não ficar em cima dela.
 */
/* O atributo `hidden` vale display:none pela folha do navegador, e QUALQUER
 * regra de display na folha do tema ganha dele. Sem isto o painel fica
 * invisível mas ocupando meia tela, engolindo o clique de quem está lendo o
 * cardápio atrás. Foi o teste que pegou. */
.ss-pedido[hidden],
.ss-pedido-barra[hidden],
.ss-pedido-fundo[hidden]{display:none}

.ss-pedido-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--verde-esc);color:#fff;
  box-shadow:0 -10px 30px -14px rgba(0,0,0,.5);
  padding:12px 0;
}
.ss-pedido-barra__linha{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ss-pedido-barra__resumo{margin:0;display:flex;flex-direction:column;line-height:1.25}
.ss-pedido-barra__resumo strong{font-size:1.05rem}
.ss-pedido-barra__resumo span{color:rgba(255,255,255,.85);font-size:.9rem}

/* com a barra no ar o botão flutuante sobe, senão um cobre o outro */
body.ss-tem-pedido .ss-whats-flutua{bottom:88px}

.ss-pedido-fundo{
  /* acima do cabeçalho (z-index 100), que é sticky: sem isto ele fica por
     cima do painel, engolindo o título e o botão de fechar */
  position:fixed;inset:0;z-index:101;background:rgba(30,70,32,.45);
}
body.ss-travado{overflow:hidden}

.ss-pedido{
  position:fixed;z-index:102;right:0;top:0;bottom:0;width:min(430px,100%);
  background:var(--creme);box-shadow:var(--sombra-lg);
  display:flex;flex-direction:column;
}
.ss-pedido__topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--linha);
}
.ss-pedido__topo h2{margin:0;font-size:1.35rem}
.ss-pedido__fechar{
  background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;
  color:var(--cinza);width:44px;height:44px;border-radius:var(--raio-sm);
}
.ss-pedido__fechar:hover{background:var(--areia);color:var(--grafite)}

.ss-pedido__lista{
  list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;
}
.ss-pedido__item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px;border-bottom:1px solid var(--linha);
}
.ss-pedido__nome{margin:0;font-weight:700;line-height:1.3}
.ss-pedido__valor{margin:.15rem 0 0;color:var(--cinza);font-size:.875rem}

.ss-qtd{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ss-qtd__btn{
  width:36px;height:36px;border-radius:var(--raio-sm);cursor:pointer;
  border:1px solid var(--linha);background:var(--branco);
  font-size:1.15rem;line-height:1;color:var(--verde-md);font-weight:700;
}
.ss-qtd__btn:hover{border-color:var(--verde-md);background:var(--areia)}
.ss-qtd__n{min-width:1.6rem;text-align:center;font-weight:700}
/* "Remover" fica em texto pequeno embaixo: alvo de toque de 44px sem ocupar
   a largura de um botão de verdade ao lado dos controles de quantidade */
.ss-qtd__tirar{
  background:none;border:0;cursor:pointer;color:var(--cinza);
  font-size:.8rem;text-decoration:underline;padding:0 4px;min-height:44px;
}
.ss-qtd__tirar:hover{color:var(--cereja)}

.ss-pedido__vazio{padding:28px 22px;color:var(--cinza);margin:0}

.ss-pedido__rodape{padding:18px 22px 22px;border-top:1px solid var(--linha);background:var(--branco)}
.ss-pedido__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 .35rem;
}
.ss-pedido__total strong{font-family:var(--display);font-size:1.5rem;color:var(--cereja)}
.ss-pedido__nota{margin:0 0 1rem;color:var(--cinza);font-size:.85rem;line-height:1.45}

.ss-pedido__obs{display:block;margin-bottom:1rem}
.ss-pedido__obs span{display:block;font-size:.85rem;color:var(--cinza);margin-bottom:.35rem}
.ss-pedido__obs textarea{
  width:100%;font:inherit;font-size:.95rem;padding:.6rem .75rem;resize:vertical;
  border:1px solid var(--linha);border-radius:var(--raio-sm);background:var(--creme);
}
.ss-pedido__obs textarea:focus{outline:2px solid var(--verde-md);outline-offset:1px}

.ss-pedido__enviar{width:100%;justify-content:center}
.ss-pedido__limpar{
  display:block;margin:.75rem auto 0;background:none;border:0;cursor:pointer;
  color:var(--cinza);font-size:.85rem;text-decoration:underline;min-height:44px;
}
.ss-pedido__limpar:hover{color:var(--cereja)}

/* o botão do item confirma o toque sem tirar a pessoa de onde ela está */
.ss-add--dentro{background:var(--verde-md)}
.ss-add--pulo{animation:ss-pulo .42s ease}
@keyframes ss-pulo{
  0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){ .ss-add--pulo{animation:none} }

@media (max-width:600px){
  .ss-pedido{width:100%;top:auto;height:88vh;border-radius:var(--raio) var(--raio) 0 0}
  .ss-pedido-barra__resumo{font-size:.95rem}
}

/* ------------------------------------------- fotos extras e vídeo do item
 *
 * A imagem destacada continua sendo a foto grande. O que passar disso vira
 * uma fita de miniaturas embaixo: clicar troca o que está no palco.
 */
/* min-width:0 porque o pai é uma célula de grade, e célula de grade não
 * encolhe abaixo do conteúdo por padrão (min-width:auto). Sem isto, uma fita
 * com muitas miniaturas empurra a coluna inteira e o celular ganha rolagem
 * horizontal na página toda — em vez de rolar só a fita, que é o certo. */
.ss-item-midia{min-width:0;max-width:100%}

.ss-item-midia__palco img,
.ss-item-midia__palco video{
  width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--raio);box-shadow:var(--sombra-lg);background:var(--areia);
}
/* vídeo em pé (foto de celular) não pode virar uma tira esticada */
.ss-item-midia__palco video{object-fit:contain;background:#000}

.ss-miniaturas{
  list-style:none;margin:14px 0 0;padding:0;max-width:100%;
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;
}
.ss-miniatura{
  position:relative;display:block;padding:0;cursor:pointer;background:none;
  width:82px;height:62px;flex:0 0 auto;overflow:hidden;
  border:2px solid transparent;border-radius:var(--raio-sm);
  transition:border-color .18s ease,transform .18s ease;
}
.ss-miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.ss-miniatura:hover{transform:translateY(-2px)}
.ss-miniatura--ativa{border-color:var(--verde-md)}
.ss-miniatura:focus-visible{outline:2px solid var(--verde-md);outline-offset:2px}

.ss-miniatura__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.34);color:#fff;
}
.ss-miniatura__play svg{width:26px;height:26px;fill:currentColor}

/* ============================================================ WooCommerce
 *
 * Carrinho e checkout do Woo 11 são BLOCOS, com folha de estilo própria. Aqui
 * não se reescreve aquilo: só se acerta o que destoa — botão, preço, fonte e
 * borda. Reescrever o layout de blocos que o plugin atualiza sozinho seria
 * assinar a manutenção deles para sempre.
 */
.ss .woocommerce,
.ss .wp-block-woocommerce-cart,
.ss .wp-block-woocommerce-checkout{font-family:var(--corpo);color:var(--grafite)}

/* botões de ação: "Finalizar Compra", "Fazer pedido", cupom */
.ss .wc-block-cart__submit-button,
.ss .wc-block-components-checkout-place-order-button,
.ss .wc-block-components-button:not(.is-link){
  background:var(--verde-md);color:#fff;border:0;border-radius:999px;
  font-family:var(--display);font-weight:700;text-decoration:none;
  box-shadow:var(--sombra,0 6px 18px rgba(0,0,0,.08));transition:background .18s ease}
.ss .wc-block-cart__submit-button:hover,
.ss .wc-block-components-checkout-place-order-button:hover,
.ss .wc-block-components-button:not(.is-link):hover{background:var(--verde-esc);color:#fff}

/* O botão de comprar da página do item é o botão do site.
 *
 * O seletor é comprido de propósito. A folha do WooCommerce traz
 * `.woocommerce button.button` — especificidade (0,2,1) — e um
 * `.ss .single_add_to_cart_button` (0,2,0) PERDE dela. O botão saía roxo, a cor
 * de fábrica do plugin, e só apareceu na captura de tela. É a armadilha de
 * especificidade de sempre, agora contra o CSS de um plugin. */
.ss.woocommerce button.single_add_to_cart_button,
.ss .woocommerce button.single_add_to_cart_button,
.ss button.single_add_to_cart_button,
.ss .single_add_to_cart_button{
  background:var(--verde-md);color:#fff;border:0;border-radius:999px;
  padding:.85rem 1.6rem;font-family:var(--display);font-weight:700;
  font-size:1rem;cursor:pointer}
.ss.woocommerce button.single_add_to_cart_button:hover,
.ss .woocommerce button.single_add_to_cart_button:hover,
.ss button.single_add_to_cart_button:hover{background:var(--verde-esc)}
.ss form.cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:1.25rem 0 0}
.ss form.cart .quantity input{
  width:72px;padding:.7rem .5rem;border:1px solid var(--linha);border-radius:12px;
  text-align:center;font-family:var(--corpo)}

/* preço no cereja da marca, como no resto do site */
.ss .wc-block-components-totals-item__value,
.ss .wc-block-components-product-price__value,
.ss .wc-block-formatted-money-amount{color:var(--cereja);font-weight:700}
.ss .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--display);font-size:1.35rem}

.ss .wc-block-components-title,
.ss .wp-block-woocommerce-cart-order-summary-heading-block{
  font-family:var(--display);color:var(--verde-esc)}

.ss .wc-block-components-panel,
.ss .wc-block-cart-items,
.ss .wc-block-components-totals-wrapper{border-color:var(--linha)}
.ss .wc-block-components-text-input input,
.ss .wc-block-components-combobox input,
.ss .wc-block-components-textarea{
  border-radius:12px;border:1px solid var(--linha);font-family:var(--corpo)}
.ss .wc-block-components-text-input input:focus,
.ss .wc-block-components-combobox input:focus{
  border-color:var(--verde-md);outline:2px solid var(--verde);outline-offset:1px}

/* o carrinho vazio traz uma grade de "Novos produtos" com o botão padrão do
   editor de blocos, cinza-escuro de fábrica. No projeto irmão isso deu 2,23:1
   de contraste — reprovado, e ilegível de verdade. */
.ss .wc-block-grid .wp-block-button__link{
  background:var(--verde-md);color:#fff;border:0;border-radius:999px;
  font-family:var(--display);font-weight:700;text-decoration:none;padding:.6rem 1.2rem}
.ss .wc-block-grid .wp-block-button__link:hover{background:var(--verde-esc);color:#fff}
.ss .wc-block-grid__product-title{color:var(--verde-esc);font-family:var(--display)}

/* recados do Woo com a cara do site */
.ss .woocommerce-message,
.ss .woocommerce-info,
.ss .woocommerce-error{
  border-radius:16px;border:1px solid var(--linha);background:var(--areia);
  padding:14px 18px;margin:0 0 24px;list-style:none}

/* ------------------------------------------------------------------
 * Largura do carrinho e do checkout
 *
 * Aprendido no Meu Corpo Protegido: a moldura de leitura do tema
 * (--leitura) espremia o checkout de duas colunas do WooCommerce, e o
 * resumo do pedido ficava estreito demais para o nome do item. Parecia
 * fonte pequena e era largura — aumentar a fonte teria piorado.
 * page.php já pula a moldura nessas páginas; aqui o bloco ocupa a
 * largura liberada e a coluna do resumo ganha um piso decente.
 * ------------------------------------------------------------------ */
.ss .wp-block-woocommerce-checkout,
.ss .wp-block-woocommerce-cart,
.ss .wc-block-checkout,
.ss .wc-block-cart{width:100%;max-width:none}

.ss .wc-block-components-sidebar,
.ss .wc-block-checkout__sidebar,
.ss .wc-block-cart__sidebar{flex:0 0 380px;max-width:380px;min-width:320px}
.ss .wc-block-components-main,
.ss .wc-block-checkout__main,
.ss .wc-block-cart__main{flex:1 1 auto;min-width:0}

/* nome e descrição do item no resumo: sem quebra em pedaços */
.ss .wc-block-components-product-name{font-size:1rem;line-height:1.4}
.ss .wc-block-components-product-metadata,
.ss .wc-block-components-product-metadata__description{font-size:.92rem;line-height:1.5}
.ss .wc-block-components-order-summary-item__description{overflow-wrap:normal;word-break:normal;hyphens:none}

/* o limite de leitura dos parágrafos não vale dentro do checkout */
.ss .wc-block-checkout p,
.ss .wc-block-cart p{max-width:none}

/* no celular as colunas empilham: a lateral volta a ocupar tudo */
@media (max-width:900px){
  .ss .wc-block-components-sidebar,
  .ss .wc-block-checkout__sidebar,
  .ss .wc-block-cart__sidebar{flex:1 1 100%;max-width:none;min-width:0}
}

/* ------------------------------------------------------------------
 * O carrinho no topo
 *
 * Fundo próprio, e não transparente: na home o cabeçalho passa por cima do
 * banner, e um ícone sem fundo dependeria da cor da foto naquele ponto. Com
 * o creme e a borda, ele se lê igual nos dois estados do cabeçalho.
 *
 * Não usa a classe .ss-btn — o botão do WhatsApp some no celular, e o
 * carrinho tem de continuar lá. É no celular que a pessoa mais precisa
 * conferir o que já escolheu antes de fechar.
 * ------------------------------------------------------------------ */
.ss .ss-carrinho{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;color:var(--verde-esc);
  border:1px solid var(--linha);background:var(--creme);text-decoration:none;
  flex:0 0 auto;transition:border-color .18s ease,color .18s ease}
.ss .ss-carrinho:hover{border-color:var(--verde-md);color:var(--verde-md)}
.ss .ss-carrinho__n{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--cereja);color:#fff;
  font-family:var(--corpo);font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.ss .ss-carrinho[hidden]{display:none}