/* Balm: beauty and skincare. Soft and warm on top of base.css: a light serif, rounded corners,
   pill buttons, sentence-case labels and generous space around packshots. */
.ui, .button, .card__title, .cart-item__title, .cart-item__remove, .look-item__title, .sticky-atc__title, .badge, .quick-add__label, .toast {
  text-transform: none;
  letter-spacing: 0;
}
.ui { font-size: 13px; }
.button { font-size: 14px; min-height: 48px; padding: 0 26px; }
.badge { border-radius: 999px; padding: 0 10px; font-size: 11px; }
.card__title { font-size: 15px; }
.card__info { padding: 12px 4px 0; }
.card__row { flex-direction: column; align-items: flex-start; gap: 2px; }
.card .price { font-size: 14px; color: var(--color-muted); }
.h0, .h1, .h2 { letter-spacing: -0.03em; line-height: 1; }
.h0 em, .h1 em { font-style: italic; }

/* Header: logo on top, menu centred underneath */
.site-header__logo .logo-text { font-family: var(--font-heading); text-transform: lowercase; font-size: 34px; letter-spacing: -0.03em; font-weight: 400; }
.header-nav__list { gap: 32px; font-size: 14px; }

/* Framed hero with rounded photo */
.hero--framed .hero__heading { max-width: 12ch; }
.hero--framed .hero__body { color: var(--color-muted); opacity: 1; }

/* Concern tiles: square, rounded, names under */
.tiles--below .tile__label { font-family: var(--font-heading); font-size: 20px; }

/* Bundle builder on a soft panel */
.bundle-section { border-radius: 0; }
.bundle__option { background: var(--color-bg); }

/* Text reviews */
.quote { border: 0; background: var(--color-card); }
.quote__text { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
.features-section--card .feature { background: transparent; border: 1px solid var(--color-line); }