/*
 * Overrides WooCommerce's own woocommerce-blocktheme.css, which hardcodes
 * `.woocommerce-account main .woocommerce { max-width: 1000px }`. Load order
 * relative to that stylesheet isn't guaranteed, hence !important.
 */
.woocommerce-account main .woocommerce {
	max-width: none !important;
}

/*
 * Addresses tab: WooCommerce's woocommerce-layout.css floats the billing/
 * shipping ".col-1"/".col-2" columns side by side (48% each). Scoped to
 * .woocommerce-account so checkout's own use of the same col2-set/col-1/
 * col-2 classes (billing/shipping form fields) is untouched.
 */
.woocommerce-account .woocommerce-Addresses.col2-set .col-1,
.woocommerce-account .woocommerce-Addresses.col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-Addresses.col2-set .col-1 {
	margin-bottom: 2.5em;
}

/* Each address's heading and its "Edit ... address" link on one row. */
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}

/*
 * woocommerce.css targets this same header via `.woocommerce-account
 * .addresses .title .edit` (3 classes deep) which outweighs our selector's
 * specificity, so `!important` is needed to actually win: `float:right`.
 */
.woocommerce-account .woocommerce-Address-title a.edit {
	float: none !important;
}

/*
 * Same specificity problem for `.woocommerce-account .addresses
 * .title::before/::after { content:" "; display:table }` — a clearfix for
 * the float layout above. Once this element is a flex container those
 * pseudo-elements become real (invisible) flex items and throw off
 * justify-content:space-between, so kill them.
 */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
	content: none !important;
	display: none !important;
}

/*
 * The theme's global link style (theme.json elements.link) sets
 * color:contrast + text-decoration:none, i.e. links look identical to
 * plain body text. That's fine for nav menus/buttons which have their own
 * visual treatment, but the My Account nav and inline text links (Log out,
 * Edit address, etc.) have nothing else marking them as clickable.
 * `.button`-class links (order actions, "Add payment method") already look
 * like buttons and don't need it.
 */
.woocommerce-account .woocommerce-MyAccount-navigation a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/*
 * ...but hide the underline again on hover (WooCommerce's own nav CSS does
 * the opposite: underline only on hover). `!important` since this needs to
 * beat the rule right above it.
 */
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
	text-decoration: none !important;
}