/* -----------------------------------------
	11. E-Commerce (WooCommerce)
----------------------------------------- */

/* General
========================================= */
.button {
	@extend .btn;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
	padding: 14px 20px 14px 45px;
	background-color: $primary-color;
	margin-bottom: 35px;
	margin-left: 0;
	color: #fff;
	clear: both;
	border-left: .618em solid rgba(0,0,0,.15);
	position: relative;

	&:before {
		content: "\f058";
		font-family: "FontAwesome";
		position: absolute;
		left: 15px;
		top: 10px;
		font-size: 1.3em;
	}

	a:not(.button) {
		border-bottom: 1px solid;
	}

	.button {
		float: right;
		padding: 5px 10px;
		line-height: normal;
		font-style: normal;
		font-weight: normal;
		color: inherit;
		background: none;
		position: relative;
		text-decoration: none;
		text-align: left;
		text-transform: uppercase;
		font-size: 0.875em;

		&:after {
			font-family: "FontAwesome";
			content: "\f061";
			font-size: 0.65em;
			display: inline-block;
			margin: 0 0 0 5px;
			position: relative;
			top: -2px;
		}
	}
}

.woocommerce-message {
	@media ( max-width: $screen-sm-max ) {
		padding-bottom: 45px;

		.button {
			float: none;
			position: absolute;
			display: block;
			padding: 0;
			left: 45px;
			bottom: 15px;
			margin: 0;
		}
	}
}

.woocommerce-error {
	list-style: none;

	li {
		display: block;

		&:only-of-type {
			&:before {
				display: none;
			}
		}

		&:before {
			font-family: FontAwesome;
			content: "\f105";
			margin: 0 5px 0 0;
		}
	}

	&:before {
		content: "\f06a";
	}
}

.woocommerce-info {
	list-style: none;

	li {
		display: block;
	}

	&:before {
		content: "\f05a";
	}
}

.woocommerce-noreviews {
	padding-left: 20px;

	&:before {
		display: none;
	}
}

/* Shop Page
========================================= */
.shop-actions {
	padding-bottom: 22px;
	margin: 0 0 40px;
	border-bottom: 1px solid $border-color;
	line-height: normal;
	font-size: .875em;

	.actions {
		margin-top: 2px;
		float: left;

		@media ( max-width: $screen-sm-max ) {
			float: none;
			width: 100%;
			margin: 0 0 25px;
		}
	}

	.woocommerce-ordering {
		float: right;

		@media ( max-width: $screen-sm-max ) {
			float: none;
			width: 100%;

			select {
				width: 100%;
			}
		}
	}

	.woocommerce-result-count,
	.product-number {
		text-transform: uppercase;
		display: inline-block;
		margin: 0;
	}

	.woocommerce-result-count {
		margin-right: 15px;
	}

	.product-number {
		a {
			margin: 0 2px;
		}
	}
}

.woocommerce-ordering {
	position: relative;
	margin: 0;
}

/* Product Page
========================================= */
.images {
	position: relative;

	@media ( max-width: $screen-xs-max ) {
		margin: 0 0 20px;
	}

	a {
		display: inline-block;
		position: relative;
	}

	> a {
		img {
			width: 100%;
			padding: 15px;
			background-color: $secondary-bg;
		}
	}
}

.thumbnails {
	@include clearfix();

	> a {
		float: left;
		margin-right: 4%;
		width: 22%;
		margin-bottom: 15px;

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

		img {
			width: 100%;
		}

		.img-overlay {
			&:after {
				font-size: 22px;
				margin: -22px 0 0 -10px;
			}
		}
	}
}

.woocommerce-main-image {
	margin-bottom: 15px;
}

.onsale {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10;
	padding: 5px 14px;
	background-color: $primary-color;
	color: #FFF;
}

.price {
	del {
		font-size: 0.8em;
	}

	ins {
		text-decoration: none;
	}
}

.product_meta {
	@include clearfix();
	margin: 0 0 10px;
	letter-spacing: 0;
	@include font-style();

	.sku_wrapper {
		float: right;
	}
}

.entry.type-product {

}

.product .summary {
	// Styles in the product's single view content go here
	@include clearfix();

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

		li {
			font-size: 12px;
			text-transform: uppercase;
			position: relative;
			border-bottom: 1px solid $border-color;
			padding: 8px 0 7px 20px;
			line-height: normal;

			&:first-child {
				border-top: 1px solid $border-color;
			}

			&:before {
				content: "";
				background-color: $primary-color;
				width: 6px;
				height: 6px;
				position: absolute;
				left: 3px;
				top: 50%;
				margin-top: -3px;
				-webkit-transform: rotateZ(45deg);
				-moz-transform: rotateZ(45deg);
				-ms-transform: rotateZ(45deg);
				-o-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
		}
	}

	.price {
		display: block;
		margin: 15px 0;

		.amount {
			font-size: 1.5em;
			font-weight: bold;
			line-height: 1;
		}

		del {
			.amount {
				font-size: 1.2em;
				text-transform: uppercase;
				font-weight: normal;
				font-style: normal;
				margin-bottom: 4px;
			}
		}
	}

	.group_table {
		margin: 0 0 20px;
		padding: 10px;
		background-color: rgba($border-color, 0.3);

		td, th {
			padding: 5px 5px;
		}

		td:first-child {
			padding: 5px 0;
		}

		.quantity {
			display: block;
		}

		.price {
			display: table-cell;
			margin: 0;

			.amount {
				font-size: 13px;
			}
		}
	}

	h2, h3 {
		text-transform: uppercase;
	}

	h2 {
		font-size: 1.1em;
	}

	h3 {
		font-size: 1em;
	}

	form.cart {
		margin: 30px 0 0;

		.single_add_to_cart_button {
			height: 45px;
		}
	}

	.stock {
		display: inline-block;
		@include font-style();
		background: #f8f8f8;
		padding: 7px 10px 7px 25px;
		position: relative;

		&:before {
			position: absolute;
			font-family: FontAwesome;
			top: 7px;
			left: 6px;
			font-size: 1.05em;
		}
	}

	.in-stock {
		background-color: #A4ECD3;
		color: #435c50;

		&:before {
			content: "\f00c";
		}
	}

	.out-of-stock {
		background-color: #ff786d;
		color: #fff;

		&:before {
			content: "\f00d";
		}
	}
}

.quantity {
	height: 100%;
	width: 70px;
	position: relative;
	display: inline-block;

	input {
		border-radius: 0;
		line-height: 1;
		max-width: 100%;
		outline: none;
	}

	.qty {
		height: 45px;
		line-height: 1;
		padding: 10px 11px 10px;
		text-align: center;
	}

	.entry-item-media & {
		height: auto;
		width: auto;
	}
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	opacity: 1;
}

button.single_add_to_cart_button {
	text-align: center;
	min-width: 190px;
}

.variations {
	position: relative;
	z-index: 1;
	width: auto;

	@media ( max-width: $screen-sm-max ) {
		width: 100%;
	}

	.summary & {
		margin-bottom: 50px;
	}

	td {
		padding: 6px 6px 6px 12px;
		z-index: 5;
	}

	label {
		text-transform: uppercase;
		line-height: normal;
		margin: 0;
		font-size: 12px;
	}

	select {
		min-width: 120px;
		position: relative;
		z-index: 2;
		width: 100%;
		@include select-style();
		font-size: 12px;
		height: 24px;
		padding: 3px 10px;
	}

	.customSelect {
		.customSelectInner {
			padding: 7px 16px;
		}
	}

	.reset_variations {
		position: absolute;
		left: 0;
		bottom: -27px;
		font-size: 10px;
		text-transform: uppercase;
	}
}

/* Tabs */

.woocommerce-tabs {
	margin: 50px 0 70px;
	border-top: 1px solid $border-color;
	border-bottom: 1px solid $border-color;

	@media ( max-width: $screen-sm-max ) {
		margin-bottom: 35px;
	}

	.tabs {
		list-style: none;
		margin: 0;
		padding: 25px 0;
		@include clearfix();

		li {
			display: block;
			border-bottom: 1px solid $border-color;

			a {
				padding: 14px 0 13px;
				text-transform: uppercase;
				display: inline-block;
				font-size: 14px;
				border-bottom: 1px solid transparent;
				color: $text-color;
				line-height: 1;
				transition: all 0.18s ease;

				&:hover {
					text-decoration: none;
				}
			}
		}

		li.active a {
			font-weight: 600;
		}
	}

	.panel-container {
		border-left: 1px solid $border-color;

		@media ( max-width: $screen-xs-max ) {
			border: none;
		}
	}

	.panel {
		min-height: 230px;
		padding: 25px;
		font-size: 0.875em;

		@media ( max-width: $screen-xs-max ) {
			padding: 0;
		}

		> h2, #reviews h2  {
			display: none;
		}

		&#tab-reviews {
			#reply-title {
				font-size: 15px;
				text-transform: uppercase;
				border-bottom: 1px solid $border-color;
				padding: 0 0 5px;
			}

			#comments {
				margin: 0;

				.comment_container {
					padding: 0 0 15px 0;
				}

				.comment-text {
					padding: 0;
					margin: 0;
				}
			}
		}
	}

	.commentlist .avatar {
		padding: 5px;
	}
}

.shop_attributes {
	width: 100%;
	margin-top: 5px;

	th, td {
		font-size: 12px;
		text-transform: uppercase;
		position: relative;
		border-bottom: 1px solid $border-color;
		padding: 8px 0 7px 20px;
		line-height: normal;

		p {
			margin: 0;
		}
	}

	th {
		padding-left: 0;
	}

	tr:first-child {
		th,td {
			border-top: 1px solid $border-color;
		}
	}

	th:first-child {
		width: 15%;
		font-weight: normal;
		padding-left: 20px;

		&:before {
			content: "";
			width: 6px;
			height: 6px;
			position: absolute;
			background-color: $primary-color;
			left: 3px;
			top: 50%;
			margin-top: -3px;
			-webkit-transform: rotateZ(45deg);
			-moz-transform: rotateZ(45deg);
			-ms-transform: rotateZ(45deg);
			-o-transform: rotateZ(45deg);
			transform: rotateZ(45deg);
		}
	}

	td {
		font-weight: bold;
	}
}

.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;

	.avatar {
		width: 64px;
		height: 64px;
		float: left;
		margin: 0 15px 15px 0;
		overflow: visible;

		@media ( max-width: $screen-xs-max ) {
			display: none;
		}
	}

	.description {
		overflow: hidden;
	}

	.meta {
		margin: 0 0 10px;
	}
}

.woocommerce, .woocommerce-page {
	.star-rating {
		float: right;
		overflow: hidden;
		position: relative;
		height: 1em;
		line-height: 1em;
		font-size: 12px;
		width: 55px;
		font-family: FontAwesome;

		&:before {
			content: "\f006\f006\f006\f006\f006";
			float: left;
			top: 0;
			left: 0;
			position: absolute;
		}

		span {
			overflow: hidden;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			padding-top: 1.5em;

			&:before {
				content: "\f005\f005\f005\f005\f005";
				top: 0;
				position: absolute;
				left: 0;
			}
		}
	}
}

.comment-form-rating {
	p.stars {
		a {
			display: inline-block;
			position: relative;
			width: 25px;
			text-indent: -9999px;
			margin-right: 10px;
			border: none;

			&:after {
				font-family: FontAwesome;
				font-size: 1em;
				content: "\f006";
				margin-right: 7px;
				opacity: 1;
				display: inline-block;
				text-indent: 0;
				position: absolute;
				top: 0;
				left: 0;
			}

			&.active:after {
				content: "\f005";
			}
		}

		.star-2 {
			width: 35px;
			&:after {
				content: "\f006\f006";
			}
			&.active:after {
				content: "\f005\f005";
			}
		}

		.star-3 {
			width: 48px;
			&:after {
				content: "\f006\f006\f006";
			}
			&.active:after {
				content: "\f005\f005\f005";
			}
		}

		.star-4 {
			width: 61px;
			&:after {
				content: "\f006\f006\f006\f006";
			}
			&.active:after {
				content: "\f005\f005\f005\f005";
			}
		}

		.star-5 {
			width: 68px;
			&:after {
				content: "\f006\f006\f006\f006\f006"
			}
			&.active:after {
				content: "\f005\f005\f005\f005\f005";
			}
		}
	}
}

/* Cart Page
========================================= */
.shop_table {
	width: 100%;
	margin: 0 0 35px;

	th,td {
		border-bottom: 1px solid $border-color;

		@media ( max-width: $screen-xs-max ) {
			font-size: 0.8em;
		}
	}

	th {
		text-align: left;
		font-weight: normal;
		padding: 0 10px 5px;
		@include font-style(14px);

		@media ( max-width: $screen-xs-max ) {
			font-size: 0.65em;
		}
	}

	td {
		padding: 10px;
	}

	.variation {
		margin: 0 0 5px;

		dt, dd {
			display: inline;
			margin: 0;

			p {
				display: inline;
				margin: 0;
			}
		}
	}

	.product-price {
		margin: 0;

		.amount {
			font-size: 14px;
		}
	}

	.product-thumbnail {
		text-align: center;

		img {
			max-width: 80px;
		}

		@media ( max-width: $screen-xs-max ) {
			display: none;
		}
	}

	.product-subtotal {
		.amount {
			font-size: 14px;
			font-weight: bold;
			letter-spacing: -0.03em;
		}
	}

	.product-remove {
		@media ( max-width: $screen-xs-max ) {
			display: none;
		}

		.remove {
			display: inline-block;
			text-indent: -999em;
			border: none;
			color: $text-color;

			&:hover {
				text-decoration: none;
			}

			&:after {
				font-family: FontAwesome;
				content: "\f00d";
				font-size: 14px;
				display: block;
				text-indent: 0;
				margin-top: -23px;
			}
		}
	}

	.quantity {
		height: auto;

		@media ( max-width: $screen-xs-max ) {
			width: auto;
		}
	}
}

.cart-collateral-wrap {
	margin: 0 0 30px;
	padding-left: 35px;

	@media ( max-width: $screen-xs-max ) {
		padding: 0;
		margin: 20px 0 0;
	}

	.coupon {
		margin: 0 0 30px;

		label {
		 @extend .sr-only;
		}

		input[type=submit] {
			width: 100%;
			margin-top: 5px;
			padding-top: 15px;
		}
	}

	.button {
		width: 100%;
	}
}


.cart_totals {
	margin: 0 0 25px;

	h2 {
		border-bottom: 1px solid $border-color;
		padding-bottom: 3px;
		font-size: 16px;
		text-transform: uppercase;
	}

	table {
		width: 100%;
		margin: 0 0 30px;

		th, td {
			@include font-style(14px);
			text-align: left;
			padding: 10px 0;
			border-bottom: 1px solid $border-color;
		}

		td {
			padding: 5px;
			text-align: right;
		}

		th {
			font-weight: normal;
		}

		.order-total {
			th {
				color: initial;
			}
			.amount {
				font-size: 16px;
			}
		}
	}
}

#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		display: block;
		padding: 4px 0;
	}

	label {
		display: inline;
		margin-left: 5px;
	}
}

.shipping-calculator-button {
	display: block;
	font-size: 14px;
	border-bottom: 1px solid $border-color;

	&:after {
		font-family: FontAwesome;
		content: "\f107";
		margin-left: 5px;
	}

	&:hover {
		text-decoration: none;
	}
}

.shipping-calculator-form {
	select {
		width: 100%;
	}
}

.cross-sells {
	margin: 2.4em 0 0;
}

/* Checkout Page
========================================= */

.woocommerce {
	form.login {
		@include make-row();
		margin-top: -10px;

		p {
			@include make-xs-column(12);
		}

		.form-row-first,
		.form-row-last {
			@include make-sm-column(6);
		}

		.input-text {
			width: 100%;
		}

		.button {
			height: 44px;
			padding: 10px 64px;
		}

		.inline {
			display: inline-block;
			margin-left: 20px;

			#rememberme {
				margin-right: 5px;


				@media ( max-width: $screen-xs-max ) {
					margin: 5px 0 0;
					display: inline-block;
				}
			}
		}

		.lost_password {
			a {
				display: block;
				padding-bottom: 10px;
				border-bottom: 2px solid darken($border-color, 10%);
				margin-bottom: 15px;
			}
		}
	}

	form.checkout_coupon {
		margin: 0 0 30px;
	}
}

#customer-details {
	margin: 0 0 25px;
}

.woocommerce {
	.col2-set {
		@include make-row();

		.col-1, .col-2 {
			@include make-md-column(6);
		}
	}
}


.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	@include make-row();

	p, h3 {
		@include make-lg-column(12);
		margin: 0 0 20px;
	}

	.form-row-first,
	.form-row-last {
		@include make-sm-column(6);
	}

	.input-text {
		width: 100%;
	}

	abbr {
		text-decoration: none;
		border: none;
	}

	label.checkbox {
		display: inline-block;
	}

	textarea {
		min-height: 130px;
	}

	select {
		@include select-style();
	}
}

#order_review_heading {
	padding-top: 35px;
	margin-top: 20px;
	border-top: 2px solid darken($border-color, 10%);
}


#order_review {
	.shop_table {
		td, th {
			text-align: right;
			padding-left: 0;
			padding-right: 0;
		}

		.product-total {
			text-align: right;
		}

		.product-name {
			text-align: left;
		}

		tfoot {
			tr {
				border: none;
			}

			td, th {
				padding: 9px 0 0;
				text-align: right;
			}
		}

		.order-total {
			.amount {
				font-size: 16px;
			}
		}
	}
}

.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;

	li {
		padding: 10px 0;
		border-bottom: 1px solid darken($border-color, 10%);
	}

	label {
		display: inline-block;
		margin: 0 0 0 5px;
	}
}

.payment_method_paypal img {
 display: none;
}

.payment_method_paypal .about_paypal {
 font-size: 0.85em;
 margin-left: 10px;
}

.payment_box {
	padding: 15px;
	border: 1px solid $border-color;
	margin: 5px 0 0;

	p {
		margin: 0;
	}
}

.place-order {
	.terms {
		display: inline-block;
		margin-left: 20px;

		@media ( max-width: $screen-xs-max ) {
			margin: 5px 0 0;
			display: block;
		}
	}

	label[for="terms"] {
		display: inline-block;
		margin-right: 5px;
	}
}

/* Account Page
========================================= */
.woocommerce .edit {
	text-transform: uppercase;
	font-size: 0.775em;
}

.myaccount_user {
	padding: 25px;
	border: 1px solid $border-color;
	margin: 0 0 30px;
}

table.my_account_orders {
	margin: 0 0 30px;
}

.woocommerce {
	fieldset {
		margin: 30px 0;
		padding: 25px;
		border: 1px solid $border-color;
	}

	legend {
		padding: 0 10px;
		text-transform: uppercase;
		font-size: 14px;
	}
}

/* Widgets
========================================= */

/* Product Widget */
.product_list_widget {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		display: block;
	}
}

/* Product Categories */
.widget_product_categories,
.widget_layered_nav {
	@extend .widget_categories;
}

/* Cart Widget */
.widget_shopping_cart_content {
	li {
		position: relative;

		.remove {
			position: absolute;
			right: 5px;
			top: -5px;
			font-size: 20px;
			display: none;
		}

		&:hover {
			.remove {
				display: block;
			}
		}
	}

	.total {
		border-top: 1px solid $border-color;
		border-bottom: 1px solid $border-color;
		text-transform: uppercase;
		padding: 12px 0;
  	margin-top: 15px;
	}

	.buttons {
		@include clearfix();

		a {
			float: left;
			width: 49.5%;

			&:first-child {
				margin-right: 1%;
			}
		}
	}
}


/* WIDGET: WooCommerce Price Range
========================================= */
.price_slider {
	position: relative;
	text-align: left;
	height: 6px;
	width: 100%;
	width: calc( 100% - 14px);
	margin: 0 auto 20px;
	background: $border-color;

	.ui-slider-range {
		position: absolute;
		z-index: 1;
		background: darken($border-color, 15%);
		height: 6px;
		cursor: pointer;
	}

	.ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: 13px;
		height: 25px;
		margin-top: -10px;
		margin-left: -7px;
		cursor: pointer;
		outline: none;
		background-color: #000;
		-ms-touch-action: none;
		touch-action: none;

		&:active {
			outline: none;
		}

		&:after {
			content: "\f0c9";
			font-size: 10px;
			font-family: FontAwesome;
			color: #FFF;
			line-height: 1;
			position: absolute;
			top: 50%;
			width: 100%;
			text-align: center;
			margin-top: -6px;
		}
	}
}

.price_slider_wrapper {
	.price_slider_amount {
		position: relative;
		@include font-style();
	}

	.price_label {
		position: absolute;
		right: 0;
		top: 0;
	}
}