Merge pull request 'fix: correção geral de responsividade e elementos da pagina de produto' (#8) from bug-fix/pagina-product into master

Reviewed-on: #8

react/components/Html/styles.css

@@ -1,7 +1,6 @@
 /*
   CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
 */
-
 [class*="html--buy-button"] :global(.vtex-button) {
     min-height: 49px;
     padding: 12px 64px;
@@ -33,11 +32,6 @@
   }
 }
 
-[class*="html--product-quantity"] {
-  width: 128px;
-  margin-right: 10px;
-}
-
 /*
   DESCRIÇÃO DO PRODUTO SELECIONADO
 */

react/components/PixDiscount/styles.module.css

@@ -1,12 +1,13 @@
 .wrapper {
   display: flex;
+  align-items: center;
   margin: 8px 0 16px 0;
   height: 39px;
 }
 .container-img{
-  margin-right: 26px;
+  width: 66px;
-    display: flex;
+    margin-right: 26px;
-    align-items: center;
+    height: 24px;
 }
 .figure-pix{
   margin: 0;

store/blocks/pdp/product.jsonc

@@ -412,7 +412,7 @@
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "blockClass": "product-name"
     },
     "children": ["vtex.store-components:product-name"]
   },

styles/configs/font-faces.scss

@@ -1,4 +1,4 @@
 @font-face {
   font-family: "Open Sans", "sans-serif";
-  src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
+  src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");
 }

styles/css/vtex.breadcrumb.css

@@ -9,7 +9,16 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding: 16px 40px;
+  padding: 0;
+  margin: 0 40px 16px 40px;
+  height: 20.12px;
+  display: flex;
+  align-items: center;
+}
+@media only screen and (min-width: 1921px) {
+  .container {
+    margin: 0 360px 16px 360px;
+  }
 }
 .container .homeLink {
   display: none;

styles/css/vtex.flex-layout.css

@@ -14,42 +14,63 @@
 }
 
 /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
+.flexRow--main {
+  padding: 0 40px;
+}
+@media only screen and (min-width: 1921px) {
+  .flexRow--main {
+    padding: 0 360px;
+  }
+}
 @media only screen and (max-width: 1024px) {
-  .flexRowContent--main {
+  .flexRow--main .flexRowContent--main {
     display: block;
   }
 }
 @media only screen and (max-width: 1024px) {
-  .flexRowContent--main .stretchChildrenWidth {
+  .flexRow--main .flexRowContent--main .stretchChildrenWidth {
     width: 100% !important;
   }
 }
-.flexRowContent--main .stretchChildrenWidth .flexCol--stack {
-  padding-left: 40px;
-}
 @media only screen and (max-width: 1024px) {
-  .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
+  .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
-    padding: 0 40px;
     width: 100%;
   }
 }
-.flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
+.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack {
-  padding-right: 40px;
+  margin-right: 16px;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack {
+    margin: 0;
+  }
+}
+.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
   margin-left: 16px;
 }
 @media only screen and (max-width: 1024px) {
-  .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
+  .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
-    padding: 0 40px;
+    margin: 0;
-    margin-left: 0;
   }
 }
 
+.flexRow--product-name {
+  width: 100%;
+  min-height: 34px;
+  margin-bottom: 8px;
+}
+
 /* ASSINANTE DE PRODUTO INDISPONIVEL */
 .flexRowContent--product-availability {
   padding: 0;
   margin: 0;
   padding: 0 40px;
 }
+@media only screen and (min-width: 1921px) {
+  .flexRowContent--product-availability {
+    padding: 0 360px;
+  }
+}
 @media only screen and (max-width: 1024px) {
   .flexRowContent--product-availability {
     display: block;
@@ -103,7 +124,12 @@
 }
 @media only screen and (max-width: 1024px) {
   .flexRow--newsletter-container {
-    margin-top: 34px;
+    margin-top: 64px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .flexRow--newsletter-container {
+    margin-top: 32px;
   }
 }
 .flexRow--newsletter-container .flexRowContent--newsletter-container {

styles/css/vtex.product-quantity.css

@@ -10,7 +10,7 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  width: 100%;
+  width: 128px;
   margin: 0 10px 0 0;
 }
 @media only screen and (max-width: 768px) {
@@ -21,9 +21,6 @@
 .quantitySelectorContainer .quantitySelectorTitle {
   display: none;
 }
-.quantitySelectorContainer .quantitySelectorStepper {
-  height: 49px;
-}
 .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
   width: 31.6px;
   height: 49px;
@@ -39,20 +36,33 @@
   border-bottom: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
   background: #fff;
-  font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: #000000;
 }
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
+  font-weight: 400;
+  width: 10px;
+  height: 12px;
+  align-items: center;
+  display: flex;
+  justify-content: space-evenly;
+}
 .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
   height: 49px;
-  width: 10px;
   border-left: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
   background: #fff;
-  font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: #000000;
 }
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
+  font-weight: 400;
+  width: 10px;
+  height: 12px;
+  align-items: center;
+  display: flex;
+  justify-content: space-evenly;
+}

styles/css/vtex.product-summary.css

@@ -32,7 +32,7 @@
 }
 @media only screen and (max-width: 768px) {
   .containerNormal .element .imageContainer--image-prateleira {
-    height: 124.81px;
+    height: 124.82px;
   }
 }
 .containerNormal .element .imageContainer--image-prateleira .imageNormal {

styles/css/vtex.slider-layout.css

@@ -11,6 +11,12 @@
   padding-left: 40px !important;
   padding-right: 40px !important;
 }
+@media only screen and (min-width: 1921px) {
+  .sliderLayoutContainer--prateleira {
+    padding-left: 360px !important;
+    padding-right: 360px !important;
+  }
+}
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
   padding: 0 19.2px 49px 19.2px;
 }
@@ -21,7 +27,7 @@
 }
 @media only screen and (max-width: 768px) {
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-    padding: 0 14.7px 33px 14.7px;
+    padding: 0 14.7px 32px 14.7px;
   }
 }
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
@@ -35,6 +41,7 @@
 @media only screen and (max-width: 768px) {
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
     margin: 0 4px;
+    width: 7.1111% !important;
   }
 }
 @media only screen and (max-width: 768px) {
@@ -60,10 +67,17 @@
   visibility: hidden;
   margin: 0 0 0 40px;
   padding: 0;
-  height: 29.6px;
+  height: 29.61px;
   width: 11.21px;
 }
+@media only screen and (min-width: 1921px) {
+  .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
+    margin: 0 0 0 360px;
+  }
+}
 .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before {
+  width: 11.21px;
+  height: 29.61px;
   visibility: visible;
   content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
 }
@@ -74,6 +88,11 @@
   height: 29.6px;
   width: 11.21px;
 }
+@media only screen and (min-width: 1921px) {
+  .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
+    margin: 0 360px 0 0;
+  }
+}
 .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after {
   visibility: visible;
   content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");

styles/css/vtex.stack-layout.css

@@ -1,6 +1,6 @@
 .stackItem--product {
   width: 100%;
-  min-height: 257px
+  min-height: 100%
 }
 
 .stackItem--quickview {

styles/css/vtex.store-components.css

@@ -21,25 +21,18 @@
     margin: 0;
   }
 }
-.productImagesGallerySlide .productImage {
+.productImagesGallerySlide .productImageTag--main {
-  margin-right: 16px;
-}
-@media only screen and (max-width: 1024px) {
-  .productImagesGallerySlide .productImage {
-    margin: 0;
-  }
-}
-.productImagesGallerySlide .productImage .productImageTag--main {
   max-height: 100% !important;
 }
 
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
-  margin: 16px 0;
+  margin: 16px 16px 0 0;
 }
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
   .carouselGaleryThumbs {
     display: block;
+    margin: 16px 0 32px 0;
   }
 }
 .carouselGaleryThumbs .thumbImg {
@@ -58,7 +51,7 @@
 
 /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
 .productNameContainer--quickview {
-  text-align: end;
+  text-align: right;
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
@@ -117,26 +110,30 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
   border: 2px solid #000000;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross {
+  margin: 6px;
+  width: 36px;
+  background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%);
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho {
   margin-bottom: 10px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
   content: "OUTROS TAMANHOS:";
-  font-family: "Open Sans", sans-serif;
   font-weight: 400;
   line-height: 19px;
   font-size: 14px;
   color: #929292;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
-  margin: 8px 0 0 0;
+  min-height: 40px;
-  height: 40px;
+  margin: 0;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
   margin: 0;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
-  margin: 0 16px 0 0;
+  margin: 8px 16px 0 0;
   width: 40px;
   height: 40px;
 }
@@ -173,6 +170,11 @@
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
   color: #000000 !important;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross {
+  margin: 6px;
+  width: 30px;
+  background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%);
+}
 .skuSelectorContainer .skuSelectorTextContainer {
   display: none;
 }
@@ -316,6 +318,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   .shippingContainer {
     display: block;
     max-width: 296px;
+    width: 100%;
   }
 }
 .shippingContainer :global(.vtex-address-form__postalCode) {
@@ -455,14 +458,18 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   flex-direction: row;
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
-  margin-right: 39px;
+  min-width: 80px;
+  height: 19px;
+  margin-right: 32px;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #202020;
+  text-align: start;
 }
 @media only screen and (max-width: 768px) {
   .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+    min-width: 69px;
     margin-right: 32px;
   }
 }
@@ -476,7 +483,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
   font-size: 0;
-  margin-right: 30px;
+  min-width: 50px;
+  margin-right: 32px;
 }
 @media only screen and (max-width: 768px) {
   .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
@@ -495,8 +503,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   flex-direction: row;
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
-  width: 82px;
+  min-width: 82px;
-  margin-right: 28px;
+  text-transform: capitalize;
+  margin-right: 32px;
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
@@ -516,8 +525,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   color: #afafaf;
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
-  width: 50px;
+  min-width: 50px;
-  margin-right: 28px;
+  margin-right: 32px;
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;

styles/css/vtex.tab-layout.css

@@ -11,6 +11,11 @@
   padding: 0 40px;
   margin: 16px 0;
 }
+@media only screen and (min-width: 1921px) {
+  .container--description {
+    padding: 0 360px;
+  }
+}
 .container--description .listContainer {
   display: flex;
   padding: 0 64px;
@@ -64,6 +69,11 @@
   text-transform: capitalize;
   border-bottom: 2px solid transparent;
 }
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    border-bottom: none;
+  }
+}
 @media only screen and (min-width: 1921px) {
   .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
     font-size: 24px;

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,5 +1,12 @@
 .container {
-  padding: 16px 40px;
+  padding: 0;
+  margin: 0 40px 16px 40px;
+  height: 20.12px;
+  display: flex;
+  align-items: center;
+  @include mq(xl, min) {
+    margin: 0 360px 16px 360px;
+  }
 
   .homeLink {
     display: none;

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

@@ -4,37 +4,54 @@
 }
 
 /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
-.flexRowContent--main {
+.flexRow--main {
-  @include mq(md, max) {
+  padding: 0 40px;
-    display: block;
+  @include mq(xl, min) {
+    padding: 0 360px;
   }
-  .stretchChildrenWidth {
+  .flexRowContent--main {
     @include mq(md, max) {
-      width: 100% !important;
+      display: block;
     }
-    .flexCol--stack {
+    .stretchChildrenWidth {
-      padding-left: 40px;
       @include mq(md, max) {
-        padding: 0 40px;
+        width: 100% !important;
-        width: 100%;
       }
-    }
+      .flexCol--stack {
-    .flexCol--right-col {
+        @include mq(md, max) {
-      padding-right: 40px;
+          width: 100%;
-      margin-left: 16px;
+        }
-      @include mq(md, max) {
+        .flexColChild--stack {
-        padding: 0 40px;
+          margin-right: 16px;
-        margin-left: 0;
+          @include mq(md, max) {
+            margin: 0;
+          }
+        }
+      }
+      .flexCol--right-col {
+        margin-left: 16px;
+        @include mq(md, max) {
+          margin: 0;
+        }
       }
     }
   }
 }
 
+.flexRow--product-name {
+  width: 100%;
+  min-height: 34px;
+  margin-bottom: 8px;
+}
+
 /* ASSINANTE DE PRODUTO INDISPONIVEL */
 .flexRowContent--product-availability {
   padding: 0;
   margin: 0;
   padding: 0 40px;
+  @include mq(xl, min) {
+    padding: 0 360px;
+  }
   @include mq(md, max) {
     display: block;
   }
@@ -80,7 +97,10 @@
   background-color: $color-black-padrao;
   margin-top: 64px;
   @include mq(md, max) {
-    margin-top: 34px;
+    margin-top: 64px;
+  }
+  @include mq(sm, max) {
+    margin-top: 32px;
   }
   .flexRowContent--newsletter-container {
     display: flex;

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

@@ -1,7 +1,7 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  width: 100%;
+  width: 128px;
   margin: 0 10px 0 0;
   @include mq(sm, max) {
     margin: 0 0 10px 0;
@@ -10,7 +10,6 @@
     display: none;
   }
   .quantitySelectorStepper {
-    height: 49px;
     :global(.vtex-numeric-stepper__input) {
       width: 31.6px;
       height: 49px;
@@ -26,22 +25,35 @@
       border-bottom: 1px solid #cccccc;
       border-top: 1px solid #cccccc;
       background: $color-white;
-      font-weight: 400;
       font-size: 16px;
       line-height: 22px;
       color: $color-black-padrao;
+      :global(.vtex-numeric-stepper__plus-button__text) {
+        font-weight: 400;
+        width: 10px;
+        height: 12px;
+        align-items: center;
+        display: flex;
+        justify-content: space-evenly;
+      }
     }
     :global(.vtex-numeric-stepper__minus-button) {
       height: 49px;
-      width: 10px;
       border-left: 1px solid #cccccc;
       border-bottom: 1px solid #cccccc;
       border-top: 1px solid #cccccc;
       background: $color-white;
-      font-weight: 400;
       font-size: 16px;
       line-height: 22px;
       color: $color-black-padrao;
+      :global(.vtex-numeric-stepper__minus-button__text) {
+        font-weight: 400;
+        width: 10px;
+        height: 12px;
+        align-items: center;
+        display: flex;
+        justify-content: space-evenly;
+      }
     }
   }
 }

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

@@ -16,7 +16,7 @@
         height: 291.21px;
       }
       @include mq(sm, max) {
-        height: 124.81px;
+        height: 124.82px;
       }
       .imageNormal {
         height: 100%;

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

@@ -1,13 +1,17 @@
 .sliderLayoutContainer--prateleira {
   padding-left: 40px !important;
   padding-right: 40px !important;
+  @include mq(xl, min) {
+    padding-left: 360px !important;
+    padding-right: 360px !important;
+  }
   .sliderTrackContainer--prateleira {
     padding: 0 19.2px 49px 19.2px;
     @include mq(md, max) {
       padding: 0 17.2px 41px 17.2px;
     }
     @include mq(sm, max) {
-      padding: 0 14.7px 33px 14.7px;
+      padding: 0 14.7px 32px 14.7px;
     }
     .slide--prateleira {
       margin: 0 8px;
@@ -16,6 +20,7 @@
       }
       @include mq(sm, max) {
         margin: 0 4px;
+        width: 7.1111% !important;
       }
     }
 
@@ -44,9 +49,14 @@
     visibility: hidden;
     margin: 0 0 0 40px;
     padding: 0;
-    height: 29.6px;
+    height: 29.61px;
     width: 11.21px;
+    @include mq(xl, min) {
+      margin: 0 0 0 360px;
+    }
     &::before {
+      width: 11.21px;
+      height: 29.61px;
       visibility: visible;
       content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
     }
@@ -58,6 +68,9 @@
     padding: 0;
     height: 29.6px;
     width: 11.21px;
+    @include mq(xl, min) {
+      margin: 0 360px 0 0;
+    }
     &::after {
       visibility: visible;
       content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");

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

@@ -10,22 +10,18 @@
   @include mq(md, max) {
     margin: 0;
   }
-  .productImage {
+  .productImageTag--main {
-    margin-right: 16px;
+    max-height: 100% !important;
-    @include mq(md, max) {
-      margin: 0;
-    }
-    .productImageTag--main {
-      max-height: 100% !important;
-    }
   }
 }
 
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
-  margin: 16px 0;
+  margin: 16px 16px 0 0;
-  @include mq(sm, max) {
+
+  @include mq(md, max) {
     display: block;
+    margin: 16px 0 32px 0;
   }
 
   .thumbImg {
@@ -46,7 +42,7 @@
 
 /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
 .productNameContainer--quickview {
-  text-align: end;
+  text-align: right;
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
@@ -101,6 +97,18 @@
           .frameAround--sku-selector {
             border: 2px solid $color-black-padrao;
           }
+          .diagonalCross {
+            margin: 6px;
+            width: 36px;
+            background-image: linear-gradient(
+              to top right,
+              transparent 44%,
+              $color-black-padrao 48%,
+              currentColor 48%,
+              currentColor 0,
+              transparent 0%
+            );
+          }
         }
       }
     }
@@ -111,20 +119,19 @@
     margin-bottom: 10px;
     &::before {
       content: "OUTROS TAMANHOS:";
-      font-family: "Open Sans", sans-serif;
       font-weight: 400;
       line-height: 19px;
       font-size: 14px;
       color: $color-gray-6;
     }
     .skuSelectorNameContainer {
-      margin: 8px 0 0 0;
+      min-height: 40px;
-      height: 40px;
+      margin: 0;
       .skuSelectorOptionsList {
         margin: 0;
 
         .skuSelectorItem--sku-selector {
-          margin: 0 16px 0 0;
+          margin: 8px 16px 0 0;
           width: 40px;
           height: 40px;
           .frameAround--sku-selector {
@@ -164,6 +171,18 @@
           .skuSelectorItemTextValue {
             color: $color-black-padrao !important;
           }
+          .diagonalCross {
+            margin: 6px;
+            width: 30px;
+            background-image: linear-gradient(
+              to top right,
+              transparent 44%,
+              $color-black-padrao 48%,
+              currentColor 48%,
+              currentColor 0,
+              transparent 0%
+            );
+          }
         }
       }
     }
@@ -317,6 +336,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   @include mq(sm, max) {
     display: block;
     max-width: 296px;
+    width: 100%;
   }
   :global(.vtex-address-form__postalCode) {
     display: flex;
@@ -445,12 +465,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
       display: flex;
       flex-direction: row;
       .shippingTableHeadDeliveryName {
-        margin-right: 39px;
+        min-width: 80px;
+        height: 19px;
+        margin-right: 32px;
         font-weight: 400;
         font-size: 14px;
         line-height: 19px;
         color: $color-black2;
+        text-align: start;
         @include mq(sm, max) {
+          min-width: 69px;
           margin-right: 32px;
         }
       }
@@ -465,7 +489,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 
       .shippingTableHeadDeliveryPrice {
         font-size: 0;
-        margin-right: 30px;
+        min-width: 50px;
+        margin-right: 32px;
         @include mq(sm, max) {
           margin-right: 32px;
         }
@@ -485,8 +510,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
       display: flex;
       flex-direction: row;
       .shippingTableCellDeliveryName {
-        width: 82px;
+        min-width: 82px;
-        margin-right: 28px;
+        text-transform: capitalize;
+        margin-right: 32px;
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
@@ -506,8 +532,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
       }
 
       .shippingTableCellDeliveryPrice {
-        width: 50px;
+        min-width: 50px;
-        margin-right: 28px;
+        margin-right: 32px;
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;

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

@@ -1,6 +1,9 @@
 .container--description {
   padding: 0 40px;
   margin: 16px 0;
+  @include mq(xl, min) {
+    padding: 0 360px;
+  }
   .listContainer {
     display: flex;
     padding: 0 64px;
@@ -44,6 +47,9 @@
           line-height: 38px;
           text-transform: capitalize;
           border-bottom: 2px solid transparent;
+          @include mq(md, max) {
+            border-bottom: none;
+          }
           @include mq(xl, min) {
             font-size: 24px;
             line-height: 38px;