feat:adicionando estilos

store/blocks/pdp/product.jsonc

@@ -292,6 +292,7 @@
 
 "html#box-buy" : {
   "props":{
+    "blockClass": "m3-boxBuy"
   },
   "children":[ "html#product-quantity", "html#add-to-cart-button"]
 },

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,22 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
+/*font*/
+/*colors*/
+/* Grid breakpoints */
+.m3-buyButton :global(.vtex-button) {
+  background-color: black;
+  height: 49px;
+}
+
+.m3-boxBuy {
+  display: flex;
+  flex-direction: row;
+  background-color: green;
+}

styles/css/vtex.flex-layout.css

@@ -44,4 +44,8 @@
 .flexRow--m3-buyButton :global(.vtex-button) {
   background-color: black;
   height: 49px;
+}
+
+.-html--m3-boxBuy {
+  background-color: red;
 }

styles/css/vtex.store-components.css

@@ -76,6 +76,11 @@
   height: auto !important;
 }
 
+@media (min-width: 375px) and (max-width: 1444px) {
+  .stack {
+    width: 40%;
+  }
+}
 .shippingTableHead {
   display: grid;
   margin-bottom: 15px;

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,30 @@
+// .flexRow--m3-buyButton {
+//   width: 100%;
+//   .buttonText {
+//     font-family: 'Open Sans';
+//     font-style: normal;
+//     font-weight: 400;
+//     font-size: 18px;
+//     line-height: 25px;
+//     display: flex;
+//     align-items: center;
+//     text-align: center;
+//     color: #FFFFFF;
+//   }
+//   :global(.vtex-button) {
+//     background-color: black;
+//     height: 49px;
+//   }
+// }
+
+.m3-buyButton {
+  :global(.vtex-button) {
+    background-color: black;
+    height: 49px;
+  }
+}
+.m3-boxBuy {
+  display: flex;
+  flex-direction: row;
+  background-color: green;
+}

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

@@ -35,4 +35,6 @@
     height: 49px;
   }
 }
-
+.-html--m3-boxBuy {
+  background-color: red;
+}

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

@@ -18,3 +18,5 @@
 .quantitySelectorStepper {
   border: none;
 }
+
+

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

@@ -63,6 +63,12 @@
   height: auto !important;
 }
 
+@media (min-width: 375px) and (max-width:1444px) {
+  .stack {
+    width: 40%;
+  }
+}
+
 // estilização do frete
 
 //estilização dos topicos