/**
 * Pixaris account dashboard.
 *
 * The shell is the container WooCommerce already renders. Its two children are
 * the navigation and the content panel, so no wrapper template override is
 * needed to lay them out.
 *
 * A two column shell above 782px, a single column with a pinned tab bar below
 * it. Only the panel ever changes; the rail is the constant. Logical properties
 * throughout so RTL works without a second stylesheet.
 *
 * @package Pixaris
 * @author  Pixaris
 * @since   1.0.0
 */

.pixaris-account .woocommerce {
	display: grid;
	/*
	 * Tracks are fixed and both items are placed explicitly. WooCommerce puts
	 * an empty notices wrapper in this container, plugins add siblings, and
	 * auto placement lets any of them take a cell.
	 */
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-block: 1rem 3rem;
}

/*
 * WooCommerce clears its account floats with a ::before and ::after on this
 * container. Generated content on a grid container becomes a grid item, so
 * those two invisible boxes were being placed into real cells and shunting the
 * rail and the panel out of position. There are no floats left to clear here.
 */
.pixaris-account .woocommerce::before,
.pixaris-account .woocommerce::after {
	content: none;
	display: none;
}

/* Anything that is not the rail or the panel spans the full width, above both. */
.pixaris-account .woocommerce > *:not(.pixaris-account-nav):not(.woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
	grid-row: 1;
}

/*
 * The rail carries WooCommerce's own navigation class so that account add ons
 * still find it. That class comes with float and a percentage width from
 * woocommerce-layout.css, and a percentage width on a grid item resolves
 * against its grid area, which is what squeezed the rail to a fraction of its
 * track. Both properties are neutralised here rather than dropping the class
 * and breaking plugin compatibility.
 */
.pixaris-account .woocommerce > .pixaris-account-nav,
.pixaris-account .woocommerce > .woocommerce-MyAccount-content {
	float: none;
	inline-size: auto;
	max-inline-size: none;
	margin: 0;
}

.pixaris-account .woocommerce > .pixaris-account-nav {
	grid-column: 1;
	grid-row: 2;
}

.pixaris-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
	min-inline-size: 0;
}

/* Navigation -------------------------------------------------------------- */

.pixaris-account-nav {
	position: sticky;
	inset-block-start: 1.5rem;
	padding: 1rem 0.75rem;
	border: var(--pixaris-hairline);
	border-radius: var(--pixaris-radius-lg);
	background: var(--wp--preset--color--surface, #fff);
}

.pixaris-account-nav__identity {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.25rem 0.5rem 1rem;
	border-block-end: var(--pixaris-hairline);
	margin-block-end: 0.6rem;
}

.pixaris-account-nav__avatar {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	flex: none;
}

.pixaris-account-nav__identity-text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.pixaris-account-nav__name {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pixaris-account-nav__meta {
	white-space: nowrap;
}

.pixaris-account-nav__meta {
	color: var(--wp--preset--color--ink-faint, #918C82);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.pixaris-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pixaris-account-nav__item {
	margin: 0;
}

.pixaris-account-nav__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.6rem;
	border-radius: var(--pixaris-radius);
	color: var(--wp--preset--color--ink-muted, #6A665E);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--pixaris-transition), color var(--pixaris-transition);
}

.pixaris-account-nav__link:hover,
.pixaris-account-nav__link:focus {
	background: var(--wp--preset--color--surface-sunken, #F1EEE8);
	color: var(--wp--preset--color--ink, #1A1917);
	text-decoration: none;
}

.pixaris-account-nav__item.is-current .pixaris-account-nav__link {
	background: var(--wp--preset--color--accent-soft, #E4EBE8);
	color: var(--wp--preset--color--accent, #35544E);
	font-weight: 500;
}

.pixaris-account-nav__item--logout {
	margin-block-start: 0.6rem;
	padding-block-start: 0.6rem;
	border-block-start: var(--pixaris-hairline);
}

.pixaris-account-nav__label {
	overflow-wrap: break-word;
	hyphens: none;
}

.pixaris-account-nav__icon {
	display: flex;
	flex: none;
	color: currentColor;
}

/* Panel ------------------------------------------------------------------- */

.woocommerce-MyAccount-content {
	min-inline-size: 0;
	scroll-margin-block-start: 1.5rem;
}

.woocommerce-MyAccount-content:focus {
	outline: none;
}

.woocommerce-MyAccount-content[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity var(--pixaris-transition);
}

.pixaris-panel__header {
	margin-block-end: 1.75rem;
}

.pixaris-panel__greeting {
	margin: 0 0 0.25rem;
	overflow-wrap: anywhere;
	text-wrap: pretty;
	font-family: var(--wp--preset--font-family--voice, Georgia, serif);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
}

.pixaris-panel__subtitle {
	margin: 0;
	color: var(--wp--preset--color--ink-muted, #6A665E);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.pixaris-panel__section {
	margin-block-start: 2rem;
}

.pixaris-panel__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 0.75rem;
}

.pixaris-panel__section-title {
	margin: 0 0 0.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	color: var(--wp--preset--color--ink-muted, #6A665E);
	letter-spacing: 0.01em;
}

.pixaris-panel__section-head .pixaris-panel__section-title {
	margin-block-end: 0;
}

.pixaris-panel__section-link {
	color: var(--wp--preset--color--accent, #35544E);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-decoration: none;
}

.pixaris-panel__section-link:hover,
.pixaris-panel__section-link:focus {
	text-decoration: underline;
}

/* Metric tiles ------------------------------------------------------------ */

.pixaris-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pixaris-metrics__tile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.95rem 1rem;
	border-radius: var(--pixaris-radius);
	background: var(--wp--preset--color--surface-sunken, #F1EEE8);
}

.pixaris-metrics__label {
	color: var(--wp--preset--color--ink-muted, #6A665E);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.pixaris-metrics__value {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
}

/* Order rows -------------------------------------------------------------- */

.pixaris-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--pixaris-hairline);
	border-radius: var(--pixaris-radius-lg);
	background: var(--wp--preset--color--surface, #fff);
	overflow: hidden;
}

.pixaris-orders__row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	margin: 0;
	border-block-end: var(--pixaris-hairline);
}

.pixaris-orders__row:last-child {
	border-block-end: 0;
}

.pixaris-orders__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	flex: none;
	border-radius: 8px;
	background: var(--pixaris-tone-bg, var(--wp--preset--color--surface-sunken, #F1EEE8));
	color: var(--pixaris-tone-fg, var(--wp--preset--color--ink-muted, #6A665E));
}

.pixaris-orders__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.pixaris-orders__link {
	color: var(--wp--preset--color--ink, #1A1917);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	text-decoration: none;
}

.pixaris-orders__link:hover,
.pixaris-orders__link:focus {
	text-decoration: underline;
}

.pixaris-orders__meta {
	color: var(--wp--preset--color--ink-faint, #918C82);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.pixaris-orders__trailing {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.pixaris-orders__actions {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/* Quick links ------------------------------------------------------------- */

.pixaris-quick {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--pixaris-hairline);
	border-radius: var(--pixaris-radius-lg);
	background: var(--wp--preset--color--surface, #fff);
	overflow: hidden;
}

.pixaris-quick__item {
	margin: 0;
	border-block-end: var(--pixaris-hairline);
}

.pixaris-quick__item:last-child {
	border-block-end: 0;
}

.pixaris-quick__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--pixaris-transition);
}

.pixaris-quick__link:hover,
.pixaris-quick__link:focus {
	background: var(--wp--preset--color--surface-sunken, #F1EEE8);
	text-decoration: none;
}

.pixaris-quick__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	flex: none;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-sunken, #F1EEE8);
	color: var(--wp--preset--color--ink-muted, #6A665E);
}

.pixaris-quick__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.pixaris-quick__title {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
}

.pixaris-quick__meta {
	color: var(--wp--preset--color--ink-faint, #918C82);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

.pixaris-quick__chevron {
	display: flex;
	flex: none;
	color: var(--wp--preset--color--ink-faint, #918C82);
}

.pixaris-quick__link:hover .pixaris-quick__chevron {
	color: var(--wp--preset--color--ink, #1A1917);
}

/* Pagination -------------------------------------------------------------- */

.pixaris-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 1.25rem;
}

.pixaris-pagination__status {
	color: var(--wp--preset--color--ink-muted, #6A665E);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}

/* Inherited WooCommerce panels -------------------------------------------- */

.woocommerce-MyAccount-content > form,
.woocommerce-MyAccount-content > .woocommerce-Addresses,
.woocommerce-MyAccount-content > table {
	max-inline-size: 100%;
}

.woocommerce-MyAccount-content table.shop_table {
	border-radius: var(--pixaris-radius-lg);
	border-color: var(--wp--preset--color--hairline, #E2DDD4);
	background: var(--wp--preset--color--surface, #fff);
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.pixaris-account .woocommerce {
		grid-template-columns: 208px minmax(0, 1fr);
		gap: 1.75rem;
	}
}

@media (max-width: 782px) {
	.pixaris-account .woocommerce {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-block-end: 1rem;
	}

	.pixaris-account .woocommerce > .pixaris-account-nav,
	.pixaris-account .woocommerce > .woocommerce-MyAccount-content,
	.pixaris-account .woocommerce > * {
		grid-column: auto;
		grid-row: auto;
	}

	.woocommerce-MyAccount-content {
		order: 1;
		padding-block-end: 1.5rem;
	}

	.pixaris-account-nav {
		order: 2;
		position: sticky;
		inset-block-start: auto;
		inset-block-end: 0;
		z-index: 20;
		padding: 0.35rem 0.5rem;
		border: 0;
		border-block-start: var(--pixaris-hairline);
		border-radius: 0;
		margin-inline: calc(var(--wp--preset--spacing--20, 1rem) * -1);
		background: var(--wp--preset--color--surface, #fff);
	}

	.pixaris-account-nav__identity {
		display: none;
	}

	.pixaris-account-nav__list {
		display: flex;
		gap: 0.15rem;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.pixaris-account-nav__list::-webkit-scrollbar {
		display: none;
	}

	.pixaris-account-nav__item {
		flex: 1 0 auto;
		scroll-snap-align: start;
	}

	.pixaris-account-nav__item--logout {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: 0;
	}

	.pixaris-account-nav__link {
		flex-direction: column;
		gap: 0.2rem;
		min-inline-size: 68px;
		padding: 0.5rem 0.6rem;
		text-align: center;
	}

	.pixaris-account-nav__label {
		font-size: 0.6875rem;
		line-height: 1.2;
	}

	.pixaris-orders__row {
		flex-wrap: wrap;
	}

	.pixaris-orders__trailing {
		inline-size: 100%;
		justify-content: flex-start;
		padding-inline-start: calc(36px + 0.85rem);
	}

	.pixaris-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 400px) {
	.pixaris-metrics {
		grid-template-columns: minmax(0, 1fr);
	}
}