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

/**
 * Style begins
 */
@media(max-width: $screen-md-max){
	table.shop_table_responsive {
		display: block;
		thead {
			display: none;
		}
		tbody {
			display: block;
			tr:first-child {
				td:first-child {
				}
			}
			th {
				display: none;
			}
		}
		tr {
			display: block;
			td {
				display: flex;
				flex-wrap:wrap;
				justify-content:space-between;
				align-items:center;
				text-align: end !important; // Important to overwrite order status inline styling
				border-right: 0px solid #ddd;
				&.order-actions {
					text-align: start !important; // This must always align left on handheld
				}

				&::before {
					content: attr(data-title) ': ';
					font-weight: 700;
					color: var(--heading-font-color);
				}
				&.product-name{
					> div {
						width: 100%;
						padding-top: 10px;
					}
				}
				&.product-remove,
				&.actions {
					&::before {
						display: none;
					}
				}
				&.actions{
					display: block;
				}
			}
			&:nth-child( 2n ) {
				td {
					background-color: rgba(0, 0, 0, 0.025);
				}
			}
		}
	}
	/**
	 * Cart
	 */
	table.cart {
		.product-thumbnail {
			display: none;
		}
	}
}