:root{
    --cor-texto:#1e1e1e;
    --cor-borda:#1e1e1e;
    --cor-fundo:#ffffff;
    --cor-accent:#0d0d0d;
    --cor-accent-hover:#09caad;
    --radius:10px;
    --borda-produto: #0000004e;
  }
  *{
    box-sizing:border-box;
  }
  html{
    width: 100vw;
  }
  body{
    margin:0; 
    font-family:Arial, Helvetica, sans-serif; 
    color:var(--cor-texto);
    width: 100%;
    background:#fafafa;
  }
  a{color:inherit;}

#btn-carrinho{
  width: 50px;
  height: 50px;
  box-shadow: 0 0 1px 1px var(--cor-accent);
  border: none;
  transition: background-color 0.4s ease;
}
#btn-carrinho img{
  width: 100%;
}

.containerPaginacao{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: 150px;
}

.containerPaginacao a{
  padding: 8px 14px;
  text-decoration: none;
  box-shadow: 0 0 1px 1px;
  border-radius: 4px;
  margin: 10px;
}

#btn-filtro{
  width: 50px;
  height: 50px;
  box-shadow: 0 0 1px 1px var(--cor-accent);
  border: none;
  transition: background-color 0.4s ease;
}
#btn-filtro img{
  width: 100%;
}

  /* ---------- HEADER ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--cor-borda); background:#fff;
    position:sticky; top:0; z-index:20;
  }
  header .logo{
    width: 70px;
  }
  header .acoes{display:flex; align-items:center; gap:16px;}
  .btn-icone{
    background:none; border:1px solid var(--cor-borda); border-radius:var(--radius);
    padding:8px 14px; cursor:pointer; font-size:14px; font-weight:bold;
    position:relative; display:flex; align-items:center; gap:6px;
  }
  #badge-carrinho{
    position: absolute;
    right: -5px;
    top: -5px;
  }
  .badge{
    background:var(--cor-accent); color:#fff; border-radius:50%;
    min-width:20px; height:20px; display:none; align-items:center; justify-content:center;
    font-size:12px; padding:0 4px;
  }
  .btn-filtros-mobile{display:none;}

  /* ---------- LAYOUT ---------- */
  .container{
    display:flex; 
    gap:24px; 
    margin:24px auto; 
    padding:0 24px;
    align-items:flex-start;
    width: 100%;
  }

  /* ---------- FILTROS ---------- */
  aside.filtros{
    width: 300px; 
    border: none;
    box-shadow: 0 0 1px 1px var(--cor-accent);
    border-radius:var(--radius);
    padding:20px;
    background:#fff;
    position: sticky;
    top: 130px;
  }
  aside.filtros h3{margin-top:0; font-size:16px; letter-spacing:1px;}
  aside.filtros .grupo{
    margin-bottom:20px;
    overflow-y: auto;
    max-height: 200px;
  }
  aside.filtros label{
    display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; cursor:pointer;
  }
  aside.filtros input[type=checkbox]{width:16px; height:16px;}
  .btn-aplicar{
    width:100%; 
    padding:12px; 
    background: var(--cor-accent);
    color:#fff; border:none;
    border-radius:var(--radius); 
    font-weight:bold; 
    letter-spacing:1px; cursor:pointer;
    transition: opacity 0.4s ease;
  }
  .btn-aplicar:hover{opacity:.60;}

  /* ---------- PRODUTOS ---------- */
  main.produtos{
    flex:1; 
    display:grid; 
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:20px;
  }
  .card-produto{
    box-shadow: 0 0 1px 1px var(--borda-produto);
    border-radius:var(--radius); 
    background:#fff;
    display:flex; 
    flex-direction:column; 
    overflow:hidden;
  }
  .card-produto img{width:100%; aspect-ratio:1/1; object-fit:cover;}
  .card-produto .info{padding:14px; display:flex; flex-direction:column; gap:6px; flex:1;}
  .tag-genero{
    align-self:flex-start; font-size:11px; letter-spacing:.5px; padding:3px 8px;
    border:1px solid var(--cor-borda); border-radius:20px; text-transform:uppercase;
  }
  .card-produto .titulo{font-size:16px; font-weight:bold; margin:0;}
  .card-produto .descricao{font-size:13px; color:#666; margin:0; flex:1;}
  .card-produto .preco{font-size:17px; font-weight:bold; margin:4px 0;}
  .btn-adicionar{
    margin-top:auto; 
    padding:12px; 
    background:var(--cor-accent); 
    color:#fff; border:none;
    font-weight:bold; 
    letter-spacing:.5px; 
    cursor:pointer;
    border-radius: 4px;
    transition: background 0.4s ease;
  }
  .btn-adicionar:hover{background:var(--cor-accent-hover);}
  .sem-produtos{grid-column:1/-1; text-align:center; padding:60px 0; color:#777;}

  /* ---------- OVERLAY GENÉRICO ---------- */
  .overlay-fundo{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30;
  }
  .overlay-fundo.ativo{display:block;}

  /* ---------- MODAL ADICIONAR AO CARRINHO ---------- */
  #modal-overlay{
    display:none; position:fixed; inset:0; z-index:50; align-items:center; justify-content:center;
    background:rgba(0,0,0,.5); padding:16px;
  }
  #modal-overlay.ativo{display:flex;}
  .modal-caixa{
    background:#fff; border-radius:var(--radius); padding:24px; width:100%; max-width:360px;
    text-align:center;
  }
  .modal-caixa img{width:140px; height:140px; object-fit:cover; border-radius:var(--radius); margin-bottom:12px;}
  .modal-caixa h3{margin:6px 0;}
  .modal-caixa .preco-modal{font-weight:bold; opacity:.7; margin-bottom:16px;}
  .qtd-controle-modal{
    display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px;
  }
  .qtd-controle-modal button{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--cor-borda);
    background:#fff; font-size:18px; cursor:pointer;
  }
  .qtd-controle-modal span{font-size:20px; min-width:24px;}
  .modal-botoes{display:flex; gap:12px;}
  .modal-botoes button{
    flex:1; padding:12px; border-radius:var(--radius); border:1px solid var(--cor-borda);
    font-weight:bold; cursor:pointer;
  }
  .btn-cancelar{background:#fff;}
  .btn-confirmar{background:var(--cor-accent); color:#fff; border-color:var(--cor-accent);}

  /* ---------- CARRINHO (DRAWER) ---------- */
  #carrinho-drawer{
    position:fixed; top:0; right:-420px; width:400px; max-width:100%; height:100%;
    background:#fff; z-index:40; display:flex; flex-direction:column; transition:right .25s ease;
    border-left:1px solid var(--cor-borda);
  }
  #carrinho-drawer.ativo{right:0;}
  #carrinho-drawer .cabecalho-carrinho{
    padding:18px 20px; border-bottom:1px solid var(--cor-borda); display:flex;
    align-items:center; justify-content:space-between;
  }
  #carrinho-drawer .cabecalho-carrinho h2{margin:0; font-size:18px; letter-spacing:1px;}
  #carrinho-drawer .fechar-x{background:none; border:none; font-size:22px; cursor:pointer;}
  #lista-carrinho{flex:1; overflow-y:auto; padding:16px 20px;}
  .item-carrinho{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #eee;}
  .item-carrinho img{width:70px; height:70px; object-fit:cover; border-radius:8px;}
  .item-info{flex:1; display:flex; flex-direction:column; gap:4px;}
  .item-info span{font-size:13px; opacity:.6;}
  .qtd-controle{display:flex; align-items:center; gap:8px; margin-top:4px;}
  .qtd-controle button{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--cor-borda);
    background:#fff; cursor:pointer;
  }
  .btn-remover{border:none !important; background:none !important; font-size:15px;}
  .carrinho-vazio{text-align:center; color:#777; margin-top:40px;}
  .rodape-carrinho{border-top:1px solid var(--cor-borda); padding:18px 20px;}
  .linha-total{
    display:flex; justify-content:space-between; font-weight:bold; font-size:18px; margin-bottom:16px;
  }
  .rodape-carrinho button{
    width:100%; padding:14px; border-radius:var(--radius); border:none; font-weight:bold;
    letter-spacing:.5px; cursor:pointer; margin-bottom:10px;
  }
  .btn-whatsapp{background:var(--cor-accent); color:#fff;}
  .btn-whatsapp:hover{background:var(--cor-accent);}
  .btn-cancelar-carrinho{background:#fff; border:1px solid var(--cor-borda) !important;}

  /* ---------- MOBILE ---------- */
  @media (max-width:800px){
    .container{flex-direction:column;}
    aside.filtros{
      display:none; 
      width:100%;
      height: 100%;
      top: 130px;
      right: 10px;
      overflow-y: auto;
      left: 10px;
    }
    aside.filtros.ativo{
      display: block;
    }
    .btn-filtros-mobile{display:inline-flex;}
  }