feat: sccs atualizado com novas classes, mais organizado.

store/blocks/pdp/product.jsonc

@@ -122,7 +122,6 @@
       "html#pix",
       // "product-separator",
       "sku-selector",
-      "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -173,7 +172,7 @@
       "marginTop": 4,
       "marginBottom": 7
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {

styles/css/vtex.flex-layout.css

@@ -11,6 +11,11 @@
   padding: 0;
 }
 
+.flexRowContent {
+  margin: 0;
+  padding: 0;
+}
+
 .flexRowContent--identifier {
   display: flex;
   flex-direction: column;

styles/css/vtex.product-quantity.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22");

styles/css/vtex.store-components.css

@@ -7,35 +7,301 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.container {
-  padding: 0 40px;
-}
-
 .productNameContainer {
-  text-align: end;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #292929;
 }
 
-.productDescriptionContainer {
+.productNameContainer--quickview {
-  width: 43.89%;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
 }
 
-.productImagesContainer {
+.skuSelectorContainer {
-  width: 43.89%;
-}
-
-.productImage {
   display: flex;
+  flex-direction: column-reverse;
 }
 
-.produto-carrossel .swiper-wrapper {
+.skuSelectorContainer .frameAround {
-  gap: 16px;
+  border-radius: 50%;
+  border-color: #000;
+  z-index: 2;
 }
 
-.discountInsideContainer {
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+
+.skuSelectorItem {
+  height: 50px;
+  width: 50px;
+}
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+}
+
+.shippingContainer :global(.vtex-button) {
+  background-color: #000;
+  width: 70px;
+  height: 45px;
+  color: #fff;
+  margin-top: 23px;
+  margin-left: -4px;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0px;
+}
+
+.shippingContainer :global(.vtex-input__label)::before {
+  content: "calcular frete:";
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0px;
+}
+
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-size: 14px;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  width: 280px;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  color: #000;
+  position: absolute;
+  right: 32px;
+  top: 25px;
+}
+
+.shareContainer {
   display: none;
 }
 
+.shippingTable {
+  border: none;
+  bottom: 110px;
+  position: relative;
+  font-size: 14px;
+  font-family: "Open Sans", sans-serif;
+  text-transform: uppercase;
+}
+
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTable .shippingTableHead {
+  display: contents;
+}
+
+.shippingTable .shippingTableCell {
+  padding: 7px 0;
+  font-family: "Open Sans", sans-serif;
+  color: #afafaf;
+}
+
+.shippingTable .shippingTableRow {
+  text-align: left;
+}
+
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTable .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHeadDeliveryPrice {
+  font-weight: 400;
+}
+
+.content--imagem-descricao {
+  margin-right: 16px;
+  width: 50%;
+}
+
+.productDescriptionContainer {
+  width: 50%;
+  margin-left: 16px;
+}
+
+.carouselGaleryThumbs {
+  height: 200px;
+}
+
+.carouselGaleryThumbs .productImagesThumb {
+  margin: 0px 10px;
+}
+
+.carouselGaleryThumbs .thumbImg {
+  border-radius: 8px;
+}
+
+.discountInsideContainer,
+.installmentsPrice {
+  display: none;
+}
+
+.sellingPriceLabel {
+  display: none;
+}
+
+.sellingPrice {
+  font-weight: bolder;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.skuSelectorContainer .frameAround {
+  border-radius: 50%;
+  border-color: #000;
+  z-index: 2;
+  margin: 2px;
+}
+
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+
+.skuSelectorContainer .skuSelectorItemTextValue {
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorContainer .diagonalCross {
+  background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+  z-index: 2;
+  width: 32px;
+  height: 33px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+
+.skuSelectorItem {
+  height: 40px;
+  width: 40px;
+  position: relative;
+}
+
+.skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0px;
+}
+
+.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-size: 14px;
+  color: #989898;
+}
+
+.skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0px;
+}
+
+.skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "OUTRAS CORES:";
+  font-size: 14px;
+  color: #B9B9B9;
+}
+
+.productImagesContainer {
+  width: 45%;
+}
+
 .newsletter {
-  color: #FFFFFF;
+  background: #000;
-  background: #000000;
+  color: #fff;
+  margin-top: 50px;
+  border-bottom: 2px solid #929292;
+}
+
+.newsletter .container {
+  margin: auto;
+  padding: 32px;
+  padding-bottom: 16px;
+}
+
+.newsletter .form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.newsletter .label {
+  display: flex;
+  flex-direction: column;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #ffffff;
+}
+
+.newsletter .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: center;
+  color: #929292;
+  margin: 16px;
+}
+
+.newsletter .inputGroup {
+  width: 774px;
+}
+
+.newsletter .inputGroup :global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0;
+}
+
+.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
+  background-color: #000;
+}
+
+.newsletter .inputGroup .buttonContainer {
+  padding: 0;
+}
+
+.newsletter .inputGroup .buttonContainer :global(.vtex-button) {
+  background-color: #000;
+  border: none;
+  border-bottom: 2px solid #fff;
+  border-radius: 0;
+}
+
+.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
+  background-color: #000;
+  border-bottom: 4px solid #fff;
 }

styles/css/vtex.tab-layout.css

@@ -35,6 +35,5 @@
 
 .contentItem {
   display: flex;
-  padding: 0px 40px;
   margin-bottom: 16px;
 }

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

@@ -4,10 +4,14 @@
 }
 
 
+.flexRowContent{
+  margin: 0;
+  padding: 0;
+}
+
 .flexRowContent--identifier{
   display: flex;
   flex-direction: column;
   align-items: end;
 
 }
-

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

@@ -0,0 +1,5 @@
+.quantitySelectorContainer {
+  .quantitySelectorTitle {
+    display: none;
+  }
+}

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

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22");
+

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

@@ -1,36 +1,268 @@
 
-.container {
+.productNameContainer {
-  padding: 0 40px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #292929;
 }
 
-.productNameContainer{
+.productNameContainer--quickview {
-  text-align: end;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
 }
 
-.productDescriptionContainer{
+.skuSelectorContainer {
-  width: 43.89%;
-}
-
-.productImagesContainer{
-  width: 43.89%;
-}
-
-.productImage{
   display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer .frameAround {
+  border-radius: 50%;
+  border-color: #000;
+  z-index: 2;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
 }
 
-.produto-carrossel{
+.skuSelectorItem {
-  .swiper-wrapper{
+  height: 50px;
-    gap: 16px
+  width: 50px;
-  }
 }
 
+.shippingContainer {
+  display: flex;
+  position: relative;
+}
+.shippingContainer :global(.vtex-button) {
+  background-color: #000;
+  width: 70px;
+  height: 45px;
+  color: #fff;
+  margin-top: 23px;
+  margin-left: -4px;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0px;
+}
 
-.discountInsideContainer{
+.shippingContainer :global(.vtex-input__label)::before {
+  content: "calcular frete:";
+  font-size: 14px;
+  text-transform: uppercase;
+}
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0px;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+  content: "OK";
+  font-size: 14px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  width: 280px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  color: #000;
+  position: absolute;
+  right: 32px;
+  top: 25px;
+}
+
+.shareContainer {
   display: none;
 }
 
-.newsletter{
+.shippingTable {
-    color: #FFFFFF;
+  border: none;
-    background: #000000;
+  bottom: 110px;
+  position: relative;
+  font-size: 14px;
+  font-family: "Open Sans", sans-serif;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableHead {
+  display: contents;
+}
+.shippingTable .shippingTableCell {
+  padding: 7px 0;
+  font-family: "Open Sans", sans-serif;
+  color: #afafaf;
+}
+.shippingTable .shippingTableRow {
+  text-align: left;
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHeadDeliveryPrice {
+  font-weight: 400;
+}
+
+.content--imagem-descricao {
+  margin-right: 16px;
+  width: 50%;
+}
+
+.productDescriptionContainer {
+  width: 50%;
+  margin-left: 16px;
+}
+
+.carouselGaleryThumbs {
+  height: 200px;
+}
+.carouselGaleryThumbs .productImagesThumb {
+  margin: 0px 10px;
+}
+.carouselGaleryThumbs .thumbImg {
+  border-radius: 8px;
+}
+
+.discountInsideContainer,
+.installmentsPrice {
+  display: none;
+}
+
+.sellingPriceLabel {
+  display: none;
+}
+
+.sellingPrice {
+  font-weight: bolder;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer .frameAround {
+  border-radius: 50%;
+  border-color: #000;
+  z-index: 2;
+  margin: 2px;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorItemTextValue {
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .diagonalCross {
+  background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+  z-index: 2;
+  width: 32px;
+  height: 33px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+
+.skuSelectorItem {
+  height: 40px;
+  width: 40px;
+  position: relative;
+}
+
+.skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-size: 14px;
+  color: #989898;
+}
+
+.skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0px;
+}
+.skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "OUTRAS CORES:";
+  font-size: 14px;
+  color: #B9B9B9;
+}
+
+.productImagesContainer{
+  width: 45%;
+}
+
+
+.newsletter {
+  background: #000;
+  color: #fff;
+  margin-top: 50px;
+  border-bottom: 2px solid #929292;
+}
+.newsletter .container {
+  margin: auto;
+  padding: 32px;
+  padding-bottom: 16px;
+}
+.newsletter .form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.newsletter .label {
+  display: flex;
+  flex-direction: column;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #ffffff;
+}
+.newsletter .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: center;
+  color: #929292;
+  margin: 16px;
+}
+.newsletter .inputGroup {
+  width: 774px;
+}
+.newsletter .inputGroup :global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0;
+}
+.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
+  background-color: #000;
+}
+.newsletter .inputGroup .buttonContainer {
+  padding: 0;
+}
+.newsletter .inputGroup .buttonContainer :global(.vtex-button) {
+  background-color: #000;
+  border: none;
+  border-bottom: 2px solid #fff;
+  border-radius: 0;
+}
+.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
+  background-color: #000;
+  border-bottom: 4px solid #fff;
 }

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

@@ -19,17 +19,15 @@
   }
 }
 
-.listItemActive {
+.listItemActive :global(.vtex-button) {
-  :global(.vtex-button) {
     border: 0;
     border-bottom: 1px solid #000000 !important;
 
   }
-}
+
 
 .contentItem{
   display: flex;
-  padding: 0px 40px;
   margin-bottom: 16px;
 }