feat: adiciona newsletter, estlizacao e responsividade na pag de produto

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,76 @@
-@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;
   }
 }
 
+/*
+  DESCRIÇÃO DO PRODUTO SELECIONADO
+*/
 [class*="html--image-description"] {
   margin-right: 16px;
   width: 100%;
 }
+@media(max-width: 1024px){
+  [class*="html--image-description"] {
+    margin: 0;
+  }
+}
+
 
 [class*="html--container-description"] {
   margin: 32px 32px 16px 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%;
+}
+
+@media(max-width: 1024px){
+  [class*="html--container-form-input"] {
+    display: flex;
+    padding: 0 40px;
+    margin-bottom: 32px;
+    position: relative;
+    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",
+      "newsletter-form#container-newsletter"
     ]
   },
 
@@ -21,17 +22,87 @@
   },
 
 /*
-  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": ["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"]
   },
 
@@ -149,92 +220,92 @@
 */
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf#prateleira"],
-    "children": ["slider-layout#demo-products"]
+    "children": ["rich-text#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": {
-      "blockClass": "product"
-    },
     "children": [
-      "flex-layout.row#product-image",
+      "stack-layout#prodsum",
-      "product-bookmark",
+      "product-summary-name",
-      "product-specification-badges"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 
-  "product-specification-badges": {
+  "rich-text#prateleira": {
     "props": {
-      "specificationGroupName": "Group",
+      "textAlignment": "CENTER",
-      "specificationName": "On Sale",
+      "textPosition": "CENTER",
-      "visibleWhen": "True",
+      "text": "Você também pode gostar:",
-      "displayValue": "SPECIFICATION_NAME"
+      "blockClass": "title-prateleira"
-    }
+      }
   },
 
-  "flex-layout.col#stack": {
+  "slider-layout#prateleira": {
-    "children": ["stack-layout"],
     "props": {
-      "blockClass": "stack",
+      "itemsPerPage": {
-      "width": "50%",
+        "desktop": 4,
-      "rowGap": 0
+        "tablet": 3,
-    }
+        "phone": 1
-  },
-  "flex-layout.row#product-image": {
-    "children": ["product-images"]
-  },
-  "product-images": {
-    "props": {
-      "thumbnailsOrientation": "horizontal",
-      "showPaginationDots": false,
-      "showNavigationArrows": false,
-      "aspectRatio": {
-        "desktop": "auto",
-        "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "infinite": true,
+      "fullWidth": false,
+      "blockClass": "prateleira"
     }
   },
 
   /*
-  INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
+    NEWSLETTER
+  */
+  "newsletter-form#container-newsletter": {
+    "props": {
+      "blockClass": "container-newsletter"
+    },
+
+    "children": [
+      "rich-text#subscriber-newsletter",
+      "rich-text#offer-newsletter",
+      "html#container-form-input"
+    ]
+  },
+
+  "rich-text#subscriber-newsletter": {
+    "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"
+    }
+  },
+  "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,6 +318,7 @@
       "product-identifier.product",
       "flex-layout.row#selling-price",
       "product-installments#parcelaProduct",
+      "pix-discount",
       "availability-subscriber",
       "sku-selector",
       "html#buy-button",
@@ -263,6 +335,7 @@
 
   "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>"
@@ -288,12 +361,12 @@
     "children": ["product-quantity","add-to-cart-button"]
   },
 
+  /*
+    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,87 @@
 */
 /* 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;
-  border: none;
-  height: 49px;
-  margin-top: 8px;
-}
-@media only screen and (max-width: 767px) {
-  .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
-    margin: 0 0 16px;
-    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) {
-  font-size: 0;
-}
-.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 {
-  font-family: "Open sans", sans-serif;
-  content: "ADICIONAR À SACOLA";
-  font-size: 18px;
-  font-weight: 400;
-  padding: 12px 64px;
-  line-height: 22px;
 }

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;
-  margin-bottom: 16px;
   width: 149px;
-  margin-right: 10px;
+  margin: 0 10px 0 0;
 }
-@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

@@ -6,4 +6,74 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* 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;
   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) {
+  .productImagesGallerySlide .productImage {
+    margin: 0;
+  }
+}
+.productImagesGallerySlide .productImage .productImageTag {
   width: 100%;
   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;
@@ -239,7 +254,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,7 +265,7 @@ 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;
   }
@@ -270,7 +285,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   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) {
     width: 100%;
   }
@@ -285,7 +300,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 +316,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 +367,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 +384,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 +408,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;
   }
@@ -428,6 +445,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 .productDescriptionContainer {
   margin-left: 16px;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer {
+    margin: 0;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -436,6 +458,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
   margin-bottom: 8px;
   color: #575757;
 }
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    margin-top: 16px;
+  }
+}
 .productDescriptionContainer .productDescriptionText {
   font-weight: 400;
   font-size: 16px;

styles/css/vtex.store-newsletter.css

@@ -0,0 +1,94 @@
+/*
+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 #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) {
+    width: 100%;
+    top: 32px;
+    left: 18px;
+    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;
+}

styles/css/vtex.tab-layout.css

@@ -16,18 +16,39 @@
   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;
+  }
+}
 .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 +56,26 @@
   font-size: 18px;
   line-height: 38px;
   text-transform: capitalize;
+  border-bottom: 2px 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;
+  }
+}
+.container--description .listContainer .listItemActive :global(.vtex-button) {
+  color: #000000;
 }

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

@@ -1,65 +1,73 @@
+/* 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;
+    }
+  }
+}

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

@@ -1,12 +1,10 @@
 /* INPUT CONTADOR DE PRODUTO */
 .quantitySelectorContainer {
   height: 49px;
-  margin-top: 8px;
-  margin-bottom: 16px;
   width: 149px;
-  margin-right: 10px;
+  margin: 0 10px 0 0;
   @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,35 @@
 .container {
-  padding: 0;
   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 {
+      width: 100%;
+      max-height: 100% !important;
+      object-fit: contain;
+      @include mq(sm, max) {
+      }
+    }
   }
 }
 
 /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
 .carouselGaleryThumbs {
   margin: 16px 0;
+  @include mq(sm, max) {
+    display: block;
+  }
 
   .thumbImg {
     width: 90px;
@@ -302,19 +316,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";
@@ -430,6 +446,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
 /* DESCRIÇÃO DO PRODUTO */
 .productDescriptionContainer {
   margin-left: 16px;
+  @include mq(md, max) {
+    margin: 0;
+  }
   .productDescriptionTitle {
     font-weight: 400;
     font-size: 24px;
@@ -437,6 +456,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
     height: 40px;
     margin-bottom: 8px;
     color: $color-gray13;
+    @include mq(md, max) {
+      margin-top: 16px;
+    }
   }
   .productDescriptionText {
     font-weight: 400;

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

@@ -0,0 +1,77 @@
+.newsletterForm--container-newsletter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: $color-black-padrao;
+  margin-top: 64px;
+  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) {
+        width: 100%;
+        top: 32px;
+        left: 18px;
+        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;
+    }
+  }
+}

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

@@ -5,17 +5,32 @@
     padding: 0 80px;
     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;
+      }
 
       :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 +39,27 @@
           font-size: 18px;
           line-height: 38px;
           text-transform: capitalize;
+          border-bottom: 2px 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;
+      }
+      :global(.vtex-button) {
+        color: $color-black-padrao;
+      }
+    }
   }
 }

styles/sass/utils/_vars.scss

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