feat: faz o site para telas de 1024px

react/components/Html/styles.css

@@ -1,14 +1,27 @@
 [class*="productImageTag--main"] {
-  object-fit: none;
+  object-fit: none !important;
+  width: 98.225% !important;
+  height: 100% !important;
+  max-height: 664px !important;
 }
 
 [class*="flexRow--button-cart"] :global(.vtex-button) {
   background-color: black;
   border-color: black;
-  width: 97.952%;
   height: 49px;
 }
 
+[class*="flexRow--button-cart"] {
+  background-color: black;
+  border-color: black;
+  width: 73.464%;
+  height: 49px;
+  position: relative;
+  bottom: 72px;
+  left: 148px;
+  margin-left: 5px;
+}
+
 [class*="numeric-stepper__minus-button__text"] {
   position: absolute !important;
   left: 50%;
@@ -62,6 +75,11 @@
   height: 46px;
 }
 
+[class*="skuSelectorContainer"] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 [class*="skuSelectorSubcontainer--cor"]
   :global(.vtex-store-components-3-x-skuSelectorName) {
   font-size: 0;
@@ -179,6 +197,20 @@
   margin-left: 32px;
 }
 
+[class*="vtex-address-form__postalCode"] :global(.vtex-input__label) {
+  font-size: 0;
+}
+
+[class*="vtex-address-form__postalCode"] :global(.vtex-input__label)::after {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  content: "CALCULAR FRETE:";
+}
+
 [class*="vtex-address-form__postalCode-forgottenURL"] :global(.pointer) {
   color: black;
   text-decoration: underline;
@@ -208,7 +240,7 @@
 }
 
 [class*="listContainer"] {
-  justify-content: space-between;
+  justify-content: space-around;
   color: black;
   background-color: transparent;
   border-bottom: 1px solid #bfbfbf;
@@ -331,7 +363,7 @@
   content: "ENTREGA";
   position: relative;
   right: 500%;
-  top: -30px;
+  top: -23px;
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
@@ -344,7 +376,7 @@
   content: "FRETE";
   position: relative;
   right: 329%;
-  top: -52px;
+  top: -45px;
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
@@ -357,7 +389,7 @@
   content: "PRAZO";
   position: relative;
   right: 108%;
-  top: -72px;
+  top: -67px;
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
@@ -476,7 +508,115 @@
 }
 
 [class*="container--home"] {
-  width: 94.44%;
+  margin: 0 40px;
-  margin-right: auto;
+}
-  margin-left: auto;
+
+[class*="agenciamagma-store-theme-5-x-html--shipping"] {
+  position: relative;
+  bottom: 77px;
+  margin-top: 16px;
+}
+
+[class*="thumbImg--product-images"] {
+  width: 90px;
+  height: 90px;
+  gap: 16px;
+  display: flex;
+}
+
+[class*="productDescriptionText"]
+  :global(.vtex-store-components-3-x-container) {
+  margin: 0 !important;
+}
+
+[class*="vtex-store-components-3-x-container"] {
+  margin: 0 40px;
+}
+
+@media (max-width: 1024px) {
+  [class*="listContainer"] {
+    flex-direction: column;
+  }
+
+  [class*="vtex-store-components-3-x-container"]
+    :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [class*="vtex-flex-layout-0-x-stretchChildrenWidth"] {
+    width: 100% !important;
+  }
+
+  [class*="productNameContainer"] {
+    text-align: start !important;
+  }
+
+  [class*="product-identifier__value"] {
+    text-align: start !important;
+    position: unset !important;
+  }
+
+  [class*="productImageTag"] {
+    max-height: none !important;
+    width: 100% !important;
+    margin: auto !important;
+  }
+
+  [class*="ph5-m"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  [class*="vtex-store-components-3-x-container"] {
+    margin: 0 40px;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 85.382%;
+  }
+
+  [class*="productDescriptionContainer"] {
+    margin-left: 0px;
+  }
+
+  [class*="agenciamagma-store-theme-5-x-html--shipping"] {
+    position: relative !important;
+    bottom: 75.5px !important;
+    margin-top: 16px !important;
+  }
+
+  [class*="agenciamagma-store-theme-5-x-html--shipping"] {
+    position: relative !important;
+    bottom: 75.5px !important;
+    margin-top: 16px !important;
+  }
+
+  [class*="productDescriptionText"]
+    :global(.vtex-store-components-3-x-container) {
+    margin: 0 !important;
+  }
+
+  [class*="listContainer"] {
+    border-top: 1px solid #bfbfbf;
+  }
+  [class*="listItemActive"] :global(.vtex-button) {
+    border-bottom: none;
+  }
+  [class*="imageNormal"] {
+    width: 291.4px;
+    height: 291.4px;
+  }
+
+  [class*="listItem"] :global(.vtex-button):hover {
+    border-bottom: none;
+  }
+
+  [data-testid="product-description"] {
+    position: relative;
+    bottom: 125px;
+  }
+
+  [class*="thumbImg--product-images"] {
+    gap: 0px;
+  }
 }

store/blocks/home/home.jsonc

@@ -66,7 +66,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "fullWidth": false,

store/blocks/pdp/product.jsonc

@@ -3,9 +3,9 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#home",
+      "html#product-description",
       "rich-text#textproducts",
-      "list-context.product-list#demo1",
+      "list-context.product-list#produtos",
       "rich-text#textnewsletter",
       "newsletter",
       "product-questions-and-answers"
@@ -47,8 +47,13 @@
       "product-summary-price"
     ]
   },
-  "list-context.product-list#demo1": {
+  "list-context.product-list#produtos": {
     "blocks": ["product-summary.shelf#demo1"],
+    "children": ["html#slider"]
+  },
+
+  "html#slider": {
+    "props": { "testId": "product-summary-list" },
     "children": ["slider-layout#demo-products"]
   },
 
@@ -70,12 +75,17 @@
   },
   "flex-layout.row#description": {
     "props": {
+      "width": {
+        "tablet": "100%"
+      },
       "marginBottom": 7
     },
     "children": ["image#tab", "product-description"]
   },
   "condition-layout.product#availability": {
     "props": {
+      "blockClass": "produtoHome",
+      "id": "produtoHome",
       "conditions": [
         {
           "subject": "isProductAvailable"
@@ -122,11 +132,12 @@
     }
   },
   "flex-layout.row#product-image": {
-    "props": {},
+    "props": { "blockClass": "product-images" },
     "children": ["html#product-images"]
   },
   "product-images": {
     "props": {
+      "blockClass": "product-images",
       "contentType": "images",
       "showNavigationArrows": false,
       "showPaginationDots": false,
@@ -139,13 +150,17 @@
     }
   },
 
+  "html#shipping-simulator": {
+    "props": {
+      "blockClass": "shipping",
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
   "html#product-images": {
     "props": {
-      "thumbnailsOrientation": "horizontal",
+      "blockClass": "product-images",
-      "tag": "section",
-      "infinite": "true",
-      "preventHorizontalStretch": "true",
-      "verticalAlign": "bottom",
       "testId": "product-images"
     },
     "children": ["product-images"]
@@ -158,33 +173,55 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments#m3-academy",
+      "html#product-installments",
-      "ProductContext",
+      "html#pix",
-      "sku-selector",
+      "html#sku-selector",
+      "html#product-quantity",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
 
+  "html#sku-selector": {
+    "props": { "testId": "sku-selector" },
+    "children": ["sku-selector"]
+  },
+
+  "html#pix": {
+    "props": { "testId": "pix-price", "blockClass": "pix" },
+    "children": ["ProductContext"]
+  },
+
+  "html#product-installments": {
+    "props": { "testId": "product-installments" },
+    "children": ["product-installments"]
+  },
+
   "image#tab": {
     "props": {
       "src": "assets/img-sapato.png"
     }
   },
 
-  "tab-layout#home": {
+  "tab-layout": {
     "children": ["tab-list#home", "tab-content#home"],
     "props": {
       "blockClass": "home",
       "defaultActiveTabId": "home1"
     }
   },
+
+  "html#product-description": {
+    "props": { "testId": "product-description" },
+    "children": ["tab-layout"]
+  },
+
   "tab-list#home": {
     "children": [
       "tab-list.item#home1",
@@ -270,7 +307,7 @@
     }
   },
 
-  "product-installments#m3-academy": {
+  "product-installments": {
     "props": {
       "installmentsCriteria": "max-quantity-without-interest",
       "markers": ["discount", "vezes"],
@@ -283,6 +320,11 @@
     "props": {
       "marginBottom": 3
     },
+    "children": ["html#product-name"]
+  },
+
+  "html#product-name": {
+    "props": { "testId": "product-name" },
     "children": ["vtex.store-components:product-name"]
   },
 
@@ -300,11 +342,15 @@
       "marginBottom": 7,
       "blockClass": "button-cart"
     },
-    "children": ["product-quantity", "html#add-to-cart-button"]
+    "children": ["html#add-to-cart-button"]
   },
 
   "product-quantity": {
-    "props": { "width": "25%" }
+    "props": {}
+  },
+  "html#product-quantity": {
+    "props": { "testId": "product-quantity" },
+    "children": ["product-quantity"]
   },
 
   "html#add-to-cart-button": {
@@ -334,11 +380,17 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
+
+  "html#codigo": {
+    "props": { "blockClass": "codigo", "testId": "product-code" },
+    "children": ["product-identifier.product"]
+  },
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

styles/css/vtex.breadcrumb.css

@@ -1,52 +1,8 @@
 .homeIcon {
-  visibility: hidden;
+  display: none;
 }
-
+.homeLink::after {
-.arrow--1 {
-  visibility: hidden;
-  content: "";
-}
-
-.arrow--1::after {
-  visibility: visible;
   content: "Home";
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
-}
-
-.link--2 {
-  visibility: hidden;
-  content: "";
-}
-
-.link--2::after {
-  visibility: visible;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
-  content: "Sapatos";
-}
-
-.term {
-  visibility: hidden;
-}
-
-.term::after {
-  visibility: visible;
-  content: "Sandálias";
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
   position: relative;
-  right: 230px;
+  bottom: 2px;
 }

styles/css/vtex.condition-layout.css

@@ -1,11 +1,2 @@
-@media screen and (max-width: 1024px) {
-  .flexRowContent {
-    display: flex;
-    flex-direction: column;
-  }
-}
 
-.flexRowContent {
+
-  margin-right: 40px;
-  margin-left: 40px;
-}

styles/css/vtex.flex-layout.css

@@ -3,12 +3,6 @@
   padding: 0 0.5rem;
 }
 
-@media screen and (max-width: 1024px) {
-  .flexRowContent {
-    display: flex;
-    flex-direction: column;
-  }
-}
 
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,