Cria o header mobile

src/arquivos/sass/partials/_header.scss

@@ -2,28 +2,26 @@
 	padding: 28px 0;
 	background-color: $black-500;
 
+	@include mq(lg, max) {
+		padding: 18px 0 0;
+	}
+
 	&__wrapper {
 		display: grid;
 		grid-template-columns: 2fr 1fr 2fr;
 		align-items: center;
+
+		@include mq(lg, max) {
+			grid-template-columns: repeat(3, 1fr);
+		}
 	}
 
 	&__logo {
 		display: block;
 		margin: 0 auto;
-	}
 
-	.user-items {
+		@include mq(lg, max) {
-		display: flex;
+			max-width: 66px;
-		align-items: center;
-		justify-content: flex-end;
-
-		&__search-box {
-			flex: 1;
-			max-width: 212px;
-			@include mq(md, max) {
-				display: none;
-			}
 		}
 	}
 
@@ -31,8 +29,6 @@
 		display: flex;
 		align-items: center;
 		margin: 0;
-		padding: 8px 0;
-		border-bottom: 1px solid $white-500;
 
 		legend,
 		label,
@@ -66,55 +62,98 @@
 		}
 	}
 
-	&__account-link {
+	.user-items {
 		display: flex;
 		align-items: center;
-		&::before,
+		justify-content: flex-end;
-		&::after {
-			content: "";
-			width: 1px;
-			height: 19px;
-			margin: 0 24px;
-			background: $white-500;
-		}
-	}
 
-	&__minicart-button {
+		&__search-box {
-		position: relative;
+			flex: 1;
-		padding: 0;
+			max-width: 212px;
-		border: 0;
+
-		outline: 0;
+			@include mq(lg, max) {
-		background: transparent;
-		.portal-totalizers-ref {
-			.title,
-			.amount-products,
-			.amount-items strong,
-			.amount-kits,
-			.total-cart {
 				display: none;
 			}
+
+			.busca {
+				padding: 8px 0;
+				border-bottom: 1px solid $white-500;
+			}
 		}
 
-		.cart-info {
+		&__account-link {
-			margin: 0;
-		}
-
-		.amount-items-em {
 			display: flex;
 			align-items: center;
-			justify-content: center;
+			&::before,
-			position: absolute;
+			&::after {
-			top: 4px;
+				content: "";
-			right: -4px;
+				width: 1px;
-			width: 15px;
+				height: 19px;
-			height: 15px;
+				margin: 0 24px;
-			border-radius: 50%;
+				background: $white-500;
-			line-height: 11px;
+
-			font-size: 9px;
+				@include mq(lg, max) {
-			font-weight: bold;
+					margin: 0 16px;
-			font-style: normal;
+				}
-			color: $white-500;
+			}
-			background: $blue-500;
+
+			&::before {
+				@include mq(lg, max) {
+					display: none;
+				}
+			}
+		}
+
+		&__minicart-button {
+			position: relative;
+			padding: 0;
+			border: 0;
+			outline: 0;
+			background: transparent;
+			.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;
+				width: 15px;
+				height: 15px;
+				border-radius: 50%;
+				line-height: 11px;
+				font-size: 9px;
+				font-weight: bold;
+				font-style: normal;
+				color: $white-500;
+				background: $blue-500;
+			}
 		}
 	}
+
+	&__search-box {
+		margin-top: 18px;
+		border-top: 1px solid $gray-500;
+
+		@include mq(lg, min) {
+			display: none;
+		}
+	}
+
+	.busca {
+		padding: 13px 0;
+	}
 }

src/arquivos/sass/partials/_menu.scss

@@ -1,3 +1,16 @@
-.main-menu {
+.menu {
-	display: none;
+	&__button {
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+
+		@include mq(lg, min) {
+			display: none;
+		}
+	}
+
+	.main-menu {
+		display: none;
+	}
 }

src/arquivos/sass/utils/_variaveis.scss

@@ -12,6 +12,7 @@ $font-height: 1.5;
 $black-500: #000000;
 $white-500: #ffffff;
 $blue-500: #00c8ff;
+$gray-500: #333333;
 
 // Grid breakpoints
 

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

@@ -1,11 +1,13 @@
 <header class="page-header">
 	<div class="container">
 		<div class="page-header__wrapper">
-			<button class="page-header__menu-button">
+			<div class="menu">
-				<i class="sprite sprite-menu-icon"></i>
+				<button class="menu__button">
-			</button>
+					<i class="sprite sprite-menu-icon"></i>
+				</button>
 
-			<nav class="main-menu"></nav>
+				<nav class="main-menu"></nav>
+			</div>
 
 			<a href="/">
 				<img
@@ -31,4 +33,10 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
 </header>