added missing rarities to rarityicon component, updated mobile grid enhancements, moved search to sticky bar at the top

src/components/Card.astro

@@ -39,14 +39,14 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
 ---
 {pokemon.map((card) => (
     <div class="col">
-        <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
+        <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
         <div class="h6 my-0">{card.productName}</div>
         <div class="d-flex justify-content-between align-items-end">
             <div class="copy-small">{card.number}</div>
             <RarityIcon rarity={card.rarityName} />
         </div>
-        <div class="copy-small">{card.set?.setName}</div>
-        <div class="row row-cols-5 gx-1 mt-1">
+        <div class="copy-small d-none d-lg-block">{card.set?.setName}</div>
+        <div class="row row-cols-5 gx-1">
         {card.prices
             .slice()
             .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))

src/components/CardGrid.astro

@@ -1,18 +1,10 @@
 ---
-const { query } = Astro.props;
+
 ---
 
     <div class="row mb-5">
         <div class="col-md-3 display-sm-none">
             <div class="h5 d-none">Inventory management placeholder</div>
-            <form method="GET">
-                <div>
-                    <input type="text" name="q" class="form-control w-100 mb-2" placeholder="Search cards..." value={query} />
-                </div>
-                <div>
-                    <input type="submit" class="btn btn-primary mb-2" value="Search" />
-                </div>
-            </form>
         </div>
         <div class="col-sm-12 col-md-9 mt-0">
             <div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">

src/components/CardModal.astro

@@ -0,0 +1,3 @@
+---
+
+---

src/components/RarityIcon.astro

@@ -14,6 +14,9 @@ import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
 import secretrare from "/src/svg/rarity/rare_secret.svg?raw";
 import blackwhiterare from "/src/svg/rarity/black_white_rare.svg?raw";
 import raresecret from "/src/svg/rarity/rare_secret.svg?raw";
+import rarebreak from "/src/svg/rarity/rare_break.svg?raw";
+import artrare from "/src/svg/rarity/art_rare.svg?raw";
+import specialartrare from "/src/svg/rarity/special_art_rare.svg?raw";
 
 const { rarity } = Astro.props;
 
@@ -33,6 +36,9 @@ const rarityMap = {
   "Secret Rare": secretrare,
   "Black White Rare": blackwhiterare,
   "Shiny Holo Rare": raresecret,
+  "Rare BREAK": rarebreak,
+  "Art Rare": artrare,
+  "Special Art Rare": specialartrare,
 };
 
 const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";

src/components/StickyFilter.astro

@@ -1,11 +1,19 @@
 ---
 import '/src/assets/css/main.scss';
+const { query } = Astro.props;
 ---
 
 <div class="sticky border-bottom">
     <div class="container">
-    <div class="d-flex align-items-center gap-3 p-2">
-        <h5>Placeholder for search input/filters</h5>
-    </div>
+        <form method="GET">
+            <div class="d-flex justify-content-between">
+                <div class="my-2 flex-grow-1 me-2">
+                    <input type="text" name="q" class="form-control w-100" placeholder="Search cards..." value={query} />
+                </div>
+                <div class="my-2">
+                    <input type="submit" class="btn btn-primary w-100" value="Search" />
+                </div>
+            </div>
+        </form>
     </div>
 </div>