feat(pdp): Adiciona tablayout e newletter mobile

react/components/Html/styles.css

@@ -4,6 +4,12 @@
   line-height: 19px;
   text-align: end;
 }
+@media screen and (max-width: 1024px) {
+  [class*="html--codigo"] {
+    text-align: left;
+    margin-bottom: 24px;
+  }
+}
 
 [class*="html--description-container"] {
   display: flex;
@@ -11,10 +17,22 @@
   margin-right: 32px;
   gap: 32px;
 }
+@media screen and (max-width: 1024px) {
+  [class*="html--description-container"] {
+    flex-direction: column;
+    margin: 0;
+    gap: 16px;
+  }
+}
 
 [class*="html--image-container"] {
   width: 49.82%;
 }
+@media screen and (max-width: 1024px) {
+  [class*="html--image-container"] {
+    width: 100%;
+  }
+}
 
 [class*="html--qtd-btn"] {
   display: flex;

react/components/Pix/Pix.module.css

@@ -11,7 +11,7 @@
 }
 
 .price {
-  margin: 0;
+  margin: 0 0 -5px 0;
   font-weight: 700;
   font-size: 18px;
   line-height: 25px;

react/components/Pix/Pix.tsx

@@ -3,7 +3,7 @@ import { useProduct } from "vtex.product-context";
 import styles from "./Pix.module.css";
 
 const Pix = () => {
-  if (typeof document !== undefined) {
+  if (typeof document !== "undefined") {
     const input = document.querySelector(".vtex-address-form-4-x-input");
     input?.setAttribute("placeholder", "Digite seu CEP");
   }

store/blocks/pdp/product-tablayout.jsonc

@@ -0,0 +1,109 @@
+{
+  "tab-layout#details": {
+    "children": ["tab-list#details", "tab-content#details"],
+    "props": {
+      "blockClass": "details",
+      "defaultActiveTabId": "details1"
+    }
+  },
+  "tab-list#details": {
+    "children": [
+      "tab-list.item#details1",
+      "tab-list.item#details2",
+      "tab-list.item#details3",
+      "tab-list.item#details4",
+      "tab-list.item#details5"
+    ]
+  },
+  "tab-list.item#details1": {
+    "props": {
+      "tabId": "details1",
+      "label": "Descrição",
+      "blockClass": "descricao",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#details2": {
+    "props": {
+      "tabId": "details2",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#details3": {
+    "props": {
+      "tabId": "details3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#details4": {
+    "props": {
+      "tabId": "details4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#details5": {
+    "props": {
+      "tabId": "details5",
+      "label": "Descrição"
+    }
+  },
+  "tab-content#details": {
+    "children": [
+      "tab-content.item#details1",
+      "tab-content.item#details2",
+      "tab-content.item#details3",
+      "tab-content.item#details4",
+      "tab-content.item#details5"
+    ]
+  },
+  "tab-content.item#details1": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details1"
+    }
+  },
+  "tab-content.item#details2": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details2"
+    }
+  },
+  "tab-content.item#details3": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details3"
+    }
+  },
+  "tab-content.item#details4": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details4"
+    }
+  },
+  "tab-content.item#details5": {
+    "children": ["html#description"],
+    "props": {
+      "tabId": "details5"
+    }
+  },
+
+  "html#description": {
+    "props": {
+      "tag": "section",
+      "testId": "description",
+      "blockClass": "description-container"
+    },
+    "children": ["html#description-image", "product-description"]
+  },
+  "html#description-image": {
+    "props": { "blockClass": "image-container" },
+    "children": ["product-images#description"]
+  },
+  "product-images#description": {
+    "props": {
+      "displayMode": "first-image",
+      "zoomMode": "disabled",
+      "blockClass": "description-imagem"
+    }
+  }
+}

store/blocks/pdp/product.jsonc

@@ -42,7 +42,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       /*"fullWidth": false,*/
@@ -50,114 +50,6 @@
     }
   },
 
-  "tab-layout#details": {
-    "children": ["tab-list#details", "tab-content#details"],
-    "props": {
-      "blockClass": "details",
-      "defaultActiveTabId": "details1"
-    }
-  },
-  "tab-list#details": {
-    "children": [
-      "tab-list.item#details1",
-      "tab-list.item#details2",
-      "tab-list.item#details3",
-      "tab-list.item#details4",
-      "tab-list.item#details5"
-    ]
-  },
-  "tab-list.item#details1": {
-    "props": {
-      "tabId": "details1",
-      "label": "Descrição",
-      "blockClass": "descricao",
-      "defaultActiveTab": true
-    }
-  },
-  "tab-list.item#details2": {
-    "props": {
-      "tabId": "details2",
-      "label": "Descrição"
-    }
-  },
-  "tab-list.item#details3": {
-    "props": {
-      "tabId": "details3",
-      "label": "Descrição"
-    }
-  },
-  "tab-list.item#details4": {
-    "props": {
-      "tabId": "details4",
-      "label": "Descrição"
-    }
-  },
-  "tab-list.item#details5": {
-    "props": {
-      "tabId": "details5",
-      "label": "Descrição"
-    }
-  },
-  "tab-content#details": {
-    "children": [
-      "tab-content.item#details1",
-      "tab-content.item#details2",
-      "tab-content.item#details3",
-      "tab-content.item#details4",
-      "tab-content.item#details5"
-    ]
-  },
-  "tab-content.item#details1": {
-    "children": ["html#description"],
-    "props": {
-      "tabId": "details1"
-    }
-  },
-  "tab-content.item#details2": {
-    "children": ["html#description"],
-    "props": {
-      "tabId": "details2"
-    }
-  },
-  "tab-content.item#details3": {
-    "children": ["html#description"],
-    "props": {
-      "tabId": "details3"
-    }
-  },
-  "tab-content.item#details4": {
-    "children": ["html#description"],
-    "props": {
-      "tabId": "details4"
-    }
-  },
-  "tab-content.item#details5": {
-    "children": ["html#description"],
-    "props": {
-      "tabId": "details5"
-    }
-  },
-
-  "html#description": {
-    "props": {
-      "tag": "section",
-      "testId": "description",
-      "blockClass": "description-container"
-    },
-    "children": ["html#description-image", "product-description"]
-  },
-  "html#description-image": {
-    "props": { "blockClass": "image-container" },
-    "children": ["product-images#description"]
-  },
-  "product-images#description": {
-    "props": {
-      "displayMode": "first-image",
-      "zoomMode": "disabled",
-      "blockClass": "description-imagem"
-    }
-  },
-
   "breadcrumb#pdp": {
     "props": {
       "blockClass": "testebread",
@@ -165,14 +57,6 @@
     }
   },
 
-  /*"html#breadcrumb": {
-    "props": {
-      "tag": "section",
-      "testId": "breadcrumbs",
-      "blockClass": "pdp-breadcrumb"
-    },
-    "children": ["breadcrumb"]
-  },*/
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -198,14 +82,15 @@
       "Else": "flex-layout.row#product-availability"
     }
   },
+
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
+      /*"colGap": 7,*/
       /*"rowGap": 7,
       "marginTop": 5,
       "marginBottom": 7,
-      "paddingBottom": 7*/
+      "paddingBottom": 7,*/
-      "blockClass": "containerteste"
+      "blockClass": "container-produto"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -233,8 +118,9 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "51%",
+      "width": "50%",
-      "rowGap": 0
+      "rowGap": 0,
+      "blockClass": "stack-container"
     }
   },
   "flex-layout.row#product-image": {
@@ -247,11 +133,11 @@
       "thumbnailAspectRatio": "1:1",
       "thumbnailMaxHeight": 90,
       "thumbnailsOrientation": "horizontal",
+      "displayThumbnailsArrows": false,
       "aspectRatio": {
-        "desktop": "1:1",
+        "desktop": "auto"
-        "phone": "16:9"
       },
-      "displayThumbnailsArrows": false
+      "blockClass": "images-container"
     }
   },
   "flex-layout.col#right-col": {
@@ -337,12 +223,12 @@
 
   "flex-layout.row#product-availability": {
     "props": {
-      "colGap": 7,
+      /*"colGap": 7,*/
       /*"rowGap": 7,
       "marginTop": 5,
       "marginBottom": 7,
-      "paddingBottom": 7*/
+      "paddingBottom": 7,*/
-      "blockClass": "containerteste"
+      "blockClass": "container-produto"
     },
     "children": [
       "flex-layout.col#stack",

styles/css/vtex.flex-layout.css

@@ -11,6 +11,11 @@
 .flexRowContent--name {
   text-align: end;
 }
+@media screen and (max-width: 1024px) {
+  .flexRowContent--name {
+    text-align: left;
+  }
+}
 
 .flexRowContent--preco {
   font-style: normal;
@@ -21,7 +26,16 @@
   margin: 0;
 }
 
-.flexRow--containerteste {
+.flexRow--container-produto {
   padding-left: 40px;
   padding-right: 40px;
 }
+
+.flexRowContent--container-produto {
+  gap: 32px;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--container-produto {
+    display: block;
+  }
+}

styles/css/vtex.product-price.css

@@ -31,6 +31,12 @@
   color: #bababa;
   margin-bottom: 8px;
 }
+@media screen and (max-width: 1024px) {
+  .listPrice--summary {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
 .listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before {
   content: "de ";
 }
@@ -44,3 +50,9 @@
   line-height: 33px;
   color: #000000;
 }
+@media screen and (max-width: 1024px) {
+  .sellingPrice--summary {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

styles/css/vtex.product-summary.css

@@ -11,7 +11,7 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
-  min-height: 66px;
+  /*min-height: 66px;*/
 }
 .nameContainer .productBrand {
   font-weight: 400;
@@ -19,6 +19,12 @@
   line-height: 25px;
   color: #000000;
 }
+@media screen and (max-width: 1024px) {
+  .nameContainer .productBrand {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 .spacer {
   display: none;

styles/css/vtex.rich-text.css

@@ -18,3 +18,9 @@
   line-height: 38px;
   color: #575757;
 }
+@media screen and (max-width: 768px) {
+  .container--title-prateleira .paragraph--title-prateleira {
+    font-size: 20px;
+    line-height: 38px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -15,6 +15,16 @@
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
   width: 97.1773%;
 }
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
+    width: 97.63%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
+    width: 89.73%;
+  }
+}
 
 .paginationDotsContainer--prateleira {
   align-items: center;
@@ -36,10 +46,21 @@
   margin-left: 8px;
   margin-bottom: 32px;
 }
+@media screen and (max-width: 768px) {
+  .slide--prateleira {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+}
 
 .sliderArrows--prateleira {
   margin: 14px;
 }
+@media screen and (max-width: 1024px) {
+  .sliderArrows--prateleira {
+    margin: 28px;
+  }
+}
 
 .sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
   max-width: unset !important;

styles/css/vtex.store-components.css

@@ -47,6 +47,14 @@
   width: 100%;
 }
 
+.productImagesGallerySlide--images-container {
+  width: 100% !important;
+}
+
+/*
+.swiper-slide-active {
+  width: 100%;
+}*/
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
   height: 664px;
@@ -76,10 +84,10 @@
   margin-left: -5px;
 }
 
-.skuSelectorSubcontainer--tamanho .skuSelectorName {
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
   font-size: 0;
 }
-.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
   content: "OUTROS TAMANHOS";
   font-style: normal;
   font-weight: 400;
@@ -167,10 +175,20 @@
   align-items: end;
   margin-top: 16px;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer {
+    margin-bottom: 24px;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) {
   position: relative;
   padding: 0;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    width: 100%;
+  }
+}
 .shippingContainer :global(.vtex-input__error) {
   position: absolute;
   margin-top: 2px;
@@ -195,6 +213,11 @@
 .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) {
   width: 231px;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) {
+    width: 100%;
+  }
+}
 .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators)::placeholder {
   font-weight: 400;
   font-size: 12px;
@@ -212,6 +235,12 @@
   align-items: center;
   text-decoration-line: underline;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    top: 76px;
+    right: -50px;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000000;
 }
@@ -264,14 +293,14 @@
   padding: 0;
 }
 .shippingTableHead .shippingTableHeadDeliveryName {
-  min-width: 110px;
+  width: 110px;
 }
 .shippingTableHead .shippingTableHeadDeliveryEstimate {
   order: 3;
 }
 .shippingTableHead .shippingTableHeadDeliveryPrice {
   display: flex;
-  min-width: 110px;
+  width: 110px;
   font-size: 0;
 }
 .shippingTableHead .shippingTableHeadDeliveryPrice::after {
@@ -294,10 +323,10 @@
   padding: 15px 4px 0 0;
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
-  min-width: 110px;
+  width: 110px;
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
-  min-width: 110px;
+  width: 110px;
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
   order: 3;
@@ -309,10 +338,21 @@
   flex-direction: column;
   width: 49.82%;
 }
+@media screen and (max-width: 1024px) {
+  .productDescriptionContainer--descricao {
+    width: 100%;
+  }
+}
 
 .container--descricao {
   margin: 0;
 }
+@media screen and (max-width: 1024px) {
+  .container--descricao {
+    border-bottom: 1px solid #bfbfbf;
+    padding-bottom: 16px;
+  }
+}
 
 .productDescriptionTitle--descricao {
   font-weight: 400;
@@ -321,6 +361,11 @@
   color: #575757;
   margin-bottom: 8px;
 }
+@media screen and (max-width: 1024px) {
+  .productDescriptionTitle--descricao {
+    font-size: 20px;
+  }
+}
 
 .content--descricao {
   font-weight: 400;
@@ -328,6 +373,12 @@
   line-height: 22px;
   color: #929292;
 }
+@media screen and (max-width: 1024px) {
+  .content--descricao {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 
 .subscriberContainer {
   position: relative;
@@ -424,16 +475,29 @@
   background-color: #000000;
   border-bottom: 1px solid #fff;
 }
+@media screen and (max-width: 1024px) {
+  .newsletter--newsletter {
+    padding: 64px 16px 32px 16px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .newsletter--newsletter {
+    margin-top: 32px;
+  }
+}
 
 .container--newsletter {
-  /*width: 53.75%;*/
+  width: 53.75%;
-  width: 774px;
   color: #fff;
   max-width: unset;
 }
+@media screen and (max-width: 1024px) {
+  .container--newsletter {
+    width: 100%;
+  }
+}
 
 .form--newsletter {
-  position: relative;
   max-width: unset;
 }
 .form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
@@ -447,40 +511,69 @@
   padding-bottom: 4px;
   align-items: flex-end;
 }
+@media screen and (max-width: 1024px) {
+  .form--newsletter :global(.vtex-input-prefix__group) {
+    padding-left: 18px;
+    padding-bottom: 12px;
+  }
+}
 .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) {
   font-weight: 400;
   font-size: 18px;
   line-height: 25px;
   color: #929292;
 }
+@media screen and (max-width: 1024px) {
+  .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
 .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
   font-weight: 400;
   font-size: 18px;
   line-height: 25px;
   color: #929292;
 }
+@media screen and (max-width: 1024px) {
+  .form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
 
 .label--newsletter {
   font-weight: 400;
   font-size: 24px;
   line-height: 38px;
   color: #fff;
+  display: flex;
+  flex-direction: column;
 }
 .label--newsletter::after {
   content: "Receba ofertas e novidades por e-mail";
-  position: absolute;
+  margin-top: 16px;
-  right: 234px;
-  top: 50px;
   font-weight: 400;
   font-size: 18px;
   line-height: 25px;
   color: #929292;
 }
+@media screen and (max-width: 1024px) {
+  .label--newsletter::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
 
 .inputGroup--newsletter {
-  margin-top: 40px;
+  margin-top: 16px;
   padding: 0;
 }
+@media screen and (max-width: 768px) {
+  .inputGroup--newsletter {
+    display: flex;
+  }
+}
 
 .buttonContainer--newsletter {
   margin: 0;

styles/css/vtex.tab-layout.css

@@ -19,6 +19,18 @@
   justify-content: space-around;
   align-items: end;
 }
+@media screen and (max-width: 1024px) {
+  .listContainer {
+    margin-top: 16px;
+    padding-bottom: 8px;
+    padding-top: 5px;
+    border-bottom: 1px solid #b9b9b9;
+    border-top: 1px solid #b9b9b9;
+    flex-direction: column;
+    align-items: initial;
+    margin-bottom: 16px;
+  }
+}
 
 .listItem {
   background-color: transparent;
@@ -47,10 +59,25 @@
 .listItemActive {
   border-bottom: 2px solid #000000;
 }
+.listItemActive :global(.vtex-button__label) {
+  color: #000000;
+  margin: 0;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .listItemActive {
+    border: none;
+  }
+}
 
 .listItemActive--descricao {
   border-bottom: 2px solid #000000;
 }
+@media screen and (max-width: 1024px) {
+  .listItemActive--descricao {
+    border: none;
+  }
+}
 .listItemActive--descricao :global(.vtex-button) {
   border: none;
   border-radius: 0%;

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

@@ -1,6 +1,9 @@
 /*NOME PRODUTO*/
 .flexRowContent--name {
   text-align: end;
+  @media screen and (max-width: 1024px) {
+    text-align: left;
+  }
 }
 
 .flexRowContent--preco {
@@ -12,7 +15,14 @@
   margin: 0;
 }
 
-.flexRow--containerteste {
+.flexRow--container-produto {
   padding-left: 40px;
   padding-right: 40px;
 }
+
+.flexRowContent--container-produto {
+  gap: 32px;
+  @media screen and (max-width: 1024px) {
+    display: block;
+  }
+}

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

@@ -25,6 +25,10 @@
   line-height: 19px;
   color: $color-gray11;
   margin-bottom: 8px;
+  @media screen and (max-width: 1024px) {
+    font-size: 12px;
+    line-height: 16px;
+  }
 
   :global(.vtex-product-price-1-x-currencyCode--summary) {
     &::before {
@@ -45,4 +49,8 @@
   font-size: 24px;
   line-height: 33px;
   color: $color-black-100;
+  @media screen and (max-width: 1024px) {
+    font-size: 18px;
+    line-height: 25px;
+  }
 }

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

@@ -2,13 +2,17 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
-  min-height: 66px;
+  /*min-height: 66px;*/
 
   .productBrand {
     font-weight: 400;
     font-size: 18px;
     line-height: 25px;
     color: $color-black-100;
+    @media screen and (max-width: 1024px) {
+      font-size: 14px;
+      line-height: 19px;
+    }
   }
 }
 

styles/sass/pages/product/vtex.rich-text.scss

@@ -8,5 +8,9 @@
     font-size: 24px;
     line-height: 38px;
     color: $color-gray8;
+    @media screen and (max-width: 768px) {
+      font-size: 20px;
+      line-height: 38px;
+    }
   }
 }

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

@@ -5,6 +5,12 @@
 
   .sliderTrackContainer--prateleira {
     width: 97.1773%;
+    @media screen and (max-width: 1024px) {
+      width: 97.63%;
+    }
+    @media screen and (max-width: 768px) {
+      width: 89.73%;
+    }
   }
 }
 
@@ -32,10 +38,19 @@
   margin-right: 8px;
   margin-left: 8px;
   margin-bottom: 32px;
+
+  @media screen and (max-width: 768px) {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
 }
 
 .sliderArrows--prateleira {
   margin: 14px;
+
+  @media screen and (max-width: 1024px) {
+    margin: 28px;
+  }
 }
 
 .sliderLayoutContainer {

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

@@ -37,6 +37,13 @@
 .productImagesGallerySlide {
   width: 100%;
 }
+.productImagesGallerySlide--images-container {
+  width: 100% !important;
+}
+/*
+.swiper-slide-active {
+  width: 100%;
+}*/
 
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
@@ -71,6 +78,8 @@
 }
 
 .skuSelectorSubcontainer--tamanho {
+  .skuSelectorNameContainer {
+    .skuSelectorTextContainer {
       .skuSelectorName {
         font-size: 0;
 
@@ -84,6 +93,8 @@
         }
       }
     }
+  }
+}
 
 .skuSelectorItemTextValue--skus {
   font-weight: 400;
@@ -184,10 +195,16 @@
   display: flex;
   align-items: end;
   margin-top: 16px;
+  @media screen and (max-width: 768px) {
+    margin-bottom: 24px;
+  }
 
   :global(.vtex-address-form__postalCode) {
     position: relative;
     padding: 0;
+    @media screen and (max-width: 768px) {
+      width: 100%;
+    }
   }
 
   :global(.vtex-input__error) {
@@ -217,6 +234,9 @@
 
     :global(.vtex-address-form-4-x-hideDecorators) {
       width: 231px;
+      @media screen and (max-width: 768px) {
+        width: 100%;
+      }
 
       &::placeholder {
         font-weight: 400;
@@ -237,6 +257,10 @@
     display: flex;
     align-items: center;
     text-decoration-line: underline;
+    @media screen and (max-width: 768px) {
+      top: 76px;
+      right: -50px;
+    }
 
     :last-child {
       color: $color-black-100;
@@ -300,7 +324,7 @@
   }
 
   .shippingTableHeadDeliveryName {
-    min-width: 110px;
+    width: 110px;
   }
 
   .shippingTableHeadDeliveryEstimate {
@@ -309,7 +333,7 @@
 
   .shippingTableHeadDeliveryPrice {
     display: flex;
-    min-width: 110px;
+    width: 110px;
     font-size: 0;
     &::after {
       content: "FRETE";
@@ -336,11 +360,11 @@
     }
 
     .shippingTableCellDeliveryName {
-      min-width: 110px;
+      width: 110px;
     }
 
     .shippingTableCellDeliveryPrice {
-      min-width: 110px;
+      width: 110px;
     }
 
     .shippingTableCellDeliveryEstimate {
@@ -356,10 +380,18 @@
   justify-content: left;
   flex-direction: column;
   width: 49.82%;
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
 }
 
 .container--descricao {
   margin: 0;
+  @media screen and (max-width: 1024px) {
+    border-bottom: 1px solid $color-gray9;
+    padding-bottom: 16px;
+  }
 }
 .productDescriptionTitle--descricao {
   font-weight: 400;
@@ -367,12 +399,19 @@
   line-height: 32px;
   color: $color-gray8;
   margin-bottom: 8px;
+  @media screen and (max-width: 1024px) {
+    font-size: 20px;
+  }
 }
 .content--descricao {
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: $color-gray6;
+  @media screen and (max-width: 1024px) {
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 
 //PRODUTO INDISPONIVEL
@@ -483,16 +522,23 @@
   padding-bottom: 16px;
   background-color: $color-black-100;
   border-bottom: 1px solid $color-white;
+  @media screen and (max-width: 1024px) {
+    padding: 64px 16px 32px 16px;
+  }
+  @media screen and (max-width: 768px) {
+    margin-top: 32px;
+  }
 }
 .container--newsletter {
-  /*width: 53.75%;*/
+  width: 53.75%;
-  width: 774px;
   color: $color-white;
   max-width: unset;
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
 }
 
 .form--newsletter {
-  position: relative;
   max-width: unset;
 
   :global(.vtex-styleguide-9-x-noAppearance) {
@@ -506,18 +552,30 @@
     border-radius: 0%;
     padding-bottom: 4px;
     align-items: flex-end;
+    @media screen and (max-width: 1024px) {
+      padding-left: 18px;
+      padding-bottom: 12px;
+    }
 
     :global(.vtex-styleguide-9-x-hideDecorators) {
       font-weight: 400;
       font-size: 18px;
       line-height: 25px;
       color: $color-gray6;
+      @media screen and (max-width: 1024px) {
+        font-size: 12px;
+        line-height: 16px;
+      }
 
       &::placeholder {
         font-weight: 400;
         font-size: 18px;
         line-height: 25px;
         color: $color-gray6;
+        @media screen and (max-width: 1024px) {
+          font-size: 12px;
+          line-height: 16px;
+        }
       }
     }
   }
@@ -528,21 +586,28 @@
   font-size: 24px;
   line-height: 38px;
   color: $color-white;
+  display: flex;
+  flex-direction: column;
   &::after {
     content: "Receba ofertas e novidades por e-mail";
-    position: absolute;
+    margin-top: 16px;
-    right: 234px;
-    top: 50px;
     font-weight: 400;
     font-size: 18px;
     line-height: 25px;
     color: $color-gray6;
+    @media screen and (max-width: 1024px) {
+      font-size: 16px;
+      line-height: 22px;
+    }
   }
 }
 
 .inputGroup--newsletter {
-  margin-top: 40px;
+  margin-top: 16px;
   padding: 0;
+  @media screen and (max-width: 768px) {
+    display: flex;
+  }
 }
 
 .buttonContainer--newsletter {

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

@@ -6,10 +6,20 @@
 .listContainer {
   border-bottom: 1px solid $color-gray9;
   margin-bottom: 32px;
-
   display: flex;
   justify-content: space-around;
   align-items: end;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 16px;
+    padding-bottom: 8px;
+    padding-top: 5px;
+    border-bottom: 1px solid $color-gray12;
+    border-top: 1px solid $color-gray12;
+    flex-direction: column;
+    align-items: initial;
+    margin-bottom: 16px;
+  }
 }
 
 .listItem {
@@ -41,10 +51,21 @@
 
 .listItemActive {
   border-bottom: 2px solid $color-black-100;
+  :global(.vtex-button__label) {
+    color: $color-black-100;
+    margin: 0;
+    padding: 0;
+  }
+  @media screen and (max-width: 1024px) {
+    border: none;
+  }
 }
 
 .listItemActive--descricao {
   border-bottom: 2px solid $color-black-100;
+  @media screen and (max-width: 1024px) {
+    border: none;
+  }
   :global(.vtex-button) {
     border: none;
     border-radius: 0%;

styles/sass/utils/_vars.scss

@@ -15,6 +15,7 @@ $color-gray8: #575757;
 $color-gray9: #bfbfbf;
 $color-gray10: #868686;
 $color-gray11: #bababa;
+$color-gray12: #b9b9b9;
 
 $color-blue: #4267b2;