:root{
  --bg:#0e1a13;
  --panel:#122116;
  --card:#0f1913;
  --accent-green:#1b6a42;
  --accent-green-2:#133e2a;
  --accent-soft:#dff4e9;
  --muted:#b8d9cb;
  --text:#f5fbf6;
  --radius:16px;
  --container:1100px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  --easing: cubic-bezier(.2,.9,.2,1);
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-size:16px;line-height:1.45}
a{ color:inherit; text-decoration:none }
a:focus{ outline:3px solid rgba(27,106,66,0.12); outline-offset:3px; border-radius:6px; }

/* container */
.container{ max-width:var(--container); margin:0 auto; padding:28px 20px; }

/* header */
.site-header{
  position:sticky; top:0; z-index:120;
  background: linear-gradient(0deg, rgba(14,26,19,0.98), rgba(14,26,19,0.86));
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{
  width:78px; height:78px; object-fit:cover;
  border-radius:12px; background:transparent;
}
.brand-text{ font-weight:900; font-size:22px; color:var(--text); letter-spacing:0.6px; }

/* nav */
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{
  padding:10px 14px; border-radius:12px;
  font-weight:700; color:var(--muted);
  transition: background .18s var(--easing), color .14s var(--easing), transform .08s var(--easing);
}
.nav a:hover{ background: rgba(255,255,255,0.02); color:var(--text); transform:translateY(-2px) }

/* mobile toggle */
.menu-toggle{ display:none; background:transparent; border:0; color:var(--text); font-size:22px; cursor:pointer; padding:8px; }
.mobile-nav{
  display:none; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:0 16px; overflow:hidden;
}

/* hero */
.hero{ text-align:center; padding:72px 0 44px; }
.hero h1{ font-size:36px; color:var(--text); margin-bottom:12px; font-weight:800; }
.lead{ color:var(--muted); margin-bottom:18px; font-size:15px; }
.cta{
  display:inline-block; background:var(--accent-green); color:#edf9f1;
  padding:14px 26px; border-radius:999px; font-weight:800;
  box-shadow:0 10px 28px rgba(19,86,52,0.10)
}

/* grid / cards */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:22px;
  margin-top:22px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  padding:18px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  min-height:380px;
  border: 1px solid rgba(255,255,255,0.02);
  transition: transform .14s var(--easing), box-shadow .14s var(--easing);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(5,15,9,0.30);
}
.card img{
  width:100%; height:220px; object-fit:contain;
  border-radius:12px; background: transparent;
  box-shadow: 0 10px 26px rgba(6,18,11,0.20);
}
.card h3{
  font-size:18px; margin-top:12px;
  color:var(--text); font-weight:800; line-height:1.18;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:8px;
}

/* price info */
.card .price{
  margin-top:6px; font-weight:900;
  color:var(--accent-soft); font-size:15px
}
.card .meta { color:var(--muted); font-size:13px; margin-top:6px; }

/* actions */
.card .actions{
  margin-top:auto; display:flex; gap:10px;
  justify-content:center; align-items:center; padding-top:14px;
}

/* botões */
.buy-btn, .add-cart{
  min-width:130px; height:46px; border-radius:999px;
  border:0; cursor:pointer; font-weight:800;
  background:linear-gradient(180deg,var(--accent-green), var(--accent-green-2));
  color:#edf9f1;
  box-shadow:0 10px 26px rgba(19,86,52,0.10);
  display:inline-flex; justify-content:center; align-items:center;
  text-decoration:none; padding:0 14px;
  transition: transform .12s var(--easing), box-shadow .14s var(--easing);
}
.buy-btn:hover, .add-cart:hover{
  transform: translateY(-2px); box-shadow:0 16px 36px rgba(19,86,52,0.12);
}

/* layout loja */
.shop-page{
  display:grid; grid-template-columns:320px 1fr;
  gap:32px; padding-bottom:48px;
}

/* filtros */
.filters{ position:sticky; top:98px; align-self:start; }
.filter-section{ margin-bottom:22px; }
.filter-label{
  font-weight:900; margin-bottom:12px;
  color:var(--muted); font-size:15px; display:block;
}
/* notes */
.notes-dropdown{ width:100%; }
.notes-header{ margin-bottom:8px; }
.notes-search{
  width:100%; padding:12px 14px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.04);
  background:transparent; color:var(--text); font-size:14px;
}
.notes-panel{
  margin-top:12px; border-radius:12px; overflow:auto;
  max-height:520px; padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.03);
}
.notes-controls-top{
  display:flex; justify-content:flex-end;
  gap:10px; margin-bottom:10px; align-items:center;
}

/* categorias */
.note-category{ margin-bottom:12px; }
.cat-title{
  margin-bottom:8px; color:var(--muted);
  font-weight:800; font-size:14px;
}
.note-list{ display:flex; flex-direction:column; gap:8px; }
.note-row{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:10px;
  cursor:pointer; border-left:4px solid transparent;
  transition: background .12s var(--easing), transform .12s var(--easing);
  background: rgba(255,255,255,0.00);
}
.note-row:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.01); }
.note-row .label-text{ padding-left:8px; color:var(--muted); font-weight:700; font-size:14px; }
.note-row.checked .label-text{ color:var(--text) }
.note-row.checked{ border-left-color:var(--accent-green) }

/* ==== AJUSTE: notas com MENOS espaçamento (apenas na Loja) ==== */
body.page-loja .note-list{ gap:4px !important; }
body.page-loja .note-row{
  padding:6px 8px !important;
  gap:6px !important;
  font-size:13px !important;
  line-height:1.08 !important;
  border-left-width:3px !important;
}
body.page-loja .cat-title{
  margin-bottom:4px !important;
  font-size:13px !important;
}
body.page-loja .note-category{
  margin-bottom:6px !important;
}
body.page-loja .note-row .label-text{
  padding-left:6px !important;
  margin:0 !important;
}

/* product page */
.product-page .product-card{
  display:grid; grid-template-columns:360px 1fr;
  gap:36px; align-items:start; padding:48px 0;
}
.product-card .img-wrap img{
  width:100%; border-radius:14px; object-fit:contain;
  background:transparent; box-shadow:0 16px 46px rgba(6,18,11,0.14);
  height:420px;
}
.product-info h1{ font-size:26px; color:var(--text); margin-bottom:12px; font-weight:900; }
.product-info .price{ font-size:20px; color:var(--accent-soft); margin-bottom:16px; }

/* footer */
.footer-center{ display:flex; justify-content:center; padding:28px 0; }
.footer-social{ display:flex; gap:24px; color:var(--muted); }

/* floating whatsapp */
.floating-whatsapp{ display:none; }

/* responsive */
@media (max-width:1000px){
  .shop-page{ grid-template-columns: 1fr; gap:22px; padding-bottom:36px; }
  .product-page .product-card{ grid-template-columns:1fr; gap:18px; }
  .product-card .img-wrap img{ height:320px; }
  .header-inner{ padding:12px 0; }
  .brand-logo{ width:64px; height:64px; }
}

@media (max-width:720px){
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  .mobile-nav{
    display:block; max-height:0;
    transition:max-height .32s ease, opacity .28s;
    opacity:0; padding:0 16px;
  }
  .mobile-nav[aria-hidden="false"]{
    max-height:520px; opacity:1; padding:12px 16px;
  }
  .mobile-nav a{
    display:block; padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.02);
    color:var(--muted);
  }

  .grid{ gap:16px; }
  .card{ min-height:300px; padding:14px; }
  .card img{ height:200px }
  .buy-btn{ width:48%; height:48px; font-size:15px }
  .notes-panel{ max-height:360px; }
}

@media (max-width:420px){
  .container{ padding:12px; }
  .brand-text{ font-size:16px; }
  .hero h1{ font-size:20px; }
  .grid.products{ grid-template-columns: 1fr !important; gap:12px; }
  .card img{ height:160px }
  .product-card .img-wrap img{ height:260px; }
}

/* acessibilidade */
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Ocultar botão de “selecionar tudo” global */
#notesSelectAllGlobal { display: none !important; }
#notesClearAllGlobal{
  background: rgba(27,106,66,0.22);
  border: 1px solid rgba(199,243,221,0.12);
  color: var(--accent-soft);
  padding:10px 16px; border-radius:14px;
  font-weight:800; font-size:14px; cursor:pointer;
  transition: transform .12s var(--easing), box-shadow .14s var(--easing), background .12s var(--easing);
  backdrop-filter: blur(5px);
}
#notesClearAllGlobal:hover{
  transform: translateY(-2px);
  background: rgba(27,106,66,0.32);
  box-shadow: 0 10px 28px rgba(19,86,52,0.10);
}
#notesClearAllGlobal:active{ transform: translateY(0); }

/* botões menores no mobile */
@media (max-width: 720px){
  .buy-btn, .view-btn, .btn-ver, .btn-comprar{
    height: 38px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    width: auto !important;
    min-width: 110px !important;
  }
  .product-actions{
    display:flex; gap:10px;
    align-items:center; justify-content:space-between;
  }
}
/* ===== Mostrar notas apenas na página Loja =====
   — Em todas as outras páginas, ficam escondidas
*/
.notes-panel,
.notes-dropdown,
#notesPanel,
#notesCategories{
  display:none;
  visibility:hidden;
  height:0;
  max-height:0;
  overflow:hidden;
  pointer-events:none;
}

/* ===== Exibir Notas SOMENTE na Loja ===== */
body.page-loja .notes-panel,
body.page-loja .notes-dropdown,
body.page-loja #notesPanel,
body.page-loja #notesCategories{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
  position:relative !important;
  top:auto !important; left:auto !important;
  z-index:1 !important;
}

/* ===== Loja: imagens menores e cards mais leves ===== */
body.page-loja .card img{
  height:150px !important;
  object-fit:contain !important;
}
body.page-loja .card{
  min-height:260px !important;
  padding:12px !important;
}

/* ===== Loja: botões mais suaves e "girl" dentro do VERDE ===== */
body.page-loja .buy-btn,
body.page-loja .add-cart,
body.page-loja .view-btn{
  background:linear-gradient(180deg,#2a8a58,#185c37) !important; /* verde mais suave e feminino */
  box-shadow:0 10px 30px rgba(28,90,60,0.22) !important;
  color:#f3fff7 !important;
  border-radius:12px !important;
}

/* ===== Loja: categoria e notas mais GIRL (verde suave) ===== */
body.page-loja .cat-title{
  color:#cce8d7 !important; /* verde menta suave */
}
body.page-loja .note-row{
  background:rgba(255,255,255,0.015) !important;
}
body.page-loja .note-row.checked{
  border-left-color:#2a8a58 !important;
  background:rgba(42,138,88,0.08) !important;
}
body.page-loja .note-row .label-text{
  color:#cce8d7 !important;
}
body.page-loja .note-row.checked .label-text{
  color:#ffffff !important;
}

/* ===== Loja: compactação extra das notas (como você pediu) ===== */
body.page-loja .note-list{ gap:4px !important; }
body.page-loja .note-row{
  padding:6px 8px !important;
  gap:6px !important;
  font-size:13px !important;
  line-height:1.08 !important;
}
body.page-loja .note-category{
  margin-bottom:6px !important;
}
body.page-loja .cat-title{
  font-size:13px !important;
  margin-bottom:4px !important;
}

/* ===== Garantir que o botão flutuante e modal SAIAM ===== */
body.page-loja .floating-filter,
body.page-loja .notes-modal-backdrop,
body.page-loja .notes-modal{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== Evitar BUGS de sticky no mobile ===== */
@media (max-width:720px){
  body.page-loja [style*="position:sticky"],
  body.page-loja [style*="position:fixed"]{
    position:static !important;
  }

  body.page-loja .notes-panel,
  body.page-loja #notesCategories{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* ===== Guardrail para inline styles estranhos ===== */
@media (max-width:720px){
  body.page-loja [style]{
    min-height:auto !important;
    max-height:9999px !important;
  }
}
/* ===== Mostrar notas apenas na página Loja =====
   — Em todas as outras páginas, ficam escondidas
*/
.notes-panel,
.notes-dropdown,
#notesPanel,
#notesCategories{
  display:none;
  visibility:hidden;
  height:0;
  max-height:0;
  overflow:hidden;
  pointer-events:none;
}

/* ===== Exibir Notas SOMENTE na Loja ===== */
body.page-loja .notes-panel,
body.page-loja .notes-dropdown,
body.page-loja #notesPanel,
body.page-loja #notesCategories{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
  position:relative !important;
  top:auto !important; left:auto !important;
  z-index:1 !important;
}

/* ===== Loja: imagens menores e cards mais leves ===== */
body.page-loja .card img{
  height:150px !important;
  object-fit:contain !important;
}
body.page-loja .card{
  min-height:260px !important;
  padding:12px !important;
}

/* ===== Loja: botões mais suaves e "girl" dentro do VERDE ===== */
body.page-loja .buy-btn,
body.page-loja .add-cart,
body.page-loja .view-btn{
  background:linear-gradient(180deg,#2a8a58,#185c37) !important; /* verde mais suave e feminino */
  box-shadow:0 10px 30px rgba(28,90,60,0.22) !important;
  color:#f3fff7 !important;
  border-radius:12px !important;
}

/* ===== Loja: categoria e notas mais GIRL (verde suave) ===== */
body.page-loja .cat-title{
  color:#cce8d7 !important; /* verde menta suave */
}
body.page-loja .note-row{
  background:rgba(255,255,255,0.015) !important;
}
body.page-loja .note-row.checked{
  border-left-color:#2a8a58 !important;
  background:rgba(42,138,88,0.08) !important;
}
body.page-loja .note-row .label-text{
  color:#cce8d7 !important;
}
body.page-loja .note-row.checked .label-text{
  color:#ffffff !important;
}

/* ===== Loja: compactação extra das notas (como você pediu) ===== */
body.page-loja .note-list{ gap:4px !important; }
body.page-loja .note-row{
  padding:6px 8px !important;
  gap:6px !important;
  font-size:13px !important;
  line-height:1.08 !important;
}
body.page-loja .note-category{
  margin-bottom:6px !important;
}
body.page-loja .cat-title{
  font-size:13px !important;
  margin-bottom:4px !important;
}

/* ===== Garantir que o botão flutuante e modal SAIAM ===== */
body.page-loja .floating-filter,
body.page-loja .notes-modal-backdrop,
body.page-loja .notes-modal{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== Evitar BUGS de sticky no mobile ===== */
@media (max-width:720px){
  body.page-loja [style*="position:sticky"],
  body.page-loja [style*="position:fixed"]{
    position:static !important;
  }

  body.page-loja .notes-panel,
  body.page-loja #notesCategories{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* ===== Guardrail para inline styles estranhos ===== */
@media (max-width:720px){
  body.page-loja [style]{
    min-height:auto !important;
    max-height:9999px !important;
  }
}
/* ===== Mostrar notas apenas na página Loja =====
   — Em todas as outras páginas, ficam escondidas
*/
.notes-panel,
.notes-dropdown,
#notesPanel,
#notesCategories{
  display:none;
  visibility:hidden;
  height:0;
  max-height:0;
  overflow:hidden;
  pointer-events:none;
}

/* ===== Exibir Notas SOMENTE na Loja ===== */
body.page-loja .notes-panel,
body.page-loja .notes-dropdown,
body.page-loja #notesPanel,
body.page-loja #notesCategories{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
  position:relative !important;
  top:auto !important; left:auto !important;
  z-index:1 !important;
}

/* ===== Loja: imagens menores e cards mais leves ===== */
body.page-loja .card img{
  height:150px !important;
  object-fit:contain !important;
}
body.page-loja .card{
  min-height:260px !important;
  padding:12px !important;
}

/* ===== Loja: botões mais suaves e "girl" dentro do VERDE ===== */
body.page-loja .buy-btn,
body.page-loja .add-cart,
body.page-loja .view-btn{
  background:linear-gradient(180deg,#2a8a58,#185c37) !important; /* verde mais suave e feminino */
  box-shadow:0 10px 30px rgba(28,90,60,0.22) !important;
  color:#f3fff7 !important;
  border-radius:12px !important;
}

/* ===== Loja: categoria e notas mais GIRL (verde suave) ===== */
body.page-loja .cat-title{
  color:#cce8d7 !important; /* verde menta suave */
}
body.page-loja .note-row{
  background:rgba(255,255,255,0.015) !important;
}
body.page-loja .note-row.checked{
  border-left-color:#2a8a58 !important;
  background:rgba(42,138,88,0.08) !important;
}
body.page-loja .note-row .label-text{
  color:#cce8d7 !important;
}
body.page-loja .note-row.checked .label-text{
  color:#ffffff !important;
}

/* ===== Loja: compactação extra das notas (como você pediu) ===== */
body.page-loja .note-list{ gap:4px !important; }
body.page-loja .note-row{
  padding:6px 8px !important;
  gap:6px !important;
  font-size:13px !important;
  line-height:1.08 !important;
}
body.page-loja .note-category{
  margin-bottom:6px !important;
}
body.page-loja .cat-title{
  font-size:13px !important;
  margin-bottom:4px !important;
}

/* ===== Garantir que o botão flutuante e modal SAIAM ===== */
body.page-loja .floating-filter,
body.page-loja .notes-modal-backdrop,
body.page-loja .notes-modal{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== Evitar BUGS de sticky no mobile ===== */
@media (max-width:720px){
  body.page-loja [style*="position:sticky"],
  body.page-loja [style*="position:fixed"]{
    position:static !important;
  }

  body.page-loja .notes-panel,
  body.page-loja #notesCategories{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* ===== Guardrail para inline styles estranhos ===== */
@media (max-width:720px){
  body.page-loja [style]{
    min-height:auto !important;
    max-height:9999px !important;
  }
}
/* === ATIVAR barra de rolagem nas notas (somente na Loja) === */
body.page-loja .notes-panel,
body.page-loja #notesCategories{
  max-height: 300px !important;   /* altura controlada */
  overflow-y: auto !important;     /* ativa rolagem */
  overflow-x: hidden !important;
}

/* === Estilo chique da barra de rolagem === */
body.page-loja .notes-panel::-webkit-scrollbar,
body.page-loja #notesCategories::-webkit-scrollbar {
  width: 6px;
}

body.page-loja .notes-panel::-webkit-scrollbar-track,
body.page-loja #notesCategories::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}

body.page-loja .notes-panel::-webkit-scrollbar-thumb,
body.page-loja #notesCategories::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a8a58, #1d6a47);
  border-radius: 12px;
}

body.page-loja .notes-panel::-webkit-scrollbar-thumb:hover,
body.page-loja #notesCategories::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #38a56e, #247f57);
}