feat: adiciona css 375px

react/components/Html/styles.css

@@ -25,6 +25,24 @@
   padding: 0 40px;
 }
 
+@media (max-width: 1024px) {
+  [class*="html--buy-button"] {
+    margin-bottom: 16px;
+  }
+
   [class*="html--descriptionText"] {
     width: 100%;
   }
+}
+
+@media (max-width: 463px) {
+  [class*="html--buy-button"] {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  [class*="html--buy-button"] :global(.vtex-button) {
+    height: 74px;
+    padding: 0 64px;
+  }
+}

store/blocks/pdp/product-description.jsonc

@@ -112,5 +112,10 @@
       "displayMode": "first-image",
       "zoomMode": "disabled"
     }
+  },
+  "product-description": {
+    "props": {
+      "collapseContent": false
+    }
   }
 }

store/blocks/pdp/product.jsonc

@@ -252,11 +252,11 @@
     ]
   },
 
-  "product-summary-image": {
+  // "product-summary-image": {
-    "props": {
+  //   "props": {
-      "showBadge": false
+  //     "showBadge": false
-    }
+  //   }
-  },
+  // },
 
   "list-context.product-list#shelfProducts": {
     "blocks": ["product-summary.shelf#shelfProducts"],

styles/css/vtex.flex-layout.css

@@ -114,11 +114,29 @@
   padding-bottom: 1rem;
 }
 
+.flexRowContent {
+  gap: 32px;
+}
+
 .flexRowContent--product-container {
-  width: 94.973%;
+  width: 94.445%;
+}
+
+.flexRow--product-container :global(.vtex-store-components-3-x-container) {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth {
+  padding: 0;
 }
 
 @media (max-width: 1024px) {
+  .flexRow--product-container :global(.vtex-store-components-3-x-container) {
+    padding: 0 40px;
+  }
   .flexRowContent--product-container {
     width: 100%;
   }

styles/css/vtex.product-summary.css

@@ -9,20 +9,45 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
 /* Grid breakpoints */
 .imageWrapper {
-  height: 314px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.image {
+  width: 314.4px;
+  height: 314.4px;
+}
+
 .brandName {
   font-style: normal;
   font-weight: 400;
+  font-size: 18px;
   line-height: 25px;
   text-align: center;
   color: #000000;
 }
 
+.nameContainer {
+  padding: 16px 0 0 0;
+}
+
 .containerNormal {
   max-width: 314px !important;
 }
+
+@media (max-width: 1024px) {
+  .brandName {
+    font-size: 14px;
+  }
+  .image {
+    width: 291.2px;
+    height: 291.2px;
+  }
+}
+@media (min-width: 375px) and (max-width: 768px) {
+  .image {
+    width: 124.8px;
+    height: 124.8px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -27,6 +27,11 @@
   background: transparent;
 }
 
+.sliderTrack--shelf {
+  display: flex;
+  gap: 16px;
+}
+
 .sliderLayoutContainer--shelf {
   padding-left: 40px !important;
   padding-right: 40px !important;
@@ -55,3 +60,20 @@
   visibility: visible;
   content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
 }
+
+@media (max-width: 1024px) {
+  .sliderTrack--shelf {
+    gap: 12px !important;
+  }
+}
+@media (min-width: 375px) and (max-width: 755px) {
+  .sliderLeftArrow--shelf {
+    margin-left: 0;
+  }
+  .sliderRightArrow--shelf {
+    margin-right: 0;
+  }
+  .sliderTrack--shelf {
+    gap: 8px !important;
+  }
+}

styles/css/vtex.store-components.css

@@ -13,11 +13,6 @@
   background: red;
 }
 
-.container {
-  display: flex;
-  justify-content: center;
-}
-
 .productBrand--quickview {
   display: flex;
   justify-content: end;
@@ -30,6 +25,7 @@
 
 .carouselGaleryThumbs {
   max-height: 90px;
+  width: 150%;
   display: block;
 }
 
@@ -195,6 +191,7 @@
 
 .shippingTableRow {
   position: relative;
+  width: 100%;
 }
 
 .shippingTableHeadDeliveryName {
@@ -215,7 +212,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 342%;
+  left: 61%;
 }
 
 .shippingTableHeadDeliveryEstimate::after {
@@ -232,7 +229,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 198%;
+  left: 36%;
 }
 
 .shippingTableHeadDeliveryPrice::after {
@@ -263,7 +260,7 @@
 
 .shippingTableCellDeliveryEstimate {
   position: absolute;
-  left: 62%;
+  left: 61%;
 }
 
 .shippingTableCellDeliveryPrice {
@@ -275,6 +272,10 @@
   margin: 0;
 }
 
+.skuSelectorNameContainer {
+  margin-bottom: 0;
+}
+
 :global(.vtex-address-form-4-x-input)::placeholder {
   font-style: normal;
   font-weight: 400;
@@ -352,6 +353,10 @@
   color: #fff;
 }
 
+.inputGroup--pageProduct {
+  display: flex;
+}
+
 .inputGroup--pageProduct :global(.vtex-input-prefix__group) {
   border: none;
   border-radius: 0;
@@ -363,6 +368,10 @@
   padding: 0;
 }
 
+.inputGroup--pageProduct :global(.vtex-input__error) {
+  margin-top: 8px;
+}
+
 .subscriberContainer {
   margin-top: 43px;
 }
@@ -464,14 +473,19 @@
   width: 100% !important;
 }
 
-@media (max-width: 1024px) {
+:global(.vtex-input__error) {
-  .container {
+  position: absolute;
-    padding: 0 40px;
+  margin: 0;
 }
+
+@media (max-width: 1024px) {
   .productBrand--quickview {
     justify-content: flex-start;
     margin-top: 32px;
   }
+  .price_sellingPrice {
+    font-size: 18px;
+  }
   .container--pageProduct {
     width: 96%;
   }
@@ -480,3 +494,15 @@
     max-width: 100%;
   }
 }
+@media (max-width: 492px) {
+  .shippingContainer {
+    margin-bottom: 22px;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 170px;
+    top: 95%;
+  }
+  .shippingTable {
+    margin-top: 32px;
+  }
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -106,20 +106,38 @@
   padding-bottom: 1rem;
 }
 
+.flexRowContent {
+  gap: 32px;
+}
+
 .flexRowContent--product-container {
-  width: 94.973%;
+  width: 94.445%;
+}
+
+.flexRow--product-container :global(.vtex-store-components-3-x-container) {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+
+  .stretchChildrenWidth {
+    padding: 0;
+  }
 }
 
 @media (max-width: 1024px) {
+  .flexRow--product-container :global(.vtex-store-components-3-x-container) {
+    padding: 0 40px;
+  }
   .flexRowContent--product-container {
     width: 100%;
-    .flexRowContent {
+  }
+  .flexRowContent--product-container .flexRowContent {
     flex-direction: column;
   }
-
+  .flexRowContent--product-container .stretchChildrenWidth {
-    .stretchChildrenWidth {
     width: 100% !important;
     padding: 0;
   }
 }
-}

styles/sass/pages/product/vtex.product-summary.scss

@@ -1,18 +1,46 @@
 .imageWrapper {
-  height: 314px;
+  // height: 245px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.image {
+  width: 314.4px;
+  height: 314.4px;
+}
+
 .brandName {
   font-style: normal;
   font-weight: 400;
+  font-size: 18px;
   line-height: 25px;
   text-align: center;
   color: $color-black;
 }
 
+.nameContainer {
+  padding: 16px 0 0 0;
+}
+
 .containerNormal {
   max-width: 314px !important;
 }
+
+@media (max-width: 1024px) {
+  .brandName {
+    font-size: 14px;
+  }
+
+  .image {
+    width: 291.2px;
+    height: 291.2px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 768px) {
+  .image {
+    width: 124.8px;
+    height: 124.8px;
+  }
+}

styles/sass/pages/product/vtex.slider-layout.scss

@@ -17,6 +17,11 @@
   background: transparent;
 }
 
+.sliderTrack--shelf {
+  display: flex;
+  gap: 16px;
+}
+
 .sliderLayoutContainer--shelf {
   padding-left: 40px !important;
   padding-right: 40px !important;
@@ -47,3 +52,23 @@
     content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
   }
 }
+
+@media (max-width: 1024px) {
+  .sliderTrack--shelf {
+    gap: 12px !important;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 755px) {
+  .sliderLeftArrow--shelf {
+    margin-left: 0;
+  }
+
+  .sliderRightArrow--shelf {
+    margin-right: 0;
+  }
+
+  .sliderTrack--shelf {
+    gap: 8px !important;
+  }
+}

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

@@ -2,11 +2,6 @@
   background: red;
 }
 
-.container {
-  display: flex;
-  justify-content: center;
-}
-
 .productBrand--quickview {
   display: flex;
   justify-content: end;
@@ -19,6 +14,7 @@
 
 .carouselGaleryThumbs {
   max-height: 90px;
+  width: 150%;
   display: block;
 }
 
@@ -190,6 +186,7 @@
 
 .shippingTableRow {
   position: relative;
+  width: 100%;
 }
 
 .shippingTableHeadDeliveryName {
@@ -210,7 +207,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 342%;
+  left: 61%;
 }
 
 .shippingTableHeadDeliveryEstimate::after {
@@ -227,7 +224,7 @@
   font-size: 0;
   position: absolute;
   top: 5%;
-  left: 198%;
+  left: 36%;
 }
 
 .shippingTableHeadDeliveryPrice::after {
@@ -258,7 +255,7 @@
 
 .shippingTableCellDeliveryEstimate {
   position: absolute;
-  left: 62%;
+  left: 61%;
 }
 
 .shippingTableCellDeliveryPrice {
@@ -270,6 +267,10 @@
   margin: 0;
 }
 
+.skuSelectorNameContainer {
+  margin-bottom: 0;
+}
+
 :global(.vtex-address-form-4-x-input)::placeholder {
   font-style: normal;
   font-weight: 400;
@@ -347,6 +348,10 @@
   color: $color-white;
 }
 
+.inputGroup--pageProduct {
+  display: flex;
+}
+
 .inputGroup--pageProduct :global(.vtex-input-prefix__group) {
   border: none;
   border-radius: 0;
@@ -358,6 +363,10 @@
   padding: 0;
 }
 
+.inputGroup--pageProduct :global(.vtex-input__error) {
+  margin-top: 8px;
+}
+
 .subscriberContainer {
   margin-top: 43px;
 
@@ -476,15 +485,21 @@
   width: 100% !important;
 }
 
-@media (max-width: 1024px) {
+:global(.vtex-input__error) {
-  .container {
+  position: absolute;
-    padding: 0 40px;
+  margin: 0;
 }
+
+@media (max-width: 1024px) {
   .productBrand--quickview {
     justify-content: flex-start;
     margin-top: 32px;
   }
 
+  .price_sellingPrice {
+    font-size: 18px;
+  }
+
   .container--pageProduct {
     width: 96%;
   }
@@ -496,3 +511,17 @@
     }
   }
 }
+
+@media (max-width: 492px) {
+  .shippingContainer {
+    margin-bottom: 22px;
+  }
+
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 170px;
+    top: 95%;
+  }
+  .shippingTable {
+    margin-top: 32px;
+  }
+}