/* ===== Mercadinho Théo — Cores de Marca ===== */
:root {
  --brand-yellow: #FFD400;  /* amarelo vivo */
  --brand-blue:   #0052CC;  /* azul forte */
  --brand-red:    #E53935;  /* vermelho oferta */
}

/* Utilitários de cor */
.text-brand-yellow { color: var(--brand-yellow) !important; }
.bg-brand-yellow   { background-color: var(--brand-yellow) !important; }
.text-brand-blue   { color: var(--brand-blue) !important; }
.bg-brand-blue     { background-color: var(--brand-blue) !important; }
.text-brand-red    { color: var(--brand-red) !important; }
.bg-brand-red      { background-color: var(--brand-red) !important; }

/* Botões & badges */
.btn-brand { background: var(--brand-blue); color: #fff; }
.btn-brand:hover { filter: brightness(0.92); }
.badge-promo { background: var(--brand-red); color: #fff; }
.badge-note  { background: var(--brand-yellow); color: #111; }

/* Faixa superior com as 3 cores */
.brand-stripe {
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-yellow) 0%,
    var(--brand-blue) 50%,
    var(--brand-red) 100%);
}

/* ===== Fundo temático (não 100% branco) ===== */
.bg-brand-paper {
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 0) 0 0/14px 14px,
    linear-gradient(180deg,
      rgba(255,212,0,.07),
      rgba(0,82,204,.05) 50%,
      rgba(229,57,53,.06) 100%);
}

/* Utilitário de truncamento */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}