(fix) flex direction column por flex direction colunm reverse

react/components/Html/styles.css

@@ -1,7 +1,7 @@
 [class*="html--quantity-button-buy"] {
   display: flex;
   gap: 10px;
- 
+
 
 
 }

store/blocks/pdp/product.jsonc

@@ -274,7 +274,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "blockClass":"sku"
     }
   },
 

styles/css/vtex.flex-layout.css

@@ -21,6 +21,7 @@
   width: 100%;
   height: 49px;
   margin: 0;
+  margin-left: 10px;
 }
 .flexRow--size-buy-button .flexRowContent--size-buy-button {
   height: 49px;

styles/css/vtex.store-components.css

@@ -31,10 +31,9 @@
 
 .skuSelectorContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor {
-  order: 2;
   margin-bottom: 16px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
@@ -84,7 +83,6 @@
   border-radius: 30px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
-  color: rgba(185, 185, 185, 0.6);
   padding: 0;
   margin: auto;
 }
@@ -101,11 +99,11 @@
   height: 17px;
   top: 11px;
 }
-.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
+.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue {
   font-size: 14px;
   line-height: 19px;
   font-weight: 400;
-  color: #000000;
+  color: #000000 !important;
   font-family: "Open Sans", sans-serif;
 }
 

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

@@ -18,6 +18,7 @@
   width: 100%;
 height: 49px;
 margin: 0;
+margin-left: 10px;
   .flexRowContent--size-buy-button {
     height: 49px;
     width: 100%;

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

@@ -29,13 +29,13 @@
 
 .skuSelectorContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
 
 
   .skuSelectorSubcontainer--cor {
 
 
-    order: 2;
+    // order: 2;
     margin-bottom: 16px;
 
 
@@ -120,7 +120,7 @@
 
     .skuSelectorItemTextValue {
 
-      color:rgba(185, 185, 185, 0.6);
+
       padding: 0;
       margin: auto;
     }
@@ -145,11 +145,12 @@
 
   .skuSelectorItem--skus--selected {
 
-    .skuSelectorItemTextValue--skus {
+    .skuSelectorItemTextValue {
+
       font-size: 14px;
       line-height: 19px;
       font-weight: 400;
-      color: $color-black2;
+      color: $color-black2 !important;
       font-family: $font-open;