/**
 * 
 * 20. woocommerce-smallscreen.scss
 * 
 * Optimises the default WooCommerce frontend layout when viewed on smaller screens.
 * 
 */

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

/**
 * Style begins
 */
.woocommerce,
.woocommerce-page {
	@include li_product_limit_cols( $bp-md, 4 );  // at $bp-md show a max of 4 columns, ignoring columns-X class
	@include li_product_limit_cols( $bp-sm, 3 );  // at $bp-sm show a max of 3 columns, ignoring columns-X class
	@include li_product_limit_cols( $bp-xs, 2 );  // at $bp-xs show a max of 2 columns, ignoring columns-X class
	@include li_product_limit_cols( $bp-xxs, 1 ); // at $bp-xxs show a max of 1 columns, ignoring columns-X class

	/** 20.01 Small screens */
	@include until($bp-sm) {
		.cart-collaterals {
		.cart_totals,
		.shipping_calculator,
		.cross-sells {
				width: 100%;
				float: none;
				text-align: left;
			}
		}
	}

	/** 20.02 XSmall screens */
	@include until($bp-xs) {
		/**
		 * 20.02.1 Tables
		 */
		table.shop_table_responsive {
			tbody {
				tr:first-child {
					td:first-child {
						border-top: 0;
					}
				}
			}

			tr {
				td {
					padding-left: 4px;
					padding-right: 4px;

					&:after {
						display: none;
					}
				}
			}
		}

		table.my_account_orders {
			tr {
				td {
					&.order-actions {
						text-align: left;

						&:before {
							display: none;
						}

						.button {
							float: none;
							margin: .125em .25em .125em 0;
						}
					}
				}
			}
		}

		/**
		 * 20.02.2 General layout
		 */
		.col2-set {
			.col-1,
			.col-2 {
				float: none;
				width: 100%;
			}
		}

		/**
		 * 20.02.3 Products
		 */
		ul.products {
			li.product {
				width: 48%;
				float: left;
				clear: both;

				&:nth-child(2n) {
					float: right;
					clear: none !important;
				}
			}
		}

		/**
		 * 20.02.4 Product Details
		 */
		div.product,
		#content div.product {
			div.images,
			div.summary {
				float: none;
				width: 100%;
			}
		}

		/**
		 * 20.02.5 Cart
		 */
		table.cart,
		#content table.cart {
			.product-thumbnail,
			.product-stock-stauts,
			.product-stock-status {
				display: none;
			}

			td.actions {
				text-align: center;

				.coupon {
					float: none;
					@include clearfix();
					padding-bottom: .5em;

					.input-text {
						max-width: 100%;
					}
				}

				input,
				.button,
				.input-text {
					width: 48%;
					text-align: inherit;
					@include box-sizing(border-box);
				}

				.input-text + .button,
				.button.alt {
					float: right;
				}
			}
		}

		/**
		 * 20.02.6 Checkout
		 */
		&.woocommerce-checkout {
			form.login {
				.form-row {
					width: 100%;
					float: none;
				}
			}
		}

		#payment {
			.terms {
				text-align: left;
				padding: 0;
			}

			#place_order {
				float: none;
				width: 100%;
				@include box-sizing(border-box);
				margin-bottom: 1em;
				text-align: center;
			}
		}

		/**
		 * 20.02.7 Account
		 */
		.lost_reset_password {
			.form-row-first,
			.form-row-last {
				width: 100%;
				float: none;
				margin-right: 0;
			}
		}
	}

	/** 20.03 XXSmall screens */
	@include until($bp-xxs) {
		table.shop_table_responsive {
			.product-thumbnail,
			.product-remove,
			.product-price,
			thead {
				display: none;
			}

			
		}

		table.cart,
		#content table.cart {
			td.actions {
				input,
				.button,
				.input-text {
					width: 100%;
					text-align: inherit;
				}
			}
		}
	}
}

