@import 'config.less';

/** Product **/
.woocommerce,
.woocommerce-page {
	.tm-container {
		background: @white;
		&.tm-sidebar-left {
			position: relative;
			&:before {
				width: 1px;
				top: 20px;
				bottom: 20px;
				position: absolute;
				content: "";
				z-index: 1;
				background: lighten(@grey, 15%);
				left: 25%;
			}
			.page-content {
				padding: 0;
			}
			.page-sidebar {
				padding: 20px;
				background: @white; 
			}
		}
		&.tm-sidebar-right {
			position: relative;
			&:before {
				width: 1px;
				top: 20px;
				bottom: 20px;
				position: absolute;
				content: "";
				z-index: 1;
				background: lighten(@grey, 15%);
				right: 25%;
			}
			.page-content {
				padding: 0;
			}
			.page-sidebar {
				padding: 20px; 
				background: @white; 
			}
		}
	}
	/** WooCommerce Price Filter **/
	.widget_price_filter {
		.price_slider_wrapper {
			padding-top: 10px;
			.ui-slider-horizontal {
				height: 3px;
				background: #ccc;
			}
			.ui-slider { 
				position: relative;
				.ui-slider-range{
					background: @scheme;
					position: absolute;
					z-index: 1;
					display: block;
					height: 100%;
					top: 0;
				}
				.ui-slider-handle {
					background: #fff;
					height: 15px;
					width: 15px;
					cursor: pointer;
					position: absolute;
					z-index: 2;
					top: -6px;
					outline: 0;
					.rounded(15px);
					border: 2px solid @scheme;
					.transition(none);
				}
				.ui-slider-handle:last-child {
					margin-left: -15px;
				}
			}
			.price_slider_amount {
				line-height: 36px;
				margin-top: 22px;
				.button {
					float: right;
					border: none;
					margin: 0;
					cursor: pointer;
				}
				.price_label {
					input {
						background: transparent;
						border: none;
						height: auto;
						padding: 0;
						width: 30%;
					}
				}
			}
		}
	}
	/** widget_layered_nav **/
	.widget_layered_nav {
		&[class*="chosen-"] {
			ul {
				display: inline-block;
				width: 100%;
				li {
					float: left;
					width: 32px;
					height: 32px;
					display: inline-block;
					text-align: center;
					line-height: 32px;
					margin: 0 5px 5px 0;
					.rounded;
					a {
						display: block;
						font-size: 11px;
						small.count {
							display: none;
						}
					}
				}
			}
		}
		&.chosen-size {
			ul {
				li {
					border: 1px solid @grey;
					&.chosen {
						background: @scheme;
						border: 1px solid @scheme;
						a {
							color: @white;
						}
					}
				}
			}
		}
		&.chosen-color {
			ul {
				li {
					text-indent: -9999px;
					border-color: transparent;
					&.white {
						border:1px solid @grey;
						&.chosen {
							&:after {
								height: 16px;
								width: 16px;
								position: absolute;
								content: "";
								border: 1px solid @grey;
								left: 50%;
								margin-left: -8px;
								top: 50%;
								margin-top: -8px;
							}
						}
					}
					&.chosen {
						position: relative;
						&:after {
							height: 16px;
							width: 16px;
							position: absolute;
							content: "";
							border: 1px solid @white;
							left: 50%;
							margin-left: -8px;
							top: 50%;
							margin-top: -8px;
						}
					}
				}
			}
		}
	}
	/** product_list_widget **/
	.product_list_widget {
		li {
			display: inline-block;
			width: 100%;
			border-bottom: 1px solid lighten(@grey, 10%);
			padding: 15px 0;
			&:first-child {
				padding-top: 0;
			}
			&:last-child {
				padding-bottom: 0;
				border-bottom: none;
			}
			a {
				text-transform: lowercase;
				display: block;
				&:first-letter {
					text-transform: uppercase;
				}
				img {
					width: 70px;
					float: left;
					margin-right: 10px;
					border:1px solid lighten(@grey, 10%);
				}
			}
			.star-rating {
				float: none;
				margin: 5px 0;
			}
		}
	}
	/** Sale **/
	.onsale {
		position: absolute;
		background: @orange;
		width: 4em;
		height: 4em;
		line-height: 4em;
		color: #fff;
		.rounded(40px);
		top: 10px;
		left: 10px;
		text-align: center;
	}
	/**rating**/
	.star-rating {				
		float: right;
		overflow: hidden;
		position: relative;
		height: 1em;
		line-height: 1.1em;
		font-size: 14px;
		width: 66px;
		font-family: 'FontAwesome';
		color: @black;
		&:before {
			content:"\f006\f006\f006\f006\f006";
			color: darken(@grey, 10%);
			float: left;
			left: 1px;
			position: absolute;
			top: 0;
		}
		span {
			float: left;
			left: 0;
			overflow: hidden;
			padding-top: 1.5em;
			position: absolute;
			top: 0;
			&:before {
				left: 1px;
				position: absolute;
				top: 0;
				content:"\f005\f005\f005\f005\f005";
			}
		}
	}
	h1.page-title {
		line-height: 100%;
		margin-bottom: 15px;
		position: absolute;
		left: 40px;
		top: 80px;
		color: @white;
		text-transform: uppercase;
		font-size: 35px;
	}
	img.img-category {
		width: 100%;
		height: 200px;
		.rounded(5px);
	}
	.term-description {
		position: absolute;
		left: 40px;
		top: 120px;
		width: 70%;
		color: rgba(0,0,0,0.5);
	}
	p.woocommerce-result-count {
		float: left;
		padding: 10px 0;
		margin: 20px 0 0 0;
	}
	.woocommerce-ordering {
		float: right;
		margin: 20px 0 50px 0;
	}
	ul.products {
		clear: both;
		display: inline-block;
		width: 100%;
		.transition;
		&:hover li {
			.opacity(0.5);
		}
		li {
			float: left;
			position: relative;
			text-align: center;
			.transition;
			margin-bottom: 30px;
			padding-bottom: 20px;
			&:hover {
				.opacity(1);
			}
			&:hover a.button,
			&:hover a.added_to_cart{
				.opacity(1);
				visibility: visible;
				display: block\9;
				margin-top: -7em;
			}
			a.button,
			a.added_to_cart {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 8em;
				height: 8em;
				line-height: 8em;
				.rounded(8em);
				margin:0 0 0 -4em;
				padding: 0;
				.opacity(0);
				visibility: hidden;
				visibility: visible\9;
				display: none\9;
				&:hover {
					background: @black;
					color: #fff;
				}
			}
			span.price {
				display: block;
				text-transform: uppercase;
				font-weight: bold;
				color: darken(@grey, 10%);
				ins {
					text-decoration: none;
				}
				del .amount {
					font-weight: normal;
				}
				.from {
					text-transform: none;
					color: @dark;
					font-weight: normal;
				}
			}
			.star-rating {
				position: absolute;
				display: block;
				margin: 0 0 .5em;
				float: none;
				left: 50%;
				margin-left: -33px;
				bottom: -5px;
				text-align: left;
				span {
					text-align: left;
				}
			}
			a {
				display: block;
				img {
					width: 100%;
				}
				h3 {
					color: @black;
					.transition;
					margin-top: 15px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-transform: lowercase;
					&:first-letter {
						text-transform: uppercase;
					}
					&:hover {
						color: @scheme;
					}
				}
				
			}
			&.product-category {
				width: 25%;
				text-align: left;
				margin: 0;
				padding-bottom: 0;
				&:nth-child(1),&:nth-child(10),&:nth-child(20) {
					width: 50%;
					h3 {
						font-size: 24px;
						padding: 5px 20px
					}
				}
				a {
					img {
						float: left;
						width: 100%;
					}
					h3 {
						position: absolute;
						background: @white;
						padding: 5px;
						left: 20px;
						bottom: 20px;
						max-width: 80%;
						.count {

						}
					}
				}
			}
		}
	}
	.quantity {
		position: relative;
		.minus, .plus, .ui-spinner-up, .ui-spinner-down {
			text-indent: -9999px;
			.transition;
			position: absolute;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			content: "";
			display: inline-block;
			height: 0;
			width: 0;
			background: none;
			right: 10px;
			cursor: pointer;
		}
		.minus, .ui-spinner-up {							
			border-bottom: 6px solid @grey;
			border-top: 6px solid transparent;							
			top: 3px;
			&:hover {
				border-bottom: 6px solid @black;
			}						
		}
		.plus, .ui-spinner-down {
			border-top: 6px solid @grey;
			border-bottom: 6px solid transparent;
			bottom: 3px;
			&:hover {
				border-top: 6px solid @black;
			}
		}
		.input-text {	
			width: 60px;
		}
	}
	div.product {
		position: relative;
		.images {
			float: left;
			width: 50%;
			padding-right: 30px;
			a {
				display: inline-block;
				margin: 0 10px 10px 0;
				width: 100%;
				text-align: center;
				img {
					width: 100%;
				}
			}
			.thumbnails {
				a {
					width: auto;
					float: left;
					img {
						height: 70px;
						width: auto;
					}
				}
			}
		}
		.summary {
			float: right;
			width: 50%;
			.product_title {
				display: none;
			}
			p.price {
				color: @black;
				font-size: 2em;
				padding: 10px 0;
				line-height: 100%;
				.from {
					color: @dark;
					font-size: 12px;
					font-weight: bold;
				}
				del {
					color: darken(@grey, 10%);
					font-size: 0.6em;
				}
				ins {
					text-decoration: none;
				}
			}
			p.cart {
				margin-bottom: 30px;
			}
			.cart {
				margin: 30px 0 0 0;
				button.single_add_to_cart_button {
					margin:0 0 30px 0;
				}
				.quantity {
					float: left;
					margin-right: 5px;
				}
				.variations {
					position: relative;
					tr {
						margin-bottom: 10px;
						td {
							vertical-align: sub;
						}
						td.label {
							padding:11px 15px 0 0;
						}
						td.value {
							width: 100%;
							padding-bottom: 10px;
							select {
								width: 100%;
							}
							a.reset_variations {
								margin-top: 10px;
								display: block;
							}
						}
					}
				}
				.single_variation_wrap {
					border-top: 1px solid @grey;
					.single_variation {
						padding: 25px 0;
						.price {
							font-size: 2.5em;
							line-height: 100%;
						}
					}
				}
			}
			.product_meta {
				border-top: 1px dotted @grey;
				padding-top: 10px;
				.posted_in,.tagged_as {
					display: block;
					margin: 5px 0;
				}
			}
		}
		.woocommerce-tabs {
			clear: both;
			padding-top: 40px;
			margin-bottom: 30px;
			.shop_attributes {
				width: 100%;
				tr {
					border-bottom: 1px dotted @grey;
					&:last-child {
						border: none;
					}
					text-align: left;
					th {
						width: 100px;
					}
					td {
						padding: 10px 0;
						font-style: italic;
						color: #666;
					}
				}
			}
		}
		.related, .upsells {
			border-top: 1px solid lighten(@grey, 15%);
			padding-top: 30px;
			h2 {
				text-transform: uppercase;
			}
		}
	}
	/**Respond**/
	#respond {
		border-top: 1px solid lighten(@grey, 10%);
		padding-top: 20px;
		margin-top: 20px;
		#reply-title {
			text-transform: uppercase;
			margin-bottom: 20px;
		}
		#commentform {
			width: 50%;
			p {
				label {
					display: inline-block;
				} 
				input, textarea#comment  {
					width: 100%;
					margin: 0;
				}
				textarea#comment {
					resize: vertical;
					min-height: 100px;
					margin-top: 5px;
				}
				&.stars {
					overflow: hidden;
					position: relative;
					height: 1em;
					line-height: 1.1em;
					font-size: 14px;
					width: 66px;
					font-family: 'FontAwesome';
					color: @scheme;
					margin-top: 10px;
					&:before {
						content:"\f006\f006\f006\f006\f006";
						color: darken(@grey, 10%);
						float: left;
						left: 0;
						position: absolute;
						top: 0;
					}
					span {
						a {
							float: left;
							height: 0;
							left: 0;
							overflow: hidden;
							padding-top: 1em;
							position: absolute;
							top: 0;
							&:before {
								left: 0;
								position: absolute;
								top: 0;
								visibility: hidden;
								content:"\f005\f005\f005\f005\f005";
							}
							&.star-1 {
								width: 13px;
								z-index: 10;
							}
							&.star-2 {
								width: 26px;
								z-index: 9;
							}
							&.star-3 {
								width: 39px;
								z-index: 8;
							}
							&.star-4 {
								width: 52px;
								z-index: 7;
							}
							&.star-5 {
								width: 65px;
								z-index: 6;
							}
							&.active:before {
								color: @black;
								visibility: visible;
							}
						}
					}
				}
				&.form-submit {
					input#submit {
						border: none;
						width: auto;
					}
				}
			}
		}
	}
	/** Review - Comment **/
	#reviews { 
		#comments {
			ol.commentlist {
				li {
					padding: 20px 0;
					&:last-child {
						padding-top: 0;
					}
					img.avatar {
						float: left;
					}
					.comment-text {
						margin-left: 75px;
						border: 1px solid lighten(@grey, 7%);
						.rounded;
						padding: 10px;
						position: relative;
						&:after {
							position: absolute;
							border-left: 7px solid rgba(0, 0, 0, 0);
							border-bottom: 7px solid rgba(0, 0, 0, 0);
							border-top: 7px solid rgba(0, 0, 0, 0);
							border-right: 7px solid lighten(@grey, 7%);
							top: 10px;
							content: "";
							display: inline-block;
							height: 0;
							left: -15px;
							width: 0;
						}
						p.meta {
							margin-bottom: 5px;
							time {
								color: darken(@grey, 10%);
							}
						}
					}
				}
			}
			.add_review {
				padding-left: 75px;
				a {
					margin: 0;
				}
			}
		}
	}
}