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 {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-
-		&__search-box {
-			flex: 1;
-			max-width: 212px;
-			@include mq(md, max) {
-				display: none;
-			}
+		@include mq(lg, max) {
+			max-width: 66px;
 		}
 	}
 
@@ -31,8 +29,6 @@
 		display: flex;
 		align-items: center;
 		margin: 0;
-		padding: 8px 0;
-		border-bottom: 1px solid $white-500;
 
 		legend,
 		label,
@@ -66,6 +62,25 @@
 		}
 	}
 
+	.user-items {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		&__search-box {
+			flex: 1;
+			max-width: 212px;
+
+			@include mq(lg, max) {
+				display: none;
+			}
+
+			.busca {
+				padding: 8px 0;
+				border-bottom: 1px solid $white-500;
+			}
+		}
+
 		&__account-link {
 			display: flex;
 			align-items: center;
@@ -76,6 +91,16 @@
 				height: 19px;
 				margin: 0 24px;
 				background: $white-500;
+
+				@include mq(lg, max) {
+					margin: 0 16px;
+				}
+			}
+
+			&::before {
+				@include mq(lg, max) {
+					display: none;
+				}
 			}
 		}
 
@@ -117,4 +142,18 @@
 				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 {
+	&__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">
+				<button class="menu__button">
 					<i class="sprite sprite-menu-icon"></i>
 				</button>
 
 				<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>