Added search and sort.

Styles/Style.css

@@ -1210,6 +1210,50 @@ input, button, textarea, select {
     display: none;
 }
 
+
+.CatalogueControls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
+    gap: 0.75rem;
+    margin: 0 0 1rem;
+    align-items: center;
+}
+
+.CatalogueControls input, .CatalogueControls select {
+    width: 100%;
+    min-width: 0;
+    padding: 0.65rem 0.75rem;
+    color: var(--Text);
+    background-color: var(--Mantle);
+    border: 3px solid var(--Surface2);
+    border-radius: 0;
+    font-size: 1rem;
+    box-shadow: 3px 3px 0 var(--Crust);
+}
+
+.CatalogueControls input::placeholder {
+    color: var(--Overlay1);
+}
+
+.CatalogueControls input:hover, .CatalogueControls select:hover {
+    border-color: var(--Sky);
+}
+
+.CatalogueControls input:focus, .CatalogueControls select:focus {
+    outline: 3px solid var(--Yellow);
+    outline-offset: 3px;
+}
+
+.CatalogueControls select {
+    cursor: pointer;
+}
+
+@media (max-width: 500px) {
+    .CatalogueControls {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+}
+
 .ShopSeedList {
     display: grid;
     grid-template-columns: repeat( auto-fit, minmax(15rem, 1fr) );
@@ -1450,7 +1494,7 @@ input, button, textarea, select {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin-top: 1.5rem;
+    margin-top: 0;
 }
 
 .PlantEncyclopediaCard {
@@ -1594,7 +1638,7 @@ input, button, textarea, select {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    margin-top: 1.5rem;
+    margin-top: 0;
 }
 
 .MutationEncyclopediaCard {