/* Bella Hair Beauty — shared visual identity for checkout and post-purchase funnel */
:root {
  --bella-canvas: #fff8fa;
  --bella-surface: #ffffff;
  --bella-ink: #211a1d;
  --bella-pink: #e84a7f;
  --bella-wine: #8e244d;
  --bella-line: rgba(232, 74, 127, 0.16);
  --bella-soft: rgba(232, 74, 127, 0.08);
  --bella-shadow: 0 14px 38px rgba(80, 26, 47, 0.09);
  --bella-action: var(--bella-pink);
  --bella-action-dark: var(--bella-wine);
  --bella-action-soft: var(--bella-soft);
}

html { background: var(--bella-canvas); }
body {
  background: var(--bella-canvas) !important;
  color: var(--bella-ink) !important;
  font-family: "Figtree", sans-serif !important;
}

.bella-brand {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--bella-ink);
  letter-spacing: 0;
}
.bella-brand small {
  margin-left: 6px;
  color: var(--bella-pink);
  font: 700 9px/1 "Outfit", sans-serif;
  letter-spacing: .14em;
}

header,
.top {
  background: color-mix(in srgb, var(--bella-canvas) 94%, transparent) !important;
  border-color: var(--bella-line) !important;
  backdrop-filter: blur(12px);
}

.wrap { background: var(--bella-canvas); }
.main { padding-top: 34px !important; padding-bottom: 34px !important; }
.card,
.box,
main section,
.sheet {
  border-color: var(--bella-line) !important;
  box-shadow: var(--bella-shadow) !important;
}
.card { color: var(--bella-ink); }
h1, h2, h3, h4 { font-family: "Outfit", sans-serif !important; letter-spacing: 0 !important; }

.cta,
.copy,
.tt-btn,
#lv-pix-generate,
#lv-copy-pix,
#lv-color-cta {
  border-radius: 10px !important;
  background: var(--bella-pink) !important;
  box-shadow: 0 8px 20px rgba(142, 36, 77, .16) !important;
}
.cta:hover,
.copy:hover,
.tt-btn:hover,
#lv-pix-generate:hover,
#lv-copy-pix:hover { background: var(--bella-wine) !important; }

.rule { background: var(--bella-pink) !important; }
.kicker { background: var(--bella-soft) !important; border-color: var(--bella-line) !important; color: var(--bella-wine) !important; }
.alert, .off { background: var(--bella-pink) !important; }
.new { color: var(--bella-wine) !important; }
.benefits .ben { background: var(--bella-soft) !important; }
.foot, footer { color: color-mix(in srgb, var(--bella-ink) 68%, transparent) !important; }

/* Checkout: retain its workflow while carrying the Bella Hair visual system. */
[id^="lv-step-"] > div { background: var(--bella-canvas) !important; }
[id^="lv-step-"] main { max-width: 620px !important; }
[id^="lv-step-"] main > section { border: 1px solid var(--bella-line); border-radius: 14px !important; }
.tt-input { border-color: var(--bella-line) !important; border-radius: 8px !important; }
.tt-input:focus { border-color: var(--bella-pink) !important; box-shadow: 0 0 0 3px var(--bella-soft) !important; }

@media (max-width: 639px) {
  .bella-brand { font-size: 18px; }
  .main { padding-top: 22px !important; }
  .card, .box { border-radius: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}