.template-index .content-for-layout {
    margin-top: -124px;
}

.template-customiser-app #MainContent {
	z-index: 0;
}

#shopify-section-header {

	.header {

		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 0;
		position: relative;

		@media only screen and (max-width: 990px) {
			padding-bottom: 10px;
			position: relative;
		}

		.device-menu-trigger {
			display: none;
			order: -1;
			@media only screen and (max-width: 990px) {
				display: flex;
				align-items: center;
				gap: 10px;
				cursor: pointer;
				svg {
					width: 16px;
					height: 20px;
					object-fit: contain;
				}
			}

			.icon.icon-close {
				display: none;
			}
		}

		.header__search {
			order: -1;
		}

		.header__heading-link {
			flex: 1;
			position: absolute;
		    left: 50%;
		    top: 20px;
		    transform: translate(-50%, 0);

			@media only screen and (max-width: 990px) {
			    top: 50%;
			    transform: translate(-50%, -50%);
			    padding: 0;
			}

			.main-logo {
				margin: 0 auto;
				text-align: center;
			}

			/*.header__heading-link {
				margin: 0 auto;
				display: block;
				
			}*/
		}

		.header--main-menu {

			width: 100%;

			@media only screen and (max-width: 990px) {
				position: fixed;
				top: 60px;
				left: 0;
				width: 400px;
				height: calc(100vh - 60px);
				background: #fff;
				transform: translate(-400px,0);
				transition: .4s all;
				border-top: 1px solid #EBEBEB;
				overflow-x: hidden;
				overflow-y: auto;
				@media only screen and (max-width: 768px) {
					width: 100%;
					transform: translate(-100%,0);
				}
			}

			.search-panel {

				display: none;

				@media only screen and (max-width: 990px) {
					display: block;
					.search__input.field__input {
						padding: 14px 32px 14px 62px;
					}
					.field__button {
						left: 32px;
						top: 7px;
					}
				}

			}

			.primary-nav {

				display: flex;
				justify-content: space-evenly;
				position: relative;

				@media only screen and (max-width: 990px) {
					flex-direction: column;
					justify-content: flex-start;
					height: -webkit-fill-available;
				}

				.eb_rewards_device {

					display: none;

					@media only screen and (max-width: 990px) {
						display: flex;
						justify-content: space-between;
						align-items: center;
						a {
							display: flex;
							align-items: center;
							color: var(--color-rewards);
							padding: 14px 32px;
							gap: 6px;
						}
						.wishlist-icon {
							svg {
								color: #000;
								width: 20px;
								height: unset;
							}
						}
					}

				}

				.primary-link--container {

					padding: 10px 0 20px 0;

					@media only screen and (max-width: 990px) {
						padding:0;
						&.active {
							.mm-container {
								opacity: 1;
								pointer-events: auto;
							}
						}
					}

					.primary-link {
						font-size: 13px;
						text-transform: uppercase;
						white-space: nowrap;
						position: relative;
						letter-spacing: 0.6px;
						transition: .3s all;

						@media only screen and (max-width: 990px) {
							padding: 14px 52px 14px 32px;
							border-bottom: 1px solid #EBEBEB;
							display: block;
							position: relative;
							&::after {
								content:'';
								position: absolute;
								top: 50%;
								right: 30px;
								transform: translate(0,-50%);
								width:10px;
								height: 10px;
								background: url('icon-chev-right.svg') no-repeat center center / contain;
							}
						}

						@media only screen and (min-width: 990px) {
							&::before {
								content:'';
								position: absolute;
								bottom:-2px;
								left:0;
								width: 0;
								height: 1px;
								background: #976766;
								transition: .3s width;
							}
						}

						&.is_sale {
							
						}
					}

					/* Start MM block */

					.mm-container {

						position: absolute;
						top: 100%;
						left:50%;
						width: 100vw;
						transform: translate(-50%, 0);
						min-height: 400px;
						background: #fff;
						opacity: 0;
						pointer-events: none;
						transition: .3s all;
/*						overflow: auto;*/

						@media only screen and (max-width: 990px) {

							top:0;
							left:0;
							transform: translate(0, 0);
							width: 100%;
							height: -webkit-fill-available;
							min-height: unset;
							background: #fff;
							z-index: 2;

							.page-width {
								padding:0;
							}

						}

						.mm-flex {

							display: flex;
							justify-content: center;
							align-items: flex-start;
							padding: 24px 45px;
							gap: 32px;

							@media only screen and (max-width: 990px) {
								gap: 0;
								padding:0;
								flex-direction: column;
								justify-content: flex-start;
/*								height: calc(100vh - 98px);*/
								overflow: auto;
							}

							.back-state {

								display: none;

								@media only screen and (max-width: 990px) {

									display: block;
									position: relative;
									font-size: 13px;
									font-weight: 500;
									text-align: right;
                                    padding: 14px 32px;
                                    border-bottom: 1px solid #EBEBEB;
                                    cursor: pointer;
                                    width: 100%;

									&::after {
										content:'';
										position: absolute;
										top: 50%;
										left: 30px;
										transform: translate(0,-50%) rotate(180deg);
										width:10px;
										height: 10px;
										background: url('icon-chev-right.svg') no-repeat center center / contain;
									}

								}

							}

							.device-step-title {

								display: none;

								@media only screen and (max-width: 990px) {
									display: block;
									font-size: 13px;
									padding: 14px 32px;
									border-bottom: 1px solid #EBEBEB;
									background: #F6F6F6;
									text-transform: uppercase;
									width: 100%;
								}

							}

							.col {

								width: 18%;

								@media only screen and (max-width: 990px) {
									width: 100%;
								}

								ul {

									@media only screen and (max-width: 990px) {
										display: none;
									}

									li {

										&.back-state,
										&.tier-three-device-title {
											display: none;
										}

										&.tier-three-device-title {
											font-size: 13px;
											padding: 14px 32px;
											border-bottom: 1px solid #EBEBEB;
											background: #F6F6F6;
											text-transform: uppercase;
										}

										a {
											font-size: 13px;
											display: inline-block;
											margin:0 0 10px 0;
											letter-spacing: 0.4px;
											position: relative;
											transition: .3s all;
											&::before {
												content:'';
												position: absolute;
												bottom:-2px;
												left:0;
												width: 0;
												height: 1px;
												background: #976766;
												transition: .3s width;
											}
											@media only screen and (min-width: 990px) {
												&:hover {
													color: #976766;
													&::before {
														width: 100%;
													}
												}
											}
										}

									}

								}

								.menu_title {
									font-size: 14px;
									text-transform: uppercase;
									margin: 0 0 24px 0;
									letter-spacing: 0;
									border-bottom: 1px solid #F8F8F8;
									@media only screen and (max-width: 990px) {
										margin:0;
										font-size: 13px;
										padding: 14px 52px 14px 32px;
										position: relative;
										border-bottom: 1px solid #EBEBEB;
										&::after {
											content:'';
											position: absolute;
											top: 50%;
											right: 30px;
											transform: translate(0,-50%);
											width:10px;
											height: 10px;
											background: url('icon-chev-right.svg') no-repeat center center / contain;
										}
									}
								}

								&.featured {
									ul {
										@media only screen and (max-width: 990px) {
											display: block;
										}
										li {
											a {
												margin-bottom: 16px;
												border: none;
												@media only screen and (max-width: 990px) {
													margin:0;
													display: block;
													border-bottom: 1px solid #EBEBEB;
												}
											}
										}
									}
								}

								&.promo-card {

									position: relative;
									width: 26%;
									overflow: hidden;
									border-radius: 6px;

									@media only screen and (max-width: 990px) {
										width: 100%;
										padding: 32px 32px 100px 32px;
										border-radius: 0;
									}

									a {
										display: block;
										position: relative;
										@media only screen and (max-width: 990px) {
											overflow: hidden;
											border-radius: 6px;
										}
									}

									.img-wrapper {

										overflow: hidden;

										img {
											width: 100%;
											height: unset;
											display: block;
											aspect-ratio: 5 / 6;
		                                    object-fit: cover;
		                                    transition: .8s all;
										}

									}

									.promo-card--text {

										text-align: center;
										letter-spacing: 0;
										position: absolute;
	                                    left: 0;
	                                    bottom: -60px;
	                                    width: 100%;
	                                    transition: .4s all;
/*	                                    border-radius: 0 0 6px 6px;*/
	                                    padding: 30px 0;
	                                    background: #000;
										background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

	                                    @media only screen and (max-width: 990px) {
	                                    	bottom: 0;
	                                    }

										span {

											color: #fff;
											display: block;
											text-transform: uppercase;
											font-weight: 500;
											font-size: 20px;

											&.promo-card--reveal {

												font-size: 13px;
												text-decoration: underline;
												margin-top: 16px;

											}

										}

									}

									&:hover {

										@media only screen and (min-width: 990px) {

											.img-wrapper {

												img {
													transform: scale(1.03);
												}

											}

											.promo-card--text {
												
											}

										
											.promo-card--text {
												bottom: 0;
											}

										}

									}

								}

								&.active {

									.tier-three {
										display: block;
										top:0;
										left:0;
										transform: translate(0, 0);
										width: 100%;
										height: -webkit-fill-available;
										min-height: unset;
										background: #fff;
										z-index: 2;
										position: absolute;
										height: calc(100vh - 114px);
										overflow: auto;
										padding-bottom: 90px;

										li {
											&.back-state,
											&.tier-three-device-title {
												display: block;
											}
											a {
												font-size: 13px;
												padding: 14px 32px;
												border-bottom: 1px solid #EBEBEB;
												display: block;
												margin: 0;
											}
										}

									}

								}

							}

						}

					}

					&:hover {

						@media only screen and (min-width: 990px) {
							.primary-link {
								color: #976766;
								&::before {
									width: 100%;
								}
							}

							.mm-container {
								opacity: 1;
								pointer-events: auto;
							}
						}

					}

				}

			}

		}

	}

	@media only screen and (max-width: 990px) {
		&.menu-expanded {

			.header {

				.header--main-menu {

					transform: translate(0,0);

				}

				.device-menu-trigger {
					.icon.icon-close {
						display: block;
					}
					.icon.icon-hamburger {
						display: none;
					}
				}

			}

		}
	}

}

body.template-index {

	.header {
		.device-menu-trigger {
			@media only screen and (max-width: 990px) {
				svg {
					filter: invert(1);
				}
			}
		}
	    .header--main-menu {
	        .primary-nav {
	            .primary-link--container {
	            	.primary-link {
	            		color: #fff;
	            	}
	            }
	        }
	    }
	}

	#shopify-section-header.header-hover,
	#shopify-section-header.shopify-section-header-sticky {

		.header {
			.header--main-menu {
				@media only screen and (max-width: 990px) {
					height: calc(100vh - 60px);
					overflow-y: auto;
					overflow-x: hidden;
				}
			}
			.device-menu-trigger {
				@media only screen and (max-width: 990px) {
					svg {
						filter: invert(0);
					}
				}
			}
		    .header--main-menu {
		        .primary-nav {
		            .primary-link--container {
		            	.primary-link {
		            		color: #000;
		            	}
		            	@media only screen and (min-width: 990px) {
			            	&:hover {
			            		.primary-link {
			            			color: #976766;
			            		}
			            	}
			            }
		            }
		        }
		    }
		}
	}

}

#shopify-section-header.menu-expanded {

	@media only screen and (max-width: 990px) {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}

}