/* ==========================================================================
   NERESCO — preço e estoque (js/loja.js)
   Arquivo separado do style.css de propósito: a Stella também edita o
   style.css de outra máquina, e assim este pacote não sobrescreve nada dela.
   Só usa as variáveis de cor já definidas no style.css.
   ========================================================================== */

/* ---------- card do catálogo ---------- */
.loja-card{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  margin-top:.7rem;padding-top:.7rem;border-top:1px dashed rgba(26,114,1,.18)
}
.loja-card .loja-valor{line-height:1.2}
.loja-card .loja-preco{font-size:1.05rem;font-weight:700;color:var(--verde)}
.loja-card .loja-preco-de{font-size:.8rem;color:#8a8a8a}
.loja-card .loja-estoque{font-size:.74rem;font-weight:500;color:#9a5a00}

/* ---------- página do produto ---------- */
.loja-produto{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;
  margin:1.2rem 0 .2rem
}
.loja-produto .loja-preco{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;color:var(--verde);letter-spacing:-.02em}
.loja-produto .loja-preco-de{font-size:1rem;color:#8a8a8a}
.loja-produto .loja-estoque{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:600;padding:.25rem .7rem;border-radius:999px
}
.loja-produto .loja-estoque::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.loja-produto.loja-tem   .loja-estoque{color:var(--verde);background:rgba(26,114,1,.09)}
.loja-produto.loja-pouco .loja-estoque{color:#b35c00;background:rgba(255,128,11,.12)}
.loja-produto.loja-sem   .loja-estoque{color:#7a7a7a;background:rgba(0,0,0,.06)}

/* ==========================================================================
   CARRINHO (js/carrinho.js)
   ========================================================================== */

/* ---------- ícone no cabeçalho ---------- */
.carrinho-btn{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.1);transition:background .3s var(--ease),transform .3s var(--ease)
}
.carrinho-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.carrinho-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.carrinho-qtd{
  position:absolute;top:-3px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--laranja);color:#fff;font-size:.7rem;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px var(--verde-esc)
}

/* ---------- seletor de quantidade ---------- */
.qtd{display:inline-flex;align-items:center;border:2px solid rgba(26,114,1,.25);border-radius:100px;background:#fff;overflow:hidden}
.qtd button{width:42px;height:44px;font-size:1.25rem;font-weight:600;color:var(--verde);transition:background .2s}
.qtd button:hover:not(:disabled){background:rgba(26,114,1,.08)}
.qtd button:disabled{color:#b9b9b9;cursor:not-allowed}
.qtd input{
  width:44px;height:44px;border:0;text-align:center;font:inherit;font-weight:600;color:var(--tinta);background:transparent;
  -moz-appearance:textfield;appearance:textfield
}
.qtd input::-webkit-outer-spin-button,.qtd input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtd.qtd-p button{width:34px;height:36px;font-size:1.1rem}
.qtd.qtd-p input{width:36px;height:36px;font-size:.9rem}

/* ---------- página do produto ---------- */
/* Os botões "Onde comprar" e "Ver o catálogo" são escondidos com o atributo
   hidden, mas .btn tem display:inline-flex e ganharia do hidden sem isto. */
#prodTopo [data-carrinho] > [hidden]{display:none!important}
.loja-comprar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;flex-basis:100%}
.loja-comprar .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.loja-aviso{flex-basis:100%;min-height:1.2em;margin:0;font-size:.85rem;color:var(--verde);font-weight:500}

/* ---------- painel ---------- */
html.carrinho-aberto{overflow:hidden}
.carrinho-fundo{position:fixed;inset:0;z-index:130;background:rgba(10,20,6,.45);opacity:0;transition:opacity .3s var(--ease)}
.carrinho-fundo.on{opacity:1}
.carrinho-painel{
  position:fixed;top:0;right:0;bottom:0;z-index:131;width:min(420px,100vw);
  display:flex;flex-direction:column;background:var(--creme);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .32s var(--ease-out)
}
.carrinho-painel.on{transform:none}
.carrinho-topo{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.08)}
.carrinho-topo h2{font-size:1.25rem;margin:0;color:var(--verde)}
.carrinho-fechar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--tinta)}
.carrinho-fechar:hover{background:rgba(0,0,0,.06)}

.carrinho-lista{flex:1;overflow-y:auto;padding:.4rem 1.25rem}
.carrinho-vazio{text-align:center;padding:3rem 0;color:var(--tinta-suave)}
.carrinho-vazio p{margin-bottom:1.2rem}

.carrinho-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.9rem;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.07)}
.carrinho-foto{width:76px;height:76px;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;overflow:hidden}
.carrinho-foto img{max-width:88%;max-height:88%;object-fit:contain}
.carrinho-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.carrinho-nome{font-weight:600;font-size:.92rem;line-height:1.3;color:var(--tinta)}
.carrinho-unit{font-size:.8rem;color:var(--tinta-suave)}
.carrinho-problema{font-size:.8rem;font-weight:600;color:#b3261e}
.carrinho-linha{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.35rem}
.carrinho-total{font-size:1rem;color:var(--verde)}
.carrinho-link{align-self:flex-start;padding:0;font-size:.78rem;font-weight:500;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:2px}
.carrinho-link:hover{color:var(--tinta)}
.carrinho-problema .carrinho-link{color:#b3261e}
.carrinho-item.com-problema .carrinho-foto{opacity:.55}

.carrinho-rodape:empty{display:none}
.carrinho-rodape{padding:1rem 1.25rem 1.25rem;border-top:1px solid rgba(0,0,0,.08);background:#fff;display:flex;flex-direction:column;gap:.55rem}
.carrinho-subtotal{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
.carrinho-subtotal b{font-size:1.35rem;color:var(--verde)}
.carrinho-nota{margin:0;font-size:.8rem;color:var(--tinta-suave)}
.carrinho-status{margin:0;font-size:.82rem;color:var(--tinta-suave)}
.carrinho-status:empty{display:none}
.carrinho-status.erro{color:#b3261e}
.carrinho-finalizar{width:100%;margin-top:.3rem}
.carrinho-finalizar:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .carrinho-painel,.carrinho-fundo{transition:none}
}

/* ---------- frete no carrinho ---------- */
.carrinho-rodape[hidden]{display:none}
.carrinho-frete{display:flex;flex-direction:column;gap:.4rem;padding:.2rem 0 .4rem;border-top:1px dashed rgba(0,0,0,.1);margin-top:.2rem;padding-top:.7rem}
.carrinho-frete[hidden]{display:none}
.carrinho-frete label[for]{font-size:.85rem;font-weight:600;color:var(--tinta)}
.frete-linha{display:flex;gap:.5rem}
.frete-linha input{
  flex:1;min-width:0;height:44px;padding:0 .9rem;border:2px solid rgba(26,114,1,.25);border-radius:100px;
  font:inherit;font-size:.95rem;color:var(--tinta);background:#fff
}
.frete-linha input:focus{outline:none;border-color:var(--verde)}
.frete-linha .btn{padding:.55rem 1.1rem;font-size:.88rem}
.frete-linha .btn:disabled{opacity:.55;cursor:wait;transform:none}
.frete-ajuda{font-size:.75rem}
.frete-opcoes{border:0;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:30vh;overflow-y:auto}
.frete-opcao{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border:1.5px solid rgba(0,0,0,.1);border-radius:var(--r-sm);cursor:pointer;background:#fff
}
.frete-opcao:has(input:checked){border-color:var(--verde);background:rgba(26,114,1,.05)}
.frete-opcao input{accent-color:var(--verde);width:18px;height:18px;margin:0}
.frete-nome{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.frete-nome b{font-size:.85rem;font-weight:600}
.frete-nome small{font-size:.75rem;color:var(--tinta-suave)}
.frete-preco{font-weight:700;font-size:.9rem;color:var(--verde);white-space:nowrap}
.frete-dica{margin:.45rem 0 0;font-size:.82rem;color:var(--verde)}
.carrinho-totalgeral{display:flex;flex-direction:column;gap:.15rem;padding-top:.5rem;border-top:1px solid rgba(0,0,0,.08)}
.carrinho-totalgeral[hidden]{display:none}
.carrinho-subtotal.total b{font-size:1.45rem}

/* ==========================================================================
   FINALIZAR COMPRA (finalizar.html + js/finalizar.js)
   ========================================================================== */
.checkout .migalhas{margin-bottom:.6rem}
.checkout-titulo{font-size:clamp(2rem,4vw,2.8rem);color:var(--verde);margin-bottom:1.4rem}
.checkout-aviso{max-width:640px;padding:2.5rem 0}
.checkout-aviso h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--verde);margin-bottom:.8rem}
.checkout-aviso .lead{margin-bottom:1.6rem}

.checkout-demo{
  margin-bottom:1.6rem;padding:.8rem 1.1rem;border-radius:var(--r-sm);
  background:#FFF4E5;border-left:4px solid var(--laranja);font-size:.9rem;color:#6b3d00
}

.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.checkout-grid > *{min-width:0}   /* regra do projeto: item de grid não estoura a coluna */

.checkout-form{display:flex;flex-direction:column;gap:1.4rem}
.checkout-passo{margin:0;padding:1.4rem clamp(1rem,2.5vw,1.8rem) 1.6rem;border:1px solid rgba(0,0,0,.08);border-radius:var(--r-md);background:#fff}
.checkout-passo legend{display:flex;align-items:center;gap:.6rem;padding:0 .4rem;font-size:1.15rem;font-weight:700;color:var(--tinta)}
.passo-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--verde);color:#fff;font-size:.9rem}

.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;margin-top:.6rem}
.campos > *{min-width:0}
.campo{display:flex;flex-direction:column;gap:.3rem}
.campo-inteiro{grid-column:1 / -1}
.campo label{font-size:.85rem;font-weight:600;color:var(--tinta)}
.campo input{
  height:48px;padding:0 .9rem;border:2px solid rgba(0,0,0,.12);border-radius:var(--r-sm);
  font:inherit;font-size:1rem;color:var(--tinta);background:#fff;transition:border-color .2s
}
.campo input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(26,114,1,.12)}
.campo input[aria-invalid="true"]{border-color:#b3261e}
.campo-ajuda{font-size:.75rem;color:var(--tinta-suave)}
.campo-ajuda a{color:var(--verde);text-decoration:underline}
.campo-erro{font-size:.78rem;font-weight:500;color:#b3261e;min-height:0}
.campo-erro:empty{display:none}

.checkout-frete{margin-top:1.1rem}

.pag-opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:.6rem}
.pag-opcao{
  display:flex;align-items:center;gap:.6rem;padding:.8rem .9rem;border:2px solid rgba(0,0,0,.1);
  border-radius:var(--r-sm);cursor:pointer;background:#fff;transition:border-color .2s,background .2s
}
.pag-opcao:has(input:checked){border-color:var(--verde);background:rgba(26,114,1,.05)}
.pag-opcao:has(input:focus-visible){outline:2px solid var(--verde);outline-offset:2px}
.pag-opcao input{position:absolute;opacity:0;pointer-events:none}
.pag-icone{color:var(--verde);display:grid;place-items:center;flex:none}
.pag-texto{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pag-texto b{font-size:.92rem}
.pag-texto small{font-size:.74rem;color:var(--tinta-suave)}
.pag-detalhe{margin-top:1rem;font-size:.92rem;color:var(--tinta-suave)}
.pag-detalhe p{margin:0 0 .6rem}
.pag-quadro{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:1.6rem 1rem 1rem;margin-bottom:.8rem;
  border:2px dashed rgba(0,0,0,.15);border-radius:var(--r-sm);background:repeating-linear-gradient(135deg,#fafafa 0 10px,#f4f4f4 10px 20px)
}
.pag-quadro-rotulo{position:absolute;top:.45rem;left:.9rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a}
.pag-falso{height:42px;display:flex;align-items:center;padding:0 .8rem;border:1.5px solid #ddd;border-radius:8px;background:#fff;color:#aaa;font-size:.85rem}
.pag-falso.largo{grid-column:1 / -1}
.pag-quadro.pix{grid-template-columns:1fr;justify-items:center}
.pix-qr{width:150px;height:150px;display:grid;place-items:center;border:1.5px solid #ddd;border-radius:8px;background:#fff;color:#aaa;font-size:.8rem}

.checkout-lgpd{font-size:.78rem;color:var(--tinta-suave);margin:0}
.checkout-lgpd a{color:var(--verde);text-decoration:underline}

.checkout-resumo{
  position:sticky;top:calc(74px + 1.2rem);padding:1.4rem;border-radius:var(--r-md);background:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem
}
.checkout-resumo h2{font-size:1.2rem;color:var(--verde);margin-bottom:.3rem}
.resumo-itens{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.7rem;max-height:40vh;overflow-y:auto}
.resumo-itens li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:.7rem}
.resumo-foto{position:relative;width:56px;height:56px;border-radius:10px;background:var(--areia);display:grid;place-items:center}
.resumo-foto img{max-width:86%;max-height:86%;object-fit:contain}
.resumo-qtd{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--tinta-suave);color:#fff;font-size:.7rem;font-weight:700;line-height:20px;text-align:center}
.resumo-nome{font-size:.85rem;font-weight:500;line-height:1.3}
.resumo-valor{font-size:.88rem;font-weight:600;white-space:nowrap}
.resumo-linha{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.resumo-linha span:last-child{text-align:right}
.resumo-total{padding-top:.6rem;border-top:1px solid rgba(0,0,0,.08);align-items:baseline}
.resumo-total b{font-size:1.5rem;color:var(--verde)}
.checkout-confirmar{width:100%;margin-top:.4rem}
.checkout-erro:empty{display:none}
.resumo-seguro{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:0;font-size:.76rem;color:var(--tinta-suave)}

.checkout-fim{max-width:640px;margin-inline:auto;text-align:center;padding:1rem 0 2rem}
.checkout-fim h2{font-size:clamp(1.8rem,3.5vw,2.4rem);color:var(--verde);margin:.8rem 0 .6rem}
.checkout-fim .lead{margin:0 auto 1.4rem}
.checkout-fim-ok{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--verde);color:#fff}
.checkout-fim-resumo{text-align:left;margin:1.4rem 0;padding:1.2rem 1.4rem;border-radius:var(--r-md);background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.5rem}

@media (max-width:980px){
  .checkout-grid{grid-template-columns:minmax(0,1fr)}
  .checkout-resumo{position:static}
}
@media (max-width:560px){
  .campos{grid-template-columns:minmax(0,1fr)}
  .campo-vazio{display:none}
  .pag-opcoes{grid-template-columns:minmax(0,1fr)}
}

/* ---------- pagamento de verdade (Mercado Pago) — 17/09/2026 ---------- */
.pag-brick{margin-top:.4rem;min-height:1px}
.pag-espera[hidden]{display:none}
.pag-erro:empty{display:none}
.pag-erro{margin:.2rem 0 .8rem}
.resumo-dica{margin:.4rem 0 0;padding:.8rem 1rem;border-radius:10px;background:var(--areia);font-size:.85rem;text-align:center}
.checkout-fim-ok.espera{background:var(--laranja)}
.pix-pagar{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:1.2rem auto;max-width:420px}
.pix-qr-img{width:220px;height:220px;padding:10px;border-radius:var(--r-md);background:#fff;border:1px solid rgba(0,0,0,.08)}
.pix-pagar .campo-ajuda{align-self:flex-start}
.copia-cola{width:100%;resize:none;padding:.7rem .8rem;border:1.5px solid #ddd;border-radius:8px;font:500 .8rem/1.4 ui-monospace,Menlo,monospace;word-break:break-all;background:#fff;color:var(--tinta)}
.pix-situacao{font-weight:600}

/* ---------------------------------------------------------------- kits (26/10/2026)
   Só a página dos kits (classe .kit, posta pelo produto.js quando o produto
   tem "fotos"); os outros produtos não mudam. Padrão de loja virtual:
   foto grande sem moldura, miniaturas em coluna à esquerda (no celular, em
   fileira embaixo), galeria parada enquanto o texto rola, texto mais leve. */
.prod-img img[src*="/produtos/kits/"]{border-radius:14px}

.prod-hero.kit{align-items:start}
.prod-foto.prod-galeria{background:none;padding:0;border-radius:0;display:flex;flex-direction:column;gap:.7rem}
.prod-galeria img{animation:none;filter:none;max-height:none}
.prod-galeria .galeria-grande{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px;
  background:var(--areia);border:1px solid rgba(19,26,15,.06);touch-action:pan-y}
.galeria-mini{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.galeria-mini::-webkit-scrollbar{display:none}
.galeria-mini button{flex:0 0 auto;width:60px;height:60px;padding:0;border:1px solid rgba(19,26,15,.12);border-radius:10px;
  overflow:hidden;background:var(--areia);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.galeria-mini button:hover{border-color:rgba(19,26,15,.35)}
.galeria-mini button[aria-current="true"]{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde)}
.galeria-mini img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:901px){
  .prod-foto.prod-galeria{display:grid;grid-template-columns:72px 1fr;gap:.8rem;align-items:start;
    position:sticky;top:calc(var(--header-h) + 1.5rem)}
  .prod-galeria .galeria-mini{grid-column:1;grid-row:1;flex-direction:column;overflow:visible}
  .prod-galeria .galeria-grande{grid-column:2;grid-row:1}
  .prod-foto.prod-galeria.uma-foto{grid-template-columns:1fr}
  .prod-galeria.uma-foto .galeria-grande{grid-column:1}
  .galeria-mini button{width:72px;height:72px}
}

/* Texto mais leve em TODAS as páginas de produto (pedido da Stella, 26/10/2026):
   título, abertura e descrição menores e mais próximos, no padrão de loja
   virtual. Fica aqui, e não no style.css, porque o loja.css carrega depois e
   só nas páginas da loja; as fotos dos outros produtos não mudam. */
.prod-hero .migalhas{margin-bottom:1rem}
.prod-hero .prod-linha{margin-bottom:.8rem}
.prod-hero h1{font-size:clamp(1.65rem,2.4vw,2.2rem);line-height:1.15;margin-bottom:.8rem}
.prod-hero .lead{font-size:1.02rem;line-height:1.55;color:var(--tinta)}
.prod-hero .prod-desc{font-size:.93rem;line-height:1.65;margin-top:.7rem}

.kit-itens{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid rgba(19,26,15,.1)}
.kit-itens h3{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 .8rem}
.kit-itens ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.4rem;font-size:.9rem;line-height:1.4}
.kit-itens li{position:relative;padding-left:.95rem;min-width:0;color:var(--tinta)}
.kit-itens li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--laranja)}
.kit-itens li span{color:var(--tinta-suave);font-size:.82rem;white-space:nowrap}
.kit-itens a{color:inherit;text-decoration:none}
.kit-itens a:hover{color:var(--verde);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){ .kit-itens ul{grid-template-columns:1fr} }