/**
 * AfriÉlan Studio — My Account / Login / Register
 */
/* ---------------------------------------------------------------------
   My Account — single column (nav hidden; content takes full width)
--------------------------------------------------------------------- */
/* The native WooCommerce left nav (Dashboard / Address Book / Orders /
   Downloads / Addresses / Account details / Log out) is hidden — those
   same links already live in the header account dropdown (see
   inc/nav-auth.php), so this sidebar just duplicated them. */
.woocommerce-MyAccount-navigation { display: none; }
.woocommerce-account .woocommerce {
	display: block;
	/* WIDTH UPDATE (design change #3, "standalone pages wider"): bumped
	   from 1200px to 1400px, matching the same update in checkout-layout.css,
	   cart.css, and design-tokens.css's .afrielan-account-page-header below,
	   so every standalone page is the same, wider width. */
	max-width: 1400px;
	margin: 30px auto 60px;
	padding: 0 20px;
}
.woocommerce-MyAccount-content {
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	padding: 1.75em;
	box-shadow: var(--ae-shadow);
}
/* ---------------------------------------------------------------------
   Standalone page header (Account Details, Orders, etc.) — moved to
   assets/css/design-tokens.css (.afrielan-account-page-header) so the
   same title styling can be reused on Checkout, which account.css
   doesn't load on. Nothing to declare here anymore.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Orders — filter bar (status + date range)
--------------------------------------------------------------------- */
.afrielan-order-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid var(--brand-line);
}
.afrielan-order-filters__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.afrielan-order-filters__field label {
	font-size: 12px;
	font-weight: 500;
	color: var(--brand-ink-soft);
}
.afrielan-order-filters__field select,
.afrielan-order-filters__field input[type="date"] {
	min-width: 160px;
}
.afrielan-order-filters__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.afrielan-order-filters__actions .btn-primary {
	padding: 10px 20px; /* slightly shorter than the site default so it lines up with the field height */
}
.afrielan-order-filters__clear {
	font-size: 13px;
	color: var(--brand-ink-soft);
	text-decoration: underline;
}
.afrielan-order-filters__clear:hover { color: var(--brand-accent); }
@media (max-width: 640px) {
	.afrielan-order-filters { flex-direction: column; align-items: stretch; }
	.afrielan-order-filters__field select,
	.afrielan-order-filters__field input[type="date"] { min-width: 0; width: 100%; }
}

.woocommerce-MyAccount-content .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-orders-table th {
	text-align: left;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--brand-ink-soft);
	border-bottom: 1px solid var(--brand-line);
	padding-bottom: 10px;
}
.woocommerce-orders-table td { padding: 14px 8px 14px 0; border-bottom: 1px solid var(--brand-line); font-size: .92em; }
.woocommerce-orders-table tbody tr:hover td { background: var(--brand-paper); }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { text-transform: capitalize; }

/* Order number reads as a link but should look like the anchor of the
   row, not an ordinary inline link. Date sits quieter beside it. */
.woocommerce-orders-table__cell-order-number a {
	font-family: var(--brand-font-display);
	font-weight: 500;
	color: var(--brand-ink);
	text-decoration: none;
}
.woocommerce-orders-table__cell-order-number a:hover { color: var(--brand-accent); }
.woocommerce-orders-table__cell-order-date {
	color: var(--brand-ink-soft);
	font-size: .9em;
}
.woocommerce-orders-table__cell-order-total {
	font-weight: 500;
}

/* -----------------------------------------------------------------
   Row actions (View / Pay / Cancel) — these inherit the site-wide
   full-size .woocommerce a.button rule (12px 24px, solid accent),
   which is right for a standalone "Place order"-type button but too
   heavy for 2-3 buttons stacked in one table cell. Scale them down
   and give "Cancel" a quieter, non-competing treatment since it's a
   negative/secondary action, not the thing most customers click.
----------------------------------------------------------------- */
.woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}
.woocommerce-orders-table__cell-order-actions .button {
	display: inline-block;
	padding: 7px 14px !important;
	font-size: 12.5px !important;
	border-radius: var(--brand-radius);
	margin: 2px 6px 2px 0;
}
.woocommerce-orders-table__cell-order-actions .button.cancel {
	background: transparent !important;
	color: var(--brand-danger-fg) !important;
	border: 1px solid var(--brand-line);
}
.woocommerce-orders-table__cell-order-actions .button.cancel:hover {
	border-color: var(--brand-danger-fg);
	background: var(--brand-danger-bg) !important;
}

/* -----------------------------------------------------------------
   Mobile — WooCommerce already prints a data-title attribute on every
   <td> (e.g. data-title="Total") specifically so themes can relabel
   cells once the table stops being a table. Below this width the
   header row is dropped and each row becomes a bordered card of
   label/value lines instead of a 5-column squeeze.
----------------------------------------------------------------- */
@media (max-width: 680px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}
	.woocommerce-orders-table tr {
		margin-bottom: 14px;
		border: 1px solid var(--brand-line);
		border-radius: var(--brand-radius);
		padding: 4px 14px;
	}
	.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--brand-line);
		text-align: right;
	}
	.woocommerce-orders-table td:last-child { border-bottom: none; }
	.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-size: .74em;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--brand-ink-soft);
		text-align: left;
	}
	.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
		white-space: normal;
	}
	.woocommerce-orders-table__cell-order-actions::before { display: none; }
	.woocommerce-orders-table__cell-order-actions .button {
		margin: 2px 0 2px 8px;
	}
}
/* ---------------------------------------------------------------------
   Account Details — Profile header (avatar + name/email + actions),
   Biography, and the "Login & Security" section that follows
   (see inc/account-profile.php). Sits above WooCommerce's own
   name/email/password fields.
--------------------------------------------------------------------- */
.afrielan-profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-bottom: 1.75em;
	margin-bottom: 1.75em;
	border-bottom: 1px solid var(--brand-line);
}
.afrielan-profile-picture-preview {
	/* Fixed circular avatar so a portrait or landscape upload never
	   distorts the layout - object-fit crops it to fit instead. */
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--brand-line);
	background: var(--brand-paper);
	flex-shrink: 0;
}
.afrielan-profile-header-info {
	min-width: 0; /* lets the name/email ellipsis instead of overflowing */
}
.afrielan-profile-header-name {
	font-family: var(--brand-font-display);
	font-size: 1.15rem;
	font-weight: 500;
	margin: 0 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.afrielan-profile-header-email {
	color: var(--brand-ink-soft);
	font-size: 13.5px;
	margin: 0 0 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.afrielan-profile-picture-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.afrielan-profile-picture-actions .btn-secondary {
	padding: 8px 16px;
	font-size: 13px;
}
.afrielan-profile-picture-remove {
	/* Plain text link rather than a bordered button, so it reads as the
	   lighter-weight of the two actions next to "Change Picture". */
	background: none;
	border: none;
	padding: 0;
	font-family: var(--brand-font-body);
	font-size: 13px;
	color: var(--brand-ink-soft);
	text-decoration: underline;
	cursor: pointer;
}
.afrielan-profile-picture-remove:hover { color: var(--brand-danger-fg); }

.afrielan-biography-field { margin-bottom: 1.75em !important; padding-bottom: 1.75em; border-bottom: 1px solid var(--brand-line); }
.afrielan-biography-field textarea { resize: vertical; width: 100%; }
.afrielan-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--brand-ink-soft);
}

/* Section heading that introduces WooCommerce's own name/email/password
   fields, which render immediately after this in the DOM. */
.afrielan-account-section-heading {
	font-size: 1.1rem;
	margin: 0 0 1.1em;
}

/* "Change Password" toggle (see inc/account-profile.php) — the password
   fields stay hidden/disabled until this is clicked, so a browser
   autofilling them can never sneak a password change into an unrelated
   save (Final_things_to_do_on.md, "Bugs changes" #3). */
.afrielan-change-password-toggle {
	margin: 0.25em 0 1.25em;
}
.afrielan-password-fields-wrapper {
	margin-bottom: 1.25em;
}

/* WooCommerce's own account fields — tighten spacing and align labels.
   Previously First/Last name were floated side-by-side (WC's own
   form-row-first/form-row-last classes); floats here were fragile and
   misaligned (Last name dropped to a different vertical position than
   First name) because the row heights weren't guaranteed identical.
   Stacking every field full width, same as the rest of this form,
   removes that whole class of bug. */
.woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
	width: 100% !important;
	float: none !important;
	margin: 0 0 1.1em;
}
/* BUG FIX: "Password change" heading looked off because <fieldset> and
   <legend> carry their own browser default styling (fieldset gets a
   grooved border + padding, legend sits inset inside that border) that
   was never reset - our divider/heading rules below were fighting that
   default chrome instead of starting from a clean box. */
.woocommerce-EditAccountForm fieldset {
	border: 0;
	margin: 0;
	padding: 1.1em;
}
.woocommerce-EditAccountForm legend {
	display: block;
	width: 100%;
	margin: 0 0 1.1em;
	padding: 1.1em 0 0;
	font-family: var(--brand-font-display);
	font-size: 1rem;
	font-weight: 500;
	border-top: 1px solid var(--brand-line);
}
.woocommerce-EditAccountForm .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}
.woocommerce-EditAccountForm p.woocommerce-form-row:last-of-type {
	margin-top: 1.5em;
}

/* BUG FIX: browser auto-fill (Chrome/Edge) paints its own yellow tint
   on filled fields, overriding our white/brand background - this is
   what made Current Password and Email look broken/off-brand in the
   screenshot. Standard trick: an absurdly long transition delay on
   background-color means the browser's autofill style never visibly
   applies before our own background "wins" the very next frame. */
.woocommerce-EditAccountForm input:-webkit-autofill,
.afrielan-login-page input:-webkit-autofill,
.afrielan-register-page input:-webkit-autofill {
	-webkit-text-fill-color: var(--brand-ink);
	-webkit-box-shadow: 0 0 0px 1000px var(--brand-surface) inset;
	box-shadow: 0 0 0px 1000px var(--brand-surface) inset;
	transition: background-color 600000s 0s, color 600000s 0s;
}

@media (max-width: 640px) {
	.afrielan-profile-header { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   Login / Register pages
--------------------------------------------------------------------- */
.afrielan-login-page,
.afrielan-register-page {
	max-width: 420px;
	margin: 50px auto 70px;
	padding: 0 20px;
}
.afrielan-login-page h1,
.afrielan-register-page h1 {
	font-size: 1.9rem;
	margin-bottom: 24px;
	text-align: center;
}
.afrielan-login-page form.login,
.afrielan-register-page form.register {
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.afrielan-login-page p.login-username,
.afrielan-login-page p.login-password,
.afrielan-register-page p.woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}
.afrielan-login-page p.login-username label,
.afrielan-login-page p.login-password label,
.afrielan-register-page label {
	font-size: 13px;
	font-weight: 500;
}
.afrielan-login-page .woocommerce-form-row .required,
.afrielan-register-page .required { color: var(--brand-danger-fg); text-decoration: none; }
.afrielan-login-page p.login-remember {
	font-size: 13px;
	color: var(--brand-ink-soft);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}
.afrielan-login-page p.login-remember label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.afrielan-login-page p.login-submit,
.afrielan-register-page p.woocommerce-form-row:last-of-type {
	margin-top: 6px;
}
.afrielan-login-page button.woocommerce-Button,
.afrielan-register-page button.woocommerce-Button {
	width: 100%;
	text-align: center;
}
.afrielan-login-page > p,
.afrielan-register-page > p {
	text-align: center;
	font-size: 13.5px;
	color: var(--brand-ink-soft);
	margin-top: 18px;
}
.afrielan-register-page small { color: var(--brand-ink-soft); font-size: 12px; }

/*
 * BUG FIX: hide billing address on order details, belt-and-suspenders.
 * PHP already prevents a billing address from ever being SAVED to the
 * order (inc/checkout.php has no billing fields at checkout) and already
 * filters woocommerce_order_formatted_billing_address to '' - so
 * WooCommerce's own has_billing_address() check should already keep this
 * whole column from rendering. This CSS rule is just a safety net in
 * case any plugin/output still tries to print it.
 */
.woocommerce-column--billing-address {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Password "show/hide" toggle button
   BUG FIX: WordPress core's password-toggle.js runs on every password
   field site-wide (Login, Register, Account Details' password-change
   fields) and, on the fly, wraps each <input type="password"> in a
   `.wp-pwd` div and injects a `.wp-hide-pw` button with a dashicon
   inside it. The dashicons FONT/stylesheet is only ever loaded in
   wp-admin, never on the front end, so that icon glyph renders as
   nothing - an empty button. On top of that, our own site-wide rule
   for `.woocommerce button.button` (see design-tokens.css) painted
   that empty button solid brand-accent, which is the plain brown box
   sitting under each password field in the screenshot.
   Fix: reposition the button inside the field (not below it) and draw
   a visible eye icon ourselves with an inline SVG, so nothing depends
   on dashicons ever loading.
--------------------------------------------------------------------- */
/* WP's JS adds this wrapper itself - just make it a positioning
   context for the icon button that lands inside it. */
.wp-pwd {
	position: relative;
}
/* Room on the right of the password text so typed characters never
   sit underneath the icon. */
.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
	padding-right: 40px !important;
}
.wp-hide-pw,
.show-password-input {
	/* Undo the site-wide solid-button look this was inheriting from
	   design-tokens.css and turn it into a small icon button that
	   sits inside the field instead of a block below it. */
	position: absolute !important;
	top: 50% !important;
	right: 4px !important;
	transform: translateY(-50%);
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* The eye icon itself - inline SVG data URI (color hardcoded to match
   --brand-ink-soft, since data URIs can't read CSS variables) rather
   than a font icon, so it always renders regardless of what icon
   fonts are or aren't loaded on the page. */
.wp-hide-pw::before,
.show-password-input::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.wp-hide-pw:hover::before,
.show-password-input:hover::before {
	/* Same icon, redrawn in the brand accent color for the hover state. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9724f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Order status — colored pill instead of WooCommerce's plain text.
   Used on BOTH the orders list table (page-orders.php) and the single
   order view header (page-order-view.php) — both print the status as
   plain capitalized text with no visual distinction between e.g.
   "Processing" and "Cancelled", which is what made that column read
   as an afterthought. Color-codes by matching against the "wc-<slug>"
   class WooCommerce always adds to whatever prints the status.
--------------------------------------------------------------------- */
.woocommerce-orders-table__cell-order-status mark,
.order-status {
	display: inline-block;
	background: var(--brand-paper);
	color: var(--brand-ink-soft);
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: capitalize;
}
/* Positive / complete states */
.status-completed, .status-processing {
	background: var(--brand-success-bg) !important;
	color: var(--brand-success-fg) !important;
}
/* Negative states */
.status-cancelled, .status-failed, .status-refunded {
	background: var(--brand-danger-bg) !important;
	color: var(--brand-danger-fg) !important;
}
/* Neutral/in-progress states (pending, on-hold, and anything custom
   like the delivery statuses from inc/order-statuses.php) fall back
   to the plain paper/ink-soft pill above — no extra rule needed. */

/* ---------------------------------------------------------------------
   Single order view (page-order-view.php) — order meta boxes + items
   table. Previously unstyled: only the outer .woocommerce-MyAccount-
   content card (above) applied, so the order number/date/total meta
   list and the line-items table inside it were bare WooCommerce markup.
--------------------------------------------------------------------- */
.woocommerce-order-details__title {
	font-family: var(--brand-font-display);
	font-size: 1.3rem;
	margin: 0 0 1em;
}
ul.woocommerce-order-overview.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0 0 1.75em;
	padding: 1.1em 1.25em;
	background: var(--brand-paper);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
}
ul.woocommerce-order-overview li {
	font-size: 13px;
}
ul.woocommerce-order-overview li strong {
	display: block;
	font-family: var(--brand-font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--brand-ink);
	margin-top: 2px;
}
table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}
table.woocommerce-table--order-details thead th {
	text-align: left;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--brand-ink-soft);
	border-bottom: 1px solid var(--brand-line);
	padding-bottom: 10px;
}
table.woocommerce-table--order-details td {
	padding: 12px 8px 12px 0;
	border-bottom: 1px solid var(--brand-line);
	font-size: .92em;
}
table.woocommerce-table--order-details tfoot th,
table.woocommerce-table--order-details tfoot td {
	font-family: var(--brand-font-display);
}
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 1.1em;
	font-weight: 500;
	border-top: 1px solid var(--brand-ink);
	border-bottom: none;
	padding-top: 14px;
}

/* ---------------------------------------------------------------------
   Orders list — empty state + pagination (page-orders.php)
   Previously plain unstyled text/links.
   NOTE: orders-list.php's actual empty state now prints
   .afrielan-empty-state directly (see design-tokens.css), not this
   ".woocommerce-notice" selector - that class isn't one of WooCommerce
   core's real notice classes (those are .woocommerce-message/-error/
   -info, styled site-wide in design-tokens.css section 12). Left this
   rule in place in case a gateway/plugin ever prints that exact class
   here, but it's not doing the empty-state's job anymore.
--------------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-notice {
	background: var(--brand-paper);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	padding: 3em 2em;
	text-align: center;
	color: var(--brand-ink-soft);
}
/* "No orders yet" — a plain sentence read as an afterthought in an
   otherwise-designed page; a small icon above it gives the empty
   state the same weight as the empty-cart card in cart.css. */
.woocommerce-MyAccount-content .woocommerce-notice::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6459' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.3 2.3c-.5.5-.1 1.4.6 1.4H17M9 21a1 1 0 100-2 1 1 0 000 2zM20 21a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E");
	opacity: .5;
}
.woocommerce-pagination {
	margin-top: 1.5em;
	text-align: center;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	padding: 0;
}
.woocommerce-pagination .page-numbers li { display: inline-flex; }
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: var(--brand-radius);
	border: 1px solid var(--brand-line);
	font-size: 13px;
	color: var(--brand-ink);
	text-decoration: none;
}
.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--brand-accent);
	color: var(--brand-accent);
}
.woocommerce-pagination span.page-numbers.current {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: var(--brand-accent-ink);
}

/* ---------------------------------------------------------------------
   Orders list — professional restyle (orders-list.php override).
   Table markup/classes are still WooCommerce's own (see the override
   file for why), so this is a pure CSS restyle: card-style rows instead
   of a bare HTML table, no layout structure changed.
--------------------------------------------------------------------- */
.afrielan-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px; /* gap between "card" rows */
}
.afrielan-orders-table thead th {
	text-align: left;
	font-family: var(--brand-font-body);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--brand-ink-soft);
	padding: 0 18px 8px;
	font-weight: 600;
}
.afrielan-orders-table tbody tr {
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
}
.afrielan-orders-table tbody tr:hover {
	border-color: var(--brand-accent);
}
.afrielan-orders-table tbody td {
	padding: 16px 18px;
	font-family: var(--brand-font-body);
	font-size: 14px;
	color: var(--brand-ink);
	border-top: 1px solid var(--brand-line);
	border-bottom: 1px solid var(--brand-line);
}
.afrielan-orders-table tbody td:first-child { border-left: 1px solid var(--brand-line); border-radius: var(--brand-radius) 0 0 var(--brand-radius); }
.afrielan-orders-table tbody td:last-child  { border-right: 1px solid var(--brand-line); border-radius: 0 var(--brand-radius) var(--brand-radius) 0; }
.afrielan-orders-table .woocommerce-orders-table__cell-order-number a {
	font-family: var(--brand-font-display);
	color: var(--brand-ink);
	text-decoration: none;
}
.afrielan-orders-table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}
.afrielan-orders-table .woocommerce-orders-table__cell-order-actions .button {
	margin-left: 8px;
}

/* Status pill — reuses the shared .badge look from design-tokens.css,
   with per-status colour so "Cancelled"/"Refunded" read as different
   at a glance from "Processing"/"Completed". */
.afrielan-order-status-pill {
	display: inline-block;
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 11.5px;
	letter-spacing: .02em;
	font-family: var(--brand-font-body);
	background: var(--brand-paper);
	color: var(--brand-ink-soft);
	border: 1px solid var(--brand-line);
}
.afrielan-order-status-pill--completed,
.afrielan-order-status-pill--processing {
	background: var(--brand-success-bg);
	color: var(--brand-success-fg);
	border-color: transparent;
}
.afrielan-order-status-pill--cancelled,
.afrielan-order-status-pill--failed,
.afrielan-order-status-pill--refunded {
	background: var(--brand-danger-bg);
	color: var(--brand-danger-fg);
	border-color: transparent;
}
.afrielan-order-status-pill--pending,
.afrielan-order-status-pill--on-hold {
	background: var(--brand-accent);
	color: var(--brand-accent-ink);
	border-color: transparent;
	opacity: .85;
}

/* ---------------------------------------------------------------------
   Order details — line item product thumbnail
   (order-details-item.php override).
--------------------------------------------------------------------- */
.afrielan-order-item {
	display: flex;
	align-items: center;
	gap: 12px;
}
.afrielan-order-item__image,
.afrielan-order-item__image img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: var(--brand-radius);
	object-fit: cover;
	flex-shrink: 0;
}
.afrielan-order-item__image {
	border: 1px solid var(--brand-line);
	overflow: hidden;
	background: var(--brand-paper);
}
.afrielan-order-item__image--placeholder {
	background: var(--brand-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6459' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/22px no-repeat;
}
.afrielan-order-item__details { min-width: 0; } /* allows long product names to wrap instead of overflowing */

/* ---------------------------------------------------------------------
   Reusable empty-state block (design item #4 / bug #1, "no results /
   empty" containers) — MOVED to assets/css/design-tokens.css.
   account.css only loads on My Account-type pages (see
   inc/theme-setup.php's child_enqueue_styles()), but the Cart page and
   the homepage need this exact same component too, so it now lives in
   design-tokens.css instead, which loads on every page. Kept this note
   here so nobody goes looking for ".afrielan-empty-state" in this file
   and comes up empty. Still used for "No orders yet" via orders-list.php.
--------------------------------------------------------------------- */