/* Haven Group gift cards: one card design in six colours, with optional occasion artwork.
   Used by the shop (buying, checking a balance, "my gift cards") and mirrored in the gift card email.
   Markup: .hgc.hgc--<theme> > .hgc-bg, .hgc-guilloche, .hgc-watermark, .hgc-art, .hgc-top, .hgc-mid, .hgc-bottom
   Credit-card proportions (85.6 × 54 mm), so it reads as a real card on every screen. */

.hgc {
    --hgc-gold: #e2b260;
    --hgc-gold-2: #f6d999;
    --hgc-ink: #fffaf0;
    --hgc-muted: rgba(255, 250, 240, .72);
    --hgc-line: rgba(226, 178, 96, .22);
    position: relative; overflow: hidden; isolation: isolate; margin: 0;
    width: 100%; max-width: 420px; aspect-ratio: 85.6 / 54;
    border-radius: 18px; color: var(--hgc-ink);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 40px -18px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25);
    container-type: inline-size;
}
.hgc-bg { position: absolute; inset: 0; z-index: -3; }
/* fine engraved lines, like a banknote */
.hgc-guilloche { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .9; }
.hgc-guilloche path { fill: none; stroke: var(--hgc-line); stroke-width: .6; }
/* the HG monogram, large and faint, bleeding off the right edge */
.hgc-watermark { position: absolute; z-index: -1; right: -9%; top: 50%; width: 62%; transform: translateY(-50%); opacity: .13; pointer-events: none; }
/* a soft light sweep across the top, like foil catching the light */
.hgc::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.07) 100%); }

.hgc-top, .hgc-mid, .hgc-bottom { position: absolute; left: 6.5%; right: 6.5%; z-index: 1; }
.hgc-top { top: 7%; display: flex; align-items: center; justify-content: space-between; }
.hgc-brand { display: flex; align-items: center; gap: 2.2cqw; }
.hgc-brand .hgc-mono { width: 13cqw; height: auto; filter: drop-shadow(0 0 .4cqw rgba(226,178,96,.35)) brightness(1.15) contrast(1.25); }
.hgc-brand .hgc-word { width: 27cqw; height: auto; }
.hgc-kind { font-size: 2.6cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--hgc-gold-2); font-weight: 600; text-align: right; line-height: 1.35; }
.hgc-kind small { display: block; letter-spacing: .12em; font-size: 2.2cqw; color: var(--hgc-muted); text-transform: none; font-weight: 500; }

.hgc-mid { top: 34%; }
.hgc-occasion { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-style: italic; font-size: 5.6cqw; color: var(--hgc-gold-2); line-height: 1; }
.hgc-amount { margin-top: 1.2cqw; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 13.5cqw; line-height: .95; letter-spacing: -.01em;
    background: linear-gradient(180deg, var(--hgc-gold-2) 0%, var(--hgc-gold) 55%, #b9873a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hgc-amount .hgc-cur { font-size: .42em; letter-spacing: .06em; margin-left: .25em; vertical-align: .55em; }

.hgc-bottom { bottom: 7%; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.hgc-code { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 3.3cqw; letter-spacing: .14em; color: var(--hgc-ink); }
.hgc-meta { margin-top: 1cqw; font-size: 2.4cqw; color: var(--hgc-muted); letter-spacing: .04em; }
.hgc-meta b { color: var(--hgc-ink); font-weight: 600; }
.hgc-for { text-align: right; font-size: 2.5cqw; color: var(--hgc-muted); line-height: 1.4; }
.hgc-for b { display: block; font-size: 3.4cqw; color: var(--hgc-ink); font-weight: 600; }
/* a gold foil emblem: the "seal" of a real card */
.hgc-foil { position: absolute; z-index: 1; right: 6.5%; top: 38%; width: 10.5cqw; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3cf 0%, var(--hgc-gold-2) 22%, var(--hgc-gold) 55%, #9c6d28 100%);
    box-shadow: 0 0 0 .5cqw rgba(255,255,255,.12), inset 0 0 0 .6cqw rgba(0,0,0,.08); display: grid; place-items: center; }
.hgc-foil img { width: 70%; filter: brightness(.35) sepia(1) saturate(2) hue-rotate(-10deg); opacity: .8; }

/* occasion artwork: gold line drawings on the left half */
.hgc-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hgc-art * { fill: none; stroke: var(--hgc-gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.hgc-art .fill { fill: var(--hgc-gold); stroke: none; }
.hgc-art { opacity: .55; }

/* a store's own card: valid only there */
.hgc-store { position: absolute; z-index: 1; left: 0; right: 0; top: 23%; padding: .9cqw 6.5%; font-size: 2.5cqw; letter-spacing: .1em; text-transform: uppercase;
    background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0)); color: var(--hgc-gold-2); }

/* ── the six colours ───────────────────────────────────────────────────────── */
.hgc--sapphire .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #3442e0 0%, rgba(52,66,224,0) 55%), linear-gradient(135deg, #04041a 0%, #10166a 50%, #2b37cf 100%); }
.hgc--onyx .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #3a3a42 0%, rgba(58,58,66,0) 55%), linear-gradient(135deg, #050506 0%, #141418 55%, #2a2a31 100%); }
.hgc--emerald .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #0f8a72 0%, rgba(15,138,114,0) 55%), linear-gradient(135deg, #011a14 0%, #04412f 50%, #0b6e57 100%); }
.hgc--crimson .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #c0262d 0%, rgba(192,38,45,0) 55%), linear-gradient(135deg, #1c0204 0%, #5a0d12 50%, #9c1820 100%); }
.hgc--rose .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #f39ab9 0%, rgba(243,154,185,0) 55%), linear-gradient(135deg, #3a0b20 0%, #8a2350 50%, #d0638e 100%); }
.hgc--rose { --hgc-gold: #f7d7a0; --hgc-gold-2: #fff0d2; --hgc-line: rgba(255, 230, 200, .25); }
.hgc--pearl { --hgc-gold: #b8862f; --hgc-gold-2: #9a6b1e; --hgc-ink: #14183d; --hgc-muted: rgba(20, 24, 61, .66); --hgc-line: rgba(160, 120, 50, .22);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -18px rgba(40,30,10,.45), 0 2px 6px rgba(40,30,10,.18); }
.hgc--pearl .hgc-bg { background: radial-gradient(120% 140% at 100% 0%, #ffffff 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #f4ecda 0%, #fbf6ea 45%, #e9dcbd 100%); }
.hgc--pearl .hgc-amount { background: linear-gradient(180deg, #c9973f 0%, #a3721f 60%, #7a5314 100%); -webkit-background-clip: text; background-clip: text; }
.hgc--pearl .hgc-watermark { opacity: .18; }
.hgc--pearl .hgc-brand img, .hgc--pearl .hgc-foil img { filter: brightness(.62) saturate(1.5) contrast(1.3); }
.hgc--pearl .hgc-store { background: linear-gradient(90deg, rgba(160,120,50,.16), rgba(0,0,0,0)); color: #7a5314; }

/* the colour picker swatches (shop) */
.hgc-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; cursor: pointer; }
.hgc-swatch[aria-checked="true"] { border-color: #e2b260; box-shadow: 0 0 0 3px rgba(226,178,96,.35); }
.hgc-swatch--sapphire { background: linear-gradient(135deg, #10166a, #2b37cf); }
.hgc-swatch--onyx { background: linear-gradient(135deg, #050506, #2a2a31); }
.hgc-swatch--emerald { background: linear-gradient(135deg, #04412f, #0b6e57); }
.hgc-swatch--crimson { background: linear-gradient(135deg, #5a0d12, #9c1820); }
.hgc-swatch--rose { background: linear-gradient(135deg, #8a2350, #d0638e); }
.hgc-swatch--pearl { background: linear-gradient(135deg, #f4ecda, #e9dcbd); }