/* Base = mobile. Desktop so cresce a partir daqui, nunca o contrario. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  color: var(--cinza-texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--e-12);
}

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.2; }
/* height:auto acompanha o max-width: sem ele, a largura encolhe na tela estreita
   e a altura do atributo continua fixa, distorcendo o desenho. */
img { max-width: 100%; height: auto; }

/* Alvo de toque minimo em qualquer elemento clicavel */
a, button, select { min-height: 44px; }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--amarelo); color: var(--azul-royal-dk);
  padding: var(--e-2) var(--e-4); z-index: 100;
}
.pular-para-conteudo:focus { left: var(--e-2); top: var(--e-2); }

/* ===== Cabecalho ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--h-header);
  display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-4);
  background: var(--azul-royal);
}
.header__logo {
  display: flex; align-items: center; gap: var(--e-2);
  text-decoration: none; min-height: 44px;
}
.header__logo img { display: block; height: 32px; width: auto; }
.header__voltar {
  display: inline-flex; align-items: center; gap: var(--e-1);
  color: var(--branco); text-decoration: none; font-weight: 700;
}

/* ===== Busca: sempre visivel, nunca atras de um icone ===== */
.busca-wrap {
  position: sticky; top: var(--h-header); z-index: 49;
  padding: var(--e-3) var(--e-4);
  background: var(--branco);
}
.busca {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--off-white);
  border: 2px solid var(--cinza-borda);
  border-radius: var(--raio-btn);
  padding: 0 var(--e-4); height: 48px;
}
.busca:focus-within { border-color: var(--azul-royal); }
.busca input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; height: 100%; color: inherit;
}

/* ===== Hero ===== */
.hero { padding: var(--e-2) var(--e-4) var(--e-4); }
.hero h1 { font-size: var(--t-hero); color: var(--azul-royal); }
.hero p { color: var(--cinza-suave); margin-top: var(--e-1); }

/* ===== Chips: carrossel horizontal, nao menu escondido ===== */
.chips {
  display: flex; gap: var(--e-2); overflow-x: auto;
  padding: var(--e-2) var(--e-4);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips__rotulo {
  flex: 0 0 auto; align-self: center;
  font-size: var(--t-mini); font-weight: 700; color: var(--cinza-suave);
  padding-right: var(--e-1);
}
.chip {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 var(--e-4);
  border: 0; border-radius: var(--raio-chip);
  background: var(--azul-bebe); color: var(--azul-royal);
  font: inherit; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.chip[aria-current="true"] { background: var(--azul-royal); color: var(--branco); }

/* ===== Secoes ===== */
.secao { padding: var(--e-6) 0 var(--e-2); }
.secao h2 { font-size: var(--t-h2); color: var(--azul-royal); padding: 0 var(--e-4) var(--e-3); }

/* ===== Grid de produtos: 2 colunas no celular ===== */
.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3); padding: 0 var(--e-4);
}

.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}
.card__foto { position: relative; aspect-ratio: 1; background: var(--off-white); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder do mascote quando a foto falha: contido e com respiro, nunca cortado como o cover acima. */
.card__foto-img--vazia { object-fit: contain; padding: var(--e-6); }
.card__info { padding: var(--e-3); display: flex; flex-direction: column; gap: 2px; }
.card__nome {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__antigo { font-size: var(--t-mini); color: var(--cinza-suave); }
.card__preco { font-size: 1.125rem; color: var(--vermelho); font-weight: 800; }
.card__loja { font-size: var(--t-mini); color: var(--cinza-suave); text-transform: capitalize; }

/* Selo amarelo: texto azul escuro, nunca branco — contraste */
.selo {
  position: absolute; top: var(--e-2); left: var(--e-2);
  background: var(--amarelo); color: var(--azul-royal-dk);
  font-weight: 800; font-size: var(--t-mini);
  padding: 2px var(--e-2); border-radius: var(--raio-chip);
}
.selo--off { transform: rotate(-3deg); }  /* efeito adesivo, como o logo */
.selo--destaque {
  position: static; display: inline-block; transform: none;
  margin-bottom: var(--e-2);
}

/* ===== Categorias: grid de 4 no celular ===== */
.categorias {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2); padding: 0 var(--e-4);
}
.categoria {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-1); padding: var(--e-2) var(--e-1);
  background: var(--off-white); border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-card);
  text-decoration: none; color: var(--azul-royal); text-align: center;
}
.categoria__icone { font-size: 1.5rem; line-height: 1; }
.categoria__nome {
  font-size: 0.6875rem; font-weight: 700; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Estado vazio com o mascote ===== */
.vazio {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-2); padding: var(--e-8) var(--e-4); text-align: center;
}
.vazio p { font-weight: 700; color: var(--azul-royal); }
.vazio__dica { font-weight: 400 !important; color: var(--cinza-suave) !important; }

/* ===== Esqueleto de carregamento ===== */
.esqueleto {
  border: 1px solid var(--cinza-borda); border-radius: var(--raio-card);
  overflow: hidden; padding-bottom: var(--e-3);
}
.esqueleto__foto { aspect-ratio: 1; background: var(--off-white); }
.esqueleto__linha {
  height: 12px; margin: var(--e-3) var(--e-3) 0;
  background: var(--cinza-borda); border-radius: var(--raio-chip);
}
.esqueleto__linha--curta { width: 50%; }
.esqueleto__foto, .esqueleto__linha { animation: respirar 1.4s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ===== Botoes ===== */
.btn-secundario {
  display: flex; align-items: center; justify-content: center;
  margin: var(--e-4) var(--e-4) 0; min-height: 48px;
  background: var(--azul-bebe); color: var(--azul-royal);
  font-family: var(--fonte-titulo); font-weight: 800;
  border: 0; border-radius: var(--raio-btn); text-decoration: none; cursor: pointer;
}
/* display:flex acima vence a regra [hidden] do navegador; sem isto o "Carregar mais"
   continua na tela mesmo quando o JS o marca como escondido. */
.btn-secundario[hidden] { display: none; }

/* CTA sticky — a peca que gera receita */
.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--e-3) var(--e-4);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--branco); border-top: 1px solid var(--cinza-borda);
}
.btn-comprar {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 100%; min-height: 56px;
  background: var(--vermelho); color: var(--branco);
  font-family: var(--fonte-titulo); font-size: 1.125rem; font-weight: 800;
  border: 0; border-radius: var(--raio-btn); box-shadow: var(--sombra-cta);
  text-decoration: none; cursor: pointer;
}
.btn-comprar:active { transform: scale(0.98); }

/* ===== Pagina de produto ===== */
.produto { padding-bottom: calc(var(--h-cta) + var(--e-8)); }
.produto__foto { aspect-ratio: 1; background: var(--off-white); }
.produto__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.produto__foto-img--vazia { padding: var(--e-8); }
.produto__corpo { padding: var(--e-4); }
.produto__nome { font-size: 1.375rem; color: var(--azul-royal); margin-bottom: var(--e-3); }
.produto__antigo { color: var(--cinza-suave); font-size: var(--t-corpo); }
.produto__preco {
  font-size: 1.75rem; font-weight: 800; color: var(--vermelho);
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
}
.produto__loja { color: var(--cinza-suave); margin-top: var(--e-2); text-transform: capitalize; }
.produto__bloco { padding: var(--e-4); border-top: 1px solid var(--cinza-borda); }
.produto__bloco h2 { font-size: var(--t-h2); color: var(--azul-royal); margin-bottom: var(--e-2); }
.beneficios { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); }
.beneficios li { display: flex; gap: var(--e-2); }
.beneficios li::before { content: "✓"; color: var(--verde-sucesso); font-weight: 800; }
.aviso-preco {
  display: flex; gap: var(--e-2); margin: var(--e-4);
  padding: var(--e-3); border-radius: var(--raio-card);
  background: var(--off-white); border: 1px solid var(--cinza-borda);
  font-size: var(--t-mini); color: var(--cinza-suave);
}

/* Carrossel horizontal de relacionados */
.carrossel {
  display: flex; gap: var(--e-3); overflow-x: auto;
  padding: 0 var(--e-4) var(--e-2);
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel .card { flex: 0 0 45%; scroll-snap-align: start; }

/* ===== Barra de resultados do catalogo ===== */
.barra-resultados {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font-weight: 700; color: var(--azul-royal);
}
.barra-resultados select {
  font: inherit; font-weight: 700;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cinza-borda); border-radius: var(--raio-chip);
  background: var(--branco); color: var(--azul-royal);
}

/* ===== Conteudo corrido (sobre, politica) ===== */
.conteudo { padding: var(--e-4); max-width: 70ch; margin: 0 auto; }
.conteudo h1 { font-size: var(--t-hero); color: var(--azul-royal); margin-bottom: var(--e-4); }
.conteudo h2 { font-size: var(--t-h2); color: var(--azul-royal); margin: var(--e-6) 0 var(--e-2); }
.conteudo p, .conteudo li { margin-bottom: var(--e-3); line-height: 1.6; }
.conteudo ul { padding-left: var(--e-6); }
.conteudo a { color: var(--azul-royal); }

/* ===== Rodape ===== */
.rodape {
  margin-top: var(--e-12);
  padding: var(--e-8) var(--e-4) var(--e-12);
  background: var(--azul-royal); color: var(--branco);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  text-align: center;
}
.aviso-afiliado { font-size: var(--t-mini); line-height: 1.5; max-width: 46ch; }
.rodape nav { display: flex; gap: var(--e-2); flex-wrap: wrap; justify-content: center; }
.rodape a { color: var(--branco); font-weight: 700; }
.rodape > img { height: 40px; width: auto; }
.rodape small { color: var(--azul-bebe); font-size: var(--t-mini); }

/* ===== Banner de cookies ===== */
.banner-cookies {
  position: fixed; left: var(--e-2); right: var(--e-2); bottom: var(--e-2); z-index: 70;
  padding: var(--e-4);
  background: var(--branco); border: 2px solid var(--azul-royal);
  border-radius: var(--raio-card); box-shadow: var(--sombra-card);
  display: flex; flex-direction: column; gap: var(--e-3);
  font-size: var(--t-mini);
}
.banner-cookies[hidden] { display: none; }
.banner-cookies__acoes { display: flex; gap: var(--e-2); }
.banner-cookies button {
  flex: 1; min-height: 44px; border-radius: var(--raio-btn);
  font: inherit; font-weight: 800; cursor: pointer; border: 0;
}
.banner-cookies .aceitar { background: var(--azul-royal); color: var(--branco); }
.banner-cookies .recusar {
  background: var(--branco); color: var(--azul-royal);
  border: 2px solid var(--cinza-borda);
}

/* ===== Desktop: cresce, nao encolhe ===== */
@media (min-width: 768px) {
  main { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .categorias { grid-template-columns: repeat(5, 1fr); gap: var(--e-3); }
  .categoria__nome { font-size: var(--t-mini); }
  .carrossel .card { flex: 0 0 22%; }
  .cta-fixo { position: static; border: 0; padding: var(--e-4); }
  .btn-comprar { max-width: 320px; }
  .produto { padding-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); }
  .produto__foto { border-radius: var(--raio-card); overflow: hidden; }
  .banner-cookies { left: auto; right: var(--e-4); max-width: 420px; }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== Acessibilidade: respeitar quem desligou animacao ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}