/**
 * Atelier — T47 Loyalty.
 * Source: design/store-theme/01-atelier-fashion/pages/T47 Loyalty.dc.html
 *
 * R11-06: the page no longer renders a personal rewards dashboard or an unbacked
 * programme offer, so the rules for both are removed rather than left as dead
 * CSS — the personal balance (.atl-loyalty-points-eur), the progress-to-next-tier
 * bar (.atl-loyalty-progress*), the personal points ledger (.atl-loyalty-history*),
 * and, after code review, the earn/redeem explainer cards (.atl-loyalty-cards,
 * .atl-loyalty-card*) and the tier table (.atl-loyalty-table, .atl-loyalty-row*,
 * .atl-loyalty-tier*). A store with no rewards backend must neither show a
 * balance nor promise a redemption rate. They return with a real backend.
 */
.atl-loyalty { padding: 40px 40px 0; max-width: 1100px; margin: 0 auto; }

.atl-loyalty-hero { background: var(--atl-surface); border: 1px solid var(--atl-border); padding: 32px; display: flex; gap: 32px; align-items: center; }
.atl-loyalty-hero-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.atl-loyalty-eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--atl-accent-2); }
.atl-loyalty-points { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 34px; text-wrap: balance; }
.atl-loyalty-lede { font-size: 14.5px; line-height: 1.7; color: var(--atl-text-muted); margin: 4px 0 0; max-width: 560px; }
.atl-loyalty-hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.atl-loyalty-hero-link { font-size: 13px; color: var(--atl-text-muted); text-decoration: none; }
.atl-loyalty-hero-link:hover { color: var(--atl-text); }

@media (max-width: 767px) {
  .atl-loyalty { padding: 32px 20px 0; }
  .atl-loyalty-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
}