/* Melhor Preço: estilo comum das páginas. Cores e espaços só por variáveis; mobile primeiro. */
:root {
  --fundo: #f6f8f6;
  --superficie: #ffffff;
  --texto: #1b2a22;
  --texto-suave: #5b6b62;
  --borda: #d5ded8;
  --destaque: #1e7a45;
  --destaque-texto: #ffffff;
  --alerta-fundo: #fff4d6;
  --erro-fundo: #fde3e1;
  --ok-fundo: #dff3e6;
  --espaco: 1rem;
  --espaco-p: 0.5rem;
  --raio: 0.6rem;
  --largura: 46rem;
}
[data-theme="dark"] {
  --fundo: #101613;
  --superficie: #19211d;
  --texto: #e6efe9;
  --texto-suave: #9fb0a6;
  --borda: #2f3d35;
  --destaque: #3fbf79;
  --destaque-texto: #08130d;
  --alerta-fundo: #3a3114;
  --erro-fundo: #4a1f1c;
  --ok-fundo: #1b3a29;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #101613;
    --superficie: #19211d;
    --texto: #e6efe9;
    --texto-suave: #9fb0a6;
    --borda: #2f3d35;
    --destaque: #3fbf79;
    --destaque-texto: #08130d;
    --alerta-fundo: #3a3114;
    --erro-fundo: #4a1f1c;
    --ok-fundo: #1b3a29;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 1rem/1.45 system-ui, sans-serif; }
header, main, footer { max-width: var(--largura); margin: 0 auto; padding: var(--espaco); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-p); justify-content: space-between; }
header .marca { font-weight: 700; color: var(--texto); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: var(--espaco-p); align-items: center; }
h1 { font-size: 1.5rem; margin: 0 0 var(--espaco-p); }
h2 { font-size: 1.15rem; margin: var(--espaco) 0 var(--espaco-p); }
a { color: var(--destaque); }
footer { color: var(--texto-suave); font-size: 0.85rem; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--espaco); margin-bottom: var(--espaco); }
.botoes { display: grid; gap: var(--espaco-p); margin: var(--espaco) 0; }
button, .botao { font: inherit; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: var(--raio); padding: 0.6rem var(--espaco); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; }
button.principal, .botao.principal { background: var(--destaque); color: var(--destaque-texto); border-color: var(--destaque); font-weight: 600; }
button:disabled { opacity: 0.5; cursor: default; }
input, select { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: 0.5rem; max-width: 100%; }
label { display: block; margin: var(--espaco-p) 0; }
label input { display: block; width: 100%; }
.linha { display: flex; flex-wrap: wrap; gap: var(--espaco-p); align-items: center; }
.linha input[type="search"], .linha input[type="text"] { flex: 1 1 10rem; min-width: 0; }
.aviso, .erro, .sucesso { border-radius: var(--raio); padding: var(--espaco-p) var(--espaco); margin: var(--espaco-p) 0; }
.aviso { background: var(--alerta-fundo); }
.erro { background: var(--erro-fundo); }
.sucesso { background: var(--ok-fundo); }
.suave { color: var(--texto-suave); font-size: 0.9rem; }
.preco { font-weight: 700; font-size: 1.1rem; }
.tabela-rolavel { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.3rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
table input { width: 100%; min-width: 3.5rem; padding: 0.3rem; }
table input.desc { min-width: 9rem; }
ul.lista { list-style: none; padding: 0; margin: 0; }
ul.lista li { padding: var(--espaco-p) 0; border-bottom: 1px solid var(--borda); }
ul.lista li a { text-decoration: none; color: inherit; display: block; }
.selo { font-size: 0.75rem; border: 1px solid var(--borda); border-radius: 1rem; padding: 0 0.5rem; color: var(--texto-suave); white-space: nowrap; }
#previa { max-width: 100%; max-height: 14rem; border-radius: var(--raio); }
[hidden] { display: none !important; }
@media (min-width: 40rem) { .botoes { grid-template-columns: repeat(3, 1fr); } }
#item-qtd { width: 5rem; }