/* Footer: quick links, contact, social links; the payment strip and copyright below. */
@layer layout {
    .site-footer { margin-top: var(--space-8); background: var(--gradient-brand); border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: color-mix(in srgb, var(--color-on-dark) 84%, transparent); }
    .footer-main { padding: var(--space-7) 0 var(--space-6); }
    .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
    .footer-brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-on-dark); font-size: var(--text-lg); font-weight: 800; }
    .footer-brand .brand-mark { color: var(--color-accent-soft); }
    .footer-about { margin: 0; max-width: 32ch; font-size: var(--text-sm); }
    .footer-title { margin-bottom: var(--space-3); color: var(--color-accent-soft); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
    .footer-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; color: inherit; font-size: var(--text-sm); }
    .footer-links a:hover { color: var(--color-accent-soft); }
    .social-links { display: flex; gap: var(--space-2); }
    .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-on-dark); border: 1.5px solid color-mix(in srgb, var(--color-on-dark) 28%, transparent); border-radius: var(--radius-round); }
    .social-links a:hover { color: var(--color-ink-deep); background: var(--color-accent-soft); border-color: var(--color-accent-soft); }
    .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--color-on-dark) 14%, transparent); padding: var(--space-4) 0; }
    .footer-bottom-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .payment-badges { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
    .payment-badges li { padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 700; color: var(--color-on-dark); border: 1px solid color-mix(in srgb, var(--color-on-dark) 28%, transparent); border-radius: var(--radius-sm); }
    .payment-badges .payment-secure { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-accent-soft); border-color: transparent; }
    .footer-copy { margin: 0; font-size: var(--text-xs); }

    @media (min-width: 768px) {
        .footer-links { grid-template-columns: 1fr; gap: var(--space-2); }
        .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; }
    }
}