/*
 * /gift and /gift/thanks (2026-10-04): the card, the picker, the thanks panel. A page stylesheet, linked
 * only by the pages whose front matter says `css: gift` (scripts/build.mjs), so the site-wide sheet
 * stays inside its budget (test/budget.test.mjs). The tokens and the shared classes are site.css's.
 */
.gift-hero .wrap { align-items: start; }
.gift-hero .hero-note.left { justify-content: flex-start; }
.gift-card { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1.586; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; color: #f3f1ff; overflow: hidden;
  background: radial-gradient(28rem 16rem at 85% -10%, rgba(224,98,155,.45), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(108,92,231,.6), transparent 60%), linear-gradient(150deg, #241c52, #0f0c22);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-3); }
.gift-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 80% 70% at 80% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 80% 0%, #000 20%, transparent 70%); pointer-events: none; }
.gift-card > * { position: relative; }
.gift-card-top, .gift-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gift-card-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.gift-card-brand img { border-radius: 7px; }
.gift-card-kind { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #cfcaf5; }
.gift-card-mid { display: flex; flex-direction: column; gap: 2px; }
.gift-card-value { font-size: 46px; line-height: 50px; font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.gift-card-unit { font-size: 14px; color: #cfcaf5; }
.gift-card-to { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gift-card-paid { font-size: 12.5px; color: #cfcaf5; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.gift-card-bonus { display: inline-flex; align-items: center; gap: 3px; color: #ffd28a; font-weight: 600; }
.gift-card-bonus[hidden] { display: none; }
.gift-card-code { margin-top: 10px; font-size: 14px; letter-spacing: .12em; color: rgba(243,241,255,.7); white-space: nowrap; }
.gift-form { gap: 16px; padding: 24px; box-shadow: var(--shadow-2); }
.gift-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gift-set legend { padding: 0; margin-bottom: 8px; }
.gift-cur { width: fit-content; }
.gift-cur label { position: relative; }
.gift-cur input, .gift-amt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gift-cur span { height: 30px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.gift-cur input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.gift-cur input:focus-visible + span, .gift-amt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.gift-amts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gift-amt { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; background: var(--surface); text-align: center; }
.gift-amt:hover { border-color: var(--accent-line); }
.gift-amt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-soft); }
.gift-amt-face { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gift-amt-gets { font-size: 11.5px; line-height: 15px; color: var(--muted); }
.gift-amt:has(input:checked) .gift-amt-gets { color: var(--accent-ink); }
.gift-other { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.gift-other .gift-input { width: 120px; }
.gift-input { height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; width: 100%; min-width: 0; }
textarea.gift-input { height: auto; padding: 10px 12px; resize: vertical; line-height: 22px; }
.gift-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gift-field { display: flex; flex-direction: column; gap: 6px; }
.gift-field .lbl { font-size: 13px; }
.gift-worth { padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ink); font-size: 14.5px; line-height: 22px; font-weight: 500; }
.gift-worth span { font-weight: 700; font-variant-numeric: tabular-nums; }
.gift-more { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.gift-more summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.gift-more summary::-webkit-details-marker { display: none; }
.gift-more[open] summary .i { transform: rotate(180deg); }
.gift-more[open] { padding-bottom: 14px; }
.gift-more .gift-field + .gift-field { margin-top: 12px; }
.gift-error { color: var(--danger); font-size: 14px; }
.gift-error[hidden], .gift-buy[hidden] { display: none; }
.gift-buy { width: 100%; }
.gift-pay, .gift-vat { display: flex; gap: 6px; align-items: flex-start; }
.gift-pay .i, .gift-vat .i { margin-top: 3px; flex-shrink: 0; }
.gift-sub { margin: 8px 0 18px; }
#redeem.gift-sub, .steps + .gift-sub { margin-top: 40px; }
.gift-key + .gift-sub { margin-top: 64px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.steps .step p a { font-weight: 600; }
.gift-redeem-cta { margin-top: 24px; }
.gift-list { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); font-size: 15px; line-height: 24px; margin: 16px 0 20px; }
.gift-list code, .gift-bases code, .gift-tools code, .gift-setups code { overflow-wrap: anywhere; }
.gift-bases p { font-size: 14px; }
/* The setups take the full width (Bruno, 2026-10-04: "focus on configuration"); min-width keeps a long line
   scrolling inside its pane instead of widening the page. */
.gift-setups { min-width: 0; }
.gift-parts .h4 code { font-size: 15px; color: var(--accent-ink); }
.gift-thanks { gap: 14px; padding: 24px; box-shadow: var(--shadow-2); }
.gift-status { font-size: 15px; color: var(--ink-2); }
.gift-status[hidden], .gift-code-row[hidden], [data-gift-result][hidden], [data-gift-code-gone][hidden] { display: none; }
.gift-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gift-code { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: .06em; padding: 8px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); user-select: all; }
.gift-thanks .gift-card { max-width: none; }
@media (max-width: 880px) {
  .gift-amts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.four { grid-template-columns: 1fr; }
  .gift-card { padding: 18px 20px; border-radius: 16px; }
  .gift-card-value { font-size: 38px; line-height: 42px; }
  .gift-card-code { font-size: 12.5px; letter-spacing: .08em; }
  .gift-code { font-size: 18px; letter-spacing: .03em; }
  .gift-form, .gift-thanks { padding: 18px; }
}

/* THE GIFT ON THE GIFT (2026-10-04): from 100 a second, gold card sits behind the first, tilted up
   out of it, with a x1.5 bow and the extra along its top edge, where it shows. It slides up when the
   bonus starts and back down when it stops. */
.gift-card-stack { position: relative; width: 100%; max-width: 420px; padding-top: 58px; }
.gift-card-stack .gift-card { z-index: 1; }
.gift-card-extra { position: absolute; top: 0; left: 6%; right: -4%; aspect-ratio: 1.586; border-radius: 18px; padding: 13px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #1d1405; background: linear-gradient(135deg, #ffe08a, #f5b84a 55%, #e8970d); box-shadow: 0 18px 40px -18px rgba(232, 151, 13, .7); transform: rotate(4deg); transform-origin: 20% 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.gift-card-extra[hidden] { display: flex; opacity: 0; transform: rotate(0deg) translateY(56px); pointer-events: none; }
.gift-card-bow { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(29, 20, 5, .9); color: #ffe08a; font-weight: 750; font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap; }
.gift-card-extra-line { font-size: 13px; font-weight: 600; white-space: nowrap; padding-top: 3px; }
.gift-card-extra-line b { font-size: 17px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .gift-card-extra { transition: none; } }

/* The tools for the business, as chips rather than a line of broken code. */
.gift-tools { margin-top: 14px; display: grid; gap: 14px; max-width: 880px; }
.gift-tools-head { display: flex; gap: 12px; align-items: flex-start; }
.gift-tools-head .h4 { margin: 0 0 4px; }
.gift-tool-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gift-tool-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--muted); }
.gift-tool-chips code { white-space: nowrap; color: var(--accent-ink); }
.gift-tools-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.gift-tools-links a { display: inline-flex; align-items: center; gap: 4px; }

/* Where the credits work, under the hero's card. */
.gift-agents { justify-content: flex-start; margin-top: 4px; }
.gift-agents .agent-tile { width: 36px; height: 36px; border-radius: 10px; }
.gift-agents .agent-tile img { width: 22px; height: 22px; }
/* Twelve tiles since the six agents joined (Bruno, 2026-10-05). A grid rather than a wrapping row, so
   they never leave one tile alone on a second line: one row of twelve that shrinks to the column (down to
   30 px at the narrowest desktop column), and on a phone two even rows of six. */
.gift-agents .agent-logos { display: grid; grid-template-columns: repeat(12, minmax(0, 36px)); gap: 6px; flex: 1 1 100%; }
.gift-agents .agent-logos .agent-tile { width: auto; height: auto; aspect-ratio: 1; }
.gift-agents .agent-logos .agent-tile img { width: 62%; height: auto; }
@media (max-width: 560px) { .gift-agents .agent-logos { grid-template-columns: repeat(6, 40px); gap: 8px; } }

/* OpenClaw, Hermes and the other agents: a second box under the main one, its own heading. */
.gift-setups + .gift-more-h, .code.tabbed + .gift-more-h { margin-top: 48px; }
.gift-more-lead { margin: -8px 0 18px; color: var(--ink-2); }

/* On a phone the gold card stays inside the column: its overhang and tilt scrolled the page sideways. */
@media (max-width: 560px) {
  .gift-card-extra { left: 10%; right: 0; transform: rotate(3deg); }
}

/* THE SEASONS (Bruno, 2026-10-05: `/gift?theme=christmas`, then ten more and the seasons by date).
   Everything here waits for an attribute only the hero's inline script sets (blocks.mjs giftThemeBoot),
   so a page without JavaScript never matches a rule of it:
     - <html data-gift-theme="…">, the page's theme: the hero's colours and the accent its form uses;
     - <html data-gift-card="…">, the card's skin, which the card-design picker changes on its own
       ("plain" when the card is plain, which matches no skin).
   These are the parts that must be right in the first frame; the moving decorations are
   css/gift-deco*.css and js/gift-deco*.js, fetched after the first paint. light-dark() picks the light
   or the dark value from the color-scheme site.css sets for each mode, so one rule serves both; the text
   colours hold AA on their hero (4.5:1 small, 3:1 for the display H1), and every accent carries the
   button's white words at 4.5:1 (test/gift-seasons checks the pairs). */
html[data-gift-theme] .gift-hero { position: relative; isolation: isolate; }
html[data-gift-theme] .gift-hero > .wrap { position: relative; z-index: 1; }
/* The picker shows once the pre-paint script has run: without script there is no buying. */
html:not([data-gift-card]) .gift-design { display: none; }

/* light-dark() or nothing: a browser without it keeps the plain hero colours, since an accent it
   could not read would leave the buy button without a background. The words, the card and the
   decorations stay. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="christmas"] .gift-hero {
  --accent: light-dark(#b4232f, #c22d3a); --accent-hover: light-dark(#9a1d28, #a92430);
  --accent-ink: light-dark(#a11d2a, #ff9aa2); --accent-soft: light-dark(rgba(180,35,47,.10), rgba(255,120,130,.14)); --accent-line: light-dark(rgba(180,35,47,.32), rgba(255,154,162,.35));
  background:
    radial-gradient(40rem 22rem at 88% -6rem, light-dark(rgba(196,30,58,.13), rgba(214,40,60,.22)), transparent 70%),
    radial-gradient(36rem 20rem at 6% -2rem, light-dark(rgba(19,112,63,.12), rgba(52,168,100,.16)), transparent 70%),
    radial-gradient(24rem 14rem at 50% 0, light-dark(rgba(200,150,30,.10), rgba(255,211,110,.10)), transparent 70%),
    linear-gradient(180deg, light-dark(#eef3fa, #0a1424), var(--bg));
}
html[data-gift-theme="christmas"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#b0122c, #ff7a85), light-dark(#946000, #ffd36e) 55%, light-dark(#11683a, #6fe0a0)); }
}
html[data-gift-card="christmas"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(255,211,110,.40), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(214,40,60,.55), transparent 60%), linear-gradient(150deg, #0f4a31, #06190f);
}
html[data-gift-card="christmas"] .gift-card::before { background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.7px), radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1.7px); background-size: 34px 34px, 22px 22px; background-position: 0 0, 11px 13px; }
html[data-gift-card="christmas"] .gift-card-kind::before { content: "Christmas "; }
html[data-gift-card="christmas"] .gift-card-kind { color: #ffd88a; }

@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="halloween"] .gift-hero {
  --accent: #c2410c; --accent-hover: #a3370a;
  --accent-ink: light-dark(#b13a0a, #fdba74); --accent-soft: light-dark(rgba(194,65,12,.10), rgba(251,146,60,.14)); --accent-line: light-dark(rgba(194,65,12,.32), rgba(253,186,116,.35));
  background:
    radial-gradient(34rem 20rem at 70% -5rem, light-dark(rgba(234,88,12,.16), rgba(249,115,22,.20)), transparent 70%),
    radial-gradient(36rem 20rem at 4% -2rem, light-dark(rgba(109,40,217,.12), rgba(139,92,246,.20)), transparent 70%),
    linear-gradient(180deg, light-dark(#fff1e4, #150a1d), var(--bg));
}
html[data-gift-theme="halloween"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#c2410c, #fb923c), light-dark(#7e22ce, #c084fc)); }
}
html[data-gift-card="halloween"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(249,115,22,.50), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(126,34,206,.55), transparent 60%), linear-gradient(150deg, #2b1243, #0c0612);
}
/* A web in the card's corner instead of the grid. */
html[data-gift-card="halloween"] .gift-card::before {
  -webkit-mask-image: none; mask-image: none; background-size: 130px 130px; background-repeat: no-repeat; background-position: right -6px top -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.8'%3E%3Cpath d='M100 0 0 0M100 0 20 40M100 0 50 70M100 0 80 95M100 0 100 100M76 0Q78 14 88 22Q95 20 100 24M52 0Q56 26 72 44Q86 46 100 48M28 0Q34 38 58 64Q80 70 100 72'/%3E%3C/svg%3E");
}
html[data-gift-card="halloween"] .gift-card-kind::before { content: "Halloween "; }
html[data-gift-card="halloween"] .gift-card-kind { color: #fdba74; }

/* New Year: gold on midnight blue. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="newyear"] .gift-hero {
  --accent: light-dark(#8a6400, #8f6800); --accent-hover: light-dark(#735300, #765600);
  --accent-ink: light-dark(#7a5800, #f5cd5c); --accent-soft: light-dark(rgba(138,100,0,.10), rgba(245,205,92,.13)); --accent-line: light-dark(rgba(138,100,0,.32), rgba(245,205,92,.35));
  background:
    radial-gradient(38rem 22rem at 82% -6rem, light-dark(rgba(214,168,40,.16), rgba(245,196,70,.16)), transparent 70%),
    radial-gradient(40rem 22rem at 8% -4rem, light-dark(rgba(30,52,130,.13), rgba(60,90,200,.26)), transparent 70%),
    linear-gradient(180deg, light-dark(#eef1fa, #060c20), var(--bg));
}
html[data-gift-theme="newyear"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#1c2f74, #ffe08a), light-dark(#8a6400, #f5c344) 60%, light-dark(#6b4c00, #fff1c4)); }
}
html[data-gift-card="newyear"] .gift-card {
  background: radial-gradient(26rem 15rem at 90% -14%, rgba(245,196,70,.42), transparent 60%), radial-gradient(22rem 16rem at 0% 110%, rgba(60,90,200,.45), transparent 60%), linear-gradient(150deg, #11205a, #03071a);
}
html[data-gift-card="newyear"] .gift-card::before { background-image: radial-gradient(circle, rgba(255,224,138,.75) .9px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.4) .8px, transparent 1.5px); background-size: 46px 38px, 29px 31px; background-position: 7px 5px, 19px 17px; }
html[data-gift-card="newyear"] .gift-card-kind::before { content: "New Year "; }
html[data-gift-card="newyear"] .gift-card-kind { color: #ffe08a; }

/* Lunar New Year: red and gold; the card is a red envelope with its gold flap and seal. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="lunarnewyear"] .gift-hero {
  --accent: light-dark(#b91c1c, #c22020); --accent-hover: light-dark(#991717, #a51b1b);
  --accent-ink: light-dark(#a3161b, #ffaf9e); --accent-soft: light-dark(rgba(185,28,28,.10), rgba(255,140,120,.14)); --accent-line: light-dark(rgba(185,28,28,.32), rgba(255,175,158,.35));
  background:
    radial-gradient(38rem 22rem at 85% -6rem, light-dark(rgba(214,160,30,.18), rgba(240,180,50,.16)), transparent 70%),
    radial-gradient(40rem 22rem at 6% -4rem, light-dark(rgba(200,16,46,.13), rgba(200,16,46,.30)), transparent 70%),
    linear-gradient(180deg, light-dark(#fff2ea, #1c0606), var(--bg));
}
html[data-gift-theme="lunarnewyear"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#b0101e, #ff8a7a), light-dark(#8f5d00, #ffd36e)); }
}
html[data-gift-card="lunarnewyear"] .gift-card {
  background: radial-gradient(30rem 16rem at 50% -30%, rgba(255,214,120,.22), transparent 60%), linear-gradient(160deg, #d41a2e, #9c0c1d 60%, #6e0714);
  box-shadow: 0 0 0 1px rgba(255,214,120,.45) inset, 0 0 0 5px rgba(120,6,18,.6) inset, var(--shadow-3);
}
/* The flap: a gold-edged curve over the top third, and the seal where it closes. */
html[data-gift-card="lunarnewyear"] .gift-card::before { -webkit-mask-image: none; mask-image: none; background-image: radial-gradient(130% 62% at 50% -12%, rgba(0,0,0,.16) 0 68%, rgba(255,214,120,.85) 68.6% 69.6%, transparent 70.2%); background-size: auto; }
html[data-gift-card="lunarnewyear"] .gift-card::after { content: ""; position: absolute; left: calc(50% - 15px); top: calc(43.4% - 15px); width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a3, #e2a72e 60%, #a8740f); box-shadow: 0 2px 6px rgba(60,0,0,.45), inset 0 0 0 3px rgba(168,116,15,.55); pointer-events: none; }
html[data-gift-card="lunarnewyear"] .gift-card-kind { font-size: 0; color: #ffd88a; }
html[data-gift-card="lunarnewyear"] .gift-card-kind::before { content: "Lunar New Year"; font-size: 12px; }

/* Valentine's: rose, pink and red. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="valentines"] .gift-hero {
  --accent: light-dark(#be185d, #c01a62); --accent-hover: light-dark(#a1144f, #a3154f);
  --accent-ink: light-dark(#a3134f, #ff9cc2); --accent-soft: light-dark(rgba(190,24,93,.09), rgba(255,140,190,.14)); --accent-line: light-dark(rgba(190,24,93,.30), rgba(255,156,194,.35));
  background:
    radial-gradient(38rem 22rem at 86% -6rem, light-dark(rgba(225,29,72,.13), rgba(225,29,72,.24)), transparent 70%),
    radial-gradient(36rem 20rem at 6% -3rem, light-dark(rgba(244,114,182,.16), rgba(244,114,182,.16)), transparent 70%),
    linear-gradient(180deg, light-dark(#fff0f4, #1c0812), var(--bg));
}
html[data-gift-theme="valentines"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#be123c, #ff8fab), light-dark(#a1146a, #ffc2d6)); }
}
html[data-gift-card="valentines"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(255,143,171,.45), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(225,29,72,.5), transparent 60%), linear-gradient(150deg, #5c0b2c, #1e0410);
}
html[data-gift-card="valentines"] .gift-card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' fill-opacity='.16' d='M20 29s-8-4.8-8-10a4.4 4.4 0 0 1 8-2.5 4.4 4.4 0 0 1 8 2.5c0 5.2-8 10-8 10z'/%3E%3C/svg%3E"); background-size: 34px 34px; }
html[data-gift-card="valentines"] .gift-card-kind::before { content: "Valentine's "; }
html[data-gift-card="valentines"] .gift-card-kind { color: #ffc2d6; }

/* Code (Programmers' Day, Pi Day): a terminal's green on black. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="code"] .gift-hero {
  --accent: light-dark(#047857, #06774f); --accent-hover: light-dark(#036146, #04603f);
  --accent-ink: light-dark(#03684b, #4ade80); --accent-soft: light-dark(rgba(4,120,87,.09), rgba(74,222,128,.12)); --accent-line: light-dark(rgba(4,120,87,.32), rgba(74,222,128,.32));
  background:
    radial-gradient(38rem 22rem at 84% -6rem, light-dark(rgba(16,185,129,.13), rgba(34,197,94,.17)), transparent 70%),
    radial-gradient(34rem 20rem at 6% -3rem, light-dark(rgba(14,116,144,.10), rgba(14,165,233,.12)), transparent 70%),
    linear-gradient(180deg, light-dark(#eef8f3, #030c08), var(--bg));
}
html[data-gift-theme="code"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#03684b, #4ade80), light-dark(#0e6a85, #a7f3d0)); }
}
html[data-gift-card="code"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(74,222,128,.28), transparent 60%), linear-gradient(150deg, #0b1a12, #030805);
  box-shadow: 0 0 0 1px rgba(74,222,128,.28) inset, var(--shadow-3);
}
html[data-gift-card="code"] .gift-card::before { -webkit-mask-image: none; mask-image: none; background-image: repeating-linear-gradient(180deg, rgba(74,222,128,.07) 0 1px, transparent 1px 4px); background-size: auto; }
html[data-gift-card="code"] .gift-card-kind { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #4ade80; }
html[data-gift-card="code"] .gift-card-kind::before { content: "</> "; }

/* Easter: pastels, spring. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="easter"] .gift-hero {
  --accent: light-dark(#2f7a3a, #2e7a3c); --accent-hover: light-dark(#256230, #24632f);
  --accent-ink: light-dark(#2b6e35, #a6e8ae); --accent-soft: light-dark(rgba(47,122,58,.09), rgba(166,232,174,.12)); --accent-line: light-dark(rgba(47,122,58,.30), rgba(166,232,174,.32));
  background:
    radial-gradient(34rem 20rem at 88% -5rem, light-dark(rgba(244,174,206,.30), rgba(244,140,190,.16)), transparent 70%),
    radial-gradient(34rem 20rem at 46% -7rem, light-dark(rgba(255,226,140,.32), rgba(255,220,120,.10)), transparent 70%),
    radial-gradient(36rem 20rem at 4% -3rem, light-dark(rgba(170,150,240,.24), rgba(160,140,250,.18)), transparent 70%),
    linear-gradient(180deg, light-dark(#fbf8ef, #100e18), var(--bg));
}
html[data-gift-theme="easter"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#a8336c, #ffb3d1), light-dark(#6542b8, #cbb8ff) 55%, light-dark(#2b6e35, #a8f0b0)); }
}
html[data-gift-card="easter"] .gift-card {
  background: radial-gradient(24rem 14rem at 90% -12%, rgba(255,214,140,.45), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(110,200,170,.45), transparent 60%), linear-gradient(150deg, #4a3283, #1c2f4a);
}
html[data-gift-card="easter"] .gift-card::before { -webkit-mask-image: radial-gradient(ellipse 42% 44% at 86% 50%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 42% 44% at 86% 50%, #000 25%, transparent 75%); background-image: radial-gradient(ellipse 5px 6.6px, rgba(255,190,220,.6) 98%, transparent), radial-gradient(ellipse 5px 6.6px, rgba(190,240,200,.55) 98%, transparent), radial-gradient(ellipse 5px 6.6px, rgba(255,236,160,.55) 98%, transparent); background-size: 72px 64px; background-position: 10px 8px, 46px 40px, 28px 70px; }
html[data-gift-card="easter"] .gift-card-kind::before { content: "Easter "; }
html[data-gift-card="easter"] .gift-card-kind { color: #ffe3a3; }

/* Graduation: navy and gold. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="graduation"] .gift-hero {
  --accent: light-dark(#1e3a8a, #2a4aa6); --accent-hover: light-dark(#172e6e, #223d8c);
  --accent-ink: light-dark(#1e3a8a, #f4c95d); --accent-soft: light-dark(rgba(30,58,138,.09), rgba(244,201,93,.12)); --accent-line: light-dark(rgba(30,58,138,.30), rgba(244,201,93,.34));
  background:
    radial-gradient(38rem 22rem at 84% -6rem, light-dark(rgba(212,160,23,.16), rgba(212,160,23,.15)), transparent 70%),
    radial-gradient(40rem 22rem at 6% -4rem, light-dark(rgba(30,58,138,.13), rgba(42,74,166,.30)), transparent 70%),
    linear-gradient(180deg, light-dark(#eff2fa, #070f26), var(--bg));
}
html[data-gift-theme="graduation"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#1e3a8a, #ffd36e), light-dark(#8a6400, #fff1c1)); }
}
html[data-gift-card="graduation"] .gift-card { background: radial-gradient(26rem 15rem at 88% -12%, rgba(244,201,93,.32), transparent 60%), linear-gradient(150deg, #1a2f6e, #070e26); }
/* A gold mortarboard on the card's right, between the label and the foot, clear of the words. */
html[data-gift-card="graduation"] .gift-card::before { -webkit-mask-image: none; mask-image: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23f4c95d' fill-opacity='.85' d='M24 4 46 13 24 22 2 13zM11 18v9c0 4 6 7 13 7s13-3 13-7v-9l-13 5.4z'/%3E%3Cpath fill='none' stroke='%23f4c95d' stroke-opacity='.85' stroke-width='1.6' stroke-linecap='round' d='M24 13 40 17v11'/%3E%3Ccircle cx='40' cy='30' r='2.2' fill='%23f4c95d' fill-opacity='.85'/%3E%3C/svg%3E") right 22px top 50% / 78px auto no-repeat; }
html[data-gift-card="graduation"] .gift-card-kind::before { content: "Graduation "; }
html[data-gift-card="graduation"] .gift-card-kind { color: #f4c95d; }

/* Back to school: ruled notebook paper by day, a chalkboard by night, pencil yellow. */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="backtoschool"] .gift-hero {
  --accent: light-dark(#2d5a3d, #2f6644); --accent-hover: light-dark(#234830, #255236);
  --accent-ink: light-dark(#2d5a3d, #ffd23f); --accent-soft: light-dark(rgba(45,90,61,.09), rgba(255,210,63,.12)); --accent-line: light-dark(rgba(45,90,61,.30), rgba(255,210,63,.32));
  background:
    linear-gradient(90deg, transparent 0 calc(max(16px, (100% - 1180px) / 2) - 14px), light-dark(rgba(220,60,60,.30), rgba(255,255,255,.08)) calc(max(16px, (100% - 1180px) / 2) - 14px) calc(max(16px, (100% - 1180px) / 2) - 13px), transparent 0),
    repeating-linear-gradient(180deg, transparent 0 31px, light-dark(rgba(70,120,200,.16), rgba(255,255,255,.045)) 31px 32px),
    linear-gradient(180deg, light-dark(#fdfcf4, #10221a), var(--bg));
}
html[data-gift-theme="backtoschool"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#2d5a3d, #ffd23f), light-dark(#a14a06, #fff0b3)); }
}
html[data-gift-card="backtoschool"] .gift-card {
  background: radial-gradient(26rem 15rem at 80% -10%, rgba(255,255,255,.10), transparent 60%), linear-gradient(150deg, #24452f, #12261a);
  box-shadow: 0 0 0 5px #9c6b3c inset, 0 0 0 6px rgba(0,0,0,.35) inset, var(--shadow-3);
}
html[data-gift-card="backtoschool"] .gift-card::before { -webkit-mask-image: none; mask-image: none; background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(255,255,255,.06) 25px 26px); background-size: auto; }
html[data-gift-card="backtoschool"] .gift-card-kind { font-size: 0; color: #ffd23f; }
html[data-gift-card="backtoschool"] .gift-card-kind::before { content: "Back to school"; font-size: 12px; }

/* Shopping season (Singles' Day, Black Friday, Cyber Monday): neon on black in either mode, so the
   hero takes the dark tokens whatever the visitor's mode. The words say what is true: the bonus is
   the same all year (GIFT_THEMES.shopping). */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="shopping"] .gift-hero {
  color-scheme: dark;
  --bg: #050507; --bg-2: #0b0b10; --surface: #111117; --surface-2: #18181f; --surface-3: #22222b; --elevated: #1c1c24;
  --line: #2a2a35; --line-strong: #3a3a48; --ink: #f1f1f6; --ink-2: #c9c9d3; --muted: #a0a0ad;
  --ok: #34d399; --ok-soft: rgba(52,211,153,.12); --danger: #ff6b78;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6); --shadow-3: 0 4px 12px rgba(0,0,0,.4), 0 30px 70px -24px rgba(0,0,0,.85);
  --accent: #c2127e; --accent-hover: #a30f6a;
  --accent-ink: #ff6ae0; --accent-soft: rgba(255,60,210,.13); --accent-line: rgba(255,106,224,.4);
  color: var(--ink);
  background:
    radial-gradient(36rem 20rem at 86% -6rem, rgba(255,43,214,.26), transparent 70%),
    radial-gradient(36rem 20rem at 8% -4rem, rgba(0,229,255,.18), transparent 70%),
    linear-gradient(180deg, #030305, #050507);
}
html[data-gift-theme="shopping"] .gift-hero .grad { background-image: linear-gradient(92deg, #ff4fd8, #3ee8ff 55%, #d4ff3a); }
}
html[data-gift-card="shopping"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(255,43,214,.42), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(0,229,255,.32), transparent 60%), linear-gradient(150deg, #0d0d14, #020203);
  box-shadow: 0 0 0 1.5px rgba(255,79,216,.9) inset, 0 0 22px -2px rgba(255,43,214,.45), var(--shadow-3);
}
html[data-gift-card="shopping"] .gift-card::before { background-image: linear-gradient(rgba(62,232,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(62,232,255,.09) 1px, transparent 1px); }
html[data-gift-card="shopping"] .gift-card-kind { color: #3ee8ff; }

/* Birthday: no season of its own (a card design, and the thanks page of a birthday card). */
@supports (color: light-dark(#000, #fff)) {
html[data-gift-theme="birthday"] .gift-hero {
  --accent: light-dark(#0f766e, #0f7a71); --accent-hover: light-dark(#0b5f58, #0b625b);
  --accent-ink: light-dark(#0d6b63, #5eead4); --accent-soft: light-dark(rgba(15,118,110,.09), rgba(94,234,212,.12)); --accent-line: light-dark(rgba(15,118,110,.30), rgba(94,234,212,.32));
  background:
    radial-gradient(34rem 20rem at 88% -5rem, light-dark(rgba(236,72,153,.13), rgba(236,72,153,.20)), transparent 70%),
    radial-gradient(30rem 18rem at 48% -7rem, light-dark(rgba(245,158,11,.14), rgba(245,158,11,.12)), transparent 70%),
    radial-gradient(34rem 20rem at 4% -3rem, light-dark(rgba(20,184,166,.13), rgba(20,184,166,.18)), transparent 70%),
    linear-gradient(180deg, light-dark(#fff7ee, #120c1a), var(--bg));
}
html[data-gift-theme="birthday"] .gift-hero .grad { background-image: linear-gradient(92deg, light-dark(#be185d, #ff8fc7), light-dark(#9a5b00, #ffd36e) 55%, light-dark(#0d6b63, #5eead4)); }
}
html[data-gift-card="birthday"] .gift-card {
  background: radial-gradient(26rem 15rem at 88% -12%, rgba(255,143,199,.42), transparent 60%), radial-gradient(24rem 18rem at 0% 110%, rgba(45,212,191,.38), transparent 60%), linear-gradient(150deg, #3c1466, #140628);
}
/* Confetti on the card: four colours of little pieces at their own spacing. */
html[data-gift-card="birthday"] .gift-card::before { background-image: radial-gradient(circle, rgba(255,143,199,.7) 1.6px, transparent 2.2px), radial-gradient(circle, rgba(255,211,110,.7) 1.4px, transparent 2px), radial-gradient(circle, rgba(94,234,212,.65) 1.5px, transparent 2.1px), radial-gradient(circle, rgba(167,139,250,.7) 1.3px, transparent 1.9px); background-size: 47px 41px, 37px 53px, 59px 37px, 43px 61px; background-position: 4px 9px, 21px 30px, 33px 3px, 12px 44px; }
html[data-gift-card="birthday"] .gift-card-kind::before { content: "Birthday "; }
html[data-gift-card="birthday"] .gift-card-kind { color: #ffd36e; }

/* The buy button's glow in the season's accent rather than the site's violet. */
html[data-gift-theme] .gift-hero .btn.primary { box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); }