/* ===== FAIXA PADRÃO PARA NOVAS PÁGINAS =====
   Use `.lo-page-hero-standard` no header/hero de telas novas para seguir
   o mesmo fundo mesclado de /admin/master e /admin/pagamentos/agenda. */
.lo-page-hero-standard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(129,140,248,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(124,58,237,.28), transparent 34%),
    radial-gradient(circle at 95% 10%, rgba(34,211,238,.18), transparent 30%),
    linear-gradient(135deg, var(--lo-hero-surface, var(--panel, #fff)), var(--lo-hero-surface-alt, var(--bg-soft, #f7faff)));
  box-shadow: 0 22px 60px rgba(15,23,42,.16);
}

.lo-page-hero-standard::after {
  content: "";
  position: absolute;
  inset: auto -90px -130px auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(37,99,235,.18);
  filter: blur(6px);
  pointer-events: none;
}

html[data-theme="dark"] .lo-page-hero-standard,
body.dark-mode .lo-page-hero-standard {
  background:
    radial-gradient(circle at 10% 0%, rgba(124,58,237,.30), transparent 34%),
    radial-gradient(circle at 95% 10%, rgba(34,211,238,.20), transparent 30%),
    linear-gradient(135deg, var(--lo-hero-surface, var(--panel, #0d1830)), var(--lo-hero-surface-alt, var(--bg-soft, #101d37)));
}

.produtos-container > .page-title,
.show-wrap > .page-title,
.container > .page-title {
  text-align: center;
  font-size: 2rem;
  margin: 0 0 25px 0;
  color: #6a0dad;
  font-weight: bold;
  line-height: 1.2;
}
.page-title span { color: #d40000; }


/* Auth forms */
.auth-form {
  display: grid;
  gap: 10px;
}
.auth-form label {
  font-weight: 600;
  color: #333;
}
.auth-form input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.auth-form .btn {
  margin-top: 6px;
}

/* ---- Minha Conta ---- */
.conta-wrap { max-width: 900px; margin: 30px auto; background:#fff; padding:20px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.conta-menu { display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:10px 0 0; }
.conta-menu .btn { display:inline-block; }
.btn.btn-voltar { background:#777; color:#fff; }
.btn.btn-voltar:hover { filter:brightness(.95); }



.construction-banner{
  background:#fff3cd;
  color:#664d03;
  border-bottom:1px solid #ffe69c;
  text-align:center;
  padding:10px 12px;
  font-weight:600;
  font-size:.95rem;
  position:sticky;
  top:0;
  z-index:1000;
}


/* ===== RESET MÓVEL BÁSICO ===== */
img { max-width: 100%; height: auto; }

/* container padrão se não existir */
.container { max-width: 1200px; margin: 0 auto; padding: 0 12px; }

/* banner de construção (se ativo) fica fixo no topo */
.construction-banner{
  background:#fff3cd; color:#664d03; border-bottom:1px solid #ffe69c;
  text-align:center; padding:10px 12px; font-weight:600; font-size:.95rem;
  position:sticky; top:0; z-index:1000;
}

/* ===== HEADER ===== */
.topo-flex { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo img { height: 46px; }

.brand-text { line-height:1.1; display:flex; flex-direction:column; }
.brand-text .brand-top { font-weight:800; letter-spacing:.4px; }
.brand-text .brand-bottom{ font-weight:600; opacity:.85; font-size:.9rem; }

/* busca */
.busca { display:flex; align-items:center; gap:8px; flex:1; }
.busca input { flex:1; min-width:180px; padding:10px 12px; border:1px solid #ddd; border-radius:8px; }
.busca button { padding:10px 12px; border:0; border-radius:8px; cursor:pointer; }

/* menu topo */
.menu-topo { display:flex; align-items:center; gap:12px; white-space:nowrap; }

/* menu principal */
.menu-principal nav {
  display:flex; align-items:center; gap:18px; justify-content:center;
  padding:8px 0; flex-wrap:wrap;
}

/* ===== GRADE DE PRODUTOS ===== */
.produtos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

/* altura de imagem reduzida no mobile melhora o scroll */
.produto-img { height: 220px; overflow:hidden; }
.produto-img img { width:100%; height:100%; object-fit:cover; }

/* botões padrão */
.btn, .btn-detalhes, .btn-add {
  display:inline-block; text-align:center; padding:10px 14px;
  border-radius:8px; text-decoration:none; font-weight:700; cursor:pointer;
}

/* alinhamento vertical dos botões nas cards */
.produto-card .btn-row{
  display:flex; flex-direction:column; gap:10px; margin: 0 15px 15px;
}

/* ===== PÁGINA SHOW (detalhes) ===== */
.acoes-produto{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin: 14px 0;
}
.btn-voltar{ background:#999; color:#fff; }

.show-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px;
}
.show-image{ background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden; }
.show-info{ background:#fff; border:1px solid #eee; border-radius:10px; padding:16px; }

/* ===== CARRINHO ===== */
.tabela-carrinho { width:100%; border-collapse:collapse; }
.tabela-carrinho th, .tabela-carrinho td { padding:10px 8px; border-bottom:1px solid #eee; }

/* ===== BREAKPOINTS ===== */
@media (max-width: 992px){
  .produtos-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .show-grid{ grid-template-columns: 1fr; }
  .show-info{ padding:14px; }
}

@media (max-width: 768px){
  .topo-flex{ flex-wrap:wrap; gap:10px; }
  .logo{ width:100%; justify-content:center; }
  .busca{ width:100%; order:3; }
  .menu-topo{ width:100%; justify-content:center; gap:10px; order:2; flex-wrap:wrap; }

  .produto-img{ height: 180px; }
  .produto-card h3{ font-size:1rem; }

  /* botões empilhados em todas as listas */
  .produto-card .btn-row{ flex-direction:column; }

  /* detalhes: botões empilhados e 100% largura */
  .acoes-produto{ flex-direction:column; align-items:stretch; }
  .acoes-produto .btn, .acoes-produto .btn-detalhes, .acoes-produto .btn-add, .btn-voltar{
    width:100%;
  }

  /* carrinho “quebra” em blocos */
  .tabela-carrinho thead{ display:none; }
  .tabela-carrinho tr{ display:block; margin-bottom:12px; border:1px solid #eee; border-radius:8px; padding:8px; }
  .tabela-carrinho td{ display:flex; justify-content:space-between; padding:6px 8px; border:0; }
  .tabela-carrinho td::before{
    content: attr(data-label);
    font-weight:700; margin-right:10px; color:#555;
  }
}

@media (max-width: 420px){
  .logo img{ height:40px; }
  .brand-text .brand-top{ font-size:0.95rem; }
  .brand-text .brand-bottom{ font-size:0.80rem; }
  .busca input{ padding:9px 10px; }
}


/* ====== GRID RESPONSIVO DE PRODUTOS ====== */
.produtos-container{ max-width: 1200px; margin: 40px auto; padding: 20px; }

.produtos-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}

/* 3 colunas no tablet largo */
@media (max-width: 1200px){
  .produtos-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* 2 colunas no tablet/celular */
@media (max-width: 900px){
  .produtos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* mantém 2 colunas mesmo em celulares pequenos,
   e ajusta altura das imagens pra não ficar “esticada” */
@media (max-width: 480px){
  .produtos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .produto-img{ height: 160px; }
  .produto-card h3{ font-size: .95rem; }
  .preco{ font-size: 1.05rem; }
}

/* fallback para páginas que usam .grid em vez de .produtos-grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1200px){ .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){ .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
}

/* ===== Carrinho – melhorias visuais (Set/2025) ===== */

/* Layout em duas colunas: lista (1fr) + resumo (320px) */
.carrinho-container { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
@media (max-width: 900px){
  .carrinho-container { grid-template-columns: 1fr; }
}

/* Card do resumo */
.carrinho-resumo { background:#fff; border:1px solid #eee; border-radius:10px; padding:16px; }
.carrinho-resumo h3 { margin-top:0; color:#6a0dad; font-weight:800; }

/* Tabela do carrinho: alinhar valores e ação */
.tabela-carrinho { width:100%; border-collapse:collapse; }
.tabela-carrinho th, .tabela-carrinho td { padding:10px 8px; border-bottom:1px solid #eee; }
.tabela-carrinho th:nth-child(2),
.tabela-carrinho th:nth-child(4),
.tabela-carrinho td:nth-child(2),
.tabela-carrinho td:nth-child(4) { text-align:right; white-space:nowrap; }
.tabela-carrinho th:nth-child(5),
.tabela-carrinho td:nth-child(5) { text-align:center; width:80px; }
.tabela-carrinho tr:hover { background:#fcfcff; }

/* Quantidade */
.form-qtd .qtd-input { width:64px; text-align:center; padding:6px 8px; border:1px solid #ddd; border-radius:6px; }

/* Frete: CEP + botão lado a lado, com wrap no mobile */
.frete-box { margin:12px 0; }
.frete-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.frete-form input[name="cep"] { width:160px; padding:8px 10px; border:1px solid #ddd; border-radius:8px; }
.frete-form .btn-calcular { background:#ffcc00; color:#6a0dad; font-weight:700; border:0; border-radius:8px; padding:8px 12px; cursor:pointer; }

/* Totais */
.carrinho-total p { margin:4px 0; color:#444; }
.carrinho-total h2 { margin:10px 0 0; color:#111; }

/* Ações: botões à direita */
.acoes-carrinho { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.btn-finalizar { background:#ffcc00; color:#6a0dad; font-weight:700; border:0; border-radius:8px; padding:12px 16px; cursor:pointer; }
.btn-voltar { background:transparent; color:#6a0dad; border:1px solid #6a0dad; border-radius:8px; padding:10px 14px; text-decoration:none; }
.btn-voltar:hover { background:rgba(106,13,173,0.08); }

/* Link remover */
.btn-remover { color:#d40000; text-decoration:none; }
.btn-remover:hover { text-decoration:underline; }

/* ===== Carrinho – refinamentos (Set/2025) ===== */

/* Resumo “grudado” no desktop */
.carrinho-resumo {
  position: sticky;
  top: 16px;             /* distância do topo */
  align-self: start;     /* não esticar na grid */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

/* Tabela: larguras consistentes + números alinhados e estáveis */
.tabela-carrinho { table-layout: auto; width: 100%; border-collapse: collapse; }
.tabela-carrinho th:nth-child(1),
.tabela-carrinho td:nth-child(1) { width: auto; }         /* Produto */
.tabela-carrinho th:nth-child(2),
.tabela-carrinho td:nth-child(2) { width: 110px; }        /* Preço */
.tabela-carrinho th:nth-child(3),
.tabela-carrinho td:nth-child(3) { width: 120px; }        /* Quantidade */
.tabela-carrinho th:nth-child(4),
.tabela-carrinho td:nth-child(4) { width: 120px; }        /* Subtotal */
.tabela-carrinho th:nth-child(5),
.tabela-carrinho td:nth-child(5) { width: 56px; }         /* Ação */

.tabela-carrinho th:nth-child(2),
.tabela-carrinho th:nth-child(4),
.tabela-carrinho td:nth-child(2),
.tabela-carrinho td:nth-child(4) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* evita “pulos” nos números */
}

/* Nome do produto quebra bonitinho em nomes longos */
.tabela-carrinho td:nth-child(1) { overflow-wrap: anywhere; }

/* Quantidade */
.form-qtd .qtd-input {
  width: 64px; text-align: center; padding: 6px 8px;
  border: 1px solid #ddd; border-radius: 6px;
}

/* Ícone remover: botão limpinho (substitui o emoji visualmente) */
.btn-remover {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid #f3b5b5; border-radius: 10px;
  background: #fff; cursor: pointer;
  position: relative; text-indent: -9999px; overflow: hidden; /* esconde o “❌” do HTML */
}
.btn-remover::before {
  content: "✕";                /* ícone consistente */
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #c51616; font-size: 16px; font-weight: 700; line-height: 1;
}
.btn-remover:hover { background: #fff5f5; border-color: #e89a9a; }
.btn-remover:focus-visible { outline: 2px solid #6a0dad; outline-offset: 2px; }

/* Frete (mantém do patch anterior, repetido aqui por garantia de ordem) */
.frete-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.frete-form input[name="cep"] {
  width:160px; padding:8px 10px; border:1px solid #ddd; border-radius:8px;
}
.frete-form .btn-calcular {
  background:#ffcc00; color:#6a0dad; font-weight:700;
  border:0; border-radius:8px; padding:8px 12px; cursor:pointer;
}

/* Ações à direita (Finalizar/Voltar) */
.acoes-carrinho {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
}
.btn-finalizar {
  background:#ffcc00; color:#6a0dad; font-weight:700;
  border:0; border-radius:8px; padding:12px 16px; cursor:pointer;
}
.btn-voltar {
  background:transparent; color:#6a0dad; border:1px solid #6a0dad;
  border-radius:8px; padding:10px 14px; text-decoration:none;
}
.btn-voltar:hover { background:rgba(106,13,173,0.08); }

/* Hover agradável na tabela */
.tabela-carrinho tr:hover { background:#fcfcff; }



/* ===== Carrinho – ícone Remover robusto (Set/2025) ===== */
/* âncora estilizada como botão pequeno */
.tabela-carrinho .btn-remover{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #f3b5b5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-indent: -9999px;       /* esconde o texto interno “❌” do HTML */
  overflow: visible;          /* garante que o pseudo-elemento apareça */
  line-height: 1;
}

/* Fallback 1: Ícone em SVG via mask (mais consistente visualmente) */
.tabela-carrinho .btn-remover::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: #c51616;
  /* SVG “X” (cruz) — usa como máscara para preencher com a cor de background */
  -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 1 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4Z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 1 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4Z"/></svg>') no-repeat center / contain;
  z-index: 1;
}

/* Fallback 2: caractere “✕” (aparece caso o mask seja ignorado) */
.tabela-carrinho .btn-remover::after{
  content: "✕" !important;   /* força exibir se algo tentar zerar o content */
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #c51616;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;                 /* acima do ::before */
}

/* estados */
.tabela-carrinho .btn-remover:hover { background: #fff5f5; border-color: #e89a9a; }
.tabela-carrinho .btn-remover:focus-visible { outline: 2px solid #6a0dad; outline-offset: 2px; }

/* ===== Carrinho – miniatura do produto ===== */
.prod-col { display:flex; align-items:center; gap:10px; min-width:0; }
.prod-thumb {
  width:48px; height:48px; flex:0 0 48px;
  border-radius:8px; background:#f4f6ff center/cover no-repeat;
  border:1px solid #eee;
}
.prod-name {
  font-weight:600; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px;
}
@media (max-width: 900px){ .prod-name { max-width: 100%; } }


/* ===== Carrinho – thumbnail genérico sem mexer no HTML ===== */
.tabela-carrinho td:nth-child(1){
  position: relative;
  padding-left: 64px;           /* espaço para a miniatura */
  min-height: 48px;
  --thumb: url('/public/img/placeholder-produto.png'); /* imagem padrão */
}

.tabela-carrinho td:nth-child(1)::before{
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #f4f6ff center/cover no-repeat;
  background-image: var(--thumb); /* usa a var (padrão = placeholder) */
  transition: transform .12s ease, box-shadow .12s ease;
}

.tabela-carrinho td:nth-child(1):hover::before{
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}


/* Flash */
.flash { padding:10px 12px; border-radius:10px; margin:10px 0; }
.flash.success { background:#e9f9ee; color:#0f7b2e; border:1px solid #c1efcf; }
.flash.info { background:#eef5ff; color:#0b4a9a; border:1px solid #c9defc; }
.flash.error { background:#fff1f1; color:#9a0b0b; border:1px solid #ffd0d0; }











/* ===== PATCH MOBILE: CENTRALIZAÇÃO DE PÁGINAS ===== */
@media (max-width: 768px){

  html, body{
    overflow-x: hidden;
  }

  .container,
  main.container,
  section.container,
  .section-wrap,
  .account-wrap,
  .conta-wrap,
  .show-wrap,
  .produtos-container,
  .carrinho,
  .nfe-wrap,
  .nfe-wide,
  .admin-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  .page-title{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .card,
  .dash-card,
  .account-card,
  .conta-card,
  .card-link,
  .show-card,
  .carrinho-resumo,
  .shortcut,
  .shortcut-card{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cards-grid,
  .shortcut-grid,
  .account-grid,
  .conta-grid,
  .produtos-grid,
  .grid{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}