setup (but did not apply) holofoil styling and added new seticon for perfect order set

added data attributes to be used later for holofoil styling and added ability to search by e-reader
added a button group for quick filtering by productLine
2026-03-18 13:31:56 -04:00 · 2026-03-17 17:27:39 -04:00 · 2026-03-17 11:27:16 -04:00 · 2026-03-17 10:35:02 -04:00
44 changed files with 2994 additions and 266 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
        "bootstrap": "^5.3.8",
        "chalk": "^5.6.2",
        "chart.js": "^4.5.1",
-        "csv": "^6.4.1",
        "dotenv": "^17.2.4",
        "drizzle-orm": "^1.0.0-beta.15-859cf75",
        "pg": "^8.20.0",
@@ -121,6 +120,7 @@
      "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",
@@ -138,6 +138,7 @@
      "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"
      },
@@ -150,6 +151,7 @@
      "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",
@@ -183,6 +185,7 @@
      "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"
      },
@@ -199,6 +202,7 @@
      "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",
@@ -214,6 +218,7 @@
      "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"
      },
@@ -245,6 +250,7 @@
      "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"
      },
@@ -257,6 +263,7 @@
      "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",
@@ -294,6 +301,7 @@
      "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",
@@ -313,6 +321,7 @@
      "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",
@@ -336,6 +345,7 @@
      "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"
@@ -349,6 +359,7 @@
      "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"
      },
@@ -361,6 +372,7 @@
      "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"
      }
@@ -370,6 +382,7 @@
      "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",
@@ -1460,7 +1473,8 @@
      "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"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "node_modules/@js-temporal/polyfill": {
      "version": "0.5.1",
@@ -1788,7 +1802,6 @@
      "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"
@@ -2234,7 +2247,8 @@
      "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"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@types/bootstrap": {
      "version": "5.2.10",
@@ -2311,7 +2325,6 @@
      "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"
      }
@@ -2322,7 +2335,6 @@
      "integrity": "sha512-gT+oueVQkqnj6ajGJXblFR4iavIXWsGAFCk3dP4Kki5+a9R4NMt0JARdk6s8cUKcfUoqP5dAtDSLU8xYUTFV+Q==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/node": "*",
        "pg-protocol": "*",
@@ -2334,6 +2346,7 @@
      "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": "*"
      }
@@ -2349,6 +2362,7 @@
      "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",
@@ -2369,6 +2383,7 @@
      "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"
      },
@@ -2393,6 +2408,7 @@
      "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"
      }
@@ -2526,7 +2542,6 @@
      "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",
@@ -2668,13 +2683,15 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "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",
@@ -2748,6 +2765,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "base64-js": "^1.3.1",
        "ieee754": "^1.2.1"
@@ -2757,13 +2775,15 @@
      "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"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "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"
      },
@@ -3071,39 +3091,6 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
-    "node_modules/csv": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/csv/-/csv-6.4.1.tgz",
-      "integrity": "sha512-ajGosmTGnTwYyGl8STqZDu7R6LkDf3xL39XiOmliV/GufQeVUxHzTKIm4NOBCwmEuujK7B6isxs4Uqt9GcRCvA==",
-      "license": "MIT",
-      "dependencies": {
-        "csv-generate": "^4.5.0",
-        "csv-parse": "^6.1.0",
-        "csv-stringify": "^6.6.0",
-        "stream-transform": "^3.4.0"
-      },
-      "engines": {
-        "node": ">= 0.1.90"
-      }
-    },
-    "node_modules/csv-generate": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/csv-generate/-/csv-generate-4.5.0.tgz",
-      "integrity": "sha512-aQr/vmOKyBSBHNwYhAoXw1+kUsPnMSwmYgpNoo36rIXoG1ecWILnvPGZeQ6oUjzrWknZAD3+jfpqYOBAl4x15A==",
-      "license": "MIT"
-    },
-    "node_modules/csv-parse": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-6.1.0.tgz",
-      "integrity": "sha512-CEE+jwpgLn+MmtCpVcPtiCZpVtB6Z2OKPTr34pycYYoL7sxdOkXDdQ4lRiw6ioC0q6BLqhc6cKweCVvral8yhw==",
-      "license": "MIT"
-    },
-    "node_modules/csv-stringify": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/csv-stringify/-/csv-stringify-6.6.0.tgz",
-      "integrity": "sha512-YW32lKOmIBgbxtu3g5SaiqWNwa/9ISQt2EcgOq0+RAIFufFp9is6tqNnKahqE5kuKvrnYAzs28r+s6pXJR8Vcw==",
-      "license": "MIT"
-    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -3139,6 +3126,7 @@
      "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"
@@ -3155,6 +3143,7 @@
      "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"
      },
@@ -3167,6 +3156,7 @@
      "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"
      },
@@ -4019,6 +4009,7 @@
      "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"
      }
@@ -4189,6 +4180,7 @@
      "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"
      }
@@ -4204,6 +4196,7 @@
      "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"
      }
@@ -4722,6 +4715,7 @@
      "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"
@@ -4735,6 +4729,7 @@
      "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"
@@ -4748,6 +4743,7 @@
      "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"
      },
@@ -4777,7 +4773,8 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "node_modules/immutable": {
      "version": "5.1.5",
@@ -4915,7 +4912,8 @@
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
      "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/js-yaml": {
      "version": "4.1.1",
@@ -4941,6 +4939,7 @@
      "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",
@@ -4963,6 +4962,7 @@
      "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",
@@ -4974,6 +4974,7 @@
      "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"
@@ -4992,43 +4993,50 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/loglevel": {
      "version": "1.9.2",
@@ -5940,6 +5948,7 @@
      "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",
@@ -5960,6 +5969,7 @@
      "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"
      },
@@ -5972,6 +5982,7 @@
      "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",
@@ -6025,7 +6036,8 @@
      "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"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/neotraverse": {
      "version": "0.6.18",
@@ -6140,6 +6152,7 @@
      "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",
@@ -6237,7 +6250,6 @@
      "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",
@@ -6445,6 +6457,7 @@
      "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"
      }
@@ -6508,6 +6521,7 @@
      "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",
@@ -6773,14 +6787,14 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "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"
      },
@@ -6825,6 +6839,7 @@
      "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"
      },
@@ -6850,20 +6865,21 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "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"
+      "license": "MIT",
+      "peer": true
    },
    "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",
@@ -7049,7 +7065,8 @@
      "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"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "node_modules/standardwebhooks": {
      "version": "1.0.0",
@@ -7076,17 +7093,12 @@
      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
      "license": "MIT"
    },
-    "node_modules/stream-transform": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/stream-transform/-/stream-transform-3.4.0.tgz",
-      "integrity": "sha512-QO3OGhKyeIV8p6eRQdG+W6WounFw519zk690hHCNfhgfP9bylVS+NTXsuBc7n+RsGn31UgFPGrWYIgoAbArKEw==",
-      "license": "MIT"
-    },
    "node_modules/string_decoder": {
      "version": "1.3.0",
      "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"
      }
@@ -7180,6 +7192,7 @@
      "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
      "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=8.0.0"
      }
@@ -7189,6 +7202,7 @@
      "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",
@@ -7297,7 +7311,6 @@
      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "~0.27.0",
        "get-tsconfig": "^4.7.5"
@@ -7329,7 +7342,6 @@
      "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"
@@ -7670,6 +7682,7 @@
      "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"
      }
@@ -8322,6 +8335,7 @@
      "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"
      },
@@ -8400,7 +8414,6 @@
      "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
@@ -17,7 +17,6 @@
    "bootstrap": "^5.3.8",
    "chalk": "^5.6.2",
    "chart.js": "^4.5.1",
-    "csv": "^6.4.1",
    "dotenv": "^17.2.4",
    "drizzle-orm": "^1.0.0-beta.15-859cf75",
    "pg": "^8.20.0",
--- a/public/holofoils/ancient.png
+++ b/public/holofoils/ancient.png
--- a/public/holofoils/angular.png
+++ b/public/holofoils/angular.png
--- a/public/holofoils/cosmos-bottom-trans.png
+++ b/public/holofoils/cosmos-bottom-trans.png
--- a/public/holofoils/cosmos-bottom.png
+++ b/public/holofoils/cosmos-bottom.png
--- a/public/holofoils/cosmos-middle-trans.png
+++ b/public/holofoils/cosmos-middle-trans.png
--- a/public/holofoils/cosmos-middle.gif
+++ b/public/holofoils/cosmos-middle.gif
--- a/public/holofoils/cosmos-middle.png
+++ b/public/holofoils/cosmos-middle.png
--- a/public/holofoils/cosmos-top-trans.png
+++ b/public/holofoils/cosmos-top-trans.png
--- a/public/holofoils/cosmos-top.png
+++ b/public/holofoils/cosmos-top.png
--- a/public/holofoils/cosmos.png
+++ b/public/holofoils/cosmos.png
--- a/public/holofoils/crossover.png
+++ b/public/holofoils/crossover.png
--- a/public/holofoils/galaxy-source.png
+++ b/public/holofoils/galaxy-source.png
--- a/public/holofoils/galaxy.jpg
+++ b/public/holofoils/galaxy.jpg
--- a/public/holofoils/geometric.png
+++ b/public/holofoils/geometric.png
--- a/public/holofoils/glitter.png
+++ b/public/holofoils/glitter.png
--- a/public/holofoils/grain.webp
+++ b/public/holofoils/grain.webp
--- a/public/holofoils/illusion-mask.png
+++ b/public/holofoils/illusion-mask.png
--- a/public/holofoils/illusion.png
+++ b/public/holofoils/illusion.png
--- a/public/holofoils/illusion2.png
+++ b/public/holofoils/illusion2.png
--- a/public/holofoils/metal.png
+++ b/public/holofoils/metal.png
--- a/public/holofoils/rainbow.jpg
+++ b/public/holofoils/rainbow.jpg
--- a/public/holofoils/stylish.png
+++ b/public/holofoils/stylish.png
--- a/public/holofoils/stylish2.png
+++ b/public/holofoils/stylish2.png
--- a/public/holofoils/trainerbg.jpg
+++ b/public/holofoils/trainerbg.jpg
--- a/public/holofoils/trainerbg.png
+++ b/public/holofoils/trainerbg.png
--- a/public/holofoils/vmaxbg.jpg
+++ b/public/holofoils/vmaxbg.jpg
--- a/public/holofoils/wave.png
+++ b/public/holofoils/wave.png
--- a/scripts/csvprices.ts
+++ b/scripts/csvprices.ts
@@ -1,87 +0,0 @@
-import 'dotenv/config';
-import { db, ClosePool } from '../src/db/index.ts';
-import chalk from 'chalk';
-import fs from "fs";
-//import path from "node:path";
-import { parse, stringify, transform } from 'csv';
-import { client } from '../src/db/typesense.ts';
-
-async function PricesFromCSV() {
-
-  const inputFilePath = 'scripts/test.tcgcollector.csv';
-  const outputFilePath = 'scripts/output.csv';
-
-  // Create read and write streams
-  const inputStream = fs.createReadStream(inputFilePath, 'utf8');
-  const outputStream = fs.createWriteStream(outputFilePath);
-
-  // 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);
-    }
-  });
-
-  // Pipe the streams: Read -> Parse -> Transform -> Stringify -> Write
-  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))
-    .pipe(outputStream);
-
-  outputStream.on('finish', () => {
-    console.log(`Successfully written to ${outputFilePath}`);
-    ClosePool();
-  });
-
-  outputStream.on('error', (error) => {
-    console.error('An error occurred in the process:', error);
-    ClosePool();
-  });
-}
-
-await PricesFromCSV();
--- a/src/assets/css/_bootstrap.scss
+++ b/src/assets/css/_bootstrap.scss
@@ -22,7 +22,7 @@
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/badge';
 // @import 'bootstrap/scss/breadcrumb';
-// @import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/button-group';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/card';
 // @import 'bootstrap/scss/carousel';
--- a/src/assets/css/_card.scss
+++ b/src/assets/css/_card.scss
--- a/src/assets/css/_holofoil-integration.scss
+++ b/src/assets/css/_holofoil-integration.scss
@@ -0,0 +1,349 @@
+// =============================================================================
+// HOLOFOIL INTEGRATION
+// _holofoil-integration.scss
+// =============================================================================
+
+@import "card";
+
+
+// -----------------------------------------------------------------------------
+// 1.  WRAPPER NORMALISATION
+// -----------------------------------------------------------------------------
+
+%holofoil-wrapper-base {
+  --card-aspect:  0.718;
+  --card-radius:  4.55% / 3.5%;
+
+  --pointer-x:           50%;
+  --pointer-y:           50%;
+  --background-x:        50%;
+  --background-y:        50%;
+  --pointer-from-center: 0;
+  --pointer-from-top:    0.5;
+  --pointer-from-left:   0.5;
+  --card-scale:          1;
+  --card-opacity:        0;
+
+  --grain:       url('/public/holofoils/grain.webp');
+  --glitter:     url('/public/holofoils/glitter.png');
+  --glittersize: 25%;
+  --space:       5%;
+  --angle:       133deg;
+  --imgsize:     cover;
+
+  --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-clr-1: var(--sunpillar-1);
+  --sunpillar-clr-2: var(--sunpillar-2);
+  --sunpillar-clr-3: var(--sunpillar-3);
+  --sunpillar-clr-4: var(--sunpillar-4);
+  --sunpillar-clr-5: var(--sunpillar-5);
+  --sunpillar-clr-6: var(--sunpillar-6);
+
+  // 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.  SHINE + GLARE CHILD DIVS
+// -----------------------------------------------------------------------------
+
+%shine-base {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--card-radius);
+  overflow: hidden; // clipping lives here, not on the parent
+  z-index: 3;
+  will-change: transform, opacity, background-image, background-size,
+    background-position, background-blend-mode, filter;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--card-radius);
+  }
+}
+
+%glare-base {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--card-radius);
+  z-index: 4;
+  transform: translateZ(0);
+  overflow: hidden;
+  will-change: transform, opacity, background-image, background-size,
+    background-position, background-blend-mode, filter;
+}
+
+
+// -----------------------------------------------------------------------------
+// 3.  MODES
+// -----------------------------------------------------------------------------
+
+// -- 3a. GRID -----------------------------------------------------------------
+// No idle animation. Effect is invisible until hover.
+
+.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; }
+}
+
+
+// -- 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:hover,
+.image-grow[data-holo-active] {
+  --card-opacity: 0.45;
+}
+
+
+// -- 3c. MODAL ----------------------------------------------------------------
+// Sweeps once per minute. Peaks at 0.35.
+// Pointer tracking bumps opacity to 0.45 while hovering.
+
+@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;
+  }
+  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% {
+    --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% {
+    --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% {
+    --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% {
+    --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;
+  }
+}
+
+.card-image-wrap.holo-modal-mode {
+  --card-opacity: 0;
+
+  .holo-shine,
+  .holo-glare {
+    animation: holo-modal-pulse 60s ease-in-out infinite;
+    animation-delay: var(--shimmer-delay, -2s);
+  }
+
+  &[data-holo-active] {
+    --card-opacity: 0.45;
+    .holo-shine,
+    .holo-glare { animation-play-state: paused; }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 4.  RARITY -> CLIP-PATH BRIDGE
+// -----------------------------------------------------------------------------
+
+.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 { 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); }
+  }
+
+  // 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); }
+  }
+
+  &[data-rarity="radiant rare"]               { .holo-shine { clip-path: var(--clip-borders); } }
+  &[data-rarity="amazing rare"]               { .holo-shine { clip-path: var(--clip); } }
+
+  &[data-rarity="trainer gallery rare holo"],
+  &[data-rarity="rare holo"][data-trainer-gallery="true"] {
+    .holo-shine { clip-path: var(--clip-borders); }
+  }
+
+  &[data-rarity="rare shiny"] {
+    .holo-shine                            { clip-path: var(--clip); }
+    &[data-subtypes^="stage"] .holo-shine  { clip-path: var(--clip-stage); }
+  }
+
+  // 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); } }
+
+  // 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; }
+  }
+
+  // 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%
+        );
+      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
@@ -23,6 +23,9 @@ $container-max-widths: (

@import "_bootstrap";

+// ── Holofoil ──────────────────────────────────────────────────────────────
+//@import "_holofoil-integration";   // also pulls in _card.scss
+
 /* --------------------------------------------------
   Root Variables
 -------------------------------------------------- */
@@ -160,12 +163,12 @@ html {

 .image-grow {
  transition: box-shadow 350ms ease, transform 350ms ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
+  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);

  &:hover,
  &:focus {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
-    transform: translateY(-0.9rem) scale(1.02);
+    //transform: translateY(-0.9rem) scale(1.02);
  }
 }

@@ -292,7 +295,7 @@ $tiers: (
 .card-image {
  aspect-ratio: 23 / 32;
  object-fit: cover;
-  z-index: 998;
+  z-index: 1;
  cursor: pointer;
 }

@@ -400,6 +403,7 @@ $tiers: (

 .price-row {
  position: relative;
+  z-index: 2;
  margin-top: -1.25rem;
  border-radius: 0.33rem;
  background: linear-gradient(
--- a/src/assets/js/holofoil-init.js
+++ b/src/assets/js/holofoil-init.js
@@ -0,0 +1,280 @@
+/**
+ * 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';
+
+  // -- Constants --------------------------------------------------------------
+
+  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));
+
+  function pointerVars(x, y, rect) {
+    const fromLeft   = clamp01((x - rect.left) / rect.width);
+    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,
+      fromLeft,
+      fromTop,
+      fromCenter,
+      bgX:        50 + (fromLeft - 0.5) * 30,
+      bgY:        50 + (fromTop  - 0.5) * 30,
+    };
+  }
+
+  function applyPointerVars(el, v) {
+    el.style.setProperty('--pointer-x',           v.px.toFixed(1) + '%');
+    el.style.setProperty('--pointer-y',           v.py.toFixed(1) + '%');
+    el.style.setProperty('--pointer-from-left',   v.fromLeft.toFixed(3));
+    el.style.setProperty('--pointer-from-top',    v.fromTop.toFixed(3));
+    el.style.setProperty('--pointer-from-center', v.fromCenter.toFixed(3));
+    el.style.setProperty('--background-x',        v.bgX.toFixed(1) + '%');
+    el.style.setProperty('--background-y',        v.bgY.toFixed(1) + '%');
+  }
+
+  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;
+    const shine = document.createElement('div');
+    shine.className = 'holo-shine';
+    const glare = document.createElement('div');
+    glare.className = 'holo-glare';
+    el.appendChild(shine);
+    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 (isDefault(el)) return;
+
+    var observer = new MutationObserver(function() {
+      if (isDefault(el)) {
+        var shine = el.querySelector('.holo-shine');
+        var glare = el.querySelector('.holo-glare');
+        if (shine) shine.style.display = 'none';
+        if (glare) glare.style.display = 'none';
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(el, { attributes: true, attributeFilter: ['data-default'] });
+  }
+
+
+  // -- Stamp ------------------------------------------------------------------
+
+  function stamp(el) {
+    if (el.dataset.holoInit) return;
+
+    // Skip if already a default fallback image
+    if (isDefault(el)) {
+      el.dataset.holoInit = 'skip';
+      return;
+    }
+
+    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' || isDefault(el)) return;
+
+    el.dataset.holoActive = '1';
+    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() {
+      const rect = el.getBoundingClientRect();
+      applyPointerVars(el, pointerVars(e.clientX, e.clientY, rect));
+      state.rafId = null;
+    });
+  }
+
+  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;
+
+    if (isModalWrapper(el)) {
+      // Let the CSS animation resume driving --card-opacity
+      el.style.removeProperty('--card-opacity');
+    }
+  }
+
+  function attachListeners(el) {
+    if (el.dataset.holoListeners) return;
+    el.addEventListener('pointerenter', onPointerEnter, { passive: true });
+    el.addEventListener('pointermove',  onPointerMove,  { passive: true });
+    el.addEventListener('pointerleave', onPointerLeave, { passive: true });
+    el.dataset.holoListeners = '1';
+  }
+
+  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) {
+      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);
+          }
+          if (node.querySelectorAll) {
+            node.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+              stamp(el);
+              if (el.dataset.holoInit === '1') attachListeners(el);
+            });
+          }
+        }
+      }
+    }).observe(grid, { childList: true, subtree: true });
+  }
+
+  function observeModal() {
+    var modal = document.getElementById('cardModal');
+    if (!modal) return;
+
+    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();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+})();
--- a/src/assets/js/priceChart.js
+++ b/src/assets/js/priceChart.js
@@ -39,10 +39,27 @@ function buildChartData(history, rangeKey) {

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

-  const allDates = [...new Set(filtered.map(r => r.calculatedAt))]
-    .sort((a, b) => new Date(a) - new Date(b));
+  // 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));

-  const labels = allDates.map(formatDate);
+  // 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]);
+    }
+    axisLabels = expanded;
+  }
+
+  const labels = axisLabels.map(formatDate);

  const lookup = {};
  for (const row of filtered) {
@@ -50,16 +67,14 @@ function buildChartData(history, rangeKey) {
    lookup[row.condition][row.calculatedAt] = Number(row.marketPrice);
  }

-  // Check specifically whether the active condition has any data points
-  const activeConditionDates = allDates.filter(
+  const activeConditionHasData = allDates.some(
    date => lookup[activeCondition]?.[date] != null
  );
-  const activeConditionHasData = activeConditionDates.length > 0;

  const datasets = CONDITIONS.map(condition => {
    const isActive = condition === activeCondition;
    const colors = CONDITION_COLORS[condition];
-    const data = allDates.map(date => lookup[condition]?.[date] ?? null);
+    const data = axisLabels.map(date => lookup[condition]?.[date] ?? null);
    return {
      label: condition,
      data,
@@ -75,23 +90,29 @@ function buildChartData(history, rangeKey) {
    };
  });

-  return { labels, datasets, hasData: allDates.length > 0, activeConditionHasData };
+  return {
+    labels,
+    datasets,
+    hasData: allDates.length > 0,
+    activeConditionHasData,
+  };
 }

 function updateChart() {
  if (!chartInstance) return;
  const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);

-  // Show empty state if no data at all, or if the active condition specifically has no data
-  if (!hasData || !activeConditionHasData) {
-    setEmptyState(true);
-    return;
-  }
-
-  setEmptyState(false);
-  chartInstance.data.labels = labels;
+  // 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);
 }

 function initPriceChart(canvas) {
@@ -114,12 +135,8 @@ function initPriceChart(canvas) {

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

-  if (!hasData || !activeConditionHasData) {
-    setEmptyState(true);
-    return;
-  }
-
-  setEmptyState(false);
+  // Render the chart regardless — show empty state overlay if needed
+  setEmptyState(!hasData || !activeConditionHasData);

  chartInstance = new Chart(canvas.getContext('2d'), {
    type: 'line',
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -15,7 +15,7 @@ import BackToTop from "./BackToTop.astro"
        </div>
    </div>
    <div class="col-sm-12 col-md-10 mt-0">
-        <div class="d-flex flex-row align-items-center mb-2">
+        <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-3 w-100 justify-content-start">
            <div id="sortBy"></div>
            <div id="totalResults"></div>
            <div id="activeFilters"></div>
@@ -44,16 +44,15 @@ import BackToTop from "./BackToTop.astro"

 <BackToTop />

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

  // ── Sort dropdown ─────────────────────────────────────────────────────────
-  // Plain JS toggle — no dependency on Bootstrap's Dropdown JS initialising.
-  // Uses event delegation so it works after OOB swaps repopulate #sortBy.
  document.addEventListener('click', (e) => {
    const sortBy = document.getElementById('sortBy');

-    // Toggle the menu when the button is clicked
    const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
    if (btn) {
      e.preventDefault();
@@ -64,7 +63,6 @@ import BackToTop from "./BackToTop.astro"
      return;
    }

-    // Handle sort option selection
    const opt = e.target.closest('#sortBy .sort-option');
    if (opt) {
      e.preventDefault();
@@ -87,7 +85,6 @@ import BackToTop from "./BackToTop.astro"
      return;
    }

-    // Click outside — close any open sort menu
    const menu = document.querySelector('#sortBy .dropdown-menu.show');
    if (menu) {
      menu.classList.remove('show');
@@ -96,6 +93,23 @@ import BackToTop from "./BackToTop.astro"
    }
  });

+  // ── Language toggle ───────────────────────────────────────────────────────
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.language-btn');
+    if (!btn) return;
+    e.preventDefault();
+
+    const input = document.getElementById('languageInput');
+    if (input) input.value = btn.dataset.lang;
+
+    const start = document.getElementById('start');
+    if (start) start.value = '0';
+
+    document.getElementById('searchform').dispatchEvent(
+      new Event('submit', { bubbles: true, cancelable: true })
+    );
+  });
+
  // ── Global helpers ────────────────────────────────────────────────────────
  window.copyImage = async function(img) {
    try {
@@ -103,7 +117,15 @@ import BackToTop from "./BackToTop.astro"
      const ctx = canvas.getContext("2d");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
-      ctx.drawImage(img, 0, 0);
+
+      // Load with crossOrigin so toBlob() stays untainted
+      await new Promise((resolve) => {
+        const clean = new Image();
+        clean.crossOrigin = 'anonymous';
+        clean.onload = () => { ctx.drawImage(clean, 0, 0); resolve(); };
+        clean.onerror = () => { ctx.drawImage(img, 0, 0); resolve(); };
+        clean.src = img.src;
+      });

      if (navigator.clipboard && navigator.clipboard.write) {
        const blob = await new Promise((resolve, reject) => {
@@ -201,7 +223,6 @@ import BackToTop from "./BackToTop.astro"
    nextBtn.classList.toggle('d-none', next === null);
  }

-  // ── Trigger infinite scroll sentinel ─────────────────────────────────────
  function tryTriggerSentinel() {
    const sentinel = cardGrid.querySelector('[hx-trigger="revealed"]');
    if (!sentinel) return;
@@ -212,7 +233,6 @@ import BackToTop from "./BackToTop.astro"
    }
  }

-  // ── Fire card-modal:swapped so the partial's script can init the chart ────
  function initChartAfterSwap(modal) {
    const canvas = modal.querySelector('#priceHistoryChart');
    if (!canvas) return;
@@ -269,11 +289,9 @@ import BackToTop from "./BackToTop.astro"
    if (next) loadCard(next, 'next');
  }

-  // ── Nav button clicks ─────────────────────────────────────────────────────
  document.getElementById('modalPrevBtn').addEventListener('click', navigatePrev);
  document.getElementById('modalNextBtn').addEventListener('click', navigateNext);

-  // ── Keyboard ──────────────────────────────────────────────────────────────
  document.addEventListener('keydown', (e) => {
    const modal = document.getElementById('cardModal');
    if (!modal.classList.contains('show')) return;
@@ -281,7 +299,6 @@ import BackToTop from "./BackToTop.astro"
    if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext(); }
  });

-  // ── Touch / swipe ─────────────────────────────────────────────────────────
  let touchStartX = 0;
  let touchStartY = 0;
  const SWIPE_THRESHOLD = 50;
@@ -299,7 +316,6 @@ import BackToTop from "./BackToTop.astro"
    else navigatePrev();
  }, { passive: true });

-  // ── HTMX card-modal opens ─────────────────────────────────────────────────
  document.body.addEventListener('htmx:beforeRequest', async (e) => {
    if (e.detail.elt.getAttribute('hx-target') !== '#cardModal') return;

@@ -363,7 +379,6 @@ import BackToTop from "./BackToTop.astro"
    }
  });

-  // ── Bootstrap modal events ────────────────────────────────────────────────
  const cardModal = document.getElementById('cardModal');
  cardModal.addEventListener('shown.bs.modal', () => {
    updateNavButtons(cardModal);
@@ -373,6 +388,5 @@ import BackToTop from "./BackToTop.astro"
    currentCardId = null;
    updateNavButtons(null);
  });
-
 })();
 </script>
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -26,15 +26,21 @@ import { Show } from '@clerk/astro/components'
 </script>

 <Show when="signed-in">
-    <form class="d-flex ms-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
-        <a class="btn btn-secondary btn-lg me-2" data-bs-toggle="offcanvas" href="#filterBar" role="button" aria-controls="filterBar" aria-label="filter"><span class="d-block d-md-none filter-icon mt-1"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".4" d="M96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160L96 160z"/><path d="M66.4 147.8C71.4 135.8 83.1 128 96 128L544 128C556.9 128 568.6 135.8 573.6 147.8C578.6 159.8 575.8 173.5 566.7 182.7L384 365.3L384 544C384 556.9 376.2 568.6 364.2 573.6C352.2 578.6 338.5 575.8 329.3 566.7L265.3 502.7C259.3 496.7 255.9 488.6 255.9 480.1L256 365.3L73.4 182.6C64.2 173.5 61.5 159.7 66.4 147.8zM544 160L96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160z"/></svg></span><span class="d-none d-md-block">Filters</span></a>
+    <form class="d-flex ms-2 align-items-center gap-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
+        <a class="btn btn-secondary btn-lg" data-bs-toggle="offcanvas" href="#filterBar" role="button" aria-controls="filterBar" aria-label="filter">
+            <span class="d-block d-md-none filter-icon py-2">
+                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".4" d="M96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160L96 160z"/><path d="M66.4 147.8C71.4 135.8 83.1 128 96 128L544 128C556.9 128 568.6 135.8 573.6 147.8C578.6 159.8 575.8 173.5 566.7 182.7L384 365.3L384 544C384 556.9 376.2 568.6 364.2 573.6C352.2 578.6 338.5 575.8 329.3 566.7L265.3 502.7C259.3 496.7 255.9 488.6 255.9 480.1L256 365.3L73.4 182.6C64.2 173.5 61.5 159.7 66.4 147.8zM544 160L96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160z"/></svg>
+            </span>
+            <span class="d-none d-md-block">Filters</span>
+        </a>
+
        <div class="input-group">
-        <input type="hidden" name="start" id="start" value="0" />
-        <input type="hidden" name="sort" id="sortInput" value="" />
-        <input type="search" name="q" class="form-control form-control-lg" placeholder="Search cards..." />
-        <button type="submit" class="btn btn-danger btn-lg border border-danger-subtle border-start-0" aria-label="search" value="" onclick="const q = this.closest('form').querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });">
-        <svg aria-hidden="true" class="search-button d-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M432 272C432 183.6 360.4 112 272 112C183.6 112 112 183.6 112 272C112 360.4 183.6 432 272 432C360.4 432 432 360.4 432 272zM401.1 435.1C365.7 463.2 320.8 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 320.8 463.2 365.7 435.1 401.1L569 535C578.4 544.4    578.4 558.1 569 567.5C559.6 575.9 544.4 575.9 536 567.5L401.1 435.1z"/></svg>
-        </button>
+            <input type="hidden" name="start" id="start" value="0" />
+            <input type="hidden" name="sort" id="sortInput" value="" />
+            <input type="hidden" name="language" id="languageInput" value="all" />
+            <input type="search" name="q" class="form-control form-control-lg" placeholder="Search cards..." />
+            <button type="submit" class="btn btn-danger btn-lg border border-danger-subtle border-start-0" aria-label="search" value="" onclick="const q = this.closest('form').querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });">
+                <svg aria-hidden="true" class="search-button d-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M432 272C432 183.6 360.4 112 272 112C183.6 112 112 183.6 112 272C112 360.4 183.6 432 272 432C360.4 432 432 360.4 432 272zM401.1 435.1C365.7 463.2 320.8 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 320.8 463.2 365.7 435.1 401.1L569 535C578.4 544.4 578.4 558.1 569 567.5C559.6 575.9 544.4 575.9 536 567.5L401.1 435.1z"/></svg>
+            </button>
        </div>
-    </form>
-</Show>
+    </form>
--- a/src/components/SetIcon.astro
+++ b/src/components/SetIcon.astro
@@ -124,6 +124,7 @@ import phantasmal_flames from "/src/svg/set/phantasmal_flames.svg?raw";
 import destined_rivals from "/src/svg/set/destined_rivals.svg?raw";
 import surging_sparks from "/src/svg/set/surging_sparks.svg?raw";
 import team_rocket from "/src/svg/set/team_rocket.svg?raw";
+import perfect_order from "/src/svg/set/perfect_order.svg?raw";

 const { set } = Astro.props;

@@ -252,6 +253,7 @@ const setMap = {
 "ASC": ascended_heroes,
 "DRI": destined_rivals,
 "SSP": surging_sparks,
+"ME03": perfect_order,
 };

 const svg = setMap[set as keyof typeof setMap] ?? "";
--- a/src/db/relations.ts
+++ b/src/db/relations.ts
@@ -8,19 +8,12 @@ export const relations = defineRelations(schema, (r) => ({
            to: r.skus.skuId,
        }),
    },
-    salesHistory: {
-        sku: r.one.skus({
-            from: r.salesHistory.skuId,
-            to: r.skus.skuId,
-        }),
-    },
    skus: {
        card: r.one.cards({
            from: [r.skus.productId, r.skus.variant],
            to: [r.cards.productId, r.cards.variant],
        }),
        history: r.many.priceHistory(),
-        latestSales: r.many.salesHistory(),
    },
    cards: {
        prices: r.many.skus(),
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -109,21 +109,6 @@ export const priceHistory = pokeSchema.table('price_history', {
 	primaryKey({ name: 'pk_price_history', columns: [table.skuId, table.calculatedAt] })
 ]);

-export const salesHistory = pokeSchema.table('sales_history',{
-	skuId: integer().notNull(),
-	orderDate: timestamp().notNull(),
-	title: varchar({ length: 255 }),
-	customListingId: varchar({ length: 255 }),
-	language: varchar({ length: 100 }),
-	listingType: varchar({ length: 100 }),
-	purchasePrice: decimal({ precision: 10, scale: 2 }),
-	quantity: integer(),
-	shippingPrice: decimal({ precision: 10, scale: 2 })
-},
-(table) => [
-	primaryKey({ name: 'pk_sales_history', columns: [table.skuId, table.orderDate] })
-]);
-
 export const processingSkus = pokeSchema.table('processing_skus', {
 	skuId: integer().primaryKey(),
 });
--- a/src/pages/partials/card-modal.astro
+++ b/src/pages/partials/card-modal.astro
@@ -190,13 +190,26 @@ const altSearchUrl = (card: any) => {
              <!-- Card image column -->
              <div class="col-sm-12 col-md-3">
                <div class="position-relative mt-1">
-                  <img
-                    src={`/cards/${card?.productId}.jpg`}
-                    class="card-image w-100 img-fluid rounded-4"
-                    alt={card?.productName}
-                    onerror="this.onerror=null;this.src='/cards/default.jpg'"
-                    onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
-                  />
+
+                  <!-- card-image-wrap gives the modal image shimmer effects
+                       without the hover lift/scale that image-grow has in main.scss -->
+                  <div
+                    class="card-image-wrap rounded-4"
+                    data-energy={card?.energyType}
+                    data-rarity={card?.rarityName}
+                    data-variant={card?.variant}
+                    data-name={card?.productName}
+                  >
+                    <img
+                      src={`/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')"
+                      onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
+                    />
+                  </div>
+
                  <span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span>
                  <span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span>
                  <span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span>
@@ -266,9 +279,9 @@ const altSearchUrl = (card: any) => {
                            </div>
                            <div class={`alert rounded p-2 flex-fill d-flex flex-column mb-0 ${attributes?.volatilityClass}`}>
                              <h6 class="mb-auto d-flex justify-content-between align-items-start">
-                                <span>Volatility</span>
+                                <span class="me-1">Volatility</span>
                                <span
-                                  class="volatility-info"
+                                  class="volatility-info float-end mt-0"
                                  data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  data-bs-container="body"
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -9,7 +9,7 @@ import * as util from 'util';

 // all the facet fields we want to use for filtering
 const facetFields:any = {
-    "productLineName": "Product Line",
+    //"productLineName": "Product Line",
    "setName": "Set",
    "variant": "Variant",
    "rarityName": "Rarity",
@@ -18,11 +18,6 @@ const facetFields:any = {
 }

 // ── Allowed sort values ───────────────────────────────────────────────────
-// Maps the client-supplied key to the actual Typesense sort_by string.
-// Never pass raw user input directly to sort_by.
-// Note: price sorting uses nmMarketPrice — a field you need to denormalize
-// onto your card document in your Typesense indexing step (NM market price
-// as an integer in cents, e.g. nmMarketPrice: 499 = $4.99).
 const sortMap: Record<string, string> = {
    'releaseDate:desc,number:asc': '_text_match:asc,releaseDate:desc,number:asc',
    'releaseDate:asc,number:asc':  '_text_match:asc,releaseDate:asc,number:asc',
@@ -40,8 +35,32 @@ const start = Number(formData.get('start')?.toString() || '0');
 const sortKey = formData.get('sort')?.toString() || '';
 const resolvedSort = sortMap[sortKey] ?? DEFAULT_SORT;

+// ── Language filter ───────────────────────────────────────────────────────
+// Expects a `language` field on your card documents in Typesense.
+// Valid values: 'en', 'jp' — anything else (or 'all') means no filter.
+const language = formData.get('language')?.toString() || 'all';
+const languageFilter = language === 'en' ? " && productLineName:=`Pokemon`"
+                     : language === 'jp' ? " && productLineName:=`Pokemon Japan`"
+                     : '';
+
+// ── Query alias expansion ─────────────────────────────────────────────────
+// Intercepts known shorthand queries that can't be handled by Typesense
+// synonyms alone (e.g. terms that need to match across multiple set names)
+// and rewrites them into a direct filter, clearing the query so it doesn't
+// also try to text-match against card names.
+const EREADER_SETS = ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'];
+const EREADER_RE = /^(e-?reader|e reader)$/i;
+
+let resolvedQuery = query;
+let queryFilter = '';
+
+if (EREADER_RE.test(query.trim())) {
+    resolvedQuery = '';
+    queryFilter = `setName:=[${EREADER_SETS.map(s => '`' + s + '`').join(',')}]`;
+}
+
 const filters = Array.from(formData.entries())
-    .filter(([key, value]) => key !== 'q' && key !== 'start' && key !== 'sort')
+    .filter(([key]) => key !== 'q' && key !== 'start' && key !== 'sort' && key !== 'language')
    .reduce((acc, [key, value]) => {
        if (!acc[key]) {
            acc[key] = [];
@@ -63,14 +82,15 @@ const facetFilter = (facet:string) => {
        .filter(([field]) => field !== facet)
        .map(([field, values]) => `${field}:=[${values.map(v => '`'+v+'`').join(',')}]`)
        .join(' && ');
-    return `sealed:false${otherFilters ? ` && ${otherFilters}` : ''}`;
+    // Language filter is always included so facet counts stay accurate
+    return `sealed:false${languageFilter}${queryFilter ? ` && ${queryFilter}` : ''}${otherFilters ? ` && ${otherFilters}` : ''}`;
 };


 // primary search values (for cards)
 let searchArray = [{
    collection: 'cards',
-    filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`,
+    filter_by: `sealed:false${languageFilter}${queryFilter ? ` && ${queryFilter}` : ''}${filterBy ? ` && ${filterBy}` : ''}`,
    per_page: 20,
    facet_by: '',
    max_facet_values: 0,
@@ -97,8 +117,8 @@ if (start === 0) {

 const searchRequests = { searches: searchArray };
 const commonSearchParams = {
-    q: query,
-    query_by: 'content'
+    q: resolvedQuery,
+    query_by: 'content,setName,productLineName,rarityName,energyType,cardType'
 };

 // use typesense to search for cards matching the query and return the productIds of the results
@@ -135,8 +155,8 @@ const facetNames = (name:string) => {
 }

 const facets = searchResults.results.slice(1).map((result: any) => {
-    const facet = result.facet_counts[0];
-    if (!facet) return facet;
+    const facet = result.facet_counts?.[0];
+    if (!facet) return null;
    
    // Sort: checked items first, then alphabetically
    facet.counts = facet.counts.sort((a: any, b: any) => {
@@ -148,7 +168,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
    });
    
    return facet;
-});
+}).filter(Boolean);

 ---

@@ -178,37 +198,41 @@ const facets = searchResults.results.slice(1).map((result: any) => {
            </div>
        ))}
    </div>
-    <div id="sortBy" class="mb-2 d-flex align-items-center justify-content-start small" hx-swap-oob="true">
+    <div id="sortBy" class="d-flex flex-fill align-items-center me-auto gap-2" hx-swap-oob="true">
        <div class="dropdown">
-            <button class="btn btn-sm btn-dark dropdown-toggle small" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
+            <button class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
            <ul class="dropdown-menu dropdown-menu-dark">
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="releaseDate:asc,number:asc"  data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:desc"            data-label="Price: High to Low">Price: High to Low</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="marketPrice:asc"             data-label="Price: Low to High">Price: Low to High</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="number:asc"                  data-label="Card Number: Ascending">Card Number: Ascending</a></li>
-                <li><a class="dropdown-item sort-option small" href="#" data-sort="number:desc"                 data-label="Card Number: Descending">Card Number: Descending</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:asc,number:asc"  data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:desc"            data-label="Price: High to Low">Price: High to Low</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:asc"             data-label="Price: Low to High">Price: Low to High</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="number:asc"                  data-label="Card Number: Ascending">Card Number: Ascending</a></li>
+                <li><a class="dropdown-item sort-option" href="#" data-sort="number:desc"                 data-label="Card Number: Descending">Card Number: Descending</a></li>
            </ul>
        </div>
-        <span id="sortLabel" class="ms-2 text-secondary">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
+        <span id="sortLabel" class="ms-1 text-secondary small">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
+        <div class="btn-group btn-group-sm ms-2 flex-shrink-0" role="group" aria-label="Language filter">
+            <button type="button" class={`btn btn-dark language-btn${language === 'all' ? ' active' : ''}`} data-lang="all">All</button>
+            <button type="button" class={`btn btn-dark language-btn${language === 'en'  ? ' active' : ''}`} data-lang="en">EN</button>
+            <button type="button" class={`btn btn-dark language-btn${language === 'jp'  ? ' active' : ''}`} data-lang="jp">JP</button>
+        </div>
    </div>
-    <div id="totalResults" class="mb-2 ms-5 text-secondary small" hx-swap-oob="true">
+    <div id="totalResults" class="d-flex text-secondary small d-none align-items-center" hx-swap-oob="true">
        {totalHits} {totalHits === 1 ? ' result' : ' results'}
    </div>
-    <div id="activeFilters" class="mb-2 d-flex align-items-center small ms-auto" hx-swap-oob="true">
+    <div id="activeFilters" class="d-flex small ms-auto align-items-center" hx-swap-oob="true">
        {(Object.entries(filters).length > 0) && 
        <span class="me-1 small">Filtered by:</span>
        <ul class="list-group list-group-horizontal">
            {Object.entries(filters).map(([filter, values]) => (
                values.map((value) => (
-                    <li data-facet={filter} data-value={value} class="list-group-item small remove-filter">{value}</li>
+                    <li data-facet={filter} data-value={value} class="list-group-item small p-2 remove-filter">{value}</li>
                ))
            ))}
        </ul>
        <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span>
        }
    </div>
-
    <script define:vars={{ totalHits, filters, facets }} is:inline>

        // Filter the facet values to make things like Set easier to find
@@ -263,7 +287,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
            <div class="inventory-label pt-2">+/-</div>
        </div>
        <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"><img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/default.jpg'"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span></div>
+            <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>
        </div>
        <div class="row row-cols-5 gx-1 price-row mb-2">
            {conditionOrder.map((condition) => (
--- a/src/svg/set/perfect_order.svg
+++ b/src/svg/set/perfect_order.svg
Author	SHA1	Message	Date
Zach Harding	bc99be51ea	setup (but did not apply) holofoil styling and added new seticon for perfect order set	2026-03-18 13:31:56 -04:00
Zach Harding	b06e24d382	added data attributes to be used later for holofoil styling and added ability to search by e-reader	2026-03-17 17:27:39 -04:00
Zach Harding	7b4e06733f	added a button group for quick filtering by productLine	2026-03-17 11:27:16 -04:00
Zach Harding	f72d479c1d	rearranged sort and filter on mobile into a flex col instead of row	2026-03-17 10:35:02 -04:00