/* Gift card purchase box (product page partial), tender rows in the checkout summary, loyalty points page. */
.gc-visual { aspect-ratio: 16 / 10; border-radius: 0; background: var(--brand); color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; max-width: 420px; }
.gc-amounts .pill span { border-radius: 0; }

/* Same shape as the coupon row next to it. */
.points-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface, #F4F1EC); border-radius: 0; padding: 12px 14px; }

/* Gift card shown as the product picture (no product photo). */
.gc-visual.gc-visual-hero { max-width: none; aspect-ratio: 1 / 1; padding: clamp(24px, 4vw, 48px); border-radius: 0; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 24px 48px rgba(30,27,24,.18); }
@media (max-width: 900px) { .gc-visual.gc-visual-hero { aspect-ratio: 16 / 10; } }
/* Zarif: the card face is a dark stone gradient with light tracked type. */
.gc-visual, .gc-visual.gc-visual-hero { background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 72%, var(--accent)) 100%); color: var(--bg); }
.gc-visual-name { font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
.gc-visual-amount { font-weight: 300; letter-spacing: .04em; }
/* Points history: the amount always stays top right (site.css .row wraps, which dropped it under long descriptions). */
.points-history .row { flex-wrap: nowrap; align-items: flex-start; }
.points-history .row > b { flex-shrink: 0; white-space: nowrap; }