/* ============================================================
   REFINO — Camada de acabamento profissional (v86)
   Carregada POR ÚLTIMO: sobrepõe o visual sem editar os outros
   arquivos. Tudo deriva de --cor (cor da loja) — nada hardcodado.
   Referências: LojaZap (mobile/WhatsApp) + Nuvemshop (desktop).
   Onde gastamos ousadia: bloco de preço + acento das seções.
   O resto é quieto e disciplinado.
   ============================================================ */

:root{
  /* tons derivados da cor da loja (a JS injeta --cor e --cor-2) */
  --cor-soft:  color-mix(in srgb, var(--cor) 10%, #fff);
  --cor-soft2: color-mix(in srgb, var(--cor) 18%, #fff);
  --cor-ring:  color-mix(in srgb, var(--cor) 22%, transparent);
  /* neutros do sistema */
  --ink:#0f172a; --corpo:#334155; --mute:#64748b; --faint:#94a3b8;
  --linha:#eef1f5; --superf:#f6f7f9;
  /* sombras em camadas (dão profundidade sem pesar) */
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 14px -4px rgba(15,23,42,.12);
  --sh-3:0 14px 32px -10px rgba(15,23,42,.18);
}

/* ============================================================
   1. RITMO DA PÁGINA + HEADER
   ============================================================ */
header.sticky{
  border-bottom:1px solid var(--linha);
  box-shadow:0 1px 0 rgba(15,23,42,.03), 0 6px 18px -12px rgba(15,23,42,.14);
  backdrop-filter:saturate(1.05);
}
/* nome da loja no header um tico mais firme */
#head-nome{ letter-spacing:-.02em; }

/* ============================================================
   2. CABEÇALHO DAS SEÇÕES (home por categoria)
   Assinatura: tique vertical na cor da loja antes do título.
   Encoda "isto é uma seção" — estrutura como informação.
   ============================================================ */
.sec-cat{ margin-bottom:2.25rem; }
.sec-cat-topo{ margin-bottom:.95rem; }
.sec-cat-nome{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.18rem;
  letter-spacing:-.025em; color:var(--ink);
  position:relative; padding-left:.72rem; line-height:1.15;
}
.sec-cat-nome::before{
  content:''; position:absolute; left:0; top:.14em; bottom:.14em; width:4px;
  border-radius:9999px; background:var(--cor);
}
.sec-cat-ver{
  padding:.34rem .72rem; border-radius:9999px;
  font-size:.74rem; font-weight:700; letter-spacing:-.01em;
  background:var(--cor-soft); color:var(--cor);
  transition:background .16s, transform .16s;
}
.sec-cat-ver:hover{ background:var(--cor-soft2); transform:translateX(2px); }
@media (min-width:768px){ .sec-cat-nome{ font-size:1.3rem; } }

/* ============================================================
   3. CARD DE PRODUTO — a estrela
   Card branco, cantos generosos, sombra em camadas, foto com
   leve zoom no hover (desktop). Preço com hierarquia LojaZap.
   ============================================================ */
.produto-card{
  border:1px solid var(--linha);
  border-radius:1rem;
  box-shadow:var(--sh-1);
  transition:box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
.produto-card:hover{
  box-shadow:var(--sh-3);
  transform:translateY(-4px);
  border-color:#e4e9f0;
}
.produto-card .card-img-wrap, .produto-card > .relative:first-child{ overflow:hidden; }
.produto-card img{ transition:transform .45s cubic-bezier(.2,.6,.2,1); }
@media (min-width:768px){ .produto-card:hover img{ transform:scale(1.045); } }

.produto-card .card-body{ padding:.72rem .8rem .85rem; }
.produto-card .card-nome{
  font-size:.84rem; font-weight:600; color:#1e293b;
  letter-spacing:-.012em; line-height:1.3; min-height:2.18rem;
}

/* bloco de preço: De: (riscado) em cima, preço grande embaixo */
.card-preco{
  margin-top:auto; padding-top:.4rem;
  display:flex; flex-direction:column; gap:.05rem; line-height:1.05;
}
.card-de{
  font-size:.72rem; font-weight:600; color:#b45a5a;
  text-decoration:line-through; text-decoration-color:#d99;
}
.card-agora{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.06rem;
  letter-spacing:-.03em; color:var(--cor);
}
@media (min-width:640px){ .card-agora{ font-size:1.14rem; } }

/* badges um tico mais arredondadas e com sombrinha */
.produto-card .absolute.rounded{ border-radius:.4rem; box-shadow:0 2px 6px rgba(15,23,42,.16); }

/* ============================================================
   4. BOTÕES — mais premium (sombra na cor da loja, brilho no hover)
   ============================================================ */
.btn-primary{
  border-radius:.75rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 4px 12px -3px color-mix(in srgb, var(--cor) 42%, transparent);
  transition:transform .07s, box-shadow .18s, filter .18s;
}
.btn-primary:hover{
  opacity:1; filter:brightness(1.06);
  box-shadow:0 7px 18px -3px color-mix(in srgb, var(--cor) 52%, transparent);
}
.btn-primary:active{ transform:translateY(1px); }

/* botão colorido do carrinho (desktop) e "Adicionar à sacola" */
.cart-desk{ border-radius:.75rem !important; box-shadow:0 4px 12px -3px color-mix(in srgb, var(--cor) 42%, transparent); }
.cart-desk:hover{ filter:brightness(1.06); }

/* card "adicionado à sacola": botão principal com o mesmo acabamento */
.add-ok-btn.pri{ box-shadow:0 4px 12px -3px color-mix(in srgb, var(--cor) 45%, transparent); }

/* ============================================================
   5. BUSCA — foco com anel na cor da loja
   ============================================================ */
.busca-input:focus{
  border-color:var(--cor);
  box-shadow:0 0 0 3px var(--cor-ring);
}

/* ============================================================
   6. PÁGINA DO PRODUTO — rodapé/CTA com respiro e destaque
   ============================================================ */
.pp-share{ border-radius:.7rem; box-shadow:0 3px 10px -3px rgba(37,211,102,.5); }
.pp-share:hover{ opacity:1; filter:brightness(1.05); }
@media (min-width:768px){
  #mp-img-wrap{ border-radius:1rem; box-shadow:var(--sh-1); }
}
.pp-rel-titulo, .sec-cat-nome{ letter-spacing:-.025em; }
.pp-rel-titulo{
  position:relative; padding-left:.72rem; font-size:1.15rem; font-weight:800;
}
.pp-rel-titulo::before{
  content:''; position:absolute; left:0; top:.14em; bottom:.14em; width:4px;
  border-radius:9999px; background:var(--cor);
}

/* ============================================================
   7. SACOLA / CHECKOUT — títulos e cartão de resumo
   ============================================================ */
.sacola-titulo{ letter-spacing:-.02em; }
.sacola-secao-tit{ color:var(--faint); }
.entrega-opt{ border-radius:.75rem; }
.entrega-opt.sel{ box-shadow:0 0 0 1px var(--cor) inset; }

/* cartão de resumo (o "cupom" amarelo estilo LojaZap): sombra suave */
.resumo-card{ box-shadow:var(--sh-2); border-radius:1rem; }

/* totais: total final na cor da loja, forte */
.sacola-totais > div:last-child,
.resumo-card-total{ font-family:'Sora',sans-serif; letter-spacing:-.02em; }

/* ============================================================
   8. RODAPÉ — cabeçalhos de coluna como eyebrow discreto
   ============================================================ */
footer .foot-link{ font-weight:500; }
footer h4, footer .foot-col-tit{
  text-transform:uppercase; letter-spacing:.06em; font-size:.72rem;
  font-weight:700; color:var(--faint);
}

/* ============================================================
   9. CHIPS / FILTROS / PAGINAÇÃO — cantos e foco coerentes
   ============================================================ */
.filtro-chip{ font-weight:600; }
.pag-btn{ border-radius:.7rem; }

/* ============================================================
   10. FUNDO GERAL — superfície suave e cards brancos (Nuvemshop)
   já vem #f7f8fa no body; reforçamos respiro do container.
   ============================================================ */
@media (min-width:768px){
  main.max-w-6xl{ padding-top:1.5rem; padding-bottom:2.5rem; }
}

/* acessibilidade: foco de teclado visível e coerente */
a:focus-visible, button:focus-visible, .produto-card:focus-visible{
  outline:2px solid var(--cor); outline-offset:2px; border-radius:.4rem;
}