/* ============================
   Animarium — CSS base padronizado (consolidado)
   ============================ */

/* Google Fonts (pode manter @import ou trocar por <link> no head) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@600;700&display=swap');

/* 1) Variáveis globais */
:root{
  --anm-brand:#75389D; --anm-brand-dark:#5F2E7D; --anm-brand-soft:#EDE6F3;
  --anm-accent:#FF6B4A; --anm-accent-dark:#E35738;
  --anm-secondary:#1FA2A8; --anm-text:#1F2430; --anm-text-onbrand:#FFFFFF;
  --anm-surface:#FFFFFF; --anm-surface-alt:#F6F7F9; --anm-border:#E3E5EA;

  --anm-font-base:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --anm-font-title:"Outfit","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --anm-radius:10px; --anm-shadow:0 10px 24px rgba(0,0,0,.08); --anm-focus:#1FA2A8;
  --produtos-mobile-por-linha:2;

  /* compat com scripts antigos */
  --devrocket-whatsapp-espaco-direita:14px;
  --devrocket-voltar-topo-espaco-esquerda:14px;
  --devrocket-voltar-topo-espaco-abaixo:90px;
}

/* 2) Base e tipografia */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--anm-surface);color:var(--anm-text);font-family:var(--anm-font-base);line-height:1.45}
.conteiner{background:var(--anm-surface)}
#cabecalho{background:var(--anm-brand);color:var(--anm-text-onbrand)}
#rodape{background:var(--anm-brand-soft);color:var(--anm-text)}
.titulo,h1,h2,h3,h4{font-family:var(--anm-font-title);}

/* 2.1) Garantir contraste quando tema transparente */
.tema-transparente .conteiner{background:var(--anm-surface)!important}
body,.conteiner{color:var(--anm-text)!important}

/* 3) Utilitários LI — coerência de paleta */
.fundo-principal{background:var(--anm-brand)!important;color:#fff!important}
.borda-principal{border-color:var(--anm-brand)!important}
.cor-principal{color:var(--anm-brand)!important}
.fundo-secundario{background:var(--anm-surface-alt)!important;color:var(--anm-text)!important}
.cor-secundaria{color:var(--anm-text)!important}

/* 4) Menu superior e dropdown */
.menu.superior{background:var(--anm-brand)}
.menu.superior>.nivel-um>li>a,
.menu.superior>.nivel-um>li>a .titulo{color:#fff!important}
.menu.superior>.nivel-um>li>a i[class*="icon-"]{background:transparent!important;color:#fff!important;border:0!important}

.menu.superior .nivel-dois{
  background:#fff!important;border:1px solid var(--anm-border)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.08);min-width:220px;z-index:9999
}
.menu.superior .nivel-dois a{
  color:var(--anm-text)!important;background:transparent!important;border:0!important;
  display:block;padding:10px 14px;line-height:1.15
}
.menu.superior .nivel-dois li:hover>a,
.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-dois a:focus{
  background:var(--anm-surface-alt)!important;color:var(--anm-brand)!important;outline:none
}
.menu.superior>.nivel-um>li:hover>a,
.menu.superior>.nivel-um>li:focus-within>a{background:var(--anm-brand-dark)!important;color:#fff!important}

/* 5) Links e foco */
a{color:var(--anm-secondary)}
a:hover{color:var(--anm-accent)}
a:focus,button:focus,.botao:focus{outline:2px solid var(--anm-focus);outline-offset:2px}
.menu.superior .nivel-dois a:focus-visible{box-shadow:inset 0 0 0 2px var(--anm-focus);border-radius:8px;outline:none}

/* 6) Botões/CTAs */
.botao,.botao.principal{border-radius:999px;border:0;transition:transform .06s ease,filter .15s ease}
.botao.principal,.comprar,.finalizar-compra,.acoes-produto .botao.principal{
  background:var(--anm-brand)!important;color:var(--anm-text-onbrand)!important
}
.botao.principal:hover,.comprar:hover,.finalizar-compra:hover{background:var(--anm-brand-dark)!important}
.botao:hover{filter:brightness(.96)}
.botao:active,.botao.principal:active{transform:translateY(1px)}

/* 7) Cards/listagens */
.listagem-item,.box,.card{
  background:var(--anm-surface);border:1px solid var(--anm-border);
  border-radius:var(--anm-radius);box-shadow:var(--anm-shadow)
}
.listagem .info-produto .nome-produto a{color:var(--anm-text)}
.listagem .info-produto .nome-produto a:hover{color:var(--anm-secondary)}

/* micro-interações */
.listagem-item{transform:translateY(0);transition:transform .16s ease,box-shadow .18s ease}
.listagem-item:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.listagem-item a:focus{outline:2px solid var(--anm-focus);outline-offset:3px}

/* 8) Grid mobile (respeita var configurável) */
@media (max-width:767px){
  .listagem .row-fluid{display:grid;grid-template-columns:repeat(var(--produtos-mobile-por-linha,2),1fr);gap:10px}
  .listagem .row-fluid>li{width:auto!important;float:none!important}
}

/* 9) Preços e selos */
.preco,.preco-promocional{color:var(--anm-text)}
.badge-destaque,.selo-promocao,.tag-oferta{
  background:var(--anm-accent);color:#111;border-radius:8px;padding:.2rem .5rem
}
.badge-destaque.alt{background:var(--anm-accent-dark)}

/* 10) Newsletter */
form.newsletter button,.newsletter button{
  background:var(--anm-brand)!important;color:var(--anm-text-onbrand)!important;border:0
}
form.newsletter button:hover{background:var(--anm-brand-dark)!important}

/* 11) Flutuantes (compat com scripts) */
.devrocket-whatsapp{position:fixed;right:var(--devrocket-whatsapp-espaco-direita)!important;bottom:14px;z-index:9999}
.voltar-topo{position:fixed;right:var(--devrocket-voltar-topo-espaco-esquerda)!important;bottom:var(--devrocket-voltar-topo-espaco-abaixo);z-index:9999}

/* 12) Modais básicos (usados por JS) */
#anm-modal-backdrop[aria-hidden="true"]{display:none}
#anm-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.anm-modal{background:#fff;max-width:760px;width:100%;border-radius:10px;overflow:hidden;box-shadow:var(--anm-shadow)}
.anm-modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--anm-border)}
.anm-modal-header h4{margin:0;font-size:1.05rem}
.anm-close{cursor:pointer;border:none;background:transparent;font-size:1.2rem;line-height:1}
.anm-modal-body{padding:16px}

/* 13) Topbar (barra de ofertas/timer unificada) */
#anm-topbar{background:#0f6;color:#000;min-height:42px;display:flex;align-items:center;justify-content:center;padding:6px 10px;font-size:.95rem;z-index:9999}
#anm-topbar .wrap{width:100%;max-width:1140px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#anm-topbar a.btn{background:#fff;color:#111;border-radius:999px;padding:.25rem .6rem;text-decoration:none;font-weight:600}

/* 14) Sobre nós (fallback simples) */
.qs-bloco{background:var(--anm-surface);border:1px solid var(--anm-border);border-radius:var(--anm-radius);padding:12px}
.qs-bloco p{margin:6px 0;line-height:1.5}
.qs-hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.qs-hero img{max-height:54px;width:auto}

/* 15) Ícones (Lucide) e microcomponentes */
i[data-lucide]{display:inline-flex;vertical-align:middle;line-height:1}
i[data-lucide].sm svg{width:16px;height:16px}
i[data-lucide].md svg{width:20px;height:20px}
i[data-lucide].lg svg{width:24px;height:24px}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:.55rem .95rem;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .06s,filter .15s}
.btn:focus{outline:2px solid var(--anm-focus);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--anm-brand);color:var(--anm-text-onbrand)}
.btn--primary:hover{background:var(--anm-brand-dark)}
.btn--secondary{background:#fff;color:var(--anm-text);border-color:var(--anm-border)}
.btn--secondary:hover{filter:brightness(.97)}
.btn--text{background:transparent;color:var(--anm-secondary)}
.btn--text:hover{color:var(--anm-accent)}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:.15rem .5rem;font-weight:600;font-size:.78rem}
.badge--accent{background:var(--anm-accent);color:#111}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--anm-border);background:#fff;border-radius:999px;padding:.25rem .6rem;font-size:.85rem}
.alert{border:1px solid var(--anm-border);border-radius:var(--anm-radius);padding:.7rem .9rem;background:#fff;display:flex;gap:8px;align-items:flex-start;box-shadow:var(--anm-shadow)}
.alert--info{border-color:#CDE9EC}.alert--success{border-color:#D6F0D4}.alert--warn{border-color:#FCE5C2}.alert--danger{border-color:#F5C6CB}

/* 16) Acessibilidade — reduzir movimento */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* 17) Rodapé coeso e links */
#rodape{background:var(--anm-surface-alt);color:var(--anm-text)}
#rodape a{color:var(--anm-text)!important}
#rodape a:hover{color:var(--anm-brand)!important}

/* 18) Ícones clicáveis e carrinho (hover roxo→branco) */
a:hover i.fundo-principal,
button:hover i.fundo-principal,
.carrinho a:hover i.fundo-principal{background:var(--anm-brand-dark)!important;color:#fff!important}
.carrinho i.icon-shopping-cart{
  color:#fff!important;background:var(--anm-brand)!important;border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center
}
.carrinho a:hover i.icon-shopping-cart{background:var(--anm-brand-dark)!important}

/* =========================================================
   Animarium – Página de Produto (estilo e padronização)
   Requer variáveis já definidas (anm-*). Seguro para LI.
   ========================================================= */

/* CONTEXTO */
.pagina-produto body, .pagina-produto .conteiner { color: var(--anm-text); }
.pagina-produto .produto { --gap: 14px; }

/* BREADCRUMB */
.pagina-produto .breadcrumbs {
  border: 1px solid var(--anm-border); border-radius: 10px; padding: 8px 10px;
  background: var(--anm-surface-alt); margin-bottom: 12px;
}
.pagina-produto .breadcrumbs ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.pagina-produto .breadcrumbs a { color: var(--anm-text); text-decoration:none; }
.pagina-produto .breadcrumbs a:hover { color: var(--anm-brand); }

/* TÍTULO + CÓDIGO/MARCA */
.pagina-produto .nome-produto {
  font-family: var(--anm-font-title); font-weight:700; line-height:1.15;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  margin: 6px 0 10px;
}
.pagina-produto .codigo-produto { 
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  padding: 8px 0 4px; border-top: 1px dashed var(--anm-border);
  border-bottom: 1px dashed var(--anm-border); margin-bottom: 10px;
}
.pagina-produto .codigo-produto a { color: var(--anm-brand); }
.pagina-produto .codigo-produto a:hover { color: var(--anm-brand-dark); }

/* GALERIA */
.pagina-produto .conteiner-imagem img#imagemProduto{
  border:1px solid var(--anm-border); border-radius:12px; background:#fff;
  box-shadow: var(--anm-shadow);
}
.pagina-produto .produto-thumbs .slides img{ border-radius:8px; }
.pagina-produto .produto-thumbs .slides li a span{
  border:1px solid var(--anm-border); border-radius:8px; display:inline-block; padding:2px;
}
.pagina-produto .produto-thumbs { margin-top: 8px; }

/* COMPARTILHAR / FAVORITOS */
.pagina-produto .produto-compartilhar .lista-redes .adicionar-favorito{
  display:inline-flex; gap:8px; align-items:center; border-radius:999px;
  padding:.45rem .75rem; background: var(--anm-surface-alt); border:1px solid var(--anm-border);
  color: var(--anm-text); font-weight:600; text-decoration:none;
}
.pagina-produto .produto-compartilhar .lista-redes .adicionar-favorito:hover{
  filter:brightness(.98); color: var(--anm-brand);
}

/* PREÇO / AVISTA / PARCELAS */
.pagina-produto .preco-produto { margin-top: 6px; }
.pagina-produto .preco-promocional{
  font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem); line-height:1; font-weight:800;
  color: var(--anm-text);
}
.pagina-produto .desconto-a-vista{
  display:block; margin-top:6px; font-size:.95rem; color: var(--anm-text);
}
.pagina-produto .desconto-a-vista .titulo{ color: var(--anm-brand); }

.pagina-produto .parcelas-produto .accordion-group{
  border:1px solid var(--anm-border); border-radius:10px; overflow:hidden; background:#fff;
}
.pagina-produto .parcelas-produto .accordion-heading{
  padding:10px 12px; background:var(--anm-surface-alt);
}
.pagina-produto .parcelas-produto .accordion-heading .accordion-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none;
}
.pagina-produto .parcelas-produto .accordion-inner{ padding:8px 12px; }
.pagina-produto .parcelas-produto .parcela span{ display:inline-block; padding:4px 0; }

/* BUY BOX (quantidade + comprar + disponibilidade) */
.pagina-produto .acoes-produto .comprar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pagina-produto .qtde-adicionar-carrinho{ display:inline-flex; align-items:center; gap:6px; }
.pagina-produto .qtde-adicionar-carrinho .qtde-carrinho{
  width:70px; height:40px; border-radius:10px; border:1px solid var(--anm-border);
  padding:0 10px; font-weight:600; text-align:center; background:#fff;
}
.pagina-produto .botao-comprar.principal{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:.8rem 1.1rem; font-weight:700; box-shadow: var(--anm-shadow);
  background: var(--anm-brand)!important; color:#fff!important; border:0;
}
.pagina-produto .botao-comprar.principal:hover{ background: var(--anm-brand-dark)!important; }
.pagina-produto .disponibilidade-produto{ font-size:.92rem; }

/* CEP / FRETE */
.pagina-produto .cep label{ font-weight:600; margin-bottom:6px; display:inline-block; }
.pagina-produto .cep .input-cep{
  height:40px; border-radius:10px; border:1px solid var(--anm-border); padding:0 12px;
}
.pagina-produto .cep .btn{ border-radius:999px; height:40px; }

/* CARTÕES / LISTAGENS RELACIONADOS */
.pagina-produto .listagem .listagem-item{
  border:1px solid var(--anm-border); border-radius:12px; box-shadow: var(--anm-shadow);
  transition: transform .16s ease, box-shadow .18s ease; transform: translateY(0);
}
.pagina-produto .listagem .listagem-item:hover{
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* CARRINHO HEADER NA PÁG. DE PRODUTO (consistência) */
.pagina-produto .carrinho i.icon-shopping-cart{
  color:#fff !important; background:var(--anm-brand) !important;
  border-radius:999px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
}
.pagina-produto .carrinho a:hover i.icon-shopping-cart{ background:var(--anm-brand-dark)!important; }

/* MOBILE RESPIROS */
@media (max-width: 767px){
  .pagina-produto .principal{ margin-top: 10px; }
  .pagina-produto .acoes-produto .comprar{ gap:10px; }
  .pagina-produto .parcelas-produto .accordion-inner{ padding:10px; }
}/* Wrapper da área de compra */
.acoes-produto {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--anm-surface);
  border: 1px solid var(--anm-border);
  border-radius: var(--anm-radius);
  padding: 16px;
  box-shadow: var(--anm-shadow);
}

/* Preços */
.preco-principal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preco-principal .pix {
  font-family: var(--anm-font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--anm-brand);
}
.preco-principal .parcelado {
  font-size: 1rem;
  color: var(--anm-text);
}

/* Botão comprar */
.acoes-produto .botao-comprar {
  background: var(--anm-brand);
  color: #fff !important;
  border-radius: 999px;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
}
.acoes-produto .botao-comprar:hover {
  background: var(--anm-brand-dark);
}

/* Info lateral */
.info-produto-rapida {
  font-size: .9rem;
  color: var(--anm-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-produto-rapida b {
  color: var(--anm-brand);
}
/* 1) Tira o fundo roxo do contêiner .comprar (mantém só nos botões) */
.botao.principal,
.finalizar-compra,
.acoes-produto .botao.principal{
  background: var(--anm-brand) !important;
  color: var(--anm-text-onbrand) !important;
}

/* Remove .comprar da regra antiga, garantindo que o container fique neutro */
.comprar{
  background: transparent !important;
  border: 0 !important;
}

/* 2) Buy box em grid compacto (3 colunas): preço | qty+CTA | infos  */
.pagina-produto .acoes-produto{
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--anm-surface);
  border: 1px solid var(--anm-border);
  border-radius: var(--anm-radius);
  padding: 16px;
  box-shadow: var(--anm-shadow);
}

/* Bloco de quantidade + botão (lado a lado, altura fixa no CTA) */
.pagina-produto .acoes-produto .comprar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0;            /* garante que o container não “engorde” */
}

.pagina-produto .qtde-adicionar-carrinho{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pagina-produto .qtde-adicionar-carrinho .qtde-carrinho{
  width: 70px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--anm-border);
  padding: 0 10px;
  font-weight: 600;
  text-align: center;
  background: #fff;
}

/* CTA compacto (sem faixa) */
.pagina-produto .botao-comprar.principal{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--anm-shadow);
  background: var(--anm-brand) !important;
  color: #fff !important;
}
.pagina-produto .botao-comprar.principal:hover{
  background: var(--anm-brand-dark) !important;
}

/* Coluna de informações rápidas (estoque, disponibilidade) */
.pagina-produto .info-produto-rapida{
  font-size: .9rem;
  color: var(--anm-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.pagina-produto .info-produto-rapida b{ color: var(--anm-brand); }

/* Responsivo: buy box empilha com respiros amigáveis */
@media (max-width: 767px){
  .pagina-produto .acoes-produto{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pagina-produto .info-produto-rapida{
    text-align: left;
  }
}
/* =========================
   PATCH — PDP: preço & qty
   ========================= */

/* --- 1) PREÇO: normaliza o peso dos <strong> e evita “estouro” --- */

/* Zera o negrito herdado só na área de preço */
.pagina-produto .preco-produto strong,
.pagina-produto .preco-parcela strong,
.pagina-produto .preco-promocional strong {
  font-weight: inherit !important;
}

/* Pix = destaque principal (mantém sua hierarquia) */
.pagina-produto .desconto-a-vista{
  order: -1;              /* sobe o Pix */
  margin: 0;
}
.pagina-produto .desconto-a-vista .titulo{
  display: inline-block;
  font-family: var(--anm-font-title);
  font-weight: 700;       /* só aqui fica “bold” */
  font-size: clamp(1.45rem, 1.05rem + 1.2vw, 1.95rem);
  color: var(--anm-brand);
  line-height: 1.05;
}

/* Preço cheio/à prazo: menor e SEM bold pesado */
.pagina-produto .preco-promocional{
  font-weight: 600;       /* médio, não “pretão” */
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
  color: var(--anm-text);
  line-height: 1.1;
}

/* Parcelamento enxuto */
.pagina-produto .preco-parcela{
  font-size: .95rem;
  color: var(--anm-text);
  font-weight: 500;
}

/* --- 2) QUANTIDADE: garante visibilidade dos botões + / – --- */

/* Caso o tema use ícones (ex.: .icon-plus / .icon-minus) */
.pagina-produto .qtde-adicionar-carrinho i[class*="icon-"]{
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--anm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--anm-brand);               /* antes sumia por falta de cor */
  font-size: 16px; line-height: 1;
}
.pagina-produto .qtde-adicionar-carrinho i[class*="icon-"]:hover{
  background: var(--anm-surface-alt);
}

/* Se o controle for nativo do input[type=number], garante os “spinners” */
.pagina-produto input[type=number]{
  -moz-appearance: textfield;   /* padrão limpo no Firefox */
}
.pagina-produto input[type=number]::-webkit-inner-spin-button,
.pagina-produto input[type=number]::-webkit-outer-spin-button{
  opacity: 1;                    /* mostra os botões no Chrome/Edge */
  height: auto;                  /* evita ficar achatado */
}

/* Campo numérico harmonizado (mantém seu grid anterior) */
.pagina-produto .qtde-adicionar-carrinho .qtde-carrinho{
  width: 70px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--anm-border);
  padding: 0 10px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  color: var(--anm-text);
}

/* --- 3) Container .comprar sem “faixa roxa” acidental --- */
.pagina-produto .acoes-produto .comprar{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}