/*
 * The Breather: my account pages, styled to match the cart and checkout.
 * Loaded only on the account pages (body.tbpp-account), after checkout.css.
 *
 * Colours, buttons and form fields come from checkout.css (body.tbpp-shop).
 * The settings below control the account layout. Change them here and every account page follows.
 */

.tbpp-account {
	--tba-menu-width: 232px;   /* width of the account menu on desktop */
	--tba-gap: 56px;           /* space between the menu and the page */
	--tba-form-width: 660px;   /* widest a form or block of text gets */
	--tba-login-width: 440px;  /* width of the log in and reset password forms */
	--tba-panel-pad: 24px;     /* padding inside the tinted panels */
	--tba-title-max: 32px;     /* page heading on desktop */
	--tba-title-min: 24px;     /* page heading on phones */
}

/* Page heading: My account, Orders, Addresses, Account details, Log in */
.tbpp-account .tbp-page-title {
	margin-bottom: 24px;
	font-size: clamp(var(--tba-title-min), 1.4vw + 18.5px, var(--tba-title-max));
}

/* ---------- Shared text ---------- */

.tbpp-account .woocommerce h2,
.tbpp-account .woocommerce h3,
.tbpp-account .woocommerce legend {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-family: var(--tbp-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tbp-blue);
}

.tbpp-account .woocommerce h3,
.tbpp-account .woocommerce legend {
	font-size: 19px;
}

.tbpp-account .woocommerce p {
	margin: 0 0 16px;
}

.tbpp-account .woocommerce mark {
	padding: 0;
	background: none;
	font-weight: 600;
	color: var(--tbp-ink);
}

.tbpp-account .woocommerce-MyAccount-content a:not(.button) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Log in and reset password ---------- */

.tbpp-account-form .tbp-page-title,
.tbpp-account-form .entry > .woocommerce {
	max-width: var(--tba-login-width);
	margin-left: auto;
	margin-right: auto;
}

/* The page heading already says "Log in". */
.tbpp-account-form .woocommerce > h2 {
	display: none;
}

.tbpp-account .woocommerce form.login,
.tbpp-account .woocommerce form.register,
.tbpp-account .woocommerce form.lost_reset_password {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 28px 28px 24px;
	border: 0;
	border-radius: var(--tbp-radius);
	background: var(--tbp-tint);
}

.tbpp-account .woocommerce form.login .form-row,
.tbpp-account .woocommerce form.register .form-row,
.tbpp-account .woocommerce form.lost_reset_password .form-row {
	float: none;
	width: 100%;
}

.tbpp-account .woocommerce form .password-input {
	display: block;
	position: relative;
}

/* Remember me above a full width button */
.tbpp-account .woocommerce form.login .form-row:has(> .woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 14px;
}

.tbpp-account .woocommerce form.login .woocommerce-form-login__rememberme {
	margin: 0;
}

.tbpp-account .woocommerce form.login .woocommerce-form-login__submit,
.tbpp-account .woocommerce form.register button.button,
.tbpp-account .woocommerce form.lost_reset_password button.button {
	float: none;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 24px;
	font-size: 16.5px;
	line-height: 46px;
}

.tbpp-account .woocommerce form.login .lost_password {
	float: none;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.tbpp-account .woocommerce form.login .lost_password a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbpp-account .woocommerce form.lost_reset_password > p:first-child {
	color: var(--tbp-text);
}

.tbpp-account .woocommerce form.lost_reset_password .form-row:last-of-type {
	margin-bottom: 0;
}

/* ---------- Logged in: menu on the left, page on the right ---------- */

.tbpp-account-in .entry > .woocommerce {
	display: grid;
	grid-template-columns: var(--tba-menu-width) minmax(0, 1fr);
	gap: 0 var(--tba-gap);
	align-items: start;
}

.tbpp-account-in .entry > .woocommerce::before,
.tbpp-account-in .entry > .woocommerce::after {
	content: none;
}

.tbpp-account-in .entry > .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.tbpp-account .woocommerce-MyAccount-tabs,
.tbpp-account .woocommerce-MyAccount-navigation,
.tbpp-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* The greeting and the menu already cover the name and the log out link. */
.tbpp-account .woocommerce-MyAccount-tabs .oceanwp-user-profile {
	display: none;
}

/* Account menu */

.tbpp-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.tbpp-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.tbpp-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	color: var(--tbp-text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tbpp-account .woocommerce-MyAccount-navigation ul li a::before {
	content: none;
	display: none;
}

.tbpp-account .woocommerce-MyAccount-navigation ul li a:hover,
.tbpp-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--tbp-tint);
	color: var(--tbp-blue);
}

.tbpp-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--tbp-tint);
	font-weight: 600;
	color: var(--tbp-blue);
}

.tbpp-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	outline: 3px solid var(--tbp-orange);
	outline-offset: 2px;
}

/* Page area */

.tbpp-account .woocommerce-MyAccount-content > p,
.tbpp-account .woocommerce-MyAccount-content > form {
	max-width: var(--tba-form-width);
}

.tbpp-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* ---------- Tables: orders and order details ---------- */

.tbpp-account .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 28px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.tbpp-account .woocommerce table.shop_table th,
.tbpp-account .woocommerce table.shop_table td {
	padding: 14px 12px;
	border: 0;
	border-bottom: 1px solid var(--tbp-line);
	background: none;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
	color: var(--tbp-text);
}

.tbpp-account .woocommerce table.shop_table th:first-child,
.tbpp-account .woocommerce table.shop_table td:first-child {
	padding-left: 0;
}

.tbpp-account .woocommerce table.shop_table th:last-child,
.tbpp-account .woocommerce table.shop_table td:last-child {
	padding-right: 0;
}

.tbpp-account .woocommerce table.shop_table thead th {
	padding-top: 0;
	border-bottom-color: var(--tbp-blue);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tbp-muted);
}

.tbpp-account .woocommerce table.shop_table tbody th a,
.tbpp-account .woocommerce table.shop_table .woocommerce-orders-table__cell-order-number a {
	font-weight: 600;
}

.tbpp-account .woocommerce table.shop_table .amount {
	color: var(--tbp-ink);
}

.tbpp-account .woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/* Small outline buttons inside tables (View, Pay, Cancel) */
.tbpp-account .woocommerce table.shop_table a.button {
	min-height: 38px;
	margin: 2px 0 2px 6px;
	padding: 0 18px;
	background: #fff !important;
	font-size: 14.5px;
	line-height: 34px;
	color: var(--tbp-blue) !important;
}

.tbpp-account .woocommerce table.shop_table a.button:hover {
	background: var(--tbp-tint) !important;
	box-shadow: none;
	color: var(--tbp-blue) !important;
}

.tbpp-account .woocommerce table.shop_table a.button::after {
	content: none;
	display: none;
}

/* Order details: product on the left, amount on the right */
.tbpp-account .woocommerce table.order_details thead th:last-child,
.tbpp-account .woocommerce table.order_details td:last-child {
	text-align: right;
}

.tbpp-account .woocommerce table.order_details tfoot th {
	border-right: 0;
	background: none;
	font-weight: 600;
	color: var(--tbp-ink);
}

.tbpp-account .woocommerce table.order_details tfoot tr:last-child th,
.tbpp-account .woocommerce table.order_details tfoot tr:last-child td {
	border-bottom: 0;
}

.tbpp-account .woocommerce table.order_details .product-name a {
	font-weight: 600;
}

.tbpp-account .woocommerce .woocommerce-pagination {
	display: flex;
	gap: 10px;
}

/* ---------- Addresses ---------- */

.tbpp-account .woocommerce .col2-set.addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: auto;
	margin: 24px 0 0;
}

.tbpp-account .woocommerce .col2-set.addresses::before,
.tbpp-account .woocommerce .col2-set.addresses::after {
	content: none;
}

.tbpp-account .woocommerce .col2-set.addresses > div {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* One tinted panel per address */
.tbpp-account .woocommerce .woocommerce-Address,
.tbpp-account .woocommerce .woocommerce-customer-details .woocommerce-column,
.tbpp-account .woocommerce .woocommerce-customer-details > address {
	padding: var(--tba-panel-pad);
	border: 0;
	border-radius: var(--tbp-radius);
	background: var(--tbp-tint);
}

.tbpp-account .woocommerce .addresses .woocommerce-Address .title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
}

.tbpp-account .woocommerce .addresses .woocommerce-Address .title::before,
.tbpp-account .woocommerce .addresses .woocommerce-Address .title::after {
	content: none;
}

.tbpp-account .woocommerce .addresses .woocommerce-Address .title h2,
.tbpp-account .woocommerce .addresses .woocommerce-Address .title h3,
.tbpp-account .woocommerce .woocommerce-customer-details .woocommerce-column__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
}

.tbpp-account .woocommerce .woocommerce-customer-details .woocommerce-column__title {
	margin-bottom: 12px;
}

.tbpp-account .woocommerce .addresses .woocommerce-Address .title a {
	position: static;
	padding: 0;
	background: none;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tbp-blue);
}

.tbpp-account .woocommerce .addresses .woocommerce-Address .title a:hover {
	background: none;
	color: var(--tbp-blue);
}

.tbpp-account .woocommerce .addresses address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	line-height: 1.6;
	color: var(--tbp-text);
}

.tbpp-account .woocommerce .woocommerce-customer-details > address {
	padding: var(--tba-panel-pad);
	border-radius: var(--tbp-radius);
	background: var(--tbp-tint);
	font-style: normal;
	line-height: 1.6;
}

.tbpp-account .woocommerce .woocommerce-customer-details address p {
	margin: 8px 0 0;
}

/* Space above each section on the single order page */
.tbpp-account .woocommerce-MyAccount-content > section {
	margin: 32px 0 0;
}

.tbpp-account .woocommerce-MyAccount-content > section table.shop_table {
	margin-bottom: 0;
}

/* ---------- Forms: account details and edit address ---------- */

.tbpp-account .woocommerce-MyAccount-content form fieldset {
	margin: 28px 0 0;
	padding: 0;
	border: 0;
}

.tbpp-account .woocommerce-MyAccount-content form legend {
	width: 100%;
}

.tbpp-account .woocommerce-MyAccount-content form .form-row em,
.tbpp-account .woocommerce-MyAccount-content form .form-row .description {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	font-style: normal;
	line-height: 1.5;
	color: var(--tbp-muted);
}

.tbpp-account .woocommerce-MyAccount-content form > p:last-of-type {
	margin: 8px 0 0;
}

/* ---------- Tablet and phone ---------- */

@media (max-width: 900px) {
	.tbpp-account-in .entry > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* The menu becomes a row of pills above the page */
	.tbpp-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.tbpp-account .woocommerce-MyAccount-navigation ul li a {
		padding: 8px 16px;
		border: 1px solid var(--tbp-line);
		font-size: 15px;
	}

	.tbpp-account .woocommerce-MyAccount-navigation ul li.is-active a {
		border-color: var(--tbp-blue);
	}
}

@media (max-width: 767px) {
	.tbpp-account .woocommerce .col2-set.addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.tbpp-account .woocommerce form.login,
	.tbpp-account .woocommerce form.register,
	.tbpp-account .woocommerce form.lost_reset_password {
		padding: 22px 20px 20px;
	}

	/* Orders: one block per order, label on the left and value on the right */
	.tbpp-account .woocommerce table.shop_table_responsive thead {
		display: none;
	}

	.tbpp-account .woocommerce table.shop_table_responsive,
	.tbpp-account .woocommerce table.shop_table_responsive tbody,
	.tbpp-account .woocommerce table.shop_table_responsive tr {
		display: block;
	}

	.tbpp-account .woocommerce table.shop_table_responsive tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--tbp-line);
	}

	.tbpp-account .woocommerce table.shop_table_responsive tr:first-child {
		border-top: 1px solid var(--tbp-blue);
	}

	.tbpp-account .woocommerce table.shop_table_responsive th,
	.tbpp-account .woocommerce table.shop_table_responsive td {
		display: block;
		overflow: hidden;
		padding: 6px 0;
		border: 0;
		background: none;
		text-align: right;
		white-space: normal;
	}

	.tbpp-account .woocommerce table.shop_table_responsive th::before,
	.tbpp-account .woocommerce table.shop_table_responsive td::before {
		content: attr(data-title);
		float: left;
		margin-right: 16px;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--tbp-muted);
	}

	.tbpp-account .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}

	.tbpp-account .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions {
		padding-top: 10px;
		text-align: left;
	}

	.tbpp-account .woocommerce table.shop_table_responsive a.button {
		margin-left: 0;
		margin-right: 6px;
	}
}

@media (max-width: 600px) {
	/* Notices with a button: message first, button full width underneath */
	.tbpp-account .woocommerce-info,
	.tbpp-account .woocommerce-message {
		flex-wrap: wrap;
	}

	.tbpp-account .woocommerce-info .button,
	.tbpp-account .woocommerce-message .button {
		flex: 1 0 100%;
		margin-left: 0;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbpp-account .woocommerce-MyAccount-navigation ul li a {
		transition: none;
	}
}