/**
 * Account drawer: .mk-account (drawer, templates/components/account-drawer.php)
 * and its body (account-content.php, account-orders.php).
 *
 * Drawer on the right like the mini-cart, flush content with padding 12 / 16
 * (`account.padding*`). Greeting accent-large (−1% letter spacing) in the
 * accent colour. Tabs and status filters: one row, 16 above and below, that
 * scrolls sideways across the whole drawer width (no side padding of the
 * body). Sections 24 apart with a divider between them, "Log out" centred
 * at the drawer bottom (at least 24 below the sections). Panel titles
 * label-large; favourites in two columns, 16 apart ("Show more" 16 below;
 * while new ones load the spinner lies over this panel only); order cards 16 apart.
 */

/* Fills the drawer, so "Log out" can sit at its bottom. */
.mk-account__body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-block-size: 100%;
	padding-block: var(--wp--custom--account--padding-block);
	padding-inline: var(--wp--custom--account--padding-inline);
	color: var(--wp--custom--color--account--value);
}

.mk-account__greeting {
	margin: 0;
	color: var(--wp--custom--color--account--greeting);
	font-family: var(--wp--custom--text--accent-large--font-family);
	font-size: var(--wp--custom--text--accent-large--font-size);
	font-style: var(--wp--custom--text--accent-large--font-style);
	font-weight: var(--wp--custom--text--accent-large--font-weight);
	line-height: var(--wp--custom--text--accent-large--line-height);
	letter-spacing: var(--wp--custom--account--greeting-letter-spacing);
}

/* Full-width scroll row; room for the focus ring above and below the tabs. */
.mk-account__scroller {
	--mk-account-ring-width: var(--wp--custom--focus--ring-width);
	--mk-account-ring-offset: var(--wp--custom--focus--ring-offset);
	--mk-account-ring: calc(
		var(--mk-account-ring-width) + var(--mk-account-ring-offset)
	);

	margin-block: var(--wp--custom--account--tabs-margin);
	margin-inline: calc(-1 * var(--wp--custom--account--padding-inline));
}

.mk-account__row {
	display: flex;
	gap: var(--wp--custom--account--tabs-gap);
	margin-block: calc(-1 * var(--mk-account-ring));
	margin-inline: 0;
	padding-block: var(--mk-account-ring);
	padding-inline: var(--wp--custom--account--padding-inline);
	overflow-x: auto;
	list-style: none;
	scroll-padding-inline: var(--wp--custom--account--padding-inline);
	scrollbar-width: none;
}

.mk-account__row::-webkit-scrollbar {
	display: none;
}

.mk-account__row-item {
	flex: none;
}

.mk-account__panel[hidden] {
	display: none;
}

/* Personal details: grows to the drawer bottom, "Log out" at least 24 below the sections. */
.mk-account__panel--profile {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--custom--account--logout-margin);
}

.mk-account__sections {
	display: grid;
	gap: var(--wp--custom--account--section-gap);
}

/* The sections gap already spaces it. */
.mk-account .mk-account__divider {
	margin-block: 0;
}

.mk-account .mk-account__logout {
	align-self: center;
	margin-block-start: auto;
}

.mk-account__title {
	margin: 0;
	color: var(--wp--custom--color--account--title);
	font-family: var(--wp--custom--text--label-large--font-family);
	font-size: var(--wp--custom--text--label-large--font-size);
	font-weight: var(--wp--custom--text--label-large--font-weight);
	line-height: var(--wp--custom--text--label-large--line-height);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
}

.mk-account__orders {
	display: grid;
	gap: var(--wp--custom--account--list-gap);
}

.mk-account__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--account--grid-gap);
	margin-block: var(--wp--custom--account--tabs-margin) 0;
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.mk-account__grid[hidden],
.mk-account__grid > li[hidden] {
	display: none;
}

.mk-account__more {
	margin-block-start: var(--wp--custom--account--tabs-margin);
}

/* The spinner (overlay) covers only this panel, never the tabs. */
.mk-account__panel--favourites {
	position: relative;
	min-block-size: calc(3 * var(--wp--custom--spinner--size));
}