/* ── Elora Skin Beauty — Utility CSS (substitui Tailwind CDN) ──
   Cobre apenas as classes utilitárias usadas no projeto.
   ~0.5 KB vs ~3 MB do CDN de desenvolvimento do Tailwind.
─────────────────────────────────────────────────────────────── */

/* Cores base mapeadas às CSS vars do tema */
.bg-surface   { background: var(--surface); }
.text-on-surf { color: var(--on-surface); }

/* Display helpers */
.hidden { display: none !important; }

/* ── Breakpoint lg (≥ 1024px) ─────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:hidden  { display: none !important; }
  .lg\:block   { display: block !important; }
  .lg\:flex    { display: flex !important; }

  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }

  .lg\:col-span-1 { grid-column: span 1; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

  .lg\:grid-cols-\[260px_1fr\]  { grid-template-columns: 260px 1fr; }
  .lg\:grid-cols-\[220px_1fr\]  { grid-template-columns: 220px 1fr; }
  .lg\:grid-cols-\[1fr_380px\]  { grid-template-columns: 1fr 380px; }
}

/* ── Breakpoint xl (≥ 1280px) ─────────────────────────────── */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}