/* The gift card itself (design C, chosen 2026-10-27): brand blue with two soft circles of light, the white logo, a
   "Gift card" label, the amount and who it is for. Shared by the buy page and the print page so the two can never drift
   apart; the email uses a pre-rendered image of the same background (Images/gift-card-art.jpg) with the text laid over
   it. Sized in container units so one rule set works from a 300px phone preview to a full-width printed card. The website
   page (HOMEDEV03) uses the same design. Never Fraunces or Bricolage Grotesque (CLAUDE.md). */
.giftcard {
    container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; text-align: left;
    width: 100%; max-width: 420px; aspect-ratio: 1.586 / 1; border-radius: 16px; color: #fff;
    font-family: 'Figtree', 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(150deg, #0077A8 0%, #0096D6 60%, #22aee8 100%);
    box-shadow: 0 18px 40px -18px rgba(0, 60, 90, .55), 0 2px 6px rgba(0, 60, 90, .15);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.giftcard::before { content: ''; position: absolute; width: 90cqw; height: 90cqw; border-radius: 50%; right: -38cqw; top: -46cqw; background: rgba(255,255,255,.10); z-index: -1; }
.giftcard::after { content: ''; position: absolute; width: 60cqw; height: 60cqw; border-radius: 50%; right: -12cqw; bottom: -40cqw; background: rgba(255,255,255,.08); z-index: -1; }
.giftcard .gc-in { position: absolute; inset: 0; padding: 7cqw 7.5cqw; display: flex; flex-direction: column; }
.giftcard .gc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; }
.giftcard .gc-logo { height: 7.2cqw; width: auto; aspect-ratio: auto; max-width: 52cqw; object-fit: contain; object-position: left center; }
.giftcard .gc-label { font-family: 'Plus Jakarta Sans', 'Figtree', sans-serif; font-weight: 700; font-size: 3.2cqw; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); white-space: nowrap; }
.giftcard .gc-amt { margin-top: auto; font-family: 'Plus Jakarta Sans', 'Figtree', sans-serif; font-weight: 800; font-size: 17cqw; line-height: .95; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.giftcard .gc-amt sup { font-size: .45em; vertical-align: .8em; margin-right: .05em; font-weight: 700; letter-spacing: 0; }
.giftcard .gc-to { margin-top: 2.6cqw; font-size: 4.2cqw; font-weight: 500; color: rgba(255,255,255,.85); min-height: 1.3em; max-width: 80cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
