:root {
  --preto: #050505;
  --rosa: #F20A70;
  --rosa-profundo: #A9004C;
  --dourado: #D99A2B;
  --dourado-luz: #FFD47A;
  --chocolate: #3B160D;
  --creme: #FFF4DF;
  --branco: #FFFFFF;
  --bg: var(--preto);
  --surface: #1a0b07;
  --surface-2: var(--chocolate);
  --text: var(--branco);
  --muted: #e9dcc4;
  --borda: rgba(217, 154, 43, .35);
  --ok: #3fbf6a;
  --erro: #ff6b6b;
  --display: "Cinzel", Georgia, serif;
  --body: "Montserrat", Arial, sans-serif;
  --r: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--body); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--dourado-luz); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

header.topo { padding: 18px 0 8px; text-align: center; border-bottom: 1px solid var(--borda); }
header.topo img { height: 56px; width: auto; margin: 0 auto; }
header.topo p { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }

.aviso { margin: 14px 0; padding: 12px 14px; border-radius: var(--r); background: var(--rosa-profundo); color: var(--branco); font-weight: 600; text-align: center; }
h2.secao { font: 600 1.4rem/1.2 var(--display); color: var(--dourado); margin: 22px 0 12px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding-bottom: 120px; }
.card { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.card .foto { aspect-ratio: 1 / 1; background: var(--surface-2) center/cover no-repeat; display: grid; place-items: center; color: var(--dourado); font: 600 .9rem var(--display); text-align: center; padding: 8px; }
.card .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { margin: 0; font-size: .98rem; line-height: 1.3; }
.card .desc { margin: 0; font-size: .78rem; color: var(--muted); }
.card .preco { font-weight: 700; color: var(--dourado-luz); white-space: nowrap; }
.card .linha { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.card.esgotado { opacity: .5; }
.selo { font-size: .7rem; font-weight: 700; color: var(--preto); background: var(--dourado-luz); border-radius: 999px; padding: 2px 8px; }

.qtd { display: inline-flex; align-items: center; gap: 6px; }
.qtd button, .btn-mais { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dourado); background: transparent; color: var(--dourado-luz); font-size: 1.2rem; cursor: pointer; }
.btn-mais { background: var(--rosa-profundo); border-color: var(--rosa-profundo); color: var(--branco); }
.qtd span { min-width: 18px; text-align: center; font-weight: 700; }

.barra { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5,5,5,0), var(--preto) 35%); }
.barra button { width: 100%; max-width: 560px; margin: 0 auto; display: flex; justify-content: space-between; }

.btn { border: 0; border-radius: 999px; min-height: 48px; padding: 12px 20px; font-weight: 700; cursor: pointer; background: var(--rosa-profundo); color: var(--branco); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ouro { background: var(--dourado); color: var(--preto); }
.btn.linha { background: transparent; border: 1px solid var(--dourado); color: var(--dourado-luz); }
.btn.peq { min-height: 38px; padding: 8px 14px; font-size: .88rem; }

.folha { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: flex-end; justify-content: center; z-index: 10; }
.folha.aberta { display: flex; }
.folha .caixa { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--surface); border: 1px solid var(--borda); border-radius: 20px 20px 0 0; padding: 18px 16px 28px; }
.folha h2 { font: 600 1.3rem var(--display); color: var(--dourado); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.fechar { background: none; border: 0; color: var(--muted); font-size: 1.6rem; cursor: pointer; }

.item-carrinho { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.campo { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.campo label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.campo input, .campo textarea, .campo select { background: var(--preto); color: var(--text); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; min-height: 46px; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcoes.quatro { grid-template-columns: 1fr 1fr; }
.opcao { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; background: var(--preto); color: var(--text); font-weight: 600; }
.opcao.on { border-color: var(--rosa); background: rgba(242, 10, 112, .15); }
.resumo { margin: 14px 0; padding: 12px; border-radius: 12px; background: var(--preto); border: 1px solid var(--borda); }
.resumo div { display: flex; justify-content: space-between; }
.resumo .total { font-weight: 700; font-size: 1.15rem; color: var(--dourado-luz); margin-top: 6px; }
.msg { font-size: .88rem; margin: 6px 0; }
.msg.erro { color: var(--erro); }
.msg.ok { color: var(--ok); }
.oculto { display: none !important; }

.confirma { text-align: center; }
.confirma .codigo { font: 700 2rem var(--display); color: var(--dourado-luz); }
#qr { display: inline-block; background: #fff; padding: 12px; border-radius: 12px; margin: 10px auto; }
.copia { word-break: break-all; font-size: .72rem; background: var(--preto); border: 1px dashed var(--borda); border-radius: 10px; padding: 10px; text-align: left; }
.etapas { display: flex; justify-content: space-between; gap: 4px; margin: 16px 0; font-size: .72rem; color: var(--muted); }
.etapas span { flex: 1; padding: 6px 2px; border-top: 3px solid #333; }
.etapas span.on { border-color: var(--rosa); color: var(--branco); font-weight: 700; }

.card .de { color: var(--muted); text-decoration: line-through; font-size: .78rem; }
.card .porcao { font-size: .72rem; color: var(--muted); }
.selo.rosa { background: var(--rosa); color: var(--branco); }
.grupo { margin: 14px 0; }
.grupo h3 { margin: 0 0 6px; font-size: .95rem; display: flex; justify-content: space-between; }
.grupo h3 small { font-weight: 600; color: var(--muted); }
.grupo .opcao { width: 100%; display: flex; justify-content: space-between; margin-bottom: 6px; text-align: left; }
.item-carrinho small { color: var(--muted); }
.banner { width: 100%; border-radius: var(--r); margin-top: 14px; }
:focus-visible { outline: 3px solid var(--dourado-luz); outline-offset: 2px; }

/* Endereço com CEP */
.linha-cep { display: flex; gap: 10px; align-items: center; }
.linha-cep input { flex: 0 0 150px; }
.peq-link { font-size: .85rem; color: var(--ouro, #c9a227); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botoes-frete { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.aviso-end { border: 1px solid var(--borda, #3a2a22); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; font-size: .9rem; }
.aviso-end button { margin-top: 6px; }
@media (max-width: 380px) { .duas { grid-template-columns: 1fr; } }