Merge pull request 'feature/pagina-product' (#6) from feature/pagina-product into master

Reviewed-on: #6

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",
@@ -66,7 +65,8 @@
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
     "vtex.css-handles": "1.x",
-    "vtex.product-context": "0.x"
+    "vtex.product-context": "0.x",
+    "vtex.store-newsletter": "1.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/PixDiscount.tsx

@@ -0,0 +1,3 @@
+import PixDiscount from "./components/PixDiscount/PixDiscount";
+
+export default PixDiscount;

react/components/Html/styles.css

@@ -1,20 +1,79 @@
-@media(min-width:769px){
+/*
-  [class*="html--buy-button"]{
+  CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
+*/
+
+[class*="html--buy-button"] :global(.vtex-button) {
+    min-height: 49px;
+    padding: 12px 64px;
+    background: #000;
+    color: #FFF;
+    border: none;
+    border-radius: 0;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
     display: flex;
-  }
+    align-items: center;
+    text-align: center;
 }
+
+[class*="html--buy-button"]{
+    display: flex;
+    margin: 16px 0;
+}
+
+[class*="html--buy-button"] :global(.vtex-button__label) {
+  padding: 0 !important;
+}
+
 @media(max-width: 768px){
   [class*="html--buy-button"]{
     display: block;
+    margin: 16px 0;
   }
 }
 
+[class*="html--product-quantity"] {
+  width: 128px;
+  margin-right: 10px;
+}
+
+/*
+  DESCRIÇÃO DO PRODUTO SELECIONADO
+*/
 [class*="html--image-description"] {
   margin-right: 16px;
   width: 100%;
 }
-
+@media(max-width: 1024px){
-[class*="html--container-description"] {
+  [class*="html--image-description"] {
-  margin: 32px 32px 16px 32px;
+    margin: 0;
+  }
 }
 
+
+[class*="html--container-description"] {
+  margin: 32px 32px 0px 32px;
+}
+@media(max-width: 1024px){
+  [class*="html--container-description"] {
+    margin: 16px 0;
+  }
+}
+
+/*
+  NEWSLETTER
+*/
+[class*="html--container-form-input"] {
+  display: flex;
+  margin-bottom: 16px;
+  position: relative;
+  width: 53.75%;
+  padding: 0 40px;
+}
+
+@media(max-width: 1024px){
+  [class*="html--container-form-input"] {
+    width: 100%;
+  }
+}

react/components/PixDiscount/PixDiscount.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.module.css";
+
+const PixDiscount = () => {
+
+  const productContextValue = useProduct();
+  const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+  const discount = (Number(productPrice) * 10) / 100;
+  const totalDiscount = Number(productPrice) - Number(discount.toFixed(2));
+
+
+  return (
+    <div className={styles["wrapper"]}>
+      <div className={styles["container-img"]}>
+        <figure className={styles["figure-pix"]}>
+          <img className={styles["img-pix"]} src="https://agenciamagma.vtexassets.com/arquivos/pixDescontoThiagoBronisio.png" alt="Imagem Pix" />
+        </figure>
+      </div>
+
+      <div className={styles["container-price"]}>
+        <p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2)}</p>
+        <p className={styles["discount"]}>10% de desconto</p>
+      </div>
+    </div>
+  )
+}
+
+export default PixDiscount;

react/components/PixDiscount/styles.module.css

@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  margin: 8px 0 16px 0;
+  height: 39px;
+}
+.container-img{
+  margin-right: 26px;
+    display: flex;
+    align-items: center;
+}
+.figure-pix{
+  margin: 0;
+  height: 24px;
+}
+
+.img-pix {
+  height: 24px;
+  width: 100%;
+}
+
+.price-pix{
+  margin: 0;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.discount{
+  margin: 0;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

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

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

store/blocks/pdp/product.jsonc

@@ -4,7 +4,8 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#description",
-      "list-context.product-list#prateleira"
+      "list-context.product-list#prateleira",
+      "flex-layout.row#newsletter-container"
     ]
   },
 
@@ -21,17 +22,96 @@
   },
 
 /*
-  DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description)
+  IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
+*/
+
+"condition-layout.product#availability": {
+  "props": {
+  "blockClass": "availability",
+    "conditions": [
+      {
+        "subject": "isProductAvailable"
+      }
+    ],
+    "Then": "flex-layout.row#product-main",
+    "Else": "flex-layout.row#product-availability"
+  }
+},
+"flex-layout.row#product-main": {
+  "props": {
+    "blockClass":"main"
+  },
+  "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+},
+
+"stack-layout": {
+  "props": {
+    "blockClass": "product"
+  },
+  "children": [
+    "flex-layout.row#product-image",
+    "product-bookmark",
+    "product-specification-badges"
+  ]
+},
+
+"product-specification-badges": {
+  "props": {
+    "specificationGroupName": "Group",
+    "specificationName": "On Sale",
+    "visibleWhen": "True",
+    "displayValue": "SPECIFICATION_NAME"
+  }
+},
+
+"flex-layout.col#stack": {
+  "children": ["stack-layout"],
+  "props": {
+    "blockClass": "stack",
+    "width": "50%",
+    "rowGap": 0
+  }
+},
+"flex-layout.row#product-image": {
+  "children": ["html#product-images"]
+},
+
+"html#product-images": {
+  "props": {
+    "testId": "product-images"
+  },
+  "children": ["product-images"]
+},
+
+"product-images": {
+  "props": {
+    "thumbnailsOrientation": "horizontal",
+    "showPaginationDots": false,
+    "showNavigationArrows": false,
+    "aspectRatio": {
+      "desktop": "auto",
+      "phone": "auto"
+    },
+    "displayThumbnailsArrows": true
+  }
+},
+
+/*
+  DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION)
 */
 "html#container-description": {
   "props": {
     "tag": "div",
     "blockClass": "container-description"
+
   },
   "children": ["flex-layout.row#product-description"]
 },
 
   "flex-layout.row#product-description": {
+    "props": {
+      "blockClass": "product-description"
+    },
     "children": ["html#image-description", "flex-layout.row#description"]
   },
 
@@ -41,7 +121,21 @@
       "testId": "product-images",
       "blockClass": "image-description"
     },
-    "children": ["image#product"]
+    "children": ["html#product-image"]
+  },
+
+  "html#product-image":{
+    "props": {
+      "testId": "product-images"
+    },
+    "children": ["product-images#description"]
+  },
+
+  "product-images#description":{
+    "props": {
+      "blockClass": "description",
+      "displayMode": "first-image"
+    }
   },
 
   "image#product": {
@@ -149,92 +243,131 @@
 */
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf#prateleira"],
-    "children": ["slider-layout#demo-products"]
+    "children": ["rich-text#title-prateleira","slider-layout#prateleira"]
-},
-
-"product-summary.shelf#prateleira": {
-  "children": [
-    "stack-layout#prodsum",
-    "product-summary-name",
-    "product-list-price",
-    "product-selling-price"
-  ]
-},
-
-/*
-  IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
-*/
-  "condition-layout.product#availability": {
-    "props": {
-    "blockClass": "availability",
-      "conditions": [
-        {
-          "subject": "isProductAvailable"
-        }
-      ],
-      "Then": "flex-layout.row#product-main",
-      "Else": "flex-layout.row#product-availability"
-    }
-  },
-  "flex-layout.row#product-main": {
-    "props": {
-      "blockClass":"main",
-      "colGap": 7,
-      "rowGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7,
-      "paddingBottom": 7
-    },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
 
-  "stack-layout": {
+  "product-summary.shelf#prateleira": {
-    "props": {
+    "children": ["html#product-summary"]
-      "blockClass": "product"
+  },
+
+  "html#product-summary": {
+    "props":{
+      "testId": "vtex-product-summary",
+      "blockClass": "product-summary"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "stack-layout#prodsum",
-      "product-bookmark",
+      "product-summary-name#name-prateleira",
-      "product-specification-badges"
+      "product-list-price#promotion-prateleira",
+      "product-selling-price#price-prateleira"
     ]
   },
 
-  "product-specification-badges": {
+  "product-summary-name#name-prateleira": {
     "props": {
-      "specificationGroupName": "Group",
+      "blockClass": "name-prateleira"
-      "specificationName": "On Sale",
-      "visibleWhen": "True",
-      "displayValue": "SPECIFICATION_NAME"
     }
   },
 
-  "flex-layout.col#stack": {
+  "product-list-price#promotion-prateleira":{
-    "children": ["stack-layout"],
     "props": {
-      "blockClass": "stack",
+      "blockClass": "promotion-prateleira"
-      "width": "50%",
-      "rowGap": 0
     }
   },
-  "flex-layout.row#product-image": {
+
-    "children": ["product-images"]
+  "product-selling-price#price-prateleira":{
-  },
-  "product-images": {
     "props": {
-      "thumbnailsOrientation": "horizontal",
+      "blockClass": "price-prateleira"
-      "showPaginationDots": false,
+    }
-      "showNavigationArrows": false,
+  },
-      "aspectRatio": {
+
-        "desktop": "auto",
+  "rich-text#title-prateleira": {
-        "phone": "16:9"
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar:",
+      "blockClass": "title-prateleira"
+      }
+  },
+
+  "slider-layout#prateleira": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
       },
-      "displayThumbnailsArrows": true
+      "infinite": true,
+      "fullWidth": false,
+      "blockClass": "prateleira"
     }
   },
 
   /*
-  INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
+    NEWSLETTER
+  */
+
+  "flex-layout.row#newsletter-container":{
+    "props":{
+      "blockClass": "newsletter-container"
+    },
+    "children": ["flex-layout.row#text-newsletter","newsletter-form#container-newsletter"]
+  },
+
+  "flex-layout.row#text-newsletter":{
+    "props": {
+      "blockClass": "text-newsletter"
+    },
+    "children": ["rich-text#newsletter-title","rich-text#offer-newsletter" ]
+  },
+
+  "rich-text#newsletter-title": {
+    "props": {
+      "blockClass": "subscriber-newsletter",
+      "textAlignment": "center",
+      "textPosition": "CENTER",
+      "text": "Assine nossa newsletter"
+    }
+  },
+
+  "rich-text#offer-newsletter": {
+    "props": {
+      "blockClass": "offer-newsletter",
+      "textAlignment": "center",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail"
+    }
+  },
+
+  "newsletter-form#container-newsletter": {
+    "props": {
+      "blockClass": "container-newsletter"
+    },
+    "children": [
+      "html#container-form-input"
+    ]
+  },
+
+  "html#container-form-input": {
+    "props": {
+      "blockClass": "container-form-input"
+    },
+    "children": ["newsletter-input-email", "newsletter-submit"]
+  },
+
+  "newsletter-input-email": {
+    "props": {
+      "placeholderText": "Digite seu e-mail"
+    }
+  },
+  "newsletter-submit": {
+    "props": {
+      "submitButtonLabel": "Enviar"
+    }
+  },
+
+  /*
+    INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
   */
   "flex-layout.col#right-col": {
     "props": {
@@ -247,8 +380,9 @@
       "product-identifier.product",
       "flex-layout.row#selling-price",
       "product-installments#parcelaProduct",
+      "html#pix-discount",
       "availability-subscriber",
-      "sku-selector",
+      "html#sku-selector",
       "html#buy-button",
       "shipping-simulator"
     ]
@@ -263,12 +397,27 @@
 
   "product-installments#parcelaProduct": {
     "props": {
+      "installmentsCriteria": "max-quantity-without-interest",
       "markers": ["discount", "x"],
       "blockClass": "divider",
       "message": "{installmentsNumber} <x>x</> <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
     }
   },
 
+  "html#pix-discount":{
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["pix-discount"]
+  },
+
+  "html#sku-selector":{
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "sku-selector": {
     "props": {
       "blockClass": "sku-selector",
@@ -285,15 +434,23 @@
       "testId": "buy-button",
       "blockClass": "buy-button"
     },
-    "children": ["product-quantity","add-to-cart-button"]
+    "children": ["html#product-quantity","add-to-cart-button"]
   },
 
+  "html#product-quantity":{
+    "props": {
+      "testId": "product-quantity",
+      "blockClass": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
+  /*
+    ASSINANTES DE PRODUTOS INDISPONIVEIS
+  */
   "flex-layout.row#product-availability": {
     "props": {
-      "colGap": 7,
+      "blockClass": "product-availability"
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
     },
     "children": [
       "flex-layout.col#stack",

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "pix-discount": {
+    "component": "PixDiscount"
   }
 }

styles/css/vtex-store-newsletter.css

@@ -0,0 +1,32 @@
+/*
+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 */
+.newsletterForm--container-newsletter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000000;
+  margin-top: 64px;
+  position: relative;
+}
+
+.emailInputContainer {
+  border-bottom: 1px solid #fff;
+  width: 100%;
+  margin-bottom: 16px;
+  position: relative;
+}
+.emailInputContainer :global(.vtex-input-prefix__group) {
+  border: none;
+}
+.emailInputContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background-color: transparent;
+  padding: 0;
+}

styles/css/vtex.flex-layout.css

@@ -8,76 +8,111 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+/* PREÇO PRINCIPAL DO PRODUTO */
+.flexRowContent--selling-price {
+  margin: 0;
+}
+
 /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .flexRowContent--main {
     display: block;
   }
 }
-.flexRowContent--main .flexCol--stack {
+@media only screen and (max-width: 1024px) {
+  .flexRowContent--main .stretchChildrenWidth {
+    width: 100% !important;
+  }
+}
+.flexRowContent--main .stretchChildrenWidth .flexCol--stack {
   padding-left: 40px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
-  .flexRowContent--main .flexCol--stack {
+  .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
     padding: 0 40px;
     width: 100%;
   }
 }
-.flexRowContent--main .flexCol--right-col {
+.flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
   padding-right: 40px;
   margin-left: 16px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
-  .flexRowContent--main .flexCol--right-col {
+  .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
     padding: 0 40px;
     margin-left: 0;
   }
 }
 
 /* ASSINANTE DE PRODUTO INDISPONIVEL */
-.flexRowContent--message-availability {
+.flexRowContent--product-availability {
+  padding: 0;
+  margin: 0;
+  padding: 0 40px;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRowContent--product-availability {
+    display: block;
+  }
+}
+.flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+  padding: 0;
+  display: flex;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    width: 100% !important;
+  }
+}
+.flexRowContent--product-availability .flexCol--info-availability {
+  margin-left: 16px;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRowContent--product-availability .flexCol--info-availability {
+    margin: 0;
+  }
+}
+.flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
   width: 375px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
-  .flexRowContent--message-availability {
+  .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
     width: 100%;
   }
 }
 
-/* BOTAO DE ADICIONAR A SACOLA */
+/* DESCRIÇÃO DO PRODUTO */
-.flexRowContent {
+@media only screen and (max-width: 1024px) {
-  padding: 0;
+  .flexRowContent--product-description {
-  margin: 0;
+    display: block;
+  }
 }
-.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+@media only screen and (max-width: 1024px) {
-  padding: 0;
+  .flexRowContent--product-description .stretchChildrenWidth {
-  display: flex;
-}
-@media only screen and (max-width: 1023px) {
-  .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
     width: 100% !important;
   }
 }
-.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
+
-  background-color: black;
+/* NEWSLETTER */
-  border: none;
+.flexRow--newsletter-container {
-  height: 49px;
+  display: flex;
-  margin-top: 8px;
+  align-items: center;
+  width: 100%;
+  background-color: #000000;
 }
-@media only screen and (max-width: 767px) {
+.flexRow--newsletter-container .flexRowContent--newsletter-container {
-  .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
+  display: flex;
-    margin: 0 0 16px;
+  flex-direction: column;
-    height: auto;
-  }
 }
-.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+.flexRow--newsletter-container .flexRowContent--newsletter-container .stretchChildrenWidth {
-  font-size: 0;
+  width: 100% !important;
 }
-.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
+.flexRow--newsletter-container .flexRowContent--newsletter-container .flexRowContent--text-newsletter {
-  font-family: "Open sans", sans-serif;
+  display: flex;
-  content: "ADICIONAR À SACOLA";
+  flex-direction: column;
-  font-size: 18px;
+}
-  font-weight: 400;
+
-  padding: 12px 64px;
+/* CORREÇÃO BUG SCROLL DA PAG */
-  line-height: 22px;
+:global(.vtex-store-footer) {
+  margin: 0 !important;
 }

styles/css/vtex.product-identifier.css

@@ -16,7 +16,7 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .product-identifier--productReference {
     justify-content: start;
     margin-bottom: 24px;

styles/css/vtex.product-quantity.css

@@ -10,14 +10,12 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  margin-top: 8px;
+  width: 100%;
-  margin-bottom: 16px;
+  margin: 0 10px 0 0;
-  width: 149px;
-  margin-right: 10px;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .quantitySelectorContainer {
-    margin-bottom: 10px;
+    margin: 0 0 10px 0;
   }
 }
 .quantitySelectorContainer .quantitySelectorTitle {

styles/css/vtex.rich-text.css

@@ -7,3 +7,73 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+/*
+  PRATELEIRA DE PRODUTO
+*/
+.paragraph--title-prateleira {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  margin: 0 0 32px;
+  color: #575757;
+}
+@media only screen and (max-width: 1024px) {
+  .paragraph--title-prateleira {
+    margin: 0 0 24px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .paragraph--title-prateleira {
+    margin: 0 0 16px;
+  }
+}
+
+/*
+  NEWSLETTER
+*/
+.container--subscriber-newsletter {
+  justify-content: center;
+  width: 100%;
+  margin: 32px 0 16px 0;
+  padding: 0 40px;
+}
+@media only screen and (max-width: 1024px) {
+  .container--subscriber-newsletter {
+    margin: 64px 0 16px 0;
+  }
+}
+.container--subscriber-newsletter .wrapper--subscriber-newsletter {
+  align-items: center;
+}
+.container--subscriber-newsletter .wrapper--subscriber-newsletter .paragraph--subscriber-newsletter {
+  margin: 0;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #fff;
+}
+
+.container--offer-newsletter {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 0 40px;
+}
+.container--offer-newsletter .wrapper--offer-newsletter {
+  display: flex;
+  align-items: center;
+}
+.container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter {
+  margin: 0;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media only screen and (max-width: 1024px) {
+  .container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}

styles/css/vtex.store-components.css

@@ -9,24 +9,39 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding: 0;
+  width: 100%;
   max-width: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 /*IMAGEM PRINCIPAL DO PRODUTO */
-.productImage {
+@media only screen and (max-width: 1024px) {
+  .productImagesGallerySlide {
+    margin: 0;
+  }
+}
+.productImagesGallerySlide .productImage {
   margin-right: 16px;
 }
-.productImage .productImageTag {
+@media only screen and (max-width: 1024px) {
-  width: 100%;
+  .productImagesGallerySlide .productImage {
+    margin: 0;
+  }
+}
+.productImagesGallerySlide .productImage .productImageTag--main {
   max-height: 100% !important;
-  object-fit: contain;
 }
 
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
   margin: 16px 0;
 }
+@media only screen and (max-width: 768px) {
+  .carouselGaleryThumbs {
+    display: block;
+  }
+}
 .carouselGaleryThumbs .thumbImg {
   width: 90px;
   height: 90px;
@@ -49,7 +64,7 @@
   line-height: 34px;
   color: #575757;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .productNameContainer--quickview {
     text-align: start;
   }
@@ -156,7 +171,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   width: 374.65px;
   margin-top: 16px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
     width: 100%;
     max-width: 100%;
@@ -167,7 +182,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   margin-right: 10.08px;
   margin-bottom: 15px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
     width: 49%;
   }
@@ -191,7 +206,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   font-weight: 400;
   margin-bottom: 15px;
 }
-@media only screen and (max-width: 1023px) {
+@media only screen and (max-width: 1024px) {
   .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
     width: -webkit-fill-available;
     margin: 0 0 0 8px;
@@ -208,6 +223,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 28px;
   color: #929292;
 }
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input__error) {
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+  margin: 0;
+}
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
   width: 100%;
   margin-bottom: 16px;
@@ -222,6 +243,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
   content: "AVISE-ME";
@@ -239,7 +261,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 .shippingContainer {
   display: flex;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingContainer {
     display: block;
     position: relative;
@@ -250,31 +272,37 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   align-items: center;
   padding: 0;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingContainer :global(.vtex-address-form__postalCode) {
     display: block;
   }
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  position: relative;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
   font-size: 0;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
   content: "CALCULAR FRETE";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #929292;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
   width: 280px;
   height: 49px;
   border-radius: 0;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
-  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
     width: 100%;
   }
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+  position: absolute;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
   margin-top: 25px;
@@ -285,7 +313,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 16px;
   text-decoration: underline;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
     left: 0;
     margin-top: 8px;
@@ -301,20 +329,22 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 .shippingContainer :global(.vtex-button) {
   height: 49px;
   width: 49px;
-  margin-top: auto !important;
+  margin-top: 27px !important;
   position: relative;
   right: 148px;
   font-size: 0;
   border-radius: 0;
+  background-color: #000000;
+  border: none;
   cursor: pointer;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingContainer :global(.vtex-button) {
     height: 49px !important;
     margin: 0 !important;
     position: absolute;
-    right: 0px;
+    right: 0;
-    top: 26px;
+    top: 27px;
   }
 }
 .shippingContainer :global(.vtex-button)::before {
@@ -350,7 +380,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 19px;
   color: #202020;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
     margin-right: 32px;
   }
@@ -367,7 +397,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   font-size: 0;
   margin-right: 30px;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
     margin-right: 32px;
   }
@@ -391,7 +421,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   line-height: 16px;
   color: #afafaf;
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
     margin-right: 22px;
   }
@@ -420,14 +450,19 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 
 /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
+.productImageTag--description {
-  width: 100%;
+  max-height: 100% !important;
 }
 
 /* DESCRIÇÃO DO PRODUTO */
 .productDescriptionContainer {
   margin-left: 16px;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer {
+    margin: 0;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -436,9 +471,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   margin-bottom: 8px;
   color: #575757;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 20px;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 32px;
+  }
+}
 .productDescriptionContainer .productDescriptionText {
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: #929292;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

styles/css/vtex.store-footer.css

@@ -1,11 +1,14 @@
-.row--menu-row {
+@charset "UTF-8";
-  padding-right: 24px;
+/*
-}
+0 - 600PX: Phone
-
+600 - 900px: Table portrait
-.row--menu-row .rowContainer {
+900 - 1200px: Tablet landscape
-  align-items: flex-start;
+[1200 - 1800] is where our nortal styles apply
-}
+1800px + : Big desktop
-
+*/
-.row--payment-methods {
+/* Media Query M3 */
-  padding-top: 16px;
+/* Grid breakpoints */
+/* CORREÇÃO BUG DE SCROLL NA PAGINA */
+.socialNetworksContainer {
+  margin: 0 !important;
 }

styles/css/vtex.store-newsletter.css

@@ -0,0 +1,96 @@
+/*
+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 */
+.newsletterForm--container-newsletter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000000;
+  position: relative;
+}
+
+.emailInputContainer {
+  border-bottom: 1px solid #929292;
+  width: 100%;
+  position: relative;
+  height: 32px;
+}
+.emailInputContainer :global(.vtex-input) {
+  display: flex;
+  width: 100%;
+  height: 32px;
+}
+.emailInputContainer :global(.vtex-input) :global(.vtex-input__error) {
+  position: absolute;
+  right: 0;
+  margin-right: 16px;
+}
+@media only screen and (max-width: 768px) {
+  .emailInputContainer :global(.vtex-input) :global(.vtex-input__error) {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+  }
+}
+.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: none;
+  height: 32px;
+  width: 100%;
+}
+.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background-color: transparent;
+  padding: 0 0 7px 0;
+  color: #fff;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}
+@media only screen and (max-width: 1024px) {
+  .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+    padding: 0 0 16px 16px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+    padding: 0 0 16px 16px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.formSubmitContainer {
+  height: 32px;
+  border-bottom: 3px solid #bfbfbf;
+}
+@media only screen and (max-width: 1024px) {
+  .formSubmitContainer {
+    right: 40px;
+  }
+}
+.formSubmitContainer :global(.vtex-button) {
+  background-color: transparent;
+  border: none;
+  display: flex;
+}
+.formSubmitContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  padding: 0 16px 13px 16px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.defaultSuccessMessage {
+  color: white;
+  margin: 0 0 16px 0;
+  text-align: center;
+}

styles/css/vtex.tab-layout.css

@@ -9,25 +9,52 @@
 /* Grid breakpoints */
 .container--description {
   padding: 0 40px;
+  margin: 16px 0;
 }
 .container--description .listContainer {
   display: flex;
-  padding: 0 80px;
+  padding: 0 64px;
   border-bottom: 1px solid #b9b9b9;
   justify-content: space-between;
 }
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer {
+    padding: 0;
+    flex-direction: column;
+    border-top: 1px solid #b9b9b9;
+    margin-top: 16px;
+    padding-top: 16px;
+  }
+}
 .container--description .listContainer .listItem {
   margin: 0;
   padding: 0;
   height: 38px;
   width: 114px;
 }
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer .listItem {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItem {
+    width: 142px;
+  }
+}
 .container--description .listContainer .listItem :global(.vtex-button) {
   background-color: transparent;
   border: none;
   color: #bfbfbf;
   width: 100%;
 }
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer .listItem :global(.vtex-button) {
+    display: flex;
+    justify-content: flex-start;
+  }
+}
 .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
   padding: 0 !important;
   height: 38px;
@@ -35,8 +62,38 @@
   font-size: 18px;
   line-height: 38px;
   text-transform: capitalize;
+  border-bottom: 2px solid transparent;
+}
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    font-size: 24px;
+    line-height: 38px;
+    border-bottom: 3px solid transparent;
+  }
 }
 .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
-  color: black;
+  color: #000000;
   border-bottom: 2px solid #000000;
 }
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
+    border-bottom: none;
+  }
+}
+.container--description .listContainer .listItemActive {
+  color: #000000;
+  border-bottom: 2px solid #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .container--description .listContainer .listItemActive {
+    border-bottom: none;
+  }
+}
+@media only screen and (min-width: 1921px) {
+  .container--description .listContainer .listItemActive {
+    border-bottom: 3px solid #000000;
+  }
+}
+.container--description .listContainer .listItemActive :global(.vtex-button) {
+  color: #000000;
+}

styles/sass/pages/footer/vtex.store-footer.scss

@@ -0,0 +1,4 @@
+/* CORREÇÃO BUG DE SCROLL NA PAGINA */
+.socialNetworksContainer {
+  margin: 0 !important;
+}

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

@@ -1,65 +1,97 @@
+/* PREÇO PRINCIPAL DO PRODUTO */
+.flexRowContent--selling-price {
+  margin: 0;
+}
+
 /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
 .flexRowContent--main {
   @include mq(md, max) {
     display: block;
   }
-  .flexCol--stack {
+  .stretchChildrenWidth {
-    padding-left: 40px;
     @include mq(md, max) {
-      padding: 0 40px;
+      width: 100% !important;
-      width: 100%;
     }
-  }
+    .flexCol--stack {
-  .flexCol--right-col {
+      padding-left: 40px;
-    padding-right: 40px;
+      @include mq(md, max) {
-    margin-left: 16px;
+        padding: 0 40px;
-    @include mq(md, max) {
+        width: 100%;
-      padding: 0 40px;
+      }
-      margin-left: 0;
+    }
+    .flexCol--right-col {
+      padding-right: 40px;
+      margin-left: 16px;
+      @include mq(md, max) {
+        padding: 0 40px;
+        margin-left: 0;
+      }
     }
   }
 }
 
 /* ASSINANTE DE PRODUTO INDISPONIVEL */
-.flexRowContent--message-availability {
+.flexRowContent--product-availability {
-  width: 375px;
-  @include mq(md, max) {
-    width: 100%;
-  }
-}
-
-/* BOTAO DE ADICIONAR A SACOLA */
-.flexRowContent {
   padding: 0;
   margin: 0;
+  padding: 0 40px;
+  @include mq(md, max) {
+    display: block;
+  }
   :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
     padding: 0;
     display: flex;
     @include mq(md, max) {
       width: 100% !important;
     }
-    :global(.vtex-button) {
+  }
-      background-color: black;
+
-      border: none;
+  .flexCol--info-availability {
-      height: 49px;
+    margin-left: 16px;
-      margin-top: 8px;
+    @include mq(md, max) {
-      @include mq(sm, max) {
+      margin: 0;
-        margin: 0 0 16px;
+    }
-        height: auto;
+    .flexRowContent--message-availability {
-      }
+      width: 375px;
-      :global(.vtex-button__label) {
+      @include mq(md, max) {
-        :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+        width: 100%;
-          font-size: 0;
-          &::after {
-            font-family: "Open sans", sans-serif;
-            content: "ADICIONAR À SACOLA";
-            font-size: 18px;
-            font-weight: 400;
-            padding: 12px 64px;
-            line-height: 22px;
-          }
-        }
       }
     }
   }
 }
+
+/* DESCRIÇÃO DO PRODUTO */
+.flexRowContent--product-description {
+  @include mq(md, max) {
+    display: block;
+  }
+  .stretchChildrenWidth {
+    @include mq(md, max) {
+      width: 100% !important;
+    }
+  }
+}
+
+/* NEWSLETTER */
+.flexRow--newsletter-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: $color-black-padrao;
+  .flexRowContent--newsletter-container {
+    display: flex;
+    flex-direction: column;
+    .stretchChildrenWidth {
+      width: 100% !important;
+    }
+    .flexRowContent--text-newsletter {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+/* CORREÇÃO BUG SCROLL DA PAG */
+:global(.vtex-store-footer) {
+  margin: 0 !important;
+}

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

@@ -1,12 +1,10 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  margin-top: 8px;
+  width: 100%;
-  margin-bottom: 16px;
+  margin: 0 10px 0 0;
-  width: 149px;
-  margin-right: 10px;
   @include mq(sm, max) {
-    margin-bottom: 10px;
+    margin: 0 0 10px 0;
   }
   .quantitySelectorTitle {
     display: none;

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

@@ -0,0 +1,63 @@
+/*
+  PRATELEIRA DE PRODUTO
+*/
+.paragraph--title-prateleira {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  margin: 0 0 32px;
+  color: $color-gray13;
+  @include mq(md, max) {
+    margin: 0 0 24px;
+  }
+
+  @include mq(sm, max) {
+    margin: 0 0 16px;
+  }
+}
+
+/*
+  NEWSLETTER
+*/
+.container--subscriber-newsletter {
+  justify-content: center;
+  width: 100%;
+  margin: 32px 0 16px 0;
+  padding: 0 40px;
+  @include mq(md, max) {
+    margin: 64px 0 16px 0;
+  }
+  .wrapper--subscriber-newsletter {
+    align-items: center;
+    .paragraph--subscriber-newsletter {
+      margin: 0;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+      color: $color-white;
+    }
+  }
+}
+
+.container--offer-newsletter {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 0 40px;
+  .wrapper--offer-newsletter {
+    display: flex;
+    align-items: center;
+    .paragraph--offer-newsletter {
+      margin: 0;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      color: $color-gray14;
+      @include mq(md, max) {
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+  }
+}

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

@@ -1,21 +1,32 @@
 .container {
-  padding: 0;
+  width: 100%;
   max-width: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 /*IMAGEM PRINCIPAL DO PRODUTO */
-.productImage {
+.productImagesGallerySlide {
-  margin-right: 16px;
+  @include mq(md, max) {
-  .productImageTag {
+    margin: 0;
-    width: 100%;
+  }
-    max-height: 100% !important;
+  .productImage {
-    object-fit: contain;
+    margin-right: 16px;
+    @include mq(md, max) {
+      margin: 0;
+    }
+    .productImageTag--main {
+      max-height: 100% !important;
+    }
   }
 }
 
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
   margin: 16px 0;
+  @include mq(sm, max) {
+    display: block;
+  }
 
   .thumbImg {
     width: 90px;
@@ -214,6 +225,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
             color: $color-gray-6;
           }
         }
+        :global(.vtex-input__error) {
+          position: absolute;
+          bottom: 40px;
+          right: 0;
+          margin: 0;
+        }
       }
       .submit {
         width: 100%;
@@ -228,6 +245,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
           display: flex;
           align-items: center;
           justify-content: center;
+          cursor: pointer;
           &::before {
             content: "AVISE-ME";
             color: $color-white;
@@ -259,24 +277,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     @include mq(sm, max) {
       display: block;
     }
-    :global(.vtex-input__label) {
+    :global(.vtex-input) {
-      font-size: 0;
+      position: relative;
-      &::before {
+      :global(.vtex-input__label) {
-        content: "CALCULAR FRETE";
+        font-size: 0;
-        font-weight: 400;
+        &::before {
-        font-size: 14px;
+          content: "CALCULAR FRETE";
-        line-height: 19px;
+          font-weight: 400;
-        color: $color-gray-6;
+          font-size: 14px;
-      }
+          line-height: 19px;
-    }
+          color: $color-gray-6;
-    :global(.vtex-input-prefix__group) {
+        }
-      width: 280px;
+      }
-      height: 49px;
+      :global(.vtex-input-prefix__group) {
-      border-radius: 0;
+        width: 280px;
-      @include mq(sm, max) {
+        height: 49px;
-        width: 100%;
+        border-radius: 0;
+        @include mq(sm, max) {
+          width: 100%;
+        }
+      }
+      :global(.vtex-input__error) {
+        position: absolute;
       }
     }
+
     :global(.vtex-address-form__postalCode-forgottenURL) {
       padding: 0;
       margin-top: 25px;
@@ -302,19 +327,21 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   :global(.vtex-button) {
     height: 49px;
     width: 49px;
-    margin-top: auto !important;
+    margin-top: 27px !important;
     position: relative;
     right: 148px;
     font-size: 0;
     border-radius: 0;
+    background-color: $color-black-padrao;
+    border: none;
     cursor: pointer;
 
     @include mq(sm, max) {
       height: 49px !important;
       margin: 0 !important;
       position: absolute;
-      right: 0px;
+      right: 0;
-      top: 26px;
+      top: 27px;
     }
     &::before {
       content: "OK";
@@ -423,13 +450,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 
 /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
-.imageElement {
+.productImageTag--description {
-  width: 100%;
+  max-height: 100% !important;
 }
 
 /* DESCRIÇÃO DO PRODUTO */
 .productDescriptionContainer {
   margin-left: 16px;
+  @include mq(md, max) {
+    margin: 0;
+  }
   .productDescriptionTitle {
     font-weight: 400;
     font-size: 24px;
@@ -437,11 +467,25 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     height: 40px;
     margin-bottom: 8px;
     color: $color-gray13;
+    @include mq(md, max) {
+      font-size: 20px;
+    }
+    @include mq(xl, min) {
+      font-size: 32px;
+    }
   }
   .productDescriptionText {
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
     color: $color-gray14;
+    @include mq(md, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+    @include mq(xl, min) {
+      font-size: 18px;
+      line-height: 25px;
+    }
   }
 }

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

@@ -0,0 +1,79 @@
+.newsletterForm--container-newsletter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: $color-black-padrao;
+  position: relative;
+}
+
+.emailInputContainer {
+  border-bottom: 1px solid $color-gray14;
+  width: 100%;
+  position: relative;
+  height: 32px;
+  :global(.vtex-input) {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    :global(.vtex-input__error) {
+      position: absolute;
+      right: 0;
+      margin-right: 16px;
+      @include mq(sm, max) {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+      }
+    }
+    :global(.vtex-input-prefix__group) {
+      border: none;
+      height: 32px;
+      width: 100%;
+      :global(.vtex-styleguide-9-x-input) {
+        background-color: transparent;
+        padding: 0 0 7px 0;
+        color: $color-white;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        @include mq(md, max) {
+          padding: 0 0 16px 16px;
+        }
+        @include mq(sm, max) {
+          padding: 0 0 16px 16px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+}
+
+.formSubmitContainer {
+  height: 32px;
+  border-bottom: 3px solid $color-gray12;
+  @include mq(md, max) {
+    right: 40px;
+  }
+  :global(.vtex-button) {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    :global(.vtex-button__label) {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      padding: 0 16px 13px 16px;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+  }
+}
+
+.defaultSuccessMessage {
+  color: white;
+  margin: 0 0 16px 0;
+  text-align: center;
+}

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

@@ -1,21 +1,40 @@
 .container--description {
   padding: 0 40px;
+  margin: 16px 0;
   .listContainer {
     display: flex;
-    padding: 0 80px;
+    padding: 0 64px;
     border-bottom: 1px solid $color-gray11;
     justify-content: space-between;
+    @include mq(md, max) {
+      padding: 0;
+      flex-direction: column;
+      border-top: 1px solid $color-gray11;
+      margin-top: 16px;
+      padding-top: 16px;
+    }
     .listItem {
       margin: 0;
       padding: 0;
       height: 38px;
       width: 114px;
+      @include mq(md, max) {
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      @include mq(xl, min) {
+        width: 142px;
+      }
 
       :global(.vtex-button) {
         background-color: transparent;
         border: none;
         color: $color-gray12;
         width: 100%;
+        @include mq(md, max) {
+          display: flex;
+          justify-content: flex-start;
+        }
 
         :global(.vtex-button__label) {
           padding: 0 !important;
@@ -24,12 +43,35 @@
           font-size: 18px;
           line-height: 38px;
           text-transform: capitalize;
+          border-bottom: 2px solid transparent;
+          @include mq(xl, min) {
+            font-size: 24px;
+            line-height: 38px;
+            border-bottom: 3px solid transparent;
+          }
           &:hover {
-            color: black;
+            color: $color-black-padrao;
             border-bottom: 2px solid $color-black-padrao;
+            @include mq(md, max) {
+              border-bottom: none;
+            }
           }
         }
       }
     }
+
+    .listItemActive {
+      color: $color-black-padrao;
+      border-bottom: 2px solid $color-black-padrao;
+      @include mq(md, max) {
+        border-bottom: none;
+      }
+      @include mq(xl, min) {
+        border-bottom: 3px solid $color-black-padrao;
+      }
+      :global(.vtex-button) {
+        color: $color-black-padrao;
+      }
+    }
   }
 }

styles/sass/utils/_vars.scss

@@ -27,8 +27,8 @@ $color-green: #4caf50;
 $grid-breakpoints: (
   xs: 0,
   cstm: 400,
-  sm: 768px,
+  sm: 769px,
-  md: 1024px,
+  md: 1025px,
   lg: 1920px,
   xl: 1921px,
 ) !default;