More changes

components/product/ProductCard/ProductCard.module.css

@@ -1,14 +1,10 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
   bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer;
+  ease-linear cursor-pointer inline-block;
   height: 100% !important;
 
   &:hover {
-    & .squareBg:before {
-      transform: scale(0.98);
-    }
-
     & .productImage {
       transform: scale(1.2625);
     }
@@ -43,47 +39,18 @@
       @apply bg-cyan text-white;
     }
   }
-
-  &:nth-child(6n + 1) .squareBg {
-    @apply bg-violet;
-  }
-
-  &:nth-child(6n + 5) .squareBg {
-    @apply bg-blue;
-  }
-
-  &:nth-child(6n + 3) .squareBg {
-    @apply bg-pink;
-  }
-
-  &:nth-child(6n + 6) .squareBg {
-    @apply bg-cyan;
-  }
 }
 
-.squareBg,
+.wishlistButton {
+  @apply top-3 right-3 z-50 absolute bg-accent-9 text-accent-0;
+}
+
 .productTitle > span,
 .productPrice {
   @apply transition-colors ease-in-out duration-500;
 }
 
-.squareBg {
-  @apply transition-colors absolute inset-0 z-0;
-  background-color: #212529;
-}
-
-.squareBg:before {
-  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  background-image: url('/bg-products.svg');
-  content: '';
-}
-
 .simple {
-  & .squareBg {
-    @apply bg-accent-0 !important;
-    background-image: url('/bg-products.svg');
-  }
-
   & .productTitle {
     @apply pt-2;
     font-size: 1rem;
@@ -117,10 +84,6 @@
   letter-spacing: 0.4px;
 }
 
-.wishlistButton {
-  @apply top-0 right-0 z-50 absolute;
-}
-
 .imageContainer {
   @apply flex items-center justify-center;
   overflow: hidden;

components/product/ProductCard/ProductCard.tsx

@@ -49,7 +49,13 @@ const ProductCard: FC<Props> = ({
         </div>
       ) : (
         <>
-          <div className={s.squareBg} />
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
+            <WishlistButton
+              className={s.wishlistButton}
+              productId={product.id}
+              variant={product.variants[0] as any}
+            />
+          )}
           <div className="flex flex-row justify-between box-border w-full z-20 absolute ">
             {!noNameTag && (
               <div className="absolute top-0 left-0 pr-16 max-w-full">
@@ -63,13 +69,6 @@ const ProductCard: FC<Props> = ({
                 </span>
               </div>
             )}
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
           </div>
           <div className={s.imageContainer}>
             {product?.images && (