/**
 * Horta Purper - WooCommerce My Account presentation (M8).
 *
 * PRESENTATION ONLY. Styles the native WooCommerce My Account area (dashboard,
 * orders, view-order, addresses, edit-address, edit-account, login/register,
 * logout) using the M1 design tokens. It does NOT override any myaccount
 * template and MUST NOT change WooCommerce auth/session/order/address behaviour.
 *
 * The delivery snapshot presenter (.hp-delivery-details) that appears on the
 * view-order page is styled by the M7 checkout.css (single source of truth),
 * which is also enqueued on the view-order endpoint, so it is not restyled here.
 *
 * Loaded only on is_account_page() (see inc/enqueue.php).
 */

/* ==========================================================================
   Page frame + two-column layout (navigation + content).
   WooCommerce wraps the account in .woocommerce > .woocommerce-account and
   emits .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content.
   ========================================================================== */
.woocommerce-account {
	--account-background: #f1f4f3;
	--account-border: #c9d4ce;
	--account-input-border: #82958a;
}

.woocommerce-account .page-main {
	width: 100%;
	padding: 32px 24px 64px;
	background: var(--account-background);
	border-top: 1px solid var(--color-border);
}

.woocommerce-account .page-article {
	max-width: 1100px;
	margin-inline: auto;
}

.woocommerce-account .page-article-header {
	margin-bottom: 28px;
}

.woocommerce-account .page-title {
	font-size: 36px;
}

.woocommerce-account .woocommerce {
	width: 100%;
	margin-inline: auto;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Core clearfix elements create empty rows in the account flex layout. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce > h2 {
	flex: 1 0 100%;
	font-size: 24px;
	margin: 0;
}

.woocommerce-account .woocommerce > form.woocommerce-form-login {
	margin: 16px 0 0;
}

.woocommerce-account .site-main > .woocommerce > h1,
.woocommerce-account .site-main > h1:first-child {
	font-size: clamp(30px, 4vw, 44px);
	margin-bottom: 24px;
}

/*
 * WooCommerce outputs the navigation and content as two direct children of the
 * .woocommerce container. We turn that container into a grid on desktop. The
 * login/lost-password forms are single children, so the grid harmlessly renders
 * one column for them. WooCommerce floats the navigation by default; the grid
 * neutralises that.
 */
/*
 * WooCommerce's woocommerce-layout.css floats the navigation left (30%) and the
 * content right (68%) UNCONDITIONALLY. We neutralise that float at every width
 * and drive the layout ourselves: a CSS grid (nav left, content right) from the
 * tablet breakpoint up, and a clean stacked layout below it. Without this reset
 * the floats leak on narrower desktops/laptops and break the layout.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (min-width: 783px) {
	/*
	 * Two columns via flexbox (more robust than grid here: WooCommerce emits the
	 * navigation and content as two plain children, and flex avoids implicit-row
	 * placement surprises). The navigation is a fixed 260px sidebar; the content
	 * takes the rest. flex-wrap lets a full-width notices row sit above both.
	 */
	.woocommerce-account .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 16px 40px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 260px;
		max-width: 260px;
		margin-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Notices wrapper (when present) spans the full row above the two columns. */
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		flex: 1 0 100%;
	}

	/* Forms that are the sole content (login/register/lost password) span full. */
	.woocommerce-account .woocommerce > form.woocommerce-form-login,
	.woocommerce-account .woocommerce > form.woocommerce-form-register,
	.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
	.woocommerce-account .woocommerce > .u-columns {
		flex: 1 0 100%;
	}
}

/* ==========================================================================
   Navigation (sidebar as cards).
   ========================================================================== */
.woocommerce-MyAccount-navigation {
	margin: 0 0 24px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--account-border);
	border-radius: var(--radius);
	padding: 10px;
	background: #fff;
}

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

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--radius-input);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	min-height: 44px;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--color-surface-soft);
	color: var(--color-primary);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a[aria-current="page"] {
	background: var(--color-primary);
	color: #fff;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-muted);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   Content panel.
   ========================================================================== */
.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--color-primary);
	font-weight: 600;
}

.woocommerce-MyAccount-content a:not(.button):hover {
	text-decoration: underline;
}

/* Dashboard intro card. */
.woocommerce-MyAccount-content .woocommerce-MyAccount-content__dashboard,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-message + p,
.woocommerce-account .woocommerce-MyAccount-content mark {
	color: var(--color-text);
}

.woocommerce-account .woocommerce-MyAccount-content mark {
	background: var(--color-sage);
	padding: 1px 6px;
	border-radius: 4px;
}

/* ==========================================================================
   Orders table.
   ========================================================================== */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--color-muted);
	font-weight: 700;
	padding: 14px 16px;
	background: var(--color-surface-soft);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-account table.woocommerce-orders-table td,
.woocommerce-account table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
	vertical-align: middle;
}

.woocommerce-account table.woocommerce-orders-table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	margin: 2px 0 2px 6px;
	font-size: 13px;
	min-height: 40px;
	padding: 8px 14px;
}

/* Orders pagination. */
.woocommerce-account .woocommerce-pagination {
	margin-top: 20px;
}

.woocommerce-account .woocommerce-pagination .button {
	min-height: 44px;
}

/* ==========================================================================
   View order (order overview + details table + addresses).
   .hp-delivery-details is styled by checkout.css (also enqueued here).
   ========================================================================== */
.woocommerce-account ul.woocommerce-order-overview,
.woocommerce-view-order ul.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 0 0 24px;
	padding: 20px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface-soft);
}

.woocommerce-account ul.woocommerce-order-overview li {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--color-muted);
	font-weight: 700;
}

.woocommerce-account ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-text);
}

.woocommerce-account .woocommerce-order-details h2,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details h2 {
	font-family: var(--font-display);
	font-size: 22px;
	margin: 0 0 14px;
}

.woocommerce-account table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 24px;
}

.woocommerce-account table.woocommerce-table--order-details th,
.woocommerce-account table.woocommerce-table--order-details td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}

.woocommerce-account table.woocommerce-table--order-details tfoot th {
	font-weight: 700;
}

/* Address columns on view-order and dashboard. auto-fit so they go one-up when
   the account content column is narrow and two-up only when there is real room. */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
}

.woocommerce-account .woocommerce-customer-details address,
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	border: 1px solid var(--account-border);
	border-radius: var(--radius);
	padding: 18px 20px;
	background: #fff;
	font-size: 14px;
}

/* ==========================================================================
   Addresses index (edit-address list).
   ========================================================================== */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 8px 0 0;
}

/* Core clearfix pseudo-elements become unwanted grid/flex items. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .woocommerce-Address .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address .woocommerce-Address-title::after {
	content: none;
	display: none;
}

/*
 * WooCommerce's woocommerce-layout.css floats .col2-set .col-1/.col-2 (width:48%).
 * Those columns are ALSO the address grid items here, so the float + 48% width
 * fight the grid and stagger the cards. Neutralise them so each address fills
 * its own grid cell.
 */
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .col-1,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .col-2 {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 10px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
	float: none;
	white-space: normal;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 {
	font-family: var(--font-display);
	font-size: 20px;
	margin: 0;
	float: none;
	text-align: left;
}

.woocommerce-account .woocommerce-Address .edit {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
}

/* ==========================================================================
   Forms: edit-address, edit-account, login/register, lost password.
   Reuse the same input treatment as checkout but scoped to account.
   ========================================================================== */
.woocommerce-account form .form-row,
.woocommerce-account form p.form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account form .form-row label,
.woocommerce-account form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

.woocommerce-account form .required {
	color: var(--color-primary);
	text-decoration: none;
	border: 0;
}

.woocommerce-account form input.input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="password"],
.woocommerce-account form textarea,
.woocommerce-account form select,
.woocommerce-account form .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	background: #fff;
	color: var(--color-text);
	padding: 12px 14px;
	font-size: 14px;
	font-family: var(--font-body);
}

.woocommerce-account form input.input-text:focus,
.woocommerce-account form textarea:focus,
.woocommerce-account form select:focus,
.woocommerce-account form input[type="password"]:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
	border-color: var(--color-primary);
}

.woocommerce-account form .form-row.woocommerce-invalid input.input-text {
	border-color: #b3261e;
}

/* Password strength hint + field group. */
.woocommerce-account .woocommerce-password-strength {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: var(--radius-input);
	margin-top: 6px;
}

.woocommerce-account fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 18px 20px;
	margin: 20px 0 0;
}

.woocommerce-account fieldset legend {
	font-family: var(--font-display);
	font-size: 18px;
	padding: 0 8px;
}

/* Login / register two-column presentation when WooCommerce shows both. */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

/* Native clearfix and float widths must not create or shrink grid cells. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	content: none;
	display: none;
}

.woocommerce-account #customer_login > .col-1,
.woocommerce-account #customer_login > .col-2 {
	float: none;
	width: auto;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--account-border);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-input);
	background: var(--color-paper);
}

.woocommerce-account #customer_login > .col-2 {
	border-top-color: var(--color-accent-lime);
}

.woocommerce-account #customer_login h2 {
	font-size: 24px;
	margin: 0 0 16px;
}

.woocommerce-account #customer_login form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-account .woocommerce form .form-row .input-text,
.woocommerce-account .woocommerce form .form-row select {
	border-color: var(--account-input-border);
	background: var(--color-paper);
}

.woocommerce-account .woocommerce form .form-row .input-text:focus,
.woocommerce-account .woocommerce form .form-row select:focus {
	border-color: var(--color-primary);
}

.woocommerce-account .woocommerce form .form-row.woocommerce-invalid .input-text {
	border-color: #b3261e;
}

.woocommerce-account .woocommerce-MyAccount-content > form,
.woocommerce-account form.woocommerce-ResetPassword {
	padding: 24px;
	border: 1px solid var(--account-border);
	border-radius: var(--radius-input);
	background: var(--color-paper);
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 24px;
	background: #fff;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.woocommerce-account form .button,
.woocommerce-account form button[type="submit"] {
	min-height: 48px;
	padding: 12px 22px;
}

/* ==========================================================================
   Notices (kept visible/legible; never hidden).
   ========================================================================== */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error {
	list-style: none;
	border-radius: var(--radius-input);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	border-left: 4px solid var(--color-primary);
	background: var(--color-surface-soft);
	color: var(--color-text);
}

.woocommerce-account .woocommerce-error {
	border-left-color: #b3261e;
	background: #fbeceb;
}

.woocommerce-account .woocommerce-message {
	border-left-color: var(--color-accent-lime);
}

/* ==========================================================================
   Responsive.
   ========================================================================== */
@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 10px 12px;
	}
}

@media (max-width: 650px) {
	.woocommerce-account .page-main {
		padding: 24px 18px 40px;
	}

	.woocommerce-account .page-title {
		font-size: 28px;
	}

	.woocommerce-account #customer_login > .col-1,
	.woocommerce-account #customer_login > .col-2,
	.woocommerce-account .woocommerce-MyAccount-content > form,
	.woocommerce-account form.woocommerce-ResetPassword {
		padding: 20px;
	}

	.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
	.woocommerce-account .u-columns,
	.woocommerce-account .u-columns.col2-set,
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.woocommerce-account ul.woocommerce-order-overview {
		flex-direction: column;
		gap: 12px;
		padding: 16px 18px;
	}

	.woocommerce-account table.woocommerce-orders-table thead,
	.woocommerce-account table.shop_table thead {
		display: none;
	}

	.woocommerce-account table.woocommerce-orders-table tr,
	.woocommerce-account table.shop_table tbody tr {
		display: block;
		border-bottom: 1px solid var(--color-border);
		padding: 8px 12px;
	}

	.woocommerce-account table.woocommerce-orders-table td,
	.woocommerce-account table.shop_table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		border: 0;
		padding: 8px 0;
		text-align: right;
	}

	.woocommerce-account table.woocommerce-orders-table td::before,
	.woocommerce-account table.shop_table tbody td::before {
		content: attr(data-title);
		font-size: 12px;
		font-weight: 700;
		color: var(--color-muted);
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
	}
}