¨4.0.1¨

Themes/Storefront/resources/assets/public/sass/utils/common/_form-wrap.scss

@@ -6,7 +6,7 @@
 .form-wrap-inner {
     width: 600px;
     margin: auto;
-    padding: 0 15px;
+    padding: 0 5px;
 
     > h2 {
         margin-bottom: 40px;
@@ -53,7 +53,7 @@
                 color: $color-white;
                 align-items: center;
                 justify-content: center;
-                border-radius: 50%;
+                border-radius: $radius-full;
 
                 &:hover {
                     opacity: 0.85;

Themes/Storefront/resources/assets/public/sass/utils/common/_product-card.scss

@@ -2,7 +2,7 @@
     position: relative;
     display: flex !important;
     height: auto;
-    margin: 0 15px;
+    margin: 0 10px;
     padding: 20px 20px 0;
     flex-direction: column;
     overflow: hidden;
@@ -11,24 +11,17 @@
     transition: $transition-primary;
 
     &:hover {
-        border-color: $color-white;
-        box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
+        border-color: $color-white-lite;
+        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
         z-index: 1;
 
         .product-card-actions {
             button {
                 opacity: 1;
-                visibility: visible;
                 transform: scale(1);
             }
         }
 
-        .product-badge {
-            opacity: 0;
-            visibility: hidden;
-            transform: scale(0.9);
-        }
-
         .product-card-countdown {
             opacity: 0;
             visibility: hidden;
@@ -87,7 +80,7 @@
     }
 
     .product-image {
-        height: 180px;
+        padding-bottom: 80%;
 
         .image-placeholder {
             height: 85px;
@@ -96,9 +89,10 @@
     }
 
     .product-badge {
-        right: 0;
+        left: 0;
+        right: auto;
         z-index: 1;
-        transition: $transition-primary;
+        cursor: pointer;
     }
 
     .product-card-actions {
@@ -121,9 +115,14 @@
             border: 1px solid $color-gray-lite;
             border-radius: $radius-default;
             opacity: 0;
-            visibility: hidden;
             transform: scale(0.5);
-            transition: opacity $transition-primary, transform $transition-primary, border-color $transition-default;
+            transition: opacity $transition-primary,
+                transform $transition-primary, border-color $transition-default;
+
+            &.btn-wishlist.added {
+                opacity: 1;
+                transform: scale(1);
+            }
 
             &:hover {
                 border-color: $color-default-transparent-lite;
@@ -132,6 +131,7 @@
 
             > i {
                 font-size: 15px;
+                transition: $transition-primary;
             }
         }
 
@@ -147,7 +147,7 @@
         transform: translate(-50%, -50%) scale(1);
         transition: $transition-primary;
 
-        &.is-countdown {
+        &.countdown {
             .countdown-section {
                 width: auto;
                 margin-right: 10px;
@@ -225,7 +225,7 @@
 
         &:after {
             position: absolute;
-            content: '';
+            content: "";
             left: -20px;
             top: 4px;
             height: 15px;
@@ -276,17 +276,9 @@
     }
 }
 
-@media screen and (max-width: 1800px) {
-    .product-card {
-        .product-image {
-            height: 160px;
-        }
-    }
-}
-
 @media screen and (max-width: $lg) {
     .product-card {
-        margin: 0 8px;
+        margin: 0 7.5px;
         padding: 15px 15px 0;
 
         &:hover {
@@ -324,19 +316,6 @@
             margin-bottom: 10px;
         }
 
-        .product-image {
-            position: relative;
-            height: 80%;
-            padding-bottom: 80%;
-
-            img {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
-
         .product-card-actions,
         .product-price-clone,
         .btn-add-to-cart {

Themes/Storefront/resources/assets/public/sass/utils/common/_product.scss

@@ -1,11 +1,17 @@
 .product-image {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
 
     > img {
+        position: absolute;
+        left: 50%;
+        top: 50%;
         max-height: 100%;
         max-width: 100%;
+        transform: translate(-50%, -50%);
         transition: $transition-primary;
     }
 }
@@ -13,7 +19,7 @@
 .product-badge {
     position: absolute;
     top: -5px;
-    right: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
 
@@ -23,10 +29,10 @@
         width: auto;
         min-width: 0;
         display: inline-block;
-        margin: 0 0 5px auto;
-        padding: 6px 9px;
-        text-align: right;
-        border-radius: 0;
+        margin: 0 auto 5px 0;
+        padding: 5px 9px;
+        text-align: left;
+        border-radius: 5px;
 
         &:last-child {
             margin-bottom: 0;