$shop-star-active-color:			$theme-color !default
$shop-star-background-color:		#eaeaea !default

$shop-view-mode-button-bg:			#e2e2e2 !default
$shop-view-mode-button-color:		#999 !default
$shop-view-mode-button-hover-bg:	$theme-color !default
$shop-view-mode-button-hover-color:	#fff !default
$shop-product-hover-border:			#e5e5e5 !default

$shop-price-font-size:				20px !default
$shop-price-color:					$theme-highlight-color !default
$shop-old-price-font-size:			16px !default
$shop-old-price-color:				#000 !default

$shop-button-color:					$theme-color !default
$shop-button-hover-color:			#fff !default

$shop-share-link-color:				#999 !default
$shop-border-color:					#e5e5e5 !default

$review-heading-color:				$theme-color !default
$review-bg-color:					#f8f8f8 !default
$review-border-color:				#e1e1e1 !default
$review-meta-color:					#cfcfcf !default

.woocommerce
	.clear
		clear: both

	#respond input#submit,
	button.button,
	input.button
		color: $button-default-color
		font-family: $button-font-family
		font-weight: $font-weight-bold
		text-transform: uppercase
		background: $button-default-bg-color
		display: inline-block
		line-height: 1
		border: 2px solid $button-default-border
		padding: 10px 40px
		margin-bottom: 5px
		border-radius: 25px
		@include transition(all 0.2s ease-in-out)

		&:focus,
		&:hover,
		&:active
			outline: none
			text-decoration: none
			color: $button-default-color
			border-color: $button-default-hover-border
			background: none

		&:active
			position: relative
			top: 2px

		i.fa
			margin-right: 5px

	#respond input#submit
		background: $button-primary-bg-color
		border-color: $button-primary-bg-color
		color: #fff

		&:hover,
		&:active,
		&:focus
			background: lighten($button-primary-bg-color, 2%)
			border-color: lighten($button-primary-bg-color, 2%)
			color: #fff

	.star-rating
		display: block
		overflow: hidden
		font-size: 15px
		line-height: 20px
		position: relative
		font-family: FontAwesome
		height: 20px
		width: 70px
		margin-bottom: 10px


		&:before
			color: $shop-star-background-color
			content: "\f005\f005\f005\f005\f005"
			position: absolute
			left: 0
			right: 0
			text-align: center

		span
			overflow: hidden
			position: absolute
			top: 0
			left: 0
			color: $shop-star-active-color
			padding-top: 1.5em

			&:before
				position: absolute
				content: "\f005\f005\f005\f005\f005"
				left: 0
				top: 0
				text-align: center

	.price
		.amount
			color: $shop-price-color
			font-family: $headings-font-family
			font-size: $shop-price-font-size
			font-weight: bold

		del
			color: $shop-old-price-color

			.amount
				color: $shop-old-price-color
				font-weight: normal
				font-size: $shop-old-price-font-size
				font-style: italic

		ins
			text-decoration: none


	.woocommerce-toolbar
		margin-bottom: 30px
		@include clearfix()

		.woocommerce-result-count
			float: left
			line-height: 40px
			margin-bottom: 0

		.woocommerce-view-mode
			float: right
			margin-left: 20px

			a
				display: inline-block
				width: 40px
				height: 40px
				line-height: 40px
				text-align: center
				vertical-align: middle
				background: $shop-view-mode-button-bg
				color: $shop-view-mode-button-color
				border-radius: 4px
				font-size: 16px

				&.active,
				&:hover
					color: $shop-view-mode-button-hover-color
					background: $shop-view-mode-button-hover-bg

		form.woocommerce-ordering
			float: right
			width: 250px

	.shop-products
		padding-bottom: 40px

		.product
			background: #fff
			margin-bottom: 40px

			.star-rating
				margin: 0 auto 10px

			.product-wrapper
				text-align: center
				border: 2px solid transparent
				border-bottom: none
				position: relative

				&:hover
					border-color: $shop-product-hover-border

					.product-buttons
						opacity: 1
						visibility: visible

						@include transition(opacity .3s ease-out, visibility .3s ease-out)

				.product-image-wrapper
					> a
						position: relative
						display: block

						.secondary-image
							width: 100%
							height: 100%
							position: absolute
							left: 0
							top: 0
							opacity: 0

							@include transition(opacity .3s ease)
						&:hover .secondary-image
							opacity: 1

				.product-description-wrapper
					padding-left: 10px
					padding-right: 10px

					.product-short-description
						display: none

				.product-buttons
					background: #fff
					padding: 20px 10px
					position: absolute
					top: 100%
					z-index: 1
					border: 2px solid $shop-product-hover-border
					border-top: none
					left: -2px
					right: -2px
					opacity: 0
					visibility: hidden

					> div
						position: relative

						&:before
							content: ""
							position: absolute
							left: 0
							top: 50%
							width: 100%
							z-index: -1
							border-top: 1px dotted $separator-color

					.yith-wcwl-add-to-wishlist a.add_to_wishlist,
					.add_to_cart_button,
					.compare-button a.compare
						font-size: 0
						background: #fff
						color: $shop-button-color
						display: inline-block
						width: 36px
						height: 36px
						line-height: 36px
						text-align: center
						vertical-align: middle
						border: 1px solid $shop-button-color
						margin-right: 10px
						border-radius: 50%
						z-index: 1

						&:before
							font-family: FontAwesome
							font-size: 14px

						&:hover
							background: $shop-button-color
							color: $shop-button-hover-color


					.yith-wcwl-add-to-wishlist
						display: inline-block

						a.add_to_wishlist
							&:before
								content: "\f004"

					.compare-button
						display: inline-block

						a.compare
							margin-left: -4px
							margin-right: 0
							&:before
								content: "\f074"

					a.add_to_cart_button
						width: 40px
						height: 40px
						line-height: 40px

						&:before
							content: "\f291"
							font-size: 15px

		// list view
		.product.list-view
			float: none
			width: auto

			.star-rating
				margin-left: 0

			.product-wrapper
				border: none

			.product-image-wrapper
				float: left
				max-width: 31%
				margin-right: 6%
				border: 2px solid $shop-product-hover-border

			.product-description-wrapper
				text-align: left

				.product-short-description
					display: block
					margin-top: 20px

			.product-buttons
				position: relative
				opacity: 1
				visibility: visible
				border: none
				left: auto
				right: auto
				width: auto
				top: auto
				overflow: hidden
				text-align: left
				padding: 10px 0

				> div
					padding-left: 10px

	// product view
	div.product
		div.images
			img
				display: block
				width: 100%
				height: auto
				box-shadow: none
				border: 2px solid $shop-product-hover-border

		.product_title
			font-size: 24px

		.price
			.amount
				font-size: 24px

			del .amount
				font-size: 18px

		.woocommerce-product-rating
			line-height: $line-height-base
			margin-top: 10px
			margin-bottom: 10px

			.star-rating
				margin-top: 0
				float: left


		form.cart
			float: left
			margin-bottom: 20px

			div.quantity
				margin-right: 0

				.amyui-number-input
					width: 110px
					float: left
					margin-right: 10px

				.qty
					width: 100%
					border-radius: $input-height-base

				.single_add_to_cart_button
					background-color: $shop-button-color
					border-color: $shop-button-color
					margin-right: 10px
					padding-left: 20px
					padding-right: 20px

					&:before
						font-family: FontAwesome
						content: "\f291"
						margin-right: 10px

					&:hover,
					&:focus,
					&:active
						background: lighten($shop-button-color, 3%)
						border-color: lighten($shop-button-color, 3%)
						color: $shop-button-hover-color

		.yith-wcwl-add-to-wishlist
			float: left
			line-height: $input-height-base

			a.add_to_wishlist
				&:before
					content: "\f004"

		.yith-wcwl-add-to-wishlist a.add_to_wishlist,
		a.compare.button
			display: inline-block
			font-size: 0
			width: $input-height-base
			height: $input-height-base
			line-height: $input-height-base
			border: 1px solid $shop-button-color
			text-align: center
			border-radius: $input-height-base
			margin-right: 10px
			background: $shop-button-hover-color
			color: $shop-button-color

			&:before
				font-family: FontAwesome
				font-size: 14px

			&:hover,
			&:focus,
			&:active
				background: $shop-button-color
				color: $shop-button-hover-color

		a.compare.button
			&:before
				font-family: FontAwesome
				font-size: 14px
				content: "\f074"

		.product_meta
			padding-top: 20px
			border-top: 1px dotted $separator-color
			font-weight: bold

			.posted_in,
			.tag_as
				display: block

				a
					font-weight: normal

					&:first-child
						margin-left: 5px

		.share-post
			border-top: 1px dotted $separator-color
			line-height: 40px
			margin: 15px 0
			padding: 15px 0

		.share-product-title
			display: inline-block
			line-height: 40px
			margin-right: 15px
			margin-top: 0

			font-family: $font-family-base
			text-transform: none

		.product-socials-share-wrap
			display: inline-block

			a
				padding-left: 5px
				padding-right: 5px
				color: $shop-share-link-color

				&:hover,
				&:focus,
				&:active
					color: $link-hover-color

		// tabs
		.woocommerce-tabs
			ul.tabs
				padding-left: 0
				margin-bottom: 0

				&:before
					border: none

				li
					border-color: $shop-border-color
					border-bottom: none
					border-radius: 0
					background-color: #fff
					margin: 0 -5px
					padding-left: 25px
					padding-right: 25px

					&:first-child
						margin-left: 0

					&.active
						background: $link-hover-color
						border-color: $link-hover-color

						a
							color: #fff

					&:before,
					&:after
						display: none

					a
						font-family: $headings-font-family
						font-weight: $font-weight-bold
						text-transform: uppercase
						padding-top: 12px
						padding-bottom: 12px
						@include transition(none)

			.entry-content
				border: 1px solid $shop-border-color
				padding: 20px

		table.shop_attributes
			td
				padding: 8px

		// review
		#comments
			h2
				color: $review-heading-color
				margin: 10px 0 50px 0

			ol
				list-style: none
				padding: 0
				margin: 0

			.comment_container
				margin-bottom: 10px
				min-height: 75px
				padding-bottom: 15px
				padding-left: 85px
				position: relative
				background: #fff

				.avatar
					position: absolute
					left: 0
					border-radius: 50%

			.comment-text
				background: $review-bg-color
				padding: 20px
				border: 1px solid $review-border-color
				position: relative

				&:before,
				&:after
					position: absolute
					top: 30px
					right: 100%
					border: 1px solid transparent
					content: " "
					width: 0
					height: 0
					pointer-events: none

				&:before
					border-color: transparent
					border-right-color: $review-border-color
					border-width: 9px
					margin-top: -9px

				&:after
					border-color: transparent
					border-right-color: $review-bg-color
					border-width: 8px
					margin-top: -8px

				.star-rating
					float: right

				.meta
					font-style: italic

					time
						color: $review-meta-color

				.description
					margin-top: 10px
					padding-top: 10px

	#review_form
		h3.commet-reply-title
			color: $review-heading-color
			margin-bottom: 20px

		#respond p
			margin-bottom: 20px

		p.stars a
			border-right: 1px solid $review-border-color
			margin-right: 1em

			&:last-child
				border-right: none

			&:before
				font-family: FontAwesome

			&.star-1
				width: 2em

				&:before
					content: "\f006"

				&.active:before
					content: "\f005"

			&.star-2
				width: 3em

				&:before
					content: "\f006\f006"

				&.active:before
					content: "\f005\f005"

			&.star-3
				width: 4em

				&:before
					content: "\f006\f006\f006"

				&.active:before
					content: "\f005\f005\f005"

			&.star-4
				width: 5em

				&:before
					content: "\f006\f006\f006\f006"

				&.active:before
					content: "\f005\f005\f005\f005"

			&.star-5
				width: 6em

				&:before
					content: "\f006\f006\f006\f006\f006"

				&.active:before
					content: "\f005\f005\f005\f005\f005"