/* ════════════════════════════════════════════════════════════════════════
   CATÁLOGO COM GRADES — a aparência do componente compartilhado (JB 2026-08-30)

   Estas regras SAÍRAM de `public/jboat-app-vendedor.html` (bloco "MENU DE CATEGORIAS" e
   "PRODUTOS"). Não são cópia: o app deixou de declará-las e passou a carregar este arquivo,
   junto com `public/jboat-pedidos.html`. Uma definição, dois consumidores.

   Os `var(--x, reserva)` são de propósito: cada página traz os tokens do SEU sistema
   (regra jboat-design — Arena é cyan, o app é cyan, o site público é laranja) e a reserva
   só entra se a página não declarar o token.
   ════════════════════════════════════════════════════════════════════════ */

/* MENU DE CATEGORIAS */
.cat-menu{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cat-menu::-webkit-scrollbar{display:none;}
.cat-chip{flex:0 0 auto;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--muted,#94a3b8);border:1px solid var(--border,rgba(255,255,255,.12));background:var(--surface,rgba(255,255,255,.04));cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s;}
.cat-chip.active{color:#050a18;background:var(--cyan,#06b6d4);border-color:var(--cyan,#06b6d4);font-weight:800;}

/* MEDIDAS (chips em fileiras, seleção múltipla) */
.med-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.med-lbl{flex:0 0 46px;font-size:10px;font-weight:800;color:var(--muted,#94a3b8);text-transform:uppercase;letter-spacing:.4px;padding-top:7px;}
.med-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1;}
.med-chip{padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--muted,#94a3b8);border:1px solid var(--border,rgba(255,255,255,.12));background:var(--surface,rgba(255,255,255,.04));cursor:pointer;font-family:inherit;}
.med-chip.on{color:#04140d;background:var(--emerald,#10b981);border-color:var(--emerald,#10b981);font-weight:800;}
.med-info{margin-top:8px;padding:10px 12px;border-radius:10px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);}
.med-info-t{font-size:10px;font-weight:800;color:var(--cyan,#06b6d4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.med-info-v{display:flex;flex-wrap:wrap;gap:10px 16px;}
.med-info-item{font-size:12px;color:var(--text,#e2e8f0);line-height:1.3;}
.med-info-item em{font-style:normal;color:var(--muted,#94a3b8);font-size:10px;font-weight:700;text-transform:uppercase;display:block;margin-bottom:2px;}
/* Instrução do que falta escolher. NÃO é erro — por isso não usa --rose (regra jboat-design). */
.med-dica{font-size:11px;color:var(--muted,#94a3b8);margin-top:4px;}
.med-erro{font-size:12px;color:var(--rose,#f43f5e);}

/* CARD DO PRODUTO */
.prod-card{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(10,20,40,.5);border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;}
.prod-card:active{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.3);}
.prod-foto{width:48px;height:48px;border-radius:8px;object-fit:cover;background:rgba(30,45,74,.6);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;position:relative;overflow:hidden;}
.prod-foto-badge{position:absolute;top:2px;left:2px;z-index:1;font-size:7px;font-weight:800;padding:1px 4px;border-radius:3px;background:rgba(245,158,11,.9);color:#000;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;}
.prod-info{flex:1;min-width:0;}
.prod-cod{font-size:10px;color:var(--muted,#94a3b8);font-family:'JetBrains Mono',monospace;}
.prod-nome{font-size:13px;font-weight:700;color:var(--heading,#f2f4f9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-preco{font-size:14px;font-weight:800;color:var(--emerald,#10b981);font-family:'JetBrains Mono',monospace;}
.prod-preco-promo{text-decoration:line-through;color:var(--muted,#94a3b8);font-size:11px;font-weight:400;}
.prod-add{width:34px;height:34px;border-radius:9px;background:rgba(6,182,212,.15);border:1.5px solid rgba(6,182,212,.4);color:var(--cyan,#06b6d4);font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.prod-escolher{background:none;border:none;color:var(--cyan,#06b6d4);font-size:13px;font-weight:700;cursor:pointer;padding:2px 0;font-family:inherit;}
/* Etiqueta de promoção do card. Saiu do CSS do app (era `.badge.b-orc`), onde `.badge` é
   usada por muita tela que não é catálogo — só a cor veio junto. */
.b-orc{background:rgba(245,158,11,.15);color:var(--amber,#f59e0b);border:1px solid rgba(245,158,11,.3);}