styles/configs/style.json

@@ -339,7 +339,7 @@
         "letterSpacing": "0"
       },
       "code": {
-        "fontFamily": "Consolas, monaco, monospace",
+        "fontFamily": "Open Sans, Consolas, monaco, monospace",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",

styles/css/vtex.store-components.css

@@ -7,6 +7,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container {
   margin: 0;
@@ -19,6 +20,7 @@
 
 .carouselGaleryThumbs {
   margin-top: 16px;
+  margin-bottom: 16px;
   display: block;
 }
 
@@ -42,6 +44,7 @@
   max-width: 90px;
   width: 90px !important;
   margin-right: 16px;
+  margin-bottom: 0;
 }
 
 .productImagesGallerySlide {
@@ -238,8 +241,9 @@
   color: #afafaf;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  padding-top: 8px;
   position: absolute;
-  top: 28px;
+  top: 32px;
   right: -180px;
   font-weight: 400;
   font-size: 12px;
@@ -281,6 +285,8 @@
 
 .shippingTable {
   border: none;
+  margin: 16px 0;
+  padding: 0;
 }
 
 .shippingTableRadioBtn {
@@ -307,10 +313,12 @@
 }
 .shippingTableHead .shippingTableHeadDeliveryName {
   width: 110px;
+  margin-right: 32px;
 }
 @media screen and (max-width: 350px) {
   .shippingTableHead .shippingTableHeadDeliveryName {
     width: 90px;
+    margin-right: 8px;
   }
 }
 .shippingTableHead .shippingTableHeadDeliveryEstimate {
@@ -318,12 +326,13 @@
 }
 .shippingTableHead .shippingTableHeadDeliveryPrice {
   display: flex;
-  width: 110px;
+  width: 48px;
+  margin-right: 32px;
   font-size: 0;
 }
 @media screen and (max-width: 350px) {
   .shippingTableHead .shippingTableHeadDeliveryPrice {
-    width: 56px;
+    margin-right: 8px;
   }
 }
 .shippingTableHead .shippingTableHeadDeliveryPrice::after {
@@ -343,10 +352,18 @@
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName,
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice,
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
-  padding: 15px 4px 0 0;
+  margin-right: 32px;
+  padding: 15px 0 0 0;
+}
+@media screen and (max-width: 350px) {
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName,
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice,
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+    margin-right: 8px;
+  }
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
-  min-width: 112px;
+  min-width: 110px;
   width: 110px;
 }
 @media screen and (max-width: 350px) {
@@ -357,23 +374,13 @@
   }
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
-  width: 110px;
+  min-width: 48px;
-}
+  width: 48px;
-@media screen and (max-width: 768px) {
+  padding-right: 0;
-  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
-    width: 70px;
-    min-width: 72px;
-  }
-}
-@media screen and (max-width: 350px) {
-  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
-    min-width: 56px;
-    width: 56px;
-    padding-right: 0;
-  }
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
   padding-right: 0;
+  margin-right: 0;
   order: 3;
 }
 

styles/sass/pages/product/vtex.store-components.scss

@@ -10,6 +10,7 @@
 
 .carouselGaleryThumbs {
   margin-top: 16px;
+  margin-bottom: 16px;
   display: block;
 }
 
@@ -33,6 +34,7 @@
   max-width: 90px;
   width: 90px !important;
   margin-right: 16px;
+  margin-bottom: 0;
 }
 
 .productImagesGallerySlide {
@@ -274,8 +276,9 @@
   }
 
   :global(.vtex-address-form__postalCode-forgottenURL) {
+    padding-top: 8px;
     position: absolute;
-    top: 28px;
+    top: 32px;
     right: -180px;
     font-weight: 400;
     font-size: 12px;
@@ -323,6 +326,8 @@
 
 .shippingTable {
   border: none;
+  margin: 16px 0;
+  padding: 0;
 }
 
 .shippingTableRadioBtn {
@@ -351,8 +356,10 @@
 
   .shippingTableHeadDeliveryName {
     width: 110px;
+    margin-right: 32px;
     @media screen and (max-width: 350px) {
       width: 90px;
+      margin-right: 8px;
     }
   }
 
@@ -362,10 +369,11 @@
 
   .shippingTableHeadDeliveryPrice {
     display: flex;
-    width: 110px;
+    width: 48px;
+    margin-right: 32px;
     font-size: 0;
     @media screen and (max-width: 350px) {
-      width: 56px;
+      margin-right: 8px;
     }
     &::after {
       content: "FRETE";
@@ -388,11 +396,15 @@
     .shippingTableCellDeliveryName,
     .shippingTableCellDeliveryPrice,
     .shippingTableCellDeliveryEstimate {
-      padding: 15px 4px 0 0;
+      margin-right: 32px;
+      padding: 15px 0 0 0;
+      @media screen and (max-width: 350px) {
+        margin-right: 8px;
+      }
     }
 
     .shippingTableCellDeliveryName {
-      min-width: 112px;
+      min-width: 110px;
       width: 110px;
       @media screen and (max-width: 350px) {
         width: 90px;
@@ -402,20 +414,14 @@
     }
 
     .shippingTableCellDeliveryPrice {
-      width: 110px;
+      min-width: 48px;
-      @media screen and (max-width: 768px) {
+      width: 48px;
-        width: 70px;
+      padding-right: 0;
-        min-width: 72px;
-      }
-      @media screen and (max-width: 350px) {
-        min-width: 56px;
-        width: 56px;
-        padding-right: 0;
-      }
     }
 
     .shippingTableCellDeliveryEstimate {
       padding-right: 0;
+      margin-right: 0;
       order: 3;
     }
   }

styles/sass/utils/_vars.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+
 $color-black: #292929;
 $color-black-100: #000000;
 $color-black2: #202020;