Corrigindo scroll na prateleira de produtos abaixo de 992px

dev/controles-vtex/fullTextSearchBox.html

@@ -24,7 +24,22 @@
 		<option value="64">Bota Fora Dondocas</option>
 	</select>
 	<input type="hidden" id="ftIdxa28507c5599f4430a7cabd23249f99c3" value="" />
-	<input id="ftBoxa28507c5599f4430a7cabd23249f99c3" class="fulltext-search-box ui-autocomplete-input" type="text" size="20"
+	<input
-	 accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="Digite aqui" />
+		id="ftBoxa28507c5599f4430a7cabd23249f99c3"
-	<input id="ftBtna28507c5599f4430a7cabd23249f99c3" type="button" value="Buscar" class="btn-buscar" />
+		class="fulltext-search-box ui-autocomplete-input"
+		type="text"
+		size="20"
+		accesskey="b"
+		autocomplete="off"
+		role="textbox"
+		aria-autocomplete="list"
+		aria-haspopup="true"
+		value="OLÁ, O QUE DESEJA ENCONTRAR?"
+	/>
+	<input
+		id="ftBtna28507c5599f4430a7cabd23249f99c3"
+		type="button"
+		value="Buscar"
+		class="btn-buscar"
+	/>
 </fieldset>

meta/loja.js

@@ -6,11 +6,5 @@ const menuElements = require("./pages/elementos-menu");
 
 module.exports = {
 	accountName: "agenciamagma",
-	pages: [
+	pages: [{ data: home, template: "bernardo-home.html" }],
-		{ data: home, template: "template-home.html" },
-		{ data: category, template: "template-categoria.html" },
-		{ data: product, template: "template-produto.html" },
-		{ data: institucional, template: "template-institucional.html" },
-		{ data: menuElements, template: "template-elementos-menu.html" },
-	],
 };

meta/pages/home.js

@@ -1,31 +1,20 @@
 module.exports = {
 	contentPlaceHolders: [
 		{
-			// Registra  o contentPlaceholder
+			id: "banners-principais-desktop",
-			id: "htmlSeo",
-			objects: [
-				//  Registra os objetos vtex
-				{
-					type: "html",
-					name: "Html SEO",
-					contents: [],
-				},
-			],
-		},
-		{
-			id: "slide-principal",
 			objects: [
+				// cada objeto dento do array será um banner
 				{
 					type: "banner",
-					name: "banner principal",
+					name: "Banner Principal Desktop 01",
 					contents: [
 						{
-							name: "banner principal content",
+							name: "Banner Principal Desktop 01",
 							active: true,
 							type: "image",
-							file: "slide-principal.png",
+							file: "banner-principal.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
 							//   "category": "*",
 							//   "brand": "*"
 							//   "period": ""
@@ -34,48 +23,125 @@ module.exports = {
 				},
 				{
 					type: "banner",
-					name: "banner principal-2",
+					name: "Banner Principal Desktop 02",
 					contents: [
 						{
-							name: "banner principal content",
+							name: "Banner Principal Desktop 02",
 							active: true,
 							type: "image",
 							file: "slide-principal.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Desktop 03",
+					contents: [
+						{
+							name: "Banner Principal Desktop 03",
+							active: true,
+							type: "image",
+							file: "banner-principal.png",
+							width: 1440,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Desktop 04",
+					contents: [
+						{
+							name: "Banner Principal Desktop 04",
+							active: true,
+							type: "image",
+							file: "slide-principal.png",
+							width: 1440,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},
 			],
 		},
 		{
-			id: "slide-principal-mobile",
+			id: "banners-principais-mobile",
 			objects: [
 				{
 					type: "banner",
-					name: "banner principal mobile",
+					name: "Banner Principal Mobile 01",
 					contents: [
 						{
-							name: "banner principal mobile content",
+							name: "Banner Principal Mobile 01",
 							active: true,
 							type: "image",
-							file: "slide-principal-mobile.png",
+							file: "banner-principal-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},
 				{
 					type: "banner",
-					name: "banner principal mobile 2",
+					name: "Banner Principal Mobile 02",
 					contents: [
 						{
-							name: "banner principal mobile 2 content",
+							name: "Banner Principal Mobile 02",
 							active: true,
 							type: "image",
 							file: "slide-principal-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Mobile 03",
+					contents: [
+						{
+							name: "Banner Principal Mobile 03",
+							active: true,
+							type: "image",
+							file: "banner-principal-mobile.png",
+							width: 375,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Mobile 04",
+					contents: [
+						{
+							name: "Banner Principal Mobile 04",
+							active: true,
+							type: "image",
+							file: "slide-principal-mobile.png",
+							width: 375,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},
@@ -198,5 +264,20 @@ module.exports = {
 				},
 			],
 		},
+		{
+			id: "prateleira-01",
+			objects: [
+				{
+					type: "Produtos Relacionados",
+					name: "CONFIRA NOSSAS NOVIDADES", //titulo do "carousel"/prateleira
+					properties: {
+						layout: "bernardo-prateleira-padrao", // mesmo nome do arquivo em template-prateleira
+						type: "QuemViuViuTambem",
+						"number-of-columns": 12,
+						"number-of-items": 12,
+					},
+				},
+			],
+		},
 	],
 };

package.json

@@ -1,7 +1,7 @@
 {
 	"author": "Agência M3",
 	"name": "tema-template",
-	"shopName": "template",
+	"shopName": "bernardo",
 	"description": "Tema Vtex para loja Vtex",
 	"version": "1.0.0",
 	"main": "index.js",
@@ -12,8 +12,7 @@
 		"dev": "cross-env NODE_ENV=development gulp watch",
 		"dev:fast": "cross-env NODE_ENV=devfast gulp watch",
 		"prod": "cross-env NODE_ENV=production gulp build",
-		"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\"",
+		"format": "prettier --write \"src/arquivos/**/*.{js,jsx,scss}\""
-		"preinstall": "npx npm-force-resolutions"
 	},
 	"license": "ISC",
 	"devDependencies": {

src/arquivos/js/app/app.js

@@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao";
 import MenuContents from "./partials/MenuContents";
 import Login from "./partials/Login";
 import Prateleira from "./components/Prateleira/Prateleira";
+import Shelf from "./partials/Shelf";
 
 import PrateleiraService from "./components/Prateleira/PrateleiraService";
 
@@ -38,6 +39,7 @@ const app = new Container({
 		ScrollToTop,
 		AutoComplete,
 		Prateleira,
+		Shelf,
 	],
 	services: [PrateleiraService],
 	pages: [
@@ -64,10 +66,10 @@ const app = new Container({
 	],
 });
 
-app.bind(Minicart.name, ".carrinho .mini-cart");
+app.bind(Minicart.name, ".minicart__drawer");
 app.bind(Newsletter.name, {
-	elemento: ".news-form",
+	elemento: ".footer-newsletter__form",
-	textButtom: "Cadastre-se",
+	textButtom: "CADASTRE-SE",
 });
 
 export default app;

src/arquivos/js/app/components/FixedHeader.js

@@ -1,45 +1,28 @@
-import { isSmallerThen768 } from "Helpers/MediasMatch";
+import { isSmallerThen991 } from "Helpers/MediasMatch";
 
 export default class FixedHeader {
 	constructor() {
-		if (!isSmallerThen768) {
+		if (!isSmallerThen991) {
-			this.fixedHeader();
+			this.selectors();
+			this.events();
 		}
 	}
 
-	fixedHeader() {
+	selectors() {
-		var lastScroll = 0;
+		this.pageHeader = $(".page-header");
-		var timer, scrollTop, headerHeight;
-		var element = $("header.header");
-
-		$(document).scroll(function (e) {
-			headerHeight = element.height();
-			scrollTop = $(document).scrollTop();
-
-			if (scrollTop > 1) {
-				$("body").css("padding-top", headerHeight);
-				element.addClass("fixed");
-
-				if (timer) {
-					window.clearTimeout(timer);
 	}
 
-				timer = window.setTimeout(function () {
+	events() {
-					if (
+		$(document).scroll(this.fixHeader.bind(this));
-						scrollTop > lastScroll &&
+	}
-						scrollTop > element.height() + 20
+
-					) {
+	fixHeader() {
-						element.addClass("fixed-hide");
+		const topScrool = $(document).scrollTop();
+
+		if (topScrool > 200) {
+			this.pageHeader.addClass("isFixed");
 		} else {
-						element.removeClass("fixed-hide");
+			this.pageHeader.removeClass("isFixed");
 		}
-
-					lastScroll = $(document).scrollTop();
-				}, 50);
-			} else {
-				element.removeClass("fixed");
-				$("body").css("padding-top", 0);
-			}
-		});
 	}
 }

src/arquivos/js/app/components/Minicart.js

@@ -6,7 +6,7 @@ export default class Minicart {
 		const structure = `
 			<div class="mini-cart-container">
 				<div class="mini-cart-header">
-					<i class="sprite sprite-cadeado"></i>
+					<i class="sprite sprite-lock-cart-icon"></i>
 					<span>
 						COMPRA 100% SEGURA
 					</span>
@@ -20,12 +20,10 @@ export default class Minicart {
 				</div>
 				<div class="mini-cart-footer">
 					<div class="totals-container">
-						<div class="qtd-items">
-							Total de <span class="value">0</span> itens
-						</div>
 						<div class="total">
-							Subtotal: <strong>R$<span class="value">00,00</span></strong>
+							<div> Total:</div> <strong>R$<span class="value">00,00</span></strong>
 						</div>
+
 					</div>
 					<button class="continue-buying" aria-label="Continuar comprando">
 						Continuar comprando
@@ -290,8 +288,6 @@ export default class Minicart {
 		}
 
 		this.createMiniCartStructure(element);
-		this.configureEvents(
+		this.configureEvents(".minicart__button");
-			"header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart"
-		);
 	}
 }

src/arquivos/js/app/components/Prateleira/Prateleira.js

@@ -96,8 +96,8 @@ export default class Prateleira {
 	//ex atualziar
 	atualizar() {
 		this.flagDeDesconto();
-		this.precoParcelado();
+		// this.precoParcelado();
-		this.precoBoleto();
+		// this.precoBoleto();
 	}
 
 	criarHtmlPrecoBoleto(valor) {
@@ -123,7 +123,7 @@ export default class Prateleira {
 	createFlagDesconto($elemento, percentualDeDesconto) {
 		var $flag = $("<p />")
 			.addClass("flag produto-off")
-			.text(percentualDeDesconto + "%");
+			.text(percentualDeDesconto + "%OFF");
 		$elemento.find(".flags-product .DiscountHightLight").append($flag);
 	}
 

src/arquivos/js/app/pages/Home.js

@@ -1,38 +1,17 @@
-import {
+import slickConfig from "Config/slick";
-	bannerHome,
-	barraDeVantagens,
-	naveguePorCategorias,
-} from "App/functions/slide";
-
-import InstagramGallery from "../components/InstagramGallery";
-
 export default class Home {
 	constructor() {
-		bannerHome(".main-gallery");
+		this.selectors();
-		barraDeVantagens(".tipbar ul");
+		this.createSliders();
-		naveguePorCategorias(".categorias-home .categorias");
-
-		new InstagramGallery({
-			gallery: ".instagramGallery__photos",
-			account: "agenciam3",
-			limit: 6,
-		});
 	}
 
-	naveguePorCategorias() {
+	selectors() {
-		// preencher titulos
+		this.desktopMainBaners = $(".main-banners__desktop");
-		var $container = $(".home-categories .categorias");
+		this.mobileMainBaners = $(".main-banners__mobile");
-		$container.find(".box-banner").each(function (i, el) {
+	}
-			const $banner = $(el);
-			let name;
 
-			name = $banner.find("img").prop("alt");
+	createSliders() {
-			let $titulo = $("<span />", {
+		this.desktopMainBaners.slick(slickConfig.home.desktopMainBanners);
-				text: name,
+		this.mobileMainBaners.slick(slickConfig.home.mobileMainBanners);
-				class: "nome-categoria",
-			});
-			$banner.find("img").after($titulo);
-		});
-		slide.naveguePorCategorias($container);
 	}
 }

src/arquivos/js/app/partials/Menu.js

@@ -1,38 +1,49 @@
+import { isSmallerThen991 } from "Helpers/MediasMatch";
 export default class Menu {
 	constructor() {
-		this.toggleMenuMobile();
+		this.selectors();
-		this.toggleSubCategories();
+		this.events();
 	}
 
-	toggleMenuMobile() {
+	selectors() {
-		$("#open-menu-button, .show-menu .option").on("click", function () {
+		this.openMenuButton = $(".menu__button");
-			$(".menu-principal").addClass("mobile-open");
+		this.mainMenu = $(".main-menu");
-			$("header.header").addClass("menu-mobile-open");
+		this.closeMenuButton = $(".menu-header__close-button");
-		});
+		this.departmentsLink = $(".main-menu__department__link");
-
+		this.returnSubmenu = $(".submenu__return-button");
-		$("#close-menu-button").on("click", function () {
-			$(".menu-principal").removeClass("mobile-open");
-			$("header.header").removeClass("menu-mobile-open");
-		});
 	}
 
-	toggleSubCategories() {
+	events() {
-		$(".m3-dropdown > button").on("click", function (event) {
+		this.openMenuButton.click(this.openMenu.bind(this));
+		this.closeMenuButton.click(this.closeMenu.bind(this));
+		this.returnSubmenu.click(this.closeSubmenu);
+
+		if (isSmallerThen991) {
+			this.departmentsLink.click(this.openSubmenu);
+		}
+	}
+
+	openMenu() {
+		this.mainMenu.addClass("isOpen");
+	}
+
+	closeMenu() {
+		this.mainMenu.removeClass("isOpen");
+	}
+
+	openSubmenu(event) {
 		event.preventDefault();
+		const link = $(event.target);
 
-			if ($(this).parent().hasClass("sub-menu-open")) {
+		link.parents(".main-menu__department")
-				$(this).parent().removeClass("sub-menu-open");
+			.find(".submenu")
-			} else {
+			.addClass("isOpen"); // find pega os filhos
-				$(this).parent().siblings().removeClass("sub-menu-open");
+		// link.siblings(".submenu").addClass("isOpen"); //siblings pega os irmãos, geraria um erro ao clicar na seta
-				$(this).parent().addClass("sub-menu-open");
 	}
 
-			$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
+	closeSubmenu(events) {
-		});
+		const button = $(events.target);
 
-		$(".m3-dropdown .btn-voltar").on("click", function () {
+		button.parents(".submenu").removeClass("isOpen"); //parents pega os pais do elemento
-			$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
-			$(this).parents("ul.itens").removeClass("has-sub-menu-open");
-		});
 	}
 }

src/arquivos/js/app/partials/Shelf.js

@@ -0,0 +1,16 @@
+import slickConfig from "Config/slick";
+
+export default class Shelf {
+	constructor() {
+		this.selectors();
+		this.createSlider();
+	}
+
+	selectors() {
+		this.shelf = $(".shelf ul");
+	}
+
+	createSlider() {
+		this.shelf.slick(slickConfig.productShelf.defaultShelf);
+	}
+}

src/arquivos/js/config/slick.js

@@ -1,18 +1,18 @@
 export default {
 	home: {
-		bannerDesktop: {
+		desktopMainBanners: {
 			dots: true,
-			arrows: false,
+			arrows: true,
-			pauseOnHover: false,
+			pauseOnHover: true,
 			autoplay: true,
-			autoplaySpeed: 6000,
+			autoplaySpeed: 5000,
 		},
-		bannerMobile: {
+		mobileMainBanners: {
 			dots: true,
-			arrows: false,
+			arrows: true,
 			pauseOnHover: false,
 			autoplay: true,
-			autoplaySpeed: 6000,
+			autoplaySpeed: 5000,
 		},
 	},
 	general: {
@@ -59,7 +59,7 @@ export default {
 	productShelf: {
 		defaultShelf: {
 			lazyLoad: "ondemand",
-			dots: true,
+			dots: false,
 			arrows: true,
 			infinite: true,
 			slidesToShow: 4,
@@ -69,17 +69,13 @@ export default {
 				{
 					breakpoint: 1200,
 					settings: {
-						lazyLoad: "ondemand",
 						slidesToShow: 3,
 						slidesToScroll: 3,
-						infinite: true,
 					},
 				},
 				{
 					breakpoint: 800,
 					settings: {
-						arrows: true,
-						lazyLoad: "ondemand",
 						slidesToShow: 2,
 						slidesToScroll: 2,
 					},
@@ -87,9 +83,9 @@ export default {
 				{
 					breakpoint: 576,
 					settings: {
-						arrows: false,
+						arrows: true,
-						slidesToShow: 2,
+						slidesToShow: 1,
-						slidesToScroll: 2,
+						slidesToScroll: 1,
 					},
 				},
 			],

src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -14,8 +14,8 @@
 	}
 
 	.cart-items thead tr {
-		border-bottom: 1px solid $color-gray6;
+		border-bottom: 1px solid #e5e5e5;
-		color: $color-black2;
+		color: #142032;
 		font-size: 11px;
 
 		th {
@@ -53,7 +53,7 @@
 			}
 
 			&.product-name {
-				color: $color-black2;
+				color: #142032;
 				font-size: 12px;
 
 				@media (max-width: 490px) {
@@ -96,7 +96,7 @@
 				}
 
 				.icon-question-sign {
-					color: $color-black2;
+					color: #142032;
 				}
 			}
 
@@ -108,7 +108,7 @@
 
 				input {
 					&[id^="item-quantity"] {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						box-shadow: none;
 						border-radius: 0;
 						color: #000;
@@ -127,7 +127,7 @@
 				}
 
 				.item-quantity-change {
-					background-color: $color-pink;
+					background-color: #f71963;
 					display: inline-block;
 					padding: 16px;
 					position: relative;
@@ -147,7 +147,7 @@
 					i {
 						&::before,
 						&::after {
-							border-top: 1px solid $color-white;
+							border-top: 1px solid $white;
 							content: "";
 							left: 12px;
 							position: absolute;
@@ -177,33 +177,33 @@
 
 	#shipping-preview-container {
 		.srp-main-title {
-			color: $color-black2;
+			color: #142032;
 			font-size: 24px;
 			font-weight: 700;
 		}
 
 		.srp-description {
-			color: $color-black2;
+			color: #142032;
 			font-size: 13px;
 		}
 
 		#shipping-calculate-link,
 		#cart-shipping-calculate {
-			background-color: $color-gray;
+			background-color: hsla(0, 0%, 90%, 1);
 			border-radius: 0;
 			border: none;
-			color: $color-black2;
+			color: #142032;
 			font-size: 14px;
 			outline: none;
 			padding: 8px 10px;
 			transition: all 0.15s ease-in-out;
 
 			&:hover {
-				background-color: lighten($color-gray, 5);
+				background-color: lighten(hsla(0, 0%, 90%, 1), 5);
 			}
 
 			&:active {
-				background-color: darken($color-gray, 5);
+				background-color: darken(hsla(0, 0%, 90%, 1), 5);
 			}
 		}
 
@@ -212,7 +212,7 @@
 		}
 
 		.ship-postalCode a {
-			color: $color-pink;
+			color: #f71963;
 		}
 	}
 
@@ -234,8 +234,8 @@
 			}
 
 			> div {
-				background-color: $color-white2;
+				background-color: #f5f5f5;
-				color: $color-black2;
+				color: #142032;
 				display: block !important;
 				padding: 24px 15%;
 
@@ -252,7 +252,7 @@
 				text-align: left;
 
 				label {
-					color: $color-gray5;
+					color: #6d6e70;
 					font-size: 12px;
 				}
 			}
@@ -271,7 +271,7 @@
 
 			#cart-coupon-add {
 				background-image: none;
-				background-color: $color-black2;
+				background-color: #142032;
 				border-radius: 0;
 				border: none;
 				font-size: 0;
@@ -281,11 +281,11 @@
 				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: lighten($color-black2, 5);
+					background-color: lighten(#142032, 5);
 				}
 
 				&:active {
-					background-color: darken($color-black2, 5);
+					background-color: darken(#142032, 5);
 				}
 
 				&::before {
@@ -299,7 +299,7 @@
 	}
 
 	.accordion-group {
-		border: 1px solid $color-white2;
+		border: 1px solid #f5f5f5;
 		border-radius: 0;
 		color: #000;
 
@@ -312,7 +312,7 @@
 		}
 
 		tfoot {
-			background-color: $color-white2;
+			background-color: #f5f5f5;
 
 			.info {
 				text-transform: uppercase;
@@ -359,7 +359,7 @@
 
 		#cart-choose-more-products {
 			bottom: -26px;
-			color: $color-black4;
+			color: #151728;
 			font-size: 12px;
 			left: 0;
 			position: absolute;
@@ -368,7 +368,7 @@
 		}
 
 		#cart-to-orderform {
-			background-color: $color-green;
+			background-color: #2fab61;
 			font-size: 14px;
 			font-weight: 700;
 			margin-top: 0;

src/arquivos/sass/checkout/_checkout-email.scss

@@ -1,6 +1,6 @@
 .container-order-form {
 	#orderform-to-cart {
-		color: $color-pink;
+		color: #f71963;
 		text-decoration: underline;
 	}
 
@@ -10,7 +10,7 @@
 		}
 
 		#btn-client-pre-email {
-			background-color: $color-pink;
+			background-color: #f71963;
 			background-image: none;
 			border: none;
 			border-radius: 0;
@@ -24,11 +24,11 @@
 			top: 0;
 
 			&:hover {
-				background-color: lighten($color-pink, 5);
+				background-color: lighten(#f71963, 5);
 			}
 
 			&:active {
-				background-color: darken($color-pink, 5);
+				background-color: darken(#f71963, 5);
 			}
 		}
 	}

src/arquivos/sass/checkout/_checkout-pagamento.scss

@@ -17,7 +17,7 @@
 
 	.accordion-group {
 		.accordion-toggle .link-box-edit {
-			color: $color-pink;
+			color: #f71963;
 		}
 
 		.text input,
@@ -55,15 +55,15 @@
 		}
 
 		.vtex-omnishipping-1-x-summaryChange {
-			border-color: $color-pink;
+			border-color: #f71963;
-			color: $color-pink;
+			color: #f71963;
 		}
 	}
 
 	.accordion-group button.submit,
 	.payment-confirmation-wrap button.submit {
 		background-image: none;
-		background-color: $color-green;
+		background-color: #2fab61;
 		border: none;
 		border-radius: 0;
 		font-size: 14px;
@@ -73,17 +73,17 @@
 		transition: all 0.15s ease-in-out;
 
 		&:hover {
-			background-color: lighten($color-green, 5);
+			background-color: lighten(#2fab61, 5);
 		}
 
 		&:active {
-			background-color: darken($color-green, 5);
+			background-color: darken(#2fab61, 5);
 		}
 	}
 
 	.cart-fixed {
 		#orderform-minicart-to-cart {
-			color: $color-black4;
+			color: #151728;
 			display: block;
 			font-size: 12px;
 			text-decoration: underline;
@@ -95,7 +95,7 @@
 			}
 
 			tfoot td {
-				color: $color-black3;
+				color: #19273d;
 				text-transform: uppercase;
 			}
 		}

src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -2,7 +2,7 @@
 	text-align: center;
 
 	.empty-cart-title {
-		color: $color-black2;
+		color: #142032;
 		font-size: 24px;
 		line-height: 29px;
 	}
@@ -14,7 +14,7 @@
 	}
 
 	#cart-choose-products {
-		background-color: $color-black2;
+		background-color: #142032;
 		border-radius: 0;
 		border: none;
 		background-image: none;
@@ -26,11 +26,11 @@
 		transition: all 0.15s ease-in-out;
 
 		&:hover {
-			background-color: lighten($color-black2, 5);
+			background-color: lighten(#142032, 5);
 		}
 
 		&:active {
-			background-color: darken($color-black2, 5);
+			background-color: darken(#142032, 5);
 		}
 
 		&::before {

src/arquivos/sass/components/_instagram-gallery.scss

@@ -60,7 +60,7 @@
 
 		a {
 			display: block;
-			color: $color-pink;
+			color: #f71963;
 			font-size: 16px;
 			font-weight: bold;
 

src/arquivos/sass/components/_mini-cart.scss

@@ -1,10 +1,57 @@
-.mini-cart {
+.minicart{
+	position: relative;
+
+	&__button{
+		position: relative;
+		background: transparent;
+		margin: 0;
+		padding: 0;
+		outline: 0;
+		border: 0;
+		cursor: pointer;
+
+		.portal-totalizers-ref{
+			.title,
+			.amount-products,
+			.amount-items strong,
+			.amount-kits,
+			.total-cart {
+				display: none;
+			}
+		}
+
+		.cart-info {
+			margin: 0;
+		}
+
+		.amount-items-em {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			position: absolute;
+			top: 4px;
+			right: -4px;
+			height: 15px;
+			width: 15px;
+			border-radius: 50%;
+			font-style: normal;
+			font-weight: bold;
+			line-height: 11px;
+			font-size: 9px;
+			color: $white;
+			background: $blue;
+
+		}
+	}
+
+	&__drawer {
 		height: 475px;
 		max-height: 200px;
 		opacity: 0;
 		position: absolute;
 		right: 0px;
-	top: 50px;
+		top: 80px;
 		transition: all 0.3s ease-in-out;
 		visibility: hidden;
 		width: 375px;
@@ -17,6 +64,7 @@
 			position: fixed;
 			top: 0;
 		}
+	}
 }
 
 .show-mini-cart {
@@ -26,7 +74,7 @@
 }
 
 .mini-cart-container {
-	background-color: $color-white;
+	background-color: $white;
 	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
 	display: flex;
 	flex-direction: column;
@@ -51,14 +99,26 @@
 	}
 
 	.mini-cart-header {
-		border-bottom: 1px solid $color-gray;
+		// border-bottom: 1px solid hsla(0, 0%, 90%, 1);
-		color: $color-black2;
+		color: $gray-300;
+		line-height: 15px;
+		font-weight: 400;
 		font-size: 12px;
-		letter-spacing: 0.5px;
 		padding: 20px 15px 16px;
 		position: relative;
 		text-align: left;
 		text-transform: uppercase;
+		display: flex;
+		align-items: center;
+
+		&::after {
+			content: "";
+			width: 1px;
+			height: 38px;
+			position: absolute;
+			right: 72px;
+			background: $gray-100;
+		}
 
 		span {
 			margin-left: 4px;
@@ -75,7 +135,7 @@
 
 			&::before,
 			&::after {
-				background-color: lighten($color-black2, 10);
+				background-color: lighten(#142032, 10);
 				content: "";
 				height: 2px;
 				left: 0.5px;
@@ -97,7 +157,7 @@
 			&:active {
 				&:before,
 				&:after {
-					background-color: $color-black2;
+					background-color: #142032;
 				}
 			}
 		}
@@ -120,17 +180,17 @@
 		}
 
 		&::-webkit-scrollbar-track {
-			background-color: $color-gray;
+			background-color: hsla(0, 0%, 90%, 1);
 			border-radius: 15px;
 		}
 
 		&::-webkit-scrollbar-thumb {
-			background-color: $color-gray3;
+			background-color: hsl(0, 0%, 77%);
 			border-radius: 15px;
 		}
 
 		&::-webkit-scrollbar-thumb:hover {
-			background-color: darken($color-gray3, 10);
+			background-color: darken(hsl(0, 0%, 77%), 10);
 		}
 	}
 
@@ -154,8 +214,8 @@
 			left: 0;
 			right: 0;
 			font-size: 0;
-			border: 5px solid $color-white;
+			border: 5px solid $white;
-			border-top-color: $color-pink;
+			border-top-color: #f71963;
 			border-radius: 50%;
 			width: 30px;
 			height: 30px;
@@ -172,7 +232,7 @@
 
 		li {
 			align-items: flex-start;
-			border-bottom: 1px solid $color-gray;
+			border-bottom: 1px solid hsla(0, 0%, 90%, 1);
 			display: flex;
 			justify-content: space-between;
 			padding: 12px 0;
@@ -204,6 +264,8 @@
 			max-width: 85px;
 			width: 100%;
 
+			border: 1px solid $gray-100;
+
 			a {
 				display: block;
 			}
@@ -215,7 +277,7 @@
 		}
 
 		.product-info {
-			color: $color-black2;
+			color: #142032;
 			font-size: 12px;
 			font-weight: 500;
 			padding-left: 8px;
@@ -223,15 +285,18 @@
 			width: 100%;
 
 			.name {
-				font-size: 14px;
+				font-weight: 500;
-				line-height: 17px;
+				font-size: 10px;
+				line-height: 12px;
+				color: $black;
 			}
 
 			.product-price {
-				color: $color-black;
+				color: $black;
-				font-size: 18px;
+				font-weight: 900;
-				font-weight: 700;
+				font-size: 13px;
-				margin-bottom: 8px;
+				line-height: 16px;
+				margin-bottom: 16px;
 			}
 
 			.value,
@@ -250,8 +315,8 @@
 			}
 
 			button {
-				background-color: $color-pink;
+				background-color: $black;
-				color: $color-white;
+				color: $white;
 				font-weight: 500;
 				font-size: 16px;
 				line-height: 0;
@@ -261,16 +326,16 @@
 				padding: 0;
 
 				&:hover {
-					background-color: lighten($color-pink, 5);
+					background-color: lighten($black, 5);
 				}
 
 				&:active {
-					background-color: darken($color-pink, 10);
+					background-color: darken($black, 10);
 				}
 			}
 
 			.value {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
 				box-shadow: none;
 				font-size: 14px;
 				margin: 0 -3px;
@@ -302,17 +367,17 @@
 
 				&:hover,
 				&:active {
-					border-color: darken($color-black2, 15);
+					border-color: darken($gray-400, 15);
 
 					&:after,
 					&:before {
-						border-color: darken($color-black2, 15);
+						border-color: darken($gray-400, 15);
 					}
 				}
 
 				&:after,
 				&:before {
-					border-bottom: 1.25px solid $color-black2;
+					border-bottom: 1.25px solid $gray-400;
 					content: "";
 					width: 16px;
 					position: absolute;
@@ -337,21 +402,24 @@
 
 		.totals-container {
 			display: none;
-			background-color: $color-white;
+			background-color: transparent;
-			border-top: 1px solid $color-gray;
+			color: $black;
-			margin: 0 16px;
+			padding: 16px 48px;
-			padding: 16px 0;
+
 		}
 
 		.total {
-			color: $color-gray2;
+			display: flex;
-			font-size: 12px;
+			align-items: center;
-			line-height: 15px;
+			justify-content: space-between;
-			letter-spacing: 3px;
+			width: 100%;
+			font-weight: 900;
+			font-size: 13px;
+			line-height: 16px;
 			text-transform: uppercase;
 
 			strong {
-				color: $color-black2;
+				color: #142032;
 				display: inline-block;
 				font-weight: 700;
 				letter-spacing: 0;
@@ -363,9 +431,10 @@
 			background-color: transparent;
 			border: none;
 			cursor: pointer;
-			color: $color-gray5;
+			color: $gray-300;
 			display: block;
-			font-size: 14px;
+			line-height: 12px;
+			font-size: 10px;
 			padding: 17px 15px;
 			position: relative;
 			transition: all 0.15s ease-in-out;
@@ -375,29 +444,36 @@
 
 			&:hover,
 			&:active {
-				color: darken($color-gray5, 15);
+				color: darken($gray-300, 15);
 			}
 		}
 
 		.finish-order {
-			background-color: $color-green;
+			background-color: $black;
-			color: $color-white;
+			color: $white;
 			display: block;
-			font-weight: 700;
+			font-weight: 900;
-			font-size: 14px;
+			line-height: 15px;
-			padding: 15px;
+			font-size: 12px;
+			padding: 18px;
 			text-align: center;
 			transition: all 0.15s linear;
 			text-transform: uppercase;
 			width: 100%;
 
 			&:hover {
-				background-color: lighten($color-green, 2.5);
+				background-color: lighten($black, 2.5);
 			}
 
 			&:active {
-				background-color: darken($color-green, 10);
+				background-color: darken($black, 10);
 			}
 		}
 	}
+
+	&.have-item {
+		.totals-container {
+			display: block;
+		}
+	}
 }

src/arquivos/sass/components/_newsletter.scss

@@ -1,196 +1,123 @@
-/***************************************************************/
+.footer-newsletter {
-/**-- Newslettter --------------------------********************/
+	padding: 24px 15px;
-/*-------------------------------------------------------------*/
+	background: linear-gradient(180deg, $blue 0%, $blue-100 100%);
 
-.captacao-emails-newsletter {
+	&__wrapper {
-	background-color: $color-pink;
+		@include mq(md, min) {
-	background-image: url("/arquivos/template-background-newsletter.png");
+			max-width: 698px;
-	margin-top: 104px;
+			margin: 0 auto;
-	padding: 12px 15px 24px;
+		}
-
-	@include mq(md, max) {
-		background-image: url("/arquivos/template-mobile-background-newsletter.png");
-		background-size: cover;
-		padding: 52px 15px 42px;
 	}
 
-	.row {
+	&__title {
+		font-size: 14px;
+		line-height: 17px;
+		color: $white;
+		margin: 0 0 10px;
+
+		@include mq(lg, max) {
+			margin-bottom: 8px;
+			max-width: 224px;
+		}
+	}
+
+	.m3-custom-newsletter-form {
+		display: flex;
+		position: relative;
+
+		@include mq(lg, max) {
+			flex-direction: column;
+		}
+
+		@include mq(lg, min) {
 			align-items: center;
 		}
-
-	> .row > div {
-		max-width: 960px;
-		margin: auto;
-		padding: 0 3.5%;
 	}
 
-	h3 {
+	fieldset {
-		color: $color-white;
+		margin: 0;
-		font-size: 18px;
+		flex: 1;
-		font-weight: normal;
+		padding: 0;
-		line-height: 26px;
-		margin: 0 0 8px;
 
-		@include mq(md, max) {
+		@include mq(lg, min) {
-			margin-bottom: 24px;
+			margin-right: 16px;
 		}
 
-		span {
+		@include mq(lg, max) {
-			display: block;
+			margin-bottom: 8px;
-			font-size: 26px;
-		}
-	}
 
-	p {
+			&:last-of-type {
-		font-size: 15px;
 				margin: 0;
 			}
-}
+		}
 
-.m3-custom-newsletter-form {
+		&:last-of-type {
-	position: relative;
+			margin-right: 0;
+		}
+
+		&.m3-cn-button-ok-container {
+
+			@include mq(lg, min) {
+				max-width: 126px;
+			}
+		}
 
 		label {
 			display: none;
 		}
 
-	fieldset {
-		display: inline-block;
-		padding: 0;
-		margin-right: 16px;
-		max-width: 270px;
-		width: 36%;
-
-		@include mq(md, max) {
-			margin-bottom: 8px;
-			max-width: 100%;
-			width: 100%;
-		}
-
-		&.m3-cn-button-ok-container {
-			max-width: 126px;
-			margin: 0;
-			width: 100%;
-
-			@include mq(md, max) {
-				max-width: 100%;
-			}
-		}
-	}
-
 		input {
-		border: none;
-		font-size: 14px;
-		outline: none;
-		padding: 9px 16px;
 			width: 100%;
-
+			height: 41px;
-		@include mq(md, max) {
+			padding: 0 16px;
-			font-size: 24px;
+			background: $white;
-			padding: 18.5px 24px;
+			border: 0;
-		}
+			outline: 0;
+			font-size: 10px;
+			line-height: 12px;
 
 			&::placeholder {
-			color: $color-black2;
+				text-transform: uppercase;
+				color: $gray-400;
 			}
 
-		&#m3-cn-button-ok {
+			&.m3-cn-button-ok {
-			background-color: $color-black2;
+				background: $black;
-			color: $color-white;
+				color: $white;
+				font-weight: 900;
 				cursor: pointer;
-			font-weight: 700;
-			font-size: 14px;
-			text-transform: lowercase;
-			transition: all 0.15s linear;
 
-			@include mq(md, max) {
+				@include mq(lg, max) {
-				font-size: 24px;
+					&:active {
-				margin-top: 8px;
+						background: lighten($black, 10);
+					}
 				}
 
-			&:hover {
+				@include mq(lg, min) {
-				background-color: lighten($color-black2, 5);
+					&:hover{
+					background: lighten($black, 10);
 					}
 
 					&:active {
-				background-color: darken($color-black2, 5);
+						background: $black;
+					}
+
+				}
 			}
 		}
 	}
 
 	.m3-cn-msg {
+		position: absolute;
+		top: calc( 100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+		width: max-content;
+		line-height: 1;
 		font-weight: 700;
-		text-align: center;
 
 		.m3-cn-error {
-			background-color: $color-white;
+			color: $red-300;
-			border-radius: 2px;
-			bottom: -28px;
-			color: $color-pink3;
-			display: table;
-			left: 40%;
-			margin: auto;
-			padding: 3px 6px;
-			position: absolute;
-			right: 0;
-		}
-
-		.m3-cn-success {
-			color: $color-white;
-			display: inline-block;
-			font-size: 16px;
-			margin-right: 20px;
-			text-transform: lowercase;
-		}
-
-		.btn-voltar {
-			background-color: $color-white;
-			border-radius: 2px;
-			color: $color-pink;
-			display: inline-block;
-			font-size: 14px;
-			line-height: 1;
-			padding: 4px 8px;
-			text-transform: lowercase;
 		}
 	}
 }
-
-/* pop-up-newsletter */
-
-.pop-up-newsletter {
-	display: none;
-	position: fixed;
-	z-index: 10;
-	width: 100%;
-	top: 20%;
-
-	.newsletter {
-		text-align: center;
-		background-color: #fff;
-		padding: 20px;
-		display: table;
-		margin: 0 auto;
-		position: relative;
-
-		.close-popup {
-			font-size: 35px;
-			color: #000;
-			padding: 5px;
-			cursor: pointer;
-			position: absolute;
-			top: 0;
-			right: 0;
-			line-height: 0.5;
-		}
-
-		input {
-			border-bottom: solid 1px #333;
-		}
-	}
-
-	.m3-custom-newsletter-form .btn-voltar {
-		color: #333;
-		border-color: #333;
-	}
-}

src/arquivos/sass/main.scss

@@ -5,6 +5,21 @@
 
 @import "./utils/all";
 
+@import "./partials/slider";
+@import "./partials/menu";
+@import "./partials/header";
+@import "./partials/search";
+@import "./partials/barraDeVantagens";
+@import "./partials/footer";
+@import "./partials/breadcrumb";
+@import "./partials/prateleira";
+@import "./partials/ajustes";
+@import "./partials/flags";
+
+@import "./components/mini-cart";
+@import "./components/newsletter";
+@import "./components/instagram-gallery";
+
 @import "./pages/home";
 @import "./pages/categoria";
 @import "./pages/produto";
@@ -12,15 +27,3 @@
 @import "./pages/erro";
 @import "./pages/login";
 
-@import "./components/mini-cart";
-@import "./components/newsletter";
-@import "./components/instagram-gallery";
-
-@import "./partials/header";
-@import "./partials/menu";
-@import "./partials/barraDeVantagens";
-@import "./partials/footer";
-@import "./partials/breadcrumb";
-@import "./partials/prateleira";
-@import "./partials/ajustes";
-@import "./partials/flags";

src/arquivos/sass/pages/_categoria.scss

@@ -3,7 +3,7 @@
 /*-------------------------------------------------------------*/
 
 .categoria {
-	color: $color-black2;
+	color: #142032;
 
 	.bread-crumb {
 		margin-bottom: 54px;
@@ -15,7 +15,7 @@
 
 	.filtros-categoria {
 		@include mq(md, max) {
-			background-color: $color-white;
+			background-color: $white;
 			bottom: 0;
 			left: 0;
 			margin-left: -100%;
@@ -38,7 +38,7 @@
 		}
 
 		.topo-filtros {
-			border-bottom: 1px solid $color-gray;
+			border-bottom: 1px solid hsla(0, 0%, 90%, 1);
 
 			@include mq(md, max) {
 				display: flex;
@@ -72,7 +72,7 @@
 				}
 
 				&::before {
-					border-left: 1px solid $color-gray4;
+					border-left: 1px solid #eee;
 					content: "";
 					display: block;
 					height: 36px;
@@ -88,7 +88,7 @@
 
 					&::before,
 					&::after {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						content: "";
 						display: block;
 						left: 0;
@@ -109,7 +109,7 @@
 		}
 
 		a {
-			color: $color-black2;
+			color: #142032;
 		}
 
 		.navigation-tabs {
@@ -151,11 +151,11 @@
 
 				label {
 					a {
-						color: $color-black4;
+						color: #151728;
 						transition: ease-in 0.22s all;
 
 						&:hover {
-							text-shadow: 0px 0px 0.55px $color-black4;
+							text-shadow: 0px 0px 0.55px #151728;
 						}
 					}
 				}
@@ -169,22 +169,22 @@
 					}
 
 					&::-webkit-scrollbar-track {
-						background-color: $color-gray;
+						background-color: hsla(0, 0%, 90%, 1);
 						border-radius: 15px;
 					}
 
 					&::-webkit-scrollbar-thumb {
-						background-color: $color-gray3;
+						background-color: hsl(0, 0%, 77%);
 						border-radius: 15px;
 					}
 
 					&::-webkit-scrollbar-thumb:hover {
-						background-color: darken($color-gray3, 10);
+						background-color: darken(hsl(0, 0%, 77%), 10);
 					}
 				}
 
 				label {
-					color: $color-black2;
+					color: #142032;
 					cursor: pointer;
 					display: block;
 					font-size: 14px;
@@ -208,10 +208,10 @@
 					}
 
 					& ~ .sr_box {
-						border: 1px solid $color-black2;
+						border: 1px solid #142032;
 						border-radius: 50%;
 						content: " ";
-						color: $color-gray3;
+						color: hsl(0, 0%, 77%);
 						display: inline-block;
 						font-size: 13px;
 						font-weight: bold;
@@ -247,13 +247,13 @@
 
 					&:hover ~ .sr_box {
 						&::before {
-							background-color: lighten($color-pink, 15);
+							background-color: lighten(#f71963, 15);
 						}
 					}
 
 					&:checked ~ .sr_box {
 						&::before {
-							background-color: $color-pink;
+							background-color: #f71963;
 						}
 					}
 				}
@@ -272,7 +272,7 @@
 		}
 
 		.aply-filter-btn {
-			background-color: $color-gray4;
+			background-color: #eee;
 			border: none;
 			bottom: 0;
 			font-size: 14px;
@@ -289,7 +289,7 @@
 			}
 
 			&:active {
-				background-color: darken($color-gray4, 5);
+				background-color: darken(#eee, 5);
 			}
 		}
 	}
@@ -334,7 +334,7 @@
 		.opcoes-resultado {
 			@include mq(md, max) {
 				align-items: center;
-				border: 1px solid $color-gray;
+				border: 1px solid hsla(0, 0%, 90%, 1);
 				display: flex;
 				justify-content: left;
 			}
@@ -343,8 +343,8 @@
 		#open-filter-button {
 			background-color: transparent;
 			border: none;
-			border-right: 1px solid $color-gray;
+			border-right: 1px solid hsla(0, 0%, 90%, 1);
-			color: $color-black;
+			color: #000;
 			cursor: pointer;
 			display: none;
 			font-size: 16px;
@@ -407,7 +407,7 @@
 			select {
 				background-color: transparent;
 				cursor: pointer;
-				color: $color-gray2;
+				color:  hsla(220, 1%, 43%, 1);
 				font-size: 14px;
 				margin-left: 8px;
 				outline: none;
@@ -442,10 +442,10 @@
 	}
 
 	.clear-filter-btn {
-		background-color: $color-black2;
+		background-color: #142032;
 		border: none;
 		border-radius: 5px;
-		color: $color-white;
+		color: $white;
 		cursor: pointer;
 		font-size: 12px;
 		font-weight: 700;
@@ -458,11 +458,11 @@
 		width: 100%;
 
 		&:hover {
-			background-color: lighten($color-black, 2.5);
+			background-color: lighten(#000, 2.5);
 		}
 
 		&:active {
-			background-color: darken($color-black, 2.5);
+			background-color: darken(#000, 2.5);
 		}
 	}
 
@@ -538,8 +538,8 @@
 
 				&.current {
 					a {
-						background-color: $color-black;
+						background-color: #000;
-						color: $color-white;
+						color: $white;
 						pointer-events: none;
 					}
 				}
@@ -552,7 +552,7 @@
 						font-size: 0;
 						text-indent: -99999px;
 						overflow: hidden;
-						color: $color-gray2;
+						color:  hsla(220, 1%, 43%, 1);
 
 						&:before {
 							@include pseudo(block, relative, "\00BB");
@@ -562,7 +562,7 @@
 						}
 					}
 					&.desativo a {
-						color: $color-gray3;
+						color: hsl(0, 0%, 77%);
 						pointer-events: none;
 						width: 0;
 						opacity: 0;
@@ -580,20 +580,20 @@
 				}
 			}
 			a {
-				background-color: $color-white;
+				background-color: $white;
-				color: $color-black;
+				color: #000;
 				padding: 4px 12px;
 				text-decoration: none;
 				display: block;
-				border: 1px solid $color-gray6;
+				border: 1px solid #e5e5e5;
 
 				@include mq(md, min) {
 					&:hover {
-						background-color: $color-gray6;
+						background-color: #e5e5e5;
-						color: darken($color-black, 15);
+						color: darken(#000, 15);
 
 						&:active {
-							color: darken($color-black, 10);
+							color: darken(#000, 10);
 						}
 					}
 				}
@@ -613,9 +613,9 @@
 		text-align: center;
 
 		button {
-			background-color: $color-black2;
+			background-color: #142032;
 			border: none;
-			color: $color-white;
+			color: $white;
 			cursor: pointer;
 			font-size: 16px;
 			font-weight: 700;
@@ -628,11 +628,11 @@
 			width: 100%;
 
 			&:hover {
-				background-color: lighten($color-black, 2.5);
+				background-color: lighten(#000, 2.5);
 			}
 
 			&:active {
-				background-color: darken($color-black, 2.5);
+				background-color: darken(#000, 2.5);
 			}
 		}
 	}

src/arquivos/sass/pages/_erro.scss

@@ -1,5 +1,5 @@
 .pagina-erro {
-	color: $color-black2;
+	color: #142032;
 	text-align: center;
 	display: block;
 	min-height: 40%;
@@ -43,7 +43,7 @@
 
 	a.voltar-para-home {
 		color: #fff;
-		background: $color-black2;
+		background: #142032;
 		display: inline-block;
 		font-size: 14px;
 		margin: 1em auto 3em;
@@ -52,11 +52,11 @@
 		transition: all 0.15s ease-in-out;
 
 		&:hover {
-			background-color: lighten($color-black2, 5);
+			background-color: lighten(#142032, 5);
 		}
 
 		&:active {
-			background-color: darken($color-black2, 5);
+			background-color: darken(#142032, 5);
 		}
 	}
 }

src/arquivos/sass/pages/_home.scss

@@ -1,178 +1,128 @@
-/***************************************************************/
-/**-- Home ---------------------------------********************/
-/*-------------------------------------------------------------*/
-
 .home {
-	.main-gallery {
+	.main-banners {
-		> div {
+		margin-bottom: 38px;
-			&:not(.slick-initialized) {
-				.box-banner {
-					&:not(:first-child) {
-						display: none;
-					}
-				}
-			}
-
-			&.desktop {
-				@include mq(md, max) {
-					display: none;
-				}
-			}
-
-			&.mobile {
-				@include mq(md, min) {
-					display: none;
-				}
-			}
-		}
 
 		img {
 			width: 100%;
 		}
 
-		.slick-next,
+		&__desktop {
-		.slick-prev {
+			@include mq(md, max) {
+				display: none;
+			}
+		}
+
+		&__mobile {
+			@include mq(md, min) {
+				display: none;
+			}
+		}
+
+		.slick-arrow {
+
 			@extend .sprite;
-			background-color: transparent;
+
-			border: none;
+			@include mq(md, max) {
-			cursor: pointer;
+				transform: translatey(-50%) scale(0.7);
-			font-size: 0;
+			}
-			outline: none;
+		}
-			padding: 0;
+
-			position: absolute;
+		.slick-prev {
-			top: 40%;
+			left: 24px;
-			transform: scale(0.7);
+
-			z-index: 1;
+			@extend .sprite-arrow-white-prev-icon;
+
+			@include mq(md, max) {
+				left: 16px;
+				transform-origin: left;
+			}
 		}
 
 		.slick-next {
-			@extend .sprite;
+			right: 24px;
-			@extend .sprite-circled-arrow-right;
-			left: auto;
-			right: 8px;
-		}
 
-		.slick-prev {
+			@extend .sprite-arrow-white-next-icon;
-			@extend .sprite;
+
-			@extend .sprite-circled-arrow-left;
+			@include mq(md, max) {
-			right: auto;
+				right: 16px;
-			left: 8px;
+				transform-origin: right;
+			}
 		}
 
 		.slick-dots {
-			bottom: 20px;
 			position: absolute;
-			pointer-events: none;
+			left: 0;
-			text-align: center;
+			bottom: 14px;
+			z-index: map-get($z-index,  level-1);
 			width: 100%;
 
-			&,
+			@include mq(md, max) {
+				bottom: 9px;
+			}
+
 			li {
+
+				&.slick-active {
+					button {
+						width: 16px;
+						height: 16px;
+						background: transparent;
+						border: 1px solid $white;
+
+					}
+				}
+			}
+		}
+
+	}
+
+	.advantages{
+		margin-bottom: 117px;
+
+		&__list {
+			margin: 0;
+			padding: 0 15px;
+			display: flex;
 			align-items: center;
-				display: flex !important;
+			overflow: auto;
+
+			@include mq(sm, min) {
 				justify-content: center;
 			}
 
-			li {
+			&::-webkit-scrollbar {
-				display: inline-block;
-				margin: 0 4px;
-			}
-
-			button {
-				background-color: $color-black2;
-				border: none;
-				cursor: pointer;
-				height: 10px;
-				outline: none;
-				padding: 0;
-				pointer-events: all;
-				transition: all 0.15s ease-in-out;
-				width: 10px;
-			}
-
-			.slick-active {
-				button {
-					background-color: $color-pink;
-					height: 16px;
-					width: 16px;
-				}
-			}
-		}
-	}
-
-	.banner {
-		&.desktop {
-			@include mq(md, max) {
 				display: none;
 			}
 		}
 
-		&.mobile {
+		&__item {
-			@include mq(md, min) {
+			display: flex;
-				display: none;
+			align-items: center;
-			}
+			margin-right: 75px;
+
+			&:last-of-type {
+				margin-right: 0;
 			}
 
-		img {
-			width: 100%;
-		}
-	}
 
-	.mosaico-home,
-	.mosaico-home-footer {
 			@include mq(md, max) {
 				padding: 0;
 			}
 
-		@include mq_range(md, xl) {
+			i {
-			max-width: 100%;
+				margin-right: 8px;
+			}
 		}
 
-		.row {
+		&__text {
-			@include mq(md, max) {
 			margin: 0;
-			}
+			white-space: nowrap;
-		}
+			line-height: 12px;
-	}
+			font-size: 10px;
-
-	.mosaico-home {
-		> .row {
-			@include mq(md, min) {
-				margin-left: 0;
 		}
 	}
 
-		.banner {
+	.shelf {
-			padding: 0 0 40px;
+		margin-bottom: 172px;
-
-			@include mq(md, min) {
-				padding: 0 10px;
-			}
-
-			img {
-				width: 100%;
-			}
-		}
-
-		.banners-left {
-			@include mq(md, min) {
-				padding-left: 0px;
-				padding-right: 12px;
-			}
-		}
-
-		.banners-right {
-			padding: 0;
-
-			.banner {
-				padding-right: 0;
-
-				&:nth-child(2) {
-					@include mq(md, min) {
-						padding-left: 8px;
-					}
-				}
-			}
-		}
 	}
 }

src/arquivos/sass/pages/_institucional.scss

@@ -3,7 +3,7 @@
 /*-------------------------------------------------------------*/
 
 .institucional {
-	color: $color-black2;
+	color: #142032;
 
 	.breadcrumb {
 		font-size: 14px;
@@ -15,8 +15,8 @@
 			display: inline-block;
 
 			a {
-				border-right: 1px solid $color-black2;
+				border-right: 1px solid #142032;
-				color: $color-black2;
+				color: #142032;
 				margin-right: 7px;
 				padding: 0px 9px 0px 0;
 			}
@@ -48,27 +48,27 @@
 			padding: 4px 2px;
 
 			a {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
 				border-radius: 31px;
-				color: $color-pink;
+				color: #f71963;
 				display: block;
 				font-weight: 700;
 				padding: 8px 16px;
 				transition: all 0.15s ease-in-out;
 
 				&.ativo {
-					background-color: $color-black2;
+					background-color: #142032;
-					color: $color-white;
+					color: $white;
 				}
 
 				&:hover {
-					background-color: lighten($color-black2, 5);
+					background-color: lighten(#142032, 5);
-					color: $color-white;
+					color: $white;
 				}
 
 				&:active {
-					background-color: darken($color-black2, 10);
+					background-color: darken(#142032, 10);
-					color: $color-white;
+					color: $white;
 				}
 			}
 		}

src/arquivos/sass/pages/_login.scss

@@ -22,9 +22,9 @@
 
 			.btn {
 				background-image: none;
-				background-color: $color-white2;
+				background-color: #f5f5f5;
 				border-radius: 0;
-				border: 1px solid $color-gray6;
+				border: 1px solid #e5e5e5;
 				box-shadow: none;
 				font-size: 14px;
 				outline: none;
@@ -33,25 +33,25 @@
 				transition: all 0.15s ease-in-out;
 
 				&:hover {
-					background-color: lighten($color-white2, 5);
+					background-color: lighten(#f5f5f5, 5);
 				}
 
 				&:active {
-					background-color: darken($color-white2, 5);
+					background-color: darken(#f5f5f5, 5);
 				}
 
 				&.btn-success {
-					background-color: $color-pink;
+					background-color: #f71963;
 					font-size: 14px;
 					height: auto;
 					padding: 14px 24px;
 
 					&:hover {
-						background-color: lighten($color-pink, 5);
+						background-color: lighten(#f71963, 5);
 					}
 
 					&:active {
-						background-color: darken($color-pink, 5);
+						background-color: darken(#f71963, 5);
 					}
 
 					i {
@@ -72,7 +72,7 @@
 			h4 {
 				&::before {
 					content: "Entrar";
-					color: $color-black2;
+					color: #142032;
 					display: block;
 					font-size: 22px;
 					font-weight: 700;

src/arquivos/sass/pages/_produto.scss

@@ -99,7 +99,7 @@
 				&:hover,
 				&:active {
 					@include mq(md, min) {
-						border: 1px solid $color-pink;
+						border: 1px solid #f71963;
 					}
 				}
 
@@ -158,7 +158,7 @@
 			}
 
 			button {
-				background-color: $color-black2;
+				background-color: #142032;
 				border: none;
 				cursor: pointer;
 				height: 10px;
@@ -171,7 +171,7 @@
 
 			.slick-active {
 				button {
-					background-color: $color-pink;
+					background-color: #f71963;
 					height: 16px;
 					width: 16px;
 				}
@@ -196,7 +196,7 @@
 
 		.product-reference {
 			font-size: 14px;
-			color: $color-gray2;
+			color:  hsla(220, 1%, 43%, 1);
 
 			.productReference {
 				display: inline-block;
@@ -204,11 +204,11 @@
 		}
 
 		.moduloPreco {
-			color: $color-black2;
+			color: #142032;
 			margin: 30px 0;
 
 			.valor-de {
-				color: $color-gray2;
+				color:  hsla(220, 1%, 43%, 1);
 				font-size: 14px;
 				text-transform: uppercase;
 				text-decoration: line-through;
@@ -223,7 +223,7 @@
 			}
 
 			.valor-por {
-				color: $color-black2;
+				color: #142032;
 				font-size: 32px;
 				font-weight: 700;
 
@@ -233,7 +233,7 @@
 			}
 
 			.valor-dividido {
-				color: $color-gray5;
+				color: #6d6e70;
 				font-size: 14px;
 
 				.numero-de-parcelas {
@@ -262,14 +262,14 @@
 				}
 
 				&:before {
-					border-top: 1px solid $color-gray3;
+					border-top: 1px solid hsl(0, 0%, 77%);
 					margin-top: 8px;
 					padding-bottom: 10px;
 				}
 
 				&:after {
 					padding-top: 10px;
-					border-bottom: 1px solid $color-gray3;
+					border-bottom: 1px solid hsl(0, 0%, 77%);
 				}
 
 				.value {
@@ -282,8 +282,8 @@
 				}
 
 				.container-percentual {
-					border: 1px dotted $color-green;
+					border: 1px dotted #2fab61;
-					color: $color-green;
+					color: #2fab61;
 					font-size: 10px;
 					padding: 4px 9px;
 				}
@@ -291,7 +291,7 @@
 		}
 
 		.moduloAviseMe {
-			border-bottom: 1px solid $color-gray;
+			border-bottom: 1px solid hsla(0, 0%, 90%, 1);
 			padding-bottom: 15px;
 			margin: 20px 0;
 
@@ -305,7 +305,7 @@
 				}
 
 				input {
-					border: 1px solid $color-gray;
+					border: 1px solid hsla(0, 0%, 90%, 1);
 					display: inline-block;
 					margin-bottom: 10px;
 					padding: 10px;
@@ -317,9 +317,9 @@
 					}
 
 					&#enviar-avise-me {
-						background-color: $color-black3;
+						background-color: #19273d;
 						border: none;
-						color: $color-white;
+						color: $white;
 						cursor: pointer;
 						font-size: 10px;
 						font-weight: 700;
@@ -331,11 +331,11 @@
 						max-width: 200px;
 
 						&:hover {
-							background-color: $color-black;
+							background-color: #000;
 						}
 
 						&:active {
-							background-color: $color-black2;
+							background-color: #142032;
 						}
 					}
 				}
@@ -346,11 +346,11 @@
 					position: absolute;
 
 					&.msgSucesso {
-						color: $color-green;
+						color: #2fab61;
 					}
 
 					&.msgErro {
-						color: $color-pink;
+						color: #f71963;
 					}
 				}
 			}
@@ -369,7 +369,7 @@
 			}
 
 			li {
-				border: 1px solid $color-gray;
+				border: 1px solid hsla(0, 0%, 90%, 1);
 				display: inline-block;
 				max-width: 72px;
 				max-height: 96px;
@@ -382,7 +382,7 @@
 				}
 
 				&:hover {
-					border: 2px solid $color-gray3;
+					border: 2px solid hsl(0, 0%, 77%);
 				}
 
 				img {
@@ -408,7 +408,7 @@
 
 		.moduloSkus {
 			.titulo {
-				color: $color-gray5;
+				color: #6d6e70;
 				font-size: 16px;
 			}
 
@@ -450,7 +450,7 @@
 				@include mq(lg) {
 					&:hover label,
 					&:active label {
-						background-color: $color-gray3;
+						background-color: hsl(0, 0%, 77%);
 					}
 				}
 			}
@@ -460,16 +460,16 @@
 
 				&:checked + label {
 					background-color: #fff;
-					border: 1px solid $color-pink;
+					border: 1px solid #f71963;
 				}
 			}
 
 			label {
 				align-items: center;
-				background-color: $color-gray;
+				background-color: hsla(0, 0%, 90%, 1);
 				border-radius: 4px;
 				border: 1px solid transparent;
-				color: $color-black3;
+				color: #19273d;
 				cursor: pointer;
 				display: flex;
 				font-size: 14px;
@@ -499,7 +499,7 @@
 			}
 
 			.titulo {
-				color: $color-gray5;
+				color: #6d6e70;
 				display: block;
 				font-size: 16px;
 				margin-bottom: 8px;
@@ -525,8 +525,8 @@
 			}
 
 			button {
-				background-color: $color-pink;
+				background-color: #f71963;
-				color: $color-white;
+				color: $white;
 				cursor: pointer;
 				font-size: 14px;
 				line-height: 0;
@@ -537,18 +537,18 @@
 
 				@include mq(lg) {
 					&:hover {
-						background-color: $color-pink;
+						background-color: #f71963;
 					}
 				}
 
 				&:active {
-					background-color: $color-pink;
+					background-color: #f71963;
 				}
 			}
 
 			.qtd-value {
-				border: 1px solid $color-black2;
+				border: 1px solid #142032;
-				color: $color-black3;
+				color: #19273d;
 				font-size: 14px;
 				position: relative;
 				width: 34px;
@@ -574,20 +574,20 @@
 			}
 
 			&:before {
-				border-top: 1px solid $color-gray3;
+				border-top: 1px solid hsl(0, 0%, 77%);
 				margin-top: 10px;
 				padding-bottom: 6px;
 			}
 
 			&:after {
 				padding-top: 6px;
-				border-bottom: 1px solid $color-gray3;
+				border-bottom: 1px solid hsl(0, 0%, 77%);
 			}
 
 			button {
 				background-color: transparent;
 				border: none;
-				color: $color-gray2;
+				color:  hsla(220, 1%, 43%, 1);
 				cursor: pointer;
 				font-size: 12px;
 				outline: none;
@@ -607,13 +607,13 @@
 				pointer-events: none;
 
 				.btn-compra {
-					background-color: $color-gray3;
+					background-color: hsl(0, 0%, 77%);
 				}
 			}
 
 			.btn-compra {
-				background-color: $color-green;
+				background-color: #2fab61;
-				color: $color-white;
+				color: $white;
 				cursor: pointer;
 				display: block;
 				font-size: 18px;
@@ -632,25 +632,25 @@
 
 				@include mq(lg) {
 					&:hover {
-						background-color: $color-green2;
+						background-color: hsla(138, 66%, 41%, 1);
 					}
 				}
 
 				&:active {
-					background-color: $color-green3;
+					background-color: hsla(138, 50%, 41%, 1);
 				}
 			}
 
 			.erro-add-cart {
 				bottom: -55px;
-				color: $color-pink;
+				color: #f71963;
 				position: absolute;
 				font-weight: 700;
 			}
 		}
 
 		.compra-segura {
-			color: $color-black3;
+			color: #19273d;
 			font-size: 10px;
 			max-width: 270px;
 			text-align: center;
@@ -687,20 +687,20 @@
 			}
 
 			&:before {
-				border-top: 1px solid $color-gray4;
+				border-top: 1px solid #eee;
 				margin-top: 25px;
 				padding-bottom: 16px;
 			}
 
 			&:after {
 				padding-top: 16px;
-				border-bottom: 1px solid $color-gray4;
+				border-bottom: 1px solid #eee;
 			}
 
 			a {
 				background-color: transparent;
 				border: none;
-				color: $color-black2;
+				color: #142032;
 				cursor: pointer;
 				font-size: 14px;
 				outline: none;
@@ -729,14 +729,14 @@
 	}
 
 	#descricao-completa {
-		color: $color-black2;
+		color: #142032;
 
 		@include mq(md, max) {
 			padding: 0 15px;
 		}
 
 		> div {
-			border-top: 1px solid $color-gray6;
+			border-top: 1px solid #e5e5e5;
 			margin-top: 48px;
 
 			@include mq(md, max) {
@@ -753,7 +753,7 @@
 		}
 
 		.descricao {
-			color: $color-gray5;
+			color: #6d6e70;
 			font-size: 14px;
 			line-height: 18px;
 			max-width: 960px;
@@ -791,9 +791,9 @@
 				width: 100%;
 
 				button {
-					background-color: $color-black3;
+					background-color: #19273d;
 					border: none;
-					color: $color-white;
+					color: $white;
 					cursor: pointer;
 					font-size: 12px;
 					font-weight: 700;
@@ -805,12 +805,12 @@
 
 					@include mq(lg) {
 						&:hover {
-							background-color: $color-black;
+							background-color: #000;
 						}
 					}
 
 					&:active {
-						background-color: $color-black2;
+						background-color: #142032;
 					}
 				}
 			}
@@ -820,11 +820,11 @@
 	.popup-add-cart,
 	.modal-add-cart {
 		align-items: center;
-		background-color: $color-black2;
+		background-color: #142032;
 		bottom: 5%;
 		box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12);
 		border-radius: 100px;
-		color: $color-white;
+		color: $white;
 		display: flex;
 		font-size: 16px;
 		height: 90px;
@@ -863,7 +863,7 @@
 		button {
 			background-color: transparent;
 			border: none;
-			color: $color-pink;
+			color: #f71963;
 			cursor: pointer;
 			font-size: 16px;
 			margin-left: 12px;

src/arquivos/sass/pages/_user-logado.scss

@@ -8,8 +8,8 @@ body.minhaConta {
 	}
 
 	h1 {
-		border-bottom: 1px solid $color-gray;
+		border-bottom: 1px solid hsla(0, 0%, 90%, 1);
-		color: $color-black2;
+		color: #142032;
 		font-size: 30px;
 		margin-bottom: 28px;
 		padding: 24px 14px 16px;

src/arquivos/sass/partials/_breadcrumb.scss

@@ -20,7 +20,7 @@
 			a:after {
 				content: "Home";
 				font-size: 14px;
-				border-right: 1px solid $color-black2;
+				border-right: 1px solid #142032;
 				margin-right: -9px;
 				padding: 0px 9px 0px 0;
 			}
@@ -34,8 +34,8 @@
 		}
 
 		a {
-			border-right: 1px solid $color-black2;
+			border-right: 1px solid #142032;
-			color: $color-black2;
+			color: #142032;
 			margin-right: 7px;
 			padding: 0px 9px 0px 0;
 		}

src/arquivos/sass/partials/_flags.scss

@@ -1,43 +1,37 @@
 .flags-product {
-	display: block;
-	pointer-events: none;
 	position: absolute;
-	width: 100%;
+	top: 0;
-	z-index: 5;
+	left: 0;
+	z-index: map-get($z-index, level-2);
+	padding: 8px;
 
-	p {
+	.flag {
-		background-repeat: no-repeat;
-		color: $color-white;
 		display: none;
-		font-size: 11px;
+		margin: 0 0 8px;
-		float: right;
+		height: 20px;
-		font-weight: 700;
 		min-width: 54px;
-		margin: 7px 100% 0 7px;
+		max-width: max-content;
-		overflow: hidden;
+		font-size: 10px;
-		padding: 2.5px 4px;
+		line-height: 12px;
-		text-indent: -9999px;
+		text-transform: uppercase;
 
+		&.novo,
 		&.produto-off {
-			background: $color-black2;
+			display: flex;
-			display: table;
+			align-items: center;
-			float: left;
+			justify-content: center;
-			text-indent: 0;
-			width: 50px;
-
-			&:after {
-				content: "OFF";
-				display: inline-block;
-			}
 		}
 
 		&.novo {
-			background-color: $color-pink;
+			background: $blue;
-			border-radius: 5px;
+			color: $white;
-			display: table;
+			font-weight: bold;
-			float: left;
+		}
-			text-indent: 0;
+
-			text-transform: uppercase;
+		&.produto-off{
+			font-weight: 900;
+			color: $white;
+			background: $black;
 		}
 	}
 }

src/arquivos/sass/partials/_footer.scss

@@ -1,360 +1,167 @@
-/***************************************************************/
+.footer-links{
-/**-- Footer  ------------------------------********************/
-/*-------------------------------------------------------------*/
 
-.footer {
+	@include mq(md, min) {
-	background-color: $color-black2;
+		padding: 29px 0 25px;
+		border-bottom: 1px solid $gray-100;
+	}
 
-	.institucional-info {
+	&__wrapper {
-		color: $color-white;
+		display: grid;
-		font-size: 14px;
+		grid-template-columns: repeat(3, max-content);
-		margin: auto;
+		gap: 148px;
-		max-width: 950px;
+		justify-content: center;
-		padding: 0 15px 25px;
 
 		@include mq(md, max) {
-			font-size: 16px;
+			grid-template-columns: 1fr;
-			padding-left: 0;
+			gap: 0;
-			padding-right: 0;
+		}
 	}
 
-		.titulo {
+	&__block {
-			font-size: 16px;
-			margin: 27px 0 17px;
 
 		@include mq(md, max) {
-				font-size: 22px;
+			padding: 24px 15px;
-				text-align: center;
+			border-bottom: 1px solid $gray-100;
 		}
 	}
 
-		ul {
+	&__title {
+		margin-bottom: 10px;
+		margin: 0;
+		font-size: 12px;
+		line-height: 15px;
+
+		@include mq(md, max) {
+			margin-bottom: 13px;
+		}
+	}
+
+	&__items-list{
 		margin: 0;
 
-			@include mq(md, max) {
+		&--social {
-				max-width: 310px;
+			display: grid;
-				margin: auto;
+			grid-auto-flow: column;
-				padding: 0 10px;
+			grid-auto-columns: max-content;
+			gap: 16px;
+			align-items: center;
+		}
 	}
 
-			&:hover li a {
+	&__item {
-				opacity: 0.7;
+		padding: 4px 0;
+		font-size: 10px;
+		line-height: 12px;
 	}
 
-			li a {
+	&__link {
-				transition: all 0.15s linear;
+		color: $black;
+		transition: color 0.2s linear;
+
+		@include mq(md, min) {
 
 			&:hover {
-					opacity: 1;
+				color: $blue;
-				}
 			}
 		}
 
-		a {
+	}
-			color: $color-white;
+}
+
+.footer-infos {
+
+	&__labels {
+		display: flex;
+		justify-content: center;
+
+		@include mq(md, max){
+			flex-direction: column;
 		}
 
-		.institucional-links {
+		@include mq(md, min){
-			font-size: 16px;
+			align-items: center;
-		}
+			padding: 16px 0;
+			border-bottom: 1px solid $gray-100;
 
-		.contato-sac {
-			font-size: 12px;
-			@include mq(md, max) {
-				border-bottom: 1px solid $color-black3;
-				padding: 10px 0 20px;
-			}
-
-			@include mq(md, max) {
-				font-size: 16px;
-			}
-
-			li {
-				margin-bottom: 8px;
-
-				&:last-child() {
-					font-size: 10px;
-					text-transform: uppercase;
-
-					@include mq(md, max) {
-						font-size: 14px;
-					}
-
-					strong {
-						display: block;
-					}
 		}
 	}
 
-			p {
+	&__payment,
+	&__security {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
 		margin: 0;
-				span {
+
-					text-decoration: underline;
+		@include mq(md, max){
-				}
+			padding: 24px 0;
+			justify-content: center;
 		}
 	}
 
-		.redes-sociais {
+	&__payment {
-			h3 {
+		gap: 8px;
-				@include mq(md, max) {
+
+		@include mq(md, max){
+			border-bottom: 1px solid $gray-100;
+		}
+	}
+
+	&__security {
+		gap: 16px;
+	}
+
+	&__divider {
+		width: 1px;
+		height: 51px;
+		background: $gray-100;
+		margin: 0 24px;
+
+		@include mq(md, max){
 			display: none;
 		}
 	}
 
-			ul {
+	&__company {
-				@include mq(md, max) {
-					margin-top: 25px;
-					text-align: center;
-				}
-			}
-
-			li {
-				display: inline-block;
-				margin-right: 6px;
-			}
-
-			i {
-				@include mq(md, min) {
-					transform: scale(0.8);
-				}
-			}
-		}
-	}
-
-	.selos {
-		border-top: 1px solid $color-black3;
-		padding: 5px 0;
-		text-align: center;
-
-		@include mq(md, min) {
-			border-bottom: 1px solid $color-black3;
-		}
-
-		.col-12 {
-			@include mq(md, max) {
-				padding: 0;
-			}
-		}
-
-		ul {
-			display: inline-block;
-			@include mq(md, max) {
-				width: 100%;
-			}
-
-			&.pagamento {
-				padding-top: 10px;
-				padding-bottom: 10px;
-
-				@include mq(md, max) {
-					border-bottom: 1px solid $color-black3;
-					padding-bottom: 25px;
-				}
-
-				@include mq(md, min) {
-					border-right: 1px solid $color-gray;
-					margin-right: 20px;
-					padding-right: 20px;
-				}
-
-				li {
-					&:not(:last-child) {
-						@include mq(md, min) {
-							padding-right: 5px;
-						}
-					}
-				}
-			}
-
-			&.certificados {
-				li {
-					&:not(:last-child) {
-						padding-right: 10px;
-					}
-				}
-			}
-
-			li {
-				display: inline-block;
-			}
-		}
-	}
-
-	.razao {
-		font-size: 10px;
-		max-width: 1500px;
-		margin: auto;
-		padding: 15px;
-
-		@include mq(md, max) {
-			padding-top: 10px;
-		}
-
-		p {
-			color: $color-gray2;
-			margin: 0;
-
-			@include mq(md, max) {
-				text-align: center;
-			}
-
-			span {
-				@include mq(md, max) {
-					display: block;
-				}
-			}
-		}
-
-		a {
-			color: $color-gray2;
-			display: inline-block;
-		}
-
-		.cnpj {
-			@include mq(md, max) {
-				padding: 20px 15px;
-			}
-		}
-
-		.desenvolvimento {
-			text-align: right;
-
-			@include mq(md, max) {
-				text-align: center;
-				padding: 20px 15px 0;
-			}
-
-			a:nth-child(2) {
-				@include mq(md, max) {
-					border-left: 1px solid $color-gray;
-					border-right: 1px solid $color-gray;
-					margin-right: 20px;
-					margin-left: 20px;
-					padding-right: 15px;
-					padding-left: 15px;
-				}
-			}
-
-			span {
-				display: inline-block;
-			}
-		}
-	}
-}
-
-.mobile-bottom-options {
-	background-color: $color-white;
-	border-top: 1px solid $color-gray;
-	bottom: 0;
-	left: 0;
-	margin-bottom: -65px;
-	opacity: 0;
-	position: fixed;
-	right: 0;
-	transition: all 0.2s ease-in-out;
-	visibility: hidden;
-	z-index: 6;
-
-	&.active {
-		margin-bottom: 0;
-		opacity: 1;
-		visibility: visible;
-	}
-
-	ul {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		margin: 0;
+
+		@include mq(md, max){
+			flex-direction: column;
+			padding-bottom: 24px;
 		}
 
-	li {
+		@include mq(md, min){
-		display: inline-block;
+			padding: 12px 0;
-		width: 33%;
-	}
-
-	.option {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		display: block;
-		height: 66px;
-		outline: none;
-		padding: 10px;
-		width: 100%;
-
-		&::before {
-			content: "";
-			display: block;
-			margin: auto;
-
-			@extend .sprite;
 		}
 	}
 
-	.show-search {
+	&__copyright {
-		.option:before {
+		margin: 0 16px 0 0;
-			@extend .sprite;
+		line-height: 12px;
-			@extend .sprite-lupa;
-		}
-	}
-
-	.show-carrinho {
-		li:not(.amount-items),
-		strong,
-		.title {
-			display: none;
-		}
-
-		.AmountItemsInCart {
-			line-height: 0;
-			text-align: center;
-		}
-
-		.portal-totalizers-ref {
-			display: inline-block;
-			vertical-align: top;
-			position: relative;
-
-			.cartInfoWrapper {
-				@extend .sprite;
-				@extend .sprite-sacola;
-
-				@include mq(md, max) {
-					margin-right: 5px;
-				}
-			}
-
-			.amount-items {
-				background-color: $color-black2;
-				border-radius: 50%;
-				bottom: 2px;
-				color: $color-white;
 		font-size: 10px;
-				line-height: 1.3;
+		color: $gray-100;
-				min-width: 19px;
+
+		@include mq(md, max){
+			margin: 0;
 			text-align: center;
-				padding: 3px 4px;
-				position: absolute;
-				right: -8px;
-
-				@include mq(md, max) {
-					right: -3px;
-				}
-
-				em {
-					font-style: normal;
-				}
-			}
 		}
 	}
 
-	.show-menu {
+	&__develpment {
-		margin-top: -2px;
+		display: grid;
-
+		grid-auto-flow: column;
-		.option:before {
+		grid-auto-columns: max-content;
-			@extend .sprite;
+		align-items: center;
-			@extend .sprite-menu-bottom;
+		gap: 16px;
 	}
+
+	&__developed-by {
+		line-height: 12px;
+		font-size: 10px;
+		color: $gray-100;
+		margin-right: 7px;
 	}
 }

src/arquivos/sass/partials/_header.scss

@@ -1,411 +1,95 @@
-/***************************************************************/
+.page-header {
-/**-- Header  ------------------------------********************/
+	background: $black;
-/*-------------------------------------------------------------*/
+	padding: 28px 0;
-#ajaxBusy {
+
-	position: absolute;
+	@include mq(lg, min) {
+		position: sticky;
 		top: 0;
-	left: 0;
+		z-index: map-get($z-index, level-5);
-	background: #fff;
-	z-index: 15;
-	padding: 0px 16px;
-	line-height: 0.1;
-	opacity: 0.75;
-
-	&::after {
-		@include pseudo(inline-block);
-		border: solid 1px;
-		padding: 4px;
-		line-height: 0;
-		position: absolute;
-		right: 2px;
-		top: 35%;
-		border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4;
-		animation: spin 0.5s linear infinite;
-		border-radius: 50%;
-	}
-}
-header {
-	background: rgba(255, 255, 255, 0.95);
-	top: 0;
-	transition: all 0.2s ease-in-out;
-
-	&.fixed {
-		box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
-		position: fixed;
-		top: -30px;
-		left: 0;
-		right: 0;
-		z-index: 10;
-
-		@include mq(md, max) {
-			position: absolute;
 	}
 
-		.pink-bar {
+	@include mq(lg, max) { //trazendo do _mixing.scss
-			opacity: 0;
+		padding: 18px 0 0;
-			visibility: hidden;
-		}
 	}
 
-	&.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) {
+	&.isFixed {
-		top: -130px;
+		background: rgba($black, 0.9);
-		opacity: 0;
-		visibility: hidden;
-		pointer-events: none;
 	}
 
-	.pink-bar {
-		background-color: $color-pink;
-		opacity: 1;
-		overflow: hidden;
-		transition: all 0.2s ease-in-out;
 
-		ul {
+	&__wrapper {
-			margin: 6px 0;
+		display: grid;
-		}
+		grid-template-columns: 2fr 1fr 2fr;
-
-		li {
-			display: inline-block;
-
-			&:not(:last-child) {
-				margin-right: 8px;
-				padding-right: 8px;
-				position: relative;
-
-				&::after {
-					border-right: 1px solid $color-white;
-					content: "";
-					height: 9px;
-					position: absolute;
-					right: 0;
-					top: 23%;
-				}
-			}
-		}
-
-		a {
-			color: $color-white;
-			font-size: 12px;
-			text-transform: uppercase;
-
-			i {
-				vertical-align: sub;
-			}
-		}
-	}
-
-	.row {
 		align-items: center;
+
+		@include mq(lg, max) { //trazendo do _mixing.scss
+			grid-template-columns: repeat(3, 1fr);
+		}
 	}
 
-	.principal {
+	&__logo {
-		border-bottom: 1px solid $color-gray;
+		display: block;
-		padding: 20px 0;
+		margin: 0 auto;
-		position: relative;
 
-		@include mq(md, max) {
+		@include mq(lg, max) { //trazendo do _mixing.scss
-			padding-bottom: 0;
+			max-width: 66px;
+		}
 	}
 
-		> .container {
+	.user-items {
-			@include mq(md, max) {
+		display: flex;
-				max-width: 100%;
+		align-items: center;
+		justify-content: flex-end;
+
+		&__search-box {
+			flex: 1;
+			max-width: 212px;
+
+			@include mq(lg, max) { //trazendo do _mixing.scss
+				display: none;
 			}
 
-			@include mq_range(md, xl) {
+			.busca{
-				max-width: 98%;
+				border-bottom: 1px solid $white;
+				padding: 8px 0;
+			}
+		}
+
+		&__account-link{
+			display: flex;
+			align-items: center;
+
+			&::before,
+			&::after {
+				content: "";
+				width: 1px;
+				height: 19px;
+				margin: 0 24px;
+				background: $white;
+
+				@include mq(lg, max) { //trazendo do _mixing.scss
+					margin: 0 16px;
+				}
+			}
+
+			&::before {
+				@include mq(lg, max) { //trazendo do _mixing.scss
+					display: none;
+				}
 			}
 		}
 	}
 
-	.menu-mobile-abrir {
+	&__search-box {
+		margin-top: 18px;
+		border-top: 1px solid $gray;
+
 		@include mq(lg, min) {
 			display: none;
 		}
 
-		button {
+		.busca{
-			border: none;
+			padding: 13px 0;
-			background-color: transparent;
-			cursor: pointer;
-			outline: none;
-		}
-	}
-
-	.logo {
-		text-align: center;
-		@include mq(md, max) {
-			padding: 0;
-		}
-
-		img {
-			width: auto;
-			max-width: 100%;
-
-			@include mq(md, max) {
-				max-width: 100px;
-			}
-		}
-	}
-
-	.busca-desktop {
-		@include mq(md, max) {
-			display: none;
-		}
-	}
-
-	.busca-mobile {
-		margin-top: 20px;
-		padding: 0;
-
-		@include mq(md, min) {
-			display: none;
-		}
-
-		.busca {
-			border-top: 1px solid $color-gray4;
-			border-bottom-color: $color-gray4;
-			padding: 5px 0;
-		}
-	}
-
-	.busca {
-		border-bottom: 1px solid $color-black2;
-		color: $color-black2;
-		font-size: 14px;
-		max-width: 330px;
-		margin: auto;
-		padding: 0;
-		text-align: center;
-
-		@include mq(md, max) {
-			max-width: 100%;
-		}
-
-		legend,
-		label,
-		select {
-			display: none;
-		}
-
-		input {
-			border: none;
-			outline: none;
-			padding: 8px 8px 8px 0;
-
-			&.fulltext-search-box {
-				background-color: transparent;
-				max-width: 300px;
-				margin-right: -5px;
-				width: 85%;
-
-				@include mq(md, max) {
-					max-width: 100%;
-				}
-
-				@include mq_range(md, lg) {
-					width: 80%;
-				}
-			}
-
-			&.btn-buscar {
-				background-color: transparent;
-				cursor: pointer;
-				font-size: 0;
-				padding: 8px;
-
-				@extend .sprite;
-				@extend .sprite-lupa;
-			}
-		}
-	}
-
-	.util-links {
-		align-items: center;
-		display: flex;
-		justify-content: flex-end;
-		text-align: right;
-
-		@include mq(md, max) {
-			padding-left: 0;
-		}
-	}
-
-	.links-usuario {
-		display: inline-block;
-		margin: 0 24px;
-		padding: 0 24px;
-		position: relative;
-
-		@include mq(md, max) {
-			margin: 0 14px;
-			padding: 0 14px;
-		}
-
-		@include mq_range(md, lg) {
-			margin: 0 16px;
-			padding: 0 16px;
-		}
-
-		&::before,
-		&::after {
-			border-right: 1px solid $color-black;
-			content: "";
-			height: 19px;
-			position: absolute;
-			top: 5px;
-		}
-
-		&::before {
-			left: 0;
-
-			@include mq(md, max) {
-				display: none;
-			}
-		}
-
-		&::after {
-			right: 0;
-		}
-	}
-
-	.carrinho {
-		display: inline-block;
-		position: relative;
-
-		a {
-			li:not(.amount-items),
-			strong,
-			.title {
-				display: none;
-			}
-		}
-
-		.AmountItemsInCart {
-			line-height: 0;
-		}
-
-		.portal-totalizers-ref {
-			display: inline-block;
-			vertical-align: top;
-			position: relative;
-
-			.cartInfoWrapper {
-				@extend .sprite;
-				@extend .sprite-sacola;
-
-				@include mq(md, max) {
-					margin-right: 5px;
-				}
-			}
-
-			.amount-items {
-				background-color: $color-black2;
-				border-radius: 50%;
-				bottom: 2px;
-				color: $color-white;
-				font-size: 10px;
-				line-height: 1.3;
-				min-width: 19px;
-				text-align: center;
-				padding: 3px 4px;
-				position: absolute;
-				right: -8px;
-
-				@include mq(md, max) {
-					right: -3px;
-				}
-
-				em {
-					font-style: normal;
-				}
-			}
-		}
-	}
-}
-
-.header-simples {
-	border-bottom: 1px solid $color-gray;
-	padding: 18px 0;
-	a {
-		color: #333;
-	}
-	.compra-segura {
-		font-weight: 600;
-		font-size: 17px;
-		text-align: right;
-	}
-
-	.header,
-	.compra-segura {
-		@include mq("sm", max) {
-			text-align: center;
-			padding: 4px 0;
-			font-size: 12px;
-		}
-	}
-}
-
-.ui-autocomplete {
-	&.autocompleteopen {
-		display: table !important;
-	}
-
-	background: white;
-	padding: 0;
-	z-index: 999 !important;
-	width: auto !important;
-	border: solid 1px #ccc;
-	box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
-
-	li {
-		padding: 12px 32px 12px 16px;
-		overflow: hidden;
-		font-size: 0.9em !important;
-
-		&:nth-child(2n) {
-			background-color: $color-gray4;
-		}
-		a {
-			font-size: 14px;
-			cursor: pointer;
-		}
-		img {
-			margin-right: 10px;
-			width: auto;
-			vertical-align: middle;
-		}
-	}
-}
-
-.ui-autocomplete {
-	background: white;
-	border: solid 1px #ccc;
-	box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95);
-	max-width: 260px;
-	padding: 0;
-	width: auto !important;
-	z-index: 999 !important;
-
-	&.autocompleteopen {
-		display: table !important;
-	}
-
-	li {
-		padding: 12px 32px 12px 16px;
-		overflow: hidden;
-		font-size: 0.9em !important;
-
-		&:nth-child(2n) {
-			background-color: $color-gray4;
-		}
-		a {
-			font-size: 14px;
-			cursor: pointer;
-		}
-		img {
-			margin-right: 10px;
-			width: auto;
-			vertical-align: middle;
 		}
 		}
 }

src/arquivos/sass/partials/_menu.scss

@@ -1,514 +1,317 @@
-/***************************************************************/
+.menu {
-/**-- Menu    ------------------------------********************/
-/*-------------------------------------------------------------*/
 
-.menu-principal {
+	align-self: stretch;
-	position: initial;
 
-	@include mq(lg, max) {
+	&__button {
-		background-color: $color-white;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
-		bottom: 0;
-		left: 0;
-		margin-left: -100%;
-		max-width: 375px;
-		overflow: hidden;
-		opacity: 0;
 		padding: 0;
-		position: fixed;
+		border: 0;
-		top: 0;
+		outline: 0;
-		transition: all 0.45s ease-in-out;
-		visibility: hidden;
-		width: 100%;
-		z-index: map-get($z-index, menu);
-	}
-
-	@include mq_range(lg, xl) {
-		padding-right: 0;
-	}
-
-	&.mobile-open {
-		margin-left: 0;
-		opacity: 1;
-		visibility: visible;
-	}
-
-	.header-menu-mobile {
-		display: none;
-		border-bottom: 1px solid $color-gray4;
-		padding: 22px 15px 0;
-		margin: 0 -15px;
-
-		@include mq(lg, max) {
-			display: block;
-		}
-
-		p {
-			display: inline-block;
-			font-size: 12px;
-			letter-spacing: 0.5px;
-			margin: 0;
-			text-transform: uppercase;
-			padding: 0 16px;
-		}
-
-		#close-menu-button {
 		background: transparent;
-			border: none;
-			cursor: pointer;
-			display: inline-block;
-			right: 16px;
-			outline: none;
-			position: absolute;
-			top: 17px;
 
-			&::before {
+		@include mq(lg, min) {
-				border-left: 1px solid $color-gray4;
+			display: none;
-				content: "";
+		}
-				display: block;
-				height: 36px;
-				position: absolute;
-				left: -20px;
-				top: -6px;
 	}
 
-			span {
+	.menu-header {
-				display: block;
-				padding: 12px;
-				position: relative;
 
-				&::before,
+		@include mq(lg, min) {
-				&::after {
+			display: none;
-					border: 1px solid $color-black2;
-					content: "";
-					display: block;
-					left: 0;
-					position: absolute;
-					top: 12px;
-					width: 24px;
 		}
 
-				&::before {
+		&__top-wrapper {
-					transform: rotate(45deg);
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 16px;
 		}
 
+		&__text {
+			display: flex;
+			align-items: center;
+			color: $gray-200;
+			line-height: 15px;
+			font-size: 12px;
+
 			&::after {
-					transform: rotate(-45deg);
+				content: "";
+				width: 1px;
+				height: 38px;
+				position: absolute;
+				right: 72px;
+				background: $gray-100;
+			}
+
+			i {
+				margin-right: 10px;
 			}
 		}
+
+		&__close-button {
+			padding: 0;
+			border: 0;
+			outline: 0;
+			background: transparent;
+
 		}
 
+		&__search-box {
+			background: $black;
+
 			.busca {
-			background-color: $color-gray4;
+				padding: 16px;
-			border-top: 1px solid $color-gray6;
+			}
-			border-bottom: none;
-			max-width: 100%;
-			margin-top: 22px;
-			padding: 10px 0;
 		}
 	}
 
-	.itens {
+	.main-menu {
-		font-size: 14px;
+		height: 100%;
+
+		@include mq(lg, max) {
+			display: flex;
+			flex-direction: column;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: map-get($z-index, level-5);
+			transform: translateX(- 100%);
+			width: 100%;
+			max-width: 375px;
+			height: 100%;
+			background: $white;
+			transition: transform 0.2s ease-in-out;
+		}
+
+		&.isOpen {
+			transform: translateX(0);
+		}
+
+		&__departments {
+			display: flex;
 			margin: 0;
 
 			@include mq(lg, max) {
-			bottom: 64px;
+				flex-direction: column;
-			left: 0;
+				flex: 1;
-			overflow-y: auto;
-			overflow-x: hidden;
-			position: absolute;
-			top: 117px;
-			width: 100%;
-		}
-
-		&::-webkit-scrollbar {
-			width: 6px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: $color-gray;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: $color-gray3;
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background-color: darken($color-gray3, 10);
-		}
-
-		> li {
-			display: inline-block;
-			line-height: 18px;
-			text-align: left;
-			vertical-align: top;
-
-			@include mq(lg, max) {
-				align-items: center;
-				display: flex;
-				justify-content: space-between;
-				padding: 0 24px;
-				border-bottom: 1px solid $color-gray4;
-
-				a {
-					font-size: 16px;
-					padding: 17px 0px;
-					width: 100%;
-				}
-			}
-
-			&:hover {
-				> a::after {
-					@include mq(lg, min) {
-						border-bottom-color: $color-pink;
-						border-width: 4px;
-					}
-				}
-			}
-
-			&:not(:last-child) {
-				@include mq(lg, min) {
-					border-right: 1px solid $color-black;
-					margin-right: 24px;
-					padding-right: 24px;
-				}
-
-				@include mq_range(lg, xl) {
-					margin-right: 16px;
-					padding-right: 16px;
-				}
-			}
-
-			> a {
-				display: inline-block;
 				position: relative;
-
+				overflow: hidden auto;
-				&:after {
-					@include mq(lg, min) {
-						bottom: 0;
-						border-bottom: 1px solid transparent;
-						content: "";
-						left: 0;
-						position: absolute;
-						right: 0;
-						transition: all 0.15s ease-in-out;
-						width: 100%;
-					}
-				}
-			}
-
-			.ver-departamento {
-				background-color: transparent;
-				border: none;
-				cursor: pointer;
-				display: inline-block;
-				text-indent: -9999px;
-				overflow: hidden;
-				font-size: 0;
-				outline: none;
-				opacity: 0.75;
-
-				&:before {
-					@include pseudo(block, relative);
-					@extend .sprite;
-					@extend .sprite-arrow-right-gray;
 			}
 
 			@include mq(lg, min) {
-					display: none;
+				height: 100%;
-				}
-			}
-		}
-
-		a {
-			color: $color-black2;
-			display: inline-block;
-		}
-
-		.highlight {
-			color: $color-pink;
-			font-weight: 700;
-
-			&::before {
-				content: "";
-				left: -20.5px;
-				position: absolute;
-				top: -2px;
-				@extend .sprite;
-				@extend .sprite-pinrinpinpin;
-
-				@include mq(lg, max) {
-					top: 13px;
-				}
-			}
 			}
 		}
 
-	.footer-menu-mobile {
+		&__department {
-		background-color: $color-pink;
-		bottom: 0;
-		left: 0;
-		padding: 17.5px 15px;
-		position: absolute;
-		right: 0;
-		text-align: center;
-
-		@include mq(lg, min) {
-			display: none;
-		}
-
-		a {
-			color: $color-white;
-			font-size: 12px;
-			text-transform: uppercase;
-
-			i {
-				margin-right: 18px;
-			}
-		}
-	}
-
-	.m3-dropdown {
-		&:hover {
-			.m3-dropdown-menu {
-				@include mq(lg, min) {
-					max-height: 1000px;
-					opacity: 1;
-					top: 100%;
-					visibility: visible;
-				}
-
-				&::before {
-					visibility: visible;
-				}
-			}
-		}
-
-		.m3-dropdown-menu {
-			background-color: $color-white;
-			max-height: 0;
-			opacity: 0;
-			transition: all 0.4s ease-in-out;
-			visibility: hidden;
-			z-index: map-get($z-index, menu);
-			position: absolute;
-			left: 0;
-			right: 0;
-			width: 100%;
-
-			@include mq(lg, max) {
-				border-bottom: 1px solid $color-gray4;
-				bottom: 64px;
-				margin-left: 100%;
-				max-height: initial;
-				overflow-y: auto;
-				top: 0px;
-				transition: all 0.4s ease-in-out, top 0s ease-in-out;
-			}
-
-			@include mq(lg, min) {
-				background: rgba(255, 255, 255, 0.95);
-				border-top: 1px solid $color-gray;
-				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
-				padding: 45px 0px 37px;
-				top: 70%;
-				transition: all 0.2s ease-in-out;
-			}
-
-			&::before {
-				content: "";
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: -44px;
-				padding: 22px;
-				visibility: hidden;
-
-				@include mq(lg, max) {
-					display: none;
-				}
-			}
-
-			&::-webkit-scrollbar {
-				width: 6px;
-			}
-
-			&::-webkit-scrollbar-track {
-				background-color: $color-gray;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: $color-gray3;
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background-color: darken($color-gray3, 10);
-			}
-
-			.btn-voltar {
-				border-bottom: 1px solid $color-gray4;
-				padding: 7px 24px;
-
-				@include mq(lg, min) {
-					display: none;
-				}
-
-				button {
-					background-color: transparent;
-					border: none;
-					cursor: pointer;
-					font-size: 14px;
-					font-weight: 700;
-					outline: none;
-					padding: 0;
-					text-transform: uppercase;
-
-					i {
-						transform: scale(0.5);
-					}
-
-					span {
-						display: inline-block;
-						margin-left: 4px;
-						padding-top: 3px;
-					}
-				}
-			}
-
-			> div {
-				@include mq(lg, min) {
-					align-items: center;
 			display: flex;
-					justify-content: flex-start;
+			align-items: center;
-				}
-
-				.links-menu {
-					min-width: 38%;
 
 			@include mq(lg, max) {
-						padding: 0px 9px 36px;
+				border-bottom: 1px solid $gray-100;
 			}
 
 			@include mq(lg, min) {
-						border-left: 1px solid $color-black;
+
-						padding-left: 16px;
+				margin-right: 40px;
+
+				&:hover {
+					.main-menu__department__link {
+						color: $blue;
+						font-weight: 700;
+						text-decoration: underline;
 					}
 
-					.link-departamento {
+					.submenu {
-						@include mq(lg, max) {
-							padding-top: 36px;
-						}
-					}
-				}
-
-				.elementos-menu {
-					max-width: 438px;
-					width: 100%;
-
-					@include mq(lg, max) {
-						display: none;
-					}
-
-					img {
-						border-bottom: 5px solid $color-black4;
-					}
-				}
-			}
-
-			ul {
-				display: inline-block;
-
-				&:hover li {
-					opacity: 0.75;
-				}
-
-				li:hover {
 						opacity: 1;
+						pointer-events: all;
+						top: 100%;
+					}
 				}
 			}
 
-			li {
+			&__link {
-				transition: all 0.1s ease-in-out;
+				font-size: 12px;
+				line-height: 15px;
+				color: $white;
+
+
+				@include mq(lg, max) {
+					width: 100%;
+					padding: 20px 16px;
+					color: $black;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+				}
 
-				&:not(:last-child) {
 				@include mq(lg, min) {
-						margin-bottom: 16px;
+					&::after {
-					}
+						content: attr(title);
-				}
+						display: block;
-
+						height: 0;
-				@include mq(lg, max) {
+						overflow: hidden;
-					margin: 0;
+						font-weight: bold;
-				}
+						visibility: hidden;
-
-				&.link-departamento {
-					font-size: 24px;
-					font-weight: 700;
-					margin-bottom: 24px;
-
-					@include mq(lg, max) {
-						margin-bottom: 16px;
-						text-transform: lowercase;
-
-						a {
-							border-bottom: 4px solid $color-pink;
-							font-size: 18px;
-							padding: 0;
-						}
-					}
-				}
-
-				&.ver-todos {
-					a {
-						color: $color-pink;
-						font-weight: 700;
-
-						@include mq(lg, max) {
-							font-size: 16px;
 					}
 				}
 
 				i {
-						transform: scale(0.325);
+					@include mq(lg, min) {
-					}
+						display: none;
 					}
 				}
 
+			}
+		}
+
+		&__account-link {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: $black;
+			height: 64px;
+			line-height: 12px;
+			font-size: 10px;
+			color: $white;
+
+			@include mq(lg, min) {
+				display: none;
+			}
+
+			i {
+				margin-right: 16px;
+			}
+
+		}
+	}
+
+	.submenu {
+		position: absolute;
+		width: 100%;
+
 		@include mq(lg, max) {
-				a {
+			background: $white;
-					font-size: 14px;
+			top: 0;
+			left: 100%;
+			height: 100%;
+			overflow: auto;
+			padding-bottom: 34px;
+			transition: left 0.2s ease-in-out;
+		}
+
+		@include mq(lg, min) {
+			position: absolute;
+			top: calc(100% + 32px);
+			left: 0;
+			padding: 30px 0 43px;
+			z-index: map-get($z-index, level-4);
+			background: rgba($white, 0.95);
+			box-shadow: 0px 4px 4px rgba($black, 0.02);
+			opacity: 0;
+			pointer-events: none;
+			transition: all 0.2s ease-in-out;
+
+		}
+
+		&.isOpen {
+			left: 0;
+		}
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			bottom: 100%;
+			width: 100%;
+			height: 28px;
+			background: transparent;
+		}
+
+		.container {
+			@include mq(lg, max) {
+				padding: 0 16px;
+			}
+		}
+
+		&__return-button {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			margin-bottom: 34px;
+			padding: 0;
+			border: solid $gray-100;
+			border-width: 0 0 1px 0;
+			outline: 0;
+			background: transparent;
+			text-align: left;
+			padding: 16px;
+
+			i {
+				margin-right: 8px;
+			}
+
+			@include mq(lg, min) {
+				display: none;
+			}
+
+		}
+
+		&__title {
+			line-height: 24px;
+			font-size: 20px;
+			margin: 0 0 8px;
+
+			@include mq(lg, max) {
+				text-decoration: underline;
+				line-height: 14px;
+				font-size: 12px;
+				color: $blue;
+			}
+		}
+
+		&__categories-wrapper {
+			margin-bottom: 16px;
+
+			@include mq(lg, min) {
+				display: flex;
+				margin-bottom: 8px;
+			}
+		}
+
+		&__categories {
+			margin-right: 30px;
+		}
+
+		&__category {
 			padding: 8px 0;
-					width: auto;
+
-				}
+			&__link {
-			}
+				line-height: 15px;
+				font-size: 12px;
+				color: $black;
+				transition: color .2s linear;
+
+				@include mq(lg, min) {
+					&:hover {
+					color: $blue;
 					}
 				}
 
-	.has-sub-menu-open {
-		@include mq(lg, max) {
-			position: initial;
-			transition: position 0.2s ease-in-out;
-		}
 
-		.m3-dropdown-menu {
-			@include mq(lg, max) {
-				top: 117px;
-			}
 			}
 		}
 
-	.sub-menu-open {
+		&__see-all {
-		.m3-dropdown-menu {
+			display: flex;
-			@include mq(lg, max) {
+			align-items: center;
-				margin-left: 0;
+			line-height: 15px;
-				opacity: 1;
+			font-size: 12px;
-				visibility: visible;
+			font-weight: bold;
-			}
+			color: $black;
-		}
 
-		> a:before {
+			i {
-			opacity: 1;
+				margin-left: 9px;
-			transform: rotate(90deg) scale(0.5);
+			}
 		}
 	}
 }

src/arquivos/sass/partials/_prateleira.scss

@@ -1,263 +1,197 @@
-/***************************************************************/
+.shelf {
-/**-- Prateleiras --------------------------********************/
-/*-------------------------------------------------------------*/
-
-.prateleira-de-produtos {
-	position: relative;
-
-	.slick-next,
-	.slick-prev {
-		@extend .sprite;
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		font-size: 0;
-		outline: none;
-		padding: 0;
-		position: absolute;
-		top: 30%;
-		z-index: 1;
-
-		@include mq(md, max) {
-			transform: scale(0.8);
-		}
-	}
-
-	.slick-next {
-		@extend .sprite;
-		@extend .sprite-circled-arrow-right;
-		left: auto;
-		right: -60px;
-
-		@include mq(md, max) {
-			right: -35px;
-		}
-
-		@include mq_range(md, xl) {
-			right: -45px;
-		}
-	}
-
-	.slick-prev {
-		@extend .sprite;
-		@extend .sprite-circled-arrow-left;
-		right: auto;
-		left: -60px;
-
-		@include mq(md, max) {
-			left: -35px;
-		}
-
-		@include mq_range(md, xl) {
-			left: -45px;
-		}
-	}
-
-	.slick-dots {
-		bottom: 20px;
-		height: 17px;
-		position: absolute;
-		pointer-events: none;
-		text-align: center;
-		width: 100%;
-
-		@include mq(md, max) {
-			margin-top: 16px;
-			position: initial;
-		}
-
-		&,
-		li {
-			align-items: center;
-			display: flex !important;
-			justify-content: center;
-		}
-
-		li {
-			display: inline-block;
-			margin: 0 4px;
-		}
-
-		button {
-			background-color: $color-black2;
-			border: none;
-			cursor: pointer;
-			height: 10px;
-			outline: none;
-			padding: 0;
-			pointer-events: all;
-			transition: all 0.15s ease-in-out;
-			width: 10px;
-		}
-
-		.slick-active {
-			button {
-				background-color: $color-pink;
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
 
 	h2 {
-		color: $color-pink;
+		margin: 0 0 16px;
-		font-size: 24px;
+		font-size: 16px;
-		margin: 0 0 24px;
+		line-height: 19px;
 		text-align: center;
-		text-transform: lowercase;
 	}
 
 	ul {
-		max-width: 95%;
+		margin: 0;
-		margin: auto;
 
-		@include mq(md, max) {
+		@include mq(lg, max) {
-			max-width: 300px;
+			padding: 0 32px;
-		}
 		}
 
+	}
+
+	.slick-track {
+		display: flex;
+	}
+
+	.slick-slide {
+		height: auto;
+
+		& > div,
 		li {
-		display: inline-block;
+			height: 100%;
-		vertical-align: top;
+		}
-		padding: 0 2.5px;
 	}
-}
 
-.produto-na-prateleira {
+	.slick-arrow {
-	padding: 0 5px;
+		@extend .sprite;
+
+		@include mq(lg, max) {
+			transform: translateY(-50%) scale(0.7);
+		}
+	}
+
+	.slick-prev {
+		right: 100%;
+
+		@include mq(lg, max) {
+			left: 0;
+			right: auto;
+			transform-origin: left;
+		}
+
+		@extend .sprite-arrow-gray-prev-icon;
+
+	}
+
+	.slick-next {
+		left: 100%;
+
+		@include mq(lg, max) {
+			right: 0;
+			left: auto;
+			transform-origin: right;
+		}
+
+		@extend .sprite-arrow-gray-next-icon;
+
+	}
+
+	.produto-na-prateleira {
+		display: flex;
+		flex-direction: column;
 		position: relative;
-	text-align: center;
+		height: 100%;
+		margin: 0 15px;
 
 		.product-image {
+			position: relative;
+			margin-bottom: 16px;
+			padding-top: 100%; //faz o item ficar quadrado
 			overflow: hidden;
-		position: relative;
 
-		.lazyload__sibling {
+			&:hover{
-			padding-bottom: 100%;
+				.foto-secundaria {
-
+					opacity: 1;
-			+ div {
+					pointer-events: all;
-				top: 0;
-				left: 0;
-				position: absolute;
-				width: 100%;
 				}
 			}
 
-		.lazyload__sibling img {
-			left: 50%;
-			max-width: initial;
-			position: relative;
-			transform: translateX(-50%);
-			width: 100%;
-		}
-
 			.foto-principal,
 			.foto-secundaria {
-			transition: all 0.25s linear;
+				position: absolute;
-		}
+				width: 100%;
-
+				height: 100%;
-		&:hover .foto-secundaria,
+				top: 0;
-		.foto-principal {
+				left: 0;
-			visibility: visible;
+				z-index: map-get($z-index , level-1);
-			opacity: 1;
-			z-index: 1;
 			}
 
 			.foto-secundaria {
-			position: absolute;
-			width: 100%;
-			top: 0;
-			z-index: -1;
-			visibility: hidden;
 				opacity: 0;
+				pointer-events: none;
+				transition: all .5s ease-in-out;
+			}
+
+			img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
 			}
 		}
 
-	.informacoes .nome {
+		.disponivel,
-		font-size: 14px;
+		.indisponivel{
-		line-height: 16px;
+			display: flex;
-		margin-top: 16px;
+			flex-direction: column;
-		min-height: 34px;
+			justify-content: flex-end;
-		text-transform: capitalize;
+			flex: 1;
+		}
+
+
+		.nome {
+			text-transform: uppercase;
+			text-align: center;
+			line-height: 12px;
+			font-size: 10px;
+			font-weight: 500;
+			margin-bottom: 17px;
 		}
 
 		.price {
-		margin: 8px 0 17px;
+			margin-bottom: 17px;
+			text-align: center;
+			text-transform: uppercase;
 
-		> div {
-			line-height: 1.3;
-		}
 			.antigo {
-			color: $color-gray2;
+				margin-bottom: 4px;
-			font-size: 14px;
-			min-height: 18px;
 				text-decoration: line-through;
+				font-size: 10px;
+				line-height: 12px;
+				color: $gray-300;
 			}
 
 			.principal {
-			font-size: 18px;
+				margin-bottom: 4px;
-			font-weight: 700;
+				font-weight: 900;
+				font-size: 13px;
+				line-height: 16px;
 			}
 
 			.parcelado {
-			color: $color-gray2;
+				color: $gray-500;
-			font-size: 12px;
+				font-size: 10px;
-
+				line-height: 12px;
-			strong {
-				font-weight: normal;
 			}
 		}
 
-		.boleto {
-			display: none;
-		}
-	}
-
-	.compra {
 		.btn-compra {
-			margin: 0;
+			a {
-			display: block;
+				display: flex;
-			transition: all 0.25s linear 0.25s;
+				align-items: center;
+				justify-content: center;
+				height: 50px;
+				background: $black;
+				color: $white;
+				font-weight: bold;
+				font-size: 10px;
+				line-height: 12px;
 
-			@include mq(md, min) {
+				@include mq(lg, max) {
-				visibility: hidden;
+					&:active {
-				opacity: 0;
+						background: lighten($black, 10);
+					}
 				}
 
-			a {
+				@include mq(lg, min) {
-				background-color: $color-green;
+					&:hover{
-				color: $color-white;
+					background: lighten($black, 10);
-				display: block;
-				font-size: 14px;
-				letter-spacing: 1px;
-				padding: 15px 0;
-				text-transform: uppercase;
-				transition: all 0.15s linear;
-
-				@include mq(lg) {
-					&:hover {
-						background-color: $color-green2;
 					}
 
 					&:active {
-						background-color: $color-green3;
+						background: $black;
 					}
 				}
 			}
 		}
-	}
-
-	@include mq(lg) {
-		&:hover .compra .btn-compra {
-			visibility: visible;
-			opacity: 1;
-			z-index: 1;
-		}
-	}
 
 		.indisponivel {
-		color: $color-pink;
+			.erro {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 50px;
+				color: $red-300;
 				font-weight: bold;
-		margin: 5px 0;
+				font-size: 10px;
+				line-height: 12px;
+			}
+		}
 	}
 }

src/arquivos/sass/partials/_search.scss

@@ -0,0 +1,36 @@
+.busca {
+	display: flex;
+	align-items: center;
+	margin: 0;
+
+	legend,
+	label,
+	select {
+		display: none;
+	}
+
+	.fulltext-search-box {
+		flex: 1;
+		height: 23px;
+		outline: 0;
+		border: 0;
+		padding: 0;
+		font-size: 10px;
+		line-height: 12px;
+		background: transparent;
+		color: $white;
+	}
+
+	.btn-buscar {
+		width: 23px;
+		height: 23px;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		font-size: 0;
+		background-color: transparent;
+
+		@extend .sprite;
+		@extend .sprite-search-icon;
+	}
+}

src/arquivos/sass/partials/_slider.scss

@@ -0,0 +1,36 @@
+.slick-arrow {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: map-get($z-index , level-1);
+	font-size: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 0;
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.slick-dots {
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+
+	li {
+		display: flex;
+		margin: 0 4px;
+
+	}
+
+	button {
+		width: 10px;
+		height: 10px;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: $white;
+	}
+
+}

src/arquivos/sass/utils/_normalize.scss

@@ -23,7 +23,7 @@ html {
    */
 
 body {
-	color: $color-black2;
+	color: $black;
 	margin: 0;
 }
 
@@ -395,12 +395,6 @@ body {
 	font-size: 12px;
 }
 
-body {
-	@include mq(md, max) {
-		padding-bottom: 67px;
-	}
-}
-
 html {
 	font-family: $font-family;
 	line-height: $font-height;

src/arquivos/sass/utils/_variaveis.scss

@@ -1,39 +1,24 @@
 // fonts
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Poppins:wght@700&family=Roboto&display=swap');
 
-$font-family: "Roboto", sans-serif;
+$font-family: "Inter", sans-serif;
-$font-weight-light: 300;
-$font-weight-regular: 400;
-$font-weight-heavy: 700;
 $font-height: 1.5;
 
 // colors
-$color-black: #000;
+$black: #000;
-$color-black2: #142032;
+$white: #fff;
-$color-black3: #19273d;
-$color-black4: #151728;
 
-$color-gray: hsla(0, 0%, 90%, 1);
+$blue: #00c8ff;
-$color-gray2: hsla(220, 1%, 43%, 1);
+$blue-100: #00c8ff;
-$color-gray3: hsl(0, 0%, 77%);
-$color-gray4: #eee;
-$color-gray5: #6d6e70;
-$color-gray6: #e5e5e5;
 
-$color-white: #fff;
+$red-300: #c54141;
-$color-white2: #f5f5f5;
 
-$color-pink: #f71963;
+$gray: #333;
-$color-pink2: hsla(348, 83%, 72%, 1);
+$gray-100: #e0e0e0;
-$color-pink3: hsla(348, 83%, 58%, 1);
+$gray-200: #828282;
-
+$gray-300: #6D6E70;
-$color-purple: hsla(266, 70%, 52%, 1);
+$gray-400: #bdbdbd;
-
+$gray-500: #6D6E70;
-$color-green: #2fab61;
-$color-green2: hsla(138, 66%, 41%, 1);
-$color-green3: hsla(138, 50%, 41%, 1);
-$color-green4: hsla(138, 59%, 34%, 1);
-
-// universal
 
 // Grid breakpoints
 
@@ -46,13 +31,9 @@ $grid-breakpoints: (
 ) !default;
 
 $z-index: (
-	menu: 15,
+	level-1: 5,
-	popup-add-cart: 10,
+	level-2: 10,
-	dropdown: 10,
+	level-3: 15,
-	flag-prateleira: 5,
+	level-4: 20,
-	comprar-flutuante: 5,
+	level-5: 25,
-	avise-me: 5,
-	scroll-top: 7,
-	header-fixo: 10,
-	popup-user: 15,
 ) !default;

src/controles-customizados/menuPrincipal.html

@@ -0,0 +1,232 @@
+<nav class="main-menu">
+	<div class="menu-header">
+		<div class="menu-header__top-wrapper">
+			<div class="menu-header__text">
+				<i class="sprite sprite-lock-icon"></i>
+				COMPRA 100% SEGURA
+			</div>
+
+			<button class="menu-header__close-button">
+				<i class="sprite sprite-close-menu-icon"></i>
+			</button>
+		</div>
+		<div class="menu-header__search-box">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
+
+	<ul class="main-menu__departments">
+		<li class="main-menu__department">
+			<a class="main-menu__department__link" href="#" title="LOREM IPSUM">
+				LOREM IPSUM
+				<i class="sprite sprite-menu-mobile-arrow"></i>
+			</a>
+
+			<div class="submenu">
+				<button class="submenu__return-button">
+					<i class="sprite sprite-submenu-back-arrow"></i>
+					VOLTAR
+				</button>
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM</h2>
+
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+					</div>
+
+					<a class="submenu__see-all" href="http://">
+						VER TODOS
+						<i class="sprite sprite-menu-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department__link" href="#" title="LOREM IPSUM">
+				LOREM IPSUM
+				<i class="sprite sprite-menu-mobile-arrow"></i>
+			</a>
+
+			<div class="submenu">
+				<button class="submenu__return-button">
+					<i class="sprite sprite-submenu-back-arrow"></i>
+					VOLTAR
+				</button>
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM 02</h2>
+
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+					</div>
+
+					<a class="submenu__see-all" href="http://">
+						VER TODOS
+						<i class="sprite sprite-menu-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department__link" href="#" title="LOREM IPSUM">
+				LOREM IPSUM
+				<i class="sprite sprite-menu-mobile-arrow"></i>
+			</a>
+
+			<div class="submenu">
+				<button class="submenu__return-button">
+					<i class="sprite sprite-submenu-back-arrow"></i>
+					VOLTAR
+				</button>
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM 03</h2>
+
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a href="#" class="submenu__category__link"
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+					</div>
+
+					<a class="submenu__see-all" href="http://">
+						VER TODOS
+						<i class="sprite sprite-menu-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+	</ul>
+
+	<a class="main-menu__account-link" href="/account">
+		<i class="sprite sprite-user-icon"></i>
+		ENTRAR / MEUS PEDIDOS
+	</a>
+</nav>

src/template-pagina/bernardo-home.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html
+	xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
+	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
+	lang="pt-br"
+>
+	<head>
+		<meta name="page" content="home" page-id="homepage" />
+		<meta charset="utf-8" />
+		<meta http-equiv="x-ua-compatible" content="ie=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<vtex:metaTags />
+		<title>M3 - Bernardo Waldhelm</title>
+
+		<vtex:template id="bernardo-loads-header" />
+	</head>
+
+	<body>
+		<vtex:template id="bernardo-header" />
+
+		<main class="home">
+			<section class="main-banners">
+				<div class="main-banners__desktop">
+					<vtex:contentPlaceHolder id="banners-principais-desktop" />
+				</div>
+
+				<div class="main-banners__mobile">
+					<vtex:contentPlaceHolder id="banners-principais-mobile" />
+				</div>
+			</section>
+
+			<section class="advantages">
+				<ul class="advantages__list">
+					<li class="advantages__item">
+						<i class="sprite sprite-credit-card-icon"></i>
+						<p class="advantages__text">
+							PARCELAMENTO EM <br />
+							ATÉ 6X SEM JUROS
+						</p>
+					</li>
+					<li class="advantages__item">
+						<i class="sprite sprite-truck-icon"></i>
+						<p class="advantages__text">
+							PAC GRÁTIS PARA COMPRAS <br />
+							ACIMA DE <strong> R$ 500,00</strong>
+						</p>
+					</li>
+					<li class="advantages__item">
+						<i class="sprite sprite-shop-icon"></i>
+						<p class="advantages__text">
+							FÁBRICA <br />
+							PRÓPRIA
+						</p>
+					</li>
+				</ul>
+			</section>
+
+			<section class="shelf">
+				<div class="container">
+					<vtex:contentPlaceHolder id="prateleira-01" />
+				</div>
+			</section>
+		</main>
+
+		<footer>
+			<vtex:template id="bernardo-footer-newsletter" />
+			<vtex:template id="bernardo-footer-links" />
+			<vtex:template id="bernardo-footer" />
+		</footer>
+		<vtex:template id="bernardo-loads-footer" />
+	</body>
+</html>

src/template-pagina/sub-templates/bernardo-footer-links.html

@@ -0,0 +1,87 @@
+<section class="footer-links">
+	<div class="footer-links__wrapper">
+		<div class="footer-links__block">
+			<h4 class="footer-links__title">DÚVIDAS</h4>
+
+			<ul class="footer-links__items-list" class="footer-links__">
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="institucional/sobre"
+						>Sobre</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a
+						class="footer-links__link"
+						href="institucional/formasdepagamento"
+						>FORMAS DE PAGAMENTO</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="institucional/entregas"
+						>ENTREGA</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a
+						class="footer-links__link"
+						href="institucional/trocaedevolucao"
+						>TROCA E DEVELUÇÃO</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="institucional/seguranca"
+						>SEGURANÇA E PRIVACIDADE</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="institucional/contato"
+						>CONTATO</a
+					>
+				</li>
+			</ul>
+		</div>
+
+		<div class="footer-links__block">
+			<h4 class="footer-links__title">FALE CONOSCO</h4>
+
+			<ul class="footer-links__items-list">
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="tel:11 9999 9999"
+						>SAC: 11 9999 9999</a
+					>
+				</li>
+				<li class="footer-links__item">
+					<a class="footer-links__link" href="mailto:sac@m3.com.br"
+						>sac@m3.com.br</a
+					>
+				</li>
+				<li class="footer-links__item"><u>ATENDIMENTO ONLINE</u></li>
+				<li class="footer-links__item"><span>SEGUNDA A SEXTA</span></li>
+				<li class="footer-links__item"><span>DAS 8h30 AS 18h</span></li>
+			</ul>
+		</div>
+
+		<div class="footer-links__block">
+			<h4 class="footer-links__title">FIQUE LIGADO</h4>
+
+			<ul class="footer-links__items-list footer-links__items-list--social">
+				<li>
+					<a href="#" target="_blank">
+						<i class="sprite sprite-instagram-logo" title="instagram">
+						</i>
+					</a>
+				</li>
+				<li>
+					<a href="#" target="_blank" title="facebook">
+						<i class="sprite sprite-facebook-logo"> </i>
+					</a>
+				</li>
+				<li>
+					<a href="#" target="_blank" title="youtube">
+						<i class="sprite sprite-youtube-logo"> </i>
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</section>

src/template-pagina/sub-templates/bernardo-footer-newsletter.html

@@ -0,0 +1,8 @@
+<section class="footer-newsletter">
+	<div class="footer-newsletter__wrapper">
+		<h3 class="footer-newsletter__title">
+			RECEBA NOVIDADES E DESCONTOS EXCLUSIVOS
+		</h3>
+		<div class="footer-newsletter__form"></div>
+	</div>
+</section>

src/template-pagina/sub-templates/bernardo-footer.html

@@ -0,0 +1,55 @@
+<section class="footer-infos">
+	<div class="footer-infos__labels">
+		<ul class="footer-infos__payment">
+			<li>
+				<i class="sprite sprite-master"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-visa"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-diners"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-elo"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-hipercard"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-pagseguro"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-boleto"></i>
+			</li>
+		</ul>
+
+		<div class="footer-infos__divider"></div>
+
+		<ul class="footer-infos__security">
+			<li>
+				<i class="sprite sprite-google-safe-browser"></i>
+			</li>
+			<li>
+				<i class="sprite sprite-vtex-pci"></i>
+			</li>
+		</ul>
+	</div>
+
+	<div class="footer-infos__company">
+		<p class="footer-infos__copyright">
+			COPYRIGHT © 2020 - LOJA COMÉRCIO ELETRONICO | CNPJ: 000.000.000/0001-00
+		</p>
+
+		<div class="footer-infos__development">
+			<a href="https://vtex.com/" target="_blank" title="VTEX">
+				<i class="sprite sprite-vtex-gray"></i>
+			</a>
+
+			<a href="http://m3ecommerce.com/" target="_blank" title="M3">
+				<span class="footer-infos__developed-by">Developed By</span>
+				<i class="sprite sprite-m3-gray"> </i>
+			</a>
+		</div>
+	</div>
+</section>

src/template-pagina/sub-templates/bernardo-header.html

@@ -0,0 +1,45 @@
+<header class="page-header">
+	<div class="container">
+		<div class="page-header__wrapper">
+			<div class="menu">
+				<button class="menu__button">
+					<i class="sprite sprite-menu-icon"></i>
+				</button>
+
+				<vtex.cmc:menuPrincipal />
+			</div>
+
+			<a href="http://">
+				<img
+					class="page-header__logo"
+					src="/arquivos/m3-bernardo-logo.png"
+					alt="Logo da M3"
+				/>
+			</a>
+
+			<div class="user-items">
+				<div class="user-items__search-box">
+					<vtex.cmc:fullTextSearchBox />
+				</div>
+
+				<a class="user-items__account-link" href="/account">
+					<i class="sprite sprite-user-icon"></i>
+				</a>
+
+				<div class="minicart">
+					<button class="minicart__button">
+						<i class="sprite sprite-bag-icon"></i>
+						<vtex.cmc:AmountItemsInCart />
+					</button>
+
+					<div class="minicart__drawer"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
+</header>

src/template-pagina/sub-templates/bernardo-loads-footer.html

@@ -0,0 +1,11 @@
+<script
+	crossorigin="anonymous"
+	src="https://polyfill.io/v3/polyfill.min.js"
+></script>
+<script
+	src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
+	integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA="
+	crossorigin="anonymous"
+></script>
+
+<script src="/arquivos/bernardo--main-bundle.js" async="async"></script>

src/template-pagina/sub-templates/bernardo-loads-header.html

@@ -0,0 +1,6 @@
+<!--[if lt IE 9]>
+	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+<![endif]-->
+
+<link rel="stylesheet" href="/arquivos/bernardo--main.css" />

src/template-pagina/sub-templates/template-footer-links.html

@@ -1,64 +0,0 @@
-<section class=" footer">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="institucional-info col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 row">
-				<div class="institucional-links col-12 col-md-4 offset-md-0">
-					<h3 class="titulo">Dúvidas</h3>
-					<ul>
-						<li><a href="/institucional/sobre" title="Sobre">Sobre</a></li>
-						<li><a href="/institucional/pagamento" title="Formas de Pagamento">Formas de Pagamento</a></li>
-						<li><a href="/institucional/entrega" title="Entrega">Entrega</a></li>
-						<li><a href="/institucional/troca-devolucao" title="Troca e Devolução">Troca e Devolução</a></li>
-						<li><a href="/institucional/seguranca-privacidade" title="Segurança e Privacidade">Segurança e Privacidade</a></li>
-						<li><a href="/institucional/contato" title="Contato">Contato</a></li>
-					</ul>
-				</div>
-				<div class="contato-sac col-12 col-md-4 offset-md-0">
-					<h3 class="titulo">Fale Conosco</h3>
-					<ul>
-						<li>
-							<span itemprop="faxNumber">
-								<a href="tel:+55 22 00000 00000"><strong>SAC:</strong> 22 00000 0000</a>
-							</span>
-						</li>
-						<li>
-							<span itemprop="email">
-								<a href="mail:contato@contato.com.br">contato@contato.com.br</a>
-							</span>
-						</li>
-						<li>
-							<p>
-								<span>
-									Atendimento Online
-								</span>
-							</p>
-						</li>
-						<li>
-							<p>
-								<strong>
-									Segunda a Sexta
-								</strong>
-								das 8h30 as 18h
-							</p>
-						</li>
-					</ul>
-				</div>
-				<div class="redes-sociais col-12 col-md-4 offset-md-0">
-					<h3 class="titulo">Fique Ligado</h3>
-					<ul>
-						<li>
-							<a href="#" target="_blank" title="Instagram">
-								<i class="sprite sprite-instagram-white"></i>
-							</a>
-						</li>
-						<li>
-							<a href="#" target="_blank" title="Facebook">
-								<i class="sprite sprite-facebook-white"></i>
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-</section>

src/template-pagina/sub-templates/template-footer-newsletter.html

@@ -1,12 +0,0 @@
-<section class="captacao-emails-newsletter container-fluid">
-	<div class="row">
-		<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 row">
-			<div class="col-12">
-				<h3>Receba novidades e <span>descontos <strong>exclusivos</strong></span></h3>
-			</div>
-			<div class="col-12">
-				<div class="news-form"></div>
-			</div>
-		</div>
-	</div>
-</section>

src/template-pagina/sub-templates/template-footer-simples.html

@@ -1,47 +0,0 @@
-<section class=" footer">
-	<div class="selos">
-		<div class="container-fluid">
-			<div class="row">
-				<div class="col-12">
-					<ul class="pagamento">
-						<li><i class="sprite sprite-master"></i></li>
-						<li><i class="sprite sprite-visa"></i></li>
-						<li><i class="sprite sprite-diners"></i></li>
-						<li><i class="sprite sprite-elo"></i></li>
-						<li><i class="sprite sprite-hiper"></i></li>
-						<li><i class="sprite sprite-pagseguro"></i></li>
-						<li><i class="sprite sprite-boleto"></i></li>
-					</ul>
-					<ul class="certificados">
-						<li><i class="sprite sprite-vtex-pci"></i></li>
-						<li><i class="sprite sprite-google-safe-browser"></i></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid razao">
-		<div class="row">
-			<div class="col-12 col-md-6 cnpj">
-				<p>
-					Copyright &#9400; 2019 - Loja Sweeter Comércio Eletrônico | <span>CNPJ: 000.000.000/0001-00</span>
-				</p>
-				<p>
-					Rua 7 de Setembro, 3795 Centro - São Paulo/SP
-				</p>
-			</div>
-			<div class="col-12 col-md-6 desenvolvimento">
-				<a href="#" target="_blank">
-					<i class="sprite sprite-varejo-tech"></i>
-				</a>
-				<a href="#" target="_blank">
-					<i class="sprite sprite-vtex"></i>
-				</a>
-				<a href="https://digitalm3.com.br/" target="_blank">
-					<span>Developed by </span>
-					<i class="sprite sprite-m3"></i>
-				</a>
-			</div>
-		</div>
-	</div>
-</section>

src/template-pagina/sub-templates/template-footer.html

@@ -1,66 +0,0 @@
-<section class="footer">
-	<div class="selos">
-		<div class="container-fluid">
-			<div class="row">
-				<div class="col-12">
-					<ul class="pagamento">
-						<li><i class="sprite sprite-master"></i></li>
-						<li><i class="sprite sprite-visa"></i></li>
-						<li><i class="sprite sprite-diners"></i></li>
-						<li><i class="sprite sprite-elo"></i></li>
-						<li><i class="sprite sprite-hiper"></i></li>
-						<li><i class="sprite sprite-pagseguro"></i></li>
-						<li><i class="sprite sprite-boleto"></i></li>
-					</ul>
-					<ul class="certificados">
-						<li><i class="sprite sprite-vtex-pci"></i></li>
-						<li><i class="sprite sprite-google-safe-browser"></i></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid razao">
-		<div class="row">
-			<div class="col-12 col-md-6 cnpj">
-				<p>
-					Copyright &#9400; 2019 - Loja Sweeter Comércio Eletrônico |
-					<span>CNPJ: 000.000.000/0001-00</span>
-				</p>
-				<p>
-					Rua 7 de Setembro, 3795 Centro - São Paulo/SP
-				</p>
-			</div>
-			<div class="col-12 col-md-6 desenvolvimento">
-				<a href="#" target="_blank">
-					<i class="sprite sprite-vtex"></i>
-				</a>
-				<a href="https://digitalm3.com.br/" target="_blank">
-					<span>Developed by </span>
-					<i class="sprite sprite-m3"></i>
-				</a>
-			</div>
-		</div>
-	</div>
-</section>
-
-<div class="scroll-to-top">
-	<i class="sprite sprite-top"></i>
-</div>
-
-<div class="mobile-bottom-options">
-	<ul>
-		<li class="show-menu">
-			<button class="option" aria-label="Abir menu"></button>
-		</li>
-		<li class="show-search">
-			<button class="option" aria-label="Abrir busca"></button>
-		</li>
-		<li class="show-carrinho">
-			<div class="AmountItemsInCart">
-				<i class="sprite sprite-shopping-bag"></i>
-				<vtex.cmc:AmountItemsInCart />
-			</div>
-		</li>
-	</ul>
-</div>

src/template-pagina/sub-templates/template-header-simples.html

@@ -1,16 +0,0 @@
-<header class="header-simples">
-	<div class="container-fluid">
-		<div class="row  justify-content-between" >
-			<div class="col-12 col-sm-6">
-				<a href="/" class="logo">
-					<img src="/arquivos/template-logo.png" alt="VTEX"/>
-				</a>
-			</div>
-			<div class="col ">
-				<div class="compra-segura">
-					<span><i class="sprite sprite-cadeado"></i>Compra 100% segura</span>
-				</div>
-			</div>
-		</div>
-	</div>
-</header>

src/template-pagina/sub-templates/template-header.html

@@ -1,160 +0,0 @@
-<header class="header">
-	<div class="pink-bar">
-		<div class="container">
-			<div class="row">
-				<div class="col-12">
-					<ul>
-						<li>
-							<a href="#">
-								<i class="sprite sprite-map-pointer-white"></i>
-								Guide Shop
-							</a>
-						</li>
-						<li>
-							<a href="/account">
-								Meus pedidos
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="principal">
-		<div class="container">
-			<div class="row">
-				<div class="col-4 menu-mobile-abrir">
-					<button aria-label="Abrir Menu" id="open-menu-button">
-						<i class="sprite sprite-menu"></i>
-					</button>
-				</div>
-				<div class="col-12 col-md-5 menu-principal">
-					<div class="header-menu-mobile">
-						<p>
-							<i class="sprite sprite-cadeado"></i>
-							<span>Compra 100% segura</span>
-						</p>
-						<button aria-label="Fechar Menu" id="close-menu-button">
-							<span></span>
-						</button>
-						<div class="fullTextSearchBox">
-							<vtex.cmc:fullTextSearchBox />
-						</div>
-					</div>
-					<nav role="navigation">
-						<ul class="itens nav navbar-nav" itemscope="itemscope"
-							itemtype="http://www.schema.org/SiteNavigationElement">
-							<li class="novidades" itemprop="name">
-								<a itemprop="url" class="titulo-departamento highlight"
-									href="/busca/?fq=H:143&#38;O=OrderByReleaseDateDESC" title="novidades">
-									novidades
-								</a>
-							</li>
-							<li class="calcados m3-dropdown" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados" title="calçados">
-									calçados
-								</a>
-								<button class="ver-departamento">Abir departamento</button>
-								<div class="m3-dropdown-menu">
-									<div class="btn-voltar">
-										<button>
-											<i class="sprite sprite-arrow-left"></i>
-											<span>
-												Voltar
-											</span>
-										</button>
-									</div>
-									<div class="container">
-										<div class="links-menu">
-											<ul>
-												<li itemprop="name" class="link-departamento">
-													<a itemprop="url" href="/calcados" title="Calçados">
-														Calçados
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/sapatilha" title="Sapatilha">
-														Sapatilha
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/tenis" title="Tênis">
-														Tênis
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/scarpin" title="Scarpin">
-														Scarpin
-													</a>
-												</li>
-												<li itemprop="name">
-													<a itemprop="url" href="/calcados/bota" title="Bota">
-														Bota
-													</a>
-												</li>
-												<li itemprop="name" class="ver-todos">
-													<a itemprop="url" href="/calcados" title="ver todos">
-														ver todos
-														<i class="sprite sprite-arrow-right"></i>
-													</a>
-												</li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</li>
-							<li class="sapatilha" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados/sapatilha" title="sapatilha">
-									sapatilha
-								</a>
-							</li>
-							<li class="tênis" itemprop="name">
-								<a itemprop="url" class="titulo-departamento" href="/calcados/tenis" title="tênis">
-									tênis
-								</a>
-							</li>
-						</ul>
-					</nav>
-					<div class="footer-menu-mobile">
-						<a href="">
-							<i class="sprite sprite-user-white"></i>
-							<span>Entrar/Meus pedidos</span>
-						</a>
-					</div>
-				</div>
-				<div class="col-4 col-md-2 logo">
-					<a href="/" title="VTEX"><img src="/arquivos/template-logo.png" alt="VTEX" /></a>
-				</div>
-				<div class="col-4 col-md-5 util-links">
-					<div class="busca-desktop">
-						<div class="fullTextSearchBox">
-							<vtex.cmc:fullTextSearchBox />
-						</div>
-					</div>
-					<div class="links-usuario">
-						<a href="/account" title="minha-conta">
-							<i class="sprite sprite-user"></i>
-						</a>
-					</div>
-					<div class="carrinho">
-						<a href="/checkout/#cart">
-							<div class="AmountItemsInCart">
-								<i class="sprite sprite-shopping-bag"></i>
-								<vtex.cmc:AmountItemsInCart />
-							</div>
-						</a>
-						<div class="mini-cart">
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-12 busca-mobile">
-					<div class="fullTextSearchBox">
-						<vtex.cmc:fullTextSearchBox />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</header>

src/template-pagina/sub-templates/template-loads-footer.html

@@ -1,5 +0,0 @@
-<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.1/proxy.min.js"
-	integrity="sha256-aRX3NIXjCxT51wF6s9KHLiFrf5E0n1YzvDLAMzeAVzA=" crossorigin="anonymous"></script>
-
-<script src="/arquivos/template--main-bundle.js" async="async"></script>

src/template-pagina/sub-templates/template-loads-header.html

@@ -1,6 +0,0 @@
-<!--[if lt IE 9]>
-<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-<![endif]-->
-
-<link rel="stylesheet" href="/arquivos/template--main.css" />

src/template-pagina/template-404.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="erro" page-id="404" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-	 <vtex:template id="template-loads-header" />
-</head>
-
-<body >
-
-	<vtex:template id="template-header" />
-
-
-	<main class="pagina-erro erro-404">
-		<div class="col- text-center">
-			<h1>Página não encontrada.</h1>
-			<p>A página que vocês está tentando acessar está indisponível.</p>
-			<a href="/" class="voltar-para-home">voltar</a>
-		</div>
-	</main>
-
-
-
-	<footer >
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>

src/template-pagina/template-500.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="erro" page-id="500" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-	 <vtex:template id="template-loads-header" />
-</head>
-
-<body >
-
-	<vtex:template id="template-header" />
-
-
-	<main class="pagina-erro erro-500">
-		<h1>Algo deu errado.</h1>
-		<p>Sua solicitação não pode ser atendida devido a um erro inesperado.<br/> Tente novamente.</p>
-		<a href="/" class="voltar-para-home">voltar</a>
-	</main>
-
-
-
-	<footer >
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>

src/template-pagina/template-buscavazia.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="erro" page-id="busca-vazia" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:metaTags />
-	 <vtex:template id="template-loads-header" />
-</head>
-
-<body >
-
-	<vtex:template id="template-header" />
-
-	<main class="pagina-erro busca-vazia">
-		<h1>Sua busca por <span class="search-term">""</span> não gerou nenhum resultado.</h1>
-		<p>Verifique os termos buscados e tente novamente.</p>
-		<a href="/" class="voltar-para-home">voltar</a>
-	</main>
-
-	<footer >
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>

src/template-pagina/template-categoria.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="categoria" page-id="categoria" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:metaTags />
-	<vtex:contentPlaceHolder id="htmlSeo" />
-	<title>Template</title>
-
-	<vtex:template id="template-loads-header" />
-</head>
-
-<body>
-
-	<vtex:template id="template-header" />
-	<vtex:template id="template-menu" />
-
-	<main class="categoria">
-		<section class="site-linha">
-			<div class="container">
-				<div class="row">
-					<div class="breadcrumb col-12">
-						<vtex.cmc:breadCrumb />
-					</div>
-					<div class="col-12 col-md-4 col-lg-3">
-						<div class="filtros-categoria ">
-							<div class="topo-filtros">
-								<h3>
-									Filtrar busca
-								</h3>
-								<button aria-label="Fechar Filtros" id="close-filter-button">
-									<span></span>
-								</button>
-							</div>
-							<vtex.cmc:searchNavigator />
-							<button class="clear-filter-btn">
-								Remover filtros
-							</button>
-							<button class="aply-filter-btn">
-								Aplicar filtros
-							</button>
-						</div>
-					</div>
-					<div class="col-12 col-md-8 col-lg-9">
-						<div class="topo-resultado">
-							<vtex.cmc:searchTitle />
-							<div class="opcoes-resultado">
-								<button aria-label="Abrir Filtros" id="open-filter-button">
-									Filtrar
-								</button>
-							</div>
-							<button class="clear-filter-btn">
-								Remover filtros
-							</button>
-						</div>
-						<div class="produtos-da-categoria">
-							<vtex.cmc:searchResult layout="46b0e7f2-15ee-4789-a75e-280e389d2b8f" itemCount="12"
-								columnCount="12" />
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	</main>
-
-
-	<footer>
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>

src/template-pagina/template-elementos-menu.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-	<head>
-		<meta name="page" content="home" page-id="homepage" />
-		<meta charset="utf-8" />
-		<meta http-equiv="x-ua-compatible" content="ie=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	</head>
-	<body>
-		<section>
-			<!-- <div class="produtos-menu">
-				<vtex:contentPlaceHolder id="produtos-menu" />
-			</div> -->
-			<div class="banners-menu">
-				<vtex:contentPlaceHolder id="banners-menu" />
-			</div>
-		</section>
-	</body>
-</html>

src/template-pagina/template-home.html

@@ -1,127 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-
-<head>
-	<meta name="page" content="home" page-id="homepage" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:metaTags />
-	<vtex:contentPlaceHolder id="htmlSeo" />
-	<title>Template</title>
-
-	<vtex:template id="template-loads-header" />
-
-</head>
-
-<body>
-
-	<vtex:template id="template-header" />
-
-	<main class="home">
-
-		<section class="main-gallery">
-			<div class="desktop">
-				<vtex:contentPlaceHolder id="slide-principal" />
-			</div>
-			<div class="mobile">
-				<vtex:contentPlaceHolder id="slide-principal-mobile" />
-			</div>
-		</section>
-
-		<section class="container tipbar">
-			<div class="row">
-				<div class="col-12">
-					<ul>
-						<li>
-							<i class="sprite sprite-credit-card"></i>
-							<p>
-								parcelamento
-								<span>
-									até <strong>10x sem juros</strong>
-								</span>
-							</p>
-						</li>
-						<li>
-							<i class="sprite sprite-truck"></i>
-							<p>
-								frete grátis
-								<span>
-									acima de <strong>R$399,00</strong>
-								</span>
-							</p>
-						</li>
-						<li>
-							<i class="sprite sprite-discount-tag"></i>
-							<p>
-								desconto de
-								<span>
-									<strong>10%off</strong> no boleto
-								</span>
-							</p>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section class="container mosaico-home">
-			<div class="row">
-				<div class="banners-left banner col-12 col-md-4">
-					<vtex:contentPlaceHolder id="banner-01" />
-				</div>
-				<div class="banners-right col-12 col-md-8 row">
-					<div class="banner col-12 col-md-6">
-						<vtex:contentPlaceHolder id="banner-02" />
-					</div>
-					<div class="banner col-12 col-md-6">
-						<vtex:contentPlaceHolder id="banner-03" />
-					</div>
-					<div class="banner col-12">
-						<vtex:contentPlaceHolder id="banner-04" />
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="instagramGallery">
-			<div class="container">
-				<div class="instagramGallery__row">
-					<div class="instagramGallery__photos"></div>
-
-					<div class="instagramGallery__link">
-						<i class="sprite sprite-instagram-black"></i>
-
-						<p>
-							<i>#</i>osqueridinhos
-
-							<a href="#" target="_blank">
-								ver todos <i class="sprite sprite-arrow-right"></i>
-							</a>
-						</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="container mosaico-home-footer">
-			<div class="banner desktop">
-				<vtex:contentPlaceHolder id="banner-05" />
-			</div>
-			<div class="banner mobile">
-				<vtex:contentPlaceHolder id="mobile-banner-05" />
-			</div>
-		</section>
-
-	</main>
-
-	<footer>
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-
-</html>

src/template-pagina/template-institucional.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html
-	xmlns="http://www.w3.org/1999/xhtml"
-	xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
-	lang="pt-br"
->
-	<head>
-		<meta name="page" content="institucional" page-id="institucional" />
-		<meta charset="utf-8" />
-		<meta http-equiv="x-ua-compatible" content="ie=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<vtex:metaTags />
-		<vtex:contentPlaceHolder id="htmlSeo" />
-		<title>Template</title>
-
-		<vtex:template id="template-loads-header" />
-	</head>
-
-	<body>
-		<vtex:template id="template-header" />
-
-		<main class="institucional container">
-			<div class="row">
-				<div class="col-12 breadcrumb">
-					<ul>
-						<li>
-							<a href="/">
-								Home
-							</a>
-						</li>
-						<li>
-							<span>
-								Institucional
-							</span>
-						</li>
-					</ul>
-				</div>
-				<div class="col-12 navegacao">
-					<vtex.cmc:navegacaoInstitucional />
-				</div>
-				<div class="col-12 conteudo">
-					<vtex:contentPlaceHolder id="texto-institucional" />
-				</div>
-			</div>
-		</main>
-
-		<footer>
-			<vtex:template id="template-footer-newsletter" />
-			<vtex:template id="template-footer-links" />
-			<vtex:template id="template-footer" />
-		</footer>
-		<vtex:template id="template-loads-footer" />
-	</body>
-</html>

src/template-pagina/template-login.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-<head>
-	<meta name="page" content="login" page-id="login" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:contentPlaceHolder id="htmlSeo" />
-	<title>Template</title>
-
-
-	<vtex:template id="template-loads-header" />
-</head>
-<body >
-
-
-	<vtex:template id="template-header" />
-
-
-	<main class="login">
-		<section id="login-content" class="container">
-			<vtex.cmc:userLogin/>
-		</section>
-	</main>
-
-
-	<footer >
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<vtex:template id="template-loads-footer" />
-</body>
-</html>

src/template-pagina/template-minha-conta.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="pt-br">
-<head>
-	<meta name="page" content="minhaConta" page-id="minha-conta" />
-	<meta charset="utf-8" />
-	<meta http-equiv="x-ua-compatible" content="ie=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<vtex:contentPlaceHolder id="htmlSeo" />
-	<title>Template</title>
-
-	<vtex:template id="template-loads-header" />
-	<link rel="stylesheet" href="/arquivos/template--user-pages.css" type="text/css" />
-
-</head>
-<body class="minha-conta">
-
-	<vtex:template id="template-header" />
-
-	<section id="account-content" class="container">
-		<div class="row">
-			<div class="col-12">
-				<h1>Minha Conta</h1>
-			</div>
-			<div class="col-12 accountUserProfile">
-				<vtex.cmc:accountUserProfile />
-			</div>
-		</div>
-	</section><!-- #content -->
-
-	<footer>
-		<vtex:template id="template-footer-newsletter" />
-		<vtex:template id="template-footer-links" />
-		<vtex:template id="template-footer" />
-	</footer>
-	<script src="/arquivos/bootstrap.min.js"></script>
-	<vtex:template id="template-loads-footer" />
-</body>
-</html>

src/template-pagina/template-produto.html

@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html
-	xmlns="http://www.w3.org/1999/xhtml"
-	xmlns:vtex="http://www.vtex.com.br/2009/vtex-common"
-	xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce"
-	lang="pt-br"
->
-	<head>
-		<meta name="page" content="produto" page-id="produto-padrao" />
-		<meta charset="utf-8" />
-		<meta http-equiv="x-ua-compatible" content="ie=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<vtex:metaTags />
-		<vtex:contentPlaceHolder id="htmlSeo" />
-		<title>Template</title>
-
-		<vtex:template id="template-loads-header" />
-	</head>
-
-	<body class="produto">
-		<vtex:template id="template-header" />
-
-		<main class="produto">
-			<section class="container">
-				<div class="row">
-					<div class="col-12 breadcrumb">
-						<vtex.cmc:breadCrumb />
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-12 col-lg-7">
-						<div class="product-image">
-							<vtex.cmc:ProductImage />
-						</div>
-					</div>
-					<div class="col-12 col-lg-5">
-						<div class="product-info">
-							<h1 class="nome-produto" itemprop="name">
-								<vtex.cmc:productName />
-							</h1>
-							<div class="product-reference">
-								<span>REF.: </span>
-								<vtex.cmc:productReference />
-							</div>
-							<div class="moduloPreco"></div>
-							<div class="moduloAviseMe"></div>
-							<div class="moduloSkus"></div>
-							<div class="similares"></div>
-							<div class="moduloQuantidade"></div>
-							<div class="moduloBotaoDeCompra"></div>
-
-							<div class="compra-segura">
-								<p>
-									<span>compra segura</span
-									><i class="sprite sprite-cadeado"></i>
-								</p>
-							</div>
-
-							<div class="descricao-produto">
-								<a
-									href="#descricao-completa"
-									title="Descrição do Produto"
-								>
-									<i class="sprite sprite-arrow-down-pink"></i>
-									Descrição do produto
-								</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</section>
-
-			<section class="container">
-				<div class="row prateleira-de-produtos">
-					<div class="col-12">
-						<vtex:contentPlaceHolder id="prateleira-padrao" />
-					</div>
-				</div>
-			</section>
-
-			<section class="container">
-				<div id="descricao-completa" class="row">
-					<div class="col-12">
-						<h2>Descrição</h2>
-
-						<div class="descricao" itemprop="description">
-							<vtex.cmc:ProductDescription />
-						</div>
-					</div>
-				</div>
-			</section>
-		</main>
-		<vtex.cmc:dataLayerProduto />
-		<vtex.cmc:skuJson />
-
-		<footer>
-			<vtex:template id="template-footer-newsletter" />
-			<vtex:template id="template-footer-links" />
-			<vtex:template id="template-footer" />
-		</footer>
-		<vtex:template id="template-loads-footer" />
-	</body>
-</html>

src/template-prateleira/bernardo-prateleira-padrao.html

@@ -16,7 +16,7 @@
 			<!-- $product.DiscountHightLight -->
 		</span>
 	</div>
-	<div class="product-image ">
+	<div class="product-image">
 		<a href="produto.html" title="Titulo do produto">
 			<!-- title=$product.EscapedName -->
 			<div class="foto-principal">
@@ -42,7 +42,7 @@
 	<div class="informacoes">
 		<div class="avaliacao"></div>
 		<div class="nome">
-			Titulo do produto
+			Lorem Ipsum Dolor
 			<!-- $product.EscapedName -->
 		</div>
 	</div>
@@ -52,47 +52,37 @@
 			<div class="antigo">
 				<!-- #if ($product.HasBestPrice) -->
 				<span class="value">
-					R$ 1500000,00
+					R$ 4.350,50
 					<!-- $product.ListPrice -->
 				</span>
 				<!-- #end -->
 			</div>
 			<div class="principal">
 				<span class="value">
-					R$ 1000000,00
+					R$ 3.799,05
 					<!-- $product.BestPrice -->
 				</span>
 			</div>
 			<div class="parcelado">
 				<span class="desconto-parcelado">
-					ou
+					<span class="numero-de-parcelas">10</span>X de
-					<strong>
-						<span class="numero-de-parcelas">1</span>X de
 					<span class="value">
-							R$ 2,50
+						R$ 399,90
 						<!-- $product.BestPrice -->
 					</span>
-					</strong>
+					sem juros
-					no cartão
 				</span>
 			</div>
-			<div class="boleto">
-				<span class="value">
-					R$ 9,50
-					<!-- $product.BestPrice -->
-				</span>
-				à vista no boleto bancário
-			</div>
 		</div>
 		<div class="compra">
 			<span class="btn-compra">
-				<a title="Compre agora" href="produto.html">Compre agora</a>
+				<a title="Compre agora" href="produto.html">COMPRE AGORA</a>
 			</span>
 		</div>
 	</div>
 	<!-- #else -->
-	<div class="indisponivel">
+	<!-- <div class="indisponivel">
-		<span class="erro">Produto indisponível</span>
+		<span class="erro">INDISPONÍVEL</span>
-	</div>
+	</div> -->
 	<!-- #end -->
 </div>

src/template-prateleira/bernardo-prateleira-padrao.vtex.html

@@ -0,0 +1,63 @@
+#set($id = $product.Id) #set($idSku = $product.productVariantId) #set($uri =
+$product.Uri) #set($escapedName = $product.HtmlEscapedName)
+
+<div class="produto-na-prateleira" data-sku-id="$id">
+	<div class="flags-product">
+		<span class="HightLight"> $product.HightLight </span>
+		<span class="DiscountHightLight"> $product.DiscountHightLight </span>
+	</div>
+	<div class="product-image">
+		<a href="$uri" title="$escapedName">
+			<div class="foto-principal">
+				<div class="lazyload__sibling"></div>
+				<div class="lazyload" data-noscript="">
+					<noscript> $product.GetImageTag(2) </noscript>
+				</div>
+			</div>
+			<div class="foto-secundaria">
+				<div class="lazyload__sibling"></div>
+				<div class="lazyload" data-noscript="">
+					<noscript> $product.GetImageTag(2,"ultima") </noscript>
+				</div>
+			</div>
+		</a>
+	</div>
+	<div class="informacoes">
+		<div class="avaliacao"></div>
+		<div class="nome">$escapedName</div>
+	</div>
+	#if ($product.IsInStock)
+	<div class="disponivel">
+		<div class="price">
+			<div class="antigo">
+				#if ($product.HasBestPrice)
+				<span class="value"> $product.ListPrice </span>
+				#end
+			</div>
+			<div class="principal">
+				<span class="value"> $product.BestPrice </span>
+			</div>
+			#if($product.NumbersOfInstallment > 1)
+			<div class="parcelado">
+				<span class="desconto-parcelado">
+					<span class="numero-de-parcelas"
+						>$product.NumbersOfInstallment</span
+					>X de
+					<span class="value"> $product.InstallmentValue </span>
+					sem juros
+				</span>
+			</div>
+			#end
+		</div>
+		<div class="compra">
+			<span class="btn-compra">
+				<a title="Compre agora" href="$uri">COMPRE AGORA</a>
+			</span>
+		</div>
+	</div>
+	#else
+	<div class="indisponivel">
+		<span class="erro">INDISPONÍVEL</span>
+	</div>
+	#end
+</div>

src/template-prateleira/prateleira-padrao.vtex.html

@@ -1,84 +0,0 @@
-#set($id = $product.Id)
-#set($idSku = $product.productVariantId)
-#set($uri = $product.Uri)
-#set($escapedName = $product.HtmlEscapedName)
-
-
-<div class="produto-na-prateleira" data-sku-id="$id">
-	<div class="flags-product">
-		<span class="HightLight">
-			$product.HightLight
-		</span>
-		<span class="DiscountHightLight">
-			 $product.DiscountHightLight
-		</span>
-	</div>
-	<div class="product-image ">
-		<a href="$uri" title=$escapedName>
-
-			<div class="foto-principal" >
-				<div class="lazyload__sibling"></div>
-				<div class="lazyload" data-noscript="">
-					<noscript>
-						$product.GetImageTag(2)
-					</noscript>
-				</div>
-			</div>
-			<div class="foto-secundaria" >
-				<div class="lazyload__sibling"></div>
-				<div class="lazyload" data-noscript="">
-					<noscript>
-						$product.GetImageTag(2,"ultima")
-					</noscript>
-				</div>
-			</div>
-		</a>
-	</div>
-	<div class="informacoes">
-		<div class="avaliacao"></div>
-		<div class="nome">
-			$escapedName
-		</div>
-	</div>
-	 #if ($product.IsInStock)
-	<div class="disponivel">
-		<div class="price">
-			<div class="antigo">
-			#if ($product.HasBestPrice)
-				<span class="value">
-					$product.ListPrice
-				</span>
-			#end
-			</div>
-			<div class="principal">
-				<span class="value">
-				$product.BestPrice
-				</span>
-			</div>
-			#if($product.NumbersOfInstallment > 1)
-			<div class="parcelado">
-				<span class="desconto-parcelado">
-					ou
-					<strong>
-						<span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de
-						<span class="value">
-							$product.InstallmentValue
-						</span>
-					</strong>
-					no cartão
-				</span>
-			</div>
-			#end
-		</div>
-		<div class="compra">
-			<span class="btn-compra">
-				<a title="Compre agora" href="$uri">Compre agora</a>
-			</span>
-		</div>
-	</div>
-	#else
-	<div class="indisponivel">
-		<span class="erro">Produto indisponível</span>
-	</div>
-	#end
-</div>