/* ===== Classic Jersey's | CSS PRO (Loja Integrada) - COMPLETO ===== */

/* ---------- Variáveis ---------- */
:root{
  --brand:#19d34f;
  --brand2:#0fbf42;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --card:#ffffff;
  --border:rgba(15,23,42,.12);
  --shadow:0 10px 25px rgba(2,6,23,.10);
  --shadow2:0 18px 45px rgba(2,6,23,.14);
  --radius:16px;
}

/* ---------- Base ---------- */
html, body{
  background:var(--bg);
  color:var(--text);
  width:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.container, .conteiner, .pagina, .wrapper, .conteudo{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

a{ transition:opacity .12s ease; }
a:hover{ opacity:.92; }
.cor-principal, a, .menu a:hover{ color:var(--brand); }

/* Cabeçalho/menu */
header, .cabecalho, .menu{
  border-bottom:1px solid rgba(0,0,0,.06);
}
.menu a{
  font-weight:800;
  letter-spacing:.2px;
}

/* ---------- HOME / LISTAGEM (cards + vitrine premium) ---------- */
.listagem-item,
.listagem .listagem-item,
.produto,
.vitrine-produtos .produto{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.listagem-item:hover,
.listagem .listagem-item:hover,
.produto:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(25,211,79,.35);
}

.listagem-item img,
.produto img,
.imagem-produto img{
  width:100%;
  height:auto;
  object-fit:cover;
  transition:transform .22s ease;
}
.listagem-item:hover img,
.produto:hover img{
  transform:scale(1.03);
}

.nome-produto,
.listagem-item .nome-produto,
.produto .nome-produto{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.2;
  margin-top:8px;
}

.preco-produto,
.produto .preco-produto,
.listagem-item .preco-produto{
  font-weight:900;
}

.preco-produto .preco-de,
.preco-produto .preco-promocional{
  color:var(--muted);
  opacity:.92;
}

/* Selos (ex: -25%) */
.selo-desconto,
.selo-promocao,
.tag-promocao,
.selo{
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 10px 25px rgba(2,6,23,.18);
}

/* Botões padrão */
.botao,
.btn,
button,
input[type="submit"],
input[type="button"]{
  border-radius:14px;
  font-weight:900;
  letter-spacing:.2px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.botao.principal,
.btn-principal,
button.principal,
input[type="submit"]{
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  border:0;
  box-shadow:0 10px 25px rgba(25,211,79,.22);
  color:#fff;
}

.botao:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* Campos */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:none;
  padding:12px 14px;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:rgba(25,211,79,.55);
  box-shadow:0 0 0 4px rgba(25,211,79,.15);
}

/* Rodapé */
footer, .rodape{
  border-top:1px solid rgba(0,0,0,.06);
}

/* ---------- FIX HOME (banner e caixa branca grande) ---------- */
.banner, .banners, .banner-principal, .slider, .flexslider, .slide, .slides{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}
.banner img, .banners img, .banner-principal img, .slider img, .flexslider img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* remove “caixa branca gigante” se o tema usar containers internos */
.secao, .secao-banners, .secao-produtos, .vitrine, .listagem{
  background:transparent;
  box-shadow:none;
}
.secao .conteiner,
.vitrine .conteiner,
.listagem .conteiner{
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

/* ---------- PRODUTO (MOBILE) ---------- */
@media (max-width: 768px){

  .pagina-produto .conteudo,
  .pagina-produto .conteiner,
  .pagina-produto .container{
    padding-left:14px;
    padding-right:14px;
  }

  .pagina-produto .principal,
  .pagina-produto .produto,
  .pagina-produto .produto-info,
  .pagina-produto .info-produto{
    background:#fff;
    border:1px solid rgba(15,23,42,.14);
    border-radius:20px;
    box-shadow:0 14px 35px rgba(2,6,23,.10);
    padding:16px;
  }

  .pagina-produto .breadcrumbs,
  .pagina-produto .bread-crumb{
    font-size:12px;
    color:var(--muted);
  }

  .pagina-produto h1,
  .pagina-produto .nome-produto{
    font-weight:900;
    letter-spacing:-.2px;
    line-height:1.15;
    margin:8px 0 10px;
  }

  .pagina-produto .codigo-produto,
  .pagina-produto .codigo{
    color:var(--muted);
    font-size:12px;
  }

  .pagina-produto .preco-produto,
  .pagina-produto .preco{
    font-weight:900;
    font-size:22px;
  }

  /* Variações (PP/P/M/G...) */
  .pagina-produto .atributos a,
  .pagina-produto .variacoes a,
  .pagina-produto .grade a,
  .pagina-produto .grade-variacao a,
  .pagina-produto .atributos button,
  .pagina-produto .variacoes button{
    border:1px solid rgba(15,23,42,.16);
    border-radius:12px;
    padding:10px 12px;
    min-width:44px;
    font-weight:900;
    background:#fff;
    color:var(--text);
    margin:6px 6px 0 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .12s ease;
  }

  .pagina-produto .atributos .active,
  .pagina-produto .variacoes .active,
  .pagina-produto .selecionado,
  .pagina-produto .selected{
    background:linear-gradient(180deg, var(--brand), var(--brand2));
    color:#fff;
    border-color:transparent;
  }

  /* Botão comprar */
  .pagina-produto .botao-comprar,
  .pagina-produto .comprar,
  .pagina-produto .botao.principal{
    width:100%;
    border-radius:16px;
    padding:14px 16px;
    font-weight:900;
    background:linear-gradient(180deg, var(--brand), var(--brand2));
    border:0;
    color:#fff;
    box-shadow:0 14px 30px rgba(25,211,79,.22);
  }

  /* Frete */
  .pagina-produto input[name="cep"],
  .pagina-produto input[placeholder*="CEP"],
  .pagina-produto .calcular-frete input,
  .pagina-produto .frete input{
    width:100%;
  }

  .pagina-produto .calcular-frete button,
  .pagina-produto .frete button,
  .pagina-produto .cep button{
    border-radius:14px;
    padding:12px 14px;
    font-weight:900;
    background:#0f172a;
    color:#fff;
    border:0;
  }

  /* Parcelas (card) */
  .pagina-produto .parcelas,
  .pagina-produto .tabela-parcelas,
  .pagina-produto .formas-pagamento,
  .pagina-produto .pagamento{
    border:1px solid rgba(15,23,42,.14);
    border-radius:18px;
    padding:12px;
    margin-top:14px;
    background:#fff;
  }
  .pagina-produto .parcelas table,
  .pagina-produto .tabela-parcelas table{
    width:100%;
    font-size:12px;
  }
  .pagina-produto .parcelas td,
  .pagina-produto .tabela-parcelas td{
    padding:6px 4px;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
}

/* ---------- PRODUTO (PC) + FIX BOTÃO “LAVADO” + FRETE ALINHADO + PARCELAS COM SCROLL ---------- */
@media (min-width: 992px){

  .pagina-produto .conteudo,
  .pagina-produto .conteiner,
  .pagina-produto .container{
    max-width:1200px;
    padding-left:18px;
    padding-right:18px;
  }

  .pagina-produto h1,
  .pagina-produto .nome-produto{
    font-weight:900;
    letter-spacing:-.3px;
    line-height:1.1;
    font-size:28px;
    margin:8px 0 10px;
  }

  .pagina-produto .preco-produto,
  .pagina-produto .preco{
    font-weight:950;
    font-size:30px;
    letter-spacing:-.2px;
  }

  /* Botão comprar (corrige invisível) */
  .pagina-produto .botao-comprar,
  .pagina-produto .comprar,
  .pagina-produto .botao.principal{
    width:100%;
    border-radius:18px;
    padding:15px 18px;
    font-weight:950;
    letter-spacing:.2px;
    background:linear-gradient(180deg, var(--brand), var(--brand2));
    border:0;
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.18);
    opacity:1;
    filter:none;
    box-shadow:0 16px 34px rgba(25,211,79,.22);
  }
  .pagina-produto .botao-comprar::before,
  .pagina-produto .comprar::before,
  .pagina-produto .botao.principal::before,
  .pagina-produto .botao-comprar::after,
  .pagina-produto .comprar::after,
  .pagina-produto .botao.principal::after{
    content:none;
    display:none;
  }
  .pagina-produto .botao-comprar span,
  .pagina-produto .comprar span,
  .pagina-produto .botao.principal span{
    color:#fff;
    opacity:1;
  }

  /* Frete alinhado (CEP + OK em linha) */
  .pagina-produto .calcular-frete form,
  .pagina-produto .frete form{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .pagina-produto input[name="cep"],
  .pagina-produto input[placeholder*="CEP"],
  .pagina-produto .calcular-frete input,
  .pagina-produto .frete input{
    flex:1;
    min-width:220px;
  }
  .pagina-produto .calcular-frete button,
  .pagina-produto .frete button,
  .pagina-produto .cep button{
    min-width:64px;
    white-space:nowrap;
  }

  /* Parcelas com scroll (limpa a tela) */
  .pagina-produto .parcelas,
  .pagina-produto .tabela-parcelas{
    max-height:220px;
    overflow:auto;
  }
  .pagina-produto .parcelas table,
  .pagina-produto .tabela-parcelas table{
    font-size:13px;
  }
  .pagina-produto .parcelas td,
  .pagina-produto .tabela-parcelas td{
    padding:7px 6px;
  }
}

/* ---------- FIX iPhone Safari: “camada branca invisível” ---------- */
@supports (-webkit-touch-callout: none) {
  html, body{
    height:auto;
    min-height:100svh;
    background:#fff;
    overflow-x:hidden;
  }
  body{
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Backdrops/overlays que ficam invisíveis */
  .modal-backdrop:not(.show),
  .overlay:not(.show),
  .fundo-modal:not(.show),
  .mask:not(.show),
  .lightbox:not(.show),
  .popup:not(.show){
    display:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .modal-backdrop[style*="opacity: 0"],
  .overlay[style*="opacity: 0"],
  .fundo-modal[style*="opacity: 0"],
  .mask[style*="opacity: 0"]{
    display:none;
    visibility:hidden;
    pointer-events:none;
  }
}

/* ---------- Mobile geral ---------- */
@media (max-width:768px){
  .container, .conteiner, .pagina, .wrapper, .conteudo{
    padding-left:12px;
    padding-right:12px;
  }
  .nome-produto{ font-size:14px; }
}/* ===== FIX: Banner desalinhado na página do produto (PC) ===== */
@media (min-width: 992px){

  /* Centraliza e ajusta banners dentro do conteúdo */
  .pagina-produto .banner,
  .pagina-produto .banners,
  .pagina-produto .banner-principal,
  .pagina-produto .slider,
  .pagina-produto .flexslider{
    width: 100% !important;
    max-width: 1200px !important;
    margin: 12px auto 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Garante que a imagem do banner preencha sem ficar “torta” */
  .pagina-produto .banner img,
  .pagina-produto .banners img,
  .pagina-produto .banner-principal img,
  .pagina-produto .slider img,
  .pagina-produto .flexslider img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}

/* ===== FIX: Pix/Boleto embaçados (ícones de pagamento) ===== */

/* Remove qualquer zoom/transform (causa blur) dos ícones */
.pagina-produto .formas-pagamento img,
.pagina-produto .pagamento img,
.pagina-produto .parcelas img,
.pagina-produto .tabela-parcelas img,
.pagina-produto img[src*="pix"],
.pagina-produto img[src*="boleto"]{
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  image-rendering: auto !important;
}

/* Evita que algum CSS global aplique “scale” nas imagens dessa área */
.pagina-produto .formas-pagamento,
.pagina-produto .pagamento,
.pagina-produto .parcelas,
.pagina-produto .tabela-parcelas{
  transform: none !important;
  filter: none !important;
}

/* Ajuste extra para o Chrome/Safari renderizar mais nítido */
.pagina-produto .formas-pagamento img,
.pagina-produto .pagamento img{
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}/* ===== FIX 1: Banner “desregulado” na página do produto ===== */
.pagina-produto .banner,
.pagina-produto .banners,
.pagina-produto .banner-principal,
.pagina-produto .slider,
.pagina-produto .flexslider{
  width: 100% !important;
  max-width: 1200px !important;   /* fica premium no desktop */
  margin: 12px auto 0 auto !important;
  padding: 0 !important;
  display: block !important;
}

/* força o banner a preencher e não ficar “torto” */
.pagina-produto .banner img,
.pagina-produto .banners img,
.pagina-produto .banner-principal img,
.pagina-produto .slider img,
.pagina-produto .flexslider img,
/* caso o tema use a imagem do banner “FULL” direto */
.pagina-produto img[src*="/banner/"],
.pagina-produto img[src*="design-sem-nome-74"]{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ===== FIX 2: Pix/Boleto embaçados (remove blur por escala/transform) ===== */
.pagina-produto .formas-pagamento,
.pagina-produto .pagamento,
.pagina-produto .parcelas,
.pagina-produto .tabela-parcelas{
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* garante nitidez dos ícones (principalmente Pix/Boleto) */
.pagina-produto .formas-pagamento img,
.pagina-produto .pagamento img,
.pagina-produto .parcelas img,
.pagina-produto .tabela-parcelas img,
.pagina-produto img[src*="pix"],
.pagina-produto img[alt*="Pix"],
.pagina-produto img[src*="boleto"],
.pagina-produto img[alt*="Boleto"]{
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  display: inline-block !important;
  height: 18px !important;     /* número inteiro evita blur */
  width: auto !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  backface-visibility: hidden !important;
  -webkit-transform: translateZ(0) !important;
}

/* ===== EXTRA (recomendado): limita a área de parcelas para não “poluir” ===== */
@media (min-width: 992px){
  .pagina-produto .parcelas,
  .pagina-produto .tabela-parcelas{
    max-height: 220px !important;
    overflow: auto !important;
  }
}<!-- ===== FIX: Ícones Pix/Boleto em SVG (pequenos e discretos) ===== -->
<style>
  /* Tamanho discreto e alinhamento */
  .cj-payicon{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:18px;
    margin-right:10px;
    vertical-align:middle;
  }
  .cj-payicon svg{
    height:18px;
    width:auto;
    display:block;
  }

  /* Esconde os ícones borrados originais (somente Pix/Boleto) */
  img[src*="pix"], img[alt*="Pix"],
  img[src*="boleto"], img[alt*="Boleto"]{
    display:none !important;
  }
</style>

<script>
(function(){
  // SVGs pequenos e limpos (discretos)
  const svgPix = `
    <span class="cj-payicon" aria-label="Pix" title="Pix">
      <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
        <path d="M32 6c7 0 10 4 14 8l4 4c3 3 7 7 7 14s-4 11-7 14l-4 4c-4 4-7 8-14 8s-10-4-14-8l-4-4c-3-3-7-7-7-14s4-11 7-14l4-4c4-4 7-8 14-8z" fill="none" stroke="currentColor" stroke-width="4" />
        <path d="M21 31l8-8c2-2 4-2 6 0l8 8c2 2 2 4 0 6l-8 8c-2 2-4 2-6 0l-8-8c-2-2-2-4 0-6z" fill="currentColor"/>
      </svg>
    </span>
  `;

  const svgBoleto = `
    <span class="cj-payicon" aria-label="Boleto" title="Boleto">
      <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
        <rect x="10" y="12" width="44" height="40" rx="6" fill="none" stroke="currentColor" stroke-width="4"/>
        <path d="M18 22h28M18 30h28M18 38h28" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
        <path d="M22 18v28M28 18v28M34 18v28M40 18v28M46 18v28" stroke="currentColor" stroke-width="2" opacity=".65"/>
      </svg>
    </span>
  `;

  // Define cor discreta (mesma vibe do site)
  const color = "#0f172a"; // preto/azul escuro premium
  const pixHTML = svgPix.replaceAll('currentColor', color);
  const bolHTML = svgBoleto.replaceAll('currentColor', color);

  // Procura o bloco de pagamento/parcelas e injeta os SVGs no lugar
  const containers = document.querySelectorAll(
    '.formas-pagamento, .pagamento, .parcelas, .tabela-parcelas'
  );

  containers.forEach(box=>{
    // Se já inserimos, não repete
    if (box.querySelector('.cj-payicon')) return;

    // Detecta se existem imagens de pix/boleto ali
    const hasPix = box.querySelector('img[src*="pix"], img[alt*="Pix"]');
    const hasBol = box.querySelector('img[src*="boleto"], img[alt*="Boleto"]');

    // Local para inserir: começo do bloco
    if (hasPix) box.insertAdjacentHTML('afterbegin', pixHTML);
    if (hasBol) box.insertAdjacentHTML('afterbegin', bolHTML);
  });
})();
</script><!-- ===== FIX DEFINITIVO: Pix/Boleto nítidos (SVG) em qualquer página, inclusive checkout ===== -->
<style>
  .cj-payicon{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:16px;               /* pequeno e discreto */
    margin-right:8px;
    vertical-align:middle;
  }
  .cj-payicon svg{
    height:16px;
    width:auto;
    display:block;
  }
</style>

<script>
(function(){
  const COLOR = "#0f172a"; // discreto/premium

  const svgPix = `
    <span class="cj-payicon" aria-label="Pix" title="Pix">
      <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
        <path d="M32 6c7 0 10 4 14 8l4 4c3 3 7 7 7 14s-4 11-7 14l-4 4c-4 4-7 8-14 8s-10-4-14-8l-4-4c-3-3-7-7-7-14s4-11 7-14l4-4c4-4 7-8 14-8z"
          fill="none" stroke="${COLOR}" stroke-width="4" />
        <path d="M21 31l8-8c2-2 4-2 6 0l8 8c2 2 2 4 0 6l-8 8c-2 2-4 2-6 0l-8-8c-2-2-2-4 0-6z"
          fill="${COLOR}"/>
      </svg>
    </span>
  `;

  const svgBoleto = `
    <span class="cj-payicon" aria-label="Boleto" title="Boleto">
      <svg viewBox="0 0 64 64" role="img" aria-hidden="true">
        <rect x="10" y="12" width="44" height="40" rx="6"
          fill="none" stroke="${COLOR}" stroke-width="4"/>
        <path d="M18 22h28M18 30h28M18 38h28"
          stroke="${COLOR}" stroke-width="4" stroke-linecap="round"/>
        <path d="M22 18v28M28 18v28M34 18v28M40 18v28M46 18v28"
          stroke="${COLOR}" stroke-width="2" opacity=".65"/>
      </svg>
    </span>
  `;

  function isPix(img){
    const s = (img.getAttribute("src") || "").toLowerCase();
    const a = (img.getAttribute("alt") || "").toLowerCase();
    return s.includes("pix") || a.includes("pix");
  }
  function isBoleto(img){
    const s = (img.getAttribute("src") || "").toLowerCase();
    const a = (img.getAttribute("alt") || "").toLowerCase();
    return s.includes("boleto") || a.includes("boleto");
  }

  function replaceIcons(root){
    const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
    imgs.forEach(img=>{
      // evita duplicar
      if (img.dataset.cjReplaced === "1") return;

      if (isPix(img)){
        img.insertAdjacentHTML("beforebegin", svgPix);
        img.style.display = "none";
        img.dataset.cjReplaced = "1";
      }

      if (isBoleto(img)){
        img.insertAdjacentHTML("beforebegin", svgBoleto);
        img.style.display = "none";
        img.dataset.cjReplaced = "1";
      }
    });
  }

  // roda agora
  replaceIcons(document);

  // e continua rodando se o checkout carregar blocos depois
  const obs = new MutationObserver((mutations)=>{
    for (const m of mutations){
      m.addedNodes && m.addedNodes.forEach(node=>{
        if (node && node.nodeType === 1){
          replaceIcons(node);
        }
      });
    }
  });
  obs.observe(document.documentElement, { childList:true, subtree:true });
})();
</script>
<!-- ===== /FIX ===== -->