Merge pull request 'feature/pagina-de-produto' (#1) from feature/pagina-de-produto into master

Reviewed-on: #1

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/Pix.tsx

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

react/components/Html/index.tsx

@@ -1,40 +1,52 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./styles.css";
 
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {
-    children?: ReactNode,
+  children?: ReactNode;
   /**
    * Qual tag Html que deseja que seja usar
    *
    * @default div
    */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
   /**
    * Classes CSS extras que deseja adicionar.
    * Feito para uso de [classes do tachyons](https://tachyons.io/)
    */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
   /**
    * Se caso quiser usar esse componente
    * para adicinar um texto simples
    */
-    text?: string
+  text?: string;
   /**
    * Tag ID para
    */
-    testId?: string
+  testId?: string;
-}
+};
 
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+export const Html = ({
+  children = null,
+  tag = "div",
+  text = "",
+  tachyonsClasses: classes = "",
+  testId,
+}: HtmlProps) => {
   const { handles } = useCssHandles(CSS_HANDLES);
 
   const props = {
     className: `${handles.html} ${classes}`,
-      "data-testid": testId
+    "data-testid": testId,
   };
-    const Children = <>{children}{text}</>;
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
   const Element = React.createElement(tag, props, Children);
 
   return <>{Element}</>;

react/components/Html/styles.css

@@ -0,0 +1,31 @@
+[class*="html--buy-button"] {
+  display: flex;
+  gap: 10px;
+  margin: 0;
+}
+
+[class*="html--cart-button"] {
+  width: 100%;
+}
+
+[class*="html--buy-button"] :global(.vtex-button) {
+  height: 49px;
+  max-width: 806px;
+  background: black;
+  border: none;
+  border-radius: 0;
+}
+
+@media only screen and (min-width: 280px) and (max-width: 768px) {
+  [class*="html--buy-button"] {
+    flex-direction: column;
+  }
+
+  [class*="html--product-quantity"] {
+    height: 49px;
+  }
+
+  [class*="html--buy-button"] :global(.vtex-button) {
+    height: 70px;
+  }
+}

react/components/Pix/Pix.tsx

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

react/components/Pix/style.module.css

@@ -0,0 +1,28 @@
+/* .pix-container {
+
+} */
+
+.pix-content {
+  display: flex;
+  align-items: center;
+  gap: 26px;
+  margin: 8px 0 16px;
+}
+
+.pix-image {
+  height: fit-content;
+}
+
+.pix-value {
+  font-weight: 700;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.58);
+  margin: 0;
+}
+
+.pix-text {
+  font-weight: 300;
+  font-size: 13px;
+  color: #929292;
+  margin: 0;
+}

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/home/home.jsonc

@@ -2,8 +2,9 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      "example-component",      /* You can make references to blocks defined in other files.
+      "example-component"
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
+      /* You can make references to blocks defined in other files.
+       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */,
       "flex-layout.row#deals",
       "__fold__",
       "rich-text#shelf-title",

store/blocks/minicart.jsonc

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

store/blocks/pdp/product-assembly.jsonc

@@ -1,10 +1,10 @@
 {
-  "sticky-layout#buy-button": {
+  // "sticky-layout#buy-button": {
-    "props": {
+  //   "props": {
-      "position": "bottom"
+  //     "position": "bottom"
-    },
+  //   },
-    "children": ["flex-layout.row#buy-button"]
+  //   "children": ["flex-layout.row#buy-button"]
-  },
+  // },
   "product-assembly-options": {
     "children": [
       "flex-layout.row#product-assembly-options",
@@ -32,17 +32,13 @@
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +92,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product-tab-layout.jsonc

@@ -0,0 +1,160 @@
+  // Descrição
+
+  {
+    "html#tab-layout": {
+      "props" : {
+        "testId": "tab-layout"
+      }
+    },
+
+    "tab-layout": {
+    "children": ["tab-list", "tab-content"],
+    "props": {
+      "blockClass": "tabLayout"
+    }
+  },
+
+  "tab-list": {
+    "children": [
+      "tab-list.item#1",
+      "tab-list.item#2",
+      "tab-list.item#3",
+      "tab-list.item#4",
+      "tab-list.item#5"
+    ],
+    "props": {
+      "blockClass": "tabList"
+    }
+  },
+
+  "tab-content": {
+    "children": [
+      "tab-content.item#1",
+      "tab-content.item#2",
+      "tab-content.item#3",
+      "tab-content.item#4",
+      "tab-content.item#5"
+    ],
+    "props": {
+      "blockClass": "tabContent"
+    }
+  },
+
+  "tab-list.item#1": {
+    "props": {
+      "tabId": "description#1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+
+  "tab-list.item#2": {
+    "props": {
+      "tabId": "description#2",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#3": {
+    "props": {
+      "tabId": "description#3",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#4": {
+    "props": {
+      "tabId": "description#4",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#5": {
+    "props": {
+      "tabId": "description#5",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content.item#1": {
+    "children": ["product-images#description", "rich-text#1"],
+    "props": {
+      "tabId": "description#1"
+    }
+  },
+  "tab-content.item#2": {
+    "children": ["product-images#description", "rich-text#2"],
+    "props": {
+      "tabId": "description#2"
+    }
+  },
+  "tab-content.item#3": {
+    "children": ["product-images#description", "rich-text#3"],
+    "props": {
+      "tabId": "description#3"
+    }
+  },
+  "tab-content.item#4": {
+    "children": ["product-images#description", "rich-text#4"],
+    "props": {
+      "tabId": "description#4"
+    }
+  },
+  "tab-content.item#5": {
+    "children": ["product-images#description", "rich-text#5"],
+    "props": {
+      "tabId": "description#5"
+    }
+  },
+
+  "product-images#description": {
+    "props": {
+      "aspectRatio": {
+        "desktop": "auto",
+        "phone": "auto"
+      },
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "displayThumbnailsArrows": false,
+      "thumbnailsOrientation": "horizontal",
+      "zoomMode": "disabled",
+      "displayMode": "first-image"
+    }
+  },
+
+  "rich-text#1": {
+    "props": {
+      "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+      "textPosition": "CENTER",
+      "blockClass": "description-rich-text"
+    }
+  },
+  "rich-text#2": {
+    "props": {
+      "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+      "textPosition": "CENTER",
+      "blockClass": "description-rich-text"
+    }
+  },
+  "rich-text#3": {
+    "props": {
+      "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+      "textPosition": "CENTER",
+      "blockClass": "description-rich-text"
+    }
+  },
+  "rich-text#4": {
+    "props": {
+      "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+      "textPosition": "CENTER",
+      "blockClass": "description-rich-text"
+    }
+  },
+  "rich-text#5": {
+    "props": {
+      "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
+      "textPosition": "CENTER",
+      "blockClass": "description-rich-text"
+    }
+  }
+}

store/blocks/pdp/product.jsonc

@@ -3,13 +3,16 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "html#tab-layout",
-      "flex-layout.row#specifications-title",
+      "rich-text#carousel",
-      "product-specification-group#table",
+      "list-context.product-list#product-carousel",
-      "shelf.relatedProducts",
+      "product-questions-and-answers",
-      "product-questions-and-answers"
+      "newsletter"
     ]
   },
+
+  // Breadcrumb
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -18,6 +21,9 @@
     },
     "children": ["breadcrumb"]
   },
+
+  // Produto
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -45,6 +51,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass": "product-main",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -66,34 +73,39 @@
     ]
   },
 
-  "product-specification-badges": {
+  // Imagens de produto
-    "props": {
-      "specificationGroupName": "Group",
-      "specificationName": "On Sale",
-      "visibleWhen": "True",
-      "displayValue": "SPECIFICATION_NAME"
-    }
-  },
 
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      // "width": "60%",
       "rowGap": 0
     }
   },
   "flex-layout.row#product-image": {
-    "children": ["product-images"]
+    "children": ["html#product-images"]
   },
+  "html#product-images": {
+    "children": ["product-images"],
+    "props": {
+      "testId": "product-images"
+    }
+  },
+
   "product-images": {
     "props": {
       "aspectRatio": {
-        "desktop": "auto",
+        "desktop": "auto"
-        "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "displayThumbnailsArrows": false,
+      "thumbnailsOrientation": "horizontal"
     }
   },
+
+  // Especificações de produto
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
@@ -101,23 +113,28 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-rating-summary",
+      "product-identifier.product",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      "html#pix-price",
-      "product-identifier.product",
+      "html#sku-selector",
-      "sku-selector",
+      "html#buy-button",
-      "product-quantity",
-      "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "rich-text#labelCep",
-      "share#default"
+      "html#shipping-simulator"
     ]
   },
 
+  // Título CEP
+
+  "rich-text#labelCep": {
+    "props": {
+      "blockClass": "labelCep",
+      "text": "CALCULAR FRETE:"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -125,23 +142,71 @@
     "children": ["vtex.store-components:product-name"]
   },
 
-  "sku-selector": {
+  // Skus
+
+  "html#sku-selector": {
+    "children": ["sku-selector"],
     "props": {
-      "variationsSpacing": 3,
+      "testId": "sku-selector"
-      "showValueNameForImageVariation": true
     }
   },
 
-  "flex-layout.row#buy-button": {
+  "sku-selector": {
     "props": {
-      "marginTop": 4,
+      "variationsSpacing": 3,
-      "marginBottom": 7
+      "showValueNameForImageVariation": true,
+      "blockClass": "size-sku"
+    }
   },
-    "children": ["add-to-cart-button"]
+
+  // Parcelamento
+
+  "product-installments": {
+    "props": {
+      "markers": ["discount"],
+      "message": "<discount>{installmentsNumber} x</discount> de {installmentValue} sem juros",
+      "installmentsCriteria": "max-quantity-without-interest"
+    }
   },
 
+  // Quantidade e botão de compra
+
+  "html#buy-button": {
+    "props": {
+      "blockClass": "buy-button"
+    },
+    "children": ["html#product-quantity-size", "html#cart-button"]
+  },
+
+  "html#cart-button": {
+    "children": ["add-to-cart-button"],
+    "props": {
+      "testId": "add-to-cart-button",
+      "blockClass": "cart-button"
+    }
+  },
+
+  "html#product-quantity-size": {
+    "children": ["product-quantity#size"],
+    "props": {
+      "testId": "product-quantity",
+      "blockClass": "product-quantity"
+    }
+  },
+
+  "product-quantity#size": {
+    "props": {
+      "size": "large",
+      "width": "28%",
+      "showLabel": false
+    }
+  },
+
+  // Produto indisponível
+
   "flex-layout.row#product-availability": {
     "props": {
+      "blockClass": "product-availability",
       "colGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
@@ -152,6 +217,7 @@
       "flex-layout.col#right-col-availability"
     ]
   },
+
   "flex-layout.col#right-col-availability": {
     "props": {
       "preventVerticalStretch": true,
@@ -161,10 +227,13 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
+
+  // Formulário produto indisponível
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
@@ -172,14 +241,86 @@
     "children": ["availability-subscriber"]
   },
 
-  "share#default": {
+  // Desconto Pix
+
+  "html#pix-price": {
+    "children": ["Pix"],
     "props": {
-      "social": {
+      "testId": "pix-price"
-        "Facebook": true,
+    }
-        "WhatsApp": true,
+  },
-        "Twitter": false,
+
-        "Pinterest": true
+  // Prateleira de produtos
+
+  "rich-text#carousel": {
+    "props": {
+      "text": "Você também pode gostar:",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "blockClass": "carousel-title"
+    }
+  },
+
+  "product-summary.shelf#carousel": {
+    "children": ["html#product-summary"]
+  },
+
+  "list-context.product-list#product-carousel": {
+    "blocks": ["product-summary.shelf#carousel"],
+    "children": ["html#product-summary-list"]
+  },
+
+  "html#product-summary-list": {
+    "children": ["slider-layout#demo-products"],
+    "props": {
+      "testId": "product-summary-list"
+    }
+  },
+
+  "slider-layout#demo-products": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
       }
     }
+  },
+
+  "html#product-summary": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-price"
+    ]
+  },
+
+  "product-summary-image": {
+    "props": {
+      "aspectRatio": "1:1",
+      "showBadge": false
+    }
+  },
+
+  // Newsletter
+
+  "newsletter": {
+    "props": {
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail",
+      "submit": "ENVIAR"
+    }
+  },
+
+  // Informações de frete
+
+  "html#shipping-simulator" : {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
   }
 }

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
+    "children": ["icon-expand", "modal-layout#quickview"],
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
     "props": {
       "blockClass": "quickview"
     }
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
+    "children": ["product-summary-quantity#quickview"]
-      "product-summary-quantity#quickview"
-    ]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
+    "children": ["add-to-cart-button"],
-      "add-to-cart-button"
-    ],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
+    "children": ["link.product#button-pdp"]
-      "link.product#button-pdp"
-    ]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
+    "children": ["product-images#quickview"]
-      "product-images#quickview"
-    ]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"

store/interfaces.json

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

styles/configs/font-faces.css

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-Regular.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-Light.ttf");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-SemiBold.ttf");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-Bold.ttf");
+  font-weight: 700;
+}
+

styles/configs/style.json

@@ -1,26 +1,28 @@
 {
-    "typeScale": [
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
   "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
   "customMedia": [
     { "s": 20 },
-        { "ns": {
+    {
+      "ns": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "m": {
+    {
+      "m": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "l": {
+    {
+      "l": {
         "value": 64,
         "minWidth": true
       }
     },
-        { "xl": {
+    {
+      "xl": {
         "value": 80,
         "minWidth": true
       }
@@ -253,84 +255,84 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

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

@@ -0,0 +1,22 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #fff;
+  padding: 7px 0;
+}
+@media screen and (max-width: 768px) {
+  .buttonText {
+    width: 168px;
+  }
+}

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,37 @@
+/*
+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 */
+.container {
+  padding: 14px 36px;
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    margin: 0px 356px;
+    padding: 14px 0;
+  }
+}
+.container .link,
+.container .term {
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .homeIcon {
+  display: none;
+}
+.container .link::after {
+  content: "Home";
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .link--1::after,
+.container .link--2::after {
+  display: none;
+}

styles/css/vtex.flex-layout.css

@@ -1,3 +1,23 @@
+/*
+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 */
+.flexRowContent {
+  margin: 0;
+  padding-top: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--product-availability {
+    flex-direction: column;
+  }
+}
+
 .flexRowContent--menu-link,
 .flexRowContent--main-header {
   padding: 0 0.5rem;
@@ -9,14 +29,12 @@
     padding: 0 1rem;
   }
 }
-
 @media screen and (min-width: 80rem) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 0.25rem;
   }
 }
-
 .flexRowContent--menu-link {
   background-color: #03044e;
   color: #fff;
@@ -42,8 +60,18 @@
   font-size: 14px;
 }
 
+.flexRowContent--product-main {
+  margin: 0;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--product-main {
+    flex-direction: column;
+  }
+}
+
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #fff;
   padding: 14px 0px;
 }
 
@@ -93,6 +121,24 @@
   height: 34% !important;
 }
 
-.flexRow--addToCartRow {
+.stretchChildrenWidth {
-  padding-bottom: 1rem;
+  margin: 0;
+}
+@media screen and (max-width: 1024px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+.flexRowContent--buy-button {
+  height: 49px;
+  display: flex;
+  justify-content: center;
+}
+
+.flexRowContent--buy-button :global(.vtex-button) {
+  background: #000000;
+  border: none;
+  border-radius: 0;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,28 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.product-identifier__label {
+  display: none;
+}
+.product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  display: flex;
+  justify-content: end;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}
+@media screen and (max-width: 1024px) {
+  .product-identifier__value {
+    justify-content: start;
+  }
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,38 @@
+/*
+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 */
 .listPrice {
-  color: #727273;
+  display: none;
-  margin-bottom: .25rem;
-  font-size: 1rem;
 }
 
-.sellingPrice {
+@media screen and (max-width: 1024px) {
-  color: #3f3f40;
+  :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) {
-  font-size: 1.25rem;
+    margin-top: 24px !important;
+  }
 }
 
 .sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+  margin: 0;
 }
 
 .installments {
-  color: #727273;
+  font-size: 16px;
-  margin-bottom: 1rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: #929292;
+  margin-bottom: 16px;
 }
-
+.installments .installments-discount,
-.savings {
+.installments .installmentValue {
-  font-weight: 500;
+  font-weight: 700;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,50 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.QuantitySelectorContainer {
+  margin-bottom: 16px;
+}
+
+:global(.vtex-numeric-stepper__minus-button),
+:global(.vtex-numeric-stepper__plus-button) {
+  background-color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+  border-radius: 0;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  border-top: 1px;
+  border-left: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: #cccccc;
+}
+
+:global(.vtex-numeric-stepper__plus-button) {
+  border-top: 1px;
+  border-right: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: #cccccc;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  width: 32px;
+  border-top: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-right: none;
+  border-left: none;
+  border-color: #cccccc;
+  color: #929292;
+  outline: 0;
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,31 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+/* Grid breakpoints */
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+.imageWrapper {
-  opacity: 1;
+  height: 314px;
-}
+  display: flex;
-
+  justify-content: center;
-@media screen and (max-width: 40em) {
+  align-items: center;
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
 }
 
 .nameContainer {
-  justify-content: start;
+  padding: 0 0 8px;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
-
+.nameContainer .brandName {
-.brandName {
+  font-weight: 400;
-  font-weight: 600;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
+  color: #000000;
 }
-
+@media screen and (max-width: 1024px) {
-.container {
+  .nameContainer .brandName {
-  text-align: start;
+    font-size: 14px;
+    line-height: 19px;
   }
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.rich-text.css

@@ -7,3 +7,37 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.paragraph--carousel-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  margin: 0;
+}
+@media screen and (max-width: 1024px) {
+  .paragraph--carousel-title {
+    padding-top: 16px;
+  }
+}
+@media screen and (min-width: 280px) and (max-width: 768px) {
+  .paragraph--carousel-title {
+    font-size: 20px;
+  }
+}
+
+.wrapper--labelCep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.wrapper--labelCep .paragraph--labelCep {
+  margin: 0;
+}
+@media screen and (min-width: 280px) and (max-width: 768px) {
+  .wrapper--labelCep .paragraph--labelCep {
+    margin: 16px 0 0;
+  }
+}

styles/css/vtex.shelf.css

@@ -7,10 +7,8 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
+.title {
-  background-color: red;
+  font-weight: 400;
-}
+  font-size: 24px;
-
+  line-height: 38px;
-.html--pdp-breadcrumb {
-  background-color: green;
 }

styles/css/vtex.slider-layout.css

@@ -1,31 +1,129 @@
+/*
+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 */
 .sliderLayoutContainer {
-  justify-content: center;
+  width: 94%;
+  margin: auto;
+  padding: 0;
+}
+@media screen and (min-width: 1920px) {
+  .sliderLayoutContainer {
+    width: 62%;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer {
+    width: 100%;
+    padding: 0 40px;
+  }
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
+  max-width: unset !important;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-element) {
+  padding: 0;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageNormal) {
+  height: 314px;
+  width: 105%;
+  max-height: unset !important;
+  object-fit: contain;
+}
+.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageStackContainer) {
+  display: flex;
 }
 
-.sliderLayoutContainer--carousel {
+.slideChildrenContainer {
-  background-color: #F0F0F0;
+  padding-right: 16px;
-  min-height: 450px;
 }
 
-.sliderTrackContainer {
+:global(.vtex-store-components-3-x-listPrice) {
-  max-width: 100%;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  margin: 0;
+  padding-bottom: 8px;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-store-components-3-x-listPrice) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
+  display: none;
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
+  content: "de ";
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
+  content: " por";
+}
+
+:global(.vtex-store-components-3-x-sellingPrice) {
+  padding: 0;
+}
+:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
+  display: none;
+}
+:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+
+:global(.vtex-slider-layout-0-x-sliderRightArrow) {
+  visibility: hidden;
+}
+:global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
+  visibility: visible;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
+  margin: 0 40px 0 0;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
+    margin: 0;
+  }
+}
+
+:global(.vtex-slider-layout-0-x-sliderLeftArrow) {
+  visibility: hidden;
+}
+:global(.vtex-slider-layout-0-x-sliderLeftArrow)::before {
+  visibility: visible;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png);
+  margin: 0 0 0 40px;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before {
+    margin: 0;
+  }
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  align-items: center;
-  margin-bottom: .5rem;
+  bottom: -30px;
 }
-
+.paginationDotsContainer .paginationDot {
-.layoutContainer--shelf {
+  background-color: #000000;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
 }
-
+.paginationDotsContainer .paginationDot--isActive {
-.slide--shelf {
+  background-color: white;
-  margin-bottom: 25px;
+  border: 1px solid #000000;
-  padding-left: .5rem;
+  width: 17px !important;
-  padding-right: .5rem;
+  height: 17px !important;
-  min-height: 550px;
 }

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -7,6 +8,564 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.container {
-  background: red;
+  padding: 0 40px;
+  margin: 0;
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    margin: 6px 360px;
+    padding: 0;
+  }
+}
+
+.productNameContainer--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+@media screen and (max-width: 1024px) {
+  .productNameContainer--quickview {
+    margin-top: 32px;
+    text-align: left;
+  }
+}
+
+.productImageTag--main {
+  max-height: max-content !important;
+  max-width: 100%;
+}
+
+.carouselGaleryThumbs {
+  display: block;
+  margin-top: 16px;
+  margin-right: 16px;
+  max-height: 90px;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  height: 90px;
+  width: 100%;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  height: 90px;
+  width: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  width: 90px !important;
+  margin-right: 16px;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  order: 2;
+  margin-bottom: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .diagonalCross {
+  color: #000000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-color: #000000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
+  color: #d5d5d5;
+  top: 5px;
+  left: 6px;
+  bottom: 0px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  transform: rotateY(180deg);
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer {
+  margin-bottom: 8px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  order: 1;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorItem--selected .diagonalCross {
+  color: #000000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  border-color: #989898;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  border-color: #000000;
+  top: -2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
+  color: #d5d5d5;
+  top: 4px;
+  left: 6px;
+  bottom: 0px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  transform: rotateY(180deg);
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+
+.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku {
+  color: #000000;
+}
+
+.skuSelectorItemTextValue {
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorItem {
+  margin: 0 16px 0 0;
+}
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  width: 409px;
+  height: 49px;
+  margin-top: 16px;
+}
+@media (max-width: 1024px) {
+  .shippingContainer {
+    margin: 16px 0;
+  }
+}
+@media (max-width: 560px) {
+  .shippingContainer {
+    width: 296px;
+    margin-bottom: 40px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  width: 280px;
+  height: 49px;
+}
+@media (max-width: 560px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+    width: 247px;
+  }
+}
+@media (max-width: 280px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+    width: 151px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 1px solid #cccccc;
+  border-radius: 0px;
+  height: 49px;
+  border-right: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  padding: 16.5px 16px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: absolute;
+  right: -57px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+  color: #000000 !important;
+}
+@media (max-width: 560px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    top: 45px;
+    right: -4px;
+  }
+}
+@media (max-width: 280px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    right: 96px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  font-size: 0;
+  background: #000000;
+  width: 49px;
+  height: 49px;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+}
+.shippingContainer :global(.vtex-button):hover {
+  opacity: 0.8;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "Ok";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  padding: 0;
+}
+
+:global(.vtex-button__label) {
+  height: fit-content;
+}
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: 4px 0;
+}
+@media screen and (max-width: 1024px) {
+  .shippingTable {
+    margin-bottom: 12px;
+  }
+}
+.shippingTable .shippingTableHead {
+  display: flex;
+  flex-direction: row;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
+  padding: 0;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+  min-width: 140px;
+  text-align: left;
+}
+@media screen and (max-width: 540px) {
+  .shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
+    min-width: 100px;
+  }
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
+  font-size: 0;
+  min-width: 140px;
+  text-align: left;
+}
+@media screen and (max-width: 540px) {
+  .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
+    min-width: 100px;
+  }
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate::after {
+  content: "FRETE";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
+  font-size: 0;
+  min-width: 140px;
+  text-align: left;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after {
+  content: "PRAZO";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: flex;
+  flex-direction: row;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  display: flex;
+  order: 3;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate .shippingTableCellDeliveryPrice {
+  display: flex;
+  order: 2;
+}
+.shippingTable .shippingTableBody .shippingTableCell {
+  padding: 0;
+  display: flex;
+  color: #afafaf;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  min-width: 140px;
+  padding-top: 15px;
+}
+@media screen and (max-width: 540px) {
+  .shippingTable .shippingTableBody .shippingTableCell {
+    min-width: 100px;
+  }
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .subscriberContainer {
+    margin-top: 24px;
+  }
+}
+.subscriberContainer .title {
+  font-size: 0;
+  margin: 0;
+}
+.subscriberContainer .title::after {
+  content: "Produto indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.subscriberContainer .form {
+  width: 100%;
+  margin: 0;
+}
+.subscriberContainer .form .content {
+  display: grid;
+  grid-template-areas: " nome email" " submit submit";
+  justify-content: inherit;
+  gap: 8px;
+}
+.subscriberContainer .form .content .inputName {
+  grid-area: nome;
+}
+.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group),
+.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) {
+  border-radius: 0;
+  border: 1px solid #989898;
+}
+.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input),
+.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  padding: 12px 14px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #989898;
+}
+.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder,
+.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #989898;
+}
+.subscriberContainer .form .content .inputEmail {
+  grid-area: email;
+}
+.subscriberContainer .form .content .submit {
+  grid-area: submit;
+  width: 100%;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  height: 49px;
+  cursor: pointer;
+  background-color: #000000;
+  border: none;
+  border-radius: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button):hover {
+  opacity: 0.8;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label) {
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
+  content: "avise-me";
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
+}
+
+.newsletter {
+  display: block;
+  background: #000000;
+  margin-top: 96px;
+}
+.newsletter :global(.vtex-store-components-3-x-container) {
+  margin: auto;
+}
+.newsletter :global(.vtex-store-components-3-x-form) {
+  padding: 32px 0 13px;
+  width: 774px;
+  max-width: 774px;
+  position: relative;
+}
+@media screen and (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-form) {
+    width: 100%;
+    max-width: 100%;
+    padding: 64px 0 32px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label {
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media screen and (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-form) .label::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+  padding-top: 16px;
+  display: flex;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
+  border: none;
+  border-radius: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  border-radius: 0;
+  border-bottom: 1px solid #929292;
+  background: transparent;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer {
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  background-color: transparent;
+  border: none;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button):hover {
+  opacity: 0.8;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
+  border-bottom: 3px solid #929292;
+  padding: 6px 17px 12px !important;
 }

styles/css/vtex.styleguide.css

@@ -0,0 +1,17 @@
+/*
+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 */
+.subscriberContainer .hideDecorators::placeholder {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+.subscriberContainer :global(.vtex-styleguide-9-x-input) {
+  border: 1px solid red;
+}

styles/css/vtex.tab-layout.css

@@ -0,0 +1,196 @@
+/*
+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 */
+:global(.vtex-tab-layout-0-x-container) {
+  padding: 0 40px;
+  margin: 0;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-tab-layout-0-x-container) {
+    margin: 6px 360px;
+    padding: 0;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
+  border-bottom: 1px solid #bfbfbf;
+  height: 43px;
+  justify-content: space-between;
+  padding: 0 64px;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
+    height: 49px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
+    border-top: 1px solid #bfbfbf;
+    flex-direction: column;
+    height: fit-content;
+    padding: 16px 0 0 0;
+    margin: 0;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem {
+    align-self: flex-start;
+    flex-direction: column;
+    height: fit-content;
+    padding: 0 0 16px;
+    margin: 0;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) {
+  border: none;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) {
+    width: 100%;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover {
+  background-color: transparent;
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 18px;
+  color: #bfbfbf;
+  text-transform: capitalize;
+  padding: 0.25em 10px 0.32em;
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover {
+  color: #929292;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
+    font-size: 24px;
+    line-height: 24px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
+    text-align: left;
+    flex-direction: column;
+    height: fit-content;
+    padding: 0 !important;
+    font-size: 18px;
+    line-height: 18px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive {
+    align-self: flex-start;
+    flex-direction: column;
+    height: fit-content;
+    padding: 0 0 16px;
+    margin: 0;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) {
+  background-color: transparent;
+  width: 114px;
+  border: none;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) {
+    width: 100%;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
+  color: #000000;
+  background-color: transparent;
+  border-bottom: 2px solid #000000;
+  padding: 0;
+}
+:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover {
+  color: #000000;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
+    flex-direction: column;
+    text-align: left;
+    height: fit-content;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
+    border: none;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  align-items: flex-start;
+  padding: 32px 32px 16px;
+}
+@media (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 0 0 0;
+    border-bottom: 1px solid #bfbfbf;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem .productImagesContainer {
+  width: 50%;
+  max-width: 50%;
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
+  max-width: 50%;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
+    max-width: 100%;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-top: 0;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+    font-size: 20px;
+    line-height: 32px;
+  }
+}
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+@media screen and (min-width: 1920px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}

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

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

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

@@ -0,0 +1,12 @@
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: $white;
+  padding: 7px 0;
+
+  @media screen and (max-width: 768px) {
+    width: 168px;
+  }
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -0,0 +1,39 @@
+// Breadcrumb
+
+.container {
+  padding: 14px 36px;
+
+  @media screen and (min-width: 1920px) {
+    margin: 0px 356px;
+    padding: 14px 0;
+  }
+
+  .link,
+  .term {
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray-500;
+  }
+
+  // Home
+
+  .homeIcon {
+    display: none;
+  }
+
+  .link::after {
+    content: "Home";
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray-500;
+  }
+
+  // Outros links
+
+  .link--1,
+  .link--2 {
+    &::after {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+.flexRowContent {
+  margin: 0;
+  padding-top: 0;
+
+}
+
+.flexRowContent--product-availability {
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.flexRowContent--menu-link,
+.flexRowContent--main-header {
+  padding: 0 0.5rem;
+}
+
+@media screen and (min-width: 40em) {
+  .flexRowContent--menu-link,
+  .flexRowContent--main-header {
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .flexRowContent--menu-link,
+  .flexRowContent--main-header {
+    padding: 0 0.25rem;
+  }
+}
+
+.flexRowContent--menu-link {
+  background-color: #03044e;
+  color: #fff;
+}
+
+.flexRowContent--main-header {
+  background-color: #f0f0f0;
+}
+
+.flexRowContent--main-header-mobile {
+  align-items: center;
+  padding: 0.625rem 0.5rem;
+  background-color: #f0f0f0;
+}
+
+.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
+  color: #727273;
+  font-size: 14px;
+}
+
+.flexRowContent--product-main {
+  margin: 0;
+  padding: 0;
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.flexRow--deals {
+  background-color: $white;
+  padding: 14px 0px;
+}
+
+.flexRow--deals .stretchChildrenWidth {
+  align-items: center;
+}
+
+.flexRow--deals .flexCol {
+  align-items: center;
+  margin-bottom: 5px;
+  padding-top: 5px;
+}
+
+.flexCol--filterCol {
+  max-width: 500px;
+  min-width: 230px;
+}
+
+.flexCol--productCountCol {
+  align-items: flex-start;
+}
+
+.flexCol--orderByCol {
+  align-items: flex-end;
+}
+
+.flexCol--orderByMobileCol {
+  width: 42%;
+}
+
+.flexCol--filterMobileCol {
+  width: 38%;
+}
+
+.flexRow--quickviewMainRow {
+  display: flex;
+  max-height: 100%;
+}
+
+.flexColChild--quickviewDetails:first-child {
+  overflow-y: auto;
+  height: 66% !important;
+  overflow-x: hidden;
+}
+
+.flexColChild--quickviewDetails:last-child {
+  height: 34% !important;
+}
+
+.stretchChildrenWidth {
+  margin: 0;
+
+  @media screen and (max-width: 1024px) {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+.flexRowContent--buy-button {
+  height: 49px;
+  display: flex;
+  justify-content: center;
+}
+
+.flexRowContent--buy-button :global(.vtex-button) {
+  background: $black;
+  border: none;
+  border-radius: 0;
+}

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

@@ -0,0 +1,26 @@
+
+// Código de identificação do produto
+
+.product-identifier {
+
+  &__label {
+    display: none;
+  }
+
+  &__separator {
+    display: none;
+  }
+
+  &__value {
+    display: flex;
+    justify-content: end;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: rgba(146, 146, 146, 0.48);
+
+    @media screen and (max-width: 1024px) {
+      justify-content: start;
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+.listPrice {
+  display: none;
+}
+
+// Preço
+
+:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) {
+  @media screen and (max-width: 1024px) {
+    margin-top: 24px !important;
+  }
+}
+
+.sellingPriceValue {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: $black;
+  margin: 0;
+}
+
+// Informações de parcelamento
+
+.installments {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+  color: $gray-500;
+  margin-bottom: 16px;
+
+  .installments-discount,
+  .installmentValue {
+    font-weight: 700;
+  }
+
+  // .installmentsNumber {
+  //   font-size: 0 !important;
+
+  //   &::before {
+  //     content: "36 x";
+  //     font-size: 16px;
+  //   }
+
+  //   &::after {
+  //     content: " de ";
+  //     font-weight: 400;
+  //     font-size: 16px;
+  //   }
+  // }
+
+  // .installmentValue {
+  //   &::after {
+  //     content: " sem juros";
+  //     font-weight: 400;
+  //   }
+  // }
+}

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

@@ -0,0 +1,53 @@
+// Quantidade de produtos
+
+// Container
+
+.QuantitySelectorContainer {
+  margin-bottom: 16px;
+}
+
+// Botões
+
+:global(.vtex-numeric-stepper__minus-button),
+:global(.vtex-numeric-stepper__plus-button) {
+  background-color: $white;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $black;
+  border-radius: 0;
+}
+
+// Botão de -
+
+:global(.vtex-numeric-stepper__minus-button) {
+  border-top: 1px;
+  border-left: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: $gray-1000;
+}
+
+// Botão de +
+
+:global(.vtex-numeric-stepper__plus-button) {
+  border-top: 1px;
+  border-right: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: $gray-1000;
+}
+
+// Input
+
+:global(.vtex-numeric-stepper__input) {
+  width: 32px;
+  border-top: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-right: none;
+  border-left: none;
+  border-color: $gray-1000;
+  color: $gray-500;
+  outline: 0;
+}

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

@@ -0,0 +1,28 @@
+// Prateleira de produtos
+
+// Imagem do produto
+
+.imageWrapper {
+  height: 314px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Nome do produto
+
+.nameContainer {
+  padding: 0 0 8px;
+
+  .brandName {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: $black;
+
+    @media screen and (max-width: 1024px) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+// Título da prateleira
+
+.paragraph--carousel-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: $gray-600;
+  margin: 0;
+
+  @media screen and (max-width: 1024px) {
+    padding-top: 16px;
+  }
+
+  @media screen and (min-width: 280px) and (max-width: 768px) {
+    font-size: 20px;
+  }
+}
+
+// Título CEP
+
+.wrapper--labelCep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $gray-500;
+
+  .paragraph--labelCep {
+    margin: 0;
+
+    @media screen and (min-width: 280px) and (max-width: 768px) {
+      margin: 16px 0 0;
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+// Prateleira de produtos
+
+// Container
+
+.sliderLayoutContainer {
+  width: 94%;
+  margin: auto;
+  padding: 0;
+
+  @media screen and (min-width: 1920px) {
+    width: 62%;
+  }
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+    padding: 0 40px;
+  }
+
+  :global(.vtex-product-summary-2-x-containerNormal) {
+    max-width: unset !important;
+
+    :global(.vtex-product-summary-2-x-element) {
+      padding: 0;
+    }
+  }
+
+  :global(.vtex-product-summary-2-x-imageNormal) {
+    height: 314px;
+    width: 105%;
+    max-height: unset !important;
+    object-fit: contain;
+  }
+
+  :global(.vtex-product-summary-2-x-imageStackContainer) {
+    display: flex;
+  }
+}
+
+// Informações de cada produto
+
+.slideChildrenContainer {
+  // width: 314px;
+  padding-right: 16px;
+}
+
+// Preço sem desconto
+
+:global(.vtex-store-components-3-x-listPrice) {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $gray-300;
+  margin: 0;
+  padding-bottom: 8px;
+
+  @media screen and (max-width: 1024px) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  :global(.vtex-store-components-3-x-listPriceLabel) {
+    display: none;
+  }
+
+  :global(.vtex-store-components-3-x-currencyContainer) {
+    &::before {
+      content: "de ";
+    }
+
+    &::after {
+      content: " por";
+    }
+  }
+}
+
+// Preço com desconto
+
+:global(.vtex-store-components-3-x-sellingPrice) {
+  padding: 0;
+
+  :global(.vtex-store-components-3-x-sellingPriceLabel) {
+    display: none;
+  }
+
+  :global(.vtex-store-components-3-x-sellingPriceValue) {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    color: $black;
+
+    @media screen and (max-width: 1024px) {
+      font-size: 18px;
+      line-height: 25px;
+    }
+  }
+}
+
+// Arrows
+
+:global(.vtex-slider-layout-0-x-sliderRightArrow) {
+  visibility: hidden;
+
+  &::after {
+    visibility: visible;
+    content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
+    margin: 0 40px 0 0;
+
+    @media screen and (min-width: 1920px) {
+      margin: 0;
+    }
+  }
+}
+
+:global(.vtex-slider-layout-0-x-sliderLeftArrow) {
+  visibility: hidden;
+
+  &::before {
+    visibility: visible;
+    content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png);
+    margin: 0 0 0 40px;
+
+    @media screen and (min-width: 1920px) {
+      margin: 0;
+    }
+  }
+}
+
+// Dots da prateleira de produtos
+
+.paginationDotsContainer {
+  align-items: center;
+  bottom: -30px;
+
+  .paginationDot {
+    background-color: $black;
+  }
+
+  .paginationDot--isActive {
+    background-color: white;
+    border: 1px solid $black;
+    width: 17px !important;
+    height: 17px !important;
+  }
+}

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

@@ -1,3 +1,660 @@
-.newsletter{
+// Produto
-    background: red;
+
+.container {
+  padding: 0 40px;
+  margin: 0;
+
+  @media screen and (min-width: 1920px) {
+    margin: 6px 360px;
+    padding: 0;
+  }
+}
+
+// Nome do produto
+
+.productNameContainer--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: $gray-600;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 32px;
+    text-align: left;
+  }
+}
+
+// Imagens do produto
+
+.productImageTag--main {
+  max-height: max-content !important;
+  max-width: 100%;
+  // max-width: max-content;
+  // max-width: 664px;
+}
+
+.carouselGaleryThumbs {
+  display: block;
+  margin-top: 16px;
+  margin-right: 16px;
+  max-height: 90px;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  height: 90px;
+  width: 100%;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  height: 90px;
+  width: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  width: 90px !important;
+  margin-right: 16px;
+}
+
+// Skus
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+
+  // Skus cor
+
+  .skuSelectorSubcontainer--cor {
+    order: 2;
+    margin-bottom: 16px;
+
+    .skuSelectorItem--selected {
+
+      .diagonalCross {
+        color: $black;
+      }
+    }
+
+    .skuSelectorNameContainer {
+      margin: 0;
+    }
+
+    .frameAround,
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 50%;
+      // width: 48px;
+      // height: 48px;
+    }
+
+    .frameAround {
+      border-color: $black;
+    }
+
+    .diagonalCross {
+      color: $gray-900;
+      top: 5px;
+      left: 6px;
+      bottom: 0px;
+      z-index: 2;
+      width: 28px;
+      height: 28px;
+      transform: rotateY(180deg);
+    }
+
+    .skuSelectorTextContainer {
+      margin-bottom: 8px;
+
+      .skuSelectorName {
+        font-size: 0;
+
+        &::after {
+          content: "OUTRAS CORES";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: $gray-500;
+        }
+      }
+
+      .skuSelectorSelectorImageValue {
+        display: none;
+      }
+    }
+  }
+
+  // Skus tamanho
+
+  .skuSelectorSubcontainer--tamanho {
+    order: 1;
+
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorOptionsList {
+        margin: 0;
+      }
+
+      .skuSelectorItem--selected {
+
+        .diagonalCross {
+          color: $black;
+        }
+      }
+    }
+
+    .skuSelectorItemTextValue {
+      padding: 0;
+      margin: auto;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+    }
+
+    .frameAround,
+    .skuSelectorInternalBox {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+    }
+
+    .skuSelectorInternalBox {
+      border-color: $gray-800;
+    }
+
+    .frameAround {
+      border-color: $black;
+      top: -2px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    .diagonalCross {
+      color: $gray-900;
+      top: 4px;
+      left: 6px;
+      bottom: 0px;
+      z-index: 2;
+      width: 28px;
+      height: 28px;
+      transform: rotateY(180deg);
+    }
+
+    .skuSelectorTextContainer {
+      .skuSelectorName {
+        font-size: 0;
+
+        &::after {
+          content: "OUTROS TAMANHOS:";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: $gray-500;
+        }
+      }
+
+      .skuSelectorSelectorImageValue {
+        display: none;
+      }
+    }
+  }
+}
+
+.skuSelectorItem--size-sku--selected {
+  .skuSelectorItemTextValue--size-sku {
+    color: $black;
+  }
+}
+
+.skuSelectorItemTextValue {
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorItem {
+  margin: 0 16px 0 0;
+}
+
+// Código Postal
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  width: 409px;
+  height: 49px;
+  margin-top: 16px;
+
+  @media (max-width: 1024px) {
+    margin: 16px 0;
+  }
+
+  @media (max-width: 560px) {
+    width: 296px;
+    margin-bottom: 40px;
+  }
+
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    padding: 0;
+    margin: 0;
+
+    :global(.vtex-input) {
+      width: 280px;
+      height: 49px;
+
+      @media (max-width: 560px) {
+        width: 247px;
+      }
+
+      @media (max-width: 280px) {
+        width: 151px;
+      }
+
+      :global(.vtex-input__label) {
+        display: none;
+      }
+      :global(.vtex-input-prefix__group) {
+        border: 1px solid #cccccc;
+        border-radius: 0px;
+        height: 49px;
+        border-right: 0;
+
+        :global(.vtex-address-form-4-x-input) {
+          padding: 16.5px 16px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          color: $gray-400;
+
+          &::placeholder {
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: $gray-400;
+          }
+        }
+      }
+    }
+
+    // Não sei meu CEP
+
+    :global(.vtex-address-form__postalCode-forgottenURL) {
+      position: absolute;
+      right: -57px;
+
+      :last-child {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        display: flex;
+        align-items: center;
+        text-decoration-line: underline;
+        color: $black !important;
+      }
+
+      @media (max-width: 560px) {
+        top: 45px;
+        right: -4px;
+      }
+
+      @media (max-width: 280px) {
+        right: 96px;
+      }
+
+      :global(.vtex__icon-external-link) {
+        display: none;
+      }
+    }
+  }
+
+  :global(.vtex-button) {
+    font-size: 0;
+    background: $black;
+    width: 49px;
+    height: 49px;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    :global(.vtex-button__label)::after {
+      content: "Ok";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+      color: $white;
+      padding: 0;
+    }
+  }
+}
+
+:global(.vtex-button__label) {
+  height: fit-content;
+}
+
+// Informações de entrega
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: 4px 0;
+
+  @media screen and (max-width: 1024px) {
+    margin-bottom: 12px;
+  }
+
+  .shippingTableHead {
+    display: flex;
+    flex-direction: row;
+
+    .shippingTableHeadDeliveryName,
+    .shippingTableHeadDeliveryEstimate,
+    .shippingTableHeadDeliveryPrice {
+      padding: 0;
+    }
+
+    .shippingTableHeadDeliveryName {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $gray-700;
+      text-transform: uppercase;
+      min-width: 140px;
+      text-align: left;
+
+      @media screen and (max-width: 540px) {
+        min-width: 100px;
+      }
+    }
+
+    .shippingTableHeadDeliveryEstimate {
+      font-size: 0;
+      min-width: 140px;
+      text-align: left;
+
+      @media screen and (max-width: 540px) {
+        min-width: 100px;
+      }
+
+      &::after {
+        content: "FRETE";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $gray-700;
+      }
+    }
+
+    .shippingTableHeadDeliveryPrice {
+      font-size: 0;
+      min-width: 140px;
+      text-align: left;
+
+      &::after {
+        content: "PRAZO";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $gray-700;
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      display: flex;
+      flex-direction: row;
+
+      .shippingTableCellDeliveryEstimate {
+        display: flex;
+        order: 3;
+
+        .shippingTableCellDeliveryPrice {
+          display: flex;
+          order: 2;
+        }
+      }
+    }
+
+    .shippingTableCell {
+      padding: 0;
+      display: flex;
+      color: $gray-400;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      min-width: 140px;
+      padding-top: 15px;
+
+      @media screen and (max-width: 540px) {
+        min-width: 100px;
+      }
+    }
+  }
+
+  .shippingTableRadioBtn {
+    display: none;
+  }
+}
+
+// Formulário de produto indisponível
+
+.subscriberContainer {
+
+  @media (max-width: 1024px) {
+    margin-top: 24px
+  }
+
+  .title {
+    font-size: 0;
+    margin: 0;
+
+    &::after {
+      content: "Produto indisponível";
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      color: $gray-50;
+    }
+  }
+
+  .subscribeLabel {
+    font-size: 0;
+
+    &::after {
+      content: "Deseja saber quando estiver disponível?";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $gray-50;
+    }
+  }
+
+  .form {
+    width: 100%;
+    margin: 0;
+
+    .content {
+      display: grid;
+      grid-template-areas:
+        " nome email"
+        " submit submit";
+      justify-content: inherit;
+      gap: 8px;
+
+      .inputName {
+        grid-area: nome;
+      }
+
+      .inputName,
+      .inputEmail {
+        :global(.vtex-input-prefix__group) {
+          border-radius: 0;
+          border: 1px solid $gray-800;
+
+          :global(.vtex-styleguide-9-x-input) {
+            padding: 12px 14px;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: $gray-800;
+
+            &::placeholder {
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 16px;
+              color: $gray-800;
+            }
+          }
+        }
+      }
+
+      .inputEmail {
+        grid-area: email;
+      }
+
+      .submit {
+        grid-area: submit;
+        width: 100%;
+
+        :global(.vtex-button) {
+          width: 100%;
+          height: 49px;
+          cursor: pointer;
+          background-color: $black;
+          border: none;
+          border-radius: 0;
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+
+        :global(.vtex-button__label) {
+          font-size: 0;
+
+          &::after {
+            content: "avise-me";
+            text-transform: uppercase;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Newsletter
+
+.newsletter {
+
+  display: block;
+  background: $black;
+  margin-top: 96px;
+
+  :global(.vtex-store-components-3-x-container) {
+    margin: auto;
+  }
+
+  :global(.vtex-store-components-3-x-form) {
+    padding: 32px 0 13px;
+    width: 774px;
+    max-width: 774px;
+    position: relative;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      max-width: 100%;
+      padding: 64px 0 32px;
+    }
+
+    .label {
+      display: flex;
+      flex-direction: column;
+      color: $white;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+
+      &::after {
+        content: "Receba ofertas e novidades por e-mail";
+        font-size: 18px;
+        line-height: 25px;
+        color: $gray-500;
+
+        @media screen and (max-width: 1024px) {
+          font-size: 16px;
+          line-height: 22px;
+        }
+      }
+    }
+
+    :global(.vtex-store-components-3-x-inputGroup) {
+      padding-top: 16px;
+      display: flex;
+
+      :global(.vtex-input-prefix__group) {
+        border: none;
+        border-radius: 0;
+
+        :global(.vtex-styleguide-9-x-input) {
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $gray-500;
+          border-radius: 0;
+          border-bottom: 1px solid $gray-500;
+          background: transparent;
+          padding: 0;
+
+          @media screen and (max-width: 1024px) {
+            font-size: 12px;
+            line-height: 16px;
+          }
+        }
+      }
+    }
+
+    .buttonContainer {
+      padding: 0;
+
+      :global(.vtex-button) {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        color: $white;
+        background-color: transparent;
+        border: none;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      :global(.vtex-button__label) {
+        border-bottom: 3px solid $gray-500;
+        padding: 6px 17px 12px !important;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,214 @@
+// Descrição do produto
+
+:global(.vtex-tab-layout-0-x-container) {
+  padding: 0 40px;
+  margin: 0;
+
+  @media screen and (min-width: 1920px) {
+    margin: 6px 360px;
+    padding: 0;
+  }
+
+  // Header descrição do produto
+
+  .listContainer--tabList {
+    border-bottom: 1px solid $gray-100;
+    height: 43px;
+    justify-content: space-between;
+    padding: 0 64px;
+
+    @media screen and (min-width: 1920px) {
+      height: 49px;
+    }
+
+    @media screen and (max-width: 1024px) {
+      border-top: 1px solid $gray-100;
+      flex-direction: column;
+      height: fit-content;
+      padding: 16px 0 0 0;
+      margin: 0;
+    }
+
+    // Títulos do header da descrição do produto
+
+    .listItem {
+      @media screen and (max-width: 1024px) {
+        align-self: flex-start;
+        flex-direction: column;
+        height: fit-content;
+        padding: 0 0 16px;
+        margin: 0;
+      }
+
+      :global(.vtex-button) {
+        border: none;
+
+        @media screen and (max-width: 1024px) {
+          width: 100%;
+        }
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      :global(.vtex-button__label) {
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 18px;
+        color: $gray-100;
+        text-transform: capitalize;
+        padding: 0.25em 10px 0.32em;
+
+        &:hover {
+          color: $gray-500;
+        }
+
+        @media screen and (min-width: 1920px) {
+          font-size: 24px;
+          line-height: 24px;
+        }
+
+        @media screen and (max-width: 1024px) {
+          text-align: left;
+          flex-direction: column;
+          height: fit-content;
+          padding: 0 !important;
+          font-size: 18px;
+          line-height: 18px;
+        }
+      }
+    }
+
+    // Título ativo do header da descrição do produto
+
+    .listItemActive {
+      @media screen and (max-width: 1024px) {
+        align-self: flex-start;
+        flex-direction: column;
+        height: fit-content;
+        padding: 0 0 16px;
+        margin: 0;
+      }
+
+      :global(.vtex-button) {
+        background-color: transparent;
+        width: 114px;
+        border: none;
+
+        @media screen and (max-width: 1024px) {
+          width: 100%;
+        }
+      }
+
+      :global(.vtex-button__label) {
+        color: $black;
+        background-color: transparent;
+        border-bottom: 2px solid $black;
+        padding: 0;
+
+        &:hover {
+          color: $black;
+        }
+
+        @media screen and (max-width: 1024px) {
+          flex-direction: column;
+          text-align: left;
+          height: fit-content;
+          padding: 0;
+        }
+
+        @media screen and (max-width: 1024px) {
+          border: none;
+        }
+      }
+    }
+  }
+
+  // Container do conteúdo
+
+  :global(.vtex-tab-layout-0-x-contentContainer) {
+    .contentItem {
+      display: flex;
+      flex-direction: row;
+      gap: 32px;
+      align-items: flex-start;
+      padding: 32px 32px 16px;
+
+      @media (max-width: 1024px) {
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px 0 0 0;
+        border-bottom: 1px solid $gray-100;
+      }
+
+      // Imagem da descrição do produto
+
+      .productImagesContainer {
+        width: 50%;
+        max-width: 50%;
+      }
+
+      :global(.vtex-store-components-3-x-productImageTag) {
+        width: 100%;
+        max-width: 100%;
+        display: block;
+        // max-width: 872px;
+
+        // @media screen and (max-width: 1024px) {
+        //   width: 100% !important;
+        //   max-width: 100%;
+        // }
+      }
+
+      // Conteúdo de texto da descrição do produto
+
+      :global(.vtex-rich-text-0-x-container--description-rich-text) {
+        max-width: 50%;
+
+        @media screen and (max-width: 1024px) {
+          max-width: 100%;
+        }
+
+        // Título da descrição do produto
+
+        :global(.vtex-rich-text-0-x-heading) {
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 32px;
+          color: $gray-600;
+          margin-top: 0;
+
+          @media screen and (min-width: 1920px) {
+            font-size: 32px;
+            line-height: 32px;
+          }
+
+          @media screen and (max-width: 1024px) {
+            font-size: 20px;
+            line-height: 32px;
+          }
+        }
+
+        // Texto descrição do produto
+
+        :global(.vtex-rich-text-0-x-paragraph) {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+          color: $gray-500;
+
+          @media screen and (min-width: 1920px) {
+            font-size: 18px;
+            line-height: 25px;
+          }
+
+          @media screen and (max-width: 1024px) {
+            font-size: 14px;
+            line-height: 19px;
+          }
+        }
+      }
+    }
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,16 +1,20 @@
-$color-black: #292929;
+// Colors
 
-$color-white: #fff;
+$white: #fff;
 
-$color-gray: #6c6c6c;
+$gray-50: #868686;
-$color-gray2: #7d7d7d;
+$gray-100: #bfbfbf;
-$color-gray3: #f0f0f0;
+$gray-200: #b9b9b9;
-$color-gray4: #c4c4c4;
+$gray-300: #bababa;
-$color-gray5: #e5e5e5;
+$gray-400: #afafaf;
+$gray-500: #929292;
+$gray-600: #575757;
+$gray-700: #202020;
+$gray-800: #989898;
+$gray-900: #d5d5d5;
+$gray-1000: #cccccc;
 
-$color-blue: #4267b2;
+$black: #000000;
-
-$color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
@@ -19,7 +23,7 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
@@ -27,5 +31,5 @@ $z-index: (
   level2: 10,
   level3: 15,
   level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;