/**
 * Strictly Layout Styles
 */

@include susy-media($desktop) {
	table.shop_table_responsive {
		tbody {
			tr {
				td,
				th {
					text-align: left;
				}
			}
		}
	}

	.mobile-only {
		display: none;
	}

	.site-header {
		padding-top: 0;
		padding-bottom: 0;

		.site-branding {
			@include span(3 of 12);
			margin-bottom: 0;

			img {
				height: auto;
				max-width: 100%;
				max-height: none;
			}
		}

		.shopper-myacc-cart {
				@include span(last 3 of 12);
				margin-bottom: 0;
		}

		.main-navigation {

		}


		.secondary-navigation {
				@include span(12);
		}

		.topbox-left {
				@include span(5 of 12);

		}

		.shopper-product-search {
			margin: 0;
			padding: 0;
			position: relative;
		}

		.custom-product-search {
			@include span(6 of 12);
			margin-top: 20px;
			position: relative;
			z-index: 1;

			.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

			.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

			.nav-right {
				position: relative;
				float: right;
			}

			.nav-search-facade {
				background-color: $color_white;
				border-radius: 3px 0 0 3px;
				border: 1px solid #ddd;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				text-transform: capitalize;
				color: $color_gray40;
			}

			.shopper-cat-list {
				position: absolute;
				top: 1px;
				left: 1px;
				height: 32px;
				line-height: 32px;
				border: none;
				background: $color_white;
				opacity: 0;
				cursor: pointer;
			}

			input[type="text"] {
				padding: 0 10px;
				background: $color_white;
				border-radius: 0;
				border-left: none;
				border-right: none;
				height: 34px;
				line-height: 34px;
				width: 100%;
			}

			button[type="submit"] {
				padding: 0;
				width: 50px;
				text-align: center;
				height: 34px;
				line-height: 34px;
				border-radius: 0 3px 3px 0;
				color: $color_white;
				font-size: 20px;
			}
		}

		.topbox-right {
				@include span(last 7 of 12);
				clear: none;
				text-align: right;

				.social-navigation {
					float: right;
				}
		}
	}

	.woocommerce-active {
		.site-header {

			.shopper-myacc-cart {
				@include span(last 3 of 12);
				margin-top: 2em;
   				margin-bottom: 1em;
   				font-size: ms(-1);
   				text-transform: uppercase;
   				text-align: right;

				.header-myacc-link {
					display: inline-block;
					padding-right: 15px;
					margin-right: 10px;
					border-right: 1px solid #ccc;

					> a {
						display: block;
						width: 26px;
						height: 26px;
						line-height: 26px;
						text-align: center;
						border: 1px solid #ccc;
					}
				}

				.site-header-cart {
					display: inline-block;
				}
			}

			.site-search {
				/* TODO */
				display: none;
			}
		}
	}

	.site-branding {
		.site-description {
			margin-bottom: 0;
			display: block;
		}
	}

	.site-branding,
	.site-search,
	.site-header-cart,
	.site-logo-anchor,
	.site-logo-link,
	.custom-logo-link {
		margin-bottom: ms(4);
	}

	.site-header {
		.subscribe-and-connect-connect {
			float: right;
			margin-bottom: 1em;

			.icons {
				list-style: none;
				margin: 0;

				a {
					font-size: 1em !important;
				}

				li {
					margin: 0 0 0 ms(-3) !important;
					display: inline-block;
				}
			}
		}
	}

	.col-full {
		@include clearfix;
		@include container($container-width);
		padding: 0 ms(5);
		box-sizing: content-box;
	}

	.site-content {
		@include clearfix;
	}

	.content-area {
		@include span(9 of 12);
	}

	.widget-area {
		@include span(last 3 of 12);
	}

	.right-sidebar {
		.content-area {
			@include span(9 of 12);
		}

		.widget-area {
			@include span(last 3 of 12);
		}
	}
	.shop-sidebar-right {
		.content-area-shop {
			@include span(9 of 12);
		}

		.widget-area-shop {
			@include span(last 3 of 12);
		}
	}

	.left-sidebar {
		.content-area {
			@include span(last 9 of 12);
		}

		.widget-area {
			@include span(3 of 12);
		}
	}

	.shop-sidebar-left {
		.content-area-shop {
			@include span(last 9 of 12);
		}

		.widget-area-shop {
			@include span(3 of 12);
		}
	}

	.none-sidebar{
		.content-area {
			@include span(12);
		}
		.widget-area {
			display: none;
		}
	}

	.shop-sidebar-none {
		.content-area-shop {
			@include span(12);
		}
		.widget-area-shop {
			display: none;
		}
	}
	.shopper-full-width-content {
		.content-area {
			@include span(full);
		}
	}

	.content-area,
	.widget-area {
		margin-bottom: ms(5);
	}

	/**
	 * Full width & homepage template
	 */
	.page-template-tpl-page-fullwidth-php,
	.page-template-tpl-page-homepage-php {
		.content-area {
			@include span(full);
		}
	}

	/**
	 * Footer widgets
	 */
	.footer-widgets {
		@include clearfix;
		padding-top: ms(5);
		background: $color_gray40;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;

		&.col-2 {
			.block {
				@include span(6 of 12);

				&.footer-widget-2 {
					@include last;
				}
			}
		}

		&.col-3 {
			.block {
				@include span(4 of 12);

				&.footer-widget-3 {
					@include last;
				}
			}
		}

		&.col-4 {
			.block {
				@include span(3 of 12);

				&.footer-widget-4 {
					@include last;
				}
			}
		}

		.widget {

			li {
				border-bottom: 1px solid rgba(255, 255, 255, 0.05);


				&:before {
					color: $color_white;
				}
			}
		}

		.widget-title {
			color: $color_white;
		}

	}

	/**
	 * Comments
	 */


	.comment-list {
		@include clearfix;

		.comment {
			clear: both;
			float: left;
			width: 100%;
		}
		> .comment+.comment {
			border-top: 1px dashed #ddd;
			padding-top: ms(2);
		}
		.bypostauthor {
			> .comment-body {
				background: #f1f1f1;
				padding: 15px;
				border-radius: 10px;
				margin-bottom: ms(2);
			}

		}

		.comment-meta {
			//@include span( 2 of 9);
			float: left;
			margin-right: ms(1);

			.avatar {
				float: right;
			}
		}

		.comment-content {
			padding-bottom: ms(6);
			margin-bottom: ms(6);
		}

		.comment-content,
		#respond {
			//@include span(last 7 of 9);
		}

		#respond {
			float: right;
			.comment-form-author,
			.comment-form-email,
			.comment-form-url {
				width: 100%;
				margin-right: 0;
			}
		}

		.comment-body {
			#respond {
				box-shadow: 0 6px 2em rgba(#000,.2);
				margin-bottom: ms(5);
				margin-top: ms(3);
			}
		}

		.reply {
			text-align: right;
		}

		ol.children {
			@include span(last 8 of 9);
			list-style: none;

			.comment-meta {
				//@include span(2 of 8);
			}

			.comment-content,
			#respond {
				//@include span(last 6 of 8);
			}

			ol.children {
				@include span(last 7 of 8);

				.comment-meta {
					//@include span(2 of 7);
				}

				.comment-content,
				#respond {
					//@include span(last 5 of 7);
				}

				ol.children {
					@include span(last 6 of 7);

					.comment-meta {
						@include span(2 of 6);
					}

					.comment-content,
					#respond {
						@include span(last 4 of 6);
					}

					ol.children {
						@include span(last 5 of 6);

						.comment-meta {
							@include span(2 of 5);
						}

						.comment-content,
						#respond {
							@include span(last 3 of 5);
						}
					}
				}
			}
		}
	}

	#respond {
		padding: ms(5);

		.comment-form-author,
		.comment-form-email,
		.comment-form-url {
			@include span(3 of 9);
		}

		.comment-form-url {
			@include last;
		}

		.comment-form-comment {
			clear: both;
		}
	}

	/**
	 * Content
	 */

	.hentry.type-post {
		@include clearfix;


		.entry-header {
			margin-bottom: ms(2);
			position: relative;
			text-align: center;

			&:after {
					content: '';
					position: absolute;
					width: 30px;
					height: 3px;
					background: #ff6600;
					bottom: -14px;
					left: 48%;
				}

		}

		.entry-meta {
			@include span(9 of 9);
			text-align: center;
			font-size: .8em;
		}

		.entry-content {
			@include span(9 of 9);

		}
	}

	/*
	 * Navigation Menus
	 */
	.menu-toggle {
		display: none;
	}

	/**
	* Secondary Navigation
	*/
	.shopper-secondary-navigation {
		clear: both;
		@include clearfix;
		background: $color_body;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;
		color: $color_gray40;
		position: relative;
		z-index: 2;
	}

	.secondary-navigation {
		clear: both;
		display: block;
		width: auto;
		clear: none;

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

			ul {
				background: $color_body;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;


				ul {
					left: 100%;
					top: 0;
				}
			}
		}

		li {
			float: left;
			position: relative;
			text-align: left;

			&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

				> a {
					color: $color_white;
				}
			}

			li {
				float: none;


				a {
					padding: ms(-1) ms(-2);
				}
			}

			&:hover {

				> ul {
					display: block;
				}

			}
		}

		a {
			text-decoration: none;
			display: block;
			padding: ms(-2) ms(-2);
			color: $color_gray30;
			font-size: ms(-2);
		}

	}

	.social-navigation {
		clear: both;
		display: block;
		width: auto;
		clear: none;

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

			ul {
				background: $color_body;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;


				ul {
					left: 100%;
					top: 0;
				}
			}
		}

		li {
			float: left;
			position: relative;
			text-align: left;

			&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

				> a {
					color: $color_white;
				}
			}

			li {
				float: none;


				a {
					padding: ms(-1) ms(-2);
				}
			}

			&:hover {

				> ul {
					display: block;
				}

			}
		}

		a {
			text-decoration: none;
			display: block;
			padding: ms(-2) ms(-2);
			color: $color_gray30;
			font-size: ms(-2);
		}

	}

	.header-middle {
		width: 100%;
		float: left;
		margin: ms(-2) 0;
		clear: both;
	}

	.shopper-primary-navigation {
		clear: both;
		@include clearfix;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;
		background: $color_whitesmoke;

		.main-navigation {

			@include span(9 of 12);
		}
		.primary-widget-region {
			@include span(last 3 of 12);

			form {

				margin-bottom: 0;
				padding: 5px 0;
			}
		}
	}

	.main-navigation {

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: visible;

			ul {
				background: $color_whitesmoke;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;
				z-index: 999;


				ul {
					left: 100%;
					top: 0;
				}
			}
		}

		li {
			float: left;
			position: relative;
			text-align: left;

			&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

				> a {
					color: $color_woocommerce_hover;
				}
			}

			li {
				float: none;

				&.menu-item-has-children,
				&.page_item_has_children {

					> a {
						&:after {
							@include fa-icon();
							content: '\f105';
							float: right;
							line-height: 1.618;
						}
					}

				}

				a {
					padding: ms(-1) ms(-2);
				}

			}

			&:hover {

				> ul {
					display: block;
				}

			}

			&.menu-item-has-children,
			&.page_item_has_children {

				&:hover {

					&:after {
						display: block;
					}
				}

				> a {
					&:after {
						@include fa-icon();
						content: '\f107';
						margin-left: 1em;
					}
				}
			}
		}

		a {
			text-decoration: none;
			display: block;
			padding: ms(-1) ms(-1);
			color: $color_body;
			font-size: ms(-1);
			text-transform: uppercase;
		}

	}

	.primary-navigation {
		display: block;

		> ul > li:first-child > a {
			padding-left: 0;
		}
	}

	/**
	 * Top box left
	 */
	.topbox-left {

		p {
			padding: 10px;
			margin: 0;
			line-height: 1;
			font-size: ms(-2);
			color: $color_gray30;
		}
	}




	/**
	 * Latest from our blog
	 */
	.shopper-recent-posts {
		li.post {
			list-style: none;
		}
		li.post:first-child {

			clear: both !important;
		}
		li.post:last-child {
			margin-right: 0 !important;
		}
	}



	.page-template-tpl-page-homepage-php {
			.columns-4 {
				ul.products {
					li.product,
					li.post {
						@include span(3 of 12);
					}

				}
			}
	}

	/**
	 * Social Icons
	 */
	.top-social-icons {
		margin: 0;
		width: auto;
		clear: none;
		line-height: 1;

		ul {
			overflow: hidden;
			text-align: right;
			margin: 0;

			li {

				display: inline-block;

				a {
					display: inline-block;
					padding: 10px;
					font-weight: 400;
					color: $color_gray30;

					&:hover {
						color: lighten( $color_whitesmoke, 20% );
					}
				}
			}
		}
	}
}

@include susy-media ( max-width $desktop ) {

	.woocommerce {

			ul.products {

				li.product {

					&:hover {

						.add-to-wishlist-custom {
							right: 5% !important;
						}
					}

					.loop-addtocart-btn-wrapper {

						.button {

							margin-top: -28px;
							left: 0;
							opacity: 1;
							height: 30px;
							text-align: center;
							line-height: 30px;
							font-size: 12px;
						}

					}

					.add-to-wishlist-custom {
						width: 20px;
						height: 20px;
						line-height: 20px;
						border-radius: 20px;
						text-align: center;
						opacity: 1;
						right: 5%;
						top: 5%;

						.yith-wcwl-wishlistexistsbrowse.show {
							font-size: 0;
							padding: 0;

							&::before {

								font-family: 'FontAwesome';
								content: "\f004";
								font-size: 8px;
								opacity: .3;

							}
						}

						.yith-wcwl-wishlistaddedbrowse.show {
							font-size: 0;
						}

						a {
							font-size: 0;
							padding: 0;

							&::before {
								font-size: 8px;
								margin-right: 0;
							}
						}
					}


					}

			}


		}

		.site-info {
			float: none;
			text-align: center;
		}
		.footer-menu {
			float: none;
			text-align: center;
			padding-top: 0;
		}

}

@include susy-media (max-width $container-width) {
	.col-full {
		margin-left: ms(5);
		margin-right: ms(5);
		padding: 0;
	}

	.woocommerce-active {

		.site-header  {

			.shopper-myacc-cart {
				margin-bottom: 0;

				.cart-contents {

				.count {
						right: -12px;
						top: -11px;
					}
				}
			}
		}
	}

	.site-header {

		.site-branding {
			width: 100%;
			margin-bottom: 0;

			img {
				height: auto;
				max-width: 230px;
				margin: 0 auto;
			}

			a {
				float: none;
			}
		}

		.custom-product-search {
			width: 70%;
			margin-top: 20px;

			.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

			.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

			.nav-right {
				position: relative;
				float: right;
			}

			.nav-search-facade {
				border-radius: 3px 0 0 3px;
				border: 1px solid #ddd;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				text-transform: capitalize;
				color: $color_gray40;
			}

			.shopper-cat-list {
				position: absolute;
				top: 1px;
				left: 1px;
				height: 32px;
				line-height: 32px;
				border: none;
				background: $color_white;
				opacity: 0;
				cursor: pointer;
			}

			input[type="text"] {
				padding: 0 10px;
				background: $color_white;
				border-radius: 0;
				border-left: none;
				border-right: none;
				height: 34px;
				line-height: 34px;
				width: 100%;
			}

			button[type="submit"] {
				padding: 0;
				width: 50px;
				text-align: center;
				height: 34px;
				line-height: 34px;
				border-radius: 0 3px 3px 0;
				color: $color_white;
				font-size: 20px;
			}
		}

		.topbox-right {
			width: 30%;
			clear: none;
			text-align: right;
		}
	}
}

@include susy-media (max-width $handheld) {
	.col-full {
		margin-left: ms(2);
		margin-right: ms(2);
		padding: 0;
	}

	.hidden-xs-down {
		display: none !important;
	}

	.social-navigation {
		display: none;
	}

	#mobile-menu-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: 100%;
		max-height: 100%;
		overflow: scroll;
		background: rgba(0,0,0,0.9);
		-ms-transform: translate(-100%,0);
		-webkit-transform: translate(-100%,0);
		transform: translate(-100%,0);
		-webkit-transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		overflow-x: hidden;
		z-index: 99;
		padding-top: 40px;

		&.wpadminbar-active {
			top: 45px;
		}


		.mobile-menu {
			border-top: 1px solid #666666;



			a {
				color: #ffffff;
			}

			.arrow-sub-menu {
				color: #ffffff;
			}

			.primary-widget-region {
				margin: 10px;
			}
		}
	}

	.mobile-menu-active {

		.menu-toggle {
			position: fixed;
			top: ms(1);
			left: ms(1);
			width: 100%;
			left: 0;
			top: 0;
			color: #ffffff;

			&:hover {
				background: none !important;
				color: #ffffff;
			}
		}

		#mobile-menu-wrapper {
			-ms-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			transform: translate(0,0);
		}
	}

	.mobile-menu-active.admin-bar .menu-toggle {
		top: 45px;
	}

	.woocommerce-active {

		.site-header  {

			.shopper-myacc-cart {
				width: auto;

				.cart-contents {

					.amount {
						padding-right: 2em;
					}

					.count {
						right: 0;
					}

					&:after {
						right: 1em;
					}
				}
			}
		}
	}

	.cart-toggle {
		display: block;
	}

	.site-header {

		border-bottom: 1px solid $color_whitesmoke;

		.site-branding {
			width: 100%;
			float: none;
			text-align: center;
			margin-bottom: 0;

			a {
				float: none;
			}

			img {
				height: auto;
				max-width: 230px;
				margin: 0 auto;
			}
		}

		.site-header-cart {

			.widget_shopping_cart {
				display: block;
			}
		}

		.shopper-myacc-cart {
			background: rgba(0,0,0,0.8);
			top: 0;
			left: 0;
			float: none;
			z-index: 998;
			margin-top: ms(1);

			.header-myacc-link {
				padding: 0;
				position: relative;
				bottom: -48px;
				display: none;
			}

			ul.site-header-cart {
				display: none;

				li {
					padding: ms(1) 0;
				}

				a {
					color: #ffffff;
					position: relative;
					margin-left: ms(1.5);



					&.remove {
						left: -1.7em;
						top: ms(1);

						&:before {
							color: #ffffff;
						}
					}

					&.button {
						margin-left: 0;
					}
				}

				.quantity {
					margin-left: ms(1.5);
				}
			}
		}

		.shopper-primary-navigation {
			background: $color_whitesmoke;
			clear: both;
			@include clearfix;
			margin-left: -22px;
			margin-right: -22px;

			> div,
			.primary-navigation {
				display: none;
			}
		}

		.shopper-myacc-cart {
			float: none;
			width: auto;
			margin-bottom: 0;
			margin-left: -100%;
			margin-right: -100%;
			padding-left: 100%;
			padding-right: 100%;
		}

		.custom-product-search {
			width: 100%;
			float: none;
			clear: both;
			margin-top: 20px;

			form {
				margin-bottom: 0;
			}

			.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

			.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

			.nav-right {
				position: relative;
				float: right;
			}

			.nav-search-facade {
				border-radius: 3px 0 0 3px;
				border: 1px solid #ddd;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				text-transform: capitalize;
				color: $color_gray40;
			}

			.shopper-cat-list {
				position: absolute;
				top: 1px;
				left: 1px;
				height: 32px;
				line-height: 32px;
				border: none;
				background: $color_white;
				opacity: 0;
				cursor: pointer;
			}

			input[type="text"] {
				padding: 0 10px;
				background: $color_white;
				border-radius: 0;
				border-left: none;
				border-right: none;
				height: 34px;
				line-height: 34px;
				width: 100%;
			}

			button[type="submit"] {
				padding: 0;
				width: 50px;
				text-align: center;
				height: 34px;
				line-height: 34px;
				border-radius: 0 3px 3px 0;
				color: $color_white;
				font-size: 20px;
			}
		}

		.topbox-right {
				@include span(last 12 of 12);
				clear: none;
				text-align: right;
		}
	}

	.feature-banner {

		.banner-desc {
			padding: 0 ms(1);

		}
	}

	ul.products {

		li.post,
		li.product {
			float: left;
			width: 48%;
			margin-right: 4%;


			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}


	.woocommerce {

		ul.products {

			li.product {

				.add-to-wishlist-custom {
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 30px;
					right: 15% !important;

					a {

						&::before {
							font-size: 14px;
						}

					}

					.yith-wcwl-wishlistexistsbrowse.show {
						line-height: 30px;

						&::before {
							font-size: 14px;
						}
					}

				}

				&:hover {

					.add-to-wishlist-custom {
						right: 15% !important;
					}
				}

			}

		}


		}



	.site-footer {

		.col-full {
			margin: 0;
		}

		.footer-widgets {
			padding-top: 0;
		}

		.widget {
			margin: 0;

			.widget-title {
				color: $color_gray30;
				margin: 0;
				padding: 0 ms(1);
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid $color_gray40;

				&:before {
					display: inline-block;
					font-family: 'FontAwesome';
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					background: none;
					text-align: center;
					content: '\f107';
					width: 6	0px;
					height: auto;
					display: block;
					position: absolute;
					bottom: auto;
					left: auto;
					right: 0;
					top: 0;
				}

				&.active {
					margin-bottom: ms(1);

					&:before {
						content: '\f106';
					}

				}
			}

			> div,
			> ul,
			> form {
				display: none;
				padding: 0 ms(1) ms(1);
				border-bottom: 1px solid $color_gray40;
			}

			> form {

				&:before {
					display: none;
				}

				input[type="search"] {
					padding: 0 ms(1);
				}
			}
		}

		.site-info {
			padding: ms(1);
		}
	}
}

@include susy-media (max-width 479px ) {
	.site-header .site-branding img {
		max-width: 230px;
	}

	button.menu-toggle {
		left: -15px;
	}

	.cart-toggle {
		right: -15px;
	}

	.feature-banner {
		min-height: 350px;
		max-height: 350px;

		.banner-desc {

			h2 {
				font-size: ms(1.5);
			}

			p {
				font-size: ms(-2);
			}


		}
	}

	ul.products {

		li.post,
		li.product {
			float: none;
			width: 100%;
			margin-right: 0;
		}
	}

}

