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",
@@ -34,10 +33,10 @@
     "vtex.my-account": "1.x",
     "vtex.flex-layout": "0.x",
     "vtex.rich-text": "0.x",
+    "vtex.product-identifier": "0.x",
     "vtex.store-drawer": "0.x",
     "vtex.locale-switcher": "0.x",
     "vtex.product-quantity": "1.x",
-    "vtex.product-identifier": "0.x",
     "vtex.breadcrumb": "1.x",
     "vtex.sticky-layout": "0.x",
     "vtex.product-customizer": "2.x",

react/Pix.tsx

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

react/components/Html/index.tsx

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

react/components/Html/styles.css

@@ -0,0 +1,10 @@
+[class*="html--wrapperQuantity"] {
+    display: flex;
+    margin-bottom: 16px;
+
+}
+@media screen and (max-width: 375px) {
+    [class*="html--wrapperQuantity"] {
+        flex-direction: column;
+    }
+}

react/components/Pix/Pix.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useProduct } from 'vtex.product-context'
+// import { useCssHandles } from 'vtex.css-handles'
+import styles from "./styles.css"
+
+
+const Pix = () => {
+  const product  = useProduct()
+  let pixValueTotal:any = product?.product?.priceRange?.sellingPrice?.lowPrice;
+  let pixValueTotalNumber = parseFloat(pixValueTotal);
+  let porcentagemDesconto = 10;
+  let desconto = (pixValueTotalNumber / 100)* porcentagemDesconto;
+  let pixValueDesconto = (pixValueTotal - desconto).toFixed(2);
+  let pixValueDescontoVirgula =  pixValueDesconto.replace(".", ",")
+  
+  // const CSS_HANDLES = [
+  //   "wrapperComponentPix",
+  //   "imagePix",
+  //   "wrapperTexts",
+  //   "wrapperTexts__value",
+  //   "wrapperTexts__descontoPorcentagem",
+  // ]
+
+  // const handles = useCssHandles(CSS_HANDLES)
+
+  if (typeof document !== "undefined") {
+    const input = document.querySelector(".vtex-address-form-4-x-input");
+        input?.setAttribute("placeholder", "Digite seu CEP");
+  }
+
+  return (
+    <div className={styles.wrapperComponentPix}>
+      <img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />
+      <div className={styles.wrapperTexts}>
+        <p className={styles.wrapperTexts__value}>R$ {pixValueDescontoVirgula} </p>
+        <p className={styles.wrapperTexts__descontoPorcentagem}>10% de desconto</p>
+      </div>
+    </div>
+  )
+}
+
+export default Pix

react/components/Pix/styles.css

@@ -0,0 +1,29 @@
+.wrapperComponentPix{
+    display: flex;
+    margin: 8px 0 16px 0;
+    align-items: center;
+}
+.wrapperTexts__value{
+    margin: 0;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 25px;
+    color: rgba(0, 0, 0, 0.58);
+}
+.wrapperTexts__descontoPorcentagem{
+    margin: 0;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 13px;
+    line-height: 18px;
+    color: #929292;
+}
+.imagePix{
+    height: 24px;
+}
+.wrapperTexts{
+    margin-left: 26px;
+}

react/typings/css.d.ts

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

react/typings/global.d.ts

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

react/typings/graphql.d.ts

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

react/typings/storefront.d.ts

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

react/typings/vtex.css-handles.ts

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

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

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

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

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

react/typings/vtex.styleguide.d.ts

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

store/blocks/minicart.jsonc

@@ -5,6 +5,14 @@
       "customPixelEventId": "add-to-cart-button"
     }
   },
+  "add-to-cart-button#addSacola": {
+    "props": {
+      "addToCartFeedback": "customEvent",
+      "customPixelEventId": "add-to-cart-button",
+      "text": "Adicionar à sacola",
+      "blockClass": "addSacola"
+    }
+  },
 
   "minicart.v2": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -3,21 +3,31 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
-      "product-specification-group#table",
-      "shelf.relatedProducts",
+      "html#productDescription",
+      // "flex-layout.row#specifications-title",
+      // "product-specification-group#table",
+      "rich-text#otherProductTitle",
+      "list-context.product-list#prateleira",
       "product-questions-and-answers"
     ]
   },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
       "testId": "breadcrumbs",
       "blockClass": "pdp-breadcrumb"
     },
-    "children": ["breadcrumb"]
+    "children": ["breadcrumb#Pdp"]
   },
+
+  "breadcrumb#Pdp": {
+    "props": {
+      "blockClass": "Pdp",
+      "showOnMobile": true
+    }
+  },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -26,12 +36,86 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
+
+  "rich-text#otherProductTitle": {
     "props": {
-      "marginBottom": 7
-    },
-    "children": ["product-description"]
+      "text": "### Você também pode gostar:",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "blockClass": "otherProdcutTitle"
+    }
   },
+
+  "product-summary.shelf#prateleira": {
+    "props": {
+      "blockClass": "prateleiraShelf",
+      "testId": "vtex-product-summary"
+    },
+    "children": [
+      "html#productSummary"
+    ]
+  },
+
+  "product-summary-image#prateleiraImg": {
+    "props": {
+      "blockClass": "prateleiraImg"
+    }
+  },
+
+  "product-summary-name#prateleira": {
+    "props": {
+      "blockClass": "prateleiraProductName"
+    }
+  },
+
+  "product-list-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira"
+    }
+  },
+
+  "product-selling-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira"
+    }
+  },
+
+  "slider-layout#prateleiraSlider": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      },
+      "infinite": true,
+      "blockClass": "prateleiraSlider"
+    }
+  },
+
+  "list-context.product-list#prateleira": {
+    "blocks": ["product-summary.shelf#prateleira"],
+    "children": ["html#productSummaryList"]
+  },
+  
+  "flex-layout.col#description": {
+    "props": {
+      "preventVerticalStretch": true
+    },
+    "children": ["product-description#1", "product-description#2"]
+  },
+
+  "product-description#1": {
+    "props": {
+      "blockClass": "descriptioncontent1"
+    }
+  },
+  "product-description#2": {
+    "props": {
+      "blockClass": "descriptioncontent2",
+      "showTitle": false
+    }
+  },
+
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -50,10 +134,18 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "productMainWrapper"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
+  "flex-layout.row#descriptionRow": {
+    "props": {
+      "blockClass": "descriptionRow",
+      "colGap": 7
+    },
+    "children": ["product-images#descriptionImg", "flex-layout.col#description"]
+  },
 
   "stack-layout": {
     "props": {
@@ -66,6 +158,148 @@
     ]
   },
 
+  "html#wrapperQuantity": {
+    "props": {
+      "blockClass": "wrapperQuantity"
+    },
+    "children": ["html#productQuantity", "flex-layout.row#buy-button"]
+  },
+
+  "product-quantity#quantityPdpItens": {
+    "props": {
+      "blockClass": "quantityPdpItens",
+      "showLabel": false,
+      "size": "large"
+    }
+  },
+
+  "tab-layout#descriptionLayout": {
+    "props": {
+      "blockClass": "descriptionLayout"
+    },
+    "children": [
+      "tab-list#descriptionButtonWrapper",
+      "tab-content#descriptionContentWrapper"
+    ]
+  },
+
+  "tab-list#descriptionButtonWrapper": {
+    "props": {
+      "blockClass": "descriptionButtonWrapper"
+    },
+    "children": [
+      "tab-list.item#1",
+      "tab-list.item#2",
+      "tab-list.item#3",
+      "tab-list.item#4",
+      "tab-list.item#5"
+      ]
+  },
+
+  "tab-content#descriptionContentWrapper": {
+    "props": {
+      "blockClass": "descriptionContentWrapper"
+    },
+    "children": [
+      "tab-content.item#1",
+      "tab-content.item#2",
+      "tab-content.item#3",
+      "tab-content.item#4",
+      "tab-content.item#5"
+      ]
+  },
+
+  "tab-list.item#1": {
+    "props": {
+      "tabId": "description1",
+      "label": "Descrição",
+      "blockClass": "descriptionButton",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#2": {
+    "props": {
+      "tabId": "description2",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#3": {
+    "props": {
+      "tabId": "description3",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#4": {
+    "props": {
+      "tabId": "description4",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#5": {
+    "props": {
+      "tabId": "description5",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content.item#1": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description1",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#2": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description2",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#3": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description3",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#4": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description4",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#5": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description5",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "product-images#descriptionImg": {
+    "props": {
+      "displayMode": "first-image",
+      "maxHeight": 632,
+      "blockClass": "descriptionImg",
+      "width": "49%"
+    }
+  },
+
   "product-specification-badges": {
     "props": {
       "specificationGroupName": "Group",
@@ -78,20 +312,25 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "51%",
       "rowGap": 0
     }
   },
   "flex-layout.row#product-image": {
-    "children": ["product-images"]
+    "children": ["html#productImages"]
   },
-  "product-images": {
+  "product-images#imgsMain": {
     "props": {
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": true
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailMaxHeight": 90,
+      "blockClass": "ImgsMain",
+      "maxHeight": 664
     }
   },
   "flex-layout.col#right-col": {
@@ -102,50 +341,148 @@
     "children": [
       "flex-layout.row#product-name",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
-      "product-installments",
+      "html#productCode",
+      "html#productPrice",
+      "html#productInstallments",
+      "html#pixPrice",
       "product-separator",
-      "product-identifier.product",
-      "sku-selector",
-      "product-quantity",
-      "product-assembly-options",
-      "product-gifts",
-      "flex-layout.row#buy-button",
+      "html#skuSelector",
+      "html#wrapperQuantity",
       "availability-subscriber",
-      "shipping-simulator",
-      "share#default"
+      "html#shippingSimulator"
     ]
   },
 
+  "html#productInstallments": {
+    "props": {
+      "testId": "product-installments"
+    },
+   "children": ["product-installments#InstallmentsMainPdp"]
+  },
+
+  "html#pixPrice": {
+    "props": {
+      "testId": "pix-price"
+    },
+   "children": ["pix"]
+  },
+  "html#productPrice": {
+    "props": {
+      "testId": "product-price"
+    },
+   "children": ["flex-layout.row#selling-price"]
+  },
+  "html#productQuantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+   "children": ["product-quantity#quantityPdpItens"]
+  },
+  "html#addToCartButton": {
+    "props": {
+      "testId": "add-to-cart-button"
+    },
+   "children": ["add-to-cart-button#addSacola"]
+  },
+  "html#productCode": {
+    "props": {
+      "testId": "product-code"
+    },
+   "children": ["product-identifier.product#identifierMain"]
+  },
+  "html#productImages": {
+    "props": {
+      "testId": "product-images"
+    },
+   "children": ["product-images#imgsMain"]
+  },
+  "html#productName": {
+    "props": {
+      "testId": "product-name"
+    },
+   "children": ["vtex.store-components:product-name"]
+  },
+  "html#shippingSimulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+   "children": ["shipping-simulator"]
+  },
+  "html#skuSelector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+   "children": ["sku-selector#inverseOrder"]
+  },
+  "html#productDescription": {
+    "props": {
+      "testId": "product-description"
+    },
+   "children": ["tab-layout#descriptionLayout"]
+  },
+  "html#productSummary": {
+    "props": {
+      "testId": "vtex-product-summary"
+    },
+    "children": [
+      "product-summary-image#prateleiraImg",
+      "product-summary-name#prateleira",
+      "product-list-price#prateleira",
+      "product-selling-price#prateleira"
+    ]
+  },
+  "html#productSummaryList": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": [
+      "slider-layout#prateleiraSlider"
+    ]
+  },
+
+  "product-installments#InstallmentsMainPdp": {
+    "props": {
+      "blockClass": "InstallmentsMainPdp",
+      "installmentsCriteria": "max-quantity-without-interest"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": ["html#productName"]
   },
 
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
       "showValueNameForImageVariation": true
     }
   },
+  
+  "sku-selector#inverseOrder": {
+    "props": {
+      "variationsSpacing": 3,
+      "showValueNameForImageVariation": true,
+      "blockClass": "inverseOrder"
+    }
+  },
 
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "buyButton"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["html#addToCartButton"]
   },
 
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
+      "blockClass": "indisponivelWrapper"
     },
     "children": [
       "flex-layout.col#stack",
@@ -160,9 +497,9 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
-      "sku-selector",
-      "flex-layout.row#availability"
+      "product-identifier.product#identifierMain",
+      "flex-layout.row#availability",
+      "sku-selector#inverseOrder"
     ]
   },
   "flex-layout.row#availability": {
@@ -172,6 +509,13 @@
     "children": ["availability-subscriber"]
   },
 
+  "product-identifier.product#identifierMain": {
+    "props": {
+      "label": "hide",
+      "idField": "productReference"
+    }
+  },
+
   "share#default": {
     "props": {
       "social": {

store/blocks/product-price.jsonc

@@ -4,7 +4,8 @@
       "colGap": 2,
       "preserveLayoutOnMobile": true,
       "preventHorizontalStretch": true,
-      "marginBottom": 4
+      "marginBottom": 4,
+      "blockClass": "sellPrice"
     },
     "children": [
       "product-selling-price"

store/interfaces.json

@@ -2,6 +2,11 @@
   "example-component": {
     "component": "Example"
   },
+
+  "pix": {
+    "component": "Pix"
+  },
+
   "html": {
     "component": "html",
     "composition": "children"

styles/configs/font-faces.css

@@ -0,0 +1,31 @@
+@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-Regular.ttf);
+    font-weight: 400;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-Medium.ttf);
+    font-weight: 500;
+}
+
+@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;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-ExtraBold.ttf);
+    font-weight: 800;
+}

styles/configs/style.json

@@ -253,84 +253,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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, 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, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/vtex-product-identifier.css

@@ -0,0 +1,13 @@
+/*
+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--productReference {
+  display: flex;
+  justify-content: end;
+}

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,47 @@
+/*
+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 */
+.homeLink--Pdp {
+  padding: 0 2px 4px 2px;
+}
+.homeLink--Pdp::before {
+  content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.homeLink--Pdp .homeIcon--Pdp {
+  display: none;
+}
+
+.link--Pdp,
+.term--Pdp {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.container--Pdp {
+  padding: 0;
+  width: 94.44%;
+  margin: 0 auto;
+  max-width: 94rem;
+}
+@media screen and (max-width: 1024px) {
+  .container--Pdp {
+    width: 100%;
+    padding: 0 40px;
+  }
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,210 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
-  padding: 0 0.5rem;
+@charset "UTF-8";
+/*
+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 */
+.flexRow--productMainWrapper {
+  width: 95%;
+  margin: 0 auto;
 }
-
-@media screen and (min-width: 40em) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
+@media screen and (max-width: 1024px) {
+  .flexRow--productMainWrapper {
+    width: 100%;
+    margin: 0;
+    padding: 0 40px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) {
+    padding: 0;
   }
 }
 
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
+.flexRow--indisponivelWrapper {
+  width: 95%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--indisponivelWrapper {
+    width: 100%;
+    margin: 0;
+    padding: 0 40px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) {
+    padding: 0;
   }
 }
 
-.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;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  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 {
+.flexRow--buyButton {
   display: flex;
-  max-height: 100%;
+  align-items: center;
+  width: 100%;
+  margin-left: 10px;
+}
+@media screen and (max-width: 375px) {
+  .flexRow--buyButton {
+    margin-left: 0;
+    padding-top: 10px;
+  }
+}
+.flexRow--buyButton .flexRowContent--buyButton {
+  margin: 0;
+  height: 49px;
+}
+.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
+  background-color: #000000;
+  color: #fff;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  border: none;
+  border-radius: 0;
+  height: 48px;
 }
 
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
+.flexRowContent--sellPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+  margin: 0;
 }
 
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
+@media screen and (max-width: 1024px) {
+  .flexRow--descriptionRow :global(.vtex-store-components-3-x-container) {
+    padding: 0 !important;
+  }
 }
 
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
+.flexRowContent--productMainWrapper {
+  margin: 16px 0;
+  padding: 0;
 }
+@media screen and (max-width: 1024px) {
+  .flexRowContent--productMainWrapper {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--productMainWrapper .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+.flexRowContent--indisponivelWrapper {
+  margin: 16px 0;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--indisponivelWrapper {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--indisponivelWrapper .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--descriptionRow {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--descriptionRow .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) {
+  object-fit: unset !important;
+  max-height: 994px !important;
+  margin-bottom: 16px;
+}
+
+.flexRow--message-availability :global(.vtex-store-components-3-x-title) {
+  font-size: 0;
+  margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before {
+  content: "Produto indisponivel";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
+  font-size: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+  display: grid;
+  grid-auto-flow: column;
+  max-width: 400px;
+  column-gap: 8px;
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+    width: 100%;
+  }
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child {
+  grid-area: 2/1/2/3;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
+  margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
+  margin: 0;
+  margin-bottom: 15px;
+}
+.flexRow--message-availability :global(.vtex-button) {
+  width: 100%;
+  background-color: #000000;
+  font-size: 0;
+  height: 49px;
+  border-radius: 0;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.flexRow--message-availability :global(.vtex-button)::before {
+  content: "Avise-me";
+  color: #fff;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+}
+.flexRow--message-availability :global(.vtex-button__label) {
+  display: none;
+}
+.flexRow--message-availability :global(.vtex-input-prefix__group) {
+  border-radius: 0;
+  border-color: #989898;
+}

styles/css/vtex.product-identifier.css

@@ -1,3 +1,9 @@
-.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 */

styles/css/vtex.product-price.css

@@ -1,79 +1,37 @@
-.listPrice {
-  color: #727273;
-  margin-bottom: .25rem;
-  font-size: 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 */
+.listPrice--prateleira {
+  padding: 0 16px 8px 16px;
+  margin: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
 }
 
-.sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
+.sellingPrice--prateleira--hasListPrice {
+  padding: 0 16px;
+  font-family: "Open Sans";
+  font-style: normal;
   font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
 }
 
-.installments {
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}
+.installments--InstallmentsMainPdp {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

styles/css/vtex.product-quantity.css

@@ -0,0 +1,32 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorContainer--quantityPdpItens {
+  margin: 0;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__input) {
+  border: 1px solid #CCCCCC;
+  border-left: 0;
+  border-right: 0;
+  width: 3rem;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__plus-button) {
+  border: 1px solid #CCCCCC;
+  border-left: 0;
+  border-radius: 0;
+  width: 2.5em !important;
+  color: #000000;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
+  border: 1px solid #CCCCCC;
+  border-right: 0;
+  border-radius: 0;
+  width: 2.5em !important;
+  color: #000000;
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,42 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
-  border-radius: 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 */
+.containerNormal--prateleiraShelf {
+  max-width: 315px !important;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
+.element--prateleiraShelf {
+  outline: 0;
 }
 
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 1;
+.nameContainer--prateleiraProductName {
+  padding: 16px 16px 8px 16px;
 }
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
+.nameContainer--prateleiraProductName .brandName--prateleiraProductName {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
   font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
+  line-height: 25px;
   text-align: center;
+  color: #000000;
 }
 
-.image {
-  border-radius: 0.25rem;
+.imageWrapper--prateleiraImg,
+.imageContainer--prateleiraImg,
+.image--prateleiraImg {
+  min-height: 314px;
 }
+@media screen and (max-width: 1280px) {
+  .imageWrapper--prateleiraImg,
+  .imageContainer--prateleiraImg,
+  .image--prateleiraImg {
+    min-height: 285px;
+  }
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,11 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.heading--otherProdcutTitle {
+  margin: 16px 0 24px 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}

styles/css/vtex.shipping-simulator.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.shippingTableBody {
+  display: none;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,63 @@
-.sliderLayoutContainer {
-  justify-content: center;
+/*
+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--prateleiraSlider {
+  width: 90.63%;
+  margin: 0 auto 101px auto;
+}
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--prateleiraSlider {
+    width: 100% !important;
+    padding: 0 63px;
+  }
 }
 
-.sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
-  min-height: 450px;
+.sliderArrows--prateleiraSlider {
+  margin: 0;
+  padding: 0;
 }
 
-.sliderTrackContainer {
-  max-width: 100%;
+.sliderRightArrow--prateleiraSlider {
+  right: -2%;
+}
+@media screen and (max-width: 1024px) {
+  .sliderRightArrow--prateleiraSlider {
+    right: 3.91%;
+  }
 }
 
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+.sliderLeftArrow--prateleiraSlider {
+  left: -2%;
+}
+@media screen and (max-width: 1024px) {
+  .sliderLeftArrow--prateleiraSlider {
+    left: 3.91%;
+  }
 }
 
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
+.paginationDotsContainer--prateleiraSlider {
+  bottom: -32px;
+  align-items: center;
+}
+.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider {
+  height: 10px !important;
+  width: 10px !important;
+  background-color: #000000;
+  margin: 0 6px;
+}
+.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider--isActive {
+  height: 17px !important;
+  width: 17px !important;
+  background-color: #fff !important;
+  border: 0.5px solid #000000;
 }
 
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
-}
+.slide--prateleiraSlider {
+  padding: 0 8px;
+}

styles/css/vtex.store-components.css

@@ -9,4 +9,297 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
+}
+
+.productImageTag--ImgsMain--main {
+  object-fit: unset !important;
+}
+@media screen and (max-width: 1024px) {
+  .productImageTag--ImgsMain--main {
+    max-height: 994px !important;
+  }
+}
+
+.productImagesThumb {
+  width: 13.605% !important;
+  margin: 0 16px 0 0;
+  max-width: 90px;
+}
+
+.productNameContainer--quickview {
+  display: flex;
+  justify-content: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+@media screen and (max-width: 1024px) {
+  .productNameContainer--quickview {
+    justify-content: flex-start;
+    padding-top: 32px;
+  }
+}
+
+:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 24px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-product-identifier-0-x-product-identifier--productReference) {
+    justify-content: flex-start;
+  }
+}
+
+.skuSelectorContainer--inverseOrder {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorTextContainer::before {
+  content: "Outras cores:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorName,
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorNameSeparator,
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer::before {
+  content: "Outros Tamanhos:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .frameAround--inverseOrder {
+  border: 2px solid #000000;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorItemTextValue--inverseOrder {
+  color: #000000;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorItem--inverseOrder--selected .skuSelectorInternalBox--inverseOrder {
+  border: none;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorItemTextValue--inverseOrder {
+  padding: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer--inverseOrder .frameAround--inverseOrder {
+  border-radius: 50%;
+}
+.skuSelectorContainer--inverseOrder .skuSelectorInternalBox--inverseOrder {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-color: #989898;
+}
+.skuSelectorContainer--inverseOrder .diagonalCross--inverseOrder {
+  border-radius: 50%;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-address-form__field--small) {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+  border: 1px solid #CCCCCC;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  display: flex;
+  position: relative;
+  left: 150px;
+  align-items: center;
+  padding-top: 16.1px;
+  text-decoration: underline;
+}
+@media screen and (max-width: 600px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 55px;
+  }
+}
+@media screen and (max-width: 490px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -85px;
+    top: 50px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -112px;
+    top: 50px;
+  }
+}
+@media screen and (max-width: 375px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -78px;
+    top: 50px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: black;
+}
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  display: flex;
+  width: 49px;
+  height: 49px;
+  position: relative;
+  right: 129px;
+  margin-top: 24px;
+  background-color: #000000;
+  font-size: 0;
+  border: none;
+  border-radius: 0;
+}
+@media screen and (max-width: 490px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 31%;
+  }
+}
+@media screen and (max-width: 425px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 24%;
+  }
+}
+@media screen and (max-width: 375px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 40px;
+  }
+}
+.shippingContainer :global(.vtex-button) ::before {
+  content: "Ok";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
+
+.shippingTable {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  flex-direction: column;
+}
+.shippingTable .shippingTableHead {
+  display: flex;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
+  display: flex;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
+  order: 1;
+  min-width: 145px;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
+  min-width: 100px;
+}
+.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
+  min-width: 70px;
+}
+.shippingTable .shippingTableRow {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 15px;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryName,
+.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate,
+.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
+  display: flex;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #afafaf;
+  padding: 0;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate {
+  order: 1;
+  min-width: 145px;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryName {
+  min-width: 100px;
+}
+.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
+  min-width: 70px;
+}
+.shippingTable .shippingTableRadioBtn {
+  display: none;
+}
+
+.productDescriptionContainer--descriptioncontent1 {
+  margin-bottom: 16px;
+}
+
+.productDescriptionTitle--descriptioncontent1 {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  margin-bottom: 8px;
+}
+
+.content--descriptioncontent1,
+.content--descriptioncontent2 {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+@media screen and (max-width: 1024px) {
+  .productImagesGallerySlide--ImgsMain {
+    width: 100% !important;
+  }
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,87 @@
+/*
+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--descriptionLayout {
+  width: 94.44%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout {
+    width: 100%;
+    padding: 0 40px;
+  }
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper {
+  justify-content: space-between;
+  border-bottom: 1px solid #B9B9B9;
+  padding: 0 64px;
+  margin-bottom: 32px;
+  max-width: 94rem;
+  margin: 0 auto 32px auto;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper {
+    padding: 16px 0 0 0;
+    flex-direction: column;
+    margin-bottom: 16px;
+    border-top: 1px solid #B9B9B9;
+  }
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
+  margin: 0;
+  padding: 0;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) {
+  color: #bfbfbf;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover {
+  background-color: #fff;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
+  padding: 0 16px !important;
+  text-transform: capitalize;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
+    margin-bottom: 16px;
+    padding: 0 !important;
+  }
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
+  margin-top: 2px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
+  background-color: #fff;
+  color: #000000;
+  border: 0;
+  border-bottom: 2px solid #000000;
+  border-radius: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
+    border: none;
+  }
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
+  padding: 0 16px !important;
+  text-transform: capitalize;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
+    padding: 0 !important;
+  }
+}

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

@@ -0,0 +1,37 @@
+.homeLink--Pdp{
+    padding: 0 2px 4px 2px;
+
+    &::before {
+        content: "Home";
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray15;
+    }
+
+    .homeIcon--Pdp{
+        display: none;
+    }
+}
+.link--Pdp,
+.term--Pdp{
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-gray15;
+}
+.container--Pdp{
+    padding: 0;
+    width: 94.44%;
+    margin: 0 auto;
+    max-width: 94rem;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        padding: 0 40px;
+    }
+}

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

@@ -0,0 +1,203 @@
+.flexRow--productMainWrapper{
+    width: 95%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        margin: 0;
+        padding: 0 40px;
+    }
+    :global(.vtex-store-components-3-x-container){
+
+        @media screen and (max-width: 1024px) {
+            padding: 0;
+        }
+    }
+}
+.flexRow--indisponivelWrapper{
+    width: 95%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        margin: 0;
+        padding: 0 40px;
+    }
+    :global(.vtex-store-components-3-x-container){
+
+        @media screen and (max-width: 1024px) {
+            padding: 0;
+        }
+    }
+}
+.flexRow--buyButton{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+
+    @media screen and (max-width: 375px) {
+        margin-left: 0;
+        padding-top: 10px;
+    }
+
+    .flexRowContent--buyButton{
+        margin: 0;
+        height: 49px;
+
+        :global(.vtex-button){
+            background-color: $color-black2;
+            color: $color-white;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 25px;
+            border: none;
+            border-radius: 0;
+            height: 48px;
+        }
+    }
+    
+}
+.flexRowContent--sellPrice{
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 25px;
+    line-height: 38px;
+    color: $color-black2;
+    margin: 0;
+}
+.flexRow--descriptionRow{
+    :global(.vtex-store-components-3-x-container) {
+
+        @media screen and (max-width: 1024px) {
+            padding: 0 !important;
+        }
+    }
+}
+
+.flexRowContent--productMainWrapper{
+    margin: 16px 0;
+    padding: 0;
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth{
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+    }
+}
+.flexRowContent--indisponivelWrapper{
+    margin: 16px 0;
+    padding: 0;
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth{
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+    }
+}
+.flexRowContent--descriptionRow{
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth {
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+
+        :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){
+            object-fit: unset !important;
+            max-height: 994px !important;
+            margin-bottom: 16px;
+        }
+    }
+}
+
+.flexRow--message-availability{
+    :global(.vtex-store-components-3-x-title){
+        font-size: 0;
+        margin: 0;
+        &::before {
+            content: "Produto indisponivel";
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray17;
+        }
+    }
+    :global(.vtex-store-components-3-x-subscribeLabel){
+        font-size: 0;
+        &::before {
+            content: "Deseja saber quando estiver disponível?";
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray17;
+        }
+    }
+    :global(.vtex-store-components-3-x-content){
+        display: grid;
+        grid-auto-flow: column;
+        max-width: 400px;
+        column-gap: 8px;
+
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
+
+        :last-child{
+            grid-area: 2/1/2/3;
+        }
+        :global(.vtex-store-components-3-x-inputEmail){
+            margin: 0;
+        }
+        :global(.vtex-store-components-3-x-inputName){
+            margin: 0;
+            margin-bottom: 15px;
+        }
+    }
+    :global(.vtex-button){
+        width: 100%;
+        background-color: $color-black2;
+        font-size: 0;
+        height: 49px;
+        border-radius: 0;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        &::before {
+            content: "Avise-me";
+            color: $color-white;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+        }
+    }
+    :global(.vtex-button__label){
+       display: none;
+    }
+    :global(.vtex-input-prefix__group){
+       border-radius: 0;
+       border-color: $color-gray12;
+    }
+}

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

@@ -0,0 +1,26 @@
+.listPrice--prateleira{
+    padding: 0 16px 8px 16px;
+    margin: 0;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-gray9;
+}
+.sellingPrice--prateleira--hasListPrice{
+    padding: 0 16px;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+}
+.installments--InstallmentsMainPdp{
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray15;
+}

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

@@ -0,0 +1,24 @@
+.quantitySelectorContainer--quantityPdpItens{
+    margin: 0;
+
+    :global(.vtex-numeric-stepper__input ){
+        border: 1px solid #CCCCCC;
+        border-left: 0;
+        border-right: 0;
+        width: 3rem;
+    }
+    :global(.vtex-numeric-stepper__plus-button){
+        border: 1px solid #CCCCCC;
+        border-left: 0;
+        border-radius: 0;
+        width: 2.5em !important;
+        color: $color-black2;
+    }
+    :global(.vtex-numeric-stepper__minus-button){
+        border: 1px solid #CCCCCC;
+        border-right: 0;
+        border-radius: 0;
+        width: 2.5em !important;
+        color: $color-black2;
+    }
+}

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

@@ -0,0 +1,31 @@
+.containerNormal--prateleiraShelf{
+    max-width: 315px !important;
+}
+.element--prateleiraShelf{
+    outline: 0;
+}
+.nameContainer--prateleiraProductName{
+    padding: 16px 16px 8px 16px;
+
+    .brandName--prateleiraProductName{
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        text-align: center;
+        color: $color-black2;
+    }
+    // .nameWrapper--prateleiraProductName{
+    //     min-height: 50px;
+    // }
+}
+.imageWrapper--prateleiraImg,
+.imageContainer--prateleiraImg,
+.image--prateleiraImg{
+    min-height: 314px;
+
+    @media screen and (max-width: 1280px) {
+        min-height: 285px;
+    }
+}

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

@@ -0,0 +1,7 @@
+.heading--otherProdcutTitle{
+    margin: 16px 0 24px 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+}

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

@@ -0,0 +1,48 @@
+.sliderLayoutContainer--prateleiraSlider{
+    width: 90.63%;
+    margin: 0 auto 101px auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100% !important;
+        padding: 0 63px;
+    }
+}
+.sliderArrows--prateleiraSlider{
+    margin: 0;
+    padding: 0;
+}
+.sliderRightArrow--prateleiraSlider{
+    right: -2.53%;
+
+    @media screen and (max-width: 1024px) {
+        right: 3.91%;
+    }
+}
+.sliderLeftArrow--prateleiraSlider{
+    left: -2.53%;
+
+    @media screen and (max-width: 1024px) {
+        left: 3.91%;
+    }
+}
+.paginationDotsContainer--prateleiraSlider{
+    bottom: -32px;
+    align-items: center;
+
+    .paginationDot--prateleiraSlider{
+        height: 10px !important;
+        width: 10px !important;
+        background-color: $color-black2;
+        margin: 0 6px;
+
+        &--isActive{
+            height: 17px !important;
+            width: 17px !important;
+            background-color: $color-white !important;
+            border: 0.5px solid $color-black2;
+        }
+    }
+}
+.slide--prateleiraSlider{
+    padding: 0 8px;
+}

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

@@ -1,3 +1,307 @@
 .newsletter{
     background: red;
+}
+
+.productImageTag--ImgsMain--main{
+    object-fit: unset !important;
+
+    @media screen and (max-width: 1024px) {
+        max-height: 994px !important;
+    }
+}
+
+.productImagesThumb{
+    width: 13.605% !important;
+    margin: 0 16px 0 0;
+    max-width: 90px;
+}
+
+.productNameContainer--quickview{
+    display: flex;
+    justify-content: end;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    color: $color-gray14;
+
+    @media screen and (max-width: 1024px) {
+        justify-content: flex-start;
+        padding-top: 32px;
+    }
+}
+
+:global(.vtex-product-identifier-0-x-product-identifier--productReference){
+    display: flex;
+    justify-content: end;
+    margin-bottom: 24px;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-gray13;
+
+    @media screen and (max-width: 1024px) {
+        justify-content: flex-start;
+    }
+}
+
+.skuSelectorContainer--inverseOrder{
+    display: flex;
+    flex-direction: column-reverse;
+
+    .skuSelectorSubcontainer--cor{
+
+        .skuSelectorTextContainer{
+            &::before {
+                content: "Outras cores:";
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 19px;
+                color: $color-gray15;
+                text-transform: uppercase;
+            }
+        }
+
+        .skuSelectorName,
+        .skuSelectorNameSeparator,
+        .skuSelectorSelectorImageValue{
+            font-size: 0;
+        }
+    }
+    .skuSelectorSubcontainer--tamanho{
+
+        .skuSelectorTextContainer{
+            &::before {
+                content: "Outros Tamanhos:";
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 19px;
+                color: $color-gray15;
+                text-transform: uppercase;
+            }
+        }
+
+        .skuSelectorName{
+            font-size: 0;
+        }
+    }
+
+    .skuSelectorItem--inverseOrder{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+    }
+    .skuSelectorItem--inverseOrder--selected{
+
+        .frameAround--inverseOrder{
+            border: 2px solid $color-black2;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+        }
+        .skuSelectorItemTextValue--inverseOrder{
+            color: $color-black2;
+        }
+        .skuSelectorInternalBox--inverseOrder{
+            border: none;
+        }
+    }
+
+    .skuSelectorItemTextValue--inverseOrder{
+        padding: 0;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray11;
+    }
+    .frameAround--inverseOrder{
+        border-radius: 50%;
+    }
+    .skuSelectorInternalBox--inverseOrder{
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        border-color: $color-gray12;
+    }
+    .diagonalCross--inverseOrder{
+        border-radius: 50%;
+        // transform: rotate(-45deg);
+    }
+}
+
+.shippingContainer{
+    display: flex;
+
+    :global(.vtex-address-form__field--small){
+        display: flex;
+    }
+    :global(.vtex-input-prefix__group){
+        height: 49px;
+        border: 1px solid $color-gray7;
+        border-radius: 0;
+    }
+    :global(.vtex-address-form__postalCode-forgottenURL){
+        display: flex;
+        position: relative;
+        left: 150px;
+        align-items: center;
+        padding-top: 16.1px;
+        text-decoration: underline;
+
+        @media screen and (max-width: 600px) {
+            left: 55px;
+        }
+        @media screen and (max-width: 490px) {
+            left: -85px;
+            top: 50px;
+        }
+        @media screen and (max-width: 450px) {
+            left: -112px;
+            top: 50px;
+        }
+        @media screen and (max-width: 375px) {
+            left: -78px;
+            top: 50px;
+        }
+
+        :last-child{
+            color: black;
+        }
+
+    }
+    :global(.vtex__icon-external-link){
+        display: none;
+
+    }
+    :global(.vtex-button){
+        display: flex;
+        width: 49px;
+        height: 49px;
+        position: relative;
+        right: 129px;
+        margin-top: 24px;
+        background-color: $color-black2;
+        font-size: 0;
+        border: none;
+        border-radius: 0;
+
+        @media screen and (max-width: 490px) {
+            right: 31%;
+        }
+        @media screen and (max-width: 425px) {
+            right: 24%;
+        }
+        @media screen and (max-width: 375px) {
+            right: 40px;
+        }
+
+        ::before{
+            content: "Ok";
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-white;
+        }
+    }
+}
+.shippingTable{
+    display: flex;
+    padding: 0;
+    margin: 0;
+    border: none;
+    flex-direction: column;
+
+    .shippingTableHead{
+        display: flex;
+
+        .shippingTableHeadDeliveryName,
+        .shippingTableHeadDeliveryEstimate,
+        .shippingTableHeadDeliveryPrice {
+            display: flex;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-black3;
+            text-transform: uppercase;
+        }
+        .shippingTableHeadDeliveryEstimate{
+            order: 1;
+            min-width: 145px;
+        }
+        .shippingTableHeadDeliveryName{
+            min-width: 100px;
+        }
+        .shippingTableHeadDeliveryPrice{
+            min-width: 70px;
+        }
+    }
+
+    .shippingTableRow{
+        display: flex;
+        gap: 32px;
+        margin-bottom: 15px;
+
+        .shippingTableCellDeliveryName,
+        .shippingTableCellDeliveryEstimate,
+        .shippingTableCellDeliveryPrice {
+            display: flex;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: $color-gray16;
+            padding: 0;
+        }
+        .shippingTableCellDeliveryEstimate{
+            order: 1;
+            min-width: 145px;
+        }
+        .shippingTableCellDeliveryName{
+            min-width: 100px;
+        }
+        .shippingTableCellDeliveryPrice{
+            min-width: 70px;
+        }
+    }
+    .shippingTableRadioBtn{
+        display: none;
+    }
+}
+
+.productDescriptionContainer--descriptioncontent1{
+    margin-bottom: 16px;
+}
+.productDescriptionTitle--descriptioncontent1{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 8px;
+}
+
+.content--descriptioncontent1,
+.content--descriptioncontent2{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+}
+
+.productImagesGallerySlide--ImgsMain{
+    @media screen and (max-width: 1024px) {
+        width: 100% !important;
+    }
 }

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

@@ -0,0 +1,76 @@
+.container--descriptionLayout{
+    width: 94.44%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        padding: 0 40px;
+    }
+
+    .listContainer--descriptionButtonWrapper{
+        justify-content: space-between;
+        border-bottom: 1px solid $color-gray6;
+        padding: 0 64px;
+        margin-bottom: 32px;
+        max-width: 94rem;
+        margin: 0 auto 32px auto;
+
+        @media screen and (max-width: 1024px) {
+            padding: 16px 0 0 0;
+            flex-direction: column;
+            margin-bottom: 16px;
+            border-top: 1px solid $color-gray6;
+        }
+
+        .listItem--descriptionButton{
+            margin: 0;
+            padding: 0;
+            :global(.vtex-button){
+                color: $color-gray8;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+            }
+            :global(.vtex-button):hover{
+                background-color: $color-white;
+            }
+
+            :global(.vtex-button__label){
+                padding: 0 16px !important;
+                text-transform: capitalize;
+
+                @media screen and (max-width: 1024px) {
+                    margin-bottom: 16px;
+                    padding: 0 !important;
+                }
+            }
+        }
+        .listItemActive--descriptionButton{
+            margin-top: 2px;
+            :global(.vtex-button){
+                background-color: $color-white;
+                color: $color-black2;
+                border: 0;
+                border-bottom: 2px solid $color-black2;
+                border-radius: 0;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+
+                @media screen and (max-width: 1024px) {
+                    border: none;
+                }
+            }
+            :global(.vtex-button__label){
+                padding: 0 16px !important;
+                text-transform: capitalize;
+
+                @media screen and (max-width: 1024px) {
+                    padding: 0 !important;
+                }
+            }
+        }
+    }
+}

styles/sass/utils/_vars.scss

@@ -1,4 +1,6 @@
 $color-black: #292929;
+$color-black2: #000000;
+$color-black3: #202020;
 
 $color-white: #fff;
 
@@ -7,6 +9,18 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #B9B9B9;
+$color-gray7: #CCCCCC;
+$color-gray8: #bfbfbf;
+$color-gray9: #bababa;
+$color-gray10: #D5D5D5;
+$color-gray11: rgba(185, 185, 185, 0.6);
+$color-gray12: #989898;
+$color-gray13: rgba(146, 146, 146, 0.48);
+$color-gray14: #575757;
+$color-gray15: #929292;
+$color-gray16: #afafaf;
+$color-gray17: #868686;
 
 $color-blue: #4267b2;