feat: Adicionado o estilo das imagens do display principal

store/blocks/pdp/product.jsonc

@@ -81,7 +81,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -90,12 +90,15 @@
   },
   "product-images": {
     "props": {
+      "thumbnailsOrientation": "horizontal",
+
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": false,
+
-      "displayMode": "list"
+      "showPaginationDots": false,
+      "showNavigationArrows": false
     }
   },
   "product-images#descricao": {
@@ -115,13 +118,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
       "product-paymentPix-component",
       "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",

styles/css/agenciamagma.store-theme.css

@@ -6,6 +6,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 */
 .html {
   background-color: red;

styles/css/vtex.breadcrumb.css

@@ -6,6 +6,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 */
 .homeIcon {
   display: none;

styles/css/vtex.flex-layout.css

@@ -1,98 +1,10 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
-@media screen and (min-width: 40em) {
+1800px + : Big desktop
-  .flexRowContent--menu-link,
+*/
-  .flexRowContent--main-header {
+/* Media Query M3 */
-    padding: 0 1rem;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-  }
+/* Grid breakpoints */
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 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 */

styles/css/vtex.store-components.css

@@ -6,8 +6,22 @@
 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 */
-/*.productDescriptionContainer {
+.container {
-  background: red;
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
 }
-*/

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

@@ -1,4 +1,17 @@
-/*.productDescriptionContainer {
+.container {
-  background: red;
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
 }
-*/