refactor: aplica mudanças no código

react/components/Html/styles.css

@@ -20,6 +20,10 @@
   margin-left: 32px;
 }
 
+[class*="html--right-col"] .vtex-store-components-3-x-container {
+  padding: 0;
+}
+
 [class*="html--buy-button"] {
   width: 100%;
 }
@@ -32,6 +36,7 @@
   height: 49px;
   padding-top: 12px;
   padding-bottom: 12px;
+  display: block !important;
 }
 
 [class*="html--product-quantity-cart-button"] {
@@ -63,6 +68,8 @@
   line-height: 22px;
   color: #000000;
   border-radius: 0;
+
+  display: block !important;
 }
 
 [class*="html--shipping-simulator"] button {
@@ -74,6 +81,7 @@
 
   position: absolute;
   left: 228px;
+  display: block !important;
 }
 
 [class*="html--shipping-simulator"] a {
@@ -91,3 +99,8 @@
 [class*="html--info-availability"] .html--sku-selector-m3 {
   margin-top: 80px;
 }
+
+/* Para ocultar o botão embalar para presente */
+[class*="html--right-col"] button {
+  display: none;
+}

styles/css/vtex.product-customizer.css

@@ -0,0 +1,16 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.productAssemblyGroupNameRow {
+  display: none;
+}
+
+.textInputValue {
+  display: none;
+}

styles/css/vtex.store-components.css

@@ -48,6 +48,7 @@
   text-align: right;
 }
 
+/*
 .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -61,7 +62,7 @@
   line-height: 22px;
   color: #929292;
 }
-
+*/
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -73,8 +74,7 @@
 }
 
 .skuSelectorName,
-.skuSelectorNameSeparator,
+.skuSelectorNameSeparator {
-.skuSelectorSelectorImageValue {
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
@@ -82,6 +82,10 @@
   text-transform: uppercase;
 }
 
+.skuSelectorSelectorImageValue {
+  display: none;
+}
+
 .skuSelectorInternalBox {
   width: 40px;
   height: 40px;
@@ -102,6 +106,7 @@
 .skuSelectorItem {
   width: 40px;
   height: 40px;
+  margin: 0;
 }
 
 .skuSelectorItemTextValue {
@@ -125,6 +130,7 @@
 .skuSelectorItem--selected {
   border: 2px solid #000000;
   border-radius: 50%;
+  margin: 0;
 }
 .skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
   color: #000000;
@@ -152,10 +158,40 @@
   bottom: 17.5%;
 }
 
+.skuSelectorTextContainer {
+  margin: 0 0 8px 0;
+}
+
 .skuSelectorSubcontainer {
   margin: 0;
 }
 
+.skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorName::before {
+  content: "OUTROS TAMANHOS:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  margin-bottom: 8px;
+}
+
+.skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorSubcontainer--cor .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorSubcontainer--cor .skuSelectorTextContainer {
+  margin-top: 10px;
+}
+
 .shippingContainer {
   display: flex;
   align-items: flex-end;

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

@@ -0,0 +1,7 @@
+.productAssemblyGroupNameRow {
+  display: none;
+}
+
+.textInputValue {
+  display: none;
+}

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

@@ -37,7 +37,7 @@
 .productNameContainer--quickview{
   text-align: right;
 }
-
+/*
 .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -51,7 +51,7 @@
   line-height: 22px;
   color: #929292;
 }
-
+*/
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -64,8 +64,7 @@
 }
 
 .skuSelectorName,
-.skuSelectorNameSeparator,
+.skuSelectorNameSeparator {
-.skuSelectorSelectorImageValue {
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
@@ -73,6 +72,10 @@
   text-transform: uppercase;
 }
 
+.skuSelectorSelectorImageValue {
+  display: none;
+}
+
 .skuSelectorInternalBox {
   width: 40px;
   height: 40px;
@@ -95,6 +98,7 @@
 .skuSelectorItem {
   width: 40px;
   height: 40px;
+  margin: 0;
 }
 
 .skuSelectorItemTextValue {
@@ -118,6 +122,7 @@
 .skuSelectorItem--selected{
   border: 2px solid #000000;
   border-radius: 50%;
+  margin: 0;
 
   :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
     color: #000000;
@@ -150,10 +155,47 @@
   bottom: 17.5%;
 }
 
+.skuSelectorTextContainer {
+  margin: 0 0 8px 0;
+}
+
 .skuSelectorSubcontainer {
   margin: 0;
 }
 
+.skuSelectorSubcontainer--tamanho {
+  .skuSelectorName {
+    font-size: 0;
+
+    &::before {
+      content: "OUTROS TAMANHOS:";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.skuSelectorSubcontainer--cor {
+  .skuSelectorName {
+    font-size: 0;
+
+    &::before {
+      content: "OUTRAS CORES";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
+  }
+
+  .skuSelectorTextContainer {
+    margin-top: 10px;
+  }
+}
+
 .shippingContainer {
   display: flex;
   align-items: flex-end;