/* ===== Patch global de contraste, navegação e responsivo ===== */

/* Tema claro x escuro – só reforço de contraste (mantém seus roxos) */
html:not([data-theme="dark"]) {
  --page-bg: #ffffff;
  --page-text: #0f172a;
  --page-muted:#475569;
  --panel-bg:#ffffff;
  --panel-bd:#e5e7eb;
  --link:#6a0dad;
  --link-hover-bg: rgba(106,13,173,.10);
}
html[data-theme="dark"] {
  --page-bg:#0b0f18;
  --page-text:#e6ebf5;
  --page-muted:#9fb0d1;
  --panel-bg:#111827;
  --panel-bd:#1f2937;
  --link:#b58df0;
  --link-hover-bg: rgba(181,141,240,.15);
}

/* Base */
html,body{background:var(--page-bg); color:var(--page-text);}
.muted,.tiny{color:var(--page-muted) !important;}
.card, .orders-table, .tabela-carrinho, .dropdown-menu{
  background:var(--panel-bg); border:1px solid var(--panel-bd); color:var(--page-text);
}
a{ color:var(--link); }
a:hover{ background:var(--link-hover-bg); border-radius:6px; text-decoration: none; }

/* ===== Navegação: nunca sublinhar em menus/drawer/botões ===== */
.site-header a,
.menu-principal a,
.menu-topo a,
.drawer a,
a.btn, .btn, .btn-outline, .btn-pill { text-decoration:none !important; }

/* ===== Dropdown categorias legível nos dois temas ===== */
.menu-principal .dropdown.categorias{ position:relative; }
.menu-principal .dropdown.categorias .cat-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:0; cursor:pointer; background:transparent;
  font-weight:400; /* sem negrito */
  color:#fff; /* o topo é roxo, mantém branco no botão */
}
.menu-principal .dropdown.categorias .cat-btn:hover{ background:rgba(255,255,255,.12); }
.menu-principal .dropdown.categorias .dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:260px; border-radius:12px; padding:8px;
  box-shadow:0 16px 38px rgba(0,0,0,.22); display:none; z-index:2000;
}
.menu-principal .dropdown.categorias.open .dropdown-menu{ display:block; }

/* Links do dropdown: sem negrito e com alto contraste */
html:not([data-theme="dark"]) .menu-principal .dropdown.categorias .dropdown-menu{
  background:#fff !important; color:#0f172a !important; border:1px solid #e5e7eb !important;
}
html[data-theme="dark"] .menu-principal .dropdown.categorias .dropdown-menu{
  background:#0f172a !important; color:#f3f4f6 !important; border:1px solid #1f2937 !important;
}
.menu-principal .dropdown.categorias .dropdown-menu a{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  font-size:15px; line-height:1.25; font-weight:400; text-decoration:none !important;
  color:inherit !important; /* usa o do tema */
}
html:not([data-theme="dark"]) .menu-principal .dropdown.categorias .dropdown-menu a:hover{ background:#f1f5f9 !important; }
html[data-theme="dark"] .menu-principal .dropdown.categorias .dropdown-menu a:hover{ background:#111827 !important; }

/* ===== Botões: contraste nos dois temas ===== */
.btn, .btn-pill{ border:2px solid transparent; font-weight:800; }
html[data-theme="dark"] .btn-outline{
  background:transparent; border-color:#b58df0; color:#b58df0;
}
html:not([data-theme="dark"]) .btn-outline{
  background:#fff; border-color:#6a0dad; color:#6a0dad;
}

/* ===== Campos/form ===== */
input, select, textarea{
  background:var(--page-bg); color:var(--page-text);
  border:1px solid var(--panel-bd); border-radius:8px;
}
input::placeholder, textarea::placeholder{
  color: color-mix(in srgb, var(--page-muted) 70%, var(--page-text) 30%);
}

/* ===== Tabelas (linhas e cabeçalho) ===== */
.table-head, .orders-table thead th, .tabela-carrinho thead th{
  background: color-mix(in srgb, var(--panel-bg) 60%, var(--page-bg) 40%);
  color:var(--page-text); border-bottom:1px solid var(--panel-bd);
}
.orders-table tbody td, .tabela-carrinho tbody td{ border-bottom:1px solid var(--panel-bd); }
.orders-table tbody tr:hover td, .tabela-carrinho tbody tr:hover td{
  background: color-mix(in srgb, var(--page-bg) 85%, transparent);
}

/* ===== Responsivo “guarda-chuva” ===== */
img{ max-width:100%; height:auto; }
.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* Tabelas viram cards no mobile (fallback global) */
@media (max-width:760px){
  .orders-table thead, .tabela-carrinho thead{ display:none; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td,
  .tabela-carrinho, .tabela-carrinho tbody, .tabela-carrinho tr, .tabela-carrinho td{ display:block; width:100%; }
  .orders-table tbody td, .tabela-carrinho tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px;
  }
  .orders-table tbody td::before, .tabela-carrinho tbody td::before{
    content: attr(data-label); font-weight:700; color:var(--page-muted);
  }
}

/* ===== Header: mantém os dois roxos e a lupa amarela ===== */
.topbar{ background:#6a0dad; color:#fff; }
.menu-principal{ background:#4b0c8e; color:#fff; border-bottom:1px solid #3f0a79; }
.menu-principal nav > a{ color:#fff; }

.topbar .busca button{
  background:#ffc107 !important; color:#000 !important; border:0 !important;
}

/* ===== Footer: faixa superior cinza-escura, faixa final preta ===== */
footer{ background:#1f2937; color:#e5e7eb; }
.footer-inner a{ color:#c7d2fe; text-decoration:none; }
.footer-inner a:hover{ text-decoration:underline; }
.footer-bottom{ background:#000; color:#e5e7eb; }