/* Page Title
	--------------------------------------------------*/
.page-title {
	&.listing {
		position: relative;
		height: 100%;

		.container {
			margin: 0 auto;
			.category-title {
				h1 {
					margin-top: 0;
				}

				.label {
					background: none;
					padding: 5px 2px;
					color: #000;
					position: static;
					transform: none;
					font-family: $m900;
				}
			}

			.category-text {
				vertical-align: middle;
				text-transform: none;
				text-align: left;

				p {
					line-height: 1.5em;
				}
			}
		}
	}
}

/* Labels
	--------------------------------------------------*/
.label {
	display: inline-block;
	vertical-align: top;
	padding: 5px 10px;
	color: #fff;
	background-color: #000;
	position: absolute;
	top: -10px;
	left: 50%;
	z-index: 10;
	text-align: center;
	transform: translateX(-50%);

	&.new {
		background-color: #c39762;
	}

	&.haircare, .pielęgnacja-włosów, .haarstyling, .coiffure, .haarverzorging  {
		background-color: #9e4d98;
	}

	&.grooming, .osobista-pielęgnacja, .tondeuses {
		background-color: #6d5d58;
	}

	&.shaving,.golenie, .rasage, .scheren, .herrenrasierer {
		background-color: #788da0;
	}

	&.hair-removal, .depilacja, .haarentfernung, .depilacja, .Épilation, .ontharing  {
		background-color: #d0abd1;
	}

	&.beauty-and-wellbeing, .beauty, .zdrowie-i-uroda, .beauté-and-bien-Être  {
		background-color: #49ad83;
	}
	&.man-utd {
		border-bottom-color: #D20122;
	}
}

/* Listing Banner Carousel
	--------------------------------------------------*/
.banner-box {
	&.listing {
		.panel {
			padding: 0 100px;

			.label {
				font-size: 2.2em;
				font-family: $m900;
				position: static;
				padding: 10px 20px;
				transform: none;
			}

			background-size: cover;
			background-position: center center;

		}
	}
}

/* Listing Column
	--------------------------------------------------*/
.listing-page {
	position: relative;
	height: 100%;

	.container {
		margin: 0 auto;
		h6{
			font-family: "Museo100",Arial,Helvetica,sans-serif;
			text-transform: lowercase !important;
		}

		.filter-column {
			margin: 0;
			padding: 0;
			vertical-align: top;

			.tabs {
				display: none;
			}

			.filter-panel {
				margin: 0 0 40px;

				.filter-footer {
					text-align: center;
					margin-top: 20px;
				}

				.filter-title {
					background-color: #f4f4f4;
					margin-top: 0;
					padding: 20px;

					.tcon-menu--minus {
						display: none;
					}

					i {
						float: right;
					}
				}

				ul {
					list-style: none;
					padding: 0 15px;
					> li {
						padding: 10px 0;

						&.filter-unit {
							label,input{
								transition: .2s ease-out;
								cursor: pointer;
							}
							&:hover{
								input:not(:checked){
									background-color: rgba(52, 52, 52, 0.69);
								}
							}
							i {
								float: right;
							}

							.filter-box-container {
								width: 15px;
							}
						}
					}
				}

				.product-rating {
					i {
						float: left !important;
						padding: 0;
						font-size: 1em;
					}

					.fa-star {
						color: #ee3124;
					}

					.fa-star-o {
						color: #fff;
					}
				}

				.price-range-box {
					font-family: $m700;
					margin: 20px 0;
					padding: 20px 0 0;
					text-align: center;
					border-top: 2px solid #f4f4f4;

					input {
						border: 1px solid #c2c2c2;
						text-align: center;
						width: 60px;
					}

					span {
						padding: 0 5px;

						&.currency {
							padding-left: 0;
						}
					}
				}
			}
		}

		.product-list-column {
			margin: 0;
			padding: 0;
			text-align: center;
			vertical-align: top;

			&.list-view {
				text-align: left;
			}

			/* Product Item Loop
			--------------------------------------------------*/

		}
	}
}

.item-box {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 33.3%;
	text-transform: uppercase;
	padding: 10px 15px;
	margin-bottom: 30px;
	white-space: normal!important;
	word-wrap: break-word;
	position: relative;
	p {
		text-transform: uppercase;
	}
	.item-hover {
		position: absolute;
		z-index:9;
		background: rgba(0,0,0,0.85);
		@include absolute-pos(10px,10px,10px,10px);
		display: block;
		opacity: 0;
		-webkit-transform: translateY(5px);
		-moz-transform: translateY(5px);
		-ms-transform: translateY(5px);
		-o-transform: translateY(5px);
		transform: translateY(5px);
		-webkit-transition: .3s ease-out;
		-moz-transition: .3s ease-out;
		-ms-transition: .3s ease-out;
		-o-transition: .3s ease-out;
		transition: .3s ease-out;
		color: #fff;
		font-family: $m900;

		.wrap {
			padding: 30px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		i {
			padding: 15px 0;
			font-size: 1.5em;
		}

		.fa-star {
			color: #ee3124;
		}

		.fa-star-o {
			color: #fff;
		}
	}

	&:hover {
		.item-hover {
			opacity: 1;
			-webkit-transform: translateY(0px);
			-moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			-o-transform: translateY(0px);
			transform: translateY(0px);
		}
	}
	@include media('<md'){
		.product-rating{
			padding-top: 10px;
			img{
				opacity: 1;
				display: inline-block;
				visibility: visible;
			}
		}
		.item-hover{
			position: relative;
			margin: 0;
			transform: none!important;
			max-width: initial;
			left: 0;
			opacity: 1;
			background-color: transparent;
			.wrap.middle, .action-buttons{
				padding: 0;
			}
			.product-title, .product-model, .product-rating, .product-price, .product-delivery, .social{
				display: none;
			}
		}
	}
	.social {
		display: block;
		margin: -10px 0;

		i {
			color: #fff;
			font-size: 1.3em;
			padding: 20px 7px;
		}
	}

	.action-buttons {
		display: inline-block;
		vertical-align: top;
		padding: 10px 0;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	&.list-view-item {
		width: 49.5%;
		text-align: left;

		.label {
			position: relative;
			left: 0;
			transform: none;
		}

		.product-image {
			float: left;
			width: 40%;
		}

		.product-info {
			position: relative;
			padding: 0;
			float: left;
			width: 60%;
		}

		ul {
			margin: 20px 0 0;
			padding: 0;
			list-style: none;
			text-transform: none;
			font-size: 0.875em; /* 14px / 16px */

			li {
				&:before {
					content: "";
					border-left: 4px solid #ee3124;
					margin-left: -15px;
					padding-right: 10px;

				}
				//border-left: 3px solid #ee3124;
				margin: 0 0 10px;
				padding: 0 0 0 15px;
			}
		}

		.item {
			position: relative;
			min-height: 330px;

			.product-rating {
				&:after {
					text-align: left;
					left: 15%;
				}
			}
		}

		.product-title {
			padding: 0;
		}

		.item-hover {
			text-align: center;
		}
	}

	.item {
		margin: 10px;
		display: inline-block;
		text-transform: uppercase;
		font-family: $m700;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		@include media('>sm') {
			min-height: 525px;
		}

		@include media('<=sm') {
			min-height: 500px;
		}

		p {
			/*margin: 0 0 10px;*/
		}

		.product-rating {
			&:after {
				position: absolute;
				left: 50%;
				vertical-align: -50%;
				height: 3px;
				display: block;
				content: "";
				background: #f4f4f4;
				width: 30%;
				text-align: center;
				z-index: 5;
				transform: translateX(-50%);
			}

			i {
				padding: 15px 0;
				font-size: 1em;
			}

			.fa-star {
				color: #ee3124;
			}

			.fa-star-o {
				color: #000;
				font-weight: bold;
			}
		}
	}

	.product-image {
		margin: 10px 0 10px;
		display: block;
		height: 230px;
		padding-right: 10px;
		line-height: 230px;
		vertical-align: top;
		text-align: center;

		img {
			display: inline-block;
			vertical-align: middle;
			max-height: 230px;
			opacity: 1;
			visibility: visible;
		}
	}

	.product-title {
		font-family: $m900;
		padding: 0 15px;
		line-height:1.2em;
		min-height: 20px;
		font-size: 18px;
	}

	.product-model {
		padding: 15px 0;
	}

	.product-price {
		padding-top: 5px;
		font-size: 1.5em; /* 24px / 16px */
	}

	.was {
		color: #ee3124;
		font-size: 0.625em; /* 10px / 16px */
		text-decoration: line-through;
	}

	&.slick-slide {
		.item {
			//width: 50%;
			//height:450px;
			max-width:324px;
			//width:320px;

			.label {
				top: 0;
			}
		}
		.item-hover {
			//width: 50%;
			max-width:324px;
			//height: 420px;
			width: 100%;
			max-height: 100%;
			margin: 0px auto;
			height: 95%;
		}
	}
}


/* Home Featured Product Section
	--------------------------------------------------*/
.featured-products-section {
	background-color: #f4f4f4;
	position: relative;
	text-align: center;
	height: 100%;

	.container {
		margin: 0 auto;
	}

	.section-header {
		margin: 0 auto;
		padding: 10px 0 20px;

		h3 {
			font-size:2.6em;
		}
		h4 {
			font-size:.92em;
		}
	}

	ul {
		list-style: none;
		margin: 20px 0;

		> li {
			padding: 0 15px;
			display: inline-block;
			vertical-align: top;

			&.active {
				color: #ee3124;
				text-decoration: underline;
				font-family: $m700;

				a, a:link, a:hover, a:visited, a:active {
					color: #ee3124;
				}
			}

			a, a:link, a:hover, a:visited, a:active {
				color: #000;
			}
		}
	}
}

.featured-category-prod-slick {
	.item-box {

		.item {
		}

		.item-hover {
			.wrap {
				padding: 24px;
			}
		}
	}
}

.listings-page-slider {

	.container-slider {
		background-image: url(/images/category-landing-main.png);
		background-repeat: no-repeat;
		height: 250px !important;
		background-position: top center;
		background-size: cover;
		position: relative;

		.banner-text-box {
			padding: 50px 0;
			height: 100%;

			&.dark {
				color: white;
				button, .button, .btn {
					color: white;
					border: 2px solid white;
					position: relative;
					top: 120px;
					&:hover {
						border: 2px solid #ee3124;
						color: white;
						background-color: #ee3124;
					}
					a, a:link, a:hover, a:visited, a:active {
						color: white;
					}
				}
			}

			&.light {
				color: black;
				button, .button, .btn {
					color: black;
					border: 2px solid black;
					position: relative;
					top: 120px;
					&:hover {
						border: 2px solid #ee3124;
						color: white;
						background-color: #ee3124;
					}
				}
			}
			.center-text-box {
				display: block;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				.text-box-column {
					width: 33.3%;
					padding: 4%;
				}
			}
			.line1, .line2, .line3 {
				font-size: 2.6em;
				line-height: 0.85em;
				font-family: $m900;
			}
		}


	}
	.navigation {
		bottom: 100px;
	}
	.slider-container {
		position: absolute;
		left: 5%;
		top: 5%;
		.category-slider-container {
			margin-top: 5%;
			margin-left: 14%;
			width: 80%;

			button, .button, .btn {
				display: inline-block;
				padding: 10px 20px;
				text-transform: uppercase;
				color: #000;
				border: 2px solid #000;
				background-color: transparent;
			}

			button:hover, .button:hover, .btn:hover {
				cursor: pointer;
				color: #fff;
				border: 2px solid #ee3124;
				background-color: #ee3124;

				a {
					color: #fff;
				}
			}
		}

	}
}

.price-range-box label {
	display: none;
}

/* Pagination
	--------------------------------------------------*/
.pagination {
	font-size: 0.75em; /* 12px / 16px */

	.container {
		margin: 0 auto;
		padding: 0 16.6%;
	}

	border-top: 1px solid #d1d4d6;
	border-bottom: 1px solid #d1d4d6;
	padding: 10px 0;
	text-align: center;

	p {
		margin-right: 10px;
		font-family: $m700;
		display: inline-block;
		vertical-align: middle;
	}

	.column-toggle {
		text-align: left;
	}

	.switch-box,
	.switch-ctrl {
		display: inline-block;
		vertical-align: middle;
	}

	.switch {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: 60px;
		height: 34px;
		margin: 0 5px;

		input {
			display: none;
		}
	}

	.sort-order-box label,
	.page-range-box label {
		display: none;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		-webkit-transition: .4s;
		transition: .4s;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: #fff;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .slider {
		background-color: #ee3124;
	}

	input:focus + .slider {
		box-shadow: 0 0 1px #ee3124;
	}

	input:checked + .slider:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
	}

	.slider.round {
		border-radius: 34px;
	}

	.slider.round:before {
		border-radius: 50%;
	}

	.page-range-box {
		font-family: $m700;
		text-align: left;
		border: 0;
		margin: 0;
		padding: 0;

		input {
			border: 1px solid #c2c2c2;
			text-align: center;
			width: 60px;
		}

		span {
			padding: 0 5px;

			&.currency {
				padding-left: 0;
			}
		}
		input {
			width: 40px;
		}
		.page-count,
		.paging-arrow-box {
			display: inline-block;
		}

		.paging-arrow-box {
			padding: 10px 0 0;

			.paging-arrow {
				&.next {
					color: #c5c5c5;
					&:after {
						font-family: FontAwesome;
						content: '\f054';
						padding: 0 10px;
					}
				}

				&.prev {
					color: #c5c5c5;
					&:before {
						font-family: FontAwesome;
						content: '\f053';
						padding: 0 10px;
					}
				}
			}
		}
	}

	.results {
		text-align: right;
	}

	.product-layout-picker-box {
		display: inline-block;
		margin: 0 10px 0 0;
	}

	.product-layout-picker {
		background: url("../images/icon-sprite.png") no-repeat;
		display: inline-block;
		vertical-align: middle;
		opacity: .5;
		cursor: pointer;
		text-indent: -9999px;
		width: 28px;
		height: 28px;
		border: 1px solid #000;
		padding: 5px;

		&.active {
			cursor: default;

			opacity: 1;
		}

		&.grid {
			background-position: -156px -42px;
		}

		&.list {
			background-position: -183px -42px;
		}
	}
}

ul.pagination {
	list-style: none;
	display: inline-flex;
	font-size: 16px;

	li {

		> * {
			padding:7px;
		}

		&.active {
			> * {
				text-decoration: underline;
				color: #C62828;
			}
		}

		&.disabled {
			> * {
				color:#BDBDBD;
			}
		}

	}
}

.backToTop {
	width: 52px;
	height: 52px;
	padding: 10px;
	text-align: center;
	background: #222;
	font-weight: bold;
	position: fixed;
	line-height: 26px;
	bottom: 52px;
	right: 52px;
	display: none;
	z-index: 9998;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	&:after {
		font-family: FontAwesome;
		content: '\f062';
		color: #fff;
	}
}

.backToTop:hover {
	background: #444;
}