/* =====================================================================
   Customer Dashboard — My Account area.

   REDESIGN — same "Digital Receipt" direction as checkout.css: hairline
   borders, generous white space, monospace numerals for anything that's
   actually a number (stat counts, order totals, order numbers). Tokens
   are scoped to .sk-account-page (the body class added on every My
   Account screen — see inc/setup.php), so the rest of the site is
   unaffected until its own redesign pass.
   ===================================================================== */

.sk-account-page {
	--mm-ink: #14161b;
	--mm-ink-soft: #6b7075;
	--mm-ink-faint: #9a9ea3;
	--mm-paper: #ffffff;
	--mm-paper-soft: #f7f7f4;
	--mm-line: #e7e7e2;
	--mm-accent: #0e6e4e;
	--mm-accent-dark: #0a5039;
	--mm-accent-soft: #e9f4ee;
	--mm-radius: 10px;
	--mm-radius-sm: 6px;
	--mm-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.sk-account-page .sk-page-layout { padding-block: 44px 72px; }
.sk-account-nav { float: none; width: 100%; max-width: 260px; box-sizing: border-box; }
.sk-account-content { float: none; width: 100%; box-sizing: border-box; }

/* Sidebar + content side-by-side. */
.sk-account-layout {
	display: grid; grid-template-columns: 256px 1fr; gap: var(--sk-gap); align-items: flex-start; width: 100%;
}

.sk-account-nav {
	background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
	overflow: hidden; position: sticky; top: calc(var(--sk-header-height) + 16px);
}
.sk-account-nav__profile { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--mm-line); }
.sk-account-nav__avatar { border-radius: 50%; flex-shrink: 0; }
.sk-account-nav__profile-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-account-nav__profile-info strong { font-size: 14px; font-weight: 600; color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-account-nav__profile-info span { font-size: 12px; color: var(--mm-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sk-account-nav ul { list-style: none; margin: 0; padding: 0; }
.sk-account-nav li { border-bottom: 1px solid var(--mm-line); }
.sk-account-nav li:last-child { border-bottom: none; }
.sk-account-nav li a {
	display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 14px;
	font-weight: 500; font-size: 13.5px; color: var(--mm-ink); text-decoration: none;
	border-left: 2px solid transparent;
	transition: background var(--sk-transition), border-color var(--sk-transition);
}
.sk-account-nav li a:hover { background: var(--mm-paper-soft); }
.sk-account-nav__icon { flex-shrink: 0; color: var(--mm-ink-faint); }
.sk-account-nav li a span:not(.sk-account-nav__chevron) { flex: 1; min-width: 0; }
.sk-account-nav__chevron { flex-shrink: 0; color: var(--mm-ink-faint); }
.sk-account-nav li.is-active a { background: var(--mm-accent-soft); font-weight: 600; border-left-color: var(--mm-accent); padding-left: 12px; }
.sk-account-nav li.is-active .sk-account-nav__icon { color: var(--mm-accent-dark); }
.sk-account-nav__item--danger a { color: var(--sk-danger); }
.sk-account-nav__item--danger .sk-account-nav__icon { color: var(--sk-danger); }
.sk-account-nav__item--danger a:hover { background: var(--sk-danger-light); }

.sk-account-content { background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 30px; color: var(--mm-ink); overflow-x: auto; max-width: 100%; }
.sk-account-content table { width: 100%; min-width: 480px; border-collapse: collapse; }
.sk-account-content table th, .sk-account-content table td { padding: 13px; border-bottom: 1px solid var(--mm-line); text-align: left; font-size: 13.5px; white-space: nowrap; }
.sk-account-content table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mm-ink-faint); font-weight: 600; }

.sk-account-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.sk-account-table th, .sk-account-table td { padding: 13px; border-bottom: 1px solid var(--mm-line); text-align: left; font-size: 13.5px; white-space: nowrap; }
.sk-account-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mm-ink-faint); font-weight: 600; }
.sk-license-key { background: var(--mm-paper-soft); border: 1px solid var(--mm-line); padding: 4px 10px; border-radius: var(--mm-radius-sm); font-size: 12.5px; font-family: var(--mm-mono); color: var(--mm-ink); }

.sk-product-grid--wishlist { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }

/* Numerals read as ledger figures: tabular monospace throughout. */
.sk-account-page .sk-account-table td:first-child,
.sk-account-page table td[data-order-total],
.sk-account-page .sk-dashboard__stat-value,
.sk-account-page .sk-dashboard__orders-table td:first-child,
.sk-account-page .sk-dashboard__order-info span {
	font-family: var(--mm-mono);
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Dashboard — Overview (template-parts/account/dashboard.php)
   The dashboard supplies its own cards, so the outer bordered box that
   normally wraps .sk-account-content is switched off here.
   ===================================================================== */
.sk-account-content:has(.sk-dashboard) { background: none; border: none; padding: 0; }

.sk-dashboard__welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sk-dashboard__welcome h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.sk-dashboard__welcome p { font-size: 13px; color: var(--mm-ink-soft); margin-top: 4px; }
.sk-dashboard__avatar { border-radius: 50%; flex-shrink: 0; }

.sk-dashboard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.sk-dashboard__stat {
	background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
	padding: 20px; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
	color: var(--mm-ink); transition: border-color var(--sk-transition);
}
.sk-dashboard__stat:hover { border-color: var(--mm-accent); }
.sk-dashboard__stat-icon {
	width: 34px; height: 34px; border-radius: var(--mm-radius-sm); display: flex; align-items: center;
	justify-content: center; margin-bottom: 10px;
}
.sk-dashboard__stat-icon svg { width: 17px; height: 17px; }
.sk-dashboard__stat-icon--primary,
.sk-dashboard__stat-icon--secondary,
.sk-dashboard__stat-icon--danger { background: var(--mm-accent-soft); color: var(--mm-accent-dark); }
.sk-dashboard__stat-value { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.sk-dashboard__stat-label { font-size: 12px; color: var(--mm-ink-soft); }

.sk-dashboard__section {
	background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
	padding: 24px; margin-bottom: 18px;
}
.sk-dashboard__section:last-child { margin-bottom: 0; }
.sk-dashboard__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sk-dashboard__section-head h3 { font-size: 14px; font-weight: 600; }
.sk-dashboard__section-head a { font-size: 12px; font-weight: 600; color: var(--mm-accent-dark); text-decoration: none; }

.sk-dashboard__orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sk-dashboard__orders-table th {
	text-align: left; color: var(--mm-ink-faint); font-weight: 600; font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .05em; padding: 0 10px 10px;
}
.sk-dashboard__orders-table td { padding: 13px 10px; border-top: 1px solid var(--mm-line); }
.sk-dashboard__orders-list { display: none; list-style: none; margin: 0; padding: 0; }
.sk-dashboard__order-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 0; border-top: 1px solid var(--mm-line); text-decoration: none; color: var(--mm-ink);
}
.sk-dashboard__orders-list li:first-child .sk-dashboard__order-row { border-top: none; }
.sk-dashboard__order-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sk-dashboard__order-info span { font-size: 12px; color: var(--mm-ink-soft); font-weight: 400; }

/* Order-status badges keep their semantic colors (green/amber/red mean
   the same thing everywhere) — only the shape is refined to match. */
.sk-badge { border-radius: var(--mm-radius-sm); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 3px 9px; }
.sk-badge--completed { background: var(--sk-success-light); color: var(--sk-success); }
.sk-badge--processing,
.sk-badge--on-hold { background: var(--sk-warning-light); color: #b45309; }
.sk-badge--pending { background: var(--mm-paper-soft); color: var(--mm-ink-soft); }
.sk-badge--cancelled,
.sk-badge--failed { background: var(--sk-danger-light); color: var(--sk-danger); }

.sk-badge--refunded { background: var(--mm-paper-soft); color: var(--mm-ink-soft); }

.sk-account-content form.sk-auth-form { max-width: 560px; }
.sk-auth-form__row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.sk-dashboard__quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sk-dashboard__quick-item {
	border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: 16px;
	display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--mm-ink); font-size: 13px; font-weight: 600;
	transition: border-color var(--sk-transition);
}
.sk-dashboard__quick-item:hover { border-color: var(--mm-accent); }
.sk-dashboard__quick-icon {
	width: 30px; height: 30px; border-radius: var(--mm-radius-sm); background: var(--mm-paper-soft);
	color: var(--mm-ink-soft); display: flex; align-items: center; justify-content: center;
}
.sk-dashboard__quick-icon svg { width: 15px; height: 15px; }