:root { --accent: #bc5311; --surface: #f9f5f2; --text: #1a1a1a; --border: #e8ddd4; }
body { font-family: 'DM Sans', sans-serif; background: var(--surface); color: var(--text); margin: 0; padding: 0; }
.font-display { font-family: 'Playfair Display', serif; }

.card-grid { display: grid; gap: 12px; }

/* Nav Categorias */
.tabs-scroll::-webkit-scrollbar { display: none; }
.cat-tab { padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: #fff; transition: all 0.2s; cursor: pointer; }
.cat-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Lista de Itens (Compacta) */
.card-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; padding: 10px; gap: 12px; margin-bottom: 8px; transition: transform 0.1s; cursor: pointer; }
.card-item:active { transform: scale(0.98); }
.item-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background: #f0f0f0; flex-shrink: 0; cursor: zoom-in; }
.item-info { flex: 1; min-width: 0; }

.btn-plus { background: var(--accent); color: #fff; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; border: none; cursor: pointer; }
.qty-ctrl { display: flex; align-items: center; gap: 10px; background: #f3f4f6; padding: 4px 8px; border-radius: 8px; font-weight: bold; font-size: 14px; }
.qty-ctrl button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 16px; font-weight: bold; padding: 0 4px; }

/* Carrinho e Modais */
.cart-float { position: fixed; bottom: 20px; right: 20px; background: var(--accent); color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 50; border: none; cursor: pointer; }
.drawer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 24px 24px 0 0; z-index: 100; transform: translateY(100%); transition: 0.3s; max-height: 85vh; overflow-y: auto; }
.drawer.open { transform: translateY(0); }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; display: none; }
.overlay.open { display: block; }

@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }