[feat] save/remove inventory working now

[feat] loading inventory
[bugfix] removed server import from client script
2026-04-03 22:50:54 -04:00 · 2026-04-03 22:10:41 -04:00 · 2026-04-03 21:53:45 -04:00 · 2026-04-03 21:49:44 -04:00 · 2026-04-03 21:37:04 -04:00 · 2026-04-02 19:24:51 -04:00
25 changed files with 2438 additions and 862 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,9 @@ pnpm-debug.log*
 # imges from tcgplayer
 public/cards/*

+# static assets
+/static/
+
 # anything test
 test.*

--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Pokemon TCG card database and inventory management app. Users search cards, track market prices, and manage their collections. Closed beta.
+
+## Commands
+
+```bash
+npm run dev        # Start dev server (binds 0.0.0.0:4321)
+npm run build      # Production build → ./dist/
+npm run preview    # Preview production build
+```
+
+No test framework or linter is configured.
+
+Utility scripts in `scripts/` are run directly with `tsx` (e.g., `npx tsx scripts/reindex.ts`).
+
+## Tech Stack
+
+- **Astro 5** (SSR mode, Node.js standalone adapter)
+- **PostgreSQL** via Drizzle ORM (schema in `pokemon` namespace, snake_case DB columns)
+- **Typesense** for full-text card search
+- **Clerk** for authentication
+- **HTMX** for dynamic interactions (no SPA framework)
+- **Bootstrap 5** with custom SCSS overrides, dark theme
+- **Chart.js** for price history charts
+
+## Architecture
+
+### Data Flow
+
+TCGPlayer source data → `tcg_cards` → denormalized `cards` (per variant) → `skus` (per condition/language) → `price_history` / `sales_history`. User collections stored in `inventory` table linked to Clerk userId.
+
+PostgreSQL is source of truth. Typesense mirrors card/sku/inventory data for search. Both must be kept in sync — see `src/pages/api/inventory.ts` for the sync pattern (write to PG, then upsert/delete in Typesense).
+
+### Key Directories
+
+- `src/pages/` — Astro routes and API endpoints
+- `src/pages/partials/` — HTMX partial responses (HTML fragments returned to `hx-post` targets)
+- `src/pages/api/` — JSON/file API endpoints (`upload.ts` for CSV, `inventory.ts` for CRUD)
+- `src/components/` — Reusable `.astro` components
+- `src/db/` — Drizzle schema (`schema.ts`), relations (`relations.ts`), DB connection (`index.ts`), Typesense client (`typesense.ts`)
+- `scripts/` — Data ingestion and indexing utilities (not part of the app runtime)
+
+### Authentication
+
+Clerk middleware in `src/middleware.ts` protects routes via `createRouteMatcher`. Auth context accessed via `Astro.locals.auth()` in pages/API routes.
+
+### Database Schema
+
+Drizzle config uses `casing: 'snake_case'` — define schema fields in camelCase, they map to snake_case columns automatically. Migrations live in `./drizzle/`. Schema is scoped to the `pokemon` PostgreSQL schema.
+
+### Frontend Patterns
+
+Pages use HTMX for interactivity — forms POST to `/partials/*` endpoints that return HTML fragments. No client-side routing. View Transitions API enabled for page navigation animations. Card modals and inventory forms are HTMX-driven with `hx-post`, `hx-target`, and `hx-swap` attributes.
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -18,5 +18,17 @@ export default defineConfig({
  output: "server",
  security: {
    checkOrigin: false
-  }
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // Silences deprecation warnings from dependencies
+          quietDeps: true,
+          // Specifically silence color function warnings
+          silenceDeprecations: ['color-functions', 'import','global-builtin'],
+        },
+      },
+    },
+  },
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
        "@clerk/astro": "^3.0.1",
        "@clerk/shared": "^4.0.0",
        "@clerk/themes": "^2.4.55",
+        "@popperjs/core": "^2.11.8",
        "astro": "^5.17.1",
        "bootstrap": "^5.3.8",
        "chalk": "^5.6.2",
@@ -121,7 +122,6 @@
      "resolved": "https://registry.npmjs.org/@azure-rest/core-client/-/core-client-2.5.1.tgz",
      "integrity": "sha512-EHaOXW0RYDKS5CFffnixdyRPak5ytiCtU7uXDcP/uiY+A6jFRwNGzzJBiznkCzvi5EYpY+YWinieqHb0oY916A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@azure/core-auth": "^1.10.0",
@@ -139,7 +139,6 @@
      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
      "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -152,7 +151,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.10.1.tgz",
      "integrity": "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@azure/core-util": "^1.13.0",
@@ -186,7 +184,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.3.2.tgz",
      "integrity": "sha512-Tf6ltdKzOJEgxZeWLCjMxrxbodB/ZeCbzzA1A2qHbhzAjzjHoBVSUeSl/baT/oHAxhc4qdqVaDKnc2+iE932gw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2"
      },
@@ -203,7 +200,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
      "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.0.0",
        "@azure/core-util": "^1.2.0",
@@ -219,7 +215,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
      "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -251,7 +246,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.3.1.tgz",
      "integrity": "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.6.2"
      },
@@ -264,7 +258,6 @@
      "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.13.1.tgz",
      "integrity": "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.1.2",
        "@typespec/ts-http-runtime": "^0.3.0",
@@ -302,7 +295,6 @@
      "resolved": "https://registry.npmjs.org/@azure/keyvault-common/-/keyvault-common-2.0.0.tgz",
      "integrity": "sha512-wRLVaroQtOqfg60cxkzUkGKrKMsCP6uYXAOomOIysSMyt1/YM0eUn9LqieAWM8DLcU4+07Fio2YGpPeqUbpP9w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/abort-controller": "^2.0.0",
        "@azure/core-auth": "^1.3.0",
@@ -322,7 +314,6 @@
      "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.10.0.tgz",
      "integrity": "sha512-eDT7iXoBTRZ2n3fLiftuGJFD+yjkiB1GNqzU2KbY1TLYeXeSPVTVgn2eJ5vmRTZ11978jy2Kg2wI7xa9Tyr8ag==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure-rest/core-client": "^2.3.3",
        "@azure/abort-controller": "^2.1.2",
@@ -346,7 +337,6 @@
      "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.3.0.tgz",
      "integrity": "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typespec/ts-http-runtime": "^0.3.0",
        "tslib": "^2.6.2"
@@ -360,7 +350,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.29.0.tgz",
      "integrity": "sha512-/f3eHkSNUTl6DLQHm+bKecjBKcRQxbd/XLx8lvSYp8Nl/HRyPuIPOijt9Dt0sH50/SxOwQ62RnFCmFlGK+bR/w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/msal-common": "15.15.0"
      },
@@ -373,7 +362,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-15.15.0.tgz",
      "integrity": "sha512-/n+bN0AKlVa+AOcETkJSKj38+bvFs78BaP4rNtv3MJCmPH0YrHiskMRe74OhyZ5DZjGISlFyxqvf9/4QVEi2tw==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.8.0"
      }
@@ -383,7 +371,6 @@
      "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-3.8.8.tgz",
      "integrity": "sha512-+f1VrJH1iI517t4zgmuhqORja0bL6LDQXfBqkjuMmfTYXTQQnh1EvwwxO3UbKLT05N0obF72SRHFrC1RBDv5Gg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/msal-common": "15.15.0",
        "jsonwebtoken": "^9.0.0",
@@ -1474,8 +1461,7 @@
      "version": "5.7.0",
      "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.7.0.tgz",
      "integrity": "sha512-WBu4ULVVxySLLzK1Ppq+OdfP+adRS4ntmDQT915rzDJ++i95gc2jZkM5B6LWEAwN3lGXpfie3yPABozdD3K3Vg==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/@js-temporal/polyfill": {
      "version": "0.5.1",
@@ -1803,6 +1789,7 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
@@ -2248,8 +2235,7 @@
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
      "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@types/bootstrap": {
      "version": "5.2.10",
@@ -2326,6 +2312,7 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.4.0.tgz",
      "integrity": "sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "undici-types": "~7.18.0"
      }
@@ -2336,6 +2323,7 @@
      "integrity": "sha512-gT+oueVQkqnj6ajGJXblFR4iavIXWsGAFCk3dP4Kki5+a9R4NMt0JARdk6s8cUKcfUoqP5dAtDSLU8xYUTFV+Q==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/node": "*",
        "pg-protocol": "*",
@@ -2347,7 +2335,6 @@
      "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.23.tgz",
      "integrity": "sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/node": "*"
      }
@@ -2363,7 +2350,6 @@
      "resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.4.tgz",
      "integrity": "sha512-CI0NhTrz4EBaa0U+HaaUZrJhPoso8sG7ZFya8uQoBA57fjzrjRSv87ekCjLZOFExN+gXE/z0xuN2QfH4H2HrLQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "http-proxy-agent": "^7.0.0",
        "https-proxy-agent": "^7.0.0",
@@ -2384,7 +2370,6 @@
      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "event-target-shim": "^5.0.0"
      },
@@ -2409,7 +2394,6 @@
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">= 14"
      }
@@ -2543,6 +2527,7 @@
      "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.1.tgz",
      "integrity": "sha512-m4VWilWZ+Xt6NPoYzC4CgGZim/zQUO7WFL0RHCH0AiEavF1153iC3+me2atDvXpf/yX4PyGUeD8wZLq1cirT3g==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@astrojs/compiler": "^2.13.0",
        "@astrojs/internal-helpers": "0.7.6",
@@ -2684,15 +2669,13 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/bl": {
      "version": "6.1.6",
      "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz",
      "integrity": "sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/readable-stream": "^4.0.0",
        "buffer": "^6.0.3",
@@ -2766,7 +2749,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "base64-js": "^1.3.1",
        "ieee754": "^1.2.1"
@@ -2776,15 +2758,13 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/bundle-name": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "run-applescript": "^7.0.0"
      },
@@ -3160,7 +3140,6 @@
      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
      "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "bundle-name": "^4.1.0",
        "default-browser-id": "^5.0.0"
@@ -3177,7 +3156,6 @@
      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -3190,7 +3168,6 @@
      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -4043,7 +4020,6 @@
      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "safe-buffer": "^5.0.1"
      }
@@ -4214,7 +4190,6 @@
      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -4230,7 +4205,6 @@
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.8.x"
      }
@@ -4749,7 +4723,6 @@
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.0",
        "debug": "^4.3.4"
@@ -4763,7 +4736,6 @@
      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "agent-base": "^7.1.2",
        "debug": "4"
@@ -4777,7 +4749,6 @@
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -4807,8 +4778,7 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/immutable": {
      "version": "5.1.5",
@@ -4946,8 +4916,7 @@
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
      "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/js-yaml": {
      "version": "4.1.1",
@@ -4973,7 +4942,6 @@
      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "jws": "^4.0.1",
        "lodash.includes": "^4.3.0",
@@ -4996,7 +4964,6 @@
      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "buffer-equal-constant-time": "^1.0.1",
        "ecdsa-sig-formatter": "1.0.11",
@@ -5008,7 +4975,6 @@
      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "jwa": "^2.0.1",
        "safe-buffer": "^5.0.1"
@@ -5027,50 +4993,43 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.isboolean": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.isnumber": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.isplainobject": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.isstring": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/loglevel": {
      "version": "1.9.2",
@@ -5982,7 +5941,6 @@
      "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
      "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@tediousjs/connection-string": "^0.5.0",
        "commander": "^11.0.0",
@@ -6003,7 +5961,6 @@
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -6016,7 +5973,6 @@
      "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.6.2.tgz",
      "integrity": "sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/core-auth": "^1.7.2",
        "@azure/identity": "^4.2.1",
@@ -6070,8 +6026,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
      "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/neotraverse": {
      "version": "0.6.18",
@@ -6186,7 +6141,6 @@
      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "default-browser": "^5.2.1",
        "define-lazy-prop": "^3.0.0",
@@ -6284,6 +6238,7 @@
      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "pg-connection-string": "^2.12.0",
        "pg-pool": "^3.13.0",
@@ -6491,7 +6446,6 @@
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">= 0.6.0"
      }
@@ -6555,7 +6509,6 @@
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "abort-controller": "^3.0.0",
        "buffer": "^6.0.3",
@@ -6821,14 +6774,14 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/rollup": {
      "version": "4.59.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -6873,7 +6826,6 @@
      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -6899,21 +6851,20 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/sass": {
      "version": "1.98.0",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.1.5",
@@ -7099,8 +7050,7 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
    },
    "node_modules/standardwebhooks": {
      "version": "1.0.0",
@@ -7138,7 +7088,6 @@
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "safe-buffer": "~5.2.0"
      }
@@ -7232,7 +7181,6 @@
      "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
      "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=8.0.0"
      }
@@ -7242,7 +7190,6 @@
      "resolved": "https://registry.npmjs.org/tedious/-/tedious-19.2.1.tgz",
      "integrity": "sha512-pk1Q16Yl62iocuQB+RWbg6rFUFkIyzqOFQ6NfysCltRvQqKwfurgj8v/f2X+CKvDhSL4IJ0cCOfCHDg9PWEEYA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@azure/core-auth": "^1.7.2",
        "@azure/identity": "^4.2.1",
@@ -7351,6 +7298,7 @@
      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "~0.27.0",
        "get-tsconfig": "^4.7.5"
@@ -7382,6 +7330,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -7722,7 +7671,6 @@
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "uuid": "dist/bin/uuid"
      }
@@ -8375,7 +8323,6 @@
      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "is-wsl": "^3.1.0"
      },
@@ -8454,6 +8401,7 @@
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@clerk/astro": "^3.0.1",
    "@clerk/shared": "^4.0.0",
    "@clerk/themes": "^2.4.55",
+    "@popperjs/core": "^2.11.8",
    "astro": "^5.17.1",
    "bootstrap": "^5.3.8",
    "chalk": "^5.6.2",
--- a/scripts/pokemon-helper.ts
+++ b/scripts/pokemon-helper.ts
@@ -88,6 +88,25 @@ export const createSkuCollection = async () => {
    console.log(chalk.green('Collection "skus" created successfully.'));
 }

+// Delete and recreate the 'inventory' index
+export const createInventoryCollection = async () => {
+    try {
+        await client.collections('inventories').delete();
+    } catch (error) {
+        // Ignore error, just means collection doesn't exist
+    }
+    await client.collections().create({
+        name: 'inventories',
+        fields: [
+            { name: 'id', type: 'string' },
+            { name: 'userId', type: 'string' },
+            { name: 'catalogName', type: 'string' },
+            { name: 'card_id', type: 'string', reference: 'cards.id' },
+        ]
+    });
+    console.log(chalk.green('Collection "inventories" created successfully.'));
+}
+

 export const upsertCardCollection = async (db:DBInstance) => {
    const pokemon = await db.query.cards.findMany({
@@ -131,6 +150,17 @@ export const upsertSkuCollection = async (db:DBInstance) => {
    console.log(chalk.green('Collection "skus" indexed successfully.'));
 }

+export const upsertInventoryCollection = async (db:DBInstance) => {
+    const inv = await db.query.inventory.findMany();
+    await client.collections('inventories').documents().import(inv.map(i => ({
+        id: i.inventoryId,
+        userId: i.userId,
+        catalogName: i.catalogName,
+        card_id: i.cardId.toString(),
+    })), { action: 'upsert' });
+    console.log(chalk.green('Collection "inventories" indexed successfully.'));
+}
+



--- a/scripts/preload-tcgplayer.ts
+++ b/scripts/preload-tcgplayer.ts
@@ -280,6 +280,6 @@ else {
 await helper.UpdateVariants(db);

 // index the card updates
-helper.upsertCardCollection(db);
+await helper.upsertCardCollection(db);

 await ClosePool();
--- a/scripts/reindex.ts
+++ b/scripts/reindex.ts
@@ -5,7 +5,10 @@ import * as Indexing from './pokemon-helper.ts';

 //await Indexing.createCardCollection();
 //await Indexing.createSkuCollection();
-await Indexing.upsertCardCollection(db);
-await Indexing.upsertSkuCollection(db);
+await Indexing.createInventoryCollection();
+
+//await Indexing.upsertCardCollection(db);
+//await Indexing.upsertSkuCollection(db);
+await Indexing.upsertInventoryCollection(db);
 await ClosePool();
 console.log(chalk.green('Pokémon reindex complete.'));
--- a/src/assets/css/_card.scss
+++ b/src/assets/css/_card.scss
@@ -40,8 +40,8 @@
 // =============================================================================

 // Shared texture/asset references
-$grain:       url('/holofoils/grain.webp');
-$glitter:     url('/holofoils/glitter.png');
+$grain:       url('/public/holofoils/grain.webp');
+$glitter:     url('/public/holofoils/glitter.png');
 $glittersize: 25%;


@@ -190,7 +190,7 @@ $glittersize: 25%;
 /// No-mask fallback for cards using the illusion foil pattern.
@mixin no-mask-illusion {
  --mask: none;
-  --foil: url('/holofoils/illusion.png');
+  --foil: url('/public/holofoils/illusion.png');
  --imgsize: 33%;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
@@ -919,7 +919,7 @@ $glittersize: 25%;
    --space: 4%;
    clip-path: var(--clip);
    background-image:
-      url('/holofoils/cosmos-bottom.png'),
+      url('/public/holofoils/cosmos-bottom.png'),
      $cosmos-stripe,
      radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
@@ -939,7 +939,7 @@ $glittersize: 25%;
    &::before {
      content: '';
      z-index: 2;
-      background-image: url('/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
+      background-image: url('/public/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
      background-blend-mode: lighten, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -953,7 +953,7 @@ $glittersize: 25%;
    &::after {
      content: '';
      z-index: 3;
-      background-image: url('/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
+      background-image: url('/public/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
      background-blend-mode: multiply, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -1081,7 +1081,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/trainerbg.png');
+      --foil:    url('/public/holofoils/trainerbg.png');
      --imgsize: 25% auto;
    }
    .card__shine::after { background-blend-mode: difference; }
@@ -1205,7 +1205,7 @@ $glittersize: 25%;
  }

  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/illusion-mask.png');
+    --foil:    url('/public/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1377,7 +1377,7 @@ $glittersize: 25%;
  .card__glare         { @extend %secret-rare-glare; }

  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/geometric.png');
+    --foil:    url('/public/holofoils/geometric.png');
    --imgsize: 33%;
    filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
  }
@@ -1648,7 +1648,7 @@ $glittersize: 25%;
  }

  &:not(.masked) .card__shine {
-    --foil:    url('/holofoils/illusion-mask.png');
+    --foil:    url('/public/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1719,7 +1719,7 @@ $glittersize: 25%;
  &:not(.masked) {
    .card__shine,
    .card__shine::after {
-      --foil:    url('/holofoils/trainerbg.png');
+      --foil:    url('/public/holofoils/trainerbg.png');
      --imgsize: 20%;
      background-blend-mode: color-burn, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * 0.05) + .6)) contrast(1.5) saturate(1.2);
@@ -1828,7 +1828,7 @@ $glittersize: 25%;

  &:not(.masked) {
    .card__shine {
-      --foil:    url('/holofoils/geometric.png');
+      --foil:    url('/public/holofoils/geometric.png');
      --imgsize: 33%;
      filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
    }
@@ -2027,7 +2027,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/vmaxbg.jpg');
+      --foil:    url('/public/holofoils/vmaxbg.jpg');
      --imgsize: 60% 30%;
    }
  }
@@ -2102,7 +2102,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/holofoils/ancient.png');
+      --foil:    url('/public/holofoils/ancient.png');
      --imgsize: 18% 15%;
      background-blend-mode: exclusion, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75);
--- a/src/assets/css/_holofoil-integration.scss
+++ b/src/assets/css/_holofoil-integration.scss
@@ -1,40 +1,19 @@
 // =============================================================================
 // HOLOFOIL INTEGRATION
+// _holofoil-integration.scss
 // =============================================================================
-//
-// Three effect zones, determined by rarity and variant:
-//
-// NONE — no effect at all
-//   variant = Normal  (or no recognised rarity/variant)
-//
-// INVERSE — effect on borders only (everything except the art window)
-//   variant = Reverse Holofoil
-//   rarity  = Prism Rare
-//
-// ART WINDOW — effect clipped to the artwork area only
-//   rarity  = Rare | Amazing Rare | Classic Collection | Holo Rare
-//   variant = Holofoil | 1st Edition Holofoil
-//
-// FULL CARD — effect over the entire card
-//   rarity  = Ultra Rare | Character Rare | Illustration Rare |
-//             Special Illustration Rare | Double Rare | Hyper Rare |
-//             Mega Rare | Mega Attack Rare | ACE Spec Rare | ACE Rare |
-//             Art Rare | Special Art Rare | Black White Rare |
-//             Character Super Rare | Mega Ultra Rare | Rare BREAK |
-//             Secret Rare | Shiny Holo Rare | Shiny Rare |
-//             Shiny Secret Rare | Shiny Ultra Rare
-//
-// =============================================================================
+
+@import "card";


 // -----------------------------------------------------------------------------
-// 1. CSS CUSTOM PROPERTIES — set on every wrapper element
+// 1.  WRAPPER NORMALISATION
 // -----------------------------------------------------------------------------

-.image-grow,
-.card-image-wrap {
+%holofoil-wrapper-base {
+  --card-aspect:  0.718;
+  --card-radius:  4.55% / 3.5%;

-  // Pointer tracking — updated by holofoil-init.js on mousemove
  --pointer-x:           50%;
  --pointer-y:           50%;
  --background-x:        50%;
@@ -42,23 +21,29 @@
  --pointer-from-center: 0;
  --pointer-from-top:    0.5;
  --pointer-from-left:   0.5;
-  --card-opacity:        0;
  --card-scale:          1;
+  --card-opacity:        0;

-  // Card geometry — matches Bootstrap's rounded-4 (--bs-border-radius-xl)
-  --card-radius: var(--bs-border-radius-xl, 0.375rem);
+  --grain:       url('/public/holofoils/grain.webp');
+  --glitter:     url('/public/holofoils/glitter.png');
+  --glittersize: 25%;
+  --space:       5%;
+  --angle:       133deg;
+  --imgsize:     cover;

-  // Art window clip — original poke-holo values, correct for standard TCG card scans
-  // inset(top right bottom left): top=9.85%, sides=8%, bottom=52.85% (art bottom at 47.15%)
-  --clip-art: inset(9.85% 8% 52.85% 8%);
+  --red:    #f80e35;
+  --yellow: #eedf10;
+  --green:  #21e985;
+  --blue:   #0dbde9;
+  --violet: #c929f1;
+
+  --clip:              inset(9.85% 8% 52.85% 8%);
+  --clip-invert:       polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);
+  --clip-stage:        polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
+  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);
+  --clip-trainer:      inset(14.5% 8.5% 48.2% 8.5%);
+  --clip-borders:      inset(2.8% 4% round 2.55% / 1.5%);

-  // Sunpillar palette
-  --sunpillar-1: hsl(2,   100%, 73%);
-  --sunpillar-2: hsl(53,  100%, 69%);
-  --sunpillar-3: hsl(93,  100%, 69%);
-  --sunpillar-4: hsl(176, 100%, 76%);
-  --sunpillar-5: hsl(228, 100%, 74%);
-  --sunpillar-6: hsl(283, 100%, 73%);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
@@ -66,76 +51,40 @@
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

-  // Colour tokens
-  --red:    #f80e35;
-  --yellow: #eedf10;
-  --green:  #21e985;
-  --blue:   #0dbde9;
-  --violet: #c929f1;
-
-  // Glow
-  --card-glow: hsl(175, 100%, 90%);
-
-  // Texture assets
-  --grain:       url('/holofoils/grain.webp');
-  --glitter:     url('/holofoils/glitter.png');
-  --glittersize: 25%;
-  --foil:        none;
-
-  // Energy glow overrides
-  &[data-energy="Water"]     { --card-glow: hsl(192, 97%,  60%); }
-  &[data-energy="Fire"]      { --card-glow: hsl(9,   81%,  59%); }
-  &[data-energy="Grass"]     { --card-glow: hsl(96,  81%,  65%); }
-  &[data-energy="Lightning"] { --card-glow: hsl(54,  87%,  63%); }
-  &[data-energy="Psychic"]   { --card-glow: hsl(281, 62%,  58%); }
-  &[data-energy="Fighting"]  { --card-glow: rgb(145, 90,   39);  }
-  &[data-energy="Darkness"]  { --card-glow: hsl(189, 77%,  27%); }
-  &[data-energy="Metal"]     { --card-glow: hsl(184, 20%,  70%); }
-  &[data-energy="Dragon"]    { --card-glow: hsl(51,  60%,  35%); }
-  &[data-energy="Fairy"]     { --card-glow: hsl(323, 100%, 89%); }
-
-  // Hover activates opacity; JS updates pointer vars
-  &:hover,
-  &[data-holo-active] { --card-opacity: 0.2; }
-
-  display: block;  // ensure wrapper is a block-level containing block
+  // NOTE: no overflow:hidden here -- that would clip the lift/scale transform
+  // on .image-grow. Overflow is handled by the child .holo-shine/.holo-glare.
  position: relative;
  isolation: isolate;
  border-radius: var(--card-radius);
 }

+%holofoil-energy-glows {
+  &[data-energy="Water"]     { --card-glow: hsl(192, 97%,  60%); }
+  &[data-energy="Fire"]      { --card-glow: hsl(9,   81%,  59%); }
+  &[data-energy="Grass"]     { --card-glow: hsl(96,  81%,  65%); }
+  &[data-energy="Lightning"] { --card-glow: hsl(54,  87%,  63%); }
+  &[data-energy="Psychic"]   { --card-glow: hsl(281, 62%,  58%); }
+  &[data-energy="Fighting"]  { --card-glow: rgb(145, 90, 39);    }
+  &[data-energy="Darkness"]  { --card-glow: hsl(189, 77%,  27%); }
+  &[data-energy="Metal"]     { --card-glow: hsl(184, 20%,  70%); }
+  &[data-energy="Dragon"]    { --card-glow: hsl(51,  60%,  35%); }
+  &[data-energy="Fairy"]     { --card-glow: hsl(323, 100%, 89%); }
+}
+

 // -----------------------------------------------------------------------------
-// 2. HOLO-SHINE AND HOLO-GLARE BASE STRUCTURE
+// 2.  SHINE + GLARE CHILD DIVS
 // -----------------------------------------------------------------------------

-.holo-shine,
-.holo-glare {
+%shine-base {
  pointer-events: none;
-  display: block;
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
-  // NO overflow:hidden — it interferes with clip-path on the element itself
-  will-change: transform, opacity, background-image, background-size,
-               background-position, background-blend-mode, filter;
-}
-
-// The img inside has mb-2 but the wrapper already has the right size from
-// aspect-ratio on .card-image — zero the margin so img fills wrapper flush.
-.image-grow > img,
-.card-image-wrap > img {
-  display: block;
-  margin-bottom: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover;
-}
-
-.holo-shine {
+  overflow: hidden; // clipping lives here, not on the parent
  z-index: 3;
-  mix-blend-mode: color-dodge;
-  opacity: var(--card-opacity);
+  will-change: transform, opacity, background-image, background-size,
+    background-position, background-blend-mode, filter;

  &::before,
  &::after {
@@ -143,380 +92,97 @@
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
-    // Sunpillar palette shift for ::before depth layer
-    --sunpillar-clr-1: var(--sunpillar-5);
-    --sunpillar-clr-2: var(--sunpillar-6);
-    --sunpillar-clr-3: var(--sunpillar-1);
-    --sunpillar-clr-4: var(--sunpillar-2);
-    --sunpillar-clr-5: var(--sunpillar-3);
-    --sunpillar-clr-6: var(--sunpillar-4);
-  }
-
-  &::after {
-    // Second palette shift for uppermost pseudo layer
-    --sunpillar-clr-1: var(--sunpillar-6);
-    --sunpillar-clr-2: var(--sunpillar-1);
-    --sunpillar-clr-3: var(--sunpillar-2);
-    --sunpillar-clr-4: var(--sunpillar-3);
-    --sunpillar-clr-5: var(--sunpillar-4);
-    --sunpillar-clr-6: var(--sunpillar-5);
  }
 }

-.holo-glare {
+%glare-base {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--card-radius);
  z-index: 4;
-  mix-blend-mode: overlay;
-  opacity: var(--card-opacity);
-  background-image: radial-gradient(
-    farthest-corner circle at var(--pointer-x) var(--pointer-y),
-    hsla(0, 0%, 100%, 0.8)  10%,
-    hsla(0, 0%, 100%, 0.65) 20%,
-    hsla(0, 0%, 0%,   0.5)  90%
-  );
-
-  // Grain texture on ::before — soft-light blend adds physical substrate feel
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: var(--grain);
-    background-size: 33%;
-    background-repeat: repeat;
-    mix-blend-mode: soft-light;
-    opacity: 0.15;
-  }
-
-  // Glitter texture on ::after — overlay blend adds sparkle points
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: var(--glitter);
-    background-size: var(--glittersize) var(--glittersize);
-    background-repeat: repeat;
-    background-position:
-      calc(50% - ((5px * 2) * var(--pointer-from-left)) + 5px)
-      calc(50% - ((5px * 2) * var(--pointer-from-top))  + 5px);
-    mix-blend-mode: overlay;
-    opacity: calc(var(--card-opacity) * 0.6);
-  }
-
+  transform: translateZ(0);
+  overflow: hidden;
+  will-change: transform, opacity, background-image, background-size,
+    background-position, background-blend-mode, filter;
 }


 // -----------------------------------------------------------------------------
-// 3. ZONE HELPERS — reusable effect mixin
-// The standard prismatic effect, applied at different clip regions below.
+// 3.  MODES
 // -----------------------------------------------------------------------------

-// Standard shine background (used by ART WINDOW and FULL CARD zones)
-@mixin prismatic-shine {
-  background-image:
-    var(--grain),
-    repeating-linear-gradient(110deg,
-      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
-      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
-      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
-    );
-  background-position:
-    center center,
-    calc(((50% - var(--background-x)) * 2.6) + 50%)
-    calc(((50% - var(--background-y)) * 3.5) + 50%);
-  background-size: 33%, 400% 400%;
-  background-repeat: repeat, no-repeat;
-  background-blend-mode: soft-light, normal;
-  filter: brightness(.8) contrast(.85) saturate(.75);
-}
+// -- 3a. GRID -----------------------------------------------------------------
+// No idle animation. Effect is invisible until hover.

-@mixin prismatic-glare {
-  opacity: calc(var(--card-opacity) * 0.4);
-  filter: brightness(0.8) contrast(1.5);
+.image-grow,
+.card-image-wrap {
+  @extend %holofoil-wrapper-base;
+  @extend %holofoil-energy-glows;
+
+  // No effect if the image fell back to default.jpg
+  &[data-default="true"] {
+    .holo-shine,
+    .holo-glare { display: none !important; }
+  }
+
+  .holo-shine { @extend %shine-base; }
+  .holo-glare { @extend %glare-base; }
 }


-// -----------------------------------------------------------------------------
-// 4. ZONE 0 — NORMAL: no effect
-// -----------------------------------------------------------------------------
+// -- 3b. GRID HOVER -----------------------------------------------------------
+// The existing main.scss .image-grow:hover handles lift + scale.
+// We layer the holo effect on top without overriding transform or transition.

-.image-grow[data-variant="Normal" i],
-.card-image-wrap[data-variant="Normal" i] {
-  .holo-shine,
-  .holo-glare { display: none !important; }
+.image-grow:hover,
+.image-grow[data-holo-active] {
+  --card-opacity: 0.45;
 }


-// -----------------------------------------------------------------------------
-// 5. ZONE 1 — ART WINDOW EFFECT
-// rarity: Rare, Amazing Rare, Classic Collection, Holo Rare
-// variant: Holofoil, 1st Edition Holofoil
-// -----------------------------------------------------------------------------
+// -- 3c. MODAL ----------------------------------------------------------------
+// Sweeps once per minute. Peaks at 0.35.
+// Pointer tracking bumps opacity to 0.45 while hovering.

-.image-grow[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
-.card-image-wrap[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
-.image-grow[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-variant="1st Edition Holofoil" i],
-.card-image-wrap[data-variant="1st Edition Holofoil" i] {
-
-  .holo-shine {
-    clip-path: var(--clip-art);
-    @include prismatic-shine;
-  }
-
-  .holo-glare {
-    clip-path: var(--clip-art);
-    @include prismatic-glare;
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 5b. ZONE 1 BORDER ADDITION — Holofoil + 1st Edition Holofoil
-//
-// Real holofoil cards have the foil stamp on both the art window AND the card
-// border. The element carries the art window clip; ::before carries the border
-// clip via the same zero-width tunnel polygon as Zone 3.
-// ::before inherits background-image/size/position from the parent via inherit.
-// -----------------------------------------------------------------------------
-
-.image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-variant="1st Edition Holofoil" i],
-.card-image-wrap[data-variant="1st Edition Holofoil" i] {
-
-  .holo-shine {
-    &::before {
-      background-image: inherit;
-      background-size: inherit;
-      background-position: inherit;
-      background-repeat: inherit;
-      background-blend-mode: inherit;
-      filter: inherit;
-      mix-blend-mode: color-dodge;
-      clip-path: polygon(
-        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
-      );
-    }
-  }
-
-  .holo-glare {
-    &::before {
-      clip-path: polygon(
-        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
-      );
-    }
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 6. ZONE 2 — FULL CARD EFFECT
-// -----------------------------------------------------------------------------
-
-.image-grow[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.image-grow[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-.card-image-wrap[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]) {
-
-  .holo-shine {
-    clip-path: none;
-    @include prismatic-shine;
-  }
-
-  .holo-glare {
-    clip-path: none;
-    @include prismatic-glare;
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 7. ZONE 3 — INVERSE (borders only): Reverse Holofoil + Prism Rare
-//
-// Applies the effect to everything EXCEPT the art window.
-// Uses the "zero-width tunnel" technique from css-tricks.com/cutting-inner-part-element-using-clip-path/
-// Outer rectangle drawn anticlockwise, closes back to 0% 0%, then the inner
-// art window rectangle is drawn clockwise — nonzero winding treats the inner
-// shape as a hole, leaving the art window transparent.
-//
-// Outer (anticlockwise): 0 0 → 0 100% → 100% 100% → 100% 0 → 0 0
-// Inner art window (clockwise): 8% 9.85% → 92% 9.85% → 92% 47.15% → 8% 47.15%
-// -----------------------------------------------------------------------------
-
-.image-grow[data-variant="Reverse Holofoil" i],
-.card-image-wrap[data-variant="Reverse Holofoil" i],
-.image-grow[data-rarity="Prism Rare" i],
-.card-image-wrap[data-rarity="Prism Rare" i] {
-
-  // Energy colour tint — multiply blend darkens the card toward --card-glow.
-  // z-index 2 puts it above the card image (z-index 1) but below holo-shine (3).
-  // Opacity tied to --card-opacity so it appears/disappears with the hover effect.
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: var(--card-radius);
-    background: var(--card-glow);
-    mix-blend-mode: multiply;
-    opacity: calc(var(--card-opacity) * 0.5);
-    z-index: 2;
-    pointer-events: none;
-    clip-path: polygon(
-      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
-    );
-  }
-
-  .holo-shine {
-    // Energy-aware gradient — weaves --card-glow (set per data-energy on the
-    // wrapper) into the prismatic colour sequence so each energy type gets a
-    // tinted shimmer: Grass = green, Fire = orange, Water = cyan, etc.
-    background-image:
-      var(--grain),
-      repeating-linear-gradient(110deg,
-        var(--card-glow),
-        var(--blue),
-        var(--card-glow),
-        var(--green),
-        var(--yellow),
-        var(--card-glow),
-        var(--red),
-        var(--violet),
-        var(--card-glow)
-      );
-    background-position:
-      center center,
-      calc(((50% - var(--background-x)) * 2.6) + 50%)
-      calc(((50% - var(--background-y)) * 3.5) + 50%);
-    background-size: 33%, 400% 400%;
-    background-repeat: repeat, no-repeat;
-    background-blend-mode: soft-light, normal;
-    filter: brightness(1.0) contrast(1.0) saturate(1.4);
-    clip-path: polygon(
-      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
-    ) !important;
-  }
-
-  .holo-glare {
-    @include prismatic-glare;
-    // Hot-spot tinted with energy colour to match the shine treatment
-    background-image: radial-gradient(
-      farthest-corner circle at var(--pointer-x) var(--pointer-y),
-      var(--card-glow)           0%,
-      hsla(0, 0%, 100%, 0.3)   20%,
-      hsla(0, 0%, 0%,   0.5)   90%
-    );
-    clip-path: polygon(
-      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
-    ) !important;
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 8. MODAL ANIMATION
-// -----------------------------------------------------------------------------
-
-// Note: --card-opacity is intentionally NOT registered via @property.
-// Registering it as <number> makes it interpolatable, causing the browser
-// to smoothly transition it when JS sets it via inline style — creating the
-// unwanted slow fade-in. Without registration it changes instantly.
-@property --pointer-x         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
-@property --pointer-y         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
-@property --background-x      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
-@property --background-y      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
-@property --pointer-from-center { syntax: '<number>';   inherits: true; initial-value: 0;    }
-@property --pointer-from-left   { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
-@property --pointer-from-top    { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
-
-@keyframes holo-modal-opacity {
-  0%       { opacity: 0; }
-  4%       { opacity: 0; }
-  8%       { opacity: 0.35; }
-  85%      { opacity: 0.35; }
-  90%, 100%{ opacity: 0; }
-}
-
-@keyframes holo-modal-position {
-  0%   {
+@keyframes holo-modal-pulse {
+  0% {
+    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0; --pointer-from-left: 0.5; --pointer-from-top: 0.5;
  }
-  8%   {
+  4%  { --card-opacity: 0; }
+  8% {
+    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85; --pointer-from-left: 0.25; --pointer-from-top: 0.15;
  }
-  25%  {
+  25% {
    --pointer-x: 70%; --pointer-y: 30%;
    --background-x: 64%; --background-y: 34%;
    --pointer-from-center: 0.9; --pointer-from-left: 0.70; --pointer-from-top: 0.30;
  }
-  45%  {
+  45% {
    --pointer-x: 80%; --pointer-y: 70%;
    --background-x: 74%; --background-y: 68%;
    --pointer-from-center: 0.88; --pointer-from-left: 0.80; --pointer-from-top: 0.70;
  }
-  65%  {
+  65% {
    --pointer-x: 35%; --pointer-y: 80%;
    --background-x: 38%; --background-y: 76%;
    --pointer-from-center: 0.8; --pointer-from-left: 0.35; --pointer-from-top: 0.80;
  }
-  85%  {
+  85% {
+    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85;
  }
+  90%  { --card-opacity: 0; }
  100% {
+    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0;
@@ -524,162 +190,160 @@
 }

 .card-image-wrap.holo-modal-mode {
-  // Animate pointer vars on the wrapper so CSS custom props interpolate
-  animation: holo-modal-position 60s ease-in-out infinite;
-  animation-delay: var(--shimmer-delay, -2s);
+  --card-opacity: 0;

  .holo-shine,
  .holo-glare {
-    // Animate opacity directly — no @property needed, native interpolation
-    animation: holo-modal-opacity 60s ease-in-out infinite;
+    animation: holo-modal-pulse 60s ease-in-out infinite;
    animation-delay: var(--shimmer-delay, -2s);
  }

  &[data-holo-active] {
-    animation-play-state: paused;
-    .holo-shine { opacity: 0.20; }
-    .holo-glare { opacity: calc(0.20 * 0.4); }
+    --card-opacity: 0.45;
+    .holo-shine,
+    .holo-glare { animation-play-state: paused; }
  }
 }


 // -----------------------------------------------------------------------------
-// 9. MOBILE / TOUCH — static holofoil overlay, no JS tracking
-//
-// @media (hover: none) targets touchscreens only.
-// Technique from joshdance.com/100/Day50: two rainbow gradients at opposing
-// fixed positions interact via blend modes to create a static holographic sheen.
-// Where the two gradient bands cross, the additive blending creates bright
-// rainbow intersections that read as a light-catch effect — no pointer needed.
-//
-// Implementation:
-//   - .holo-shine gets the two-gradient stack at fixed diagonal positions
-//   - ::before moves in the opposite direction (negative position) so the
-//     crossing point creates the characteristic holofoil bright intersection
-//   - opacity is always-on at a low value — no hover event needed
-//   - will-change reset to auto — no GPU layer reservation needed
-//   - Glitter hidden — parallax position is meaningless without tracking
-//   - No CSS animation on touch — pure static CSS, zero JS involvement
+// 4.  RARITY -> CLIP-PATH BRIDGE
 // -----------------------------------------------------------------------------

-@media (hover: none) {
-
-  .holo-shine,
-  .holo-glare {
-    will-change: auto;
-  }
-
-  // Disable any animation on modal cards on touch — static treatment handles it
-  .card-image-wrap.holo-modal-mode {
-    animation: none;
+.image-grow,
+.card-image-wrap {

+  // No effect on common/uncommon or unrecognised wrapper
+  &[data-rarity="common"],
+  &[data-rarity="uncommon"],
+  &:not([data-rarity]) {
    .holo-shine,
-    .holo-glare { animation: none; }
+    .holo-glare { display: none; }
  }

-  // Suppress glitter — parallax position is meaningless without pointer tracking
-  .holo-glare::after { display: none; }
+  // Standard holo — artwork area only
+  &[data-rarity="rare holo"] {
+    .holo-shine                               { clip-path: var(--clip); }
+    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
+    &[data-subtypes^="supporter"]  .holo-shine,
+    &[data-subtypes^="item"]       .holo-shine { clip-path: var(--clip-trainer); }
+  }

-  // ── Static holofoil overlay for all effect zones on touch ─────────────────
-  // Override the JS-driven background-position values with fixed diagonals.
-  // The ::before pseudo moves in the opposite direction to create crossing bands.
+  // Cosmos holo
+  &[data-rarity="rare holo cosmos"] {
+    .holo-shine                               { clip-path: var(--clip); }
+    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
+    &[data-subtypes^="supporter"]  .holo-shine { clip-path: var(--clip-trainer); }
+  }

-  .image-grow,
-  .card-image-wrap {
+  &[data-rarity="radiant rare"]               { .holo-shine { clip-path: var(--clip-borders); } }
+  &[data-rarity="amazing rare"]               { .holo-shine { clip-path: var(--clip); } }

-    // Zone 1 — art window
-    &[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
-    &[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-variant="1st Edition Holofoil" i],
-    // Zone 2 — full card
-    &[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    &[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
-    // Zone 3 — inverse (Reverse Holofoil + Prism Rare)
-    // Energy colour woven in via --card-glow, same as desktop Zone 3
-    &[data-variant="Reverse Holofoil" i],
-    &[data-rarity="Prism Rare" i] {
+  &[data-rarity="trainer gallery rare holo"],
+  &[data-rarity="rare holo"][data-trainer-gallery="true"] {
+    .holo-shine { clip-path: var(--clip-borders); }
+  }

-      // Energy colour multiply tint — kept subtle on mobile
-      &::after {
-        opacity: 0.04;
-      }
+  &[data-rarity="rare shiny"] {
+    .holo-shine                            { clip-path: var(--clip); }
+    &[data-subtypes^="stage"] .holo-shine  { clip-path: var(--clip-stage); }
+  }

-      .holo-shine {
-        background-image:
-          var(--grain),
-          repeating-linear-gradient(110deg,
-            var(--card-glow),
-            var(--blue),
-            var(--card-glow),
-            var(--green),
-            var(--yellow),
-            var(--card-glow),
-            var(--red),
-            var(--violet),
-            var(--card-glow)
-          );
-        background-size: 33%, 400% 400%;
-        background-repeat: repeat, no-repeat;
-        background-blend-mode: soft-light, normal;
-        background-position: center, 38% 25%;
-        filter: brightness(1.0) contrast(1.1) saturate(1.0);
-        opacity: 0.35;
+  // Reverse holo by rarity — borders only
+  &[data-rarity$="reverse holo"]     { .holo-shine { clip-path: var(--clip-invert); } }
+  // Reverse Holofoil variant — borders only
+  &[data-variant="Reverse Holofoil"] { .holo-shine { clip-path: var(--clip-invert); } }

-        &::before {
-          background-image:
-            repeating-linear-gradient(110deg,
-              var(--card-glow),
-              var(--blue),
-              var(--card-glow),
-              var(--green),
-              var(--yellow),
-              var(--card-glow),
-              var(--red),
-              var(--violet),
-              var(--card-glow)
-            );
-          background-size: 400% 400%;
-          background-position: 62% 75%;
-          mix-blend-mode: color-dodge;
-          opacity: 0.18;
-          filter: brightness(1.0) contrast(1.1) saturate(1.0);
-        }
+  // True holofoil variants + full-bleed rarities — no clip
+  &[data-variant="Holofoil"],
+  &[data-variant="1st Edition Holofoil"],
+  &[data-variant="Unlimited Holofoil"],
+  &[data-rarity="rare ultra"],
+  &[data-rarity="rare holo v"],
+  &[data-rarity="rare holo vmax"],
+  &[data-rarity="rare holo vstar"],
+  &[data-rarity="rare shiny v"],
+  &[data-rarity="rare shiny vmax"],
+  &[data-rarity="rare rainbow"],
+  &[data-rarity="rare rainbow alt"],
+  &[data-rarity="rare secret"] {
+    .holo-shine { clip-path: none; }
+  }

-        &::after { display: none; }
-      }
-
-      .holo-glare {
-        opacity: 0.15;
-        background-image: radial-gradient(
-          farthest-corner circle at 35% 25%,
-          var(--card-glow)          0%,
-          hsla(0, 0%, 100%, 0.2)   30%,
-          hsla(0, 0%, 0%,   0.3)   90%
+  // Foil variant shine/glare — clip handled above per variant type
+  &[data-variant="Holofoil"],
+  &[data-variant="Reverse Holofoil"],
+  &[data-variant="1st Edition Holofoil"],
+  &[data-variant="Unlimited Holofoil"] {
+    .holo-shine {
+      background-image:
+        radial-gradient(
+          circle at var(--pointer-x) var(--pointer-y),
+          #fff 5%, #000 50%, #fff 80%
+        ),
+        linear-gradient(
+          var(--foil-angle, -45deg),
+          #000 15%, #fff, #000 85%
        );
-        filter: brightness(0.8) contrast(1.5);
-      }
+      background-blend-mode: soft-light, difference;
+      background-size: 120% 120%, 200% 200%;
+      background-position:
+        center center,
+        calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top));
+      filter: brightness(var(--foil-brightness, 0.4)) contrast(1.3) saturate(var(--foil-saturation, 0.5));
+      mix-blend-mode: color-dodge;
+      opacity: calc((var(--card-opacity) * 0.9) - (var(--pointer-from-center) * 0.1));
+    }
+
+    .holo-glare {
+      opacity: calc(var(--card-opacity) * 0.5);
+      background-image: radial-gradient(
+        farthest-corner circle at var(--pointer-x) var(--pointer-y),
+        hsla(0, 0%, 100%, 0.5)  10%,
+        hsla(0, 0%, 100%, 0.25) 30%,
+        hsla(0, 0%, 0%,   0.4)  90%
+      );
+      filter: brightness(0.7) contrast(1.2);
+      mix-blend-mode: overlay;
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 5.  DEFAULT HOLO SHINE / GLARE
+//     Fallback for rarities not explicitly handled above.
+// -----------------------------------------------------------------------------
+
+.image-grow,
+.card-image-wrap {
+  &[data-rarity]:not([data-rarity="common"]):not([data-rarity="uncommon"]) {
+
+    .holo-shine {
+      background-image:
+        repeating-linear-gradient(110deg,
+          var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
+          var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
+        );
+      background-position:
+        calc(((50% - var(--background-x)) * 2.6) + 50%)
+        calc(((50% - var(--background-y)) * 3.5) + 50%);
+      background-size: 400% 400%;
+      filter: brightness(0.7) contrast(0.9) saturate(0.8);
+      mix-blend-mode: color-dodge;
+      opacity: calc(var(--card-opacity) * 0.6);
+    }
+
+    .holo-glare {
+      background-image: radial-gradient(
+        farthest-corner circle at var(--pointer-x) var(--pointer-y),
+        hsla(0, 0%, 100%, 0.35) 10%,
+        hsla(0, 0%, 100%, 0.15) 30%,
+        hsla(0, 0%, 0%,   0.35) 90%
+      );
+      opacity: calc(var(--card-opacity) * 0.4);
+      mix-blend-mode: overlay;
+      filter: brightness(0.7) contrast(1.1);
    }
  }
 }
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -24,7 +24,7 @@ $container-max-widths: (
@import "_bootstrap";

 // ── Holofoil ──────────────────────────────────────────────────────────────
-@import "_holofoil-integration";   // also pulls in _card.scss
+//@import "_holofoil-integration";   // also pulls in _card.scss

 /* --------------------------------------------------
   Root Variables
@@ -278,6 +278,40 @@ $tiers: (
  }
 }

+// ── Inventory form condition buttons ──────────────────────────────────────
+// Reuses $tiers map so colors stay in sync with nav tabs and price-row
+
+$cond-text: (
+  nm:  rgba(156, 204, 102, 1),
+  lp:  rgba(211, 225, 86, 1),
+  mp:  rgba(255, 238, 87, 1),
+  hp:  rgba(255, 201, 41, 1),
+  dmg: rgba(255, 167, 36, 1),
+);
+
+@each $name, $color in $tiers {
+  @if map-has-key($cond-text, $name) {
+    .btn-check:checked + .btn-cond-#{$name} {
+      background-color: $color;
+      border-color: $color;
+      color: rgba(0, 0, 0, 0.94);
+    }
+
+      .btn-cond-#{$name} {
+        border-color: rgba($color, 0.4);
+        color: var(--bs-body-color);
+        background: transparent;
+        font-weight: 600;
+        transition: background-color 0.1s, border-color 0.1s;
+      }
+
+      .btn-check:not(:checked) + .btn-cond-#{$name}:hover {
+        background-color: rgba($color, 0.67);
+        border-color: transparent;
+      }
+    }
+  }
+
 /* --------------------------------------------------
   Misc UI
 -------------------------------------------------- */
@@ -378,6 +412,30 @@ $tiers: (
  stroke: var(--bs-info-border-subtle);
 }

+.delete-svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: var(--bs-danger);
+  stroke: var(--bs-danger);
+}
+
+.edit-svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: var(--bs-warning);
+  stroke: var(--bs-warning);
+}
+
+.btn:hover .delete-svg {
+  fill: var(--bs-danger-border-subtle);
+  stroke: var(--bs-danger-border-subtle);
+}
+
+.btn:hover .edit-svg {
+  fill: var(--bs-warning-border-subtle);
+  stroke: var(--bs-warning-border-subtle);
+}
+
 .shadow-filter {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
@@ -417,21 +475,20 @@ $tiers: (
  );
 }

-.inventory-button {
-  width: 40px;
-  height: 40px;
-  margin-bottom: -2rem;
-  margin-right: -0.25rem;
-  border-radius: 0.33rem;
+.inventory-button, .btn-vendor {
  background-color: hsl(262, 47%, 55%);
  color: #fff;
 }

-.inventory-label {
-  width: 100%;
-  height: 100%;
-  font-size: 1rem;
-  font-weight: 700;
+.inventory-button {
+  margin-bottom: -2.25rem;
+  margin-right: -0.5rem;
+  z-index: 2;
+}
+
+.inventory-button:hover, .btn-vendor:hover {
+  background-color: hsl(262, 39%, 40%);
+  color: #fff;
 }

 .fs-7 {
--- a/src/assets/js/holofoil-init.js
+++ b/src/assets/js/holofoil-init.js
@@ -1,57 +1,53 @@
 /**
 * holofoil-init.js
+ * -----------------------------------------------------------------------------
 * Instruments .image-grow and .card-image-wrap with the holofoil effect system.
+ *
+ *  GRID (.image-grow)
+ *    Effect is invisible at rest. On hover, pointer tracking drives the shine
+ *    and glare layers. The card lift/scale comes from main.scss as before.
+ *
+ *  MODAL (.card-image-wrap)
+ *    Effect sweeps autonomously once per minute via CSS animation.
+ *    Pointer tracking takes over while the user hovers the image.
+ *
+ *  DEFAULT FALLBACK
+ *    If data-default="true" is set (onerror in the Astro markup), no effect
+ *    is applied -- even if the attribute appears after stamp() has run.
+ * -----------------------------------------------------------------------------
 */

 (function HolofoilSystem() {

  'use strict';

-  // Variants that receive NO effect
-  const NO_EFFECT_VARIANTS = new Set(['normal']);
+  // -- Constants --------------------------------------------------------------

-  // Variants that always receive an effect regardless of rarity
-  const HOLO_VARIANTS = new Set([
-    'reverse holofoil',
-    'holofoil',
-    '1st edition holofoil',
-  ]);
-
-  // Rarities that receive an effect
-  const HOLO_RARITIES = new Set([
-    // Art window zone
-    'rare',
-    'amazing rare',
-    'classic collection',
-    'holo rare',
-    // Full card zone
-    'ultra rare',
-    'character rare',
-    'illustration rare',
-    'special illustration rare',
-    'double rare',
-    'hyper rare',
-    'mega rare',
-    'mega attack rare',
-    'ace spec rare',
-    'ace rare',
-    'art rare',
-    'special art rare',
-    'black white rare',
-    'character super rare',
-    'mega ultra rare',
-    'rare break',
-    'secret rare',
-    'shiny holo rare',
-    'shiny rare',
-    'shiny secret rare',
-    'shiny ultra rare',
-    // Inverse zone
-    'prism rare',
-  ]);
+  const SHIMMER_SEL = [
+    '.image-grow[data-rarity]',
+    '.image-grow[data-variant="Holofoil"]',
+    '.image-grow[data-variant="1st Edition Holofoil"]',
+    '.image-grow[data-variant="Unlimited Holofoil"]',
+    '.image-grow[data-variant="Reverse Holofoil"]',
+    '.card-image-wrap[data-rarity]',
+    '.card-image-wrap[data-variant="Holofoil"]',
+    '.card-image-wrap[data-variant="1st Edition Holofoil"]',
+    '.card-image-wrap[data-variant="Unlimited Holofoil"]',
+    '.card-image-wrap[data-variant="Reverse Holofoil"]',
+  ].join(',');

  const ALL_WRAPPERS_SEL = '.image-grow, .card-image-wrap';

+  // Foil variant visual randomisation
+  const FOIL_ANGLE_MIN = -65,  FOIL_ANGLE_MAX = -25;
+  const FOIL_BRITE_MIN = 0.18, FOIL_BRITE_MAX = 0.32;
+  const FOIL_SAT_MIN   = 0.40, FOIL_SAT_MAX   = 0.75;
+
+  const SKIP_RARITIES = new Set(['common', 'uncommon', '']);
+
+
+  // -- Helpers ----------------------------------------------------------------
+
  const rand = (min, max) => parseFloat((Math.random() * (max - min) + min).toFixed(2));
  const clamp01 = n => Math.max(0, Math.min(1, n));

@@ -60,13 +56,13 @@
    const fromTop    = clamp01((y - rect.top)  / rect.height);
    const fromCenter = clamp01(Math.sqrt((fromLeft - 0.5) ** 2 + (fromTop - 0.5) ** 2) * 2);
    return {
-      px: fromLeft * 100,
-      py: fromTop  * 100,
+      px:         fromLeft * 100,
+      py:         fromTop  * 100,
      fromLeft,
      fromTop,
      fromCenter,
-      bgX: 50 + (fromLeft - 0.5) * -30,
-      bgY: 50 + (fromTop  - 0.5) * -30,
+      bgX:        50 + (fromLeft - 0.5) * 30,
+      bgY:        50 + (fromTop  - 0.5) * 30,
    };
  }

@@ -80,18 +76,12 @@
    el.style.setProperty('--background-y',        v.bgY.toFixed(1) + '%');
  }

-  function shouldHaveEffect(el) {
-    if (el.dataset.default === 'true') return false;
-    // Also check if the card image itself is the default fallback
-    const img = el.querySelector('img');
-    if (img && img.src && img.src.endsWith('/cards/default.jpg')) return false;
-    const variant = (el.dataset.variant || '').toLowerCase().trim();
-    const rarity  = (el.dataset.rarity  || '').toLowerCase().trim();
-    if (NO_EFFECT_VARIANTS.has(variant)) return false;
-    if (HOLO_VARIANTS.has(variant)) return true;
-    if (HOLO_RARITIES.has(rarity))  return true;
-    return false;
-  }
+  const isHoloVariant  = v => ['Holofoil', 'Reverse Holofoil', '1st Edition Holofoil', 'Unlimited Holofoil'].includes(v);
+  const isModalWrapper = el => el.classList.contains('card-image-wrap');
+  const isDefault      = el => el.dataset.default === 'true';
+
+
+  // -- Child injection --------------------------------------------------------

  function injectChildren(el) {
    if (el.querySelector('.holo-shine')) return;
@@ -103,10 +93,18 @@
    el.appendChild(glare);
  }

+
+  // -- Default image guard ----------------------------------------------------
+
+  /**
+   * Watch for the onerror handler in the Astro markup setting data-default="true"
+   * after stamp() has already run. Hide the effect children immediately when seen.
+   */
  function watchForDefault(el) {
-    if (el.dataset.default === 'true') return;
+    if (isDefault(el)) return;
+
    var observer = new MutationObserver(function() {
-      if (el.dataset.default === 'true') {
+      if (isDefault(el)) {
        var shine = el.querySelector('.holo-shine');
        var glare = el.querySelector('.holo-glare');
        if (shine) shine.style.display = 'none';
@@ -114,54 +112,81 @@
        observer.disconnect();
      }
    });
+
    observer.observe(el, { attributes: true, attributeFilter: ['data-default'] });
  }

-  const canHover = window.matchMedia('(hover: hover)').matches;
+
+  // -- Stamp ------------------------------------------------------------------

  function stamp(el) {
    if (el.dataset.holoInit) return;
-    if (!shouldHaveEffect(el)) {
+
+    // Skip if already a default fallback image
+    if (isDefault(el)) {
      el.dataset.holoInit = 'skip';
      return;
    }
-    injectChildren(el);
-    if (el.classList.contains('card-image-wrap')) {
-      if (canHover) {
-        // Desktop: use hover + pointer tracking, same as grid cards.
-        // No animation — CSS :hover rule controls --card-opacity directly.
-        el.classList.remove('holo-modal-mode');
-      } else {
-        // Touch: use the autonomous CSS animation sweep.
-        el.classList.add('holo-modal-mode');
-        el.style.setProperty('--shimmer-delay', rand(-8, 0) + 's');
-      }
+
+    const rarity  = (el.dataset.rarity  || '').toLowerCase();
+    const variant =  el.dataset.variant  || '';
+
+    const hasHoloRarity  = rarity && !SKIP_RARITIES.has(rarity);
+    const hasHoloVariant = isHoloVariant(variant);
+
+    if (!hasHoloRarity && !hasHoloVariant) {
+      el.dataset.holoInit = 'skip';
+      return;
    }
+
+    injectChildren(el);
+
+    // Per-card foil visual randomisation (angle/brightness/saturation)
+    if (hasHoloVariant) {
+      el.style.setProperty('--foil-angle',      Math.round(rand(FOIL_ANGLE_MIN, FOIL_ANGLE_MAX)) + 'deg');
+      el.style.setProperty('--foil-brightness', rand(FOIL_BRITE_MIN, FOIL_BRITE_MAX).toFixed(2));
+      el.style.setProperty('--foil-saturation', rand(FOIL_SAT_MIN,   FOIL_SAT_MAX  ).toFixed(2));
+    }
+
+    // Modal-only: set a stable delay offset for the autonomous CSS animation
+    if (isModalWrapper(el)) {
+      el.classList.add('holo-modal-mode');
+      el.style.setProperty('--shimmer-delay', rand(-8, 0) + 's');
+    }
+
    watchForDefault(el);
+
    el.dataset.holoInit = '1';
  }

+  function stampAll(root) {
+    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(stamp);
+  }
+
+
+  // -- Pointer tracking -------------------------------------------------------
+
  const pointerState = new WeakMap();

  function onPointerEnter(e) {
    const el = e.currentTarget;
-    if (el.dataset.holoInit !== '1') return;
+    if (el.dataset.holoInit !== '1' || isDefault(el)) return;
+
    el.dataset.holoActive = '1';
-    // Inline style wins over CSS immediately — @property not registered for
-    // --card-opacity so no interpolation. All calc() multipliers in child
-    // rules (glare * 0.4, glitter * 0.6) work correctly from this single var.
-    el.style.setProperty('--card-opacity', '0.2');
    if (!pointerState.has(el)) pointerState.set(el, { rafId: null });
  }

  function onPointerMove(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
+
    const state = pointerState.get(el);
    if (!state) return;
+
    if (state.rafId) cancelAnimationFrame(state.rafId);
    state.rafId = requestAnimationFrame(function() {
-      applyPointerVars(el, pointerVars(e.clientX, e.clientY, el.getBoundingClientRect()));
+      const rect = el.getBoundingClientRect();
+      applyPointerVars(el, pointerVars(e.clientX, e.clientY, rect));
      state.rafId = null;
    });
  }
@@ -169,39 +194,46 @@
  function onPointerLeave(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
+
    const state = pointerState.get(el);
    if (state && state.rafId) { cancelAnimationFrame(state.rafId); state.rafId = null; }
+
    delete el.dataset.holoActive;
-    // Remove inline style so CSS default (--card-opacity: 0) takes over instantly
-    el.style.removeProperty('--card-opacity');
+
+    if (isModalWrapper(el)) {
+      // Let the CSS animation resume driving --card-opacity
+      el.style.removeProperty('--card-opacity');
+    }
  }

  function attachListeners(el) {
    if (el.dataset.holoListeners) return;
-    // On touch-only devices the CSS static shimmer handles the effect.
-    // Skip JS pointer tracking — pointermove never fires on touchscreens
-    // and registering listeners wastes memory with no benefit.
-    if (!window.matchMedia('(hover: hover)').matches) return;
    el.addEventListener('pointerenter', onPointerEnter, { passive: true });
    el.addEventListener('pointermove',  onPointerMove,  { passive: true });
    el.addEventListener('pointerleave', onPointerLeave, { passive: true });
    el.dataset.holoListeners = '1';
  }

-  function stampAll(root) {
-    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+  function attachAllListeners(root) {
+    (root || document).querySelectorAll(SHIMMER_SEL).forEach(function(el) {
      stamp(el);
      if (el.dataset.holoInit === '1') attachListeners(el);
    });
  }

+
+  // -- MutationObserver: react to HTMX / infinite scroll ----------------------
+
  function observeGrid() {
    var grid = document.getElementById('cardGrid');
    if (!grid) return;
+
    new MutationObserver(function(mutations) {
-      mutations.forEach(function(m) {
-        m.addedNodes.forEach(function(node) {
-          if (node.nodeType !== 1) return;
+      for (var i = 0; i < mutations.length; i++) {
+        var nodes = mutations[i].addedNodes;
+        for (var j = 0; j < nodes.length; j++) {
+          var node = nodes[j];
+          if (node.nodeType !== 1) continue;
          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) {
            stamp(node);
            if (node.dataset.holoInit === '1') attachListeners(node);
@@ -212,8 +244,8 @@
              if (el.dataset.holoInit === '1') attachListeners(el);
            });
          }
-        });
-      });
+        }
+      }
    }).observe(grid, { childList: true, subtree: true });
  }

@@ -221,32 +253,20 @@
    var modal = document.getElementById('cardModal');
    if (!modal) return;

-    new MutationObserver(function(mutations) {
-      mutations.forEach(function(m) {
-        m.addedNodes.forEach(function(node) {
-          if (node.nodeType !== 1) return;
-
-          var wrappers = [];
-          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) wrappers.push(node);
-          if (node.querySelectorAll) {
-            node.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
-              wrappers.push(el);
-            });
-          }
-
-          wrappers.forEach(function(el) {
-            // Reset stamp so each new card is evaluated fresh
-            delete el.dataset.holoInit;
-            stamp(el);
-            if (el.dataset.holoInit === '1') attachListeners(el);
-          });
-        });
+    new MutationObserver(function() {
+      modal.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+        stamp(el);
+        if (el.dataset.holoInit === '1') attachListeners(el);
      });
    }).observe(modal, { childList: true, subtree: true });
  }

+
+  // -- Bootstrap --------------------------------------------------------------
+
  function init() {
    stampAll();
+    attachAllListeners();
    observeGrid();
    observeModal();
  }
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -1,52 +1,97 @@
 import * as bootstrap from 'bootstrap';
 window.bootstrap = bootstrap;
-import 'bootstrap/dist/js/bootstrap.bundle.min.js';

-// trap browser back and close the modal if open
-const cardModal = document.getElementById('cardModal');
-const loadingMsg = cardModal.innerHTML;
-// Push a new history state when the modal is shown
-cardModal.addEventListener('shown.bs.modal', () => {
-  history.pushState({ modalOpen: true }, null, '#cardModal');
-});
-// Listen for the browser's back button (popstate event)
-window.addEventListener('popstate', (e) => {
-  if (cardModal.classList.contains('show')) {
-    const modalInstance = bootstrap.Modal.getInstance(cardModal);
-    if (modalInstance) {
-      modalInstance.hide();
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Initialize all Bootstrap modals
+  document.querySelectorAll('.modal').forEach(modalEl => {
+    bootstrap.Modal.getOrCreateInstance(modalEl);
+  });
+
+  // Initialize tooltips
+  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+    if (!el._tooltipInstance) {
+      el._tooltipInstance = new bootstrap.Tooltip(el, { container: 'body' });
    }
-  }
-});
-// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
-cardModal.addEventListener('hide.bs.modal', () => {
-  cardModal.innerHTML = loadingMsg;
-  if (history.state && history.state.modalOpen) {
-    history.back();
-  }
-});
+  });

+  // ---------------- DASHBOARD LOGIC ----------------
+  const toggleBtn = document.getElementById("toggleViewBtn");
+  const gridView = document.getElementById("gridView");
+  const tableView = document.getElementById("tableView");
+  const searchInput = document.getElementById("inventorySearch");
+  const tbody = document.getElementById("inventoryRows");

-  import { Tooltip } from "bootstrap";
-
-  // Initialize all tooltips globally
-  const initTooltips = () => {
-    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
-      if (!el._tooltipInstance) {
-        el._tooltipInstance = new Tooltip(el, {
-          container: 'body',   // ensures tooltip is appended to body, important for modals
-        });
+  if(toggleBtn && gridView && tableView && tbody) {
+    // TOGGLE GRID/TABLE
+    toggleBtn.addEventListener("click", () => {
+      if(gridView.style.display !== "none") {
+        gridView.style.display = "none";
+        tableView.style.display = "block";
+        toggleBtn.textContent = "Switch to Grid View";
+      } else {
+        gridView.style.display = "block";
+        tableView.style.display = "none";
+        toggleBtn.textContent = "Switch to Table View";
      }
    });
-  };

-  // Run on page load
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initTooltips);
-  } else {
-    initTooltips();
+    // SEARCH FILTER
+    if(searchInput) {
+      searchInput.addEventListener("input", e => {
+        const term = e.target.value.toLowerCase();
+        [...tbody.querySelectorAll("tr")].forEach(row => {
+          row.style.display = row.textContent.toLowerCase().includes(term) ? "" : "none";
+        });
+      });
+    }
+
+    // SORTING
+    document.querySelectorAll("th[data-key]").forEach(th => {
+      let sortAsc = true;
+      th.addEventListener("click", () => {
+        const key = th.dataset.key;
+        const indexMap = {name:0,set:1,condition:2,qty:3,price:4,market:5,gain:6};
+        const idx = indexMap[key];
+        const rows = [...tbody.querySelectorAll("tr")];
+
+        rows.sort((a,b) => {
+          let aText = a.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
+          let bText = b.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
+          if(!isNaN(aText) && !isNaN(bText)) return sortAsc ? aText-bText : bText-aText;
+          return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
+        });
+
+        sortAsc = !sortAsc;
+        tbody.innerHTML="";
+        rows.forEach(r => tbody.appendChild(r));
+      });
+    });
+
+    // INLINE EDITING + GAIN/LOSS UPDATE
+    tbody.addEventListener("input", e => {
+      const row = e.target.closest("tr");
+      if(!row) return;
+
+      const priceCell = row.querySelector(".editable-price");
+      const qtyCell = row.querySelector(".editable-qty");
+      const marketCell = row.children[5];
+      const gainCell = row.querySelector(".gain");
+
+      if(e.target.classList.contains("editable-price")) {
+        e.target.textContent = e.target.textContent.replace(/[^\d.]/g,"");
+      }
+      if(e.target.classList.contains("editable-qty")) {
+        e.target.textContent = e.target.textContent.replace(/\D/g,"");
+      }
+
+      const price = parseFloat(priceCell.textContent) || 0;
+      const qty = parseInt(qtyCell.textContent) || 0;
+      const market = parseFloat(marketCell.textContent) || 0;
+      const gain = market - price;
+
+      gainCell.textContent = (gain>=0 ? "+" : "-") + Math.abs(gain);
+      gainCell.className = gain>=0 ? "gain text-success" : "gain text-danger";
+    });
  }
-
-  // Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
-  const observer = new MutationObserver(() => initTooltips());
-  observer.observe(document.body, { childList: true, subtree: true });
+});
--- a/src/assets/js/priceChart.js
+++ b/src/assets/js/priceChart.js
@@ -32,6 +32,12 @@ function setEmptyState(isEmpty) {
  canvasWrapper.classList.toggle('d-none', isEmpty);
 }

+function setChartVisible(visible) {
+  const modal = document.getElementById('cardModal');
+  const chartWrapper = modal?.querySelector('#priceHistoryChart')?.closest('.alert');
+  if (chartWrapper) chartWrapper.classList.toggle('d-none', !visible);
+}
+
 function buildChartData(history, rangeKey) {
  const cutoff = RANGE_DAYS[rangeKey] === Infinity
    ? new Date(0)
@@ -39,20 +45,14 @@ function buildChartData(history, rangeKey) {

  const filtered = history.filter(r => new Date(r.calculatedAt) >= cutoff);

-  // Always build the full date axis for the selected window, even if sparse.
-  // Generate one label per day in the range so the x-axis reflects the
-  // chosen period rather than collapsing to only the days that have data.
  const dataDateSet = new Set(filtered.map(r => r.calculatedAt));
  const allDates = [...dataDateSet].sort((a, b) => new Date(a) - new Date(b));

-  // If we have real data, expand the axis to span from cutoff → today so
-  // empty stretches at the start/end of a range are visible.
  let axisLabels = allDates;
  if (allDates.length > 0 && RANGE_DAYS[rangeKey] !== Infinity) {
    const start = new Date(cutoff);
    const end   = new Date();
    const expanded = [];
-    // Step through every day in the window
    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
      expanded.push(d.toISOString().split('T')[0]);
    }
@@ -101,17 +101,9 @@ function buildChartData(history, rangeKey) {
 function updateChart() {
  if (!chartInstance) return;
  const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
-
-  // Always push the new labels/datasets to the chart so the x-axis
-  // reflects the selected time window — even when there's no data for
-  // the active condition. Then toggle the empty state overlay on top.
  chartInstance.data.labels   = labels;
  chartInstance.data.datasets = datasets;
  chartInstance.update('none');
-
-  // Show the empty state overlay if the active condition has no points
-  // in this window, but leave the (empty) chart visible underneath so
-  // the axis communicates the selected period.
  setEmptyState(!hasData || !activeConditionHasData);
 }

@@ -135,7 +127,6 @@ function initPriceChart(canvas) {

  const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);

-  // Render the chart regardless — show empty state overlay if needed
  setEmptyState(!hasData || !activeConditionHasData);

  chartInstance = new Chart(canvas.getContext('2d'), {
@@ -202,9 +193,16 @@ function initFromCanvas(canvas) {
  activeCondition = "Near Mint";
  activeRange = '1m';
  const modal = document.getElementById('cardModal');
+
  modal?.querySelectorAll('.price-range-btn').forEach(b => {
    b.classList.toggle('active', b.dataset.range === '1m');
  });
+
+  // Hide chart if the vendor tab is already active when the modal opens
+  // (e.g. opened via the inventory button)
+  const activeTab = modal?.querySelector('.nav-link.active')?.getAttribute('data-bs-target');
+  setChartVisible(activeTab !== '#nav-vendor');
+
  initPriceChart(canvas);
 }

@@ -225,6 +223,10 @@ function setup() {
  document.addEventListener('shown.bs.tab', (e) => {
    if (!modal.contains(e.target)) return;
    const target = e.target?.getAttribute('data-bs-target');
+
+    // Hide the chart when the vendor tab is active, show it for all others
+    setChartVisible(target !== '#nav-vendor');
+
    const conditionMap = {
      '#nav-nm':  'Near Mint',
      '#nav-lp':  'Lightly Played',
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -44,15 +44,69 @@ import BackToTop from "./BackToTop.astro"

 <BackToTop />

-<script src="src/assets/js/holofoil-init.js" is:inline></script>
-
 <script is:inline>
 (function () {

+  function initInventoryForms(root = document) {
+    // Fetch inventory entries for this card
+    const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
+    if (invList && !invList.dataset.inventoryFetched) {
+      invList.dataset.inventoryFetched = 'true';
+      const cardId = invList.dataset.cardId;
+      if (cardId) {
+        const body = new FormData();
+        body.append('cardId', cardId);
+        fetch('/api/inventory', { method: 'POST', body })
+          .then(r => r.text())
+          .then(html => { invList.innerHTML = html || ''; })
+          .catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
+      }
+    }
+
+    const forms = root.querySelectorAll('[data-inventory-form]');
+
+    forms.forEach((form) => {
+      if (form.dataset.inventoryBound === 'true') return;
+      form.dataset.inventoryBound = 'true';
+
+      const priceInput = form.querySelector('#purchasePrice');
+      const pricePrefix = form.querySelector('#pricePrefix');
+      const priceSuffix = form.querySelector('#priceSuffix');
+      const priceHint = form.querySelector('#priceHint');
+      const modeInputs = form.querySelectorAll('input[name="priceMode"]');
+
+      if (!priceInput || !pricePrefix || !priceSuffix || !priceHint || !modeInputs.length) return;
+
+      function updatePriceMode(mode) {
+        const isPct = mode === 'percent';
+
+        pricePrefix.classList.toggle('d-none', isPct);
+        priceSuffix.classList.toggle('d-none', !isPct);
+
+        priceInput.step = isPct ? '1' : '0.01';
+        priceInput.max = isPct ? '100' : '';
+        priceInput.placeholder = isPct ? '100' : '0.00';
+        priceInput.value = '';
+        priceHint.textContent = isPct
+          ? 'Enter the percentage of market price you paid.'
+          : 'Enter the purchase price.';
+
+        // swap rounded edge classes based on visible prepend/append
+        priceInput.classList.toggle('rounded-end', !isPct);
+        priceInput.classList.toggle('rounded-start', isPct);
+      }
+
+      modeInputs.forEach((input) => {
+        input.addEventListener('change', () => updatePriceMode(input.value));
+      });
+
+      const checked = form.querySelector('input[name="priceMode"]:checked');
+      updatePriceMode(checked ? checked.value : 'dollar');
+    });
+  }
+
  // ── Sort dropdown ─────────────────────────────────────────────────────────
  document.addEventListener('click', (e) => {
-    const sortBy = document.getElementById('sortBy');
-
    const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
    if (btn) {
      e.preventDefault();
@@ -118,7 +172,6 @@ import BackToTop from "./BackToTop.astro"
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

-      // Load with crossOrigin so toBlob() stays untainted
      await new Promise((resolve) => {
        const clean = new Image();
        clean.crossOrigin = 'anonymous';
@@ -172,6 +225,20 @@ import BackToTop from "./BackToTop.astro"
    }, 2000);
  }

+  // ── Tab switching helper ──────────────────────────────────────────────────
+  function switchToRequestedTab() {
+    const tab = sessionStorage.getItem('openModalTab');
+    if (!tab) return;
+    sessionStorage.removeItem('openModalTab');
+    requestAnimationFrame(() => {
+      try {
+        const tabEl = document.querySelector(`#cardModal [data-bs-target="#${tab}"]`);
+        if (tabEl) bootstrap.Tab.getOrCreateInstance(tabEl).show();
+      } catch (e) {
+      }
+    });
+  }
+
  // ── State ─────────────────────────────────────────────────────────────────
  const cardIndex = [];
  let currentCardId = null;
@@ -259,10 +326,17 @@ import BackToTop from "./BackToTop.astro"

      if (modal._reconnectChartObserver) modal._reconnectChartObserver();

+      modal.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
+        bootstrap.Tab.getInstance(el)?.dispose();
+      });
+
      modal.innerHTML = html;
+
      if (typeof htmx !== 'undefined') htmx.process(modal);
+      initInventoryForms(modal);
      updateNavButtons(modal);
      initChartAfterSwap(modal);
+      switchToRequestedTab();
    };

    if (document.startViewTransition && direction) {
@@ -347,8 +421,14 @@ import BackToTop from "./BackToTop.astro"

        if (target._reconnectChartObserver) target._reconnectChartObserver();

+        target.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
+          bootstrap.Tab.getInstance(el)?.dispose();
+        });
+
        target.innerHTML = html;
+
        if (typeof htmx !== 'undefined') htmx.process(target);
+        initInventoryForms(target);

        const destImg = target.querySelector('img.card-image');
        if (destImg) {
@@ -365,6 +445,7 @@ import BackToTop from "./BackToTop.astro"
      await transition.finished;
      updateNavButtons(target);
      initChartAfterSwap(target);
+      switchToRequestedTab();

    } catch (err) {
      console.error('[card-modal] transition failed:', err);
@@ -380,13 +461,106 @@ import BackToTop from "./BackToTop.astro"
  });

  const cardModal = document.getElementById('cardModal');
+
+  // ── Delegated submit handler for inventory form ──────────────────────────
+  cardModal.addEventListener('submit', async (e) => {
+    const form = e.target.closest('[data-inventory-form]');
+    if (!form) return;
+    e.preventDefault();
+
+    if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
+
+    const cardId = form.closest('[data-card-id]')?.dataset.cardId;
+    if (!cardId) return;
+
+    const submitBtn = form.querySelector('button[type="submit"]');
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }
+
+    const body = new FormData(form);
+    body.append('action', 'add');
+    body.append('cardId', cardId);
+
+    try {
+      const res = await fetch('/api/inventory', { method: 'POST', body });
+      const html = await res.text();
+      const invList = document.getElementById('inventoryEntryList');
+      if (invList) invList.innerHTML = html || '';
+      form.reset();
+      form.classList.remove('was-validated');
+    } catch {
+      // keep current inventory list state
+    } finally {
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save to inventory'; }
+    }
+  });
+
+  // ── Delegated click handler for inventory entry buttons ─────────────────
+  cardModal.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-inv-action]');
+    if (!btn) return;
+
+    const article = btn.closest('[data-inventory-id]');
+    if (!article) return;
+
+    const action = btn.dataset.invAction;
+    const inventoryId = article.dataset.inventoryId;
+    const cardId = article.dataset.cardId;
+    const qtyEl = article.querySelector('[data-inv-qty]');
+    let qty = Number(qtyEl?.textContent) || 1;
+
+    if (action === 'increment') {
+      qtyEl.textContent = ++qty;
+      return;
+    }
+
+    if (action === 'decrement') {
+      if (qty > 1) qtyEl.textContent = --qty;
+      return;
+    }
+
+    // update or remove — POST to API and reload inventory list
+    btn.disabled = true;
+    const body = new FormData();
+    body.append('cardId', cardId);
+
+    if (action === 'update') {
+      body.append('action', 'update');
+      body.append('inventoryId', inventoryId);
+      body.append('quantity', String(qty));
+      body.append('purchasePrice', article.dataset.purchasePrice);
+      body.append('note', article.dataset.note || '');
+    } else if (action === 'remove') {
+      body.append('action', 'remove');
+      body.append('inventoryId', inventoryId);
+    }
+
+    try {
+      const res = await fetch('/api/inventory', { method: 'POST', body });
+      const html = await res.text();
+      const invList = document.getElementById('inventoryEntryList');
+      if (invList) invList.innerHTML = html || '';
+    } catch {
+      // keep current state
+    } finally {
+      btn.disabled = false;
+    }
+  });
+
  cardModal.addEventListener('shown.bs.modal', () => {
    updateNavButtons(cardModal);
    initChartAfterSwap(cardModal);
+    initInventoryForms(cardModal);
+    switchToRequestedTab();
  });
+
  cardModal.addEventListener('hidden.bs.modal', () => {
    currentCardId = null;
    updateNavButtons(null);
  });
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initInventoryForms();
+  });
+
 })();
 </script>
--- a/src/components/InventoryTable.astro
+++ b/src/components/InventoryTable.astro
@@ -0,0 +1,37 @@
+---
+const mockInventory = [
+  { name: "Charizard", set: "Base Set", condition: "NM", qty: 2, price: 350, market: 400, gain: 50 },
+  { name: "Pikachu", set: "Shining Legends", condition: "LP", qty: 5, price: 15, market: 20, gain: 5 },
+];
+---
+
+<div class="table-responsive">
+  <table class="table table-dark table-striped table-hover align-middle">
+    <thead>
+      <tr>
+        <th>Card</th>
+        <th>Set</th>
+        <th>Condition</th>
+        <th>Qty</th>
+        <th>Price</th>
+        <th>Market</th>
+        <th>Gain/Loss</th>
+      </tr>
+    </thead>
+    <tbody>
+      {mockInventory.map(card => (
+        <tr>
+          <td>{card.name}</td>
+          <td>{card.set}</td>
+          <td>{card.condition}</td>
+          <td>{card.qty}</td>
+          <td>${card.price}</td>
+          <td>${card.market}</td>
+          <td class={card.gain >= 0 ? "text-success" : "text-danger"}>
+            {card.gain >= 0 ? "+" : "-"}${Math.abs(card.gain)}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
--- a/src/db/relations.ts
+++ b/src/db/relations.ts
@@ -21,9 +21,21 @@ export const relations = defineRelations(schema, (r) => ({
        }),
        history: r.many.priceHistory(),
        latestSales: r.many.salesHistory(),
+        inventories: r.many.inventory(),
+    },
+    inventory: {
+        card: r.one.cards({
+            from: r.inventory.cardId,
+            to: r.cards.cardId,
+        }),
+        sku: r.one.skus({
+            from: [r.inventory.cardId, r.inventory.condition],
+            to: [r.skus.cardId, r.skus.condition],
+        }),
    },
    cards: {
        prices: r.many.skus(),
+        inventories: r.many.inventory(),
        set: r.one.sets({
            from: r.cards.setId,
            to: r.sets.setId,
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -1,5 +1,5 @@
 //import { mysqlTable, int, varchar, boolean, decimal, datetime, index } from "drizzle-orm/mysql-core"
-import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uniqueIndex, primaryKey } from "drizzle-orm/pg-core";
+import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uuid, primaryKey } from "drizzle-orm/pg-core";

 export const pokeSchema = pgSchema("pokemon");

@@ -98,6 +98,7 @@ export const skus = pokeSchema.table('skus', {
 },
 (table) => [
 	index('idx_product_id_condition').on(table.productId, table.variant, table.condition),
+	index('idx_card_id_condition').on(table.cardId, table.condition),
 ]);

 export const priceHistory = pokeSchema.table('price_history', {
@@ -124,6 +125,20 @@ export const salesHistory = pokeSchema.table('sales_history',{
 	primaryKey({ name: 'pk_sales_history', columns: [table.skuId, table.orderDate] })
 ]);

+export const inventory = pokeSchema.table('inventory',{
+	inventoryId: uuid().primaryKey().notNull().defaultRandom(),
+	userId: varchar({ length: 100 }).notNull(),
+	catalogName: varchar({ length: 100 }),
+	cardId: integer().notNull(),
+	condition: varchar({ length: 255 }).notNull(),
+	quantity: integer(),
+	purchasePrice: integer(),
+	note: varchar({ length:255 })
+},
+(table) => [
+	index('idx_userid_cardid').on(table.userId, table.cardId)
+]);
+
 export const processingSkus = pokeSchema.table('processing_skus', {
 	skuId: integer().primaryKey(),
 });
--- a/src/pages/api/inventory.ts
+++ b/src/pages/api/inventory.ts
@@ -0,0 +1,160 @@
+import type { APIRoute } from 'astro';
+import { db } from '../../db/index';
+import { inventory } from '../../db/schema';
+import { client } from '../../db/typesense';
+import { eq } from 'drizzle-orm';
+
+
+const GainLoss = (purchasePrice:any, marketPrice:any) => {
+    if (!purchasePrice || !marketPrice) return '<div class="fs-5 fw-semibold">N/A</div>';
+    const pp = Number(purchasePrice);
+    const mp = Number(marketPrice);
+    if (pp === mp) return '<div class="fs-5 fw-semibold text-warning">-</div>';
+    if (pp > mp) return `<div class="fs-5 fw-semibold text-critical">-$${pp-mp}</div>`;
+    return `<div class="fs-5 fw-semibold text-success">+$${mp-pp}</div>`;
+}
+
+
+const getInventory = async (userId:string, cardId:number) => {
+
+    const inventories = await db.query.inventory.findMany({
+        where: { userId:userId, cardId:cardId, },
+        with: { card: true, sku: true, }
+    });
+
+    const invHtml = inventories.map(inv => {
+        return `
+        <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card"
+            data-inventory-id="${inv.inventoryId}"
+            data-card-id="${inv.cardId}"
+            data-purchase-price="${inv.purchasePrice}"
+            data-note="${(inv.note || '').replace(/"/g, '&quot;')}">
+            <div class="d-flex flex-column gap-2">
+                <!-- Top row -->
+                <div class="d-flex justify-content-between align-items-start gap-3">
+                    <div class="min-w-0 flex-grow-1">
+                        <div class="fw-semibold fs-5 text-body mb-1">${inv.condition}</div>
+                    </div>
+                </div>
+                <!-- Middle row -->
+                <div class="row g-2">
+                    <div class="col-4">
+                        <div class="small text-secondary">Purchase price</div>
+                        <div class="fs-5 fw-semibold">$${inv.purchasePrice}</div>
+                    </div>
+                    <div class="col-4">
+                        <div class="small text-secondary">Market price</div>
+                        <div class="fs-5 text-success">$${inv.sku?.marketPrice}</div>
+                    </div>
+                    <div class="col-4">
+                        <div class="small text-secondary">Gain / loss</div>
+                        ${GainLoss(inv.purchasePrice, inv.sku?.marketPrice)}
+                    </div>
+                </div>
+                <!-- Bottom row -->
+                <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="small text-secondary">Qty</span>
+                        <div class="btn-group" role="group" aria-label="Quantity controls">
+                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="decrement">−</button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1" data-inv-qty>${inv.quantity}</button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="increment">+</button>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center gap-2 flex-wrap">
+                        <button type="button" class="btn btn-sm btn-outline-secondary" data-inv-action="update">Edit</button>
+                        <button type="button" class="btn btn-sm btn-outline-danger" data-inv-action="remove">Remove</button>
+                    </div>
+                </div>
+            </div>
+        </article>`;
+    });
+
+    return new Response(
+        invHtml.join(''),
+        {
+            status: 200,
+            headers: { 'Content-Type': 'text/html' },
+        }
+    );
+
+}
+
+
+const addToInventory = async (userId:string, cardId:number, condition:string, purchasePrice:number, quantity:number, note:string, catalogName:string) => {
+    // First add to database
+    const inv = await db.insert(inventory).values({
+        userId: userId,
+        cardId: cardId,
+        catalogName: catalogName,
+        condition: condition,
+        purchasePrice: purchasePrice,
+        quantity: quantity,
+        note: note,
+    }).returning();
+    // And then add to Typesense
+    await client.collections('inventories').documents().import(inv.map(i => ({
+        id: i.inventoryId,
+        userId: i.userId,
+        catalogName: i.catalogName,
+        card_id: i.cardId.toString(),
+    })));
+}
+
+const removeFromInventory = async (inventoryId:string) => {
+    await db.delete(inventory).where(eq( inventory.inventoryId, inventoryId ));
+    await client.collections('inventories').documents(inventoryId).delete();
+}
+
+const updateInventory = async (inventoryId:string, quantity:number, purchasePrice:number, note:string) => {
+    // Update in database
+    await db.update(inventory).set({
+        quantity: quantity,
+        purchasePrice: purchasePrice,
+        note: note,
+    }).where(eq( inventory.inventoryId, inventoryId ));
+    // There is no need to update Typesense for these fields as they are not indexed
+}
+
+export const POST: APIRoute = async ({ request, locals }) => {
+    // Access form data from the request body
+    const formData = await request.formData();
+    const action = formData.get('action');
+    const cardId = Number(formData.get('cardId')) || 0;
+    const { userId } = locals.auth();
+
+    switch (action) {
+
+        case 'add':
+            const condition = formData.get('condition')?.toString() || 'Unknown';
+            const purchasePrice = Number(formData.get('purchasePrice')) || 0;
+            const quantity = Number(formData.get('quantity')) || 1;
+            const note = formData.get('note')?.toString() || '';
+            const catalogName = formData.get('catalogName')?.toString() || 'Default';
+            await addToInventory(userId!, cardId, condition, purchasePrice, quantity, note, catalogName);
+            //return await getInventory(cardId);
+            break;
+
+        case 'remove':
+            const inventoryId = formData.get('inventoryId')?.toString() || '';
+            await removeFromInventory(inventoryId);
+            break;
+
+        case 'update':
+            const invId = formData.get('inventoryId')?.toString() || '';
+            const qty = Number(formData.get('quantity')) || 1;
+            const price = Number(formData.get('purchasePrice')) || 0;
+            const invNote = formData.get('note')?.toString() || '';
+            await updateInventory(invId, qty, price, invNote);
+            break;
+
+        default:
+            // No action = list inventory for this card
+            return getInventory(userId!, cardId);
+    }
+
+    // Always return current inventory after a mutation
+    return getInventory(userId!, cardId);
+
+
+};
--- a/src/pages/api/upload.ts
+++ b/src/pages/api/upload.ts
@@ -0,0 +1,95 @@
+// src/pages/api/upload.ts
+import type { APIRoute } from 'astro';
+import { parse, stringify, transform } from 'csv';
+import { Readable } from 'stream';
+import { client } from '../../db/typesense';
+import chalk from 'chalk';
+import { db, ClosePool } from '../../db/index';
+
+// Define the transformation logic
+const transformer = transform({ parallel: 1 }, async function(this: any, row: any, callback: any) {
+try {
+    // Specific query bsaed on tcgcollector CSV
+    const query = String(Object.values(row)[1]);
+    const setname = String(Object.values(row)[4]).replace(/Wizards of the coast promos/ig,'WoTC Promo');
+    const cardNumber = String(Object.values(row)[7]);
+    console.log(`${query} ${cardNumber} : ${setname}`);
+
+    // Use Typesense to find the card because we can easily use the combined fields
+    let cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\` && number:${cardNumber}` });
+    if (cards.hits?.length === 0) {
+        // Try without card number
+        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\`` });
+    }
+    if (cards.hits?.length === 0) {
+        // Try without set name
+        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `number:${cardNumber}` });
+    }
+    if (cards.hits?.length === 0) {
+        // I give up, just output the values from the csv
+        console.log(chalk.red('  - not found'));
+        const newRow = { ...row };
+        newRow.Variant = '';
+        newRow.marketPrice = '';
+        this.push(newRow);
+    }
+    else {
+        for (const card of cards.hits?.map((hit: any) => hit.document) ?? []) {
+            console.log(chalk.blue(`  - ${card.cardId} : ${card.productName} : ${card.number}`), chalk.yellow(`${card.setName}`), chalk.green(`${card.variant}`));
+            const variant = await db.query.cards.findFirst({
+                with: { prices: true, tcgdata: true },
+                where: { cardId: card.cardId }
+            });
+            const newRow = { ...row };
+            newRow.Variant = variant?.variant;
+            newRow.marketPrice = variant?.prices.find(p => p.condition === 'Near Mint')?.marketPrice;
+            this.push(newRow);
+        }
+    }
+
+    callback();
+} catch (error) {
+    callback(error);
+}
+});
+
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+    const inputStream = Readable.from(file.stream());
+
+    if (!file) {
+      return new Response('No file uploaded', { status: 400 });
+    }
+
+    // Pipe the streams: Read -> Parse -> Transform -> Stringify -> Write
+    const outputStream = inputStream
+        .on('error', (error) => console.error('Input stream error:', error))
+        .pipe(parse({ columns: true, trim: true }))
+        .on('error', (error) => console.error('Parse error:', error))
+        .pipe(transformer)
+        .on('error', (error) => console.error('Transform error:', error))
+        .pipe(stringify({ header: true }))
+        .on('error', (error) => console.error('Stringify error:', error));
+
+    // outputStream.on('finish', () => {
+    //     ClosePool();
+    // }).on('error', (error) => {
+    //     ClosePool();
+    // });
+
+    
+    return new Response(outputStream as any, {
+        headers: {
+            'Content-Type': 'text/csv',
+            'Content-Disposition': 'attachment; filename=transformed.csv',
+        },
+    });
+
+  } catch (error) {
+    console.error('Error processing CSV stream:', error);
+    return new Response('Internal Server Error', { status: 500 });
+  }
+};
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
--- a/src/pages/myprices.astro
+++ b/src/pages/myprices.astro
@@ -0,0 +1,26 @@
+---
+import Layout from '../layouts/Main.astro';
+import NavItems from '../components/NavItems.astro';
+import NavBar from '../components/NavBar.astro';
+import Footer from '../components/Footer.astro';
+
+---
+<Layout title="Rigid's App Thing">
+    <NavBar slot="navbar">
+        <NavItems slot="navItems" />
+    </NavBar>
+    <div class="row mb-4" slot="page">
+        <div class="col-12">
+            <h1>Rigid's App Thing</h1>
+            <p class="text-secondary">(working title)</p>
+        </div>
+        <div class="col-12">
+            <!-- src/components/FileUploader.astro -->
+            <form action="/api/upload" method="post" enctype="multipart/form-data">
+                <input type="file" name="file" accept=".csv" required />
+                <button type="submit">Upload CSV</button>
+            </form>
+        </div>
+    </div>
+    <Footer slot="footer" />
+</Layout>
--- a/src/pages/partials/card-modal.astro
+++ b/src/pages/partials/card-modal.astro
@@ -46,7 +46,7 @@ const calculatedAt = (() => {
  const dates = card.prices
    .map(p => p.calculatedAt)
    .filter(d => d)
-    .map(d => new Date(d));
+    .map(d => new Date(d!));
  if (!dates.length) return null;
  return new Date(Math.max(...dates.map(d => d.getTime())));
 })();
@@ -169,7 +169,6 @@ const altSearchUrl = (card: any) => {
  return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
 };
 ---
-
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
    <div class="modal-content" data-card-id={card?.cardId}>
      <div class="modal-header border-0">
@@ -201,15 +200,13 @@ const altSearchUrl = (card: any) => {
                    data-name={card?.productName}
                  >
                    <img
-                      src={`/cards/${card?.productId}.jpg`}
+                      src={`/static/cards/${card?.productId}.jpg`}
                      class="card-image w-100 img-fluid rounded-4"
                      alt={card?.productName}
                      crossorigin="anonymous"
-                      onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
+                      onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
                      onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
                    />
-                    <div class="holo-shine"></div>
-                    <div class="holo-glare"></div>
                  </div>

                  <span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span>
@@ -228,31 +225,31 @@ const altSearchUrl = (card: any) => {
                <ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true">
-                      <span class="d-none d-xxl-inline">Near Mint</span><span class="d-xxl-none">NM</span>
+                      <span class="d-none">Near Mint</span><span class="d-inline">NM</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Lightly Played</span><span class="d-xxl-none">LP</span>
+                      <span class="d-none">Lightly Played</span><span class="d-inline">LP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Moderately Played</span><span class="d-xxl-none">MP</span>
+                      <span class="d-none">Moderately Played</span><span class="d-inline">MP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Heavily Played</span><span class="d-xxl-none">HP</span>
+                      <span class="d-none">Heavily Played</span><span class="d-inline">HP</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false">
-                      <span class="d-none d-xxl-inline">Damaged</span><span class="d-xxl-none">DMG</span>
+                      <span class="d-none">Damaged</span><span class="d-inline">DMG</span>
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
-                    <button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
+                    <button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
                      <span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
                    </button>
                  </li>
@@ -339,7 +336,176 @@ const altSearchUrl = (card: any) => {
                    );
                  })}

-                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0"></div>
+                  <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
+                    <div class="row g-3">
+                      <div class="col-12 col-md-6">
+                        <h5 class="my-3">Add {card?.productName} to inventory</h5>
+
+                        <form id="inventoryForm" data-inventory-form novalidate>
+                          <div class="row g-3">
+                            <div class="col-4">
+                              <label for="quantity" class="form-label fw-medium">Quantity</label>
+                              <input
+                                type="number"
+                                class="form-control mt-1"
+                                id="quantity"
+                                name="quantity"
+                                min="1"
+                                step="1"
+                                value="1"
+                                required
+                              />
+                              <div class="invalid-feedback">Required.</div>
+                            </div>
+
+                            <div class="col-8">
+                              <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
+                                <label for="purchasePrice" class="form-label fw-medium mb-0 mt-1">
+                                  Purchase price
+                                </label>
+
+                                <div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
+                                  <input
+                                    type="radio"
+                                    class="btn-check"
+                                    name="priceMode"
+                                    id="mode-dollar"
+                                    value="dollar"
+                                    autocomplete="off"
+                                    checked
+                                  />
+                                  <label class="btn btn-outline-secondary" for="mode-dollar">$</label>
+
+                                  <input
+                                    type="radio"
+                                    class="btn-check"
+                                    name="priceMode"
+                                    id="mode-percent"
+                                    value="percent"
+                                    autocomplete="off"
+                                  />
+                                  <label class="btn btn-outline-secondary" for="mode-percent">%</label>
+                                </div>
+                              </div>
+
+                              <div class="input-group">
+                                <span class="input-group-text mt-1" id="pricePrefix">$</span>
+                                <input
+                                  type="number"
+                                  class="form-control mt-1 rounded-end"
+                                  id="purchasePrice"
+                                  name="purchasePrice"
+                                  min="0"
+                                  step="0.01"
+                                  placeholder="0.00"
+                                  aria-describedby="pricePrefix priceSuffix priceHint"
+                                  required
+                                />
+                                <span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
+                              </div>
+
+                              <div class="form-text" id="priceHint">Enter the purchase price.</div>
+                              <div class="invalid-feedback">Enter a purchase price.</div>
+                            </div>
+
+                            <div class="col-12">
+                              <label class="form-label fw-medium">Condition</label>
+                              <div class="btn-group condition-input w-100" role="group" aria-label="Condition">
+                                <input
+                                  type="radio"
+                                  class="btn-check"
+                                  name="condition"
+                                  id="cond-nm"
+                                  value="Near Mint"
+                                  autocomplete="off"
+                                  checked
+                                />
+                                <label class="btn btn-cond-nm" for="cond-nm">NM</label>
+
+                                <input
+                                  type="radio"
+                                  class="btn-check"
+                                  name="condition"
+                                  id="cond-lp"
+                                  value="Lightly Played"
+                                  autocomplete="off"
+                                />
+                                <label class="btn btn-cond-lp" for="cond-lp">LP</label>
+
+                                <input
+                                  type="radio"
+                                  class="btn-check"
+                                  name="condition"
+                                  id="cond-mp"
+                                  value="Moderately Played"
+                                  autocomplete="off"
+                                />
+                                <label class="btn btn-cond-mp" for="cond-mp">MP</label>
+
+                                <input
+                                  type="radio"
+                                  class="btn-check"
+                                  name="condition"
+                                  id="cond-hp"
+                                  value="Heavily Played"
+                                  autocomplete="off"
+                                />
+                                <label class="btn btn-cond-hp" for="cond-hp">HP</label>
+
+                                <input
+                                  type="radio"
+                                  class="btn-check"
+                                  name="condition"
+                                  id="cond-dmg"
+                                  value="Damaged"
+                                  autocomplete="off"
+                                />
+                                <label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
+                              </div>
+                            </div>
+
+                            <div class="col-12">
+                              <label for="note" class="form-label fw-medium">
+                                Note
+                                <span class="text-body-tertiary fw-normal ms-1 small">optional</span>
+                              </label>
+                              <textarea
+                                class="form-control"
+                                id="note"
+                                name="note"
+                                rows="2"
+                                maxlength="255"
+                                placeholder="e.g. bought at local shop, gift, graded copy…"
+                              ></textarea>
+                              <div class="form-text text-end" id="noteCount">0 / 255</div>
+                            </div>
+
+                            <div class="col-12 d-flex gap-3 pt-2">
+                              <button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
+                              <button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
+                            </div>
+                          </div>
+                        </form>
+                      </div>
+
+                      <div class="col-12 col-md-6">
+                        <h5 class="my-3">Inventory entries for {card?.productName}</h5>
+
+                        <!-- Empty state -->
+                        <div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
+                          <div class="fw-medium mb-1">No inventory entries yet</div>
+                          <div class="text-secondary small">
+                            Once you add copies of this card, they'll show up here.
+                          </div>
+                        </div>
+
+                        <!-- Inventory list -->
+                        <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
+                          <span>Loading...</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                </div>

                <!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -234,7 +234,6 @@ const facets = searchResults.results.slice(1).map((result: any) => {
        }
    </div>
    <script define:vars={{ totalHits, filters, facets }} is:inline>
-
        // Filter the facet values to make things like Set easier to find
        const facetfilters = document.querySelectorAll('.facet-filter');
        for (const facetfilter of facetfilters) {
@@ -260,7 +259,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
            document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
        }
        document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
-        document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
+        const clearAllBtn = document.getElementById('clear-all-filters');
+        if (clearAllBtn) clearAllBtn.addEventListener('click', (e) => clearAllFilters(e));

        // Remove single facet value
        for (const li of document.querySelectorAll('.remove-filter')) {
@@ -283,11 +283,11 @@ const facets = searchResults.results.slice(1).map((result: any) => {

 {pokemon.map((card:any) => (
    <div class="col">
-        <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
-            <div class="inventory-label pt-2">+/-</div>
-        </div>
+        <button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
+            <b>+/–</b>
+        </button>
        <div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
-            <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
+            <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
              <div class="holo-shine"></div>
              <div class="holo-glare"></div>
            </div>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
+  "include": [".astro/types.d.ts", "src/**/*"],
  "exclude": ["dist"]
 }
Author	SHA1	Message	Date
Thad Miller	12a42b87b8	[feat] save/remove inventory working now	2026-04-03 22:50:54 -04:00
Thad Miller	03394d81e8	[feat] loading inventory	2026-04-03 22:10:41 -04:00
Thad Miller	86da8a91ad	[bugfix] removed server import from client script	2026-04-03 21:53:45 -04:00
Thad Miller	66290fcb97	[bugfix] duplicated bootstrap inclusion causing errors	2026-04-03 21:49:44 -04:00
Thad Miller	7a1b7eb5fe	[chore] claude init	2026-04-03 21:37:04 -04:00
Thad Miller	3be17fe84c	[wip] bugs to work out, but backend should support inventory	2026-04-02 19:24:51 -04:00
Thad Miller	38f041d86f	[chore] supress bootstrap warnings for now	2026-04-01 21:08:52 -04:00
Zach Harding	b65e2a2859	minor style updates	2026-03-25 10:23:17 -04:00
Zach Harding	91823174d2	mostly complete inventory dashboard/modal	2026-03-25 09:21:24 -04:00
Zach Harding	943bd33c9a	Merge branch 'master' into feat/inventory	2026-03-25 08:43:18 -04:00
Zach Harding	9975db20cb	inventory dashboard setup	2026-03-25 08:42:17 -04:00
Zach Harding	db12844dea	setting up inventory dashboard	2026-03-25 08:41:21 -04:00
Thad Miller	3f9b1accda	[chore] employ static assets directory	2026-03-25 05:34:11 -04:00
Thad Miller	03e606e152	[bugfix] missed async await in tcgplayer preload	2026-03-23 21:24:24 -04:00
Thad Miller	b871385fba	[bugfix] don't close db connection pool in upload api script	2026-03-21 20:52:39 -04:00
Thad Miller	4c6922f76b	[feat] testing tcgcollector upload	2026-03-21 16:40:04 -04:00