*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Roboto,Arial,sans-serif}

/* TOPO */
.topbar{display:flex;flex-direction:column;align-items:center;padding:8px 12px;background:#143774;color:#fff}
.brand{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px}
.brand-logo{height:42px;width:42px;border-radius:8px}
.brand-name{font-size:20px;font-weight:700}
.quick-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.quick-links .link-btn{padding:6px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;width:60px;height:40px;transition:transform .2s}
.quick-links .link-btn:hover{transform:scale(1.05)}
.quick-links .link-btn img{max-height:26px;max-width:100%;object-fit:contain}

/* HERO */
.hero{text-align:center;padding:16px 12px;background:#f7faff}
.hero-title{font-size:22px;margin-bottom:10px;color:#143774;transition:opacity 1s,max-height 1s}
.hero-title.fade-out{opacity:0;max-height:0;overflow:hidden}

.search-wrap{display:flex;justify-content:center;gap:6px;max-width:600px;margin:0 auto 12px}
.search-wrap input{flex:1;padding:10px 12px;border:1px solid #ccd;border-radius:18px;font-size:14px}
.search-wrap .btn-clear{padding:10px 12px;border:1px solid #ccd;border-radius:18px;background:#fff;cursor:pointer;transition:background .2s}
.search-wrap .btn-clear:hover{background:#f1f1f1}

/* BANNER */
.aviso{background:#fff9c4;padding:8px 10px;border-radius:8px;font-size:13px;max-width:600px;margin:0 auto;transition:opacity .5s,max-height .5s,margin .5s,padding .5s}
.aviso.hidden{opacity:0;max-height:0;padding:0;margin:0;overflow:hidden;display:none}

/* CATEGORIAS */
.cat-bar{background:#f9fbff;border-bottom:1px solid #e5edff;position:sticky;top:0;z-index:1000}
.cat-grid{display:flex;gap:10px;padding:8px 10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cat-grid::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid #ffd500;font-size:14px;cursor:pointer;white-space:nowrap;font-weight:600;color:#143774;box-shadow:0 0 8px rgba(255,213,0,.3);animation:pulseGlow 2.8s infinite;transition:all .25s}
.cat-chip:hover{transform:scale(1.08);box-shadow:0 0 12px rgba(255,213,0,.7)}
.cat-chip.active{background:#143774;color:#fff;border-color:#143774;box-shadow:0 0 15px rgba(20,55,116,.4)}
@keyframes pulseGlow{0%{box-shadow:0 0 4px rgba(255,213,0,.2)}50%{box-shadow:0 0 16px rgba(255,213,0,.8)}100%{box-shadow:0 0 4px rgba(255,213,0,.2)}}

/* LAYOUT */
.main{max-width:1200px;margin:0 auto;padding:16px 12px}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* CARD */
.card{background:#fff;border-radius:18px;border:1px solid #e7eefc;box-shadow:0 6px 18px rgba(20,55,116,.08);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s}
.card:hover{transform:translateY(-2px)}

/* FOTO */
.card .thumb{
  display:block; width:100%; height:220px;
  background:#f1f4ff; overflow:hidden;
}
.card .thumb img{width:100%;height:100%;object-fit:contain;object-position:center}
.thumb-placeholder{display:grid;place-items:center;height:100%;font-size:36px;opacity:.35}

/* CONTEÚDO */
.card .content{padding:12px;display:grid;gap:8px;position:relative}

/* TÍTULO + MICRO-LOGO (canto superior esquerdo, responsivo e corrigido) */
.title-row{
  position:relative;             /* ancora a logo */
  display:block;
}

.title-row .title{ padding-left:0;
  margin:0;
  font-size:15px;
  line-height:1.35;
               /* reserva espaço pro ícone no desktop */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

/* logo movida para a imagem */

.meta{
  font-size:12px;
  color:#555;
  opacity:.8;
}

/* MOBILE – corrige corte do texto e ajusta espaçamento */
@media (max-width:600px){
  /* removed old .store-mini rule */
  .title-row .title{ 
              /* reserva espaço da logo no mobile */
    line-height:1.4;            /* um pouquinho mais alto pro texto respirar */
    overflow-wrap:anywhere;     /* quebra mesmo se a palavra for grande */
    word-break:break-word;
    hyphens:auto;
  }
}



/* GRADE ÍCONES (Loja Oficial) */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:10px;justify-content:center;align-items:start;padding:8px 4px}
.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#fff;border-radius:14px;box-shadow:0 3px 8px rgba(0,0,0,.08);aspect-ratio:1/1;transition:transform .2s;overflow:hidden}
.icon-card:hover{transform:scale(1.05)}
.icon-card img{width:100%;height:70px;object-fit:contain;object-position:center;margin-top:10px}
.icon-label{font-size:11px;color:#333;text-align:center;padding:6px 4px 8px;line-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:95%}

/* RODAPÉ */
.footer{text-align:center;padding:16px;background:#143774;color:#fff;font-size:13px}

/* RESPONSIVO */
@media (max-width:600px){
  .brand-name{font-size:18px}
  .hero-title{font-size:18px}
  .quick-links .link-btn{width:50px;height:36px}
  .quick-links .link-btn img{max-height:22px}
  .cat-chip{font-size:12px;padding:6px 10px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .card .thumb{height:180px}
  /* removed old .store-mini rule */
}

/* BOTÃO TOPO */
#btnTopo{position:fixed;bottom:20px;right:20px;display:none;background:#143774;color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:22px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.3);transition:opacity .3s;z-index:9999}
#btnTopo.show{display:block}
#btnTopo:hover{background:#1c4baf;transform:scale(1.08)}


/* ===== COMPLIANCE / AFILIADOS (fixo acima da busca) ===== */
.compliance-bar{
  background:#143774;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  margin:10px auto 10px;
  border-radius:10px;
}
.compliance-wrap{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px; max-width:980px; margin:0 auto;
}
.compliance-bar .dot{opacity:.7}
.compliance-bar .msg{font-size:13px; line-height:1.4}
.compliance-bar .links{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.compliance-bar .links a{color:#ffed75; text-decoration:underline; text-underline-offset:2px}

.footer .footer-legal{margin-top:8px; max-width:980px; margin-left:auto; margin-right:auto}
.footer .disclosure{opacity:.95; font-size:12px; line-height:1.45; margin-top:6px}
@media (max-width:700px){
  .compliance-wrap{flex-direction:column; align-items:flex-start}
  .compliance-bar .links{margin-left:0}
}


/* ===== Compliance: comportamento mobile com colapso por timer ===== */
.compliance-toggle{
  margin-left:auto;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:8px;
  padding:2px 8px;
  cursor:pointer;
  font-size:14px;
}
/* estado colapsado */
.compliance-bar.collapsed .msg{ 
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%;
}
.compliance-bar.collapsed .links{ display:none; }
.compliance-bar.collapsed .dot{ display:none; }

@media (max-width:640px){
  .compliance-bar{ padding:0; }
  .compliance-wrap{ padding:8px 10px; }
  .compliance-bar.collapsed{ 
    border-radius:999px; 
    margin:8px auto; 
    max-width:calc(100% - 24px);
  }
  .compliance-bar.collapsed .compliance-toggle{
    background:rgba(255,255,255,.2);
  }
}

/* ===== BEGIN PATCH: Banner de Afiliado / Disclosure ===== */

/* Paleta (ajuste se quiser) */
:root{
  --vb-blue:#0F2E67;      /* azul do topo */
  --vb-blue-2:#133B82;    /* azul do card */
  --vb-text:#f6f7fb;      /* texto claro */
  --vb-link:#F1E579;      /* amarelo link */
  --vb-radius:18px;
}

/* Zerar qualquer “vão” antes do banner */
#aviso-afiliado{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Se algum container-pai injeta espaçamento no primeiro filho */
main > section:first-child,
main > .section:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Estilo do card */
.banner-afiliado{
  background: var(--vb-blue);
  border-radius: var(--vb-radius);
  color: var(--vb-text);
  line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  position: relative;
  isolation: isolate;
}

.banner-afiliado__inner{
  padding: 14px 16px 12px;
}

/* Zera qualquer lista/bolinha se o conteúdo vier como UL/Li */
.banner-afiliado ul{ list-style: none; margin: 0; padding: 0; }
.banner-afiliado li{ margin: 0; padding: 0; }

/* Remove margem do primeiro/último bloco para evitar “respiros” extras */
.banner-afiliado > :first-child,
.banner-afiliado__inner > :first-child{ margin-top: 0; }
.banner-afiliado > :last-child,
.banner-afiliado__inner > :last-child{ margin-bottom: 0; }

/* Texto principal */
.banner-afiliado__txt{
  margin: 0 0 8px 0;
  font-size: 0.98rem;
}

/* Links (privacidade/termos) */
.banner-afiliado__links{
  margin: 0 0 4px 0;
  font-size: 0.98rem;
}
.banner-afiliado__links a{
  color: var(--vb-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.banner-afiliado__links .sep{
  color: rgba(255,255,255,.6);
  margin: 0 .45rem;
}

/* Frase oficial em EN (Amazon) */
.banner-afiliado__en{
  margin: 0;
  opacity: .9;
}

/* Botão/flutuante que você tem no canto do card (se existir) mantém layout */
.banner-afiliado .btn-collapse{
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Responsivo */
@media (min-width:768px){
  .banner-afiliado__inner{ padding: 16px 18px 14px; }
  .banner-afiliado__txt,
  .banner-afiliado__links{ font-size: 1rem; }
}

/* Em casos raros o bloco acima injeta gap via grid/gap: trate aqui */
.header-logos + #aviso-afiliado{ margin-top: 8px !important; }

/* ===== END PATCH ===== */
/* --- Corrige espaço interno do banner azul --- */
#aviso-afiliado,
.banner-afiliado { padding-top: 0 !important; }

/* se o conteúdo estiver em UL/LI, zera bolinha e espaçamentos */
#aviso-afiliado ul,
.banner-afiliado ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

#aviso-afiliado li,
.banner-afiliado li { margin: 0 !important; padding: 0 !important; }

/* remove marcador/bolinha que cria o recuo e a “área vazia” */
#aviso-afiliado li::marker,
.banner-afiliado li::marker { content: "" !important; }

/* se existir um <li> vazio no topo, some com ele */
#aviso-afiliado li:empty,
.banner-afiliado li:empty { display: none !important; }

/* garante que o primeiro elemento de texto já comece no topo */
#aviso-afiliado > *:first-child,
.banner-afiliado > *:first-child { margin-top: 0 !important; }

#aviso-afiliado .banner-afiliado__inner { padding-top: 8px !important; } /* ajuste fino */
#aviso-afiliado p { margin-top: 0 !important; }



/* removed old .store-mini rule */
@media (max-width:600px){
  .card .thumb{ height:180px; }
  .card .thumb /* removed old .store-mini rule */
}


/* === WATERMARK FIX V3 === */
.card .thumb{ position:relative; display:block; width:100%; height:220px; background:#f1f4ff; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.card .thumb .store-mini{
  position:absolute; bottom:8px; right:8px;
  width:48px; height:48px; border-radius:8px;
  opacity:.20;               /* visível no desktop */
  z-index:1; object-fit:contain; pointer-events:none;
  filter:grayscale(10%) contrast(90%);
}
@media (max-width:600px){
  .card .thumb{ height:180px; }
  .card .thumb .store-mini{
    width:38px; height:38px; bottom:6px; right:6px;
    opacity:.24;            /* mais visível no celular */
  }
}



/* === Compacta a barra de compliance para ~1/3 do tamanho === */
.compliance-bar.compact .compliance-wrap{ padding:6px 10px; }
.compliance-bar.compact .msg{ font-size:12px; line-height:1.3; }
.compliance-bar.compact .links a{ font-size:12px; }
.compliance-bar.compact{ margin:6px auto 8px; border-radius:8px; }
.compliance-bar.compact .compliance-toggle{ font-size:12px; padding:1px 6px; }
@media (max-width:640px){
  .compliance-bar.compact{ margin:6px auto; }
  .compliance-bar.compact .compliance-wrap{ padding:6px 10px; }
}


/* ===== Barra legal compacta (1/4 do tamanho) ===== */
.legal-banner {
  background: #143774;      /* azul VivaBem */
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px auto;
}

/* links amarelos visíveis */
.legal-banner a {
  color: #FFD700;           /* amarelo ouro */
  text-decoration: underline;
  font-weight: 600;
}

/* efeito hover e contraste em telas escuras */
.legal-banner a:hover,
.legal-banner a:focus {
  color: #ffcc00;           /* tom mais vivo ao passar o mouse */
}

/* tamanho reduzido */
.legal-banner.compact {
  padding: 6px 10px;
  font-size: 0.9rem;
}

/* Desativa estilos/elementos antigos caso ainda existam */
.compliance-bar,
.compliance-wrap,
.compliance-toggle {
  display: none !important;
}
/* ---- Rodapé: links amarelos e texto branco ---- */
footer, .site-footer, .rodape, .footer, .footnote, .legal-footer {
  color: #fff !important;
}

footer a,
.site-footer a,
.rodape a,
.footer a,
.footnote a,
.legal-footer a {
  color: #FFD700 !important;              /* amarelo */
  text-decoration: underline;
  font-weight: 600;
}

footer a:visited,
.site-footer a:visited,
.rodape a:visited,
.footer a:visited,
.footnote a:visited,
.legal-footer a:visited {
  color: #FFD700 !important;              /* evita roxo/azul de link visitado */
}

footer a:hover,
.site-footer a:hover,
.rodape a:hover,
.footer a:hover,
.footnote a:hover,
.legal-footer a:hover {
  color: #ffcc00 !important;              /* destaque no hover */
}