Charge for store items, and price them individually

The store had 26 items, a price on each and a working equip flow, but the
purchase endpoint granted ownership without taking any money. Anyone signed
in could take the whole catalogue for nothing. That endpoint is now gone.

Payment goes through Stripe Checkout, which is hosted by Stripe. The buyer is
redirected there and comes back, so no card details reach this server and it
stays outside PCI scope.

Three rules hold the money path together:

- The price comes from the server's own catalogue row. The client sends an
  item id and never an amount.
- Nothing is granted at checkout. The item appears only when a webhook
  arrives with a valid HMAC-SHA256 signature, checked in constant time
  against a 5 minute timestamp window.
- Fulfilment keys off the processor's session id, which is UNIQUE, so a
  webhook delivered twice cannot grant the same item twice.

Prices now vary by item. Every caret cost the same as every other because
they are the same thing in a different colour, which left nothing to save
for. Carets run 149 to 349, flair 129 to 299, and sprites 249 to 399, since a
sprite is the one cosmetic every other racer sees.

Four bundles sit above the catalogue, each priced below the sum of its parts:
Starter Kit, Neon Set, Racer Set and The Lot. The saving is computed from the
current item prices rather than asserted, so it cannot drift. The Lot is
defined as every cosmetic rather than a fixed list, so it stays complete as
items are added.

Three bugs found while wiring this up:

- Sprites never showed as equipped. The store compared the equipped caret and
  flair but not the sprite.
- Supporter status was a stored boolean that was set on payment and never
  cleared, so a 30 day subscription lasted forever. Both read paths now
  derive it from the expiry.
- sqlx::migrate! reads the migrations directory at compile time, but cargo
  watches source files only. Adding a migration did not trigger a rebuild, so
  the binary shipped the old migration set and the schema change never ran.
  A build.rs now declares the dependency.

Verified against a real database: bundle maths, the grant statement and its
replay, 401 unauthenticated, 404 on unknown ids, 501 with no Stripe keys, and
both already-owned refusals.

1 files changed, 127 insertions, 0 deletions

diff --git a/web/src/styles.css b/web/src/styles.css
index 3dae32b..b53e99c 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2740,6 +2740,133 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     color: var(--sub-color);
 }
 
+/* The supporter offer, above the catalogue. It is the one thing in the store
+   that is not cosmetic, so it does not sit in a category with the rest. */
+.store-supporter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+    padding: 0.9rem 1.1rem;
+    border: var(--border-width) solid color-mix(in srgb, var(--primary-color) 45%, transparent);
+    border-radius: var(--radius-panel);
+    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
+    text-align: left;
+}
+
+.store-supporter.is-supporter {
+    border-color: color-mix(in srgb, var(--correct-color) 45%, transparent);
+    background: color-mix(in srgb, var(--correct-color) 7%, transparent);
+}
+
+.store-supporter-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+
+.store-supporter-text strong {
+    color: var(--text-color);
+    font-size: 0.95rem;
+}
+
+.store-supporter-text span {
+    color: var(--sub-color);
+    font-size: 0.8rem;
+}
+
+/* Bundles. A card rather than a row: a bundle has to show what is inside it,
+   which a one-line row has no space for. */
+.bundle-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.bundle-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.9rem 1rem;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--radius-panel);
+    text-align: left;
+}
+
+.bundle-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.bundle-name {
+    color: var(--text-color);
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.bundle-saving {
+    color: var(--correct-color);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.bundle-description {
+    color: var(--sub-color);
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.bundle-previews {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin: 0.15rem 0;
+}
+
+/* An item already owned is dimmed rather than hidden, so the bundle still
+   shows its full contents. */
+.bundle-preview-item.owned {
+    opacity: 0.35;
+}
+
+.bundle-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding-top: 0.25rem;
+}
+
+.bundle-prices {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+}
+
+.bundle-price {
+    color: var(--text-color);
+    font-size: 1.05rem;
+    font-weight: 600;
+}
+
+.bundle-full-price {
+    color: var(--sub-color);
+    font-size: 0.8rem;
+    text-decoration: line-through;
+}
+
+.bundle-owned,
+.bundle-note {
+    color: var(--sub-color);
+    font-size: 0.75rem;
+}
+
 /* Close, at the top-right of the content. Replaces the full-width "Back"
    button every screen carried at the bottom - a third way to do what the
    wordmark and Escape already did, and the least reachable of the three. */