//==============================================================================
// Shopping Cart
//==============================================================================
.shopping-cart-icon {
	line-height: 1;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	border-top: solid 7px transparent;
	border-bottom: solid 7px transparent;

	.subtotal-info-wrapper {
		display: inline-block;
	}

	> .icon {
		position: relative;
		display: inline-block;
		vertical-align: middle;

		> i:before {
			content: "\f07a";
			font-family: var(--g5-font-icon);
			font-style: normal;
			font-size: 20px;
		}

		> span {
			position: absolute;
			margin: auto;
			top: 50%;
			margin-top: -18px;
			left: 0;
			right: 0;
			width: 18px;
			height: 18px;
			text-align: center;
			line-height: 18px;
			background-color: var(--g5-color-secondary);
			color: #fff;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			font-size: 12px;
			font-weight: 700;
		}
	}
}

.woocommerce .widget_shopping_cart_content .shopping-cart-list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 999;
	background: #fff;
	color: #212121;
	padding: 20px;
	width: 320px;
	line-height: 1.6;
	@include transition03();
	ul.cart_list {
		max-height: 280px;
		overflow: hidden;
		position: relative;
		li {
			display: block;
			padding-bottom: 5px;
			margin-bottom: 5px;
			border-bottom: 1px solid var(--g5-border-color);
			a {
				font-weight: 400;
				color: inherit;
				&:hover {
					color: var(--g5-color-accent);
				}
			}
			img {
				float: left;
				width: 60px;
				margin: 0 10px 0 0;
				border: 1px solid var(--g5-border-color);
			}
			span.quantity {
				display: block;
				margin-top: 5px;
			}

			a.remove {
				position: absolute;
				right: 10px;
				&:hover {
					color: var(--g5-color-accent) !important;
					background-color: transparent !important;
				}
			}
		}


	}
	p.total {
		display: none;
	}

	p.buttons {
		margin-top: 15px;
		margin-bottom: 0;
		text-align: center;

		a.button + a.button {
			margin-left: 10px;
		}

		.bt.layout-primary:hover {
			color: #FFFFFF !important;
		}

		.bt.layout-dark:hover {
			color: #FFFFFF !important;
		}
	}
}

.widget_shopping_cart_content {
	position: relative;
	text-align: left;
}

//==============================================================================
// Top bar
//==============================================================================
.bar-left {
	text-align: left;

	.menu {
		ul {
			left: 100%;
			right: auto;
		}

		li > ul {
			left: 0;
		}
	}
}

.bar-right {
	text-align: right;

	.widget {
		text-align: left;
	}
}

.bar-wrapper {
	.widget {
		display: inline-block;
		margin-bottom: 0;
		position: relative;

		+ .widget {
			margin-left: 30px;
		}
	}

	&.text-center .bar-left,
	&.text-center .bar-right {
		text-align: center;
	}
}

.top-bar-wrapper {
	background-color: var(--g5-top-bar-bg-color);
	color: var(--g5-top-bar-text-color);
	font-size: 12px;

	a {
		color: inherit;

		&:hover {
			color: var(--g5-color-accent);
		}
	}

	&.full-border {
		border-bottom: solid 1px var(--g5-top-bar-border-color);
	}

	&.container-border {
		.top-bar-inner {
			border-bottom: solid 1px var(--g5-top-bar-border-color);
		}
	}
}

.top-bar-inner {
	padding-top: var(--g5-top-bar-padding-top);
	padding-bottom: var(--g5-top-bar-padding-bottom);
}

//==============================================================================
// Header
//==============================================================================
.main-header {
	.header-wrapper {
		background-color: var(--g5-header-bg-color);
		color: var(--g5-header-text-color);

		.container-inner {
			position: relative;
		}
	}

	.header-above-inner {
		padding-top: var(--g5-header-padding-top);
		padding-bottom: var(--g5-header-padding-bottom);
	}

	.logo-header {
		float: left;
		height: var(--g5-logo-max-height);
		font-size: 0;

		&:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		img {
			max-height: var(--g5-logo-max-height);
			padding-top: var(--g5-logo-padding-top);
			padding-bottom: var(--g5-logo-padding-bottom);
		}
	}

	.logo-sticky {
		display: none;
	}

	.header-row > .container,
	.header-wrapper > .container {
		position: relative;
	}

	.header-wrapper.float-header {
		position: absolute;
		z-index: 999;
		left: 0;
		right: 0;
	}

	.header-wrapper.container-full .container {
		width: 100%;
	}

	.header-nav-wrapper {
		background-color: var(--g5-navigation-bg-color);
		color: var(--g5-navigation-text-color);
	}

	.header-right {
		float: right;
		text-align: right;
	}

	// Header Customize
	.header-customize-wrapper {
		.header-customize-item:first-child {
			margin-left: var(--g5-navigation-spacing);
		}
	}

	.header-customize-nav {
		float: right;
		color: var(--g5-navigation-text-color);

		.header-customize-item {
			line-height: var(--g5-navigation-height);
		}

		.header-customize-item {
			margin-left: var(--g5-header-customize-nav-spacing);
		}

		a {
			color: var(--g5-navigation-text-color);

			&:hover {
				color: var(--g5-navigation-text-color-hover);
			}
		}

		.shopping-cart-icon {
			border-top: none;
			border-bottom: none;
			line-height: inherit;
		}

		.shopping-cart-icon .subtotal-info-wrapper {
			display: none;
		}

		.shopping-cart-icon > .icon {
			padding-right: 10px;
			margin-top: -6px;
		}

		.shopping-cart-icon > .icon > span {
			top: 50%;
			margin-top: -16px;
			left: auto;
			right: 0;
			width: 16px;
			height: 16px;
			line-height: 16px;
			background-color: var(--g5-color-accent);
		}

		.shopping-cart-icon > .icon > i:before {
			font-size: 14px;
			font-family: var(--g5-font-icon);
			content: "\f07a";
		}
	}

	.header-customize-left,
	.header-customize-right {
		line-height: var(--g5-logo-max-height);

		.header-customize-item:first-child {
			margin-left: 0;
		}
	}

	.header-customize-left {
		float: left;
		text-align: left;

		.header-customize-item {
			margin-left: var(--g5-header-customize-left-spacing);

		}
	}

	.header-customize-right {
		float: right;
		text-align: right;

		.header-customize-item {
			margin-left: var(--g5-header-customize-left-spacing);
		}
	}

	.header-customize-item {
		display: inline-block;
		vertical-align: middle;
		line-height: 1;
		max-width: 100%;
	}

	.item-info {
		position: relative;
		padding-left: 60px;
		float: left;
		padding-top: 13px;
		text-align: left;

		> i {
			font-size: 18px;
			color: var(--g5-color-accent);
			line-height: .8;
			width: 42px;
			height: 42px;
			border: 1px solid #dcdcdc;
			position: absolute;
			left: 0;
			top: 5px;
			@include border-radius(50%);
			text-align: center;
			padding: 13px 10px;

			&:after {
				border: 1px solid #dcdcdc;
				@include border-radius(50%);
				content: "";
				display: block;
				width: 46px;
				height: 46px;
				left: -3px;
				position: absolute;
				top: -3px;
			}
		}

		> span {
			display: block;
			line-height: .8;
			font-size: 12px;

			&.label {
				font-weight: bold;
				color: var(--g5-header-text-color-light);
				margin-bottom: 7px;
				text-transform: uppercase;
				text-align: left;
				padding: 0;
			}

			&.info {
				margin: 0;
				color: #ababab;

				a {
					color: inherit;

					&:hover {
						color: var(--g5-color-accent);
					}
				}
			}
		}
	}

	.item-sidebar {
		.widget {
			margin-bottom: 0;
			display: inline-block;
		}
	}

	.header-customize-wrapper {
		form.search-form {
			position: relative;
			line-height: 1;
		}

		form.search-form > input {
			padding-right: 42px;
			@include border-radius(0);
			height: 40px;
			margin-top: calc((var(--g5-navigation-height) - 40px) / 2);
			width: 210px;
			background-color: rgba(255, 255, 255, 0.05);
			font-size: 13px;
			color: inherit;
			&:focus {
				border-color: transparent;
				+ .search-submit {
					background-color: transparent;
				}
			}
		}

		form.search-form > button {
			height: 40px;
			margin-top: calc((var(--g5-navigation-height) - 40px) / 2);
			position: absolute;
			right: 0;
			top: 0;
			background: transparent;
			color: var(--g5-header-text-color-light);
			padding-left: 15px;
			padding-right: 15px;
			border: none;
			&:hover {
				color: var(--g5-color-accent);
			}
		}
	}

	.search-product-wrapper {
		position: relative;
		text-align: left;

		> input {
			max-width: 100%;
			width: 640px;
			padding-right: 40%;

			padding-right: calc(31.25% + 50px);

			height: 50px;
			border: solid 1px var(--g5-color-accent);
			padding-left: 20px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			background-color: transparent;
		}

		> button {
			position: absolute;
			top: 3px;
			right: 3px;
			border-radius: 0;
			height: 44px;
			width: 47px;
		}

		.categories {
			position: absolute;
			top: 0;
			right: 50px;
			width: 31.25%;
			border-left: solid 1px var(--g5-color-accent);
			cursor: pointer;

			> span {
				position: relative;
				display: block;
				line-height: 50px;
				width: 100%;
				color: var(--g5-header-text-color-light);
				padding-left: 20px;
				padding-right: 35px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				&:after {
					content: '\f107';
					font-family: var(--g5-font-icon);
					position: absolute;
					display: block;
					right: 20px;
					top: 0;
				}

				&.in:after {
					content: '\f00d';
				}
			}
		}

		.search-category-dropdown {
			display: none;
			position: absolute;
			background: #fff;
			left: 0;
			right: 0;
			list-style: none;
			padding: 15px;
			line-height: 42px;
			z-index: 999;
			cursor: default;

			span:hover {
				cursor: pointer;
				color: var(--g5-color-accent);
			}

			li + li {
				border-top: solid 1px #eee;
			}

			ul {
				padding: 0;
				list-style: none;
				border-top: solid 1px #eee;
			}

			li li span {
				padding-left: 20px;
			}

			li li li span {
				padding-left: 40px;
			}
		}

		.search-ajax-result {
			position: absolute;
			left: 0;
			right: 0;
			background: #fff;
			color: var(--g5-color-secondary);
			z-index: 999;
			font-size: 16px;
			line-height: 1.6em;

			ul {
				padding: 0;
				margin: 0;
				list-style: none;
			}

			li {
				padding: 10px 15px;
				position: relative;

				&:after {
					content: '';
					display: block;
					clear: both;
				}

				+ li:before {
					content: '';
					position: absolute;
					display: block;
					margin: auto;
					left: 15px;
					right: 15px;
					top: 0;
					border-top: solid 1px #eee;
				}

				&.selected,
				&:hover {
					background-color: #f8f8f8;

					+ li:before,
					&:before {
						border-top-color: transparent;
					}
				}

				&.nothing {
					text-align: center;
					line-height: 2em;
				}
			}

			img {
				width: 50px;
				float: left;
				margin-right: 15px;
			}

			.view-more {
				text-align: center;
				padding: 15px;
				border-top: solid 1px #eee;
			}
		}
	}

	// END: header Customize
	header {
		&.full-border,
		&.container-border .container-inner {
			border-bottom: solid 1px var(--g5-header-border-color);
		}
	}

	.header-above-wrapper {
		&.full-border,
		&.container-border .header-above-inner {
			border-bottom: solid 1px var(--g5-header-above-border-color);
		}
	}

	.header-accent-color {
		.search-product-wrapper {
			> input,
			.categories {
				border-color: var(--g5-header-text-color);
				color: var(--g5-header-text-color);
			}

			> button {
				background-color: var(--g5-header-text-color);
				color: var(--g5-color-accent);

				&:hover {
					opacity: 0.8;
				}
			}

			> input {
				@include input-placeholder {
					color: #fff;
				}
			}
		}

		a {
			color: var(--g5-header-text-color);

			&:hover {
				color: var(--g5-header-text-color-dark);
			}
		}
	}


	//==============================================================================
	// is-sticky
	//==============================================================================
	.is-sticky {
		.menu-categories,
		.logo-header {
			height: 60px;
		}

		.x-nav-menu > .x-menu-item {
			padding-top: 20.5px;
			padding-bottom: 20.5px;
		}

		.menu-categories,
		.menu-categories-select > i,
		.header-customize-nav .header-customize-item {
			line-height: 60px;
		}

		.logo-header img {
			max-height: 60px;
		}

		.logo-sticky {
			display: initial;
		}

		.has-logo-sticky .no-sticky {
			display: none;
		}

		.header-customize-wrapper form.search-form > button, .header-customize-wrapper form.search-form > input {
			height: 40px;
			margin-top: 8px;
		}
	}

	&.header-1 .is-sticky {
		.header-above-inner {
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	&.header-4 .is-sticky {
		.header-nav-wrapper {
			background-color: var(--g5-navigation-bg-color);

			nav.primary-menu {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	// Header-XX: overwrite css
	&.header-1 {
		.header-customize-nav {
			display: inline-block;
			vertical-align: middle;
		}

		.primary-menu {
			float: right;
		}
	}

	&.header-3 {
		.logo-header {
			float: none;
			position: absolute;
			width: 30%;
			margin: auto;
			left: 0;
			right: 0;
			text-align: center;
		}

		.item-search {
			max-width: 400px;
		}

		.search-product-wrapper .categories {
			width: 40%;
		}

		.search-product-wrapper > input {
			padding-right: 45%;
			padding-right: calc(40% + 50px);

		}

		nav.primary-menu {
			display: inline-block;
		}

		.header-row > .container {
			text-align: center;
		}
	}

	&.header-4 {
		margin-bottom: 20px;

		.header-nav-wrapper {
			background-color: transparent;

			nav.primary-menu {
				background-color: var(--g5-navigation-bg-color);
				border-radius: 5px;
				padding-left: 20px;
				padding-right: 20px;
			}
		}

		.search-product-wrapper > input,
		.search-product-wrapper .categories {
			border-color: var(--g5-header-text-color-light);
		}

		.search-product-wrapper > button {
			background-color: var(--g5-header-text-color-light);
		}
	}

	&.header-5 {
		.header-wrapper {
			margin-bottom: calc((var(--g5-navigation-height) / 2) + 20px);

		}

		.header-nav-wrapper {
			background-color: transparent;
			height: calc((var(--g5-navigation-height) / 2));
		}

		.item-info > i, .item-info > i:after {
			border-color: #FFF;
		}

		nav.primary-menu {
			background-color: var(--g5-color-secondary);
			position: absolute;
			padding-left: 20px;
			padding-right: 20px;
			left: 0;
			right: 0;
		}

		.is-sticky {
			.header-nav-wrapper {
				background-color: var(--g5-color-secondary);
				//height: @navigation_height;
				height: 55px;
			}

			nav.primary-menu {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	.is-sticky {
		height: 55px;

		.sticky-region {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 999;
			-webkit-box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.1);
			box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.1);
			margin: auto;
		}
	}
}


body.boxed .is-sticky .sticky-region {
	max-width: 1330px;
	width: 100%;
}

#lang_sel > ul {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	line-height: 44px;

	> li {
		padding: 0;
		display: block;
		list-style: none;

		img {
			margin-bottom: 2px;
		}

		> a:after {
			content: "\f0d7";
			font-family: var(--g5-font-icon);
			display: inline-block;
			padding-left: 3px;
		}
	}

	ul {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 150px;
		list-style: none;
		padding: 10px 0;
		margin: 0;
		display: none;
		background-color: #fff;
		z-index: 99999;
		-webkit-box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, 0.3);

		> li {
			list-style: none;
			padding: 0 15px;
			display: block;
			line-height: 32px;

			img {
				padding-right: 5px;
			}
		}
	}

	&:hover ul {
		display: block;
	}
}