/* =====================================================================
   aes-account.css
   Part of the AES child theme. My account and the pages under it.
   Moved out of style.css (3.22.363) without changes, in the same order.
   Loaded by functions.php (aes_page_styles) on: My account and its pages (orders, addresses, account details, log in and register).
   It always loads after style.css, so the order of the rules is as before.
   Sections: 28
   ===================================================================== */

/* =====================================================================
   28. Account pages (My account and the pages under it)
   Rebuilt October 2026. WooCommerce's account pages (the overview,
   orders, addresses, account details, track an order and sign out) in
   Flatsome's account layout: the account menu on the left and the page
   on the right. They are not built in UX Builder, so these rules are
   scoped by Flatsome's own wrapper for them (".my-account") and use the
   same colours, sizes and gaps as the rebuilt pages (section 19).
   The names in the account menu are set in Appearance > Menus, and the
   page headings by each page's title.
   ===================================================================== */

/* ---------- 28.1 Layout ---------- */

/* The account name and picture above the menu are not shown: the overview page says who is
   signed in. The thin line between the menu and the page is not shown either. */
.my-account .account-user {
	display: none;
}

.my-account .col-border {
	border: 0 !important;
}

/* The page heading ("My account", "Track my order"): in the same weight and size as the
   headings on the rebuilt pages, and never in capitals */
.my-account-header h1 {
	text-transform: none !important;
	letter-spacing: normal;
}

/* ---------- 28.2 Account menu ---------- */

/* The menu becomes a set of action rows like those on the rebuilt pages: pale blue rows a
   small gap apart, each with an arrow. The page you are on is white with an AES blue
   outline, so you can see where you are. Sign out, at the bottom, is white with a grey
   outline and a little further down, set apart from the pages. Flatsome's lines between the
   items, capitals and underlines are taken off. */
.my-account #my-account-nav {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.my-account #my-account-nav > li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.my-account #my-account-nav > li > a {
	position: relative;
	display: block;
	margin: 0 !important;
	padding: 13px 40px 13px 14px !important;
	border: 0 !important;
	background: #e7f1f8;
	color: #141414 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.3;
	text-decoration: none !important;
	text-transform: none !important;
}

.my-account #my-account-nav > li > a:hover,
.my-account #my-account-nav > li > a:focus-visible {
	background: #d9e9f4;
}

/* The arrow, and nothing else Flatsome draws on its menu links (the underline bar) */
.my-account #my-account-nav > li > a::before {
	content: none !important;
}

.my-account #my-account-nav > li > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid #141414;
	border-right: 1.5px solid #141414;
	transform: translateY(-50%) rotate(45deg);
}

/* The page you are on */
.my-account #my-account-nav > li.current-menu-item > a,
.my-account #my-account-nav > li.current-menu-item > a:hover {
	background: #fff;
	box-shadow: inset 0 0 0 1px #1076b6;
}

/* WooCommerce shows its own account pages (orders, a single order, addresses, account details)
   as parts of the My account page, so the menu always marked "My account" as the page you
   were on. On those pages the right item is marked instead, by the page type WooCommerce
   gives the page. The menu items are found by where they link to, so renaming or replacing
   an item in Appearance > Menus does not break this. */
:is(.woocommerce-orders, .woocommerce-view-order, .woocommerce-edit-address, .woocommerce-edit-account) .my-account #my-account-nav > li > a[href$="/my-account/"] {
	background: #e7f1f8;
	box-shadow: none;
}

:is(.woocommerce-orders, .woocommerce-view-order) .my-account #my-account-nav > li > a[href*="/my-account/orders"],
.woocommerce-edit-address .my-account #my-account-nav > li > a[href*="/edit-address"],
.woocommerce-edit-account .my-account #my-account-nav > li > a[href*="/edit-account"] {
	background: #fff;
	box-shadow: inset 0 0 0 1px #1076b6;
}

/* Sign out: the last item in the menu */
.my-account #my-account-nav > li:last-child {
	margin-top: 10px !important;
}

.my-account #my-account-nav > li:last-child > a {
	background: #fff;
	box-shadow: inset 0 0 0 1px #5c5c5c;
}

.my-account #my-account-nav > li:last-child > a:hover,
.my-account #my-account-nav > li:last-child > a:focus-visible {
	background: #fff;
	box-shadow: inset 0 0 0 2px #141414;
}

/* Tablets (550px to 849px): the menu is a grid of rows, not a tall stack of full-width ones:
   three across from 700px (two rows of three, with Sign out the last), two across below that.
   Sign out sits in the grid a small gap away like the others, not set further apart. */
@media (min-width: 550px) and (max-width: 849px) {

	.my-account #my-account-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.my-account #my-account-nav > li:last-child {
		margin-top: 0 !important;
	}

}

@media (min-width: 700px) and (max-width: 849px) {

	.my-account #my-account-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* ---------- 28.3 Overview page ---------- */

/* Flatsome repeats the account menu on the overview page as a grid of boxes, so every link
   was on screen twice. The boxes are not shown: the menu beside them does the job. */
.my-account .dashboard-links {
	display: none !important;
}

/* The overview page's own wording and latest order are in the child theme's copy of
   WooCommerce's overview template (woocommerce/myaccount/dashboard.php) */
.my-account .aes-account-hello {
	margin: 0 0 30px;
	color: #3d3d3d;
	font-size: 16px;
	line-height: 1.5;
}

.my-account .aes-account-hello a {
	color: inherit;
	text-decoration: underline;
}

.my-account .aes-account-latest {
	padding: 20px;
	background: #f4f4f4;
}

.my-account .aes-account-latest h2 {
	margin: 0 0 20px;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
}

.my-account .aes-account-latest dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 25px;
	row-gap: 10px;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.4;
}

/* The theme sets these in capitals; here they are in ordinary case like the rest of the page */
.my-account .aes-account-latest dt {
	margin: 0;
	color: #5c5c5c;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.my-account .aes-account-latest dd {
	margin: 0;
	color: #141414;
	letter-spacing: normal;
	text-transform: none;
}

.my-account .aes-account-latest p {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
}

/* "View order" and "Start shopping": an outlined button, as on the rebuilt pages */
.my-account .aes-account-latest .aes-account-button {
	display: inline-block;
	min-height: 46px;
	margin: 0;
	padding: 12px 22px;
	border: 1px solid #5c5c5c !important;
	background: #fff;
	color: #141414;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
}

.my-account .aes-account-latest .aes-account-button:hover,
.my-account .aes-account-latest .aes-account-button:focus-visible {
	border-color: #141414;
	box-shadow: inset 0 0 0 1px #141414;
}

/* ---------- 28.4 A single order ---------- */

/* The order's number, date and status in a grey box at the top (from the child theme's copy
   of WooCommerce's view-order.php), set out like the latest order on the overview page */
.my-account .aes-account-summary {
	margin-bottom: 40px;
}

.my-account .aes-account-summary dl {
	margin: 0;
}

/* The headings: "Order details", "Invoice address", "Delivery address", in one size */
.my-account .large-9 :is(.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-OrderUpdates + h2) {
	margin: 0 0 20px;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
}

/* The table of items and totals: one size of type throughout, a pale line under every row
   across the full width, the names of the totals in grey and ordinary weight on the left and
   the amounts on the right. Prices stay bold. */
.my-account .large-9 .woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	border-collapse: collapse;
}

.my-account .large-9 .woocommerce-table--order-details :is(th, td) {
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #e6e6e6 !important;
	color: #141414;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.4;
	text-transform: none !important;
	vertical-align: top;
}

.my-account .large-9 .woocommerce-table--order-details thead th,
.my-account .large-9 .woocommerce-table--order-details tfoot th {
	color: #5c5c5c;
	text-align: left;
}

.my-account .large-9 .woocommerce-table--order-details :is(thead th:last-child, td.product-total, tfoot td) {
	text-align: right;
}

.my-account .large-9 .woocommerce-table--order-details .product-quantity {
	font-weight: 400;
}

.my-account .large-9 .woocommerce-table--order-details a {
	color: #141414;
}

/* "Order again": the main thing to do on this page, so AES blue, the height of the other
   buttons on the site */
.my-account .large-9 .order-again {
	margin: 0 0 40px;
}

.my-account .large-9 .order-again .button {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	margin: 0;
	padding: 0 30px;
	border: 1px solid #1076b6 !important;
	border-radius: 0 !important;
	background: #1076b6 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

.my-account .large-9 .order-again .button:is(:hover, :focus-visible) {
	border-color: #0c5d90 !important;
	background: #0c5d90 !important;
}

/* The small notes beside an amount ("via Standard UK Mainland", "includes £3.76 VAT"): the
   site's small text size and grey, rather than WooCommerce's tiny type */
.my-account .large-9 .woocommerce-table--order-details :is(small, .shipped_via, .includes_tax) {
	color: #5c5c5c;
	font-size: 13px;
	font-weight: 400;
}

/* The two addresses side by side, each taking half the width, a column gap apart, their
   grey boxes the same height whatever is in them. On phones one under the other. */
.my-account .large-9 .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px 25px;
	margin: 0;
}

.my-account .large-9 .woocommerce-customer-details .woocommerce-columns--addresses::before,
.my-account .large-9 .woocommerce-customer-details .woocommerce-columns--addresses::after {
	content: none !important;
	display: none !important;
}

.my-account .large-9 .woocommerce-customer-details .woocommerce-column {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.my-account .large-9 .woocommerce-customer-details .woocommerce-column address {
	flex: 1 1 auto;
}

@media (min-width: 550px) {

	.my-account .large-9 .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

}

/* The addresses: in ordinary type rather than italics, in a grey box each */
.my-account .large-9 .woocommerce-customer-details address {
	margin: 0;
	padding: 20px;
	border: 0 !important;
	background: #f4f4f4;
	color: #141414;
	font-size: 15px;
	font-style: normal;
	line-height: 1.6;
}

.my-account .large-9 .woocommerce-customer-details address p {
	margin: 10px 0 0;
	font-size: inherit;
}

/* The Addresses page: the invoice and delivery addresses side by side, half the width each,
   in a grey box each of the same height, in ordinary type rather than italics. Each heading
   has its "Edit" link on the same line, at the right. On phones one under the other. */
.my-account .large-9 .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px 25px;
	margin: 20px 0 0;
}

.my-account .large-9 .woocommerce-Addresses::before,
.my-account .large-9 .woocommerce-Addresses::after {
	content: none !important;
	display: none !important;
}

.my-account .large-9 .woocommerce-Address {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.my-account .large-9 .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 20px;
}

.my-account .large-9 .woocommerce-Address-title :is(h2, h3, h4, h5) {
	margin: 0 !important;
	color: #141414;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	line-height: 1.3;
}

.my-account .large-9 .woocommerce-Address-title .edit {
	float: none;
	color: #141414;
	font-size: 15px;
	text-decoration: underline;
}

.my-account .large-9 .woocommerce-Address address {
	flex: 1 1 auto;
	margin: 0;
	padding: 20px;
	border: 0;
	background: #f4f4f4;
	color: #141414;
	font-size: 15px;
	font-style: normal;
	line-height: 1.6;
}

@media (min-width: 550px) {

	.my-account .large-9 .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

}

/* The Orders page: the list of orders set out like the table on a single order. One size of
   type, a pale line under every row across the full width, the column names in grey and
   ordinary weight, the totals bold as prices are. "View" is an outlined button, as on the
   overview page, and the column of buttons sits at the right. */
.my-account .large-9 .woocommerce-orders-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.my-account .large-9 .woocommerce-orders-table :is(th, td) {
	padding: 12px 20px 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #e6e6e6 !important;
	color: #141414;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.4;
	text-transform: none !important;
	vertical-align: middle;
}

.my-account .large-9 .woocommerce-orders-table thead th {
	color: #5c5c5c;
	text-align: left;
}

.my-account .large-9 .woocommerce-orders-table :is(th, td):last-child {
	padding-right: 0 !important;
	text-align: right;
}

.my-account .large-9 .woocommerce-orders-table a:not(.button) {
	color: #141414;
}

.my-account .large-9 .woocommerce-orders-table .button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0 0 0 10px;
	padding: 0 18px;
	border: 1px solid #5c5c5c !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #141414 !important;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.my-account .large-9 .woocommerce-orders-table .button:is(:hover, :focus-visible) {
	border-color: #141414 !important;
	box-shadow: inset 0 0 0 1px #141414 !important;
}

/* ---------- 28.5 Forms ---------- */

/* The forms on the account pages (track an order, account details, addresses): the same
   boxes and buttons as the rebuilt pages' forms. Boxes 46px tall, white with a grey outline
   that turns AES blue while you type, in 16px type (which also stops iPhones zooming in).
   The button that sends a form is AES blue. */
.my-account form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select) {
	height: 46px;
	min-height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #9a9a9a !important;
	border-radius: 0;
	background-color: #fff;
	box-shadow: none !important;
	color: #141414;
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: normal;
}

.my-account form textarea {
	min-height: 140px;
	padding: 10px 12px;
	border: 1px solid #9a9a9a !important;
	border-radius: 0;
	box-shadow: none !important;
	font-size: 16px !important;
}

.my-account form :is(input, select, textarea):focus {
	border-color: #1076b6 !important;
	outline: 0;
	box-shadow: inset 0 0 0 1px #1076b6 !important;
}

.my-account form label {
	color: #141414;
	font-size: 15px;
	font-weight: 500;
}

.my-account form :is(button[type="submit"], input[type="submit"]) {
	min-height: 46px;
	margin: 0;
	padding: 0 30px;
	border: 1px solid #1076b6 !important;
	border-radius: 0 !important;
	background: #1076b6 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

.my-account form :is(button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
	border-color: #0c5d90 !important;
	background: #0c5d90 !important;
}

/* The account details form and the forms for changing an address: in the grey box of the
   rebuilt pages' forms. Each field is a medium gap below the one before, its label a small
   gap above its box, and the boxes the full width of their column. */
.my-account .large-9 :is(.woocommerce-EditAccountForm, form:has(.woocommerce-address-fields)) {
	margin: 0;
	padding: 20px;
	background: #f4f4f4;
}

.my-account form:not(.aes-track) .form-row {
	margin: 0 0 20px !important;
	padding: 0 !important;
}

.my-account form label {
	display: block;
	margin: 0 0 10px;
	line-height: 1.3;
}

.my-account form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select) {
	width: 100%;
}

/* Two fields side by side (first and last name): half the width each, a column gap apart, so
   together they reach the same right-hand edge as the full-width fields below. On phones
   they are one under the other. */
.my-account form:not(.aes-track) :is(.form-row-first, .form-row-last) {
	width: 100% !important;
	float: none !important;
}

@media (min-width: 550px) {

	.my-account form:not(.aes-track) :is(.form-row-first, .form-row-last) {
		width: calc(50% - 12.5px) !important;
	}

	.my-account form:not(.aes-track) .form-row-first {
		float: left !important;
	}

	.my-account form:not(.aes-track) .form-row-last {
		float: right !important;
	}

}

/* The note under a box ("This will be how your name will be displayed ..."): the site's small
   grey text, not italics */
.my-account form :is(#account_display_name_description, .description, em) {
	position: static !important;
	display: block !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #5c5c5c !important;
	font-size: 13px !important;
	font-style: normal;
	line-height: 1.4;
}

/* The address form's fields: a plugin's stylesheet (edit-address.min.css) puts 50px under them,
   which left about 80px of grey above the Save address button. Taken off, so the button is a
   medium gap below the last field like the other forms. */
.my-account .large-9 .woocommerce-address-fields__field-wrapper {
	margin-bottom: 0 !important;
}

/* The heading at the top of the address form ("Invoice address"), in the size and weight of
   the other account headings rather than bold */
.my-account form:has(.woocommerce-address-fields) :is(h2, h3, h4) {
	margin: 0 0 20px !important;
	color: #141414;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	line-height: 1.3;
}

/* Where there is only one country to choose, WooCommerce shows it as bold text instead of a
   list: here in ordinary weight, the size of the text in the boxes */
.my-account form .form-row strong {
	color: #141414;
	font-size: 16px;
	font-weight: 400;
}

/* "Password change": a heading like the others on the account pages, not small bold
   capitals, with no box or line round its fields */
.my-account form fieldset {
	min-width: 0;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
}

.my-account form legend {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	color: #141414;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.3;
	text-transform: none;
}

/* The paragraph that holds the send button: no space under it, so the grey box ends a medium
   gap below the button */
.my-account .large-9 :is(.woocommerce-EditAccountForm, form:has(.woocommerce-address-fields)) p:has(> button[type="submit"]) {
	margin: 0 !important;
}

/* The Track my order form (from the child theme's copy of WooCommerce's form-tracking.php):
   in the grey box of the rebuilt pages' forms, a medium gap inside it. The two boxes sit side
   by side from 700px wide, a column gap apart, and one under the other on phones. The form is
   styled whether or not the account menu is beside it: signed out, the page has no menu
   column, so the rules are not tied to one (the doubled class keeps them above the theme's). Each label is
   a small gap above its box and each hint a small gap below it. */
.my-account form.aes-track.aes-track {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 20px;
	background: #f4f4f4;
}

.my-account form.aes-track.aes-track > .clear,
.my-account form.aes-track.aes-track > input[type="hidden"] {
	display: none;
}

.my-account form.aes-track.aes-track > * {
	margin: 0 !important;
}

.my-account form.aes-track.aes-track .form-row {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

.my-account form.aes-track.aes-track label {
	display: block;
	margin: 0 0 10px;
	line-height: 1.3;
}

.my-account form.aes-track.aes-track input {
	width: 100%;
}

.my-account form.aes-track.aes-track .aes-track__intro {
	color: #3d3d3d;
	font-size: 16px;
	line-height: 1.5;
}

.my-account form.aes-track.aes-track .aes-track__hint {
	display: block;
	margin-top: 8px;
	color: #5c5c5c;
	font-size: 13px;
	line-height: 1.4;
}

@media (min-width: 700px) {

	.my-account form.aes-track.aes-track {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 25px;
	}

	.my-account form.aes-track.aes-track > :not(.form-row-first, .form-row-last) {
		grid-column: 1 / -1;
	}

}

/* ---------- 28.5b Signed out: sign in, create an account, lost password ---------- */

/* Flatsome's sign in page (its own form-login template): "My account" on the left like the
   other account pages, rather than centred */
.my-account-header .social-login {
	text-align: left !important;
}

/* Sign in and Create an account side by side, half the width each, a column gap apart, each
   in a grey box of the same height; on phones one under the other, sign in first, running to
   the edges of the screen like the other forms. Flatsome's dividing line, column padding and
   capitals are taken off. */
.my-account #customer_login {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px 25px;
	margin: 0 !important;
}

.my-account #customer_login::before,
.my-account #customer_login::after {
	content: none !important;
	display: none !important;
}

.my-account #customer_login > .col {
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.my-account #customer_login > .col::before,
.my-account #customer_login > .col::after {
	content: none !important;
	border: 0 !important;
}

.my-account #customer_login :is(.account-login-inner, .account-register-inner) {
	flex: 1 1 auto;
	padding: 20px;
	background: #f4f4f4;
}

.my-account #customer_login h2 {
	margin: 0 0 20px !important;
	color: #141414;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.3;
	text-transform: none !important;
}

.my-account #customer_login form {
	margin: 0;
}

.my-account #customer_login form > p {
	margin: 0 0 20px;
}

/* The Cloudflare check: a medium gap under it, and not the line break the plugin adds */
.my-account #customer_login .cf-turnstile {
	margin: 0 0 20px;
}

.my-account #customer_login .cf-turnstile-br {
	display: none;
}

/* "Remember me": the tick box and its words on one line, in ordinary weight, above the
   button */
.my-account #customer_login .woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px !important;
	color: #141414;
	font-size: 15px;
	font-weight: 400 !important;
}

.my-account #customer_login .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #1076b6;
}

/* The buttons: the full width of their box */
.my-account #customer_login form :is(button[type="submit"], input[type="submit"]) {
	width: 100%;
}

/* The note under the email box and the privacy note: the site's small text */
.my-account #customer_login .account-register-inner form > p:not(.form-row) {
	color: #3d3d3d;
	font-size: 15px;
	line-height: 1.5;
}

.my-account #customer_login .woocommerce-privacy-policy-text p {
	margin: 0 0 20px;
	color: #5c5c5c;
	font-size: 13px;
	line-height: 1.5;
}

.my-account #customer_login .woocommerce-privacy-policy-text a,
.my-account .lost_password a {
	color: #141414;
	text-decoration: underline;
}

/* "Lost your password?": a small link a small gap under the Log in button */
.my-account .lost_password {
	margin: 10px 0 0 !important;
	font-size: 15px;
}

/* The Lost password page: its form in a grey box, not wider than a single form column */
.my-account form.woocommerce-ResetPassword {
	max-width: 600px;
	padding: 20px;
	background: #f4f4f4;
}

.my-account form.woocommerce-ResetPassword > p:last-of-type {
	margin-bottom: 0 !important;
}

/* "Back to sign in" (added in the child theme's copy of form-lost-password.php): a small link
   a small gap under the Reset password button, like "Lost your password?" under Log in */
.my-account form.woocommerce-ResetPassword p.form-row:has(> button[type="submit"]) {
	margin-bottom: 10px !important;
}

.my-account .aes-account-back {
	font-size: 15px;
}

.my-account .aes-account-back a {
	color: #141414;
	text-decoration: underline;
}

/* Its one box takes the full width of the form (WooCommerce marks it as the first of a pair,
   which would otherwise make it half width), and its opening line is the site's small text */
.my-account form.woocommerce-ResetPassword .form-row-first {
	width: 100% !important;
	float: none !important;
}

.my-account form.woocommerce-ResetPassword > p:first-child {
	margin: 0 0 20px;
	color: #3d3d3d;
	font-size: 15px;
	line-height: 1.5;
}

@media (min-width: 850px) {

	.my-account #customer_login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

}

@media (max-width: 849px) {

	.my-account #customer_login :is(.account-login-inner, .account-register-inner),
	.my-account form.woocommerce-ResetPassword {
		margin-left: -15px;
		margin-right: -15px;
		padding: 20px 15px;
	}

}

/* Tablets (550px to 849px): the grey boxes are in line with the page heading, not run out to the
   edges of the screen as on a phone; and from 700px, sign in and create an account are side by
   side, half the width each (a half is wide enough for the Cloudflare check, 300px). */
@media (min-width: 550px) and (max-width: 849px) {

	.my-account #customer_login :is(.account-login-inner, .account-register-inner),
	.my-account form.woocommerce-ResetPassword {
		margin-left: 0;
		margin-right: 0;
		padding: 20px;
	}

}

@media (min-width: 700px) and (max-width: 849px) {

	.my-account #customer_login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

}

/* ---------- 28.6 Messages ---------- */

/* WooCommerce's messages after doing something on the account pages ("Address changed
   successfully", "Account details changed successfully", a wrong order number on the track
   form). The basket page rules in section 12 hide every success message on the site, so they
   do not pop up each time the basket changes; on the account pages they are shown again,
   because there they are the only sign a change was saved.
   Flatsome prints them in a strip of their own between the header and the page (outside the
   account area), so they are found there by the class WordPress gives the account pages'
   body ("woocommerce-account"), as well as inside the account area.
   Each is a row in the light grey of the rebuilt pages with a coloured bar down its left
   edge: green for done, red for a problem, AES blue for information. Ordinary type, not bold
   or italic. The strip under the header is the width of the page's content, 15px in from the
   sides on phones (1220px wide on desktop, the same as the page below it). */
.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info),
.my-account :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	display: block !important;
	margin: 0 0 20px !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-left: 3px solid #3aaa35 !important;
	border-radius: 0 !important;
	background: #f4f4f4 !important;
	box-shadow: none !important;
	color: #141414 !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	width: calc(100% - 30px);
	max-width: 1220px;
	margin: 30px auto 0 !important;
}

/* With a message above it, the page heading moves up by 20px, so the message is a section
   gap (about 30px) above it rather than about 50px (measured from a screenshot) */
.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) + #main .my-account-header {
	margin-top: 10px !important;
}

.woocommerce-account #wrapper > .woocommerce-error,
.my-account .woocommerce-error {
	border-left-color: #c0392b !important;
}

.woocommerce-account #wrapper > .woocommerce-info,
.my-account .woocommerce-info {
	border-left-color: #1076b6 !important;
}

/* Flatsome's inner box and tick inside a message: no padding, width, colour or icon of their
   own */
.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .message-container,
.my-account :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .message-container {
	max-width: none;
	margin: 0;
	padding: 0 !important;
	color: inherit !important;
	text-align: left !important;
}

.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) i,
.my-account :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) i {
	display: none;
}

.woocommerce-account #wrapper > .woocommerce-error li,
.my-account .woocommerce-error li {
	margin: 0;
	padding: 0;
}

.woocommerce-account #wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) a,
.my-account :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- 28.7 Media queries ---------- */

/* Phones and tablets (up to 849px): the page first and the account menu under it, so the
   form or order you came for is at the top rather than below six links. On the overview
   page the menu follows the greeting and latest order, so there it acts as the page's own
   list of what you can do. */
@media (max-width: 849px) {

	.my-account .row.vertical-tabs {
		display: flex;
		flex-direction: column;
	}

	.my-account .row.vertical-tabs > .large-9 {
		order: -1;
	}

	.my-account .row.vertical-tabs > .large-3 {
		margin-top: 30px;
	}

	/* The page heading and the page itself sit exactly 15px in from the sides of the screen,
	   the same as the product pages and the rebuilt pages, rather than 5 to 10px. Flatsome
	   spaces the page with several layers of padding and negative margins; here the outer box
	   has the 15px and everything inside it none, so nothing can add to it. And Flatsome's shadows under the heading and round
	   the page are taken off, so the page is not drawn as a box floating on the screen */
	.my-account-header .page-title-inner,
	.my-account > .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.my-account-header .page-title-inner > .flex-col,
	.my-account .row.vertical-tabs {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.my-account-header .page-title-inner > .flex-col,
	.my-account .row.vertical-tabs > .col {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.my-account .touch-scroll-table,
	.my-account-header,
	.my-account-header .page-title-inner,
	.my-account .row.vertical-tabs,
	.my-account .row.vertical-tabs > .col,
	.my-account .row.vertical-tabs > .col > .col-inner {
		box-shadow: none !important;
	}

	/* Flatsome puts a wide table in a box that scrolls sideways, with padding and a shading
	   inside its edges to hint that it scrolls (it also widens the box by 30px and pulls it
	   15px to the left, so it runs to the edges of the screen). The orders list no longer needs to scroll on a
	   phone (it is a stack), so the box is just a plain container. */
	.my-account .touch-scroll-table {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/* The grey form boxes (account details, addresses, track an order) run to both edges of
	   the screen, as the contact and sign up forms do on phones: pulled out over the page's
	   15px margin, with 15px inside at the sides. The boxes to type in then start on the same
	   15px edge as the heading, rather than 35px in. */
	.my-account .large-9 :is(.woocommerce-EditAccountForm, form:has(.woocommerce-address-fields)),
	.my-account form.aes-track.aes-track {
		margin-left: -15px !important;
		margin-right: -15px !important;
		padding: 20px 15px !important;
	}

	/* The send buttons are the full width of the form, easy to hit on a phone */
	.my-account form :is(button[type="submit"], input[type="submit"]) {
		width: 100%;
	}

}

/* Tablets (550px to 849px): the grey form boxes are in line with the page heading, as on desktop,
   not run out to the edges of the screen, and the send buttons are as wide as their words, on
   the left, as on desktop. (The sign in and create an account buttons stay full width, 28.5b.) */
@media (min-width: 550px) and (max-width: 849px) {

	.my-account .large-9 :is(.woocommerce-EditAccountForm, form:has(.woocommerce-address-fields)),
	.my-account form.aes-track.aes-track {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 20px !important;
	}

	.my-account form :is(button[type="submit"], input[type="submit"]) {
		width: auto;
	}

}

/* Phone (up to 549px): the orders list as a stack, one order after another, rather than a
   table squeezed into five narrow columns (the dates and totals were wrapping onto three
   lines). Each order is a block with a line under it; inside it each detail is a row with its
   name on the left in grey (taken from the column it came from) and its value on the right,
   and the "View" button is the full width under them. */
@media (max-width: 549px) {

	.my-account .large-9 .woocommerce-orders-table thead {
		display: none;
	}

	.my-account .large-9 .woocommerce-orders-table,
	.my-account .large-9 .woocommerce-orders-table tbody {
		display: block;
	}

	/* No space at the sides of the list or of each order: WooCommerce and Flatsome both pad
	   their stacked tables, which set the orders 10px further in than the rest of the page */
	.my-account .large-9 .woocommerce-orders-table,
	.my-account .large-9 .woocommerce-orders-table tbody {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
	}

	.my-account .large-9 .woocommerce-orders-table tr {
		display: block;
		margin: 0 !important;
		padding: 15px 0 !important;
		border-bottom: 1px solid #e6e6e6;
	}

	.my-account .large-9 .woocommerce-orders-table tr:first-child {
		padding-top: 0 !important;
	}

	/* The value is set to the right as one line ("£22.54 for 1 item" stays together), with the
	   name floated to the left of it */
	.my-account .large-9 .woocommerce-orders-table :is(th, td) {
		display: block !important;
		padding: 4px 0 !important;
		border: 0 !important;
		text-align: right !important;
	}

	.my-account .large-9 .woocommerce-orders-table :is(th, td)::before {
		content: attr(data-title);
		float: left;
		margin-right: 20px;
		color: #5c5c5c;
		text-align: left;
	}

	/* The button: the full width, under the details, with no name beside it */
	.my-account .large-9 .woocommerce-orders-table td:last-child {
		display: block !important;
		padding-top: 12px !important;
	}

	.my-account .large-9 .woocommerce-orders-table td:last-child::before {
		content: none;
	}

	.my-account .large-9 .woocommerce-orders-table td:last-child .button {
		display: flex;
		justify-content: center;
		width: 100%;
		min-height: 46px;
		margin: 0 0 10px;
	}

	.my-account .large-9 .woocommerce-orders-table td:last-child .button:last-child {
		margin-bottom: 0;
	}

}