/* ═══════════════════════════════════════════════════════════════════
   Modelo Pétala — leve e acolhedor
   Carregado só quando este é o modelo da vitrine (por cima do style.css).
   Cores, fontes e cantos vêm de temas/petala.json.
═══════════════════════════════════════════════════════════════════ */

/* Marca: florzinha no lugar da bolinha */
.header__brand { font-weight: 600; letter-spacing: -0.01em; }
.brand-mark { font-size: 0; }
.brand-mark::before { content: '✿'; font-size: 15px; }

/* Hero com manchas suaves de cor */
.hero::before {
  background:
    radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--c-accent) 16%, transparent) 0, transparent 34%),
    radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--c-accent) 11%, transparent) 0, transparent 38%);
}
.hero__eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  letter-spacing: 0.08em; font-weight: 700;
}
.hero__title { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

/* Botões em pílula */
.btn, .btn-icon { border-radius: var(--r-full); }
.btn { font-weight: 700; }

/* Cards sem borda, com sombra macia */
.product-card { border-color: transparent; box-shadow: 0 2px 14px color-mix(in srgb, var(--c-text) 7%, transparent); }
.product-card:hover { border-color: transparent; transform: translateY(-4px); }
.product-card__name { font-size: 15px; font-weight: 600; }

/* Títulos de seção sem linha, com um pontinho de cor */
.section-divider__title { font-weight: 600; letter-spacing: -0.01em; }
.section-divider__title::after { content: '.'; color: var(--c-accent); }