update css vars

graphql/collections.js

@@ -31,7 +31,7 @@ export const GET_COLLECTIONS_QUERY = `
 // Get products in a collection
 export const GET_COLLECTION_PRODUCTS_QUERY = `
   ${ProductFragment}
-  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean) {
+  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean, $filters: [ProductFilter!], $after: String) {
     collection(handle: $handle) {
       id
       title
@@ -45,7 +45,7 @@ export const GET_COLLECTION_PRODUCTS_QUERY = `
         width
         height
       }
-      products(first: $first, sortKey: $sortKey, reverse: $reverse) {
+      products(first: $first, sortKey: $sortKey, reverse: $reverse, filters: $filters, after: $after) {
         edges {
           node {
             ...ProductFragment

graphql/products.js

@@ -105,6 +105,30 @@ export const GET_PRODUCT_QUERY = `
   }
 `;
 
+// Search products with cursor-based pagination and full filter support
+export const GET_SEARCH_QUERY = `
+  ${ProductFragment}
+  query SearchProducts(
+    $first: Int!
+    $query: String
+    $sortKey: ProductSortKeys
+    $reverse: Boolean
+    $after: String
+  ) {
+    products(first: $first, query: $query, sortKey: $sortKey, reverse: $reverse, after: $after) {
+      edges {
+        node {
+          ...ProductFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
 // Get product recommendations
 export const QUERY_PRODUCT_RECOMMENDATIONS = `
   ${ProductFragment}