woocommerce/assets/css/woocommerce-smallscreen.scss

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

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

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

	table.shop_table_responsive {
		thead {
			display: none;
		}

		tbody {
			tr:first-child {
				td:first-child {
					border-top: 0;
				}
			}

			th {
				display: none;
			}
		}

		tr {
			display: block;

			td {
				display: block;

				&:before {
					content: attr(data-title) ': ';
					font-weight: 700;
				}
			}

			&:nth-child(2n) {
				td {
					background-color: rgba(0,0,0,0.025);
				}
			}
		}
	}

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

					&:before {
						display: none;
					}

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

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

	/**
	 * Products
	 */
	ul.products {
		li.product {
			width: 48%;
			float: left;
			clear: both;
			margin: 0 0 2.992em;

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

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

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

		td.actions {
			text-align: left;

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

			input,
			.button,
			.input-text {
				width: 48%;
				box-sizing: border-box;
			}

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

	.cart-collaterals {
		.cart_totals,
		.shipping_calculator,
		.cross-sells {
			width: 100%;
			float: none;
			text-align: left;
		}
	}

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

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

		#place_order {
			float: none;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 1em;
		}
	}

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

/**
 * Twenty Thirteen specific styles
 */
.single-product {
	.twentythirteen {
		.panel {
			padding-left: 20px !important;
			padding-right: 20px !important;
		}
	}
}