/* =====================================================================
   My Account dashboard: B2B portal card grid + help bar.
   Rendered by woocommerce/myaccount/dashboard.php in this theme.
   Enqueued only on the My Account page (see functions.php).
   ===================================================================== */

.td-account-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin: 10px 0 30px;
}

/* Four cards on the first row, five on the second — all one size.
 *
 * Five equal tracks give every card the same width. The nine cards would
 * otherwise fall 5 then 4, so the fifth is pushed to column one and starts a
 * new row; the fifth track of the first row is left empty by design.
 *
 * Tied to the nine account endpoints rendered today — add or remove one and the
 * rows re-flow, so this needs revisiting.
 *
 * Scoped above the 640px breakpoint, which drops back to auto-fill — five fixed
 * tracks would be far too narrow on a phone.
 */
@media (min-width: 641px) {
	.td-account-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.td-account-card:nth-child(5) {
		grid-column-start: 1;
	}
}

.td-account-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 5px;
	padding: 20px 14px 18px;
	background: #ffffff;
	border: 1px solid #e4e2dd;
	border-radius: 10px;
	color: #1d1d1b;
	text-decoration: none;
	transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.td-account-card:hover {
	border-color: #c9c6be;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
	color: #1d1d1b;
}

.td-account-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid #9aa895;
	border-radius: 50%;
	color: #5c6b57;
	margin-bottom: 2px;
}

/* The glyphs carry width/height attributes of their own; scaled here so they
   keep their proportion inside the smaller circle. */
.td-account-card__icon svg {
	width: 22px;
	height: 22px;
}

.td-account-card--logout .td-account-card__icon {
	border-color: #cf8f8a;
	color: #b23b36;
}

.td-account-card__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.td-account-card__desc {
	font-size: 12.5px;
	line-height: 1.45;
	color: #6b6862;
}

.td-account-card__arrow {
	position: absolute;
	right: 14px;
	bottom: 10px;
	font-size: 18px;
	line-height: 1;
	color: #9aa895;
}

/* Help bar */
.td-account-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	padding: 20px 26px;
	background: #edf0ea;
	border-radius: 12px;
	margin-bottom: 10px;
}

.td-account-help__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.td-account-help__item strong {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13.5px;
}

.td-account-help__item small {
	color: #6b6862;
}

.td-account-help__item a {
	color: #1d1d1b;
	text-decoration: none;
}

.td-account-help__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ffffff;
	color: #5c6b57;
	flex: none;
}

.td-account-help__btn {
	margin-left: auto;
	padding: 12px 24px;
	background: #5c6b57;
	color: #ffffff !important;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s;
}

.td-account-help__btn:hover {
	background: #48543f;
}

@media (max-width: 640px) {
	.td-account-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.td-account-card {
		padding: 20px 12px 18px;
	}

	.td-account-help__btn {
		margin-left: 0;
	}
}

/* =====================================================================
   Left account navigation — styled to match the card grid
   ===================================================================== */

.woocommerce {

}
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 20%;
}
.woocommerce-account .woocommerce-MyAccount-content {
 width: 80%;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #e4e2dd;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 8px;
	color: #1d1d1b;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation a:hover {
	background: #f1f3ee;
	color: #1d1d1b;
}

/* wpautop puts a <br> inside each link, ahead of the label. As a flex item it
   adds a second line box, which stretched the row to 61px and dropped the label
   below the icon instead of beside it. */
.woocommerce-MyAccount-navigation a br {
	display: none;
}

.woocommerce-MyAccount-navigation li.is-active > a {
	background: #5c6b57;
	color: #ffffff;
}

/* Icons: same motifs as the dashboard cards, via CSS masks */
.woocommerce-MyAccount-navigation a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--td-nav-icon) center / contain no-repeat;
	mask: var(--td-nav-icon) center / contain no-repeat;
	opacity: 0.85;
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l4 4-4 4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v9h9'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4.5V3h6v1.5'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--conversations a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--offers a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9h9v9l-9 9z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1.4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--purchase-lists a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='18' r='1.2'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--bulkorder a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3Crect x='8' y='3' width='8' height='8' rx='1'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--oenskeseddel a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9z'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-10a6 6 0 1 1 12 0c0 4.5-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.6-1.6 1.8-2.4 3-2.4s2.4.8 3 2.4'/%3E%3Cpath d='M15 9h4M15 13h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	--td-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M17.5 6.5a8 8 0 1 1-11 0'/%3E%3C/svg%3E");
}

/* Log ud: subtle red accent, matching the card */
.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #b23b36;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #fdf1f0;
	color: #b23b36;
}

/* =====================================================================
   All account endpoints: unified, responsive presentation
   ===================================================================== */

/* Content area rhythm */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	margin: 0 0 16px;
}

/* ---- Tables: card-styled, consistent with the dashboard ------------ */
.woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border: 1px solid #e4e2dd;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 24px;
}

.woocommerce-MyAccount-content table th {
	padding: 13px 14px;
	background: #f7f6f3;
	border-bottom: 2px solid #e4e2dd;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: #57544f;
}

.woocommerce-MyAccount-content table td {
	padding: 13px 14px;
	border-bottom: 1px solid #eceae5;
	vertical-align: middle;
	font-size: 14.5px;
}

.woocommerce-MyAccount-content table tbody tr:last-child td {
	border-bottom: none;
}

.woocommerce-MyAccount-content table tbody tr:hover td {
	background: #fafaf8;
}

/* Buttons inside tables (Vis, Download, Betal…) */
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content table .button {
	display: inline-block;
	padding: 8px 16px;
	margin: 2px 4px 2px 0;
	background: #1d1d1b;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s;
}

.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content table .button:hover {
	background: #45443f;
	color: #ffffff;
}

/* Pagination */
.woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 8px;
}

/* ---- Addresses (rediger-adresse): two cards ------------------------ */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
	flex: 1 1 300px;
	width: auto;
	max-width: none;
	float: none;
	background: #ffffff;
	border: 1px solid #e4e2dd;
	border-radius: 10px;
	padding: 22px 24px;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: #57544f;
}

/* ---- Forms (rediger-konto, adresseformularer) ---------------------- */
.woocommerce-MyAccount-content .woocommerce-Input,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #d8d6d0;
	border-radius: 7px;
	background: #fbfbfa;
	font-size: 15px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-MyAccount-content .woocommerce-Input:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: #111111;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.woocommerce-MyAccount-content form .form-row label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #1d1d1b;
}

.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-MyAccount-content button[name="save_address"] {
	padding: 13px 28px;
	background: #1d1d1b;
	color: #ffffff;
	border: none;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s;
}

.woocommerce-MyAccount-content button[type="submit"]:hover {
	background: #45443f;
}

/* =====================================================================
   Mobile
   ===================================================================== */

@media (max-width: 880px) {
	/* Navigation + content stack */
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
	}

	.woocommerce-MyAccount-navigation {
		margin-bottom: 22px;
	}
}

@media (max-width: 768px) {
	/* WooCommerce responsive tables (orders, downloads, order details):
	   rows become cards, cells become label/value lines using the
	   data-title attributes WooCommerce already prints. */
	.woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive,
	.woocommerce-MyAccount-content table.shop_table_responsive tbody,
	.woocommerce-MyAccount-content table.shop_table_responsive tr,
	.woocommerce-MyAccount-content table.shop_table_responsive td {
		display: block;
		width: 100%;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tr {
		border-bottom: 6px solid #f0efec;
		padding: 4px 0;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive tr:last-child {
		border-bottom: none;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		text-align: right;
		border-bottom: 1px dashed #eceae5;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive td:last-child {
		border-bottom: none;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive td::before {
		content: attr(data-title);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #57544f;
		text-align: left;
		flex: none;
	}

	.woocommerce-MyAccount-content table.shop_table_responsive td:not([data-title]) {
		justify-content: flex-end;
	}

	/* Plugin tables without the responsive markup (B2BKing lists,
	   offers, conversations, YITH wishlist): scroll sideways inside
	   their own container instead of breaking the page width. */
	.woocommerce-MyAccount-content table:not(.shop_table_responsive) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Address cards + forms breathe on small screens */
	.woocommerce-MyAccount-content .woocommerce-Addresses {
		flex-direction: column;
	}

	.woocommerce-MyAccount-content button[type="submit"] {
		width: 100%;
	}
}

/* =====================================================================
   Dashboard: the card grid IS the navigation — hide the left menu and
   let the grid use the full width. Other endpoints keep the menu.
   ===================================================================== */

.td-account-dashboard .woocommerce-MyAccount-navigation {
	display: none;
}

.td-account-dashboard .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
}

/* =====================================================================
   Endpoint pages on mobile: the tall vertical menu becomes a compact
   horizontal chip bar that scrolls sideways.
   ===================================================================== */

@media (max-width: 880px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation li {
		flex: none;
	}

	.woocommerce-MyAccount-navigation a {
		padding: 9px 14px;
		white-space: nowrap;
		border: 1px solid #e4e2dd;
		border-radius: 999px;
		font-size: 12px;
	}

	.woocommerce-MyAccount-navigation li.is-active > a {
		border-color: #5c6b57;
	}
}

/* =====================================================================
   Spacing / UX polish pass
   ===================================================================== */

/* The nav card shouldn't stretch across an overly wide ShopEngine
   column — cap it and keep the whitespace on the outside */
.woocommerce-MyAccount-navigation ul {
	max-width: 320px;
}

/* Keyboard accessibility: visible focus on nav links, cards, buttons */
.woocommerce-MyAccount-navigation a:focus-visible,
.td-account-card:focus-visible,
.td-account-help__btn:focus-visible,
.woocommerce-MyAccount-content .woocommerce-button:focus-visible {
	outline: 2px solid #1d1d1b;
	outline-offset: 2px;
}

/* WooCommerce notices on account pages (order updates, form saves) */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
	padding: 13px 16px;
	margin-bottom: 20px;
	background: #eef5ee;
	border: 1px solid #cfe0cf;
	border-left: 4px solid #5c6b57;
	border-radius: 7px;
	color: #2f4232;
}

.woocommerce-MyAccount-content .woocommerce-error {
	padding: 13px 16px;
	margin-bottom: 20px;
	background: #fdf1f0;
	border: 1px solid #f0c4c0;
	border-left: 4px solid #d02b2b;
	border-radius: 7px;
	color: #7c1d18;
	list-style: none;
}

/* Small phones: keep cards tidy — icon + title only */
@media (max-width: 480px) {
	.td-account-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.td-account-card__desc {
		display: none;
	}

	.td-account-card__icon {
		width: 52px;
		height: 52px;
	}

	.td-account-help {
		padding: 16px 18px;
		gap: 14px;
	}

	.td-account-help__btn {
		width: 100%;
		text-align: center;
	}
}

/* Mobile nav card: full width chip bar (overrides the 320px cap) */
@media (max-width: 880px) {
	.woocommerce-MyAccount-navigation ul {
		max-width: none;
	}
}

/* =====================================================================
   Dashboard cards: richer hover + pressed states
   ===================================================================== */

.td-account-card__icon {
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.td-account-card__arrow {
	transition: transform 0.15s, color 0.15s;
}

.td-account-card:hover .td-account-card__icon {
	background: #5c6b57;
	border-color: #5c6b57;
	color: #ffffff;
}

.td-account-card:hover .td-account-card__title {
	color: #48543f;
}

.td-account-card:hover .td-account-card__arrow {
	color: #5c6b57;
	transform: translateX(3px);
}

.td-account-card--logout:hover {
	border-color: #cf8f8a;
}

.td-account-card--logout:hover .td-account-card__icon {
	background: #b23b36;
	border-color: #b23b36;
	color: #ffffff;
}

.td-account-card--logout:hover .td-account-card__title,
.td-account-card--logout:hover .td-account-card__arrow {
	color: #b23b36;
}

/* Pressed: settle back down */
.td-account-card:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* =====================================================================
   Account layout: gutter between the menu and the content
   =====================================================================
   WooCommerce ships a float layout (nav 20% left / content 75% right).
   The widths here were set to 20% + 80%, which sums to exactly 100% and
   leaves no gutter at all — the two columns sit flush against each other.

   Percentages plus a gap can never add up (20% + 80% + gap overflows), so
   the columns are laid out with flexbox instead: a fixed menu column, the
   content taking whatever is left, and a real gap between them.
   ===================================================================== */

@media (min-width: 881px) {
	.woocommerce-account .woocommerce {
		display: flex;
		align-items: flex-start;
		gap: 34px;
	}

	/* WooCommerce's clearfix pseudo-elements would otherwise become flex
	   items and open two phantom gaps of their own. */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after {
		display: none;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		float: none;
		width: 268px;
		flex: 0 0 268px;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		float: none;
		/* auto, not a percentage — the flex item takes the remaining space
		   after the menu and the gap. */
		width: auto;
		flex: 1 1 auto;
		/* Without this a wide table refuses to shrink and overflows the
		   column (flex items default to min-width:auto). */
		min-width: 0;
	}
}