.header--mobile{
	display: none;
}

.header--mobile{
	padding: 0 15px 0px 15px;
	justify-content: space-between;
	box-shadow: var(--box-shadow);
	position: sticky;
    top: 0;
    z-index: 1000;
	background-color: #ffffff;
}

@media screen and (max-width: 1199px){
	.header--desktop,
	.header-primary__bottom{
		display: none;
	}
	.header--mobile{
		display: flex;
	}
}

/* Mobile menu icon */
.mobile-menu-icon{
	display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 15px;
    margin-left: -15px;
    line-height: 1;
    position: relative;
    height: 100%;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.mobile-menu-icon:before{
	content: '';
	display: inline-block;
	-webkit-mask-image: url('../../../icons/menu-outline.svg');
	mask-image: url('../../../icons/menu-outline.svg');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: var(--color-text);
    width: 30px;
    height: 30px;
}

@media screen and (max-width: 480px){
	.mobile-menu-icon{
		padding: 15px 10px;
	}
}

/* Mobile menu wrapper */
.mobile-menu{
	position: fixed;
    z-index: 2000;
    width: 360px;
	max-width: 100%;
    height: 100%;
    background-color: #FFF;
    top: var(--admin-bar);
	padding: 55px 15px 0;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	right: 0;
    transform: translateX(100%);
}

.mobile-menu.open{
	visibility: visible;
	opacity: 1;
	transform: none;
}

.mobile-menu-close{
	position: absolute;
	left: 12px;
    top: 10px;
    width: 24px;
    height: 24px;
	-webkit-mask-image: url('../../../icons/close-outline.svg');
	mask-image: url('../../../icons/close-outline.svg');
	background-color: var(--color-text);
	cursor: pointer;
}

.mobile-menu-container{
	overflow-x: hidden;
	overflow-y: auto;
	flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mobile-menu-container > p{
	margin: 0;
}

/* Mobile menu items */
.menu-mobile-menu-container{
	border-block: var(--border);
    padding-block: 12px;
    margin-bottom: 16px;
}

.mobile-menu .menu-header-menu-container{
	margin: 25px 0 30px;
}

.mobile-menu .menu-item a{
    padding: 8px 0;
    display: block;
    width: 100%;
    position: relative;
}

.mobile-menu .menu-item,
.mobile-menu .menu-breadcrumbs{
	font-weight: 700;
}

.mobile-menu .menu-breadcrumbs{
	padding-bottom: 10px;
	display: block;
}

.mobile-menu .menu-back{
	display: flex;
	align-items: center;
	text-transform: uppercase;
	margin-bottom: 30px;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--color-secondary);
}

.mobile-menu .menu-back::before{
	content: '';
	display: block;
	width: 14px;
    height: 14px;
	flex-shrink: 0;
	-webkit-mask-image: url('../../../icons/chevron-back-outline.svg');
	mask-image: url('../../../icons/chevron-back-outline.svg');
	background-color: currentColor;
	margin-right: 10px;
}

.mobile-menu .menu-item.menu-item-has-children{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu .menu-item.menu-item-has-children a::after{
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	width: 14px;
    height: 14px;
	flex-shrink: 0;
	-webkit-mask-image: url('../../../icons/chevron-forward-outline.svg');
	mask-image: url('../../../icons/chevron-forward-outline.svg');
	background-color: currentColor;
}

/* Mobile Menu header tools */
.mobile-menu .header-tools{
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
}
.mobile-menu .header-tools a:not(.sw-cart-icon){
	flex-direction: row;
	padding-inline: 0;
	padding-block: 12px;
	border: none;
}

/* .mobile-menu__header-tools{
	display: flex;
    flex-direction: column;
	margin-top: auto;
	border-bottom: var(--border);
    padding-bottom: 8px;
}

.mobile-menu__header-tools.header-tools a{
	padding-block: 12px;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-inline: 0;
} */

/* Mobile Menu Socials */
.mobile-menu .wp-block-social-links{
	order: 1;
	justify-content: space-between;
	text-transform: uppercase;
    letter-spacing: 0.06rem;
}

@media screen and (min-width: 320px){
	.mobile-menu .wp-block-social-links{
		flex-wrap: nowrap;
	}
}