/* -------------------------------------------

	1. Header
        1-1. Header Style
		1-2. Responsive & Animation Keyframe
		1-3. Header Position
    2. Header Builder Widgets
        2-1. Header Builder Widgets Normal Style
            2-1-1. Header Builder Normal Style
            2-1-2. Products List (Offcanvas, Dropdown)
        2-2. Account
        2-3. Compare
        2-4. Wishlist
        2-5. Cart
		2-6. Language Switcher & Currency Switcher
		2-7. Mobile Menu Toggler
		
---------------------------------------------- */

// 1. Header
// 1-1. Header Style
header {
	.account i,
	.offcanvas-open i,
	.contact i {
		font-size: 1.9286em;
	}
	.offcanvas-open {
		display: flex;
		align-items: center;
	}
}

.default-header {
	padding-top: 2rem;
	padding-bottom: 2rem;
	.logo {
		width: 13.5rem;
	}
	.menu > .menu-item-has-children > a:after {
		#{$right}: -.5rem;
	}
}
.mobile-menu-toggle {
	display: block;
	line-height: 1;
	color: var(--alpha-change-color-dark-1);
	transition: color .3s, background-color .3s;
	
	i {
		font-size: 2.7rem;
	}
}
.custom-header {
	a.logo {
		margin: 0;
	}
	
    .elementor-widget {
        width: auto;
        
        > .elementor-widget-container {
            margin-#{$right}: 2rem;
        }
        &:last-child>.elementor-widget-container {
			margin-#{$right}: 0;
        }
    }

    .dropdown-menu .elementor-widget {
        width: 100%;

        &:not(:last-child)>.elementor-widget-container {
            margin: 0;
        }
	}
	
	.elementor-top-section {
		.elementor-section,
		.sticky-content-wrapper {
			width: 100%;
		}
	}
}

.absolute-header {
	position: absolute;
	width: 100%;
	#{$left}: 0;
	top: 0;
	z-index: 1040;
}
header .block-type {
	flex-direction: column;

	i + span {
		margin: 3px 0 0;
	}
}
.logo {
	display: block;
}
i {
	position: relative;
}

// 1-2. Responsive & Animation Keyframe
@include mq(lg, max) {
	.header {
		.account .block-type,
		.wishlist,
		.compare-open,
		.dropdown .cart-toggle {
			> .cart-label {
				display: none;
			}

			i {
				margin-bottom: 0;
			}
		}
		.dropdown > .cart-toggle > .cart-label + i {
			margin-bottom: 0;
		}
	}
	.sticky-wrapper {
		height: auto !important;
	}
	.mobile-links .menu>.menu-item-has-children>a:after {
		position: static;
	}
	.mobile-links .menu ul li {
		padding: 0;
	}
	body .dropdown.mobile-links {
		li {
			margin-#{$right}: 0;

			> a {
				display: block;
				padding: .8rem 2rem;
			}
		}

		.menu {
			display: block;
		}

		li:hover > a {
			color: var(--alpha-primary-color);
		}
	}
	.dropdown.mobile-links {
		display: inline-block;
	}
	.mobile-links .dp-left {
		#{$left}: 0;
		#{$right}: auto;
	}
}

// Responsive Links Group
@include mq(lg) {
	.dropdown.mobile-links {
		&::after {
			content: none;
		}
		> a {
			display: none;
		}
		.dropdown-box {
			position: static;
			visibility: visible;
			opacity: 1;
			background-color: transparent;
			box-shadow: none;
			border: 0;
			padding: 9px 0;
			transform: none;
			color: inherit;

			> li {
				margin-#{$right}: 1.95rem;
				&:last-child {
					margin-#{$right}: 0;
				}
			}
		}
	}
}

// Welcome message animation.
@include mq(xs, max) {
	.welcome-msg {
		white-space: nowrap;
		transform: translateX(0);
		animation: 6s linear 2s 1 show_msg_first, 12s linear 8s infinite show_msg;
	}
}
@keyframes show_msg_first { 
	from { transform: translateX(0%); }
	to { transform: translateX(if-ltr(-100%, 100%)); }
}
@keyframes show_msg { 
	from { transform: translateX(if-ltr(100%, -100%)); }
	to { transform: translateX(if-ltr(-100%, 100%)); }
}

// 1-3. Header Position
.side-header {
	.header {
		width: 100%;
		z-index: 10;

		.sticky-content .elementor-container {
			width: 100%;
		}
		
		.elementor-column .elementor-widget-wrap {
			display: block;
		}
	}

	.header-area {
		position: relative;
		flex: 0 0 var(--alpha-side-header-width, 312px);
		max-width: var(--alpha-side-header-width, 312px);
	}
	.content-area {
		flex: 0 0 calc(100% - var(--alpha-side-header-width, 312px));
		max-width: calc(100% - var(--alpha-side-header-width, 312px));
	}
	.page-wrapper {
		flex-flow: row;
	}
}
.side-on-desktop {
	@include mq(lg, max) {
		.header-area,
		.content-area {
			flex: 0 0 100%;
			max-width: 100%;
		}
		.page-wrapper {
			flex-flow: column;
		}
		.header {
			.elementor-column .elementor-widget-wrap {
				display: flex;
			}
		}
	}
}
.side-on-tablet {
	@include mq(md, max) {
		.header-area,
		.content-area {
			flex: 0 0 100%;
			max-width: 100%;
		}
		.page-wrapper {
			flex-flow: column;
		}
		.header {
			.elementor-column .elementor-widget-wrap {
				display: flex;
			}
		}
	}
}
.side-on-mobile {
	@include mq(sm, max) {
		.header-area,
		.content-area {
			flex: 0 0 100%;
			max-width: 100%;
		}
		.page-wrapper {
			flex-flow: column;
		}
		.header {
			.elementor-column .elementor-widget-wrap {
				display: flex;
			}
		}
	}
}

// 2. Header Builder Widgets
// 2-1. Header Builder Widgets Normal Style
// 2-1-1. Header Builder Normal Style
.account, .login {
	display: flex;
	align-items: center;
}
.login, .offcanvas-open.inline-type {
	i + span,
	span + i {
		margin-#{$left}: 9px;
	}
}
.account .login, .account .register, .offcanvas-open {
	&:hover {
		color: var(--alpha-primary-color);
	}
}
.badge-type {
	i + span {
		margin-#{$left}: 0;
		margin-top: 10px;
	}
}
.header .wish-count,
.header .compare-count,
.cart-dropdown.badge-type .cart-count {
	position: absolute;
	#{$left}: 100%;
	top: 5px;
	width: 1.72em;
	height: 1.72em;
	z-index: 1;
	font-family: var(--alpha-body-font-family);
	font-size: 1.1rem;
	line-height: 1.72em;
	border-radius: 50%;
	background-color: var(--alpha-primary-color);
	color:  #fff;
	transform: translate(if-ltr(-50%, 50%), -50%);
	text-align: center;
}

// 2-2. Products List (Offcanvas, Dropdown)
.mini-basket-box {
	&:not(.cart-dropdown) > a {
		line-height: inherit;
	}
	> a::after {
		content: none;
	}
	.dropdown-box {
		padding: 1rem 3rem 3rem;
		min-width: 34rem;
	}
	&.offcanvas .offcanvas-content {
		padding: 2.9rem 3rem;
	}
	.mini-list {
		max-height: 33rem;
		margin: 0;
		padding-#{$left}: 0;
		padding-#{$right}: 5px;
		list-style: none;
		overflow-y: scroll;
		overflow-x: hidden;
		text-transform: capitalize;			

		+ .buttons {
			margin-top: 1rem;
			margin-bottom: 0;
			border-top: 1px solid var(--alpha-change-border-color-light);
			padding-top: 20px;
		}
	}
	.mini-item {
		display: flex;
		position: relative;
		align-items: center;
		padding: 1rem 0;
		a {
			padding: 0;
		}
		> a:nth-child(2) {
			flex: 0 0 8rem;
			max-width: 8rem;
			padding: 0;
			img {
				width: 100%;
				object-fit: cover;
			}
		}
		.remove {
			position: absolute;
			top: 0;
			#{$right}: -1rem;
			width: 2rem;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			border-radius: 50%;
			font-size: 0.8572em;
			color: var(--alpha-change-color-dark-1);
			background: var(--alpha-change-color-light-1);
			transition: color 0.4s,border 0.4s;
			box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.15);
			z-index: 3;
			i {
				width: 100%;
			}

			&:hover {
				color: var(--alpha-primary-color);
			}
		}
		span.quantity {
			display: flex;
			align-items: center;
			line-height: 1;
			border: none;
			font-size: 1.14286em;
			height: auto;
			color: var(--alpha-change-color-dark-1);

			.times {
				margin-#{$left}: 0.2em;
				font-size: 1.5625em;
				font-weight: 100;
			}
			del {
				color: var(--alpha-change-color-light-3);
				margin-#{$left}: .3571em;

				span {
					font-weight: 400;
				}
			}
		}
		.amount {
			color: inherit;
			font-weight: 600;
		}
	}
	.mini-item-meta {
		flex: 1;
		margin: side-values(auto 2rem auto 0);
		line-height: 1.3;
		a {
			margin-bottom: 1rem;
			&:hover {
				color: var(--alpha-primary-color);
			}
		}
	}
	.empty-msg {
		margin: 2rem 0 1rem;
		text-align: center;
	}
	&.offcanvas-type {
		&::after {
			content: none;
		}
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid var(--alpha-change-border-color);
		}
		h3 {
			margin-bottom: 0;
			font-size: 1.1429em;
			font-weight: 700;
			text-transform: uppercase;
		}
		.btn-close {
			text-transform: capitalize;
			font-weight: 400;
			color: var(--alpha-dark-body-color);

			&:hover {
				color: var(--alpha-primary-color);
			}
		}
		.dropdown-box {
			position: fixed;
			top: 0;
			#{$right}: -34rem;
			height: 100vh;
			min-width: auto;
			width: 34rem;
			padding: 2.9rem 3rem;
			opacity: 1;
			visibility: hidden;
			transition: #{$right} 0.3s, visibility 0.3s;
			transform: none;
			overflow-x: hidden;
			overflow-y: scroll;

			.admin-bar & {
				padding-top: 6.1rem;
			}
		}
		.offcanvas-overlay {
			position: fixed;
			left: 0;
			width: 100vw;
			top: -10vh;
			height: 120vh;
			background: rgba(0,0,0,.3);
			z-index: 9998;
			opacity: 0;
			visibility: hidden;
			transition: opacity .3s, visibility .3s;
		}
		.dropdown-box {
			z-index: 9999;
		}
		.mini-list {
			max-height: calc(100vh - 18.5rem);
			margin: -10px;
			padding: 10px 15px 10px 10px;
		}
		&.opened {
			.dropdown-box {
				visibility: visible;
				#{$right}: 0;
			}
			.offcanvas-overlay {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}
.mini-basket-box:not(.offcanvas) .empty-msg {
	margin: 2rem 0 0;
}
@include mq(sm, max) {
	.mini-basket-box:not(.offcanvas) .dropdown .empty-msg {
		margin-top: 2rem;
	}
}
.mini_cart_item {
	color: var(--alpha-dark-color);
	.cart-item-meta {
		a {
			margin-bottom: 1rem;
			line-height: 1.43;
			@include text-block();
		}
		.variation {
			display: none;
		}
		.quantity {
			color: var(--alpha-grey-color);
		}
		.amount {
			margin-#{$left}: .5rem;
			font-weight: 600;
		}
	}
    img {
		display: block;
		width: 8rem;
		object-fit: cover;
	}
}

// 2-2. Account
.account {
	.delimiter {
		color: var(--alpha-grey-color-light);
		margin: 0 .2143em;
	}
	.links {
		display: flex;
		align-items: center;
	}
	&.block-type {
		display: block;

		&:not(.dropdown),
		> a {
			text-align: center;
		}

		.links {
			margin-top: 3px;
			line-height: 1.2;
		}
	}
}
.account-dropdown {
	&::after,
	> a::after {
		content: none;
	}
	a {
		line-height: 1.2;
	}
	.menu {
		> ul > li > a {
			padding: .4286em .71486em;
			border: 0;
		}

		ul {
			padding: 0;
		}
	}
	.dropdown-box {
		width: auto;
		border-radius: var(--alpha-border-radius-form);
		ul.menu {
			> li {
				padding: 0;
				border: 0;
			}
		}
		a {
			font-weight: 400;
		}
	}
	a.block-type:after {
		display: none;
	}
}
.account-avatar {
	width: 4rem;
	height: 4rem;
	background: var(--alpha-change-border-color-light);
	border-radius: 50%;
	overflow: hidden;

	.inline-type & {
		margin-#{$right}: 1rem;
	}
}

// 2-3. Compare
.compare-dropdown {
	.compare-list {
		margin: side-values(0 -1.9rem 0 0);
		padding: side-values(1rem 1.5rem 0 0);
		max-width: none;
	}
	.compare-item {
		min-height: auto;
		width: 100%;
		max-width: 100%;
	}
	.compare-item + .compare-item {
		margin-#{$left}: 0;
	}
	.compare-buttons .btn {
		color: var(--alpha-change-color-light-1);
	}
}

// 2-4. Wishlist
.wishlist-dropdown {
	.wish-list {
		margin: side-values(0 -1.9rem 0 0);
		padding: side-values(1rem 1.5rem 0 0);
		max-width: none;
	}
	.wishlist-item {
		min-height: auto;
		width: 100%;
		max-width: 100%;
	}
	.wishlist-item + .wishlist-item {
		margin-#{$left}: 0;
	}
	.wishlist-buttons .btn {
		color: var(--alpha-change-color-light-1);
	}
}

// 2-5. Cart
.cart-dropdown {
	.cart-toggle {
		padding: .6rem 0;
	}
	.cart-label {
		display: block;
		cursor: pointer;
		span {
			display: inline-block;
		}
	}
	.cart-name-delimiter {
		margin: side-values(0 5px 0 3px);
	}
	.cart-name + .cart-price,
	.cart-label + i,
	i + .cart-label,
	.cart-label + .cart-count-wrap {
		margin-#{$left}: 7px;
	}
	.cart-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--alpha-change-border-color);
		padding-bottom: 1em;
		margin-bottom: .71429em;

		.btn-close {
			i {
				margin-bottom: 0;
				margin-#{$left}: 5px;
			}
		}
	}
	.cart-title {
		font-size: 1.14286em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		line-height: 1.4;
		margin-bottom: 0;
	}
	.minicart-icon {
		display: inline-block;
	}
	.cart-count {
		> i {
			font-size: 1.0909em;
			line-height: 1.6364;
		}
	}
	.minicart-icon .cart-count {
		transition: color .4s;
	}
	&:hover {
		.minicart-icon {
			color: var(--alpha-change-color-light-1);
			background: var(--alpha-primary-color);

			&::before {
				transform: rotateY(180deg);
			}
		}
		.minicart-icon .cart-count {
			color: var(--alpha-change-color-light-1);
		}
	}

	&.badge-type {
		.cart-toggle > i {
			text-align: center;
		}

		.cart-toggle .fa {
			padding-#{$right}: 5px;
			font-size: 1.7em;
			font-family: inherit;

			&::before {
				font-family: "Font Awesome 5 Free";
			}
		}

		&:hover {
			color: var(--alpha-primary-color);
		}
	}

	&.label-type {
		.cart-count {
			color: inherit;
		}
	}

	&.inline-type {
		.cart-name {
			display: block;
			font-size: .785em;
			margin-bottom: 5px;
		}
		.cart-price {
			font-weight: 700;
		}
		.cart-label .cart-price {
			margin: 0;
		}
	}

	.cart_list {
		max-height: 330px;
		margin: side-values(0 -1.9rem 0 0);
		padding: side-values(1rem 1.5rem 0 0);
		list-style: none;
		text-transform: capitalize;
		overflow-y: scroll;
	}

	.cart-item-meta a:hover {
		color: var(--alpha-primary-color);
	}
	.total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 1rem 0 2rem;
		padding: .125em 0;
		font-size: 1.14286em;
		text-transform: capitalize;
		line-height: 3;
		color: var(--alpha-change-color-dark-1);
		letter-spacing: -.025em;
		border-top: 1px solid var(--alpha-change-border-color);
		strong {	
			font-size: .875em;
			color: var(--alpha-change-color-dark-1);
		}
		strong, .amount {
			font-weight: 600;
		}
		&:first-of-type {
			margin-top: 1rem;
		}
		> strong {
			font-weight: 400;
			color: var(--alpha-body-color);
		}
	}

	.buttons {
		a {
			justify-content: center;
			padding: 1.2rem .6rem;
			line-height: 1.45;
			color: var(--alpha-change-color-dark-1);
			background-color: transparent;
			border-color: var(--alpha-change-color-dark-1);
			border-width: 1px;

			&:hover,
			&:active,
			&:focus {
				border-color: var(--alpha-primary-color);
				background-color: var(--alpha-primary-color);
				color: var(--alpha-change-color-light-1);
			}

			& + a {
				margin-top: 2rem;
			}
		}
		
		.checkout {
			@include button-variant(var(--alpha-change-color-dark-1), var(--alpha-change-color-dark-1-hover));
		}
	}

	&.block-type {
		.offcanvas-open {
			flex-direction: column-reverse;
		}
		i,
		.cart-count-wrap {
			margin-#{$left}: 0;
		}
	}

	&:not(.cart-offcanvas) {
		.cart-header {
			display: none;
		}
	}

	
	&.cart-offcanvas {
		.dropdown-box {
			body.admin-bar & {
				margin-top: 3.2rem;
			}
		}
		.cart_list {
			max-height: calc(100vh - 30rem);
		}
	}

	.d-loading.small i {
		top: calc(50% - 3px);
	}
}

// 2-6. Language Switcher & Currency
.menu.switcher {
	a {
		white-space: nowrap;
	}
	i {
		display: none;
	}

	> .menu-item-has-children > a:after {
		#{$right}: -1.6em;
	}

	li.active > a,
	li:hover > a {
		color: var(--alpha-primary-color);
	}

	li a {
		padding: 6px 10px;
		line-height: 1.1;
	}

	> li > a {
		padding: 9px 0;

		&::after {
			margin-bottom: 1.5px;
		}
	}

	ul {
		#{$left}: auto;
		#{$right}: 0;
		min-width: 0;
		padding: .5rem 0;
		li {
			padding: 0;
		}

		a {
			color: var(--alpha-body-color);
		}
	}
}

.elementor .switcher-toggle::after {
    font-size: 0.7em;
}

// 2-7. Mobile Menu Toggler
@include mq(lg) {
    .elementor-widget-#{$theme-name}_header_mmenu_toggle {
        display: none !important;
    }
}