Merge pull request 'feature/development' (#1) from feature/development 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",

package.json

@@ -16,25 +16,25 @@
   "keywords": [],
   "author": "",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vtex/prettier-config": "0.1.4",
+    "concurrently": "^6.0.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-config-vtex": "12.3.2",
+    "eslint-config-vtex-react": "^6.2.1",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-sass": "^5.0.0",
     "gulp-wait": "0.0.2",
-    "sass": "^1.37.5",
-    "concurrently": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vtex/prettier-config": "0.1.4",
-    "eslint-config-vtex": "12.3.2",
-    "eslint-config-vtex-react": "^6.2.1",
-    "eslint-plugin-react": "^7.23.1",
     "husky": "^5.2.0",
     "lint-staged": "10.1.1",
     "prettier": "2.0.2",
+    "sass": "^1.37.5",
     "typescript": "3.8.3"
   },
   "dependencies": {

react/DescontPix.tsx

@@ -0,0 +1,3 @@
+import { DescontPix } from "./components/descont-pix";
+
+export default DescontPix;

react/InsertJS.tsx

@@ -0,0 +1,3 @@
+import { InsertJS } from "./components/Insert-js";
+
+export default InsertJS;

react/components/Insert-js/index.tsx

@@ -0,0 +1,11 @@
+export const InsertJS = () => {
+
+  // INSERIR PLACEHOLDER NO INPUT CEP
+  if (typeof document !== 'undefined') {
+    const inputCEP = document.querySelector(".vtex-address-form-4-x-input");
+    inputCEP?.setAttribute("placeholder", "Digite seu CEP")
+  }
+
+  return null;
+
+}

react/components/descont-pix/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const DescontPix: FC = () => {
+
+  const productContextValue = useProduct();
+
+  let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.lowPrice);
+  sellingPrice = (sellingPrice - (sellingPrice/10));
+
+
+  return (
+    <div className={styles.containerDescontPix}>
+      <img src="https://agenciamagma.vteximg.com.br/arquivos/logoPixjosecarloslins.png" alt="Logo PIX" />
+      <div className={styles.containerDescontPixPrice}>
+        <span className={styles.priceDescontPix}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span>
+        <span className={styles.descontDescontPix}>10 % de desconto</span>
+      </div>
+    </div>
+  );
+}

react/components/descont-pix/styles.css

@@ -0,0 +1,31 @@
+.containerDescontPix{
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.containerDescontPix img {
+  width: 66px;
+  height: 24px;
+  margin-right: 26px;
+}
+
+.containerDescontPixPrice{
+  display: flex;
+  flex-direction: column;
+}
+
+.priceDescontPix{
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.descontDescontPix{
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

react/types/index.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.png";
+declare module "*.svg";

store/blocks/footer/footer.json

@@ -7,19 +7,35 @@
   },
   "footer-layout.desktop": {
     "children": [
+      "flex-layout.row#newsletter",
       "flex-layout.row#footer-1-desktop",
-      "flex-layout.row#footer-2-desktop",
       "flex-layout.row#footer-3-desktop"
     ]
   },
+  "flex-layout.row#newsletter": {
+    "children": [
+      "newsletter"
+    ],
+    "props": {
+      "blockClass": "newsletter-footer"
+    }
+  },
+
+  "newsletter": {
+    "props": {
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail"
+    }
+  },
+
   "flex-layout.row#footer-1-desktop": {
     "children": [
       "vtex.menu@2.x:menu#Products",
       "vtex.menu@2.x:menu#footer-clothing",
-      "vtex.menu@2.x:menu#footer-decoration",
-      "vtex.menu@2.x:menu#footer-bags",
       "footer-spacer",
-      "social-networks"
+      "vtex.menu@2.x:menu#footer-decoration",
+      "footer-spacer",
+      "flex-layout.col#social-link-and-payments"
     ],
     "props": {
       "blockClass": "menu-row",
@@ -29,26 +45,226 @@
   },
   "social-networks": {
     "props": {
+      "blockClass": "social-links-footer",
       "socialNetworks": [
         {
           "name": "Facebook",
           "url": "https://www.facebook.com/vtexonline/"
         },
         {
-          "name": "Instagram",
+          "name": "Pinterest",
-          "url": "https://www.instagram.com/vtextruecloud/"
+          "url": "https://br.pinterest.com/"
-        },
-        {
-          "name": "Twitter",
-          "url": "https://twitter.com/vtexonline"
-        },
-        {
-          "name": "Youtube",
-          "url": "https://www.youtube.com/user/VTEXTV"
         }
       ]
     }
   },
+
+  "flex-layout.col#social-link-and-payments": {
+    "children":[
+      "flex-layout.col#sociais-link-container",
+      "flex-layout.col#payments-container"
+    ],
+    "props": {
+      "blockClass": "menu-social-links-and-payments"
+    }
+  },
+
+  "flex-layout.col#sociais-link-container":{
+    "children": [
+      "rich-text#title-nos-siga",
+      "flex-layout.row#sociais-link"
+    ],
+    "props": {
+      "blockClass": "sociais-links-container"
+    }
+  },
+
+  "flex-layout.col#payments-container":{
+    "children": [
+      "rich-text#title-payments",
+      "flex-layout.row#payments-icons"
+    ],
+    "props": {
+      "blockClass": "sociais-links-container"
+    }
+  },
+
+  "rich-text#title-payments": {
+    "props": {
+        "text": "Formas de pagamento",
+        "blockClass": "title-payments"
+    }
+  },
+
+  "flex-layout.row#payments-icons": {
+    "children": [
+      "image#mastercard",
+      "image#dinners",
+      "image#boleto",
+      "image#pix",
+      "image#elo",
+      "image#hipercard",
+      "image#visa",
+      "image#amex"
+    ],
+    "props": {
+      "blockClass": "wrapper-payments-icons"
+    }
+  },
+
+  "flex-layout.row#sociais-link": {
+    "children": [
+      "image#email",
+      "image#facebook",
+      "image#pinterest",
+      "image#spotify",
+      "image#linkedin",
+      "image#twitter",
+      "image#instagram",
+      "image#whatsapp",
+      "image#youtube"
+    ],
+    "props": {
+      "blockClass": "wrapper-social-links"
+    }
+  },
+
+  "rich-text#title-nos-siga": {
+    "props": {
+        "text": "Nos siga",
+        "blockClass": "title-nos-siga"
+    }
+  },
+
+  "image#email":{
+    "props": {
+      "link": {
+        "url": "mailto:contato@vtex.com.br"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/EmailChallegeVtexT4.svg"
+    }
+  },
+
+  "image#facebook":{
+    "props": {
+      "link": {
+        "url": "https://www.facebook.com/vtexonline/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/FacebookChallegeVtexT4.svg"
+    }
+  },
+
+  "image#pinterest":{
+    "props": {
+      "link": {
+        "url": "https://br.pinterest.com/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/PinterestChallegeVtexT4.svg"
+    }
+  },
+
+  "image#spotify":{
+    "props": {
+      "link": {
+        "url": "https://open.spotify.com/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/SpotyFyChallegeVtexT4.svg"
+    }
+  },
+
+  "image#linkedin":{
+    "props": {
+      "link": {
+        "url": "https://br.linkedin.com/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/LinkedinChallegeVtexT4.svg"
+    }
+  },
+
+  "image#twitter":{
+    "props": {
+      "link": {
+        "url": "https://twitter.com/vtexonline"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/TwiterChallegeVtexT4.svg"
+    }
+  },
+
+  "image#instagram":{
+    "props": {
+      "link": {
+        "url": "https://www.instagram.com/vtextruecloud/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/InstagramChallegeVtexT4.svg"
+    }
+  },
+
+  "image#whatsapp":{
+    "props": {
+      "link": {
+        "url": "https://www.whatsapp.com/?lang=pt_br"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/WhatsAppChallegeVtexT4.svg"
+    }
+  },
+
+  "image#youtube":{
+    "props": {
+      "link": {
+        "url": "https://www.youtube.com/user/VTEXTV"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/YouTubeChallegeVtexT4.svg"
+    }
+  },
+
+  "image#mastercard":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/MasterCardChallegeVtexT4.png"
+    }
+  },
+
+  "image#dinners":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/DinnersChallegeVtexT4.png"
+    }
+  },
+
+  "image#boleto":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/BoletoChallegeVtexT4.png"
+    }
+  },
+
+  "image#pix":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/PixChallegeVtexT4.png"
+    }
+  },
+
+  "image#elo":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/EloChallegeVtexT4.png"
+    }
+  },
+
+  "image#hipercard":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/HiperCardChallegeVtexT4.png"
+    }
+  },
+
+  "image#visa":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/VisaChallegeVtexT4.png"
+    }
+  },
+
+  "image#amex":{
+    "props": {
+      "src": "https://agenciamagma.vtexassets.com/arquivos/AmexChallegeVtexT4.png"
+    }
+  },
+
   "flex-layout.row#footer-2-desktop": {
     "children": [
       "accepted-payment-methods"
@@ -68,20 +284,88 @@
   },
   "flex-layout.row#footer-3-desktop": {
     "children": [
-      "rich-text#footer"
+      "rich-text#footer",
+      "flex-layout.row#develop"
     ],
     "props": {
       "blockClass": "credits"
     }
   },
+
   "rich-text#footer": {
     "props": {
-      "text": "All stock and product photos are from photos.icons8.com",
+      "text": "**Copyright © 2022 M3 Academy. Todos os direitos reservados.** \n R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ \n CNPJ: 12.345.678.0009-10",
-      "blockClass": "footer"
+      "blockClass": "footer-copyright",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER"
     }
   },
+
+  "flex-layout.row#develop": {
+    "props": {
+      "blockClass": "container-develop"
+    },
+    "children": [
+      "flex-layout.row#content-vtex",
+      "flex-layout.row#content-m3"
+    ]
+  },
+
+  "flex-layout.row#content-vtex": {
+    "props": {
+      "blockClass": "content-vtex-develop"
+    },
+    "children": [
+      "rich-text#title-develop-vtex",
+      "image#icon-vtex"
+    ]
+  },
+
+  "flex-layout.row#content-m3": {
+    "props": {
+      "blockClass": "content-m3-develop"
+    },
+    "children": [
+      "rich-text#title-develop-m3",
+      "image#icon-m3"
+    ]
+  },
+
+  "rich-text#title-develop-vtex": {
+    "props": {
+      "text": "Powered by",
+      "blockClass": "title-develop-vtex"
+    }
+  },
+
+  "image#icon-vtex": {
+    "props": {
+      "link": {
+        "url": "https://vtex.com/br-pt/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/logovtexChallegeVtexT4.svg"
+    }
+  },
+
+  "rich-text#title-develop-m3": {
+    "props": {
+      "text": "Developed by",
+      "blockClass": "title-develop-vtex"
+    }
+  },
+
+  "image#icon-m3": {
+    "props": {
+      "link": {
+        "url": "https://m3ecommerce.com/"
+      },
+      "src": "https://agenciamagma.vtexassets.com/arquivos/logom3ChallegeVtexT4.svg"
+    }
+  },
+
   "footer-layout.mobile": {
     "children": [
+      "flex-layout.row#newsletter",
       "flex-layout.row#1-footer-mobile",
       "flex-layout.row#2-footer-mobile"
     ]
@@ -98,9 +382,9 @@
   },
   "flex-layout.col#footer-1-mobile": {
     "children": [
-      "accepted-payment-methods",
+      "vtex.menu@2.x:menu#footer-decoration",
-      "social-networks",
+      "flex-layout.col#social-link-and-payments",
-      "rich-text#footer-mobile"
+      "flex-layout.row#footer-3-desktop"
     ],
     "props": {
       "blockClass": "payment-methods",
@@ -112,7 +396,8 @@
   "flex-layout.row#1-footer-mobile": {
     "props": {
       "paddingTop": 4,
-      "paddingBottom": 4
+      "paddingBottom": 4,
+      "blockClass": "container-menu-1-footer-mobile"
     },
     "children": [
       "vtex.menu@2.x:menu#footer-mobile"

store/blocks/footer/menu.json

@@ -4,15 +4,43 @@
       "orientation": "vertical"
     },
     "children": [
-      "menu-item#news",
+      "flex-layout.col#menu-1-footer"
-      "menu-item#blackfriday",
-      "menu-item#sale",
-      "menu-item#personalization"
     ]
   },
-  "menu-item#news": {
+
+  "flex-layout.col#menu-1-footer": {
     "props": {
-      "id": "menu-item-news",
+      "blockClass": "menu-1-footer"
+    },
+    "children": [
+      "rich-text#title-site-m3-academy",
+      "menu-item#loja-ebit-ouro",
+      "menu-item#trocas-e-devolucoes",
+      "menu-item#central-de-atendimento",
+      "menu-item#fale-conosco",
+      "menu-item#imprensa",
+      "menu-item#rastreamento",
+      "rich-text#cnpj-m3"
+    ]
+  },
+
+  "rich-text#title-site-m3-academy": {
+    "props": {
+        "text": "Site M3 academy",
+        "blockClass": "title-site-m3-academy"
+    }
+  },
+
+  "rich-text#cnpj-m3": {
+    "props": {
+        "text": "CNPJ 12.345.678.0009-10",
+        "blockClass": "cnpj-m3"
+    }
+  },
+
+  "menu-item#loja-ebit-ouro": {
+    "props": {
+      "id": "loja-ebit-ouro",
       "type": "custom",
       "iconId": null,
       "highlight": false,
@@ -20,14 +48,14 @@
         "type": "internal",
         "href": "#",
         "noFollow": false,
-        "tagTitle": "News",
+        "tagTitle": "LojaEbitOuro",
-        "text": "News"
+        "text": "Loja Ebit Ouro"
       }
     }
   },
-  "menu-item#blackfriday": {
+  "menu-item#trocas-e-devolucoes": {
     "props": {
-      "id": "menu-item-black-friday",
+      "id": "trocas-e-devolucoes",
       "type": "custom",
       "iconId": null,
       "highlight": false,
@@ -35,14 +63,14 @@
         "type": "internal",
         "href": "#",
         "noFollow": false,
-        "tagTitle": "BlackFriday",
+        "tagTitle": "TrocasEDevoluções",
-        "text": "Black Friday"
+        "text": "Trocas e devoluções"
       }
     }
   },
-  "menu-item#sale": {
+  "menu-item#central-de-atendimento": {
     "props": {
-      "id": "menu-item-sale",
+      "id": "central-de-atendimento",
       "type": "custom",
       "iconId": null,
       "highlight": false,
@@ -50,14 +78,14 @@
         "type": "internal",
         "href": "#",
         "noFollow": false,
-        "tagTitle": "Sale",
+        "tagTitle": "CentralDeAtendimento",
-        "text": "Sale"
+        "text": "Central de atendimento"
       }
     }
   },
-  "menu-item#personalization": {
+  "menu-item#fale-conosco": {
     "props": {
-      "id": "menu-item-personalization",
+      "id": "fale-conosco",
       "type": "custom",
       "iconId": null,
       "highlight": false,
@@ -65,51 +93,91 @@
         "type": "internal",
         "href": "#",
         "noFollow": false,
-        "tagTitle": "Personalization",
+        "tagTitle": "fale-conosco",
-        "text": "Personalization"
+        "text": "Fale conosco"
+      }
+    }
+  },
+
+  "menu-item#imprensa": {
+    "props": {
+      "id": "imprensa",
+      "type": "custom",
+      "iconId": null,
+      "highlight": false,
+      "itemProps": {
+        "type": "internal",
+        "href": "#",
+        "noFollow": false,
+        "tagTitle": "Imprensa",
+        "text": "Imprensa"
+      }
+    }
+  },
+
+  "menu-item#rastreamento": {
+    "props": {
+      "id": "rastreamento",
+      "type": "custom",
+      "iconId": null,
+      "highlight": false,
+      "itemProps": {
+        "type": "internal",
+        "href": "#",
+        "noFollow": false,
+        "tagTitle": "Rastreamento",
+        "text": "Rastreamento"
       }
     }
   },
 
   "vtex.menu@2.x:menu#footer-decoration": {
     "props": {
-      "orientation": "vertical"
+      "orientation": "vertical",
+      "blockClass": "menu-seja-franqueado"
     },
     "children": [
+      "rich-text#title-seja-um-fraqueado",
       "menu-item#smartphones",
-      "menu-item#videogames",
+      "menu-item#videogames"
-      "menu-item#tvs"
     ]
   },
 
+  "rich-text#title-seja-um-fraqueado": {
+    "props": {
+        "text": "Seja um franqueado",
+        "blockClass": "title-seja-um-franqueado"
+    }
+  },
+
   "menu-item#smartphones": {
     "props": {
-      "id": "menu-item-smartphones",
+      "id": "menu-item-seja-um-franqueado",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/decoration/smartphones",
+        "href": "#",
         "noFollow": true,
-        "tagTitle": "Smartphones",
+        "tagTitle": "Seja um franqueado",
-        "text": "Smartphones"
+        "text": "Seja um franqueado"
       }
     }
   },
 
   "menu-item#videogames": {
     "props": {
-      "id": "menu-item-videogames",
+      "id": "menu-item-multimarcas",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/decoration/videogames",
+        "href": "#",
         "noFollow": true,
-        "tagTitle": "Videogames",
+        "tagTitle": "Multimarcas",
-        "text": "Videogames"
+        "text": "Multimarcas"
       }
     }
   },
@@ -191,42 +259,60 @@
 
   "vtex.menu@2.x:menu#footer-clothing": {
     "props": {
-      "orientation": "vertical"
+      "orientation": "vertical",
+      "blockClass": "menu-2-site-m3"
     },
     "children": [
+      "rich-text#title-a-m3-academy",
       "menu-item#clothing",
       "menu-item#shorts",
       "menu-item#tank-tops",
+      "rich-text#title-responsabilidade-social",
       "menu-item#shirts",
       "menu-item#sweatshirt",
       "menu-item#cropped"
     ]
   },
 
+  "rich-text#title-a-m3-academy": {
+    "props": {
+        "text": "A M3 Academy",
+        "blockClass": "title-a-m3-academy"
+    }
+  },
+
+  "rich-text#title-responsabilidade-social": {
+    "props": {
+        "text": "Responsabilidade Social",
+        "blockClass": "title-responsabilidade-social"
+    }
+  },
+
   "vtex.menu@2.x:menu#footer-mobile": {
     "props": {
-      "orientation": "vertical"
+      "orientation": "vertical",
+      "blockClass": "menu-1-footer-mobile"
     },
     "children": [
-      "menu-item#clothing-mobile",
+      "menu-item#site-m3-academy",
-      "menu-item#decoration-mobile",
+      "menu-item#a-m3-academy"
-      "menu-item#sale-mobile"
     ]
   },
 
-  "menu-item#clothing-mobile": {
+  "menu-item#site-m3-academy": {
     "props": {
-      "id": "menu-item-category-clothing",
+      "id": "menu-item-site-m3-academy",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/d",
+        "href": "#",
         "noFollow": true,
-        "tagTitle": "Clothing",
+        "tagTitle": "Site M3 Academy",
-        "text": "Clothing"
+        "text": "Site M3 Academy"
-      }
+      },
+      "blockClass": "site-m3-academy"
     },
     "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
   },
@@ -239,20 +325,23 @@
       "orientation": "vertical"
     },
     "children": [
-      "menu-item#shorts",
+      "menu-item#loja-ebit-ouro",
-      "menu-item#tank-tops",
+      "menu-item#trocas-e-devolucoes",
-      "menu-item#shirts",
+      "menu-item#central-de-atendimento",
-      "menu-item#sweatshirt",
+      "menu-item#fale-conosco",
-      "menu-item#cropped"
+      "menu-item#imprensa",
+      "menu-item#rastreamento",
+      "rich-text#cnpj-m3"
     ]
   },
 
-  "menu-item#decoration-mobile": {
+  "menu-item#a-m3-academy": {
     "props": {
       "itemProps": {
-        "tagTitle": "Decoration",
+        "tagTitle": "A M3 Academy",
-        "text": "Decoration"
+        "text": "A M3 Academy"
-      }
+      },
+      "blockClass": "a-m3-academy"
     },
     "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
   },
@@ -265,9 +354,9 @@
       "orientation": "vertical"
     },
     "children": [
-      "menu-item#smartphones",
+      "menu-item#clothing",
-      "menu-item#videogames",
+      "menu-item#shorts",
-      "menu-item#tvs"
+      "menu-item#tank-tops"
     ]
   },
 
@@ -297,96 +386,96 @@
 
   "menu-item#clothing": {
     "props": {
-      "id": "menu-item-category-clothing",
+      "id": "menu-item-seja-um-franqueado",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/d",
+        "href": "#",
         "noFollow": true,
-        "tagTitle": "Clothing",
+        "tagTitle": "SejaUmFranqueado",
-        "text": "Clothing"
+        "text": "Seja um franqueado"
       }
     }
   },
 
   "menu-item#shorts": {
     "props": {
-      "id": "menu-item-shorts",
+      "id": "menu-item-quem-somos",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/shorts",
+        "href": "#",
         "noFollow": false,
-        "tagTitle": "Shorts",
+        "tagTitle": "QuemSomos",
-        "text": "Shorts"
+        "text": "Quem somos"
       }
     }
   },
 
   "menu-item#tank-tops": {
     "props": {
-      "id": "menu-item-tank-tops",
+      "id": "menu-item-nossas-lojas",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/tank-tops",
+        "href": "#",
         "noFollow": false,
-        "tagTitle": "Tank tops",
+        "tagTitle": "Nossas lojas",
-        "text": "Tank tops"
+        "text": "Nossas lojas"
       }
     }
   },
 
   "menu-item#shirts": {
     "props": {
-      "id": "menu-item-shirts",
+      "id": "menu-item-franquias",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/shirts",
+        "href": "#",
         "noFollow": false,
-        "tagTitle": "Shirts",
+        "tagTitle": "Franquias",
-        "text": "Shirts"
+        "text": "Franquias"
       }
     }
   },
 
   "menu-item#sweatshirt": {
     "props": {
-      "id": "menu-item-sweat-shirts",
+      "id": "menu-item-procon-mg",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/sweatshirt",
+        "href": "#",
         "noFollow": false,
-        "tagTitle": "Sweatshirt",
+        "tagTitle": "Procon MG",
-        "text": "Sweatshirt"
+        "text": "Procon MG"
       }
     }
   },
 
   "menu-item#cropped": {
     "props": {
-      "id": "menu-item-cropped",
+      "id": "menu-item-política-de-privacidade",
       "type": "custom",
       "iconId": null,
       "highlight": false,
       "itemProps": {
         "type": "internal",
-        "href": "/clothing/cropped",
+        "href": "#",
         "noFollow": false,
-        "tagTitle": "Cropped",
+        "tagTitle": "Política de Privacidade",
-        "text": "Cropped"
+        "text": "Política de Privacidade"
       }
     }
   }

store/blocks/header/header.jsonc

@@ -7,12 +7,27 @@
   },
   "header-layout.desktop": {
     "children": [
-      "flex-layout.row#1-desktop",
+      "flex-layout.row#top-menu-descont",
-      "flex-layout.row#3-desktop",
       "sticky-layout#4-desktop"
     ]
   },
 
+  "flex-layout.row#top-menu-descont":{
+    "props": {
+      "blockClass": "container-top-menu-descont"
+    },
+    "children": [
+      "rich-text#text-top-menu-descont"
+    ]
+  },
+
+  "rich-text#text-top-menu-descont": {
+    "props": {
+        "text": "Desconto na primeira compra",
+        "blockClass": "text-top-menu-descont"
+    }
+  },
+
   "flex-layout.row#1-desktop": {
     "children": ["telemarketing"],
     "props": {
@@ -57,47 +72,69 @@
     "children": [
       "flex-layout.col#logo-desktop",
       "flex-layout.col#category-menu",
-      "flex-layout.col#spacer",
+      // "flex-layout.col#spacer",
       "search-bar",
-      "locale-switcher",
+      "flex-layout.row#login-and-cart"
-      "login",
-      "minicart.v2"
     ]
   },
+
+  "search-bar":{
+    "props": {
+      "placeholder": "Faça sua busca"
+    }
+  },
+
   "flex-layout.col#logo-desktop": {
     "props": {
-      "verticalAlign": "middle"
+      "verticalAlign": "middle",
+      "blockClass": "logo-desktop-m3academy"
     },
     "children": ["logo#desktop"]
   },
   "flex-layout.col#category-menu": {
     "props": {
-      "verticalAlign": "middle"
+      "verticalAlign": "middle",
+      "blockClass": "menu-header-container"
     },
     "children": ["vtex.menu@2.x:menu#category-menu"]
   },
   "logo#desktop": {
     "props": {
-      "title": "Logo",
+      "title": "Logo M3 Academy",
       "href": "/",
-      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
+      "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
-      "width": "180",
+      "width": "100%",
-      "height": "12"
+      "height": "auto"
     }
   },
   "header-layout.mobile": {
-    "children": ["sticky-layout#1-mobile"]
+    "children": [
+      "flex-layout.row#top-menu-descont",
+      "sticky-layout#1-mobile"
+    ],
+    "props": {
+      "sticky": false
+    }
   },
   "sticky-layout#1-mobile": {
-    "children": ["flex-layout.row#1-mobile"]
+    "children": ["flex-layout.row#mobile-header-col"]
   },
+
+  "flex-layout.row#mobile-header-col": {
+    "children": [
+      "flex-layout.row#1-mobile",
+      "search-bar#mobile"
+    ],
+    "props": {
+      "blockClass": "mobile-header-col"
+    }
+  },
+
   "flex-layout.row#1-mobile": {
     "children": [
       "drawer",
       "logo#mobile",
-      "flex-layout.col#spacer",
+      "flex-layout.row#login-and-cart"
-      "login",
-      "minicart.v2"
     ],
     "props": {
       "blockClass": "main-header-mobile",
@@ -106,8 +143,22 @@
       "fullWidth": true
     }
   },
+
+  "flex-layout.row#login-and-cart":{
+    "children": [
+      "login",
+      "minicart.v2"
+    ],
+    "props": {
+      "blockClass": "login-and-cart-container"
+    }
+  },
+
   "drawer": {
-    "children": ["menu#drawer"]
+    "children": ["menu#drawer"],
+    "props": {
+      "blockClass": "drawer-header"
+    }
   },
 
   "menu#drawer": {
@@ -125,9 +176,16 @@
     "props": {
       "title": "Logo",
       "href": "/",
-      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
+      "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
-      "width": "77.5",
+      "width": "140",
-      "height": "27.5"
+      "height": "33",
+      "blockClass": "logo-mobile-header"
+    }
+  },
+
+  "search-bar#mobile": {
+    "props": {
+      "blockClass": "search-mobile-header"
     }
   }
 }

store/blocks/pdp/product.jsonc

@@ -3,12 +3,14 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "html#DescriptionSectionPDP",
-      "flex-layout.row#specifications-title",
+      "flex-layout.row#related-products-pdp",
-      "product-specification-group#table",
+      "product-questions-and-answers",
-      "shelf.relatedProducts",
+      "insert-js"
-      "product-questions-and-answers"
+    ],
-    ]
+    "props": {
+      "paddingLeft": 7
+    }
   },
   "html#breadcrumb": {
     "props": {
@@ -18,6 +20,215 @@
     },
     "children": ["breadcrumb"]
   },
+
+  "html#DescriptionSectionPDP":{
+    "props": {
+      "tag": "section"
+    },
+    "children": [
+      "tab-layout#pdp"
+    ]
+  },
+
+  "flex-layout.row#descriptionSectionProductPDP": {
+    "props": {
+      "blockClass": "container-description-section-product-pdp"
+    },
+    "children": [
+      "product-images#description",
+      "product-description"
+    ]
+  },
+
+  "product-description":{
+    "props":{
+      "blockClass": "container-description-pdp"
+    }
+  },
+
+  "product-images#description": {
+    "props":{
+      "displayMode": "first-image",
+      "zoomMode": "disabled",
+      "blockClass": "image-description-pdp"
+    }
+  },
+
+  "tab-layout#pdp": {
+  "children": [
+    "tab-list#pdp",
+    "tab-content#pdp"
+  ],
+  "props": {
+    "blockClass": "description-pdp-tab-layout",
+    "defaultActiveTabId": "description1"
+  }
+},
+
+"tab-list#pdp": {
+  "children": [
+    "tab-list.item#description1",
+    "tab-list.item#description2",
+    "tab-list.item#description3",
+    "tab-list.item#description4",
+    "tab-list.item#description5"
+  ],
+  "props": {
+    "blockClass": "container-list-tab-layout-pdp"
+  }
+},
+"tab-list.item#description1": {
+  "props": {
+    "tabId": "description1",
+    "label": "Descrição",
+    "defaultActiveTab": true
+  }
+},
+"tab-list.item#description2": {
+  "props": {
+    "tabId": "description2",
+    "label": "Descrição"
+  }
+},
+"tab-list.item#description3": {
+  "props": {
+    "tabId": "description3",
+    "label": "Descrição",
+    "defaultActiveTab": true
+  }
+},
+"tab-list.item#description4": {
+  "props": {
+    "tabId": "description4",
+    "label": "Descrição"
+  }
+},
+"tab-list.item#description5": {
+  "props": {
+    "tabId": "description5",
+    "label": "Descrição",
+    "defaultActiveTab": true
+  }
+},
+"tab-content#pdp": {
+     "children": [
+       "tab-content.item#description1",
+       "tab-content.item#description2",
+       "tab-content.item#description3",
+       "tab-content.item#description4",
+       "tab-content.item#description5"
+     ]
+   },
+   "tab-content.item#description1": {
+     "children": [
+       "flex-layout.row#descriptionSectionProductPDP"
+     ],
+     "props": {
+       "tabId": "description1"
+     }
+   },
+   "tab-content.item#description2": {
+     "children": [
+      "flex-layout.row#descriptionSectionProductPDP"
+     ],
+     "props": {
+       "tabId": "description2"
+     }
+   },
+   "tab-content.item#description3": {
+    "children": [
+      "flex-layout.row#descriptionSectionProductPDP"
+    ],
+    "props": {
+      "tabId": "description3"
+    }
+  },
+  "tab-content.item#description4": {
+    "children": [
+     "flex-layout.row#descriptionSectionProductPDP"
+    ],
+    "props": {
+      "tabId": "description4"
+    }
+  },
+  "tab-content.item#description5": {
+    "children": [
+      "flex-layout.row#descriptionSectionProductPDP"
+    ],
+    "props": {
+      "tabId": "description5"
+    }
+  },
+
+  "rich-text#title-related-products": {
+    "props": {
+        "text": "### Você também pode gostar:",
+        "blockClass": "title-related-products"
+    }
+  },
+
+  "html#product-summary.shelf#related-products-pdp": {
+    "props":{
+      "testId": "vtex-product-summary",
+      "maxWidth": "100%"
+    },
+    "children": [
+      "stack-layout#prodsum",
+      "product-summary-name",
+      "product-summary-price"
+    ]
+  },
+
+  "product-summary.shelf#related-products-pdp": {
+    "children": [
+      "html#product-summary.shelf#related-products-pdp"
+    ],
+    "props": {
+      "blockClass": "container-product-summary-related-products-pdp"
+    }
+  },
+
+  "list-context.product-list#related-products-pdp": {
+    "blocks": ["product-summary.shelf#related-products-pdp"],
+    "children": ["html#slider-layout#pratileira-pdp"]
+  },
+
+  "html#slider-layout#pratileira-pdp": {
+    "children": [
+      "slider-layout#pratileira-pdp"
+    ],
+    "props": {
+      "testId": "product-summary-list"
+    }
+  },
+
+  "slider-layout#pratileira-pdp": {
+    "props": {
+      "blockClass": "container-slider-related-products-pdp",
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "mobile": 2
+      }
+    }
+  },
+
+  "html#related-products-testid": {
+    "children": [
+      "rich-text#title-related-products",
+      "list-context.product-list#related-products-pdp"
+    ]
+  },
+
+  "flex-layout.row#related-products-pdp":{
+    "props": {
+      "blockClass": "container-related-products-pdp"
+    },
+    "children": [
+      "html#related-products-testid"
+    ]
+  },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -42,6 +253,7 @@
       "Then": "flex-layout.row#product-main",
       "Else": "flex-layout.row#product-availability"
     }
+
   },
   "flex-layout.row#product-main": {
     "props": {
@@ -50,9 +262,10 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "container-product-main"
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["html#stack", "flex-layout.col#right-col"]
   },
 
   "stack-layout": {
@@ -60,7 +273,7 @@
       "blockClass": "product"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "html#flex-layout.row#product-image",
       "product-bookmark",
       "product-specification-badges"
     ]
@@ -75,56 +288,132 @@
     }
   },
 
-  "flex-layout.col#stack": {
+  "html#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "100%",
-      "rowGap": 0
+      "rowGap": 0,
+      "colGap": 0
     }
   },
-  "flex-layout.row#product-image": {
+  "html#flex-layout.row#product-image": {
+    "props": {
+      "testId": "product-images"
+    },
     "children": ["product-images"]
   },
   "product-images": {
     "props": {
+      "blockClass": "product-images-pdp",
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": true
+      "showNavigationArrows": false,
+      "displayThumbnailsArrows": false,
+      "thumbnailsOrientation": "horizontal",
+      "showPaginationDots": false,
+      "thumbnailMaxHeight": 90,
+      "thumbnailVisibility": "visible"
+
     }
   },
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0
+      "rowGap": 0,
+      "width": "100%"
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-rating-summary",
-      "flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
-      "product-installments",
-      "product-separator",
       "product-identifier.product",
-      "sku-selector",
+      "flex-layout.row#selling-price",
-      "product-quantity",
+      "product-installments#m3",
-      "product-assembly-options",
+      "html#descont-pix",
-      "product-gifts",
+      "html#sku-selector",
-      "flex-layout.row#buy-button",
+      "flex-layout.row#quantity-and-buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
     ]
   },
 
+  "product-installments#m3": {
+    "props": {
+      "markers": ["discount"],
+      "installmentOptionsFilter": {
+        "paymentSystemName": "Mastercard",
+        "installmentsQuantity": 4
+      },
+      "blockClass": "m3-custom-installments",
+      "message": "{installmentsNumber} x <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
+    }
+  },
+
+  "html#descont-pix":{
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": [
+      "descont-pix"
+    ]
+  },
+
+  "flex-layout.row#quantity-and-buy-button": {
+    "props": {
+      "blockClass": "container-quantity-and-buy-button"
+    },
+    "children": [
+      "html#product-quantity-test-id",
+      "html#buy-button-test-id"
+    ]
+  },
+  "html#product-quantity-test-id":{
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": [
+      "product-quantity"
+    ]
+  },
+
+  "product-quantity": {
+    "props": {
+      "width": "100%"
+    }
+  },
+
+  "html#buy-button-test-id":{
+    "props": {
+      "testId": "add-to-cart-button"
+    },
+    "children": [
+      "buy-button"
+    ]
+  },
+
+  "buy-button": {
+    "props": {
+      "width": "100%"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "name-product-h1"
     },
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": [
+      "sku-selector"
+    ]
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -145,10 +434,11 @@
       "colGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
-      "paddingTop": 7
+      "paddingTop": 7,
+      "blockClass": "container-product-availability"
     },
     "children": [
-      "flex-layout.col#stack",
+      "html#stack",
       "flex-layout.col#right-col-availability"
     ]
   },
@@ -156,13 +446,14 @@
     "props": {
       "preventVerticalStretch": true,
       "rowGap": 0,
+      "width": "100%",
       "blockClass": "info-availability"
     },
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "html#sku-selector"
     ]
   },
   "flex-layout.row#availability": {

store/interfaces.json

@@ -2,6 +2,12 @@
   "example-component": {
     "component": "Example"
   },
+  "descont-pix": {
+    "component": "DescontPix"
+  },
+  "insert-js": {
+    "component": "InsertJS"
+  },
   "html": {
     "component": "html",
     "composition": "children"

styles/configs/font-faces.css

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

styles/configs/style.json

@@ -4,14 +4,14 @@
       ],
       "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
       "customMedia": [
-        { "s": 20 },
+        { "s": 48 },
         { "ns": {
-            "value": 40,
+            "value": 48,
             "minWidth": true
           }
         },
         { "m": {
-            "value": 40,
+            "value": 48,
             "minWidth": true
           }
         },
@@ -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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/agenciamagma.store-theme.css

@@ -1,16 +0,0 @@
-/*
-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 */
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-}

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,52 @@
+/*
+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-breadcrumb-1-x-container) {
+  padding: 0 40px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.homeIcon, .caretIcon {
+  display: none;
+}
+
+.termArrow::before, .arrow::before {
+  content: ">";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  padding: 0 6px;
+}
+
+.arrow {
+  padding: 0;
+}
+
+.link, .term {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  padding: 0;
+}
+
+.homeLink::after {
+  content: "Home ";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+
+@media screen and (min-width: 1920px) {
+  :global(.vtex-breadcrumb-1-x-container) {
+    padding: 0 360px;
+  }
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,539 @@
-.flexRowContent--menu-link,
+@charset "UTF-8";
-.flexRowContent--main-header {
+/*
-  padding: 0 0.5rem;
+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--newsletter-footer :global(.vtex-store-components-3-x-newsletter) {
+  padding: 32px 0 0 0;
+  background-color: #000000;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) {
+  max-width: 100%;
+  width: 774px;
+  margin-bottom: 16px;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label) {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label)::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  margin: 16px 0;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+  padding: 0;
+  display: flex;
+  border-bottom: 1px solid #929292;
+  height: 32px;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 0;
+  border-radius: 0;
+  height: 32px;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  border-radius: 0;
+  background: transparent;
+  height: 32px;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) {
+  padding: 0;
+  height: 32px;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
+  min-height: 32px;
+  height: 32px;
+  border: 0;
+  background: transparent;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  border-bottom: 3px solid #BFBFBF;
+  border-radius: 0;
+}
+.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) :global(.vtex-button__label) {
+  height: 32px;
 }
 
-@media screen and (min-width: 40em) {
+.flexRow--menu-row {
-  .flexRowContent--menu-link,
+  height: 464px;
-  .flexRowContent--main-header {
+  background-color: #000000;
-    padding: 0 1rem;
+  border-top: 1px solid #FFFFFF;
-  }
 }
 
-@media screen and (min-width: 80rem) {
+.flexRowContent--menu-row {
-  .flexRowContent--menu-link,
+  padding: 32px 32px 0 32px;
-  .flexRowContent--main-header {
+  display: grid;
-    padding: 0 0.25rem;
+  grid-template-columns: max-content max-content 11% max-content 11% 191px;
+  justify-content: space-between;
 }
+.flexRowContent--menu-row .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRowContent--menu-row .flexColChild--menu-social-links-and-payments {
+  height: auto;
+  margin-bottom: 16px;
+}
+.flexRowContent--menu-row .flexColChild--sociais-links-container {
+  width: 200px;
+}
+.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons {
+  display: block;
+  width: 160px;
+}
+.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons .stretchChildrenWidth {
+  width: 100% !important;
+  display: contents;
+}
+.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons .stretchChildrenWidth :global(.vtex-store-components-3-x-imageElement) {
+  margin-right: 8px;
 }
 
-.flexRowContent--menu-link {
+.flexCol--menu-1-footer {
-  background-color: #03044e;
+  row-gap: 8px;
-  color: #fff;
 }
 
+.flexColChild--menu-1-footer :global(.vtex-menu-2-x-styledLinkContainer) {
+  padding: 0;
+}
+.flexColChild--menu-1-footer :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLink) {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 30px;
+  color: rgba(255, 255, 255, 0.45);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.flexCol--sociais-links-container .flexColChild--sociais-links-container {
+  height: max-content !important;
+}
+.flexCol--sociais-links-container .flexRowContent--wrapper-social-links {
+  display: block;
+}
+.flexCol--sociais-links-container .flexRowContent--wrapper-social-links .stretchChildrenWidth {
+  width: 100% !important;
+  display: contents;
+}
+.flexCol--sociais-links-container .flexRowContent--wrapper-social-links .stretchChildrenWidth :global(.vtex-store-components-3-x-imageElement) {
+  margin-right: 8px;
+}
+
+.flexRow--container-menu-1-footer-mobile {
+  background-color: #000000;
+  padding: 0 16px;
+}
+
+.flexRowContent--credits {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  padding: 32px 32px 16px 32px;
+  justify-content: center;
+  align-items: flex-start;
+  border-top: 1px solid #FFFFFF;
+}
+.flexRowContent--credits .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRowContent--credits .flexRowContent--container-develop {
+  display: flex;
+  gap: 16px;
+}
+.flexRowContent--credits .flexRowContent--container-develop .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop {
+  display: flex;
+  gap: 8px;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth {
+  width: max-content !important;
+  align-items: center;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex) {
+  margin: 0;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: #FFFFFF;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop {
+  display: flex;
+  gap: 8px;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth {
+  width: max-content !important;
+  align-items: center;
+}
+.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex) {
+  margin: 0;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: #FFFFFF;
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRowContent--menu-row {
+    padding: 32px 320px 0 320px;
+  }
+  .flexRowContent--credits {
+    padding: 32px 320px 16px 320px;
+  }
+}
+@media screen and (max-width: 1026px) {
+  .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) {
+    padding-top: 64px;
+  }
+  .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-container) {
+    width: 100%;
+    padding: 0 16px;
+  }
+  .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) {
+    width: 100%;
+    margin-bottom: 32px;
+  }
+  .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label)::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+  .flexCol--menu-social-links-and-payments {
+    padding: 16px 0 32px 0;
+  }
+  .flexColChild--payment-methods {
+    padding-bottom: 0;
+  }
+  .flexColChild--payment-methods .flexRowContent--wrapper-payments-icons {
+    display: grid;
+    grid-template-columns: repeat(4, 42px);
+    width: 192px;
+    justify-content: center;
+    gap: 8px;
+    padding: 0;
+  }
+  .flexColChild--payment-methods .flexRowContent--wrapper-payments-icons .stretchChildrenWidth {
+    width: 100% !important;
+    height: 29px;
+    padding: 0;
+  }
+  .flexRowContent--payment-methods {
+    padding-bottom: 0;
+  }
+  .flexCol--sociais-links-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px;
+  }
+  .flexCol--sociais-links-container .flexColChild--sociais-links-container {
+    width: 200px;
+  }
+  .flexCol--sociais-links-container .flexColChild--sociais-links-container .flexRowContent--wrapper-social-links {
+    text-align: center;
+  }
+  .flexRowContent--credits {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    padding: 16px 0 8px 0;
+    height: auto;
+  }
+  .flexRowContent--credits .stretchChildrenWidth {
+    width: max-content !important;
+    padding: 0;
+  }
+  .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop {
+    align-items: center;
+  }
+  .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth {
+    padding: 0;
+  }
+  .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop {
+    align-items: center;
+  }
+  .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth {
+    padding: 0;
+  }
+}
 .flexRowContent--main-header {
-  background-color: #f0f0f0;
+  padding: 24.5px 40px !important;
+  justify-content: space-between;
+}
+.flexRowContent--main-header .flexCol--logo-desktop-m3academy {
+  width: 44.8717%;
+}
+.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) {
+  max-width: 100%;
+  max-height: 100%;
+  min-width: auto;
+  padding: 0;
 }
 
 .flexRowContent--main-header-mobile {
-  align-items: center;
+  justify-content: space-between;
-  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 {
+.flexRowContent--mobile-header-col {
-  align-items: center;
+  padding: 32px 40px;
-  margin-bottom: 5px;
+  flex-direction: column;
-  padding-top: 5px;
+  row-gap: 8px;
+}
+.flexRowContent--mobile-header-col .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) {
+  max-width: 100%;
 }
 
-.flexCol--filterCol {
+.flexRowContent--login-and-cart-container {
-  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%;
+  gap: 40px;
 }
 
-.flexColChild--quickviewDetails:first-child {
+@media screen and (min-width: 1920px) {
-  overflow-y: auto;
+  .flexRowContent--main-header {
-  height: 66% !important;
+    padding: 24.5px 360px !important;
-  overflow-x: hidden;
+  }
+}
+.flexRow--container-product-main {
+  padding: 0 40px;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main {
+  display: grid;
+  grid-template-columns: 48.824% 1fr;
+  grid-column-gap: 32px;
+  padding: 16px 0;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth {
+  padding-right: 0;
 }
 
-.flexColChild--quickviewDetails:last-child {
+.flexRow--container-product-availability {
-  height: 34% !important;
+  padding: 0 40px;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability {
+  display: grid;
+  grid-template-columns: 48.824% 1fr;
+  grid-column-gap: 32px;
+  padding-bottom: 16px;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .stretchChildrenWidth {
+  padding-right: 0;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) {
+  font-size: 0;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after {
+  content: "Produto indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) {
+  font-size: 0;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) {
+  margin-bottom: 16px;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
+  display: grid;
+  grid-template-areas: "name email" "button button";
+  grid-template-columns: 1fr 1fr;
+  column-gap: 8px;
+  row-gap: 15px;
+  max-width: 100%;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
+  grid-area: name;
+  margin: 0;
+  margin-right: 8px;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #989898;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
+  grid-area: email;
+  margin: 0;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #989898;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) {
+  grid-area: button;
+  margin: 0;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
+  width: 100%;
+  border: 0;
+  background-color: #000000;
+  color: #ffffff;
+  border-radius: 0;
+  min-height: auto;
+  vertical-align: auto;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+  padding: 12px 0 !important;
+}
+.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "avise-me";
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
 }
 
-.flexRow--addToCartRow {
+.swiper-wrapper .swiper-slide-active {
-  padding-bottom: 1rem;
+  width: 100%;
+}
+.swiper-wrapper .swiper-slide {
+  width: 100%;
+}
+
+.flexRowContent {
+  margin: 0;
+}
+
+.flexRowContent--container-quantity-and-buy-button {
+  display: grid;
+  grid-template-columns: 128px 1fr;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) {
+  background-color: #000000;
+  border: 0;
+  border-radius: 0;
+}
+.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 12px 0 !important;
+}
+.flexRowContent--container-quantity-and-buy-button .stretchChildrenWidth {
+  width: 100% !important;
+}
+
+.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+  width: 100%;
+}
+
+.flexRowContent--container-related-products-pdp {
+  flex-direction: column;
+  padding: 0 61px;
+}
+.flexRowContent--container-related-products-pdp .stretchChildrenWidth {
+  width: 100% !important;
+}
+
+.flexRow--message-availability {
+  width: 60.0903%;
+}
+
+.flexRow--container-description-section-product-pdp {
+  padding: 0 32px;
+}
+.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp {
+  display: grid;
+  gap: 32px;
+  grid-template-columns: 1fr 1fr;
+}
+.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp .stretchChildrenWidth {
+  width: 100% !important;
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRow--container-product-main {
+    padding: 0 360px;
+  }
+  .flexRow--container-product-main .flexRowContent--container-product-main {
+    grid-template-columns: 49.1305% 1fr;
+  }
+  .flexRow--container-product-availability {
+    padding: 0 360px;
+  }
+  .flexRow--container-product-availability .flexRowContent--container-product-availability {
+    grid-template-columns: 49.1305% 1fr;
+  }
+  .flexRowContent--container-related-products-pdp {
+    padding: 0 381px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--container-product-main .flexRowContent--container-product-main {
+    display: flex;
+    flex-direction: column;
+    padding-top: 16px;
+    padding-bottom: 0;
+  }
+  .flexRowContent--container-related-products-pdp {
+    padding: 0 53px;
+  }
+  .flexRow--container-description-section-product-pdp {
+    padding: 0;
+  }
+  .flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0;
+    gap: 16px;
+    padding: 0;
+    border-bottom: 1px solid #BFBFBF;
+  }
+  .flexRow--container-product-availability .flexRowContent--container-product-availability {
+    display: flex;
+    flex-direction: column;
+  }
+  .flexRow--message-availability {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .flexRowContent--container-quantity-and-buy-button {
+    display: flex;
+    flex-direction: column;
+  }
+  .flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    justify-content: flex-start;
+  }
+  .flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
+    display: inline-block;
+    width: 56.7567%;
+  }
+  .flexRowContent--container-related-products-pdp {
+    padding: 0 48px;
+  }
 }

styles/css/vtex.login.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 */
+.container {
+  height: min-content;
+  align-self: flex-end;
+  padding: 3px 0px;
+}
+.container :global(.vtex-button) {
+  border: 0;
+}
+.container :global(.vtex-button):hover {
+  background: transparent;
+}
+.container :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 !important;
+  padding-left: 4px !important;
+}
+.container :global(.vtex-button) :global(.vtex-button__label) .label {
+  font-size: 0;
+  padding: 0;
+  display: block;
+}
+.container :global(.vtex-button) :global(.vtex-button__label) .label::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
+}

styles/css/vtex.menu.css

@@ -0,0 +1,98 @@
+/*
+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 */
+.menuContainer {
+  gap: 8px !important;
+}
+
+.menuContainer--menu-2-site-m3 :global(.vtex-menu-2-x-styledLinkContainer), .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) {
+  padding: 0;
+}
+.menuContainer--menu-2-site-m3 :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent), .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 30px;
+  color: rgba(255, 255, 255, 0.45);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) {
+  padding: 0;
+}
+.menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 164px;
+  height: 42px;
+  border: 1px solid #FFFFFF;
+  color: #FFFFFF;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 30px;
+}
+
+.menuContainer--menu-1-footer-mobile {
+  gap: 18px !important;
+}
+.menuContainer--menu-1-footer-mobile .styledLinkContainer {
+  padding: 0;
+}
+.menuContainer--menu-1-footer-mobile .styledLinkContent--site-m3-academy, .menuContainer--menu-1-footer-mobile .styledLinkContent--a-m3-academy {
+  border-bottom: 1px solid #FFFFFF;
+}
+.menuContainer--menu-1-footer-mobile .styledLink {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 38px;
+  color: #FFFFFF;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.menuContainer--menu-1-footer-mobile .styledLink .accordionIcon {
+  font-size: 0;
+  border: 0 !important;
+}
+.menuContainer--menu-1-footer-mobile .styledLink .accordionIcon::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowTopFooterChallegeVtexT4.svg");
+  border: 0 !important;
+}
+.menuContainer--menu-1-footer-mobile .submenuAccordion {
+  padding-top: 8px;
+}
+
+@media screen and (max-width: 1026px) {
+  .menuContainer--menu-seja-franqueado {
+    padding: 0 16px;
+    align-items: center;
+  }
+  .menuContainer--menu-seja-franqueado .menuItem {
+    width: 100%;
+  }
+  .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) {
+    width: 100%;
+  }
+}
+:global(.vtex-menu-2-x-styledLink) {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: -0.1em;
+  text-transform: uppercase;
+  color: #929292;
+}
+
+:global(.vtex-menu-2-x-styledLinkContainer) {
+  margin: 0;
+}
+
+:global(.vtex-menu-2-x-menuContainer) {
+  gap: 15px;
+}

styles/css/vtex.minicart.css

@@ -0,0 +1,31 @@
+/*
+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 */
+.minicartContainer {
+  align-self: flex-end;
+  padding: 3px 0;
+}
+.minicartContainer .openIconContainer {
+  padding: 0;
+}
+.minicartContainer .openIconContainer :global(.vtex-minicart-2-x-cartIcon) {
+  display: none;
+}
+.minicartContainer .openIconContainer .minicartIconContainer::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
+}
+.minicartContainer .openIconContainer :global(.vtex-button) {
+  border: 0;
+}
+.minicartContainer .openIconContainer :global(.vtex-button):hover {
+  background: transparent;
+}
+.minicartContainer .openIconContainer :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 !important;
+}

styles/css/vtex.product-highlights.css

@@ -1,12 +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 */
 .productHighlightWrapper--collection {
-  position: absolute;
+  display: none;
-  top: 10px;
-  left: 5px;
-  width: 200px;
-}
-
-.productHighlightText {
-  background: antiquewhite;
-  border-radius: 20px;
-  padding: 5px 10px;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +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 */
 .product-identifier--productReference {
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+  margin-top: 8px;
+}
+.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator {
+  display: none;
+}
+.product-identifier--productReference .product-identifier__value {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
+}
+
+@media screen and (max-width: 1024px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+    margin-bottom: 24px;
+  }
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,35 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.currencyContainer {
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-weight: 700;
-  margin-bottom: 1rem;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }
 
-.savings {
+.installments--m3-custom-installments .installments-discount--m3-custom-installments {
-  font-weight: 500;
+  font-weight: 400;
-  color: #79B03A;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }
-
+.installments--m3-custom-installments .currencyContainer--m3-custom-installments {
-.sellingPriceValue--summary {
+  font-weight: 700;
-  font-size: 1.25rem;
+  font-size: 16px;
-  font-weight: 600;
+  line-height: 22px;
-  color: #2E2E2E;
+  color: #929292;
-}
-
-.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,45 @@
+/*
+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 */
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer {
+  height: 49px;
+  margin: 0;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input), .quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: 0;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
+  height: 49px;
+  border: 1px solid #CCCCCC;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
+
+@media screen and (max-width: 768px) {
+  .quantitySelectorContainer {
+    width: 128px !important;
+  }
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,104 @@
-.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--container-product-summary-related-products-pdp {
+  max-width: 100% !important;
 }
-
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp {
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+  padding: 0;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
 }
-
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .imageStackContainer {
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+  display: flex;
-  opacity: 1;
 }
-
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .imageStackContainer .imageNormal {
-@media screen and (max-width: 40em) {
+  max-height: 100% !important;
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer {
+  padding: 16px 0 8px 0;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #000000;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer {
+  padding: 0;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPriceLabel {
   display: none;
 }
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPriceContainer {
+  padding: 0;
 }
-
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before {
-.nameContainer {
+  content: "de ";
-  justify-content: start;
+  font-weight: 400;
-  padding-top: 1rem;
+  font-size: 14px;
-  padding-bottom: 1rem;
+  line-height: 19px;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after {
+  content: " por";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer {
+  padding: 0;
+  margin-top: 8px;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .sellingPriceLabel {
+  display: none;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer {
+  display: none;
 }
 
-.image {
+@media screen and (max-width: 1024px) {
-  border-radius: 0.25rem;
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand {
+    font-size: 14px;
+    line-height: 19px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer {
+    font-size: 18px;
+    line-height: 25px;
+  }
 }

styles/css/vtex.rich-text.css

@@ -7,3 +7,110 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.paragraph--title-site-m3-academy,
+.paragraph--cnpj-m3,
+.paragraph--title-a-m3-academy,
+.paragraph--title-responsabilidade-social,
+.paragraph--title-seja-um-franqueado,
+.paragraph--title-nos-siga,
+.paragraph--title-payments {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 38px;
+  color: #FFFFFF;
+  margin: 0;
+}
+
+.paragraph--cnpj-m3, .paragraph--title-responsabilidade-social {
+  text-decoration: underline;
+}
+
+.paragraph--title-payments {
+  font-size: 18px;
+  line-height: 38px;
+}
+
+.container--footer-copyright {
+  background-color: #000000;
+  color: rgba(255, 255, 255, 0.45);
+}
+.container--footer-copyright .paragraph--footer {
+  margin: 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+.container--footer-copyright .paragraph--footer-copyright {
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+@media screen and (min-width: 1920px) {
+  .container--footer-copyright {
+    justify-content: flex-start;
+  }
+  .container--footer-copyright .paragraph--footer-copyright {
+    text-align: left;
+  }
+}
+@media screen and (max-width: 1026px) {
+  .container--title-nos-siga, .container--title-payments {
+    justify-content: center;
+  }
+  .paragraph--title-payments {
+    font-size: 14px;
+    line-height: 38px;
+  }
+  .paragraph--footer-copyright {
+    margin: 0;
+  }
+}
+.container--text-top-menu-descont {
+  justify-content: center;
+  background-color: #000000;
+}
+
+.paragraph--text-top-menu-descont {
+  display: flex;
+  margin: 0;
+  padding: 10px 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #FFFFFF;
+}
+.paragraph--text-top-menu-descont::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
+  margin-left: 54px;
+  height: 14px;
+}
+.paragraph--text-top-menu-descont::before {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
+  margin-right: 54px;
+  height: 14px;
+}
+
+.container--title-related-products {
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 32px;
+}
+.container--title-related-products .heading--title-related-products {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .container--title-related-products {
+    margin-bottom: 24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .container--title-related-products .heading--title-related-products {
+    font-size: 20px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,64 @@
-.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--container-slider-related-products-pdp {
+  margin-bottom: 113px;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderTrack--container-slider-related-products-pdp {
+  gap: 16px;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
+  left: -36px;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp .caretIcon--container-slider-related-products-pdp {
+  display: none;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftjosecarloslins.svg");
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
+  right: -30px;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp .caretIcon--container-slider-related-products-pdp {
+  display: none;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightjosecarloslins.svg");
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp {
+  bottom: -42px;
+  display: flex;
+  align-items: center;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp .paginationDot--container-slider-related-products-pdp {
+  background-color: #000000;
+}
+.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp .paginationDot--container-slider-related-products-pdp--isActive {
+  width: 17px !important;
+  height: 17px !important;
+  background-color: #FFFFFF;
+  border: 0.5px solid #000000;
 }
 
-.sliderLayoutContainer--carousel {
+@media screen and (max-width: 1024px) {
-  background-color: #F0F0F0;
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
-  min-height: 450px;
+    left: -23px;
   }
-
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
-.sliderTrackContainer {
+    right: -22px;
-  max-width: 100%;
   }
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
 }
-
+@media screen and (max-width: 768px) {
-.layoutContainer--shelf {
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
-  margin-top: 20px;
+    left: -21px;
-  margin-bottom: 20px;
+  }
-  max-width: 96rem;
+  .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
-  min-height: 550px;
+    right: -20px;
   }
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
 }

styles/css/vtex.stack-layout.css

@@ -1,10 +1,12 @@
-.stackItem--product {
+/*
-  width: 100%;
+0 - 600PX: Phone
-  min-height: 257px
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
 .stackItem--quickview {
-  right: 0;
+  display: none;
-  top: 0;
-  left: auto;
 }

styles/css/vtex.sticky-layout.css

@@ -0,0 +1,16 @@
+/*
+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 */
+.wrapper--sticky-header {
+  background-color: #ffffff !important;
+}
+
+.wrapper--stuck .container {
+  position: relative !important;
+}

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -7,6 +8,426 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.flexRowContent--newsletter-footer .newsletter {
+  height: 175px;
+  background-color: #000000;
+}
+
+.searchBarContainer {
+  padding: 0;
+  align-self: center;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) {
+  display: flex;
+  flex-direction: row-reverse;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid #AEAEAE;
+  height: auto;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 16px;
+  color: #AEAEAE;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  padding-bottom: 8px;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  padding: 0;
+  padding-bottom: 8px;
+  background: transparent;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search) {
+  padding-right: 12px;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search)::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchIcon) {
+  display: none;
+}
+
 .newsletter {
   background: red;
 }
+
+.productImage .productImageTag--main {
+  object-fit: fill !important;
+  max-height: max-content !important;
+}
+
+.carouselGaleryCursor {
+  cursor: auto;
+}
+.carouselGaleryCursor .productImagesGallerySwiperContainer--product-images-pdp {
+  cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp {
+  margin-right: 16px;
+  margin-bottom: 0;
+  width: 90px !important;
+}
+.productImagesThumb--product-images-pdp:last-child {
+  margin-right: 0;
+}
+
+.container {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+}
+
+.skuSelectorNameContainer {
+  margin: 0;
+}
+
+.productNameContainer {
+  text-align: right;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "Outras cores";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "Outros tamanhos:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorOptionsList {
+  display: flex;
+  gap: 16px;
+  margin: 0;
+  margin-bottom: 2px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0;
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .frameAround {
+  border-color: #000000;
+  border-radius: 50%;
+  border-width: 2px;
+  z-index: 5;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border: 1px solid #989898;
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
+  padding: 0;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage {
+  width: 48px;
+  height: 48px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage .diagonalCross {
+  background: #D5D5D5;
+  top: 48%;
+  left: 1%;
+  width: 46px;
+  height: 1px;
+  transform: rotate(-45deg);
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+  color: #000000;
+}
+.skuSelectorContainer .diagonalCross {
+  background: #D5D5D5;
+  top: 46%;
+  left: 1%;
+  width: 38px;
+  height: 1px;
+  transform: rotate(-45deg);
+}
+
+.buyButtonText {
+  font-size: 0;
+}
+.buyButtonText::after {
+  content: "ADICIONAR À SACOLA";
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}
+
+.shippingContainer {
+  width: 409px;
+  position: relative;
+  display: grid;
+  grid-template-areas: "label button notCep";
+  grid-template-columns: 56.4792% max-content 1fr;
+  margin-bottom: 16px;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  grid-area: label;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  padding: 0 16px;
+}
+.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-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  grid-area: notCep;
+  position: absolute;
+  right: 0;
+  top: 43px;
+  padding: 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: #000000;
+  text-decoration-line: underline;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+  height: 49px;
+  border-radius: 0;
+  box-sizing: border-box;
+}
+.shippingContainer :global(.vtex-button) {
+  grid-area: button;
+  width: max-content;
+  height: max-content;
+  background-color: #000000;
+  margin-top: 27px;
+  margin-left: -3px;
+  border-radius: 0;
+  border: 0;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+  width: 49px;
+  height: 49px;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "OK";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #FFFFFF;
+}
+
+.shippingTable {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: max-content;
+  padding-bottom: 1px;
+}
+.shippingTable .shippingTableHead {
+  display: table-caption;
+  text-align: left;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: grid;
+  grid-template-areas: "entrega frete prazo";
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  font-weight: 400;
+  font-size: 14px;
+  color: #202020;
+  text-transform: uppercase;
+  padding: 0;
+  padding-bottom: 15px;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+  grid-area: entrega;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  grid-area: prazo;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  grid-area: frete;
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
+  content: "FRETE";
+  font-weight: 400;
+  font-size: 14px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableBody {
+  display: table-cell;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: grid;
+  grid-template-areas: "entrega frete prazo";
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  padding: 0;
+  padding-bottom: 15px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  grid-area: prazo;
+}
+
+.productDescriptionContainer--container-description-pdp .productDescriptionTitle--container-description-pdp {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText--container-description-pdp {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer--container-description-pdp .productDescriptionTitle--container-description-pdp {
+    font-size: 32px;
+    line-height: 32px;
+  }
+  .productDescriptionText--container-description-pdp {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .productNameContainer {
+    margin-top: 32px;
+    text-align: left;
+  }
+  .productDescriptionContainer--container-description-pdp .productDescriptionTitle--container-description-pdp {
+    font-size: 20px;
+    line-height: 32px;
+  }
+  .productDescriptionText--container-description-pdp {
+    font-size: 14px;
+    line-height: 19px;
+    margin-bottom: 16px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .shippingContainer {
+    width: 100%;
+    grid-template-areas: "label button" "notCep notCep";
+    grid-template-columns: 1fr 46px;
+    padding-bottom: 23px;
+    margin-bottom: 16px;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    padding: 0;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+    grid-area: label;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+    padding: 0 16px;
+  }
+  .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-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+    display: none;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    top: 0;
+    margin-top: 8px;
+  }
+  .carouselGaleryThumbs--product-images-pdp {
+    display: block !important;
+  }
+}
+@media screen and (max-width: 416px) {
+  .shippingTable {
+    width: 100%;
+  }
+  .shippingTable .shippingTableBody .shippingTableRow {
+    align-items: center;
+  }
+}

styles/css/vtex.store-drawer.css

@@ -0,0 +1,18 @@
+/*
+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 */
+.openIconContainer {
+  padding: 0;
+}
+.openIconContainer .menuIcon {
+  display: none;
+}
+.openIconContainer::after {
+  content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
+}

styles/css/vtex.store-footer.css

@@ -1,11 +1,16 @@
-.row--menu-row {
+/*
-  padding-right: 24px;
+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 */
+.socialNetworksContainer .socialNetworkLink .socialNetworkImage--facebook {
+  display: none;
 }
 
-.row--menu-row .rowContainer {
+.footerLayout {
-  align-items: flex-start;
+  background-color: #000000;
-}
-
-.row--payment-methods {
-  padding-top: 16px;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,86 @@
+/*
+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--description-pdp-tab-layout {
+  padding: 0 40px;
+}
+
+.listContainer--container-list-tab-layout-pdp {
+  display: flex;
+  list-style: none;
+  padding: 0 64px;
+  justify-content: space-between;
+  border-bottom: 1px solid #B9B9B9;
+  margin-bottom: 32px;
+}
+.listContainer--container-list-tab-layout-pdp .listItem {
+  width: 114px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  margin: 0;
+}
+.listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) {
+  border: 0;
+  width: max-content;
+  min-height: auto;
+  background: transparent;
+}
+.listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  color: #BFBFBF;
+  text-transform: capitalize;
+  padding: 0 !important;
+}
+.listContainer--container-list-tab-layout-pdp .listItemActive {
+  border-bottom: 2px solid #000000;
+}
+.listContainer--container-list-tab-layout-pdp .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+  color: #000000;
+}
+
+@media screen and (min-width: 1920px) {
+  .container--description-pdp-tab-layout {
+    padding: 0 360px;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem {
+    width: 142px;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    font-size: 24px;
+    line-height: 38px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .listContainer--container-list-tab-layout-pdp {
+    flex-direction: column;
+    padding: 0;
+    margin-bottom: 16px;
+    border-top: 1px solid #B9B9B9;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem {
+    display: flex;
+    width: 100%;
+    margin-bottom: 16px;
+    justify-content: flex-start;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) {
+    display: flex;
+    width: 100%;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem:first-child {
+    margin-top: 16px;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItemActive {
+    border: 0;
+  }
+}

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

@@ -0,0 +1,336 @@
+.flexRowContent--newsletter-footer{
+  :global(.vtex-store-components-3-x-newsletter){
+    padding: 32px 0 0 0;
+    background-color: #000000;
+
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+
+    :global(.vtex-store-components-3-x-form){
+      max-width: 100%;
+      width: 774px;
+
+      margin-bottom: 16px;
+      :global(.vtex-store-components-3-x-label){
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: #FFFFFF;
+
+        display: flex;
+        flex-direction: column;
+
+        &::after{
+          content: "Receba ofertas e novidades por e-mail";
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          text-align: center;
+          color: #929292;
+          margin: 16px 0;
+        }
+      }
+      :global(.vtex-store-components-3-x-inputGroup){
+        padding: 0;
+        display: flex;
+
+        border-bottom: 1px solid #929292;
+        height: 32px;
+
+        :global(.vtex-input){
+          :global(.vtex-input-prefix__group){
+            border: 0;
+            border-radius: 0;
+            height: 32px;
+
+            :global(.vtex-styleguide-9-x-input){
+              border-radius: 0;
+              background: transparent;
+              height: 32px;
+            }
+          }
+        }
+
+        :global(.vtex-store-components-3-x-buttonContainer){
+          padding: 0;
+          height: 32px;
+          :global(.vtex-button){
+            min-height: 32px;
+            height: 32px;
+            border: 0;
+            background: transparent;
+
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 19px;
+
+            border-bottom: 3px solid #BFBFBF;
+
+            border-radius: 0;
+
+            :global(.vtex-button__label){
+              height: 32px;
+            }
+          }
+        }
+      }
+    }
+    }
+}
+
+.flexRow--menu-row{
+  height: 464px;
+  background-color: #000000;
+  border-top: 1px solid #FFFFFF;
+}
+
+.flexRowContent--menu-row{
+  padding: 32px 32px 0 32px;
+
+  display: grid;
+  grid-template-columns: max-content max-content 11% max-content 11% 191px;
+  justify-content: space-between;
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+
+  .flexColChild--menu-social-links-and-payments{
+    height: auto;
+    margin-bottom: 16px;
+  }
+
+  .flexColChild--sociais-links-container{
+      width: 200px;
+  }
+
+  .flexRowContent--wrapper-payments-icons{
+    display: block;
+    width: 160px;
+    .stretchChildrenWidth{
+      width: 100% !important;
+      display: contents;
+
+      :global(.vtex-store-components-3-x-imageElement){
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.flexCol--menu-1-footer{
+  row-gap: 8px;
+}
+
+.flexColChild--menu-1-footer{
+  :global(.vtex-menu-2-x-styledLinkContainer){
+    padding: 0;
+
+    :global(.vtex-menu-2-x-styledLink){
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 30px;
+      color: rgba(255, 255, 255, 0.45);
+      text-transform: none;
+      letter-spacing: 0;
+    }
+  }
+}
+
+.flexCol--sociais-links-container{
+  .flexColChild--sociais-links-container{
+    height: max-content !important;
+  }
+
+  .flexRowContent--wrapper-social-links{
+    display: block;
+    .stretchChildrenWidth{
+      width: 100% !important;
+      display: contents;
+
+      :global(.vtex-store-components-3-x-imageElement){
+        margin-right: 8px;
+      }
+    }
+  }
+}
+.flexRow--container-menu-1-footer-mobile{
+  background-color: #000000;
+  padding: 0 16px;
+}
+
+.flexRowContent--credits{
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  padding: 32px 32px 16px 32px;
+  justify-content: center;
+  align-items: flex-start;
+
+  border-top: 1px solid #FFFFFF;
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+
+  .flexRowContent--container-develop{
+    display: flex;
+    gap: 16px;
+    .stretchChildrenWidth{
+      width: 100% !important;
+    }
+
+    .flexRowContent--content-vtex-develop{
+      display: flex;
+      gap: 8px;
+      .stretchChildrenWidth{
+        width: max-content !important;
+        align-items: center;
+
+        :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex){
+          margin: 0;
+
+          font-weight: 400;
+          font-size: 10px;
+          line-height: 12px;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    .flexRowContent--content-m3-develop{
+      display: flex;
+      gap: 8px;
+      .stretchChildrenWidth{
+        width: max-content !important;
+        align-items: center;
+
+        :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex){
+          margin: 0;
+
+          font-weight: 400;
+          font-size: 10px;
+          line-height: 12px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRowContent--menu-row{
+    padding: 32px 320px 0 320px;
+  }
+
+  .flexRowContent--credits{
+    padding: 32px 320px 16px 320px;;
+  }
+}
+
+@media screen and (max-width: 1026px) {
+
+  .flexRowContent--newsletter-footer{
+    :global(.vtex-store-components-3-x-newsletter){
+      padding-top: 64px;
+      :global(.vtex-store-components-3-x-container){
+        width: 100%;
+        padding: 0 16px;
+      }
+
+      :global(.vtex-store-components-3-x-form){
+        width: 100%;
+        margin-bottom: 32px;
+
+        :global(.vtex-store-components-3-x-label){
+          &::after{
+            font-size: 16px;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .flexCol--menu-social-links-and-payments{
+    padding: 16px 0 32px 0 ;
+  }
+
+  .flexColChild--payment-methods{
+    padding-bottom: 0;
+
+    .flexRowContent--wrapper-payments-icons{
+      display: grid;
+      grid-template-columns: repeat(4, 42px);
+      width: 192px;
+      justify-content: center;
+      gap: 8px;
+      padding: 0;
+
+      .stretchChildrenWidth{
+        width: 100% !important;
+        height: 29px;
+        padding: 0;
+      }
+    }
+  }
+
+  .flexRowContent--payment-methods{
+    padding-bottom: 0;
+  }
+
+  .flexCol--sociais-links-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0 16px;
+
+    .flexColChild--sociais-links-container{
+      width: 200px;
+
+      .flexRowContent--wrapper-social-links{
+        text-align: center;
+      }
+    }
+  }
+
+  .flexRowContent--credits{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    gap: 32px;
+
+    padding: 16px 0 8px 0;
+    height: auto;
+
+    .stretchChildrenWidth{
+      width: max-content !important;
+      padding: 0;
+    }
+
+    .flexRowContent--container-develop{
+      .flexRowContent--content-vtex-develop{
+        align-items: center;
+
+        .stretchChildrenWidth{
+          padding: 0;
+        }
+      }
+
+      .flexRowContent--content-m3-develop{
+        align-items: center;
+
+        .stretchChildrenWidth{
+          padding: 0;
+        }
+      }
+    }
+  }
+
+}
+
+

styles/sass/pages/footer/vtex.menu.scss

@@ -0,0 +1,96 @@
+.menuContainer{
+  gap: 8px !important;
+}
+
+.menuContainer--menu-2-site-m3, .menuContainer--menu-seja-franqueado{
+  :global(.vtex-menu-2-x-styledLinkContainer){
+    padding: 0;
+    :global(.vtex-menu-2-x-styledLinkContent){
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 30px;
+      color: rgba(255, 255, 255, 0.45);
+      text-transform: none;
+      letter-spacing: 0;
+    }
+  }
+}
+
+.menuContainer--menu-seja-franqueado{
+  :global(.vtex-menu-2-x-styledLinkContainer){
+    padding: 0;
+
+    :global(.vtex-menu-2-x-styledLinkContent){
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 164px;
+      height: 42px;
+
+      border: 1px solid #FFFFFF;
+
+      color: #FFFFFF;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 30px;
+    }
+
+  }
+}
+
+.menuContainer--menu-1-footer-mobile{
+  gap: 18px !important;
+  .styledLinkContainer{
+    padding: 0;
+  }
+
+  .styledLinkContent--site-m3-academy, .styledLinkContent--a-m3-academy{
+    border-bottom: 1px solid #FFFFFF;
+  }
+
+  .styledLink{
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 38px;
+    color: #FFFFFF;
+    text-transform: none;
+    letter-spacing: 0;
+
+    .accordionIcon{
+      font-size: 0;
+      border: 0 !important;
+
+      &::after{
+        content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowTopFooterChallegeVtexT4.svg");
+        border: 0 !important;
+      }
+    }
+  }
+
+  .submenuAccordion{
+    padding-top: 8px;
+  }
+}
+
+@media screen and (max-width: 1026px){
+  .menuContainer--menu-seja-franqueado{
+    padding: 0 16px;
+
+    align-items: center;
+
+    .menuItem{
+      width: 100%;
+    }
+
+      :global(.vtex-menu-2-x-styledLinkContainer){
+
+        :global(.vtex-menu-2-x-styledLinkContent){
+          width: 100%;
+        }
+
+      }
+  }
+}
+
+

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

@@ -0,0 +1,68 @@
+.paragraph--title-site-m3-academy,
+.paragraph--cnpj-m3,
+.paragraph--title-a-m3-academy,
+.paragraph--title-responsabilidade-social,
+.paragraph--title-seja-um-franqueado,
+.paragraph--title-nos-siga,
+.paragraph--title-payments{
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 38px;
+  color: #FFFFFF;
+
+  margin: 0;
+}
+
+.paragraph--cnpj-m3, .paragraph--title-responsabilidade-social{
+  text-decoration: underline;
+}
+
+.paragraph--title-payments{
+  font-size: 18px;
+  line-height: 38px;
+}
+
+.container--footer-copyright{
+  background-color: #000000;
+  color: rgba(255, 255, 255, 0.45);
+
+  .paragraph--footer{
+    margin: 0;
+
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  .paragraph--footer-copyright{
+    margin: 0;
+
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .container--footer-copyright{
+    justify-content: flex-start;
+
+    .paragraph--footer-copyright{
+      text-align: left;
+    }
+  }
+}
+
+@media screen and (max-width: 1026px) {
+  .container--title-nos-siga, .container--title-payments {
+    justify-content: center;
+  }
+
+  .paragraph--title-payments{
+    font-size: 14px;
+    line-height: 38px;
+  }
+
+  .paragraph--footer-copyright{
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,7 @@
+.flexRowContent--newsletter-footer{
+
+  .newsletter{
+    height: 175px;
+    background-color: #000000;
+  }
+}

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

@@ -0,0 +1,11 @@
+.socialNetworksContainer{
+  .socialNetworkLink{
+    .socialNetworkImage--facebook{
+      display: none;
+    }
+  }
+}
+
+.footerLayout{
+  background-color: #000000;
+}

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

@@ -0,0 +1,46 @@
+.flexRowContent--main-header{
+  padding: 24.5px 40px !important;
+  justify-content: space-between;
+
+  .flexCol--logo-desktop-m3academy{
+    width: 44.8717%;
+
+    :global(.vtex-store-components-3-x-logoContainer){
+      max-width: 100%;
+      max-height: 100%;
+      min-width: auto;
+      padding: 0;
+    }
+  }
+}
+
+.flexRowContent--main-header-mobile{
+justify-content: space-between;
+align-items: center;
+}
+
+.flexRowContent--mobile-header-col{
+  padding: 32px 40px;
+
+  flex-direction: column;
+  row-gap: 8px;
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+
+  :global(.vtex-store-components-3-x-searchBarContainer){
+    max-width: 100%;
+  }
+}
+
+.flexRowContent--login-and-cart-container{
+  display: flex;
+  gap: 40px;
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRowContent--main-header{
+    padding: 24.5px 360px !important;
+  }
+}

styles/sass/pages/header/vtex.login.scss

@@ -0,0 +1,28 @@
+.container{
+  height: min-content;
+  align-self: flex-end;
+  padding: 3px 0px;
+
+  :global(.vtex-button){
+    border: 0;
+
+    &:hover{
+      background: transparent;
+    }
+
+    :global(.vtex-button__label){
+      padding: 0 !important;
+      padding-left: 4px !important;
+
+      .label{
+        font-size: 0;
+        padding: 0;
+        display: block;
+
+        &::after{
+          content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
+        }
+      }
+    }
+  }
+}

styles/sass/pages/header/vtex.menu.scss

@@ -0,0 +1,17 @@
+:global(.vtex-menu-2-x-styledLink){
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: -0.1em;
+  text-transform: uppercase;
+
+  color: #929292;
+}
+
+:global(.vtex-menu-2-x-styledLinkContainer){
+  margin: 0;
+}
+
+:global(.vtex-menu-2-x-menuContainer){
+  gap: 15px;
+}

styles/sass/pages/header/vtex.minicart.scss

@@ -0,0 +1,29 @@
+.minicartContainer{
+  align-self: flex-end;
+  padding: 3px 0;
+  .openIconContainer{
+    padding: 0;
+
+    :global(.vtex-minicart-2-x-cartIcon){
+      display: none;
+    }
+
+    .minicartIconContainer{
+      &::after{
+        content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
+      }
+    }
+
+    :global(.vtex-button){
+      border: 0;
+
+      &:hover{
+        background: transparent;
+      }
+
+      :global(.vtex-button__label){
+        padding: 0 !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+.container--text-top-menu-descont{
+  justify-content: center;
+  background-color: #000000;
+}
+
+.paragraph--text-top-menu-descont{
+  display: flex;
+  margin: 0;
+  padding: 10px 0;
+
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+
+
+  color: #FFFFFF;
+
+  &::after{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
+    margin-left: 54px;
+    height: 14px;
+  }
+
+  &::before{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
+    margin-right: 54px;
+    height: 14px;
+  }
+}

styles/sass/pages/header/vtex.sticky-layout.scss

@@ -0,0 +1,9 @@
+.wrapper--sticky-header {
+  background-color: #ffffff !important;
+}
+
+.wrapper--stuck{
+  .container{
+    position: relative !important;
+  }
+}

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

@@ -0,0 +1,46 @@
+.searchBarContainer{
+  padding: 0;
+  align-self: center;
+
+  :global(.vtex-input-prefix__group){
+    display: flex;
+    flex-direction: row-reverse;
+
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid #AEAEAE;
+
+    height: auto;
+
+    :global(.vtex-styleguide-9-x-input){
+
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 16px;
+      color: #AEAEAE;
+      border: 0;
+      padding: 0;
+
+      background: transparent;
+
+      padding-bottom: 8px;
+    }
+
+    :global(.vtex-input__suffix){
+      padding: 0;
+      padding-bottom: 8px;
+      background: transparent;
+      :global(.vtex-store-components-3-x-searchBarIcon--search){
+
+        padding-right: 12px;
+        &::after{
+          content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
+        }
+      }
+
+      :global(.vtex-store-components-3-x-searchIcon){
+        display: none;
+      }
+    }
+  }
+}

styles/sass/pages/header/vtex.store-drawer.scss

@@ -0,0 +1,12 @@
+.openIconContainer{
+
+  padding: 0;
+
+  .menuIcon{
+    display: none;
+  }
+
+  &::after{
+    content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
+  }
+}

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.breadcrumb.scss

@@ -0,0 +1,49 @@
+:global(.vtex-breadcrumb-1-x-container){
+  padding: 0 40px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.homeIcon, .caretIcon{
+  display: none;
+}
+
+.termArrow, .arrow{
+
+  &::before{
+    content: ">";
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+    padding: 0 6px;
+  }
+}
+
+.arrow{
+  padding: 0;
+}
+
+.link, .term{
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+
+  padding: 0;
+}
+
+.homeLink {
+  &::after{
+    content: "Home ";
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  :global(.vtex-breadcrumb-1-x-container){
+    padding: 0 360px;
+  }
+}

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

@@ -0,0 +1,265 @@
+.flexRow--container-product-main{
+  padding: 0 40px;
+  .flexRowContent--container-product-main {
+    display: grid;
+    grid-template-columns: 48.824% 1fr;
+    grid-column-gap: 32px;
+
+    padding: 16px 0;
+    .stretchChildrenWidth{
+        padding-right: 0;
+    }
+   }
+}
+
+.flexRow--container-product-availability{
+  padding: 0 40px;
+  .flexRowContent--container-product-availability{
+    display: grid;
+    grid-template-columns: 48.824% 1fr;
+    grid-column-gap: 32px;
+
+    padding-bottom: 16px;
+    .stretchChildrenWidth{
+        padding-right: 0;
+    }
+
+    .flexRowContent--message-availability{
+      :global(.vtex-store-components-3-x-subscriberContainer){
+        :global(.vtex-store-components-3-x-title){
+          font-size: 0;
+          &::after{
+            content: "Produto indisponível";
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 19px;
+            color: #868686;
+          }
+        }
+
+        :global(.vtex-store-components-3-x-subscribeLabel){
+          font-size: 0;
+          &::after{
+            content: "Deseja saber quando estiver disponível?";
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: #868686;
+          }
+        }
+
+        :global(.vtex-store-components-3-x-form){
+          margin-bottom: 16px;
+          :global(.vtex-store-components-3-x-content){
+            display: grid;
+            grid-template-areas: "name email"
+                                 "button button";
+            grid-template-columns: 1fr 1fr;
+            column-gap: 8px;
+            row-gap: 15px;
+            max-width: 100%;
+
+            :global(.vtex-store-components-3-x-inputName){
+              grid-area: name;
+              margin: 0;
+              margin-right: 8px;
+
+              :global(.vtex-styleguide-9-x-input){
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 16px;
+                color: #989898;
+              }
+            }
+
+            :global(.vtex-store-components-3-x-inputEmail){
+              grid-area: email;
+              margin: 0;
+
+              :global(.vtex-styleguide-9-x-input){
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 16px;
+                color: #989898;
+              }
+            }
+
+            :global(.vtex-store-components-3-x-submit){
+              grid-area: button;
+              margin: 0;
+              :global(.vtex-button){
+                width: 100%;
+                border: 0;
+                background-color: #000000;
+                color: #ffffff;
+                border-radius: 0;
+                min-height: auto;
+                vertical-align: auto;
+
+                :global(.vtex-button__label){
+                  font-size: 0;
+                  padding: 12px 0 !important;
+                  &::after{
+                    content: "avise-me";
+                    font-weight: 600;
+                    font-size: 18px;
+                    line-height: 25px;
+                    text-transform: uppercase;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.swiper-wrapper{
+  .swiper-slide-active{
+    width: 100%;
+  }
+
+  .swiper-slide{
+    width: 100%;
+  }
+}
+
+.flexRowContent{
+  margin: 0;
+}
+
+.flexRowContent--container-quantity-and-buy-button{
+  display: grid;
+  grid-template-columns: 128px 1fr;
+  gap: 10px;
+  margin-bottom: 16px;
+
+  :global(.vtex-button){
+    background-color: #000000;
+    border: 0;
+    border-radius: 0;
+
+    :global(.vtex-button__label){
+      padding: 12px 0 !important;
+    }
+  }
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+}
+
+.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+  width: 100%;
+}
+
+.flexRowContent--container-related-products-pdp{
+  flex-direction: column;
+  padding: 0 61px;
+
+  .stretchChildrenWidth{
+    width: 100% !important;
+  }
+}
+
+.flexRow--message-availability{
+  width: 60.0903%;
+}
+
+.flexRow--container-description-section-product-pdp{
+  padding: 0 32px;
+  .flexRowContent--container-description-section-product-pdp{
+    display: grid;
+    gap: 32px;
+    grid-template-columns: 1fr 1fr;
+
+    .stretchChildrenWidth{
+      width: 100% !important;
+    }
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .flexRow--container-product-main{
+    padding: 0 360px;
+
+    .flexRowContent--container-product-main {
+      grid-template-columns: 49.1305% 1fr;
+    }
+  }
+
+  .flexRow--container-product-availability{
+    padding: 0 360px;
+
+    .flexRowContent--container-product-availability{
+      grid-template-columns: 49.1305% 1fr;
+    }
+  }
+
+  .flexRowContent--container-related-products-pdp{
+    padding: 0 381px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRow--container-product-main{
+    .flexRowContent--container-product-main {
+      display: flex;
+      flex-direction: column;
+      padding-top: 16px;
+      padding-bottom: 0;
+     }
+  }
+
+  .flexRowContent--container-related-products-pdp{
+    padding: 0 53px;
+  }
+
+  .flexRow--container-description-section-product-pdp{
+    padding: 0;
+    .flexRowContent--container-description-section-product-pdp{
+      display: flex;
+      flex-direction: column;
+      margin-left: 0;
+      gap: 16px;
+      padding: 0;
+
+      border-bottom: 1px solid #BFBFBF;
+    }
+  }
+
+  .flexRow--container-product-availability{
+    .flexRowContent--container-product-availability{
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .flexRow--message-availability{
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .flexRowContent--container-quantity-and-buy-button{
+    display: flex;
+    flex-direction: column;
+
+    :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+      justify-content: flex-start;
+    }
+
+    :global(.vtex-button){
+      :global(.vtex-button__label){
+        display: inline-block;
+        width: 56.7567%;
+      }
+    }
+  }
+
+  .flexRowContent--container-related-products-pdp{
+    padding: 0 48px;
+  }
+}

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

@@ -0,0 +1,3 @@
+.productHighlightWrapper--collection{
+  display: none;
+}

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

@@ -0,0 +1,25 @@
+.product-identifier--productReference{
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+  margin-top: 8px;
+
+ .product-identifier__label, .product-identifier__separator{
+  display: none;
+ }
+
+ .product-identifier__value{
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
+ }
+}
+
+@media screen and (max-width: 1024px) {
+  .product-identifier--productReference{
+    justify-content: flex-start;
+    margin-bottom: 24px;
+  }
+}

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

@@ -0,0 +1,29 @@
+.currencyContainer{
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.installments--m3-custom-installments{
+  .installments-discount--m3-custom-installments{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+
+  .currencyContainer--m3-custom-installments{
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+}

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

@@ -0,0 +1,40 @@
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer{
+  height: 49px;
+  margin: 0;
+
+  :global(.vtex-numeric-stepper__input), :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: 0;
+  }
+
+  :global(.vtex-numeric-stepper-container){
+    height: 49px;
+    border: 1px solid #CCCCCC;
+  }
+
+  :global(.vtex-numeric-stepper__input){
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+
+  :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #000000;
+  }
+}
+
+@media screen and (max-width: 768px) {
+    .quantitySelectorContainer{
+      width: 128px !important;
+    }
+}

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

@@ -0,0 +1,127 @@
+.containerNormal--container-product-summary-related-products-pdp{
+  max-width: 100% !important;
+
+  .element--container-product-summary-related-products-pdp{
+    padding: 0;
+
+    .imageStackContainer{
+      display: flex;
+
+      .imageNormal{
+        max-height: 100% !important;
+      }
+    }
+
+    .nameContainer{
+      padding: 16px 0 8px 0;
+
+      .productBrand{
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #000000;
+      }
+    }
+
+    .priceContainer{
+      padding: 0;
+
+      .listPriceLabel{
+        display: none;
+      }
+
+      .listPriceContainer{
+        padding: 0;
+      }
+
+      .listPrice{
+        &::before{
+          content: "de ";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          text-align: center;
+          text-decoration-line: line-through;
+          color: #BABABA;
+        }
+
+        &::after{
+          content: " por";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          text-align: center;
+          text-decoration-line: line-through;
+          color: #BABABA;
+        }
+
+        .currencyContainer{
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          text-align: center;
+          text-decoration-line: line-through;
+          color: #BABABA;
+        }
+      }
+
+      .sellingPriceContainer{
+        padding: 0;
+        margin-top: 8px;
+        .sellingPriceLabel{
+          display: none;
+        }
+
+        .currencyContainer{
+          font-weight: 700;
+          font-size: 24px;
+          line-height: 33px;
+          color: #000000;
+        }
+      }
+
+      .installmentContainer{
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .containerNormal--container-product-summary-related-products-pdp{
+    .element--container-product-summary-related-products-pdp{
+      .nameContainer{
+        .productBrand{
+          font-size: 14px;
+          line-height: 19px;
+        }
+      }
+
+      .priceContainer{
+        .listPrice{
+          &::before{
+            font-size: 12px;
+            line-height: 16px;
+          }
+
+          &::after{
+            font-size: 12px;
+            line-height: 16px;
+          }
+
+          .currencyContainer{
+            font-size: 12px;
+            line-height: 16px;
+          }
+        }
+
+        .sellingPriceContainer{
+          .currencyContainer{
+            font-size: 18px;
+            line-height: 25px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+.container--title-related-products{
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 32px;
+
+  .heading--title-related-products{
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    color: #575757;
+
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .container--title-related-products{
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container--title-related-products{
+    .heading--title-related-products{
+      font-size: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+.sliderLayoutContainer--container-slider-related-products-pdp {
+  margin-bottom: 113px;
+  .sliderTrack--container-slider-related-products-pdp{
+    gap: 16px;
+  }
+
+  .sliderLeftArrow--container-slider-related-products-pdp{
+    left: -36px;
+
+    .caretIcon--container-slider-related-products-pdp{
+      display: none;
+    }
+
+    &::after{
+      content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftjosecarloslins.svg");
+    }
+  }
+  .sliderRightArrow--container-slider-related-products-pdp{
+    right: -30px;
+
+    .caretIcon--container-slider-related-products-pdp{
+      display: none;
+    }
+
+    &::after{
+      content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightjosecarloslins.svg");
+    }
+  }
+
+  .paginationDotsContainer--container-slider-related-products-pdp{
+    bottom: -42px;
+    display: flex;
+    align-items: center;
+
+    .paginationDot--container-slider-related-products-pdp{
+      background-color: #000000;
+    }
+
+    .paginationDot--container-slider-related-products-pdp--isActive{
+      width: 17px !important;
+      height: 17px !important;
+      background-color: #FFFFFF;
+
+      border: 0.5px solid #000000;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp {
+    .sliderLeftArrow--container-slider-related-products-pdp{
+      left: -23px;
+    }
+
+    .sliderRightArrow--container-slider-related-products-pdp{
+      right: -22px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sliderLayoutContainer--container-slider-related-products-pdp {
+    .sliderLeftArrow--container-slider-related-products-pdp{
+      left: -21px;
+    }
+
+    .sliderRightArrow--container-slider-related-products-pdp{
+      right: -20px;
+    }
+  }
+}
+

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

@@ -0,0 +1,3 @@
+.stackItem--quickview{
+  display: none;
+}

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

@@ -1,3 +1,457 @@
 .newsletter{
     background: red;
 }
+
+.productImage{
+  .productImageTag--main{
+    object-fit: fill !important;
+    max-height: max-content !important;
+  }
+}
+
+.carouselGaleryCursor{
+  cursor: auto;
+
+ .productImagesGallerySwiperContainer--product-images-pdp{
+  cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
+ }
+}
+
+.carouselGaleryThumbs{
+  margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp{
+  margin-right: 16px;
+  margin-bottom: 0;
+  width: 90px !important;
+  &:last-child{
+    margin-right: 0;
+  }
+}
+
+.container{
+    margin: 0;
+    padding: 0;
+    max-width: none;
+}
+
+.skuSelectorNameContainer{
+  margin: 0;
+}
+
+.productNameContainer{
+  text-align: right;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+
+.skuSelectorContainer{
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 16px;
+
+  .skuSelectorSubcontainer--cor{
+    margin: 0;
+
+    .skuSelectorOptionsList{
+      margin: 0;
+    }
+
+    .skuSelectorName {
+      font-size: 0;
+      &::after{
+        content: "Outras cores";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  .skuSelectorSubcontainer--tamanho{
+    margin-bottom: 10px;
+    .skuSelectorName {
+      font-size: 0;
+      &::after{
+        content: "Outros tamanhos:";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+
+  .skuSelectorSelectorImageValue{
+    display: none;
+  }
+
+  .skuSelectorOptionsList{
+    display: flex;
+    gap: 16px;
+    margin: 0;
+    margin-bottom: 2px;
+
+    .skuSelectorItem{
+      margin: 0;
+      width: 40px;
+      height: 40px;
+
+      .frameAround{
+        border-color: #000000;
+        border-radius: 50%;
+        border-width: 2px;
+        z-index: 5;
+
+        bottom: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .skuSelectorInternalBox{
+        border: 1px solid #989898;
+        border-radius: 50%;
+
+        .valueWrapper{
+          padding: 0;
+          color: rgba(185, 185, 185, 0.6);
+        }
+      }
+
+    }
+
+    .skuSelectorItemImage{
+      width: 48px;
+      height: 48px;
+
+      .diagonalCross{
+        background: #D5D5D5;
+        top: 48%;
+        left: 1%;
+        width: 46px;
+        height: 1px;
+        transform: rotate(-45deg);
+      }
+    }
+
+    .skuSelectorItem--selected{
+      .skuSelectorInternalBox{
+        .valueWrapper{
+          color: #000000;
+        }
+    }
+  }
+}
+
+.diagonalCross{
+  background: #D5D5D5;
+  top: 46%;
+  left: 1%;
+  width: 38px;
+  height: 1px;
+  transform: rotate(-45deg);
+}
+}
+
+.buyButtonText{
+  font-size: 0;
+  &::after{
+    content: "ADICIONAR À SACOLA";
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+
+.shippingContainer{
+  width: 409px;
+  position: relative;
+  display: grid;
+  grid-template-areas: "label button notCep";
+  grid-template-columns: 56.4792% max-content 1fr;
+  margin-bottom: 16px;
+
+  :global(.vtex-input__label){
+    font-size: 0;
+    &::after{
+      content: "CALCULAR FRETE:";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
+  }
+
+  :global(.vtex-address-form__postalCode){
+    padding: 0;
+    :global(.vtex-input){
+      grid-area: label;
+
+      :global(.vtex-input-prefix__group){
+        :global(.vtex-address-form-4-x-input){
+          padding: 0 16px;
+
+            &::placeholder{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 16px;
+              color: #AFAFAF;
+            }
+        }
+        :global(.vtex-input__suffix){
+          display: none;
+        }
+      }
+    }
+
+    :global(.vtex-address-form__postalCode-forgottenURL){
+      grid-area: notCep;
+      position: absolute;
+      right: 0;
+      top: 43px;
+      padding: 0;
+
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+
+      :last-child{
+        color: #000000;
+        text-decoration-line: underline;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+      }
+
+      :global(.vtex__icon-external-link){
+        display: none;
+      }
+    }
+
+    :global(.vtex-input-prefix__group){
+      height: 49px;
+      border-radius: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  :global(.vtex-button){
+    grid-area: button;
+    width: max-content;
+    height: max-content;
+    background-color: #000000;
+    margin-top: 27px;
+    margin-left: -3px;
+    border-radius: 0;
+    border: 0;
+    padding: 0;
+
+    :global(.vtex-button__label){
+      font-size: 0;
+      width: 49px;
+      height: 49px;
+      padding: 0;
+      &::after{
+        content: "OK";
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+
+.shippingTable {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: max-content;
+  padding-bottom: 1px;
+
+  .shippingTableHead {
+    display: table-caption;
+    text-align: left;
+
+    .shippingTableRow{
+      display: grid;
+      grid-template-areas: "entrega frete prazo";
+      grid-template-columns: 1fr 1fr 1fr;
+      .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice{
+        font-weight: 400;
+        font-size: 14px;
+        color: #202020;
+        text-transform: uppercase;
+
+        padding: 0;
+        padding-bottom: 15px;
+      }
+
+      .shippingTableHeadDeliveryName{
+        grid-area: entrega;
+      }
+
+      .shippingTableHeadDeliveryEstimate{
+        grid-area: prazo;
+      }
+
+      .shippingTableHeadDeliveryPrice{
+        grid-area: frete;
+        font-size: 0;
+        &::after{
+          content: "FRETE";
+          font-weight: 400;
+          font-size: 14px;
+          color: #202020;
+          text-transform: uppercase;
+        }
+      }
+    }
+
+
+  }
+
+  .shippingTableBody{
+    display: table-cell;
+
+    .shippingTableRow{
+      display: grid;
+      grid-template-areas: "entrega frete prazo";
+      grid-template-columns: 1fr 1fr 1fr;
+
+      .shippingTableCell{
+        padding: 0;
+        padding-bottom: 15px;
+
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+      }
+
+      .shippingTableRadioBtn{
+        display: none;
+      }
+
+      .shippingTableCellDeliveryEstimate{
+        grid-area: prazo;
+      }
+    }
+  }
+}
+
+.productDescriptionContainer--container-description-pdp{
+  .productDescriptionTitle--container-description-pdp{
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+
+    height: 40px;
+    margin-bottom: 8px;
+  }
+}
+
+.productDescriptionText--container-description-pdp{
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #929292;
+
+}
+
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer--container-description-pdp{
+    .productDescriptionTitle--container-description-pdp{
+      font-size: 32px;
+      line-height: 32px;
+    }
+  }
+
+  .productDescriptionText--container-description-pdp{
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .productNameContainer{
+    margin-top: 32px;
+    text-align: left;
+  }
+
+  .productDescriptionContainer--container-description-pdp{
+    .productDescriptionTitle--container-description-pdp{
+      font-size: 20px;
+      line-height: 32px;
+    }
+  }
+
+  .productDescriptionText--container-description-pdp{
+    font-size: 14px;
+    line-height: 19px;
+    margin-bottom: 16px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .shippingContainer{
+    width: 100%;
+    grid-template-areas: "label button"
+                          "notCep notCep";
+    grid-template-columns: 1fr 46px;
+    padding-bottom: 23px;
+    margin-bottom: 16px;
+
+    :global(.vtex-address-form__postalCode){
+      padding: 0;
+      :global(.vtex-input){
+        grid-area: label;
+
+        :global(.vtex-input-prefix__group){
+          :global(.vtex-address-form-4-x-input){
+            padding: 0 16px;
+            &::placeholder{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 16px;
+              color: #AFAFAF;
+            }
+          }
+          :global(.vtex-input__suffix){
+            display: none;
+          }
+        }
+      }
+
+      :global(.vtex-address-form__postalCode-forgottenURL){
+        top: 0;
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .carouselGaleryThumbs--product-images-pdp{
+    display: block !important;
+  }
+}
+
+@media screen and (max-width: 416px) {
+  .shippingTable {
+    width: 100%;
+    .shippingTableBody{
+      .shippingTableRow{
+        align-items: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+.container--description-pdp-tab-layout{
+  padding: 0 40px;
+}
+
+.listContainer--container-list-tab-layout-pdp{
+  display: flex;
+  list-style: none;
+  padding: 0 64px;
+  justify-content: space-between;
+
+  border-bottom: 1px solid #B9B9B9;
+
+  margin-bottom: 32px;
+
+  .listItem{
+    width: 114px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+
+    padding: 0;
+    margin: 0;
+
+    :global(.vtex-button){
+      border: 0;
+      width: max-content;
+      min-height: auto;
+      background: transparent;
+
+      :global(.vtex-button__label){
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        color: #BFBFBF;
+        text-transform: capitalize;
+
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .listItemActive{
+    border-bottom: 2px solid #000000;
+
+    :global(.vtex-button){
+      :global(.vtex-button__label){
+        color: #000000;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .container--description-pdp-tab-layout{
+    padding: 0 360px;
+  }
+
+  .listContainer--container-list-tab-layout-pdp{
+    .listItem{
+      width: 142px;
+
+      :global(.vtex-button){
+        :global(.vtex-button__label){
+          font-size: 24px;
+          line-height: 38px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .listContainer--container-list-tab-layout-pdp{
+    flex-direction: column;
+    padding: 0;
+    margin-bottom: 16px;
+
+    border-top: 1px solid #B9B9B9;
+
+    .listItem{
+      display: flex;
+      width: 100%;
+      margin-bottom: 16px;
+      justify-content: flex-start;
+
+      :global(.vtex-button){
+        display: flex;
+        width: 100%;
+      }
+
+      &:first-child{
+        margin-top: 16px;
+      }
+    }
+
+    .listItemActive{
+      border: 0;
+    }
+  }
+}