/* Estilo "empório" (Diversos Grãos): natural e organizado, como os grandes empórios. Barra de categorias
   verde, hero em grade (bento), cartões com borda, títulos em serifa e rodapé verde-noite. O checkout só herda cores e fontes. */
.est-emporio { --raio-banner: 18px; --rodape-destaque: var(--acento); }
.est-emporio h1, .est-emporio h2, .est-emporio h3 { font-weight: 400; letter-spacing: -.005em; }
.est-emporio:not(.is-checkout) .btn { border-radius: 12px; }

/* Cabeçalho branco com barra de categorias na cor da marca */
.est-emporio .hdr { background: var(--superficie); border-bottom: 0; box-shadow: 0 1px 0 var(--linha); }
.est-emporio .search input { border-radius: 12px; background: var(--fundo); }
.est-emporio .search input:focus { border-color: var(--botao); box-shadow: 0 0 0 4px color-mix(in srgb, var(--botao) 12%, transparent); }
.est-emporio .search button { right: 5px; width: 38px; height: 36px; border-radius: 9px; background: var(--botao); color: #fff; }
.est-emporio .cart-count { background: var(--acento); }
.est-emporio .hdr-nav { background: var(--botao); border-top: 0; }
.est-emporio .hdr-nav a { color: rgba(255, 255, 255, .86); font-weight: 600; }
.est-emporio .hdr-nav a:hover, .est-emporio .hdr-nav a[aria-current="page"], .est-emporio .hdr-nav .nav-all { color: #fff; }
.est-emporio .hdr-nav a::after { height: 3px; border-radius: 3px 3px 0 0; background: var(--acento); }

/* Títulos de seção à esquerda, selo dourado */
.est-emporio .sec-head h2 { font-size: clamp(24px, 2.6vw, 34px); }
.est-emporio .sec-eyebrow, .est-emporio .sl-eyebrow { color: var(--acento); }
.est-emporio .link-arrow { color: var(--botao); }
.est-emporio .sl-title, .est-emporio .bc-copy > strong { font-weight: 400; }

/* Categorias em cartões quadrados */
.est-emporio .cats-quadrados .cat2 { padding: 8px 8px 12px; border: 1px solid var(--linha); border-radius: 18px; background: var(--superficie); transition: border-color .2s, box-shadow .2s; }
.est-emporio .cats-quadrados .cat2:hover { border-color: color-mix(in srgb, var(--botao) 40%, var(--linha)); box-shadow: 0 12px 26px -18px rgba(31, 42, 31, .4); }
.est-emporio .cats-quadrados .cat2-img { border-radius: 12px; }
.est-emporio .cats-quadrados { --cat-w: 132px; }

/* Cartões de produto com borda */
.est-emporio .pcard { background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 8px 8px 16px; transition: border-color .2s, box-shadow .2s; }
.est-emporio .pcard:hover { border-color: color-mix(in srgb, var(--botao) 35%, var(--linha)); box-shadow: 0 16px 32px -22px rgba(31, 42, 31, .45); }
.est-emporio .pcard-media { border-radius: 12px; }
.est-emporio .pcard-body { padding: 12px 6px 0; }
.est-emporio .tag:not(.tag-off) { background: var(--acento); color: #fff; }

/* Vantagens: faixa entre fios finos, sem caixas. Ícone em traço verde-oliva, título na serifa da marca e divisórias curtas;
   no desktop, cinco colunas iguais com o texto alinhado à esquerda */
.est-emporio .benefits { background: transparent; }
.est-emporio .benefits-end { margin-bottom: 48px; }
.est-emporio .benefit-ico { width: 28px; height: 28px; background: transparent; border: 0; color: var(--botao); }
.est-emporio .benefit-ico .i { width: 24px; height: 24px; }
.est-emporio .benefit-txt strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 15.5px; }
@media (max-width: 1023px) {
  .est-emporio .benefit, .est-emporio .benefit.is-dup { padding: 14px 26px 14px 20px; border-right: 1px solid var(--linha); }
}
@media (min-width: 1024px) {
  /* itens e divisórias dividem o espaço por igual: a divisória fica sempre no meio entre dois itens */
  .est-emporio .benefits-in { display: flex; justify-content: space-between; align-items: center; }
  .est-emporio .benefit { flex: 0 1 auto; gap: 14px; padding: 20px 0; } /* largura mínima = título; quem encolhe é o texto de apoio */
  .est-emporio .benefit ~ .benefit { border-left: 0; }
  .est-emporio .benefit-sep { display: block; flex: none; width: 1px; height: 34px; margin: 0 18px; background: var(--linha); }
  .est-emporio .benefit-txt small { white-space: normal; text-wrap: balance; }
  .est-emporio .benefits-end { margin-bottom: 64px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* tela média: título e ícone um pouco menores para cada título caber numa linha */
  .est-emporio .benefit { gap: 10px; }
  .est-emporio .benefit-ico { width: 24px; height: 24px; }
  .est-emporio .benefit-ico .i { width: 22px; height: 22px; }
  .est-emporio .benefit-txt strong { font-size: 14px; }
  .est-emporio .benefit-sep { margin: 0 8px; }
}
.est-emporio .bnrs-cartao .bnr-title { font-size: clamp(18px, 1.7vw, 22px); }

/* Carrinho: sugestões num cartão de cantos suaves, com o título na serifa da marca */
.est-emporio .upsell { margin: 20px 12px 16px; padding: 16px 14px 20px; border-radius: 18px; }
.est-emporio .upsell-t { font-family: var(--fonte-titulo); font-weight: 400; font-size: 17px; }

@media (min-width: 1024px) {
  .est-emporio .hdr-in { height: 80px; }
  .est-emporio .hdr-nav-in { height: 50px; }
  .est-emporio .pgrid { gap: 26px 20px; }
}

/* Rodapé com borda ondulada orgânica na cor do rodapé */
.est-emporio .ftr-escuro { position: relative; margin-top: 20px; }
.est-emporio .ftr-escuro::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 18px; background: var(--rodape-fundo, var(--texto)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 18V10C20 10 20 2 40 2s20 8 40 8 20-8 40-8 20 8 40 8v8z'/%3E%3C/svg%3E") repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 18V10C20 10 20 2 40 2s20 8 40 8 20-8 40-8 20 8 40 8v8z'/%3E%3C/svg%3E") repeat-x; -webkit-mask-size: 160px 18px; mask-size: 160px 18px; pointer-events: none; }
.est-emporio .ftr-cta { border-radius: 18px; }