/**
 * My Account: phone layout.
 *
 * The account templates are laid out for desktop. On phones the page sat inside three
 * nested gutters, leaving about 170px of usable width, and the order tables ran off the
 * screen inside a clipped card. These rules only apply below the md breakpoint (768px);
 * the desktop layout is untouched.
 */

/* Product cards keep the catalogue's plain links, not the account page's underlines. */
.woocommerce-account .ce-account-recs a,
.woocommerce-account .ce-account-recs a:hover,
.woocommerce-account .ce-account-recs a:focus {
	text-decoration: none;
}

.woocommerce-account .ce-account-recs img {
	border-radius: 0;
}

/* WooCommerce floats the account navigation and content; this theme lays them out in a grid. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 2rem;
}

/* The page prints its own heading, so the template's entry header is redundant. */
.woocommerce-account .entry-header {
	display: none !important;
}

@media (min-width: 768px) {
	.woocommerce-account .col-full {
		max-width: 1440px !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

@media (max-width: 767px) {

	/* Storefront's own gutters sit outside the template's; the template keeps its own. */
	.woocommerce-account #content .col-full {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 1rem;
	}

	/* Order tables read as a card per order: no sideways scrolling, no clipped columns. */
	.woocommerce-account .ce-account-table,
	.woocommerce-account .ce-account-table tbody,
	.woocommerce-account .ce-account-table tr,
	.woocommerce-account .ce-account-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-account .ce-account-table thead {
		display: none;
	}

	.woocommerce-account .ce-account-table tr {
		border: 1px solid var(--ce-account-line, #c4c7c7);
		padding: 14px 16px;
		margin-bottom: 12px;
	}

	.woocommerce-account .ce-account-table tr:last-child {
		margin-bottom: 0;
	}

	.woocommerce-account .ce-account-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
		text-align: left;
		border: 0;
	}

	.woocommerce-account .ce-account-table td::before {
		content: attr(data-label);
		flex: none;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #6b6e6f;
	}

	/* The action cell is a full-width button under the details. */
	.woocommerce-account .ce-account-table td.ce-account-action {
		justify-content: stretch;
		padding-top: 12px;
		margin-top: 6px;
		border-top: 1px solid var(--ce-account-line, #e4e2e2);
	}

	.woocommerce-account .ce-account-table td.ce-account-action::before {
		content: none;
	}

	.woocommerce-account .ce-account-table td.ce-account-action > * {
		width: 100%;
		text-align: center;
	}

	/* The card around a table no longer needs to clip anything. */
	.woocommerce-account .ce-account-table-card {
		overflow: visible;
	}

	/* WooCommerce's own account tables (downloads, addresses) get the same treatment. */
	.woocommerce-account .woocommerce-table--order-downloads,
	.woocommerce-account .woocommerce-orders-table {
		display: block;
	}
}