/* ── Aurora — Beleza & Cosméticos ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --fn-primary:     #7C3AED;
  --fn-primary-2:   #6D28D9;
  --fn-accent:      #EC4899;
  --fn-bg:          #FFFFFF;
  --fn-surface:     #FAF7FF;
  --fn-card:        #FFFFFF;
  --fn-border:      #EDE9F8;
  --fn-text:        #1F1535;
  --fn-sec:         #7B6F8A;
  --fn-font:        'Inter', system-ui, sans-serif;
  --fn-font-display: 'Playfair Display', Georgia, serif;
}

/* Hero com tipografia display */
.fn-hero { background: linear-gradient(145deg, #FAF5FF 0%, #EDE9FF 60%, #FCE7F3 100%); border-bottom: none; }
.fn-hero-title { font-family: var(--fn-font-display); color: var(--fn-text); }
.fn-hero-sub { color: #9F87BE; }

/* Header elegante */
.fn-header { backdrop-filter: blur(10px); background: rgba(255,255,255,0.95); }
.fn-logo-text { font-family: var(--fn-font-display); font-weight: 700; color: var(--fn-primary); letter-spacing: 0.01em; }

/* Trust bar suave */
.fn-trust-bar { background: linear-gradient(90deg, #FAF5FF, #FDF2F8, #FAF5FF); border-bottom-color: #EDE9F8; }
.fn-trust-item { color: #9F87BE; font-size: 0.74rem; }

/* Cards com sombra suave */
.fn-product-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(124,58,237,0.05);
}
.fn-product-card:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.3);
}

/* Botões arredondados */
.fn-add-btn { border-radius: 20px; font-size: 0.8rem; }
.fn-btn-primary { border-radius: 24px; }
.fn-add-to-cart-btn { border-radius: 12px; }
.fn-checkout-cta { border-radius: 14px; }
.fn-buy-now-btn { border-radius: 12px; }

/* Cat chips */
.fn-cat-chip--active,
.fn-cat-chip:hover { background: linear-gradient(135deg, var(--fn-primary), var(--fn-accent)); border-color: transparent; }

/* Footer suave */
.fn-footer { background: #FAF5FF; border-top-color: #EDE9F8; }
.fn-footer-logo { color: var(--fn-primary); font-family: var(--fn-font-display); }

/* Seção título com serifa */
.fn-section-title { font-family: var(--fn-font-display); }
.fn-product-title { font-family: var(--fn-font-display); }
.fn-hero-title { font-family: var(--fn-font-display); }
.fn-page-title { font-family: var(--fn-font-display); }