/*
 * My Account — Editorial Dashboard.
 *
 * Desktop: sidebar (220px fixed) + content (1fr).
 * Tablet/mobile: sidebar hidden → chip-tab scroll nav appears above content.
 * No sticky bottom bar — avoids competing with Cart/Checkout sticky CTAs.
 *
 * Status badges: dot + text only, never colored pill/background.
 * Avatar: square initials box (not circle) — boutique tone.
 * Dashboard cards: no border/shadow, whitespace only.
 *
 * Two-class selectors (0,2,0) beat WP layout rules (0,1,0) without !important.
 *
 * Tokens read:
 *   color.terracotta.500        — active sidebar indicator, chip underline, accent elements
 *   color.green.700             — delivered status dot
 *   semantic.color.text.primary — headings, nav active, profile name, stat values
 *   semantic.color.text.muted   — nav inactive, dates, labels, since, cancelled dot
 *   semantic.color.bg.surface   — empty state background
 *   semantic.color.border.base  — sidebar/nav dividers, order row dividers, table borders
 *   semantic.typography.display — greeting, stat values, empty heading (Cormorant)
 *   semantic.typography.body    — nav items, chips, stat labels, order titles (Jost)
 *   space.1 – 10
 *   duration.base / easing.default
 */

/* ── Chip-tab nav (tablet/mobile only — hidden desktop) ───────────── */

.wpdl-my-account__chip-nav.wp-block-group {
	display: none;
}

/* ── Layout grid: sidebar | content ──────────────────────────────── */

.wpdl-my-account__layout.wp-block-group {
	display: grid;
	grid-template-columns: 13.75rem 1fr;
	gap: var(--wp--custom--space--10);
	align-items: start;
	margin-block: var(--wp--custom--space--8) var(--wp--custom--space--10);
}

/* Reset WP flow margins on grid direct children */
.wpdl-my-account__sidebar.wp-block-group,
.wpdl-my-account__content.wp-block-group {
	margin-block: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.wpdl-my-account__profile.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-my-account__avatar-box.wp-block-group {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border: 1px solid var(--wp--custom--semantic--color--text--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	margin-block: 0;
}

.wpdl-my-account__avatar-initials {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	line-height: 1;
}

.wpdl-my-account__profile-info.wp-block-group {
	gap: var(--wp--custom--space--1);
	margin-block: 0;
}

.wpdl-my-account__profile-name {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-my-account__profile-since {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-my-account__sidebar-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--5);
	opacity: 1;
}

/* Sidebar nav items */
.wpdl-my-account__nav-item {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block: 0;
	border-inline-start: 0.125rem solid transparent;
	padding-inline-start: var(--wp--custom--space--5);
	padding-block: var(--wp--custom--space--4);
}

.wpdl-my-account__nav-item.is-active {
	border-inline-start-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-my-account__nav-link {
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-my-account__nav-link:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-my-account__nav-item.is-active .wpdl-my-account__nav-link {
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-my-account__nav-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: var(--wp--custom--space--4);
	opacity: 1;
}

/* ── Welcome greeting ─────────────────────────────────────────────── */

.wpdl-my-account__greeting.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.25rem, 0.85rem + 1.79vw, 2rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

/* ── Stats row ────────────────────────────────────────────────────── */

.wpdl-my-account__stats.wp-block-group {
	gap: var(--wp--custom--space--10);
	align-items: start;
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-my-account__stat.wp-block-group {
	gap: var(--wp--custom--space--1);
	margin-block: 0;
}

.wpdl-my-account__stat-value {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.1875rem, 0.85rem + 1.49vw, 1.875rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	line-height: 1.1;
}

.wpdl-my-account__stat-label {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Content divider ──────────────────────────────────────────────── */

.wpdl-my-account__content-divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--8);
	opacity: 1;
}

/* ── Section headings + headers ───────────────────────────────────── */

.wpdl-my-account__section-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-my-account__section-header.wp-block-group {
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-my-account__view-all {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block: 0;
}

.wpdl-my-account__view-all-link {
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-my-account__view-all-link:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Recent order rows ────────────────────────────────────────────── */

.wpdl-my-account__recent-orders.wp-block-group {
	margin-block: 0 var(--wp--custom--space--9);
}

.wpdl-my-account__order-row.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	padding-block: var(--wp--custom--space--5);
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0;
}

.wpdl-my-account__order-thumb.wp-block-image {
	flex: 0 0 3.25rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: 0;
}

.wpdl-my-account__order-thumb.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder colours for P4 demo thumbnails */
.wpdl-my-account__order-row:nth-child(1) .wpdl-my-account__order-thumb.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-my-account__order-row:nth-child(2) .wpdl-my-account__order-thumb.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--primary); }

.wpdl-my-account__order-info.wp-block-group {
	flex: 1;
	gap: var(--wp--custom--space--1);
	margin-block: 0;
}

.wpdl-my-account__order-title {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-my-account__order-date {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-my-account__order-action {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block: 0;
	flex: 0 0 auto;
}

.wpdl-my-account__order-link {
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-my-account__order-link:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Status badge (dot + text) ────────────────────────────────────── */

.wpdl-my-account__status.wp-block-group {
	gap: var(--wp--custom--space--3);
	align-items: center;
	flex: 0 0 auto;
	margin-block: 0;
}

.wpdl-my-account__status-dot {
	min-inline-size: 0.375rem;
	min-block-size: 0.375rem;
	border-radius: 50%;
	flex: 0 0 0.375rem;
	margin-block: 0;
}

.wpdl-my-account__status-text {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* Status dot colours */
.wpdl-my-account__status--delivered .wpdl-my-account__status-dot {
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-my-account__status--in-transit .wpdl-my-account__status-dot {
	background-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-my-account__status--cancelled .wpdl-my-account__status-dot {
	background-color: var(--wp--custom--semantic--color--text--muted);
}

/* ── Secondary section: orders table + wishlist empty ─────────────── */

.wpdl-my-account__secondary.wp-block-group {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--wp--custom--space--8);
	align-items: start;
	margin-block: 0 var(--wp--custom--space--10);
}

.wpdl-my-account__orders-table.wp-block-group,
.wpdl-my-account__empty-state.wp-block-group {
	margin-block: 0;
}

/* Orders table */
.wpdl-my-account__table-header.wp-block-group,
.wpdl-my-account__table-row.wp-block-group {
	display: grid;
	grid-template-columns: 0.6fr 1.2fr 0.8fr 0.6fr 1fr;
	gap: var(--wp--custom--space--4);
	padding-block: var(--wp--custom--space--4);
	margin-block: 0;
}

.wpdl-my-account__table-header.wp-block-group {
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-my-account__table-row.wp-block-group {
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-my-account__table-th {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-my-account__table-cell {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

/* ── Empty state card ─────────────────────────────────────────────── */

.wpdl-my-account__empty-state.wp-block-group {
	background-color: var(--wp--custom--semantic--color--surface--primary);
	padding: var(--wp--custom--space--9) var(--wp--custom--space--7);
	text-align: center;
}

.wpdl-my-account__empty-icon {
	font-size: 2.5rem;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--5);
	line-height: 1;
}

.wpdl-my-account__empty-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-my-account__empty-body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--6);
	max-inline-size: 18rem;
	margin-inline: auto;
}

.wpdl-my-account__empty-cta {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block: 0;
}

.wpdl-my-account__empty-link {
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--space--1);
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-my-account__empty-link:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────── */

@media (width < 64em) {
	/* Show chip-tab nav */
	.wpdl-my-account__chip-nav.wp-block-group {
		display: flex;
		overflow-x: auto;
		gap: var(--wp--custom--space--6);
		padding-block: var(--wp--custom--space--4);
		border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
		margin-block: var(--wp--custom--space--6) 0;
		scrollbar-width: none;
	}

	.wpdl-my-account__chip-nav.wp-block-group::-webkit-scrollbar {
		display: none;
	}

	/* Hide sidebar, collapse grid to single column */
	.wpdl-my-account__sidebar.wp-block-group {
		display: none;
	}

	.wpdl-my-account__layout.wp-block-group {
		grid-template-columns: 1fr;
		gap: 0;
		margin-block-start: var(--wp--custom--space--7);
	}

	.wpdl-my-account__secondary.wp-block-group {
		grid-template-columns: 1fr;
	}

	.wpdl-my-account__greeting.wp-block-heading {
		font-size: clamp(1.125rem, 0.75rem + 1.67vw, 1.625rem);
	}
}

/* Chip tab styles (only relevant when chip nav is visible) */
.wpdl-my-account__chip {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	white-space: nowrap;
	margin-block: 0;
	padding-block-end: var(--wp--custom--space--4);
	border-block-end: 0.125rem solid transparent;
	cursor: pointer;
}

.wpdl-my-account__chip.is-active {
	color: var(--wp--custom--semantic--color--text--primary);
	border-block-end-color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-my-account__stats.wp-block-group {
		gap: var(--wp--custom--space--7);
	}

	.wpdl-my-account__table-header.wp-block-group,
	.wpdl-my-account__table-row.wp-block-group {
		grid-template-columns: 0.5fr 1fr 0.7fr 0.5fr;
	}

	/* Hide DATE column on mobile */
	.wpdl-my-account__table-header .wpdl-my-account__table-th:nth-child(3),
	.wpdl-my-account__table-row .wpdl-my-account__table-cell:nth-child(3) {
		display: none;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpdl-my-account__nav-link,
	.wpdl-my-account__view-all-link,
	.wpdl-my-account__order-link,
	.wpdl-my-account__empty-link {
		transition: none;
	}
}

/* =============================================================================
   WC P8 — My Account page theming (woocommerce classic HTML)
   No blockified my-account template in WC 8.x — page uses page.html and
   WC renders classic HTML via the [woocommerce_my_account] shortcode.
   Scoped to .woocommerce-account body class WC adds to account pages.
   ============================================================================= */

/* stylelint-disable no-descending-specificity -- WC class selectors follow
   static pattern selectors; distinct properties, no cascade conflict. */

/* Sidebar navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
	display: block;
	padding-block: var(--wp--custom--space--3);
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Content area */
.woocommerce-account .woocommerce-MyAccount-content {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	color: var(--wp--custom--semantic--color--text--primary);
}

/* Order table */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
}

.woocommerce-account .woocommerce-orders-table thead th {
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.625rem;
	color: var(--wp--custom--semantic--color--text--muted);
	padding-block-end: var(--wp--custom--space--3);
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	text-align: start;
}

.woocommerce-account .woocommerce-orders-table tbody td {
	padding-block: var(--wp--custom--space--4);
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	vertical-align: middle;
}

/* Order status badges (text + dot, no colored background) */
.woocommerce-account .wc-item-meta,
.woocommerce-account mark.order-status {
	background: none;
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	color: var(--wp--custom--semantic--color--text--muted);
	padding: 0;
}

/* Buttons (View, Pay) */
.woocommerce-account .woocommerce-button,
.woocommerce-account .button {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	background: none;
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	padding: var(--wp--custom--space--2) var(--wp--custom--space--4);
	text-decoration: none;
	transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
	            color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .button:hover {
	border-color: var(--wp--custom--semantic--color--accent--primary);
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* Address cards */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--primary);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

/* Form fields (account details / address edit) */
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.875rem;
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	padding: var(--wp--custom--space--3) var(--wp--custom--space--4);
	width: 100%;
	background: transparent;
}

.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus {
	outline: 0.125rem solid var(--wp--custom--semantic--color--text--primary);
	outline-offset: 0.125rem;
	border-color: var(--wp--custom--semantic--color--text--primary);
}

/* Save button */
.woocommerce-account .woocommerce-EditAccountForm .button[type="submit"],
.woocommerce-account .woocommerce-address-fields .button[type="submit"] {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--inverse);
	background-color: var(--wp--custom--semantic--color--text--primary);
	border: none;
	border-radius: 0;
	padding: var(--wp--custom--space--4) var(--wp--custom--space--8);
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.woocommerce-account .woocommerce-EditAccountForm .button[type="submit"]:hover,
.woocommerce-account .woocommerce-address-fields .button[type="submit"]:hover {
	background-color: var(--wp--custom--semantic--color--accent--primary);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .woocommerce-MyAccount-navigation li a,
	.woocommerce-account .woocommerce-button,
	.woocommerce-account .button,
	.woocommerce-account .woocommerce-EditAccountForm .button[type="submit"] {
		transition: none;
	}
}

/* stylelint-enable no-descending-specificity */
