/* ============================================================
   Achadinhos — Design Tokens
   Extraídos da identidade da loja (Tailwind + system font).
   Edite aqui as cores/fontes e tudo se propaga.
   ============================================================ */
:root {
  /* Marca */
  --brand:            #FF470F;
  --brand-2:          #FF5B29;
  --brand-amber:      #FB923C;
  --brand-yellow:     #FACC15;

  /* Gradientes */
  --grad-hero:  linear-gradient(180deg, #FF470F, #FF5B29);
  --grad-promo: linear-gradient(90deg, #FF470F, #FF791A);
  --grad-amber: linear-gradient(90deg, #FACC15, #FB923C);
  --grad-deep:  linear-gradient(90deg, #FF470F, #B83A14);

  /* Texto */
  --ink:        #020817;  /* principal  */
  --ink-soft:   #262626;
  --muted:      #737373;  /* secundário */
  --muted-2:    #6B7280;

  /* Acentos */
  --teal:       #0EA5A4;  /* SSL / entrega / selos */
  --green:      #16A34A;  /* confirmação */

  /* Superfícies */
  --bg:         #FFFFFF;
  --surface:    #FFF7ED;  /* laranja bem claro */
  --page:       #F1F1F3;  /* fundo cinza do checkout */
  --line:       #E2E8F0;  /* bordas/divisores */

  /* Formas */
  --radius:     14px;
  --radius-sm:  10px;
  --radius-pill: 999px;
  --shadow:     0 1px 3px rgba(2,8,23,.08), 0 1px 2px rgba(2,8,23,.04);

  /* Tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Barra de navegação inferior (compartilhada) ---------- */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; padding: 8px 0 10px; z-index: 40;
}
.nav a { text-align: center; font-size: 11px; color: var(--muted); text-decoration: none; position: relative; }
.nav a .ico { display: block; margin: 0 auto 2px; }
.nav a .ico .lucide { display: block; margin: 0 auto; }
.nav a.active { color: var(--brand); }
.nav .new {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 8px; padding: 1px 5px; border-radius: 6px; white-space: nowrap;
}