:root {
  /* teal da referência do logo (sniffer dog) como cor principal */
  --fundo: #f0f7f5;
  --card: #ffffff;
  --texto: #22312e;
  --texto-suave: #5d716c;
  --titulo: #1d4a43;
  --primaria: #4ab3a5;
  --primaria-escura: #2f8d80;
  --borda: #dceae6;
  --verde: #0c7a43;
  --laranja: #e8590c;
  --chip-fundo: #e6f3f0;
  --chip-texto: #3c5a54;
  --chip-borda: #cfe6e1;
  --sombra: 0 2px 10px rgba(29, 74, 67, .08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.55; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
a { color: var(--primaria); text-decoration: none; }
h1 { font-size: 1.5rem; margin: 14px 0; color: var(--titulo); }
h2 { font-size: 1.2rem; margin-bottom: 12px; color: var(--titulo); }

.barra-cats { position: relative; background: var(--card); border-bottom: 1px solid var(--borda); }
.barra-inner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.cats-menu summary { list-style: none; cursor: pointer; user-select: none; font-size: .84rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--primaria); color: #fff; white-space: nowrap; }
.cats-menu summary::-webkit-details-marker { display: none; }
.cats-menu[open] summary { background: var(--primaria-escura); }
.cats-painel { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card); border-bottom: 1px solid var(--borda); box-shadow: 0 14px 24px rgba(20, 40, 80, .13); padding: 14px 16px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cats-painel a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; color: var(--texto); border: 1px solid transparent; }
.cats-painel a:hover { background: var(--chip-fundo); border-color: var(--chip-borda); }
.cats-painel a.on { background: var(--chip-fundo); border-color: var(--primaria); color: var(--primaria); }
.cats-painel .emoji { font-size: 1.15rem; }
.cats-painel b { font-size: .88rem; font-weight: 600; flex: 1; }
.cats-painel small { color: var(--texto-suave); font-size: .74rem; }
.cats-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding: 2px 0; }
.cats-scroll::-webkit-scrollbar { display: none; }
.cats-scroll a { flex-shrink: 0; font-size: .82rem; font-weight: 600; padding: 5px 13px; border-radius: 999px; background: var(--chip-fundo); color: var(--chip-texto); border: 1px solid var(--chip-borda); }
.cats-scroll a:hover { border-color: var(--primaria); color: var(--primaria); }
.cats-scroll a.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }

.selo-menor { display: inline-block; background: var(--verde); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .04em; padding: 2px 9px; border-radius: 7px; }

.topo { background: var(--card); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 10; }
.topo .container { display: flex; align-items: center; gap: 16px; height: 58px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; color: var(--titulo); white-space: nowrap; }
.logo span { color: var(--primaria); }
.logo-img { width: 32px; height: 32px; }
.busca-topo { display: flex; gap: 6px; flex: 1; max-width: 480px; margin-left: auto; }
.busca-topo input { flex: 1; padding: 8px 14px; border: 1.5px solid var(--borda); border-radius: 9px; outline: none; }
.busca-topo input:focus { border-color: var(--primaria); }
.busca-topo button { padding: 8px 16px; font-weight: 700; color: #fff; background: var(--primaria); border: 0; border-radius: 9px; cursor: pointer; }

.hero { text-align: center; padding: 40px 0 10px; }
.hero h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 8px; }
.sub { color: var(--texto-suave); margin-bottom: 22px; }
.busca { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; }
.busca input { flex: 1; padding: 14px 18px; font-size: 1.05rem; border: 2px solid var(--borda); border-radius: 12px; outline: none; background: var(--card); }
.busca input:focus { border-color: var(--primaria); }
.busca button { padding: 14px 26px; font-size: 1.05rem; font-weight: 700; color: #fff; background: var(--primaria); border: 0; border-radius: 12px; cursor: pointer; }
.busca button:hover { background: var(--primaria-escura); }

.aviso-demo { margin: 14px auto 0; font-size: .88rem; color: #8a6d00; background: #fff7d6; border: 1px solid #f0e2a0; border-radius: 10px; padding: 9px 14px; text-align: center; }

.secao { padding: 22px 0 6px; }
.grade-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card-categoria { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 8px; color: var(--texto); box-shadow: var(--sombra); transition: transform .12s; text-align: center; }
.card-categoria:hover { transform: translateY(-3px); border-color: var(--primaria); }
.card-categoria .emoji { font-size: 1.9rem; }
.card-categoria small { color: var(--texto-suave); }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 15px; padding-bottom: 24px; }
.card { position: relative; background: var(--card); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .12s; color: var(--texto); }
.card:hover { transform: translateY(-3px); }
.card .selo { position: absolute; top: 10px; left: 10px; background: var(--laranja); color: #fff; font-size: .75rem; font-weight: 800; padding: 3px 8px; border-radius: 7px; z-index: 1; }
.card .foto { height: 150px; background: #eef1f7; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.card .foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.card .corpo { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .loja { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primaria); }
.card .titulo { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card .meta { font-size: .78rem; color: var(--texto-suave); min-height: 1.2em; }
.card .preco { font-size: 1.18rem; font-weight: 800; color: var(--verde); margin-top: auto; }
.card .preco small { font-size: .76rem; font-weight: 400; color: var(--texto-suave); text-decoration: line-through; margin-left: 6px; }

.lista-layout { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; padding-bottom: 30px; }
.filtros { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; position: sticky; top: 74px; }
.filtros h3 { margin-bottom: 10px; }
.filtro-bloco { margin-bottom: 16px; }
.filtro-bloco > b { display: block; font-size: .85rem; margin-bottom: 6px; }
.chips-v { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto-suave); cursor: pointer; }
.chip.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.chip small { opacity: .75; font-weight: 400; }
.faixa-preco { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.faixa-preco input { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; }
.filtros select { width: 100%; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); }
.btn-mini { padding: 6px 14px; font-weight: 700; font-size: .84rem; color: #fff; background: var(--primaria); border: 0; border-radius: 8px; cursor: pointer; }
.btn-claro { background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda); width: 100%; }
.btn-toggle-filtros { display: none; width: 100%; margin-bottom: 12px; padding: 11px; font-size: .95rem; font-weight: 700; color: var(--primaria); background: var(--card); border: 1.5px solid var(--primaria); border-radius: 10px; cursor: pointer; }
.contagem { color: var(--texto-suave); font-size: .9rem; margin-bottom: 12px; }

.paginacao { display: flex; gap: 6px; justify-content: center; padding: 10px 0 30px; }
.pag { min-width: 38px; padding: 8px 10px; font-weight: 700; background: var(--card); border: 1px solid var(--borda); border-radius: 9px; cursor: pointer; color: var(--texto); }
.pag.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }

.migalhas { font-size: .85rem; color: var(--texto-suave); padding-top: 14px; }
.migalhas span { color: var(--texto); }

/* página de produto (SSR) */
.produto { display: grid; grid-template-columns: 340px 1fr; gap: 26px; background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 24px; margin-top: 12px; box-shadow: var(--sombra); }
.produto-foto { display: flex; align-items: center; justify-content: center; background: #eef1f7; border-radius: 12px; min-height: 280px; }
.produto-foto img { max-width: 100%; max-height: 320px; object-fit: contain; }
.emoji-grande { font-size: 5rem; }
.produto-dados h1 { font-size: 1.35rem; margin: 0 0 6px; }
.produto-resumo { color: var(--texto-suave); margin-bottom: 16px; }
.preco-grande { color: var(--verde); font-size: 1.35rem; }
.ofertas h2 { font-size: 1.05rem; margin-bottom: 10px; }
.oferta { display: flex; align-items: center; gap: 14px; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; }
.oferta.destaque { border-color: var(--verde); background: #f2fbf6; }
.oferta-info { flex: 1; display: flex; flex-direction: column; }
.oferta .loja { font-weight: 700; }
.oferta .meta { font-size: .8rem; color: var(--texto-suave); }
.oferta .preco { font-size: 1.15rem; font-weight: 800; color: var(--verde); }
.oferta .preco small { font-size: .75rem; font-weight: 400; color: var(--texto-suave); text-decoration: line-through; margin-left: 5px; }
.btn { display: inline-block; text-align: center; padding: 10px 18px; font-weight: 700; color: #fff; background: var(--primaria); border-radius: 10px; }
.btn:hover { background: var(--primaria-escura); }

.carregando { text-align: center; padding: 40px 0; }
.spinner { width: 38px; height: 38px; margin: 0 auto; border: 4px solid var(--borda); border-top-color: var(--primaria); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.vazio { text-align: center; padding: 30px 0; color: var(--texto-suave); }

.rodape { background: var(--card); border-top: 1px solid var(--borda); padding: 24px 0; font-size: .85rem; color: var(--texto-suave); margin-top: 20px; }
.rodape p + p { margin-top: 8px; }
.rodape-links { margin-top: 12px; font-weight: 600; }

.link-blog { flex-shrink: 0; font-size: .84rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; background: #fdf0e6; color: #c2410c; border: 1px solid #f5d9c4; white-space: nowrap; }
.link-blog:hover { border-color: #c2410c; }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding-bottom: 30px; }
.blog-card { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); color: var(--texto); display: flex; flex-direction: column; transition: transform .12s; }
.blog-card:hover { transform: translateY(-3px); }
.blog-card img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; display: block; }
.blog-card .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.blog-card h2 { font-size: 1.05rem; margin: 0; }
.blog-card p { font-size: .88rem; color: var(--texto-suave); margin: 0; }
.blog-card time { font-size: .76rem; color: var(--texto-suave); }

.artigo { max-width: 780px; margin: 10px auto 30px; background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 30px 34px 36px; box-shadow: var(--sombra); }
.artigo h1 { font-size: 1.65rem; line-height: 1.3; margin: 8px 0 6px; }
.artigo .artigo-meta { color: var(--texto-suave); font-size: .85rem; margin-bottom: 18px; }
.artigo h2 { font-size: 1.25rem; margin: 28px 0 10px; }
.artigo h3 { font-size: 1.05rem; color: var(--titulo); margin: 20px 0 8px; }
.artigo p { margin: 0 0 14px; line-height: 1.75; }
.artigo ul, .artigo ol { margin: 0 0 14px 22px; line-height: 1.7; }
.artigo li { margin-bottom: 6px; }
.artigo figure { margin: 22px 0; }
.artigo figure img { width: 100%; border-radius: 12px; display: block; }
.artigo figcaption { font-size: .8rem; color: var(--texto-suave); text-align: center; margin-top: 8px; }
.artigo table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .9rem; }
.artigo th, .artigo td { border: 1px solid var(--borda); padding: 8px 10px; text-align: left; }
.artigo th { background: var(--chip-fundo); color: var(--titulo); }
.artigo .tabela-scroll { overflow-x: auto; margin-bottom: 16px; }
.artigo .destaque-box { background: var(--chip-fundo); border-left: 4px solid var(--primaria); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 16px; }
.leia-tambem { background: var(--chip-fundo); border: 1px solid var(--chip-borda); border-radius: 12px; padding: 16px 20px; margin: 26px 0 6px; }
.leia-tambem b { color: var(--primaria-escura); display: block; margin-bottom: 8px; }
.leia-tambem a { display: block; margin: 4px 0; font-weight: 600; }

.pagina-institucional { max-width: 780px; margin: 10px auto 30px; background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 30px 34px 36px; box-shadow: var(--sombra); }
.pagina-institucional h1 { margin-top: 8px; }
.pagina-institucional h2 { margin: 22px 0 8px; font-size: 1.15rem; }
.pagina-institucional p, .pagina-institucional li { line-height: 1.7; }
.pagina-institucional ul { margin: 0 0 14px 22px; }

@media (max-width: 640px) {
  .artigo, .pagina-institucional { padding: 20px 18px 26px; border-radius: 12px; }
  .artigo h1 { font-size: 1.35rem; }
}

/* ---------- responsivo ---------- */
@media (max-width: 760px) {
  .lista-layout { grid-template-columns: 1fr; gap: 0; }
  .btn-toggle-filtros { display: block; }
  .filtros { display: none; position: static; margin-bottom: 14px; }
  .filtros.aberto { display: block; }
  .filtros h3 { display: none; }
  .chips-v { flex-direction: row; flex-wrap: wrap; }
  .produto { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .produto-foto { min-height: 180px; }
  .oferta { flex-wrap: wrap; gap: 8px 14px; }
  .oferta .btn-oferta { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .topo .container { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px 12px; }
  .logo { font-size: 1.1rem; }
  .logo-img { width: 28px; height: 28px; }
  .busca-topo { flex-basis: 100%; max-width: none; margin-left: 0; order: 3; }
  .busca-topo input, .busca input, .faixa-preco input { font-size: 16px; } /* evita zoom automático no iOS */
  .hero { padding: 26px 0 6px; }
  .busca { flex-direction: column; }
  .busca button { padding: 12px; }
  .secao { padding: 16px 0 4px; }
  .grade-categorias { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .card-categoria { padding: 12px 4px; }
  .card-categoria .emoji { font-size: 1.5rem; }
  .card-categoria b { font-size: .78rem; }
  .card-categoria small { font-size: .68rem; }
}

@media (max-width: 560px) {
  .grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card .foto { height: 118px; font-size: 2.1rem; }
  .card .corpo { padding: 9px 10px 11px; }
  .card .titulo { font-size: .82rem; }
  .card .preco { font-size: 1.05rem; }
  .card .meta { font-size: .72rem; }
  .pag { min-width: 42px; padding: 10px 12px; }
  h1 { font-size: 1.25rem; }
  .preco-grande { font-size: 1.15rem; }
}