/*
 * ce-account.css - Creative Exposure V2 My Account presentation.
 *
 * Customer-facing brand theming for the native WooCommerce My Account experience (page id 8,
 * [woocommerce_my_account] shortcode, native endpoints: Dashboard, Orders, Downloads,
 * Addresses, Account details, Log out). Presentation only: this stylesheet restyles what
 * WooCommerce already renders. It creates no account data, replaces no template, adds no
 * endpoint, and changes no order, payment, financial-verification or ownership behaviour.
 * The payment status / balance / payment-proof view on the order-detail (view-order)
 * endpoint is owned by the pricing engine (M2-A7F) and is only styled here, never altered.
 * This layer consumes the design tokens defined in style.css (per
 * ARCHITECTURE_OWNERSHIP_MATRIX.md, style.css owns the tokens; downstream layers consume
 * them and never redefine them).
 *
 * Visual authority: testing:/account-proof.html, reconciled to reality. The proof's
 * fabricated dashboard stats, fake orders, fake Quotes, Saved Products, Payment Methods,
 * "Picked up at studio", "Refunded to card", and card branding are NOT reproduced. Only
 * real native account features are styled. The decorative short-dash motif is not used.
 * Customer-facing status wording stays "Ready for Delivery" (never "Ready for Collection").
 *
 * Scope: everything is prefixed with body.woocommerce-account so it cannot affect any other
 * page. Approved breakpoints only (1024 / 768 / 640).
 */

/* ---------------------------------------------------------------------------
 * Page heading
 * --------------------------------------------------------------------------- */
.woocommerce-account .ce-page__header {
	margin-bottom: var(--ce-space-6);
}
.woocommerce-account .ce-page__title {
	font-size: var(--ce-font-2xl);
	font-weight: var(--ce-fw-extrabold);
	letter-spacing: -0.01em;
	line-height: var(--ce-lh-tight);
}

/* ---------------------------------------------------------------------------
 * Two-column account layout (native navigation + content)
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-space-6);
	align-items: flex-start;
}
/* Notices (and any non-account content, e.g. the login form) span the full width so they
   never consume a navigation column. Flexbox honours the native source order
   (navigation first, then content). */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .u-columns {
	flex: 0 0 100%;
}

/* ---------------------------------------------------------------------------
 * Account navigation sidebar
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	flex: 0 0 260px;
	width: auto;
	margin: 0;
	border: var(--ce-border-width) solid var(--ce-color-border);
	background: var(--ce-color-bg-page);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: var(--ce-border-width) solid var(--ce-color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--ce-space-3) var(--ce-space-4);
	font-size: var(--ce-font-sm);
	font-weight: var(--ce-fw-semibold);
	color: var(--ce-color-text-mid);
	border-left: 3px solid transparent;
	transition: background-color var(--ce-transition), color var(--ce-transition), border-color var(--ce-transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ce-color-bg-cream);
	color: var(--ce-color-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ce-color-rust);
	border-left-color: var(--ce-color-rust-light);
	background: var(--ce-color-bg-cream);
	font-weight: var(--ce-fw-bold);
}

/* ---------------------------------------------------------------------------
 * Account content panel
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	flex: 1;
	min-width: 0;
	width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content > p {
	color: var(--ce-color-text-mid);
}

/* Real Quick Actions block (rendered from woocommerce_account_dashboard; real routes only) */
.woocommerce-account .ce-account-quickactions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ce-space-3);
	margin: 0 0 var(--ce-space-6);
	padding: 0;
	list-style: none;
}
.woocommerce-account .ce-account-quickactions li {
	margin: 0;
}
.woocommerce-account .ce-account-quickactions a {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-1);
	height: 100%;
	padding: var(--ce-space-4);
	background: var(--ce-color-bg-page);
	border: var(--ce-border-width) solid var(--ce-color-border);
	transition: border-color var(--ce-transition), transform var(--ce-transition);
}
.woocommerce-account .ce-account-quickactions a:hover {
	border-color: var(--ce-color-rust-light);
	transform: translateY(-3px);
}
.woocommerce-account .ce-account-quickactions .ce-qa-title {
	font-size: var(--ce-font-sm);
	font-weight: var(--ce-fw-extrabold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ce-color-text);
}
.woocommerce-account .ce-account-quickactions .ce-qa-sub {
	font-size: var(--ce-font-xs);
	color: var(--ce-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Orders table
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-orders-table {
	border: var(--ce-border-width) solid var(--ce-color-border);
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-account .woocommerce-orders-table__header {
	background: var(--ce-color-black);
	color: var(--ce-color-bg-page);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--ce-font-xs);
	font-weight: var(--ce-fw-bold);
	padding: var(--ce-space-3) var(--ce-space-4);
	text-align: left;
}
.woocommerce-account .woocommerce-orders-table__cell {
	padding: var(--ce-space-4);
	border-top: var(--ce-border-width) solid var(--ce-color-border);
	vertical-align: middle;
}
.woocommerce-account .woocommerce-orders-table__row:hover .woocommerce-orders-table__cell {
	background: var(--ce-color-bg-cream);
}
/* Status shown as a pill; colour-coded when WooCommerce provides a status class. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: var(--ce-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--ce-font-xs);
	color: var(--ce-color-text-mid);
}

/* ---------------------------------------------------------------------------
 * Buttons across the account (view order, save, etc.) -> rust pill
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-form-login button.button:not(:disabled),
.woocommerce-account .woocommerce-form-register button.button:not(:disabled) {
	background: var(--ce-color-rust-light);
	color: var(--ce-color-bg-page);
	border-radius: var(--ce-radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--ce-fw-bold);
	font-size: var(--ce-font-xs);
	padding: 10px 18px;
	border: 0;
	transition: background-color var(--ce-transition), transform var(--ce-transition);
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-Address-title .edit:hover,
.woocommerce-account .woocommerce-form-login button.button:not(:disabled):hover,
.woocommerce-account .woocommerce-form-register button.button:not(:disabled):hover {
	background: var(--ce-color-rust);
	transform: translateY(-2px);
	color: var(--ce-color-bg-page);
}

/* ---------------------------------------------------------------------------
 * Addresses + Account details forms
 * --------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ce-space-5);
}
.woocommerce-account .woocommerce-Address {
	border: var(--ce-border-width) solid var(--ce-color-border);
	padding: var(--ce-space-5);
}
.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	text-transform: uppercase;
	font-weight: var(--ce-fw-extrabold);
	letter-spacing: 0.02em;
	font-size: var(--ce-font-lg);
}
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row label {
	color: var(--ce-color-text-mid);
	font-weight: var(--ce-fw-semibold);
	font-size: var(--ce-font-sm);
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select {
	border-radius: 0;
	border: var(--ce-border-width) solid var(--ce-color-border);
	padding: var(--ce-space-3);
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	border-color: var(--ce-color-rust-light);
	box-shadow: 0 0 0 1px var(--ce-color-rust-light);
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Responsive (approved breakpoints only)
 * --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.woocommerce-account .woocommerce {
		gap: var(--ce-space-5);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex-basis: 220px;
	}
	.woocommerce-account .ce-account-quickactions {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 100%;
	}
	.woocommerce-account .ce-page__title {
		font-size: var(--ce-font-xl);
	}
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.woocommerce-account .ce-account-quickactions {
		grid-template-columns: 1fr;
	}
	/* Let the orders table scroll rather than overflow the page. */
	.woocommerce-account .woocommerce-MyAccount-content {
		overflow-x: auto;
	}
}

/* -----------------------------------------------------------------------------
 * Rule 13 self-review
 * Verified against TECHNICAL_SPECIFICATION.md and BUILD_RULES.md: presentation only.
 * Restyles the native WooCommerce My Account; creates no markup beyond a real quick-action
 * link list (real routes only), replaces no template, adds no endpoint, and changes no
 * order, payment, financial-verification, ownership or account-permission logic. Consumes
 * style.css design tokens (never redefines them). No fabricated stats/quotes/artwork, no
 * dead buttons, no pickup/collection wording, no card branding, no hardcoded image URLs,
 * no em dashes. Currency remains KYD. Approved breakpoints only (1024 / 768 / 640).
 * --------------------------------------------------------------------------- */