:root {
--azul: #14238c;
--azul-escuro: #0c1757;
--vermelho: #d81f26;
--dourado: #f7b500;
--verde: #1fa855;
--pix: #32bcad;
--cinza-bg: #f2f3f7;
--branco: #ffffff;
--texto: #1b1b1f;
--texto-suave: #5b5f6b;
--borda: #e1e3ea;
}

* { box-sizing: border-box; }

body {
margin: 0;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
background: var(--cinza-bg);
color: var(--texto);
}

a { color: inherit; text-decoration: none; }

.topbar {
background: var(--azul-escuro);
color: #fff;
font-size: 13px;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
padding: 6px 12px;
}

.aviso-cartao {
background: var(--dourado);
color: #3a2600;
text-align: center;
font-size: 13px;
font-weight: 700;
padding: 8px 16px;
}

.hero {
background: linear-gradient(135deg, var(--azul) 0%, #1c2fb0 60%, var(--azul) 100%);
color: #fff;
text-align: center;
padding: 0 0 20px;
}

.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.hero-logo { display: block; width: 100%; max-width: none; height: auto; margin-bottom: 6px; }

.hero-title {
margin: 0;
font-size: clamp(32px, 7vw, 64px);
font-weight: 900;
letter-spacing: 1px;
background: linear-gradient(180deg, var(--dourado), var(--vermelho));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

.hero-subtitle { margin: 0; color: #dfe3ff; font-size: 15px; }

.hero-phone {
margin-top: 18px;
font-size: clamp(24px, 5vw, 38px);
font-weight: 800;
color: #58e07a;
}

.hero-phone a { color: inherit; }

.searchbar {
max-width: 1200px;
margin: -18px auto 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
flex-wrap: wrap;
}

.searchbar input {
flex: 1 1 260px;
padding: 12px 14px;
border: 1px solid var(--borda);
border-radius: 8px;
font-size: 15px;
}

.searchbar-whats { font-size: 13px; color: var(--texto-suave); text-align: center; }
.searchbar-whats a { display: block; font-weight: 700; color: var(--verde); }

.btn-cart {
background: var(--verde);
color: #fff;
border: none;
padding: 12px 18px;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
font-size: 14px;
}

.catnav {
max-width: 1200px;
margin: 16px auto 0;
padding: 0 16px;
display: flex;
gap: 10px;
overflow-x: auto;
}

.catnav button {
background: #fff;
border: 1px solid var(--borda);
padding: 8px 16px;
border-radius: 999px;
white-space: nowrap;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--texto);
}

.catnav button.ativo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.vendedor-bar {
max-width: 1200px;
margin: 16px auto 0;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--borda);
border-radius: 10px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}

.vendedor-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.vendedor-info small { color: var(--texto-suave); }

.vendedor-bar select {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--azul);
min-width: 220px;
font-size: 14px;
}

.vendedor-ok { color: var(--verde); font-size: 13px; font-weight: 600; }

.info-tiles {
max-width: 1200px;
margin: 16px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}

.tile {
background: #fff;
border: 1px solid var(--borda);
border-radius: 10px;
padding: 14px;
font-size: 20px;
display: flex;
flex-direction: column;
gap: 2px;
}

.tile b { font-size: 14px; }
.tile small { font-size: 12px; color: var(--texto-suave); }

.album, .catalogo {
max-width: 1200px;
margin: 28px auto 0;
padding: 0 16px;
}

.album h2, .catalogo-header h2 {
color: var(--vermelho);
letter-spacing: 1px;
font-size: 15px;
margin-bottom: 14px;
}

.album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 14px;
}

.album-item {
background: #fff;
border: 1px solid var(--borda);
border-radius: 12px;
padding: 14px 8px;
text-align: center;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}

.album-item .emoji { font-size: 28px; display: block; margin-bottom: 6px; }
.album-item .qtd { display: block; color: var(--texto-suave); font-weight: 400; margin-top: 2px; }

.catalogo-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.catalogo-header p { color: var(--texto-suave); font-size: 14px; }

.btn-editar {
margin-left: auto;
background: var(--azul);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}

.filtros {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 14px 0;
}

.filtros button {
background: #fff;
border: 1px solid var(--borda);
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
font-size: 13px;
}

.filtros button.ativo { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

.grid-produtos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 40px;
}

.card-produto {
background: #fff;
border: 1px solid var(--borda);
border-radius: 12px;
padding: 12px;
position: relative;
display: flex;
flex-direction: column;
}

.badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--vermelho);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
z-index: 2;
}

.badge.baixo { background: var(--verde); }
.badge.vendido { background: var(--dourado); color: #3a2600; }
.badge.pix { background: var(--pix); color: #fff; }

.card-produto img {
width: 100%;
height: 140px;
object-fit: contain;
background: #fafafa;
border-radius: 8px;
margin-bottom: 10px;
}

.card-cat { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; }
.card-nome { font-size: 14px; font-weight: 600; margin: 4px 0 6px; min-height: 36px; }
.card-de { font-size: 12px; color: var(--texto-suave); text-decoration: line-through; }
.card-por { font-size: 20px; font-weight: 800; color: var(--azul); }
.card-parcela { font-size: 12px; color: var(--texto-suave); margin-bottom: 10px; }

.card-qtd {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 8px;
padding: 6px;
background: var(--cinza-bg);
border-radius: 8px;
}

.btn-qtd {
border: 1px solid var(--azul);
background: #fff;
color: var(--azul);
border-radius: 6px;
width: 28px;
height: 28px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}

.btn-qtd:hover { background: var(--azul); color: #fff; }

.card-qtd .qtd-valor {
min-width: 22px;
text-align: center;
font-weight: 700;
font-size: 14px;
}

.card-botoes { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }

.btn-add {
background: var(--azul);
color: #fff;
border: none;
padding: 8px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
flex: 1 1 auto;
}

.btn-whats {
background: #fff;
color: var(--verde);
border: 1px solid var(--verde);
padding: 8px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
flex: 1 1 auto;
text-align: center;
}

.card-admin { display: flex; gap: 6px; margin-top: 6px; }
.btn-edit-produto { background: var(--azul); color: #fff; border: none; padding: 6px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; flex: 1; }
.btn-excluir-produto { background: var(--vermelho); color: #fff; border: none; padding: 6px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; flex: 1; }

.rodape {
background: var(--azul-escuro);
color: #cfd3ff;
text-align: center;
padding: 24px 16px;
margin-top: 40px;
font-size: 13px;
}

.rodape a { color: #58e07a; font-weight: 700; }

/* Drawer carrinho */
.drawer-overlay, .modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 50;
}

.drawer-overlay.aberto, .modal-overlay.aberto { display: block; }

.drawer {
position: fixed;
top: 0; right: -420px;
width: 380px;
max-width: 92vw;
height: 100%;
background: #fff;
z-index: 51;
transition: right 0.25s ease;
display: flex;
flex-direction: column;
}

.drawer.aberto { right: 0; }

.drawer-header {
background: var(--azul);
color: #fff;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}

.drawer-header button {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
}

.drawer-body { padding: 16px; overflow-y: auto; flex: 1; }

#carrinhoLista { margin-bottom: 12px; }

.item-carrinho {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--borda);
font-size: 13px;
gap: 8px;
}

.item-carrinho .qtd-controles { display: flex; align-items: center; gap: 6px; }
.item-carrinho button { border: 1px solid var(--borda); background: #fff; border-radius: 4px; width: 22px; height: 22px; cursor: pointer; }

.campo-label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }

.drawer select, .modal select, .modal input {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--borda);
font-size: 14px;
margin-bottom: 4px;
}

.drawer input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--borda);
font-size: 14px;
margin-bottom: 8px;
}

.opcoes-retirada, .opcoes-pagamento { display: flex; flex-direction: column; gap: 6px; }
.opcao { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.opcao input { width: auto; margin: 0; }

.bloco-entrega {
margin: 4px 0 10px;
padding: 12px;
background: var(--cinza-bg);
border-radius: 8px;
border: 1px solid var(--borda);
}

.bloco-entrega .campo-label { margin-top: 0; }

.aviso-entrega {
font-size: 12px;
color: var(--texto-suave);
margin: 4px 0 0;
}

.total-label { margin-top: 16px; font-size: 13px; color: var(--texto-suave); margin-bottom: 2px; }
.total-valor { font-size: 26px; font-weight: 800; color: var(--azul); margin: 0; }
.total-obs { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

.btn-finalizar {
width: 100%;
background: var(--verde);
color: #fff;
border: none;
padding: 14px;
border-radius: 8px;
font-weight: 700;
margin-top: 16px;
cursor: pointer;
font-size: 14px;
}

.btn-limpar {
width: 100%;
background: #fff;
color: var(--vermelho);
border: 1px solid var(--vermelho);
padding: 10px;
border-radius: 8px;
margin-top: 8px;
cursor: pointer;
font-size: 13px;
}

/* Modal */
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 12px;
width: 460px;
max-width: 92vw;
max-height: 88vh;
overflow-y: auto;
z-index: 52;
}

.modal-pequeno { width: 340px; }

.modal-header {
background: var(--azul);
color: #fff;
padding: 16px;
border-radius: 12px 12px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-header button { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; }

.modal-body { padding: 18px; }
.modal-body label { display: block; font-size: 13px; font-weight: 700; margin: 10px 0 4px; }

.btn-salvar {
width: 100%;
background: var(--azul);
color: #fff;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 700;
margin-top: 14px;
cursor: pointer;
}

.erro-senha { color: var(--vermelho); font-size: 13px; margin-top: 8px; min-height: 16px; }

@media (max-width: 640px) {
.searchbar { flex-direction: column; align-items: stretch; }
.btn-cart { width: 100%; }
}