estilização dos botões quantidade e adiciona sacola

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/Pix.tsx

@@ -0,0 +1,4 @@
+import Pix from "./components/pix/Pix";
+
+
+export default Pix;

react/components/Html/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./style.css"
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/style.css

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

react/components/pix/Pix.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { useProduct} from "vtex.product-context";
+import styles from "./styles.module.css";
+
+
+const Pix = () => {
+
+  useEffect(()=>{
+    const cep = document.querySelector(".vtex-address-form-4-x-input");
+
+    cep?.setAttribute("placeholder", "Digite seu CEP");
+
+  })
+
+const productvalue = useProduct();
+
+const pixproduct = productvalue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+const desconto = (Number(pixproduct)*10)/100;
+
+const total = Number(pixproduct) - Number(desconto.toFixed(2))
+
+return (
+
+<div className={styles["pix-container"]}>
+<div className={styles["pix-content"]}>
+  <div className={styles["pix-img"]}>
+  <img src="https://agenciamagma.vtexassets.com/arquivos/pix--ueberjames.png" alt="" />
+  </div>
+<div className={styles["pix-desconto"]}>
+  <p className={styles["pix-valor"]}> R$ { total.toFixed(2)}</p>
+  <p className={styles["pix-text"]}> 10% de desconto</p>
+  </div>
+
+</div>
+</div>
+
+
+
+
+);
+
+};
+
+export default Pix;

react/components/pix/styles.module.css

@@ -0,0 +1,39 @@
+
+
+.pix-container{
+  display: flex;
+
+
+}
+
+.pix-content{
+  display: flex;
+    width: 197px;
+
+}
+
+.pix-img{
+  margin-top: 22px;
+}
+
+.pix-desconto{
+  margin-left: 26px;
+
+}
+
+.pix-valor{
+  margin: 8px 0 0px 0;
+  color:#000000;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 700;
+
+}
+
+.pix-text{
+  font-size: 13px;
+  margin: 0;
+  color: #929292;
+  font-family: 'Open Sans';
+
+}

react/typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+    const css: any;
+    export default css;
+}

react/typings/global.d.ts

@@ -0,0 +1,7 @@
+export interface TimeSplit {
+    hours: string
+    minutes: string
+    seconds: string
+}
+
+type GenericObject = Record<string, any>

react/typings/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module "*.graphql" {
+    import { DocumentNode } from "graphql";
+
+    const value: DocumentNode;
+    export default value;
+}

react/typings/storefront.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+declare global {
+  interface StorefrontFunctionComponent<P = GenericObject>
+    extends FunctionComponent<P> {
+    getSchema?(props: P): GenericObject
+    schema?: GenericObject
+  }
+
+  interface StorefrontComponent<P = GenericObject, S = GenericObject>
+    extends Component<P, S> {
+    getSchema?(props: P): GenericObject
+    schema: GenericObject
+  }
+}

react/typings/vtex.css-handles.ts

@@ -0,0 +1 @@
+declare module "vtex.css-handles"

react/typings/vtex.order-manager.d.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-inner-declarations */
+declare module "vtex.order-manager/OrderQueue" {
+    export * from "vtex.order-manager/react/OrderQueue";
+    export { default } from "vtex.order-manager/react/OrderQueue";
+
+    export const QueueStatus = {
+        PENDING: "Pending",
+        FULFILLED: "Fulfilled",
+    } as const;
+}
+
+declare module "vtex.order-manager/OrderForm" {
+    import { createContext, useContext } from "react";
+    import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants";
+    import type { Context, OrderForm } from "@vtex/order-manager/src/typings";
+
+    type DefaultOrderForm = typeof DEFAULT_ORDER_FORM;
+    type DefaultOrderFormOmited = Omit<DefaultOrderForm, "items">;
+    type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
+        items: OrderFormItem[] | null;
+    };
+
+    export const OrderFormContext = createContext<Context<OrderForm>>({
+        orderForm: DefaultOrderFormUpdated,
+        setOrderForm: noop,
+        error: undefined,
+        loading: false,
+    });
+
+    function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
+        const context = useContext(OrderFormContext);
+
+        if (context === undefined) {
+            throw new Error(
+                "useOrderForm must be used within a OrderFormProvider"
+            );
+        }
+        return context as Context<O>;
+    }
+
+    export type OrderFormItem = {
+        additionalInfo: {
+            brandName: string;
+            __typename: string;
+        };
+        attachments: Array<any>;
+        attachmentOfferings: Array<any>;
+        bundleItems: Array<any>;
+        parentAssemblyBinding: any;
+        parentItemIndex: any;
+        sellingPriceWithAssemblies: any;
+        options: any;
+        availability: string;
+        detailUrl: string;
+        id: string;
+        imageUrls: Record<string, string>;
+        listPrice: number;
+        manualPrice: any;
+        measurementUnit: string;
+        modalType: any;
+        name: string;
+        offerings: Array<any>;
+        price: number;
+        priceTags: Array<any>;
+        productCategories: Record<string, string>;
+        productCategoryIds: string;
+        productRefId: string;
+        productId: string;
+        quantity: number;
+        seller: string;
+        sellingPrice: number;
+        skuName: string;
+        skuSpecifications: Array<any>;
+        unitMultiplier: number;
+        uniqueId: string;
+        refId: string;
+        isGift: boolean;
+        priceDefinition: {
+            calculatedSellingPrice: number;
+            total: number;
+            sellingPrices: Array<{
+                quantity: number;
+                value: number;
+                __typename: string;
+            }>;
+            __typename: string;
+        };
+        __typename: string;
+    };
+
+    export { OrderFormProvider, useOrderForm };
+    declare const _default: {
+        OrderFormProvider: import("react").FC<Record<string, never>>;
+        useOrderForm: typeof useOrderForm;
+    };
+    export default _default;
+}
+
+declare module "vtex.order-manager/constants" {
+    export * from "vtex.order-manager/react/constants";
+}
+
+

react/typings/vtex.render-runtime.d.ts

@@ -0,0 +1,38 @@
+/* Typings for `render-runtime` */
+declare module "vtex.render-runtime" {
+    import { ComponentType, ReactElement, ReactType } from "react";
+
+    export interface NavigationOptions {
+        page: string
+        params?: any
+    }
+
+    export interface RenderContextProps {
+        runtime: {
+            navigate: (options: NavigationOptions) => void
+        }
+    }
+
+    interface ExtensionPointProps {
+        id: string
+        [key: string]: any
+    }
+
+    export const ExtensionPoint: ComponentType<ExtensionPointProps>;
+
+    interface ChildBlockProps {
+        id: string
+    }
+
+    export const ChildBlock: ComponentType<ChildBlockProps>;
+    export const useChildBlock = () => GenericObject;
+
+    export const Helmet: ReactElement;
+    export const Link: ReactType;
+    export const NoSSR: ReactElement;
+    export const RenderContextConsumer: ReactElement;
+    export const canUseDOM: boolean;
+    export const withRuntimeContext: <TOriginalProps extends GenericObject>(
+        Component: ComponentType<TOriginalProps & RenderContextProps>
+    ) => ComponentType<TOriginalProps>;
+}

react/typings/vtex.styleguide.d.ts

@@ -0,0 +1,9 @@
+declare module "vtex.styleguide" {
+    import { ComponentType } from "react";
+
+    export const Input: ComponentType<InputProps>;
+
+    interface InputProps {
+        [key: string]: any
+    }
+}

store/blocks/minicart.jsonc

@@ -2,7 +2,8 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "text":"ADICIONAR À SACOLA"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -10,6 +10,8 @@
       "product-questions-and-answers"
     ]
   },
+
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -18,6 +20,8 @@
     },
     "children": ["breadcrumb"]
   },
+
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -50,7 +54,8 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "product-main"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -106,23 +111,38 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-rating-summary",
-      "flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
-      "product-installments",
-      "product-separator",
       "product-identifier.product",
+      "product-rating-summary",
+      "flex-layout.row#selling-price",
+      "product-installments#m3",
+      "Pix",
       "sku-selector",
-      "product-quantity",
+      // "product-quantity",
+      "html#quantity-button-buy",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+      // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
     ]
   },
 
+  "html#quantity-button-buy":{
+    "props": {
+      "blockClass": "quantity-button-buy"
+
+    },
+    "children": [
+      "product-quantity#size",
+      "flex-layout.row#buy-button"
+    ]
+  },
+  "product-quantity#size": {
+    "props": {
+      "size": "large",
+      "showLabel": false
+    }
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -140,7 +160,8 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "size-buy-button"
     },
     "children": ["add-to-cart-button"]
   },
@@ -170,21 +191,30 @@
       "flex-layout.row#availability"
     ]
   },
+
+  "product-identifier.product": {
+    "props": {
+      "label": "hide"
+
+
+  }
+},
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
-  },
-
-  "share#default": {
-    "props": {
-      "social": {
-        "Facebook": true,
-        "WhatsApp": true,
-        "Twitter": false,
-        "Pinterest": true
-      }
-    }
   }
-}
+
+  // "share#default": {
+  //   "props": {
+  //     "social": {
+  //       "Facebook": true,
+  //       "WhatsApp": true,
+  //       "Twitter": false,
+  //       "Pinterest": true
+  //     }
+  //   }
+  // }
+  }

store/blocks/product-summary/quickview.json

@@ -36,11 +36,25 @@
   },
   "flex-layout.col#quickviewPrice": {
     "children": [
-      "flex-layout.row#list-price-savings",
+
       "flex-layout.row#selling-price",
-      "product-installments"
+      "product-installments",
+      "product-installments#m3"
     ]
   },
+
+  "product-installments#m3":{
+    "props":{
+      "markers":["discount"],
+      "blockClass":"m3-install",
+      "installmentsCriteria":"max-quantity-without-interest",
+
+      "message":" {installmentsNumber}x de {installmentValue} <discount> sem juros</discount>"
+
+
+    }
+  },
+
   "modal-actions#quickview": {
     "props": {
       "blockClass": "quickview"

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "Pix":{
+    "component": "Pix"
   }
 }

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

@@ -8,10 +8,9 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
 /* Grid breakpoints */
-.html {
+.buttonText {
-  background-color: red;
+  font-family: "Open Sans", sans-serif;
-}
+  font-weight: 400;
-
+  font-size: 18px;
-.html--pdp-breadcrumb {
+  line-height: 25px;
-  background-color: green;
 }

styles/css/vtex.flex-layout.css

@@ -8,7 +8,36 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
 /* Grid breakpoints */
-.container {
+.flexRowContent--product-main {
-  margin: 0;
+  gap: 32px;
   padding: 0;
+  margin: 0;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+.flexRowContent--product-main .stretchChildrenWidth {
+  padding: 0;
+}
+
+.flexRow--size-buy-button {
+  width: 100%;
+  height: 49px;
+  margin: 0;
+}
+.flexRow--size-buy-button .flexRowContent--size-buy-button {
+  height: 49px;
+  width: 100%;
+  margin: 0;
+}
+
+.flexRowContent--size-buy-button :global(.vtex-button) {
+  background: #000000;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRowContent--size-buy-button :global(.vtex-button) {
+    width: 780px;
+  }
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,22 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+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;800&display=swap");
+/* Grid breakpoints */
+.product-identifier__value {
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.4784313725);
+  display: flex;
+  justify-content: flex-end;
 }
+@media only screen and (max-width: 1024px) {
+  .product-identifier__value {
+    justify-content: flex-start;
+  }
+}

styles/css/vtex.product-price.css

@@ -1,79 +1,22 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
-}
+/* Grid breakpoints */
-
 .sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  font-family: "Open Sans", sans-serif;
+  color: #000000 !important;
 }
 
-.installments {
+.installmentsNumber,
-  color: #727273;
+.installmentValue {
-  margin-bottom: 1rem;
+  font-weight: 700;
-}
+}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.product-quantity.css

@@ -0,0 +1,39 @@
+/*
+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;800&display=swap");
+/* Grid breakpoints */
+.quantitySelectorTitle {
+  display: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: #FFFFFF;
+}
+
+.quantitySelectorContainer {
+  width: 128px;
+  height: 49px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
+  height: 49px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+  height: 49px !important;
+  width: 48px;
+  padding: 0;
+  margin: 0;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button-container) {
+  height: 49px;
+  width: 40px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) {
+  height: 49px;
+  width: 40px;
+}

styles/css/vtex.store-components.css

@@ -7,4 +7,139 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
-/* Grid breakpoints */
+/* Grid breakpoints */
+.container {
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+.container .productImagesGallerySlide {
+  width: 100% !important;
+}
+.container .productImageTag--main {
+  max-height: 100% !important;
+  max-width: 100% !important;
+}
+.container .productNameContainer {
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  order: 2;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+  margin-left: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  visibility: visible;
+  display: block;
+  content: "OUTRAS CORES:";
+  font-size: 14px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 21px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+  margin-left: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  visibility: visible;
+  display: block;
+  content: "OUTROS TAMANHOS:";
+  font-size: 14px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  margin: auto;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+}
+.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+  margin-right: 5px;
+}
+.skuSelectorContainer .frameAround {
+  border-color: #000000;
+  z-index: 2;
+}
+.skuSelectorContainer .diagonalCross {
+  background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+  width: 36px;
+  height: 17px;
+  top: 11px;
+}
+.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 400;
+  color: #000000;
+  font-family: "Open Sans", sans-serif;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 400;
+  font-family: "Open Sans", sans-serif;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+}
+.shippingContainer :global(.vtex-button) {
+  font-size: 0;
+  position: relative;
+  right: 164px;
+  width: 49px;
+  height: 49px;
+  margin-top: 27px;
+  background-color: #000000;
+  border: none;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-button)::after {
+  content: "OK";
+  color: #FFFFFF;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 600;
+}

styles/css/vtex.styleguide.css

@@ -0,0 +1,10 @@
+/*
+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;800&display=swap");
+/* Grid breakpoints */

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +0,0 @@
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-}
-

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

@@ -0,0 +1,9 @@
+.buttonText {
+    font-family: $font-open;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+  }
+
+
+

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

@@ -1,5 +1,39 @@
-.container{
+
-  margin: 0;
+.flexRowContent--product-main {
+  gap: 32px;
   padding: 0;
+  margin: 0;
+  padding-left: 40px;
+  padding-right: 40px;
+
+  .stretchChildrenWidth {
+    padding: 0;
+  }
+
+
 }
 
+// quantity
+.flexRow--size-buy-button{
+  width: 100%;
+height: 49px;
+margin: 0;
+  .flexRowContent--size-buy-button {
+    height: 49px;
+    width: 100%;
+    margin: 0;
+  }
+}
+
+
+.flexRowContent--size-buy-button :global(.vtex-button) {
+  background: $color-black2;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  @include mq (md, max) {
+    width: 780px;
+  }
+}
+
+

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

@@ -0,0 +1,12 @@
+
+.product-identifier__value
+{
+  font-size: 14px;
+  line-height: 19px;
+    color: #9292927a;
+display: flex;
+justify-content: flex-end;
+@include mq (md, max) {
+  justify-content: flex-start;
+}
+}

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

@@ -0,0 +1,17 @@
+.sellingPriceValue
+{
+
+font-weight: 700;
+font-size: 25px;
+    line-height: 38px;
+    font-family: $font-open;
+    color: $color-black2 !important;
+
+}
+
+.installmentsNumber,
+.installmentValue {
+  font-weight: 700;
+}
+
+

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

@@ -0,0 +1,33 @@
+.quantitySelectorTitle{
+  display: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button){
+  background-color: $color-white;
+}
+
+.quantitySelectorContainer{
+  width: 128px;
+  height: 49px;
+ 
+
+  :global(.vtex-numeric-stepper-container){
+    height: 49px;
+  }
+  :global(.vtex-numeric-stepper__input){
+    height: 49px !important;
+    width: 48px;
+    padding: 0;
+    margin: 0;
+  }
+  :global(.vtex-numeric-stepper__plus-button-container){
+    height: 49px;
+    width: 40px;
+  }
+  :global(.vtex-numeric-stepper__minus-button-container){
+    height: 49px;
+    width: 40px;
+  }
+}
+
+

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

@@ -0,0 +1,214 @@
+.container{
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+
+  .productImagesGallerySlide{
+    width: 100% !important;
+  }
+
+
+  .productImageTag--main{
+    max-height: 100% !important;
+    max-width: 100% !important;
+  }
+
+
+  .productNameContainer {
+    font-size: 20px;
+    line-height: 34px;
+    color: #575757;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// sku-selector
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+
+  .skuSelectorSubcontainer--cor {
+
+
+    order: 2;
+
+
+    .skuSelectorName {
+
+      font-size: 0;
+
+      margin-left: 16px;
+
+      &::after {
+
+        visibility: visible;
+        display: block;
+        content: "OUTRAS CORES:";
+        font-size: 14px;
+
+
+      }
+
+
+    }
+
+    .skuSelectorSelectorImageValue,
+    .skuSelectorNameSeparator {
+      display: none;
+    }
+
+    .frameAround {
+
+      border-radius: 30px;
+
+    }
+
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+
+      border-radius: 21px;
+
+
+    }
+
+  }
+
+  .skuSelectorSubcontainer--tamanho {
+
+    .skuSelectorName {
+
+      font-size: 0;
+
+      margin-left: 16px;
+
+      &::after {
+
+        visibility: visible;
+        display: block;
+        content: "OUTROS TAMANHOS:";
+        font-size: 14px;
+
+
+      }
+
+    }
+
+    .frameAround {
+      // border:3px solid $color-black2;
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .skuSelectorInternalBox {
+
+      margin: auto;
+      padding: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+    }
+
+    .skuSelectorItemTextValue {
+
+
+      padding: 0;
+      margin: auto;
+    }
+  }
+
+  .valueWrapper .skuSelectorItemTextValue {
+    margin-right: 5px;
+  }
+
+  .frameAround {
+    border-color: $color-black2;
+    z-index: 2;
+
+  }
+
+  .diagonalCross {
+    background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+    width: 36px;
+    height: 17px;
+    top: 11px;
+  }
+
+  .skuSelectorItem--skus--selected {
+
+    .skuSelectorItemTextValue--skus {
+      font-size: 14px;
+      line-height: 19px;
+      font-weight: 400;
+      color: $color-black2;
+      font-family: $font-open;
+
+    }
+  }
+
+}
+
+
+// sku-selector-fim
+
+// cep
+
+.shippingContainer {
+
+display: flex;
+
+:global(.vtex-input-prefix__group) {
+
+  height: 49px;
+
+
+}
+
+:global(.vtex-input__label) {
+
+  font-size: 0;
+
+  &::after {
+    content: "CALCULAR FRETE:";
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: 400;
+    font-family: $font-open;
+  }
+
+}
+
+:global(.vtex-address-form__postalCode) {
+  display: flex;
+}
+
+:global(.vtex-button) {
+  font-size: 0;
+  position: relative;
+  right: 164px;
+  width: 49px;
+  height: 49px;
+  margin-top: 27px;
+  background-color: $color-black2;
+  border: none;
+    border-radius: 0;
+
+  &::after {
+
+    content: "OK";
+    color: $color-white;
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: 600;
+
+  }
+}
+
+
+
+}