/**
 * 
 * 19. woocommerce-layout.scss
 * 
 * Applies layout to the default WooCommerce frontend design
 * 
 */

/**
 * Imports
 */
@import "mixins";
@import "variables";

/**
 * Styling begins
 */
.woocommerce, .woocommerce-page {

	/**
	 * 19.01 General layout styles
	 */
	.col2-set {
		@include clearfix();
		width: 100%;

		.col-1 {
			float: left;
			width: 48%;
		}
		.col-2 {
			float: right;
			width: 48%;
		}
	}

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

	/**
	 * 19.02 Product page
	 */
	div.product,
	#content div.product {
		div.images {
			float: left;
			width: 48%;
		}

		div.thumbnails {
			@include clearfix();

			a {
				float: left;
				width: 30.75%;
				margin-right: 3.8%;
				margin-bottom: 1em;
			}

			a.last {
				margin-right: 0;
			}

			a.first {
				clear: both;
			}

			&.columns-1 {
				a {
					width: 100%;
					margin-right: 0;
					float: none;
				}
			}

			&.columns-2 {
				a {
					width: 48%;
				}
			}

			&.columns-4 {
				a {
					width: 22.05%;
				}
			}

			&.columns-5 {
				a {
					width: 16.9%;
				}
			}
		}

		div.summary {
			float: right;
			width: 48%;
		}

		.woocommerce-tabs {
			clear: both;

			ul.tabs {
				@include menu();
			}
		}

		#reviews {
			.comment {
				@include mediaright();
			}
		}
	}

	/**
	 * 19.03 Product loops
	 */
	.related,
	.upsells.products {
		@include clearfix();
		clear: both;

		ul.products,
		ul {
			float: none;

			li.product {
				width: 22.15%;

				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	ul.products {
		clear: both;
		margin-left: -20px;
		margin-right: -20px;
		@include clearfix();

		li.product {
			float: left;
			clear: none;
			margin: 0;
			padding: 0 0 2.8em 20px;
			border-right: solid 20px rgba(0, 0, 0, 0);
			position: relative;
			width: 22.05%;
			margin-left: 0;
		}
	}

	.woocommerce & {
		&.columns-1,
		&.columns-2,
		&.columns-3,
		&.columns-4,
		&.columns-5,
		&.columns-6 {
			ul.products {
				li.product {
					float: left;
					clear: none;
				}
			}
		}		
	}

	&.columns-1 {

		ul.products {
			li.product {
				width: 100%;
				margin-right: 0;
			}
		}
	}

	&.columns-2 {
		ul.products {
			li.product {
				width: 50%;

				&:nth-child(2n+1) {
					clear: left;
				}
			}
		}
	}

	&.columns-3 {
		ul.products {
			li.product {
				width: 33.3%;

				&:nth-child(3n+1) {
					clear: left;
				}
			}
		}
	}

	&.columns-4 {
		ul.products {
			li.product {
				width: 25%;

				&:nth-child(4n+1) {
					clear: left;
				}
			}
		}
	}

	&.columns-5 {
		ul.products {
			li.product {
				width: 20%;

				&:nth-child(5n+1) {
					clear: left;
				}
			}
		}
	}

	&.columns-6 {
		ul.products {
			li.product {
				width: 16.66%;

				&:nth-child(6n+1) {
					clear: left;
				}
			}
		}
	}

	.woocommerce-result-count {
		float: left;
		
	}
	.woocommerce-ordering {
		float: right;
		margin: 0;

		.select2-container {
			width: auto !important;
		}

		select,
		.select2-container .select2-choice,
		.select2-container .select2-selection {
			@extend %uppercase;
			@include clearfix();
			padding: 0;
			background-color: transparent;
			margin: 0 0 1em;
			padding: 0;
			font-size: 14px;
			line-height: 26px;
			font-weight: 700;
			letter-spacing: 0.5px;
			color: $color-light-gray;
			border: none;
			position: relative;

			.select2-chosen,
			.select2-selection__rendered {
				margin-right: 35px;
			}
		}

		.select2-container--open.select2-container--below .select2-selection,
		.select2-container--open.select2-container--above .select2-selection {
			box-shadow: none;
		}
		
		.select-arrow {
			color: $color-light-gray;
		}

		@include until($bp-xs) {
			float: left;
			clear: left;
		}
	}

	&.archive {
		.select2-results li {
			font-weight: 700;
			text-transform: uppercase;
			color: $color-dark-gray;
		}
	}

	.woocommerce-pagination {
		ul.page-numbers {
			@include menu();
		}
	}

	/**
	 * 19.04 Cart page
	 */
	table.cart,
	#content table.cart {
		img {
			height: auto;
		}

		td.actions {
			text-align: right;
			padding-left: 0;
			padding-right: 0;

			input {
				line-height: 17px;	
			}

			.coupon {
				float: left;

				label {
					display: none;
				}
			}
		}
	}

	.cart-collaterals {
		@include clearfix();
		width: 100%;

		h2 {
			@include heading-small-alt();
			text-align: left;
		}

		.related {
			width: 30.75%;
			float: left;
		}

		.cross-sells {
			width: 48%;
			float: left;

			ul.products {
				display: flex;
				flex-wrap: wrap;
				float: none;
				
				@include at-least($bp-sm) {
					li {
						width: 48%;
					}
				}
			}
		}

		.shipping_calculator {
			width: 48%;
			@include clearfix();
			clear: right;
			float: right;

			.col2-set {
				.col-1,
				.col-2 {
					width: 47%;
				}
			}
		}

		.cart_totals {
			float: right;
			width: 48%;

			th {
				text-align: left;
			}

			td {
				text-align: right;
			}
		}
	}

	&.page-cart-style-2 {
		.woocommerce > form {
			width: 69%;
			float: left;
		}

		.cart-collaterals {
			width: 29%;
			float: right;

			.cart_totals {
				width: 100%;
			}
		}
	}

	/**
	 * 19.05 Cart sidebar
	 */
	ul.cart_list,
	ul.product_list_widget {
		li {
			@include mediaright();
		}
	}

	&.widget-left-media {
		ul.cart_list,
		ul.product_list_widget {
			li {
				img {
					float: left;
					margin-left: 0;
					margin-right: 4%;
				}
			}
		}

		ul.cart_list {
			li a {
				padding: 0 20px 0 0;
			}

			a.remove {
				left: auto;
				right: 0;
			}
		}
	}

	/**
	 * 19.06 Forms
	 */
	form {
		.form-row {
			@include clearfix();

			label {
				display: block;

				&.checkbox {
					display: inline;
				}
			}

			select {
				width: 100%;
			}

			.input-text {
				@include box-sizing(border-box);
				width: 100%;
			}
		}

		.form-row-first,
		.form-row-last {
			float: left;
			width: 47%;
			overflow: visible;

			@include until($bp-xxs) {
				width: 100%;
				clear: both;
			}
		}

		.form-row-last {
			float: right;
		}

		.form-row-wide {
			clear: both;
		}
	}

	#payment {
		.form-row {
			select {
				width: auto;
			}
		}

		.terms {
			text-align: right;
			padding: 0;
		}

		#place_order {
			float: right;
		}
	}
}
