/* =========================================
   INVlCTUS — FUNDO PREMIUM + IA (HOME)
   ========================================= */

/* Fundo base (fica por trás de tudo) */
html{
  background:
    radial-gradient(1200px 800px at 85% 35%, rgba(235,120,0,0.12), transparent 58%),
    radial-gradient(900px 650px at 20% 10%, rgba(235,120,0,0.06), transparent 62%),
    radial-gradient(700px 520px at 15% 80%, rgba(0,0,0,0.04), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fff7ef 55%, #ffffff 100%);
}

/* IMPORTANTÍSSIMO: o body não pode “tapar” o fundo */
body{
  background: transparent !important;
}

/* =========================================
   CAMADA FIXA (IA + GLOW + PATTERN IG/Z)
   ========================================= */
#ig-bg-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* mantém atrás de tudo */
  transform: translate3d(0,0,0);
  will-change: transform;

  /* Camadas: glows + IA */
  background-image:
    radial-gradient(900px 700px at 85% 55%, rgba(235,120,0,0.18), transparent 60%),
    radial-gradient(700px 520px at 70% 82%, rgba(235,120,0,0.10), transparent 62%),
    url("https://i.imgur.com/SFugs8s.png");

  background-repeat: no-repeat, no-repeat, no-repeat;

  background-position:
    right 35% bottom 18%,
    right 15% bottom -10%,
    right bottom;

  background-size:
    auto,
    auto,
    min(78vw, 850px);

  /* peso do fundo */
  opacity: 0.115; /* 0.10 a 0.14 */

  /* “cinema” sem atrapalhar leitura */
  filter: saturate(1.06) contrast(1.06);
}

/* Mobile: encaixa melhor e mantém legibilidade */
@media (max-width: 768px){
  html{
    background:
      radial-gradient(900px 650px at 78% 28%, rgba(235,120,0,0.11), transparent 60%),
      radial-gradient(650px 520px at 20% 80%, rgba(0,0,0,0.04), transparent 65%),
      linear-gradient(180deg, #ffffff 0%, #fff7ef 60%, #ffffff 100%);
  }

  #ig-bg-layer{
    background-size:
      auto,
      auto,
      520px;

    background-position:
      right 40% bottom 22%,
      right 10% bottom -10%,
      right -90px bottom -30px;

    opacity: 0.10;
  }
}
/* =========================================
   TIRAR “BORDINHA BRANCA” (BOTÃO + WRAPPER)
   ========================================= */

/* 1) Zerando bordas/outline/sombra do botão */
.botao,
.botao.principal,
.botao-comprar,
.botao-adicionar,
.acao-comprar .botao,
a.botao,
button,
input[type="submit"],
input[type="button"]{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* 2) Garante que o botão é sólido (sem “halo” do fundo) */
.botao-adicionar,
.botao-comprar,
.acao-comprar .botao{
  background: #eb7800 !important;
}

/* 3) Remove molduras criadas por pseudo-elemento do tema */
.botao::before,
.botao::after,
.botao.principal::before,
.botao.principal::after,
.botao-adicionar::before,
.botao-adicionar::after,
.botao-comprar::before,
.botao-comprar::after{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4) O MAIS IMPORTANTE: wrapper do botão (onde geralmente fica a “borda branca”) */
.listagem-item,
.listagem-item .acoes-produto,
.listagem-item .acoes,
.listagem-item .produto-sobrepor,
.listagem-item .info-produto,
.listagem-item .produto-botoes,
.listagem-item .botoes-produto{
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* 5) Remove “ring” no focus/active (mobile) */
.botao:focus,
.botao:active,
.botao-adicionar:focus,
.botao-adicionar:active,
.botao-comprar:focus,
.botao-comprar:active,
button:focus,
button:active,
input:focus,
input:active{
  outline: none !important;
  box-shadow: none !important;
}

/* 6) Hover premium leve */
.botao:hover,
.botao.principal:hover,
.botao-adicionar:hover{
  filter: brightness(1.03) contrast(1.02);
}

/* ===========================
   CARDS - acabamento premium (Steam-like)
   Cole no FINAL do seu CSS
   =========================== */

/* Container do card */
.listagem-item,
.vitrine-produto .listagem-item,
.produto,
.listagem .listagem-item{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.7) inset !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

/* Hover bem sutil (sem “voar”) */
@media (hover:hover){
  .listagem-item:hover,
  .vitrine-produto .listagem-item:hover{
    box-shadow:
      0 10px 22px rgba(0,0,0,0.10),
      0 1px 0 rgba(255,255,255,0.75) inset !important;
    transform: translateY(-2px) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border-color: rgba(235,120,0,0.22) !important;
  }
}

/* Área da imagem do produto (deixa mais “encaixado”) */
.listagem-item .imagem-produto,
.listagem-item .imagem,
.listagem-item figure{
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(0,0,0,0.02)) !important;
  padding: 12px 12px 0 12px !important;
}

/* A própria imagem/capa com borda e raio */
.listagem-item img{
  border-radius: 12px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.10) !important;
}

/* Conteúdo (título/preço) com padding consistente */
.listagem-item .info-produto,
.listagem-item .nome-produto,
.listagem-item .preco-produto,
.listagem-item .descricao{
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Área dos botões (remove linhas do tema e dá “base”) */
.listagem-item .acoes-produto,
.listagem-item .acoes,
.listagem-item .produto-botoes,
.listagem-item .botoes-produto{
  background: rgba(255,255,255,0.70) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding: 12px 14px 14px 14px !important;
  box-shadow: none !important;
}

/* Botão laranja mais “premium” (sem borda branca) */
.listagem-item .botao,
.listagem-item .botao.principal,
.listagem-item .botao-adicionar{
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff8a00 0%, #eb7800 55%, #d96800 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  box-shadow: 0 10px 18px rgba(235,120,0,0.22) !important;
}

/* Hover do botão */
@media (hover:hover){
  .listagem-item .botao:hover,
  .listagem-item .botao.principal:hover,
  .listagem-item .botao-adicionar:hover{
    filter: brightness(1.03) contrast(1.02) !important;
    box-shadow: 0 12px 20px rgba(235,120,0,0.26) !important;
  }
}

/* Mobile: menos sombra pra não “flutuar” */
@media (max-width: 768px){
  .listagem-item,
  .vitrine-produto .listagem-item{
    box-shadow: 0 5px 14px rgba(0,0,0,0.07) !important;
  }
}

/* =========================================
   INVlCTUS — GRADIENT PREMIUM NOS CARDS
   (ADICIONADO - cole tudo e substitua seu CSS)
   ========================================= */

/* camada de gradiente suave dentro do card */
.listagem-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:16px;

  background:
    linear-gradient(
      0deg,
      rgba(235,120,0,0.06) 0%,
      rgba(235,120,0,0.03) 25%,
      rgba(255,255,255,0) 55%
    );

  opacity:.9;
}

/* garante que o card possa receber overlay */
.listagem-item{
  position:relative;
}

/* glow laranja inferior bem suave */
.listagem-item::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:60px;

  background:
    radial-gradient(
      60% 100% at 50% 100%,
      rgba(235,120,0,0.18),
      transparent 70%
    );

  opacity:.35;
  pointer-events:none;
}

/* =========================================
   HOVER MAIS PREMIUM (efeito Nuuvem)
   ========================================= */

@media (hover:hover){

  .listagem-item:hover{

    transform:translateY(-4px) scale(1.01) !important;

    border-color:rgba(235,120,0,0.32) !important;

    box-shadow:
      0 18px 40px rgba(0,0,0,0.14),
      0 8px 18px rgba(235,120,0,0.15),
      0 1px 0 rgba(255,255,255,0.8) inset !important;
  }

  /* aumenta glow no hover */
  .listagem-item:hover::after{
    opacity:.6;
  }

}

/* =========================================
   BANNER COM BASE ILUMINADA
   ========================================= */

.banner,
.banner-principal,
.slideshow,
.banner-home{
  border-radius:18px !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,0.14),
    0 10px 20px rgba(235,120,0,0.18);
  overflow:hidden;
  position:relative; /* garante ::after funcionar */
}

/* gradiente inferior no banner */
.banner::after,
.banner-principal::after,
.slideshow::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:90px;

  background:
    radial-gradient(
      70% 120% at 50% 100%,
      rgba(235,120,0,0.28),
      transparent 70%
    );

  opacity:.35;
  pointer-events:none;
}

/* =========================================
   CARDS LATERAIS DO BANNER (direita)
   ========================================= */

.banner .produto,
.banner .listagem-item{
  backdrop-filter: blur(6px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(255,255,255,0.88)
    ) !important;
  border:1px solid rgba(235,120,0,0.14) !important;
}

/* =========================================
   MICRO BRILHO NA IMAGEM DO PRODUTO
   ========================================= */

.listagem-item img{
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

@media (hover:hover){
  .listagem-item:hover img{
    transform:scale(1.06);
    filter: brightness(1.04) contrast(1.03);
    box-shadow:
      0 18px 36px rgba(0,0,0,0.16),
      0 8px 16px rgba(235,120,0,0.14);
  }
}

/* =========================================
   MOBILE — reduz intensidade
   ========================================= */

@media (max-width:768px){
  .listagem-item::after{
    opacity:.25;
  }
  .banner::after{
    opacity:.2;
  }
}

/* =========================================
   INVlCTUS — LUZ AMBIENTE GLOBAL (NEW)
   Deixa a página com “glow” suave tipo Nuuvem
   ========================================= */

/* luz ambiente geral: bem sutil, sem “pintar” o site de laranja */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;

  background:
    radial-gradient(1200px 900px at 50% 22%, rgba(235,120,0,0.07), transparent 60%),
    radial-gradient(900px 700px at 18% 55%, rgba(235,120,0,0.05), transparent 62%),
    radial-gradient(900px 700px at 82% 62%, rgba(235,120,0,0.05), transparent 62%),
    radial-gradient(1200px 900px at 50% 92%, rgba(0,0,0,0.04), transparent 60%);
  opacity: 1;
  filter: saturate(1.05);
}

/* “placa” por trás da vitrine: dá o efeito de página premium */
.container,
.conteiner,
#conteudo,
#main,
main,
#corpo{
  position: relative;
}

/* faixa suave atrás das vitrines (ajuda MUITO o efeito vitrine) */
#conteudo::before,
#main::before,
main::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  width: min(1180px, 92vw);
  height: 220px;
  border-radius: 28px;
  pointer-events:none;

  background:
    linear-gradient(180deg, rgba(235,120,0,0.045), rgba(255,255,255,0) 72%);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.06);

  opacity: 1;
}

/* =========================================
   INVlCTUS — PROFUNDIDADE VITRINE (NEW)
   base mais “encaixada” tipo Nuuvem / Steam
   ========================================= */

/* “plate shadow” discreto por trás do card */
.listagem-item{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.listagem-item{
  box-shadow:
    0 12px 26px rgba(0,0,0,0.10),
    0 6px 14px rgba(235,120,0,0.08),
    0 1px 0 rgba(255,255,255,0.75) inset !important;
}

/* base externa (como se o card encostasse no fundo) */
.listagem-item::after{
  /* mantém o seu glow, mas dá um pouco mais de “base” */
  height: 70px;
  opacity: .40;
}

/* hover mais “vitrine premium” sem exagerar */
@media (hover:hover){
  .listagem-item:hover{
    transform: translateY(-5px) scale(1.012) !important;
    box-shadow:
      0 26px 55px rgba(0,0,0,0.16),
      0 12px 26px rgba(235,120,0,0.14),
      0 1px 0 rgba(255,255,255,0.82) inset !important;
  }
}

/* Mobile: alivia o efeito pra ficar leve */
@media (max-width:768px){
  body::before{
    background:
      radial-gradient(900px 700px at 50% 18%, rgba(235,120,0,0.06), transparent 62%),
      radial-gradient(850px 650px at 50% 92%, rgba(0,0,0,0.035), transparent 62%);
  }

  #conteudo::before,
  #main::before,
  main::before{
    height: 170px;
    opacity: .9;
  }

  .listagem-item{
    box-shadow:
      0 10px 22px rgba(0,0,0,0.09),
      0 4px 10px rgba(235,120,0,0.06),
      0 1px 0 rgba(255,255,255,0.75) inset !important;
  }
}

/* =========================================
   INVlCTUS — AJUSTE FINO (menos "lavado", mais premium)
   Cole no FINAL do CSS
   ========================================= */

/* 1) Luz ambiente global: reduz intensidade e deixa mais "clean" */
body::before{
  /* se quiser mais forte: 0.9 / mais fraco: 0.7 */
  opacity: .78 !important;

  /* reduz o laranja e o “creme” geral */
  background:
    radial-gradient(1200px 900px at 50% 18%, rgba(235,120,0,0.045), transparent 62%),
    radial-gradient(900px 700px at 18% 55%, rgba(235,120,0,0.032), transparent 64%),
    radial-gradient(900px 700px at 82% 62%, rgba(235,120,0,0.032), transparent 64%),
    radial-gradient(1200px 900px at 50% 92%, rgba(0,0,0,0.032), transparent 62%) !important;

  filter: saturate(1.02) !important;
}

/* 2) “Placa” atrás da vitrine: diminui o branco que está clareando tudo */
#conteudo::before,
#main::before,
main::before{
  opacity: .65 !important;          /* antes tava bem forte */
  height: 170px !important;          /* menos área “lavada” */
  top: -12px !important;

  background:
    linear-gradient(180deg, rgba(235,120,0,0.028), rgba(255,255,255,0) 72%) !important;

  box-shadow:
    0 26px 70px rgba(0,0,0,0.05) !important;
}

/* 3) IA do fundo (marca d’água): um tiquinho mais sutil no desktop */
#ig-bg-layer{
  opacity: 0.095 !important;         /* estava 0.115 */
  filter: saturate(1.04) contrast(1.05) !important;
}

/* 4) Cards: dá um pouco mais de contraste “premium” sem pesar */
.listagem-item,
.vitrine-produto .listagem-item,
.produto,
.listagem .listagem-item{
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(0,0,0,0.075) !important;
}

/* 5) Imagem no hover: um pouco menos “estouro” e mais natural */
@media (hover:hover){
  .listagem-item:hover img{
    transform: scale(1.055) !important;  /* antes 1.06 */
    filter: brightness(1.03) contrast(1.02) !important;
  }
}

/* Mobile: mais limpo ainda (onde costuma “lavar” mais) */
@media (max-width:768px){
  body::before{
    opacity: .70 !important;
  }
  #ig-bg-layer{
    opacity: 0.085 !important;
  }
  #conteudo::before,
  #main::before,
  main::before{
    opacity: .55 !important;
    height: 150px !important;
  }
}

/* =========================================
   INVlCTUS — CARRINHO PREMIUM (MOBILE FIRST)
   Cole no FINAL do CSS
   ========================================= */

/* Fundo do carrinho: mais clean, glow laranja só de “luz ambiente” */
.pagina-sacola,
.pagina-carrinho,
.carrinho,
#carrinho,
.sacola,
body.carrinho{
  background: transparent !important;
}

.pagina-sacola::before,
.pagina-carrinho::before,
#carrinho::before,
.carrinho::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(900px 650px at 50% 18%, rgba(235,120,0,0.05), transparent 62%),
    radial-gradient(800px 600px at 12% 70%, rgba(235,120,0,0.03), transparent 66%),
    radial-gradient(800px 600px at 88% 70%, rgba(235,120,0,0.03), transparent 66%),
    radial-gradient(900px 650px at 50% 92%, rgba(0,0,0,0.03), transparent 64%);
  opacity: .9;
}

/* “Placa” central do carrinho (tira cara de página lavada) */
.pagina-sacola .conteiner,
.pagina-carrinho .conteiner,
#carrinho .conteiner,
.carrinho .conteiner,
.pagina-sacola .container,
.pagina-carrinho .container,
#carrinho .container{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.10),
    0 10px 22px rgba(235,120,0,0.08) !important;
  overflow: hidden;
}

/* Card do item no carrinho */
.pagina-sacola .item,
.pagina-carrinho .item,
.carrinho .item,
#carrinho .item,
.pagina-sacola .produto,
.pagina-carrinho .produto,
#carrinho .produto{
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 16px !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.08),
    0 6px 14px rgba(235,120,0,0.06),
    0 1px 0 rgba(255,255,255,0.8) inset !important;
  overflow: hidden !important;
  position: relative;
}

/* Glow inferior do card (bem sutil, premium) */
.pagina-sacola .item::after,
.pagina-carrinho .item::after,
.carrinho .item::after,
#carrinho .item::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:70px;
  pointer-events:none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(235,120,0,0.16), transparent 70%);
  opacity:.35;
}

/* Imagem do produto no carrinho */
.pagina-sacola img,
.pagina-carrinho img,
.carrinho img,
#carrinho img{
  border-radius: 12px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10) !important;
}

/* Título/infos com melhor leitura */
.pagina-sacola .nome,
.pagina-carrinho .nome,
.carrinho .nome,
#carrinho .nome,
.pagina-sacola h1,
.pagina-sacola h2,
.pagina-sacola h3{
  letter-spacing: .2px;
}

/* Quantidade (+ / -): vira controle premium */
.quantidade,
.qtd,
.carrinho-quantidade,
.pagina-sacola .quantidade{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.quantidade input,
.qtd input,
.carrinho-quantidade input{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
  height: 44px !important;
  width: 64px !important;
  font-weight: 800 !important;
}

/* botões + e - */
.quantidade button,
.qtd button,
.carrinho-quantidade button,
.quantidade .btn,
.qtd .btn{
  border: 0 !important;
  border-radius: 12px !important;
  height: 44px !important;
  width: 44px !important;
  background: rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.06) !important;
}

@media (hover:hover){
  .quantidade button:hover,
  .qtd button:hover,
  .carrinho-quantidade button:hover{
    background: rgba(235,120,0,0.10) !important;
    transform: translateY(-1px);
    transition: .18s ease;
  }
}

/* Preço: mais destaque */
.preco,
.valor,
.total,
.subtotal{
  font-weight: 900 !important;
}

/* CTA Finalizar compra (se o tema tiver botão padrão) */
.finalizar-compra .botao,
.botao-finalizar,
.botao.checkout,
a.botao.checkout,
a[href*="checkout"]{
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ff8a00 0%, #eb7800 55%, #d96800 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;
  box-shadow:
    0 16px 28px rgba(235,120,0,0.26),
    0 2px 0 rgba(255,255,255,0.12) inset !important;
}

@media (hover:hover){
  .finalizar-compra .botao:hover,
  .botao-finalizar:hover,
  .botao.checkout:hover,
  a[href*="checkout"]:hover{
    filter: brightness(1.03) contrast(1.02) !important;
    transform: translateY(-1px);
    transition: .18s ease;
  }
}