/* Gift cards — money onto cards and off them, by store and by channel, as a ledger.
   The screen wears Loss Prevention's skin, as Instagram, Tips and Waste Logs do: the --lp-* tokens,
   the Fraunces/Karla pair, the top bar, badge and sidebar come from web/styles.css, where the
   Lovable-derived block names .gift-cards-main beside .instagram-main. What is here is this screen's
   own components in that language -- one card surface with a hairline and a soft shadow, small-caps
   labels over display-face figures, the title with its filters unboxed beneath it, a filled
   dark-brown pill for the chosen range and stores, a terracotta Apply, charts on a value scale with
   light gridlines. Every rule is scoped under .gift-cards-main.

   Colour means one of four things: the chosen range or store, the direction of a change, a card
   issued without payment, and the marks. The marks are two hues only -- money put onto cards in the
   terracotta, money spent off them in a blue from the other side of the wheel (the pair passes the
   palette validator on the card: CVD ΔE 18.4, normal-vision ΔE 23.5, both 3:1 against it). Reloads
   are the terracotta hatched, so they read as money onto cards without a third hue; a channel is a
   step of its panel's hue, with its name beside it, and "not known" is hatched grey, an absence
   rather than a category. */

.gift-cards-main{
  --gc-onto:var(--lp-accent);
  --gc-off:#4a72b5;
  --gc-onto-deep:color-mix(in srgb, var(--gc-onto) 58%, var(--lp-ink));
  --gc-off-deep:color-mix(in srgb, var(--gc-off) 60%, var(--lp-ink));
  --gc-onto-light:color-mix(in srgb, var(--gc-onto) 38%, var(--lp-card));
  --gc-off-light:color-mix(in srgb, var(--gc-off) 36%, var(--lp-card));
  --gc-quiet:color-mix(in srgb, var(--lp-muted) 42%, var(--lp-card));
  --gc-reload:repeating-linear-gradient(135deg, var(--gc-onto) 0 2px, color-mix(in srgb, var(--gc-onto) 30%, var(--lp-card)) 2px 5px);
  --gc-unknown:repeating-linear-gradient(135deg, color-mix(in srgb, var(--lp-muted) 55%, var(--lp-card)) 0 2px, var(--lp-card) 2px 5px);
  --gc-good:#2f7a5b;
  --gc-bad:var(--lp-high);
  /* A change's pill: a light tint of its direction with a darker shade inside. */
  --gc-good-tint:color-mix(in srgb, var(--gc-good) 14%, var(--lp-card));
  --gc-good-ink:color-mix(in srgb, var(--gc-good) 80%, var(--lp-ink));
  --gc-bad-tint:color-mix(in srgb, var(--gc-bad) 12%, var(--lp-card));
  --gc-bad-ink:color-mix(in srgb, var(--gc-bad) 85%, var(--lp-ink));
  /* A card issued without payment: Loss Prevention's medium signal, as a tint with a dark ink. */
  --gc-flag-tint:color-mix(in srgb, var(--lp-medium) 18%, var(--lp-card));
  --gc-flag-ink:color-mix(in srgb, var(--lp-medium) 40%, var(--lp-ink));
  /* A link written in the terracotta is a shade deeper than the Apply button's, so small text keeps
     4.5:1 on the card and on the soft note (the button's own colour is 4.0:1 there). */
  --gc-link:color-mix(in srgb, var(--lp-accent) 72%, var(--lp-ink));
  --gc-grid:color-mix(in srgb, var(--lp-line) 80%, transparent);
  --gc-focus:0 0 0 3px color-mix(in srgb, var(--lp-accent) 28%, transparent);
}
/* The main is a grid, so its header and shell are grid items with min-width:auto; both may shrink. */
.gift-cards-main .topbar,.gift-cards-main .module-shell{min-width:0}
.gift-cards-main .module-shell{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:0 clamp(20px,3vw,44px) 54px}
.gift-cards-main .gc-page{max-width:1320px;margin:0 auto;padding-top:32px;display:grid;gap:22px;min-width:0}
.gift-cards-main :is(.gc-page,.gc-body,.gc-pair,.gc-kpis)>*{min-width:0}
.gift-cards-main .gc-body{display:grid;gap:22px;transition:opacity .18s ease}
.gift-cards-main .gc-page.is-loading .gc-body{opacity:.55}

/* One ring for everything that takes focus on this screen: Loss Prevention's terracotta halo. */
.gift-cards-main :is(button,a,select,input,[tabindex]):focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

/* ── The title and its coverage, then the range and the stores beneath it ────────────────────── */
.gift-cards-main .gc-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.gift-cards-main .gc-title{display:grid;gap:8px;min-width:0}
.gift-cards-main .gc-title h2{margin:0;font-family:var(--lp-display);font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--lp-ink)}
.gift-cards-main .gc-coverage{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;color:var(--lp-muted);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-status{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--gc-good-tint);color:var(--gc-good-ink)}
.gift-cards-main .gc-status[data-status="partial"]{background:var(--gc-flag-tint);color:var(--gc-flag-ink)}

.gift-cards-main .gc-range{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 18px;min-width:0;max-width:100%}
.gift-cards-main .gc-presets{display:flex;flex-wrap:wrap;gap:6px}
.gift-cards-main .gc-preset{height:38px;min-height:38px;padding:0 14px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.gift-cards-main .gc-preset.active{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600}
.gift-cards-main .gc-preset-short{display:none}
.gift-cards-main .gc-custom{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.gift-cards-main .gc-date{display:grid;gap:6px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.gift-cards-main .gc-date input{height:38px;min-height:38px;padding:0 10px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;color-scheme:light}
.gift-cards-main .gc-date input:focus-visible{outline:none;border-color:var(--lp-accent);box-shadow:var(--gc-focus)}
.gift-cards-main .gc-apply{height:38px;min-height:38px;padding:0 16px;border:0;border-radius:8px;background:var(--lp-accent);color:var(--paper);font-size:14px;font-weight:600;cursor:pointer;transition:filter .15s ease}
.gift-cards-main .gc-apply:focus-visible{outline:none;box-shadow:var(--gc-focus)}

/* A store is a chip; the chosen ones are filled like the chosen range. */
.gift-cards-main .gc-stores{display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
.gift-cards-main .gc-chip{min-height:34px;padding:0 13px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-card);color:var(--lp-ink);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.gift-cards-main .gc-chip.active{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600}
@media (hover:hover){
  .gift-cards-main .gc-preset:hover:not(.active),.gift-cards-main .gc-chip:hover:not(.active){background:var(--lp-soft)}
  .gift-cards-main .gc-apply:hover{filter:brightness(.94)}
}

.gift-cards-main .gc-error{margin:0;padding:12px 16px;border:1px solid var(--gc-bad);border-radius:10px;background:var(--lp-card);color:var(--gc-bad);font-weight:600}

/* ── Figures: a small-caps label over a figure in the display face ─────────────────────────── */
.gift-cards-main .gc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* Each card is a subgrid of the row's three lines -- label, figure, change -- so a label that wraps
   to two lines moves every figure in its row down with it. */
.gift-cards-main .gc-kpi{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:18px 18px 16px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.gift-cards-main .gc-kpi p{margin:0}
.gift-cards-main .gc-kpi-label{color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;line-height:1.35;text-transform:uppercase}
.gift-cards-main .gc-kpi .gc-kpi-value{position:relative;margin:8px 0 12px;color:var(--lp-ink);font-family:var(--lp-display);font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gift-cards-main .gc-kpi-figure{display:inline-block;border-radius:6px;cursor:default;outline:none}
.gift-cards-main .gc-kpi-figure:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}
.gift-cards-main .gc-kpi-delta,.gift-cards-main .gc-kpi-foot{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.gift-cards-main .gc-kpi-note{color:var(--lp-muted);font-size:12.5px}
/* A change is a round pill tinted by its direction: the tint carries up or down at a glance, the
   ink inside it is the darker shade so the figure keeps 4.5:1 on its own tint. */
.gift-cards-main .gc-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 11px 4px 10px;border-radius:999px;background:var(--gc-pill-bg,color-mix(in srgb, var(--lp-muted) 13%, var(--lp-card)));color:var(--gc-pill-ink,var(--lp-muted));font-size:12.5px;line-height:1.35;white-space:nowrap;cursor:default;outline:none}
.gift-cards-main .gc-pill:focus-visible,.gift-cards-main .gc-flag:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}
.gift-cards-main .gc-pill strong{font-weight:700;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-kpi-delta[data-direction="up"]{--gc-pill-bg:var(--gc-good-tint);--gc-pill-ink:var(--gc-good-ink)}
.gift-cards-main .gc-kpi-delta[data-direction="down"]{--gc-pill-bg:var(--gc-bad-tint);--gc-pill-ink:var(--gc-bad-ink)}
.gift-cards-main .gc-kpi-delta[data-tone="neutral"]{--gc-pill-bg:color-mix(in srgb, var(--lp-muted) 13%, var(--lp-card));--gc-pill-ink:color-mix(in srgb, var(--lp-ink) 80%, var(--lp-muted))}
.gift-cards-main .gc-arrow{font-size:9px}
/* A card issued without payment: a flag in Loss Prevention's medium tint, and the way to review it. */
.gift-cards-main .gc-flag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--gc-flag-tint);color:var(--gc-flag-ink);font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default;outline:none}
.gift-cards-main .gc-review{color:var(--gc-link);font-size:13px;font-weight:600;text-decoration:none;border-radius:4px}
.gift-cards-main .gc-review::after{content:" →"}
.gift-cards-main .gc-kpi[data-attention="true"] .gc-kpi-label{color:var(--gc-flag-ink)}
/* A hint, on hover or focus: a dark label under what it explains. It opens rightward from its
   target and leftward when that would leave the screen. */
.gift-cards-main .gc-hint-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:5;display:grid;gap:3px;width:max-content;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--lp-ink);color:var(--lp-card);font-family:var(--lp-body);font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.4;white-space:normal;text-transform:none;box-shadow:0 6px 18px color-mix(in srgb, var(--lp-ink) 22%, transparent);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;pointer-events:none}
.gift-cards-main .gc-hint-tip.is-flipped{left:auto;right:0}
.gift-cards-main .gc-hint-tip strong{font-weight:700;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-hint-tip span{color:color-mix(in srgb, var(--lp-card) 76%, transparent)}
.gift-cards-main :is(.gc-pill,.gc-kpi-figure,.gc-flag):is(:hover,:focus)+.gc-hint-tip{opacity:1;visibility:visible;transform:none;transition:opacity .12s ease,transform .12s ease}

/* ── One card, everywhere ───────────────────────────────────────────────────────────────────── */
.gift-cards-main .gc-panel{display:grid;align-content:start;gap:16px;padding:22px 22px 20px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.gift-cards-main .gc-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.gift-cards-main .gc-panel h3{margin:0;font-family:var(--lp-display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--lp-ink)}
.gift-cards-main .gc-panel-sub{margin:4px 0 0;color:var(--lp-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-empty{margin:0;padding:14px 0 6px;color:var(--lp-muted);font-size:14px}
.gift-cards-main .gc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}

/* ── The chart: a value scale with light gridlines ──────────────────────────────────────────── */
.gift-cards-main .gc-plot{position:relative;height:220px;margin:22px 0 0 50px;touch-action:pan-y}
.gift-cards-main .gc-grid{position:absolute;inset:0;pointer-events:none}
.gift-cards-main .gc-gridline{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--gc-grid)}
.gift-cards-main .gc-gridline.base{border-top-color:var(--lp-line)}
.gift-cards-main .gc-tick{position:absolute;right:calc(100% + 8px);top:0;transform:translateY(-50%);color:var(--lp-muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gift-cards-main .gc-columns{position:absolute;inset:0;display:flex;align-items:stretch;pointer-events:none}
/* A bucket is two bars side by side, 2px of card between them, each rounded at its data end only. */
.gift-cards-main .gc-column{position:relative;flex:1 1 0;min-width:1px;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.gift-cards-main .gc-column.missing{background:var(--gc-unknown);opacity:.45}
.gift-cards-main .gc-bar{width:min(38%,15px);min-height:1.5px;border-radius:4px 4px 0 0}
.gift-cards-main .gc-bar.none{visibility:hidden}
.gift-cards-main .gc-bar.onto{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.gift-cards-main .gc-bar.off{background:var(--gc-off)}
.gift-cards-main .gc-segment{flex:1 1 0;min-height:0}
.gift-cards-main .gc-segment.sold{background:var(--gc-onto)}
.gift-cards-main .gc-segment.reload{background:var(--gc-reload)}
.gift-cards-main .gc-column.hover .gc-bar{filter:brightness(.86)}
.gift-cards-main .gc-crosshair{position:absolute;top:0;bottom:0;width:0;border-left:1px solid color-mix(in srgb, var(--lp-ink) 32%, transparent);pointer-events:none}
.gift-cards-main .gc-tip{position:absolute;bottom:calc(100% + 6px);z-index:3;display:flex;flex-direction:column;gap:2px;padding:8px 11px 9px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);box-shadow:var(--lp-shadow-lifted);pointer-events:none;white-space:nowrap}
.gift-cards-main .gc-tip-date{color:var(--lp-primary);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gift-cards-main .gc-tip-row{display:flex;align-items:center;gap:6px;color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-tip-row strong{color:var(--lp-ink);font-size:15px;font-weight:700;line-height:1.3}
.gift-cards-main .gc-tip-muted{color:var(--lp-muted);font-size:11.5px}
.gift-cards-main .gc-axis{display:flex;justify-content:space-between;margin:-8px 0 0 50px;color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}
.gift-cards-main .gc-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;color:var(--lp-muted);font-size:12px}
.gift-cards-main .gc-legend li{display:inline-flex;align-items:center;gap:6px}
.gift-cards-main .gc-swatch{flex:0 0 auto;width:10px;height:10px;border-radius:3px;background:var(--gc-onto)}
.gift-cards-main .gc-swatch.reload{background:var(--gc-reload)}
.gift-cards-main .gc-swatch.redeemed{background:var(--gc-off)}

/* ── Tables: small-caps heads, hairline rows ────────────────────────────────────────────────── */
.gift-cards-main .gc-table{width:100%;border-collapse:collapse;font-size:14px}
.gift-cards-main .gc-table th{padding:0 10px 10px;border-bottom:1px solid var(--lp-line);color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:left;white-space:nowrap;vertical-align:bottom}
.gift-cards-main .gc-table td{padding:12px 10px;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent);vertical-align:middle}
.gift-cards-main .gc-table tbody tr:last-child td{border-bottom:0}
.gift-cards-main .gc-table :is(th,td).num{text-align:right}
.gift-cards-main .gc-table :is(th,td):first-child{padding-left:0}
.gift-cards-main .gc-table :is(th,td):last-child{padding-right:0}
.gift-cards-main .gc-figure{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--lp-ink)}
.gift-cards-main .gc-sub{display:block;color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}

/* By store: the name, a flag where cards went out unpaid, and a pair of bars on one scale. */
.gift-cards-main .gc-store-table td.gc-store{width:42%}
.gift-cards-main .gc-store-table td.num .gc-figure{font-size:15px;font-weight:600}
.gift-cards-main .gc-store-name{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.gift-cards-main .gc-store-name strong{font-family:var(--lp-display);font-size:16px;font-weight:600;color:var(--lp-ink)}
.gift-cards-main .gc-store-name .gc-flag{height:22px;padding:0 8px;font-size:11.5px}
.gift-cards-main .gc-hbars{display:grid;gap:3px;margin-top:9px;max-width:420px}
.gift-cards-main .gc-hbar-track{display:block;height:7px}
.gift-cards-main .gc-hbar{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--gc-onto)}
.gift-cards-main .gc-hbar.redeemed{background:var(--gc-off)}
.gift-cards-main .gc-hbar.none{visibility:hidden}

/* Channels: one bar split by family, its key beneath, then every source by name. */
.gift-cards-main .gc-split{display:flex;gap:2px;height:14px;border-radius:4px;overflow:hidden}
.gift-cards-main .gc-split-part{flex:1 1 0;min-width:3px}
.gift-cards-main :is(.gc-split-part,.gc-split-swatch)[data-family="in_store"]{background:var(--gc-family-1)}
.gift-cards-main :is(.gc-split-part,.gc-split-swatch)[data-family="online"]{background:var(--gc-family-2)}
.gift-cards-main :is(.gc-split-part,.gc-split-swatch)[data-family="no_sale"]{background:var(--gc-family-3)}
.gift-cards-main :is(.gc-split-part,.gc-split-swatch)[data-family="other"]{background:var(--gc-quiet)}
.gift-cards-main :is(.gc-split-part,.gc-split-swatch)[data-family="unknown"]{background:var(--gc-unknown);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lp-muted) 40%, transparent)}
.gift-cards-main .gc-split-panel{--gc-family-1:var(--gc-onto);--gc-family-2:var(--gc-onto-deep);--gc-family-3:var(--gc-onto-light)}
.gift-cards-main .gc-split-panel[data-kind="redeemed"]{--gc-family-1:var(--gc-off);--gc-family-2:var(--gc-off-deep);--gc-family-3:var(--gc-off-light)}
.gift-cards-main .gc-split-keys{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-4px 0 0;padding:0;list-style:none}
.gift-cards-main .gc-split-keys li{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;color:var(--lp-muted)}
.gift-cards-main .gc-split-swatch{flex:0 0 auto;display:inline-block;width:10px;height:10px;border-radius:3px;align-self:center}
.gift-cards-main .gc-split-keys .gc-figure{font-family:var(--lp-display);font-size:18px;font-weight:600}
.gift-cards-main .gc-split-money{font-variant-numeric:tabular-nums}
.gift-cards-main .gc-channel-table td.gc-source{display:flex;align-items:flex-start;gap:9px}
.gift-cards-main .gc-channel-table .gc-split-swatch{margin-top:4px;align-self:flex-start}
.gift-cards-main .gc-source-copy{display:grid;min-width:0}
.gift-cards-main .gc-source-label{color:var(--lp-ink);overflow-wrap:anywhere}
.gift-cards-main .gc-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--lp-soft);color:color-mix(in srgb, var(--lp-ink) 85%, var(--lp-muted));font-size:13px;line-height:1.45}
.gift-cards-main .gc-note-link{color:var(--gc-link);font-weight:600;text-decoration:none;white-space:nowrap}

/* Card values: the amount, a bar for how often, and the count. */
/* One grid for the list, each row a subgrid of it, so the bars start at one edge whatever the amount. */
.gift-cards-main .gc-values{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:8px 12px;margin:0;padding:0;list-style:none}
.gift-cards-main .gc-values li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}
.gift-cards-main .gc-value-amount{font-family:var(--lp-display);font-size:17px;font-weight:600;color:var(--lp-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gift-cards-main .gc-value-track{display:block;height:8px}
.gift-cards-main .gc-value-bar{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--gc-onto)}
.gift-cards-main .gc-value-count{color:var(--lp-ink);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.gift-cards-main .gc-times{color:var(--lp-muted)}

@media (hover:hover){
  .gift-cards-main .gc-review:hover,.gift-cards-main .gc-note-link:hover{text-decoration:underline;text-underline-offset:3px}
  .gift-cards-main .gc-store-table tbody tr:hover td{background:color-mix(in srgb, var(--lp-soft) 45%, var(--lp-card))}
}

.gift-cards-main .gc-unavailable{max-width:620px}
.gift-cards-main .gc-unavailable .gc-panel-sub{margin:-8px 0 0;font-size:14px}
.gift-cards-main .gc-unavailable .gc-apply{justify-self:start}

/* ── Loading ─────────────────────────────────────────────────────────────────────────────────── */
.gift-cards-main .gc-skeleton{min-height:118px;box-shadow:none;background:linear-gradient(100deg,var(--lp-card) 20%,var(--lp-soft) 50%,var(--lp-card) 80%);background-size:220% 100%;animation:gc-shimmer 1.4s linear infinite}
.gift-cards-main .gc-skeleton-chart{min-height:300px}
@keyframes gc-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .gift-cards-main .gc-skeleton{animation:none}
  .gift-cards-main .gc-hint-tip{transition:none!important}
  .gift-cards-main :is(.gc-body,.gc-preset,.gc-chip,.gc-apply){transition:none}
}

/* ── Narrower ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .gift-cards-main .gc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Below this the store table has no room for its columns beside the bars (the sidebar can take a
   third of a tablet), so each store becomes a card: its name and bars on their own line, the four
   figures beneath, each with its label. */
@media (max-width:980px){
  .gift-cards-main .gc-pair{grid-template-columns:minmax(0,1fr)}
  .gift-cards-main .gc-store-table thead{display:none}
  .gift-cards-main .gc-store-table,.gift-cards-main .gc-store-table tbody{display:block}
  .gift-cards-main .gc-store-table tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;padding:14px 0;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .gift-cards-main .gc-store-table tbody tr:last-child{border-bottom:0}
  .gift-cards-main .gc-store-table td{display:block;padding:0;border:0}
  .gift-cards-main .gc-store-table td.gc-store{grid-column:1 / -1;width:auto}
  .gift-cards-main .gc-store-table td.num{text-align:left}
  .gift-cards-main .gc-store-table td.num::before{content:attr(data-label);display:block;color:var(--lp-muted);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
  .gift-cards-main .gc-store-table tbody tr:hover td{background:transparent}
  .gift-cards-main .gc-hbars{max-width:none}
}

/* ── Phone: one column, 16px gutter ─────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .gift-cards-main .topbar{height:60px;min-height:60px}
  .gift-cards-main .module-shell{padding:0 16px 32px}
  .gift-cards-main .gc-page{padding-top:22px;gap:16px}
  .gift-cards-main .gc-body{gap:16px}
  .gift-cards-main .gc-title h2{font-size:28px}
  .gift-cards-main .gc-range{flex-direction:column;align-items:stretch;width:100%}
  .gift-cards-main .gc-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .gift-cards-main .gc-preset{padding:0 4px}
  .gift-cards-main .gc-preset-long{display:none}
  .gift-cards-main .gc-preset-short{display:inline}
  .gift-cards-main .gc-custom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
  .gift-cards-main .gc-date{min-width:0;font-size:10px}
  .gift-cards-main .gc-date input{width:100%;min-width:0;padding:0 6px;font-size:16px}
  .gift-cards-main .gc-apply{padding:0 13px}
  .gift-cards-main .gc-chip{min-height:38px}

  .gift-cards-main .gc-kpis{gap:10px}
  .gift-cards-main .gc-kpi{padding:14px}
  .gift-cards-main .gc-kpi-label{font-size:10px}
  .gift-cards-main .gc-kpi .gc-kpi-value{font-size:24px}

  .gift-cards-main .gc-panel{padding:18px 16px}
  .gift-cards-main .gc-pair{gap:16px}
  .gift-cards-main .gc-plot{height:180px;margin-left:42px}
  .gift-cards-main .gc-axis{margin-left:42px}
  .gift-cards-main .gc-bar{width:min(42%,15px);border-radius:2px 2px 0 0}
  .gift-cards-main .gc-bar.onto{gap:1px}

  /* On a phone the store card's figures pair up: what was sold beside its share, what was
     redeemed beside its share, so nothing scrolls sideways and no count wraps three times. */
  .gift-cards-main .gc-store-table tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
}