/**
 * Account pages: my-account, login, register, lost/reset password.
 *
 * There is nothing on the live site to match here — its login, register and
 * password screens are not part of the storefront theme at all. A visit to
 * any of them redirects off-domain to Shopify's own hosted account UI, the
 * same generic page every Shopify store gets, carrying Shopify's own purple
 * rather than anything of this shop's. So this follows the design language
 * this theme has already built everywhere else instead: the brand-green
 * buttons, the bordered field the checkout page uses, the card shadow the
 * wishlist grid uses, the centred eyebrow-and-title head the cart and shop
 * archive both use.
 *
 * Loaded only on the account page and its endpoints — see inc/assets.php.
 */

.gp-account {
	--gp-acc-border: #dedede;
	--gp-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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");
	--gp-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a18.7 18.7 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
	--gp-acc-radius: 12px;
}

/* ---------- head ---------- */

/* The cart's own head, restated: centred eyebrow over the title. Kept as its
   own rule rather than shared with .gp-cart__head so the two pages can move
   independently. */
.gp-account__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}

.gp-account__head > * { margin: 0; }

.gp-account__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--brand-gold);
}

.gp-account__title {
	font-size: 28px;
	font-weight: 600;
}

/* WooCommerce's own page title, printed by query-title on every endpoint —
   "Lost password", "Orders", "Addresses" — inherits the same centred head. */
.gp-account .gp-account__title,
.gp-account .entry-title { color: var(--wp--preset--color--ink-heading); }

/* The shortcode content sits directly under the head with no title of its
   own on most endpoints, so the head carries all of it. */

/* ---------- shared field language ---------- */

/*
 * Every WooCommerce account form — login, register, lost password, edit
 * account, edit address — is built from the same handful of classes:
 * woocommerce-form-row wrapping a label and an input.woocommerce-Input.
 * Styled once here, it covers all of them.
 */
.gp-account .woocommerce-form-row {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.gp-account .woocommerce-form-row label {
	display: block;
	margin-block-end: 6px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.65);
}

.gp-account .woocommerce-form-row label .required {
	color: var(--wp--preset--color--sale-red);
	text-decoration: none;
}

.gp-account input.input-text,
.gp-account textarea,
.gp-account select {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 48px;
	padding: 0 16px;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #000;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.gp-account textarea { block-size: auto; padding-block: 12px; }

.gp-account input.input-text:focus,
.gp-account textarea:focus,
.gp-account select:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-green);
	box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.12);
}

/* select2's own trigger stands in for a plain <select> on the address forms;
   the same field frame, drawn on the span WooCommerce builds it from. */
.gp-account .select2-container .select2-selection--single {
	block-size: 48px;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
}

.gp-account .select2-container .select2-selection__rendered {
	line-height: 46px;
	padding-inline-start: 16px;
	color: #000;
}

.gp-account .select2-container .select2-selection__arrow { block-size: 46px; }

.gp-account .select2-container--open .select2-selection--single,
.gp-account .select2-container--focus .select2-selection--single {
	border-color: var(--wp--preset--color--brand-green);
	box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.12);
}

/* Two fields sharing a row — first/last name on register and edit-account,
   the postcode pair on addresses. */
.gp-account .woocommerce-form-row--first { clear: both; }

@media (min-width: 560px) {
	.gp-account .woocommerce-form-row--first,
	.gp-account .woocommerce-form-row--last {
		float: inline-start;
		inline-size: calc(50% - 10px);
	}

	.gp-account .woocommerce-form-row--last { float: inline-end; }
}

.gp-account .clear { clear: both; }

/*
 * The show/hide-password toggle every password field on these forms carries.
 * WooCommerce's own script wires the click, adding and removing a class as it
 * flips the input between type="password" and type="text" — the theme drops
 * WooCommerce's classic CSS along with its jQuery, though, so the button
 * this script builds was printing with no position and no icon: a bare,
 * unstyled pill sitting under the field rather than inside it.
 *
 * Positioned against the row rather than the input: the row is exactly
 * label-above, field-below with nothing else in it, so anchoring to the
 * row's own end still lands the icon inside the field itself.
 */
.gp-account .show-password-input {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	inline-size: 24px;
	block-size: 24px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.45);
	-webkit-mask: var(--gp-eye) center / 18px no-repeat;
	mask: var(--gp-eye) center / 18px no-repeat;
	cursor: pointer;
}

.gp-account .show-password-input:hover { background: var(--wp--preset--color--ink); }

.gp-account .show-password-input.display-password {
	-webkit-mask-image: var(--gp-eye-off);
	mask-image: var(--gp-eye-off);
}

/* Room for the icon so typed text never runs under it. */
.gp-account .woocommerce-form-row:has(.show-password-input) input.input-text {
	padding-inline-end: 44px;
}

/* The checkbox: a brand-green fill once checked, with a tick drawn over it.
   The tick is a mask rather than the background-image the price filter uses
   for its own unfilled box — that box stays white, so the SVG's own black
   fill reads fine there, but this one fills solid green, and black-on-green
   was close to unreadable. A mask lets the same shared icon repaint in
   whatever colour the background needs, here white. */
.gp-account .woocommerce-form__input-checkbox {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.gp-account .woocommerce-form__input-checkbox:checked {
	border-color: var(--wp--preset--color--brand-green);
	background: var(--wp--preset--color--brand-green);
}

.gp-account .woocommerce-form__input-checkbox:checked::before {
	content: "";
	inline-size: 12px;
	block-size: 12px;
	background: var(--wp--preset--color--surface, #fff);
	-webkit-mask: var(--gp-check) center / contain no-repeat;
	mask: var(--gp-check) center / contain no-repeat;
}

.gp-account label.woocommerce-form-login__rememberme,
.gp-account label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

/* The button language every solid button on the shop already uses: black on
   hover, never the lighter tint theme.json's default gives it. */
.gp-account button.button,
.gp-account a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--gp-acc-radius);
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.gp-account button.button:hover,
.gp-account a.button:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.gp-account button.button:focus-visible,
.gp-account a.button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface), 0 0 0 4px var(--wp--preset--color--ink);
}

/* A second, outlined language for the paired actions the dashboard and the
   order actions print next to a solid button — "Cancel", "Pay", a previous/
   next pager — the same outline every secondary button on the shop draws. */
.gp-account a.woocommerce-button--previous,
.gp-account a.woocommerce-Button--previous,
.gp-account .woocommerce-orders-table__cell-order-actions a:not(.pay):not(.view) {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.gp-account a.woocommerce-button--previous:hover,
.gp-account a.woocommerce-Button--previous:hover,
.gp-account .woocommerce-orders-table__cell-order-actions a:not(.pay):not(.view):hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

/* ---------- logged out: login and register ---------- */

/*
 * Live's own #customer_login markup, given the widths this store's cards
 * elsewhere use: two 400px-ish columns side by side once there is room for
 * both, one column stacked once there is not — the same breakpoint the
 * checkout's two-column layout folds at.
 */
.gp-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	max-inline-size: 880px;
	margin-inline: auto;
}

@media (min-width: 700px) {
	.gp-account #customer_login { grid-template-columns: 1fr 1fr; }
}

.gp-account #customer_login .u-column1,
.gp-account #customer_login .u-column2 {
	box-sizing: border-box;
	padding: 32px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}

/* Registration is off: form-login.php prints the login form straight into
   .woocommerce with no #customer_login wrapper around it at all, so this is
   the single-card case rather than a variant of the two-column one. */
.gp-account .woocommerce > form.woocommerce-form-login {
	box-sizing: border-box;
	max-inline-size: 440px;
	margin-inline: auto;
	padding: 32px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}

.gp-account #customer_login h2,
.gp-account .woocommerce-form-login > h2,
.gp-account .woocommerce-ResetPassword h2 {
	margin: 0 0 20px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-heading);
}

.gp-account .woocommerce-LostPassword {
	margin: 4px 0 0;
	font-size: 14px;
}

.gp-account .woocommerce-LostPassword a { color: var(--wp--preset--color--ink); text-decoration: underline; }

.gp-account .woocommerce-LostPassword a:hover { color: var(--wp--preset--color--brand-green); }

.gp-account .woocommerce-form-login__rememberme { margin: 0 0 16px; }

/* Register's submit sits directly under its last field with no lost-password
   line to separate it from — its own top gap instead. */
.gp-account .woocommerce-form-register .woocommerce-form-row.form-row:last-of-type { margin-block-end: 0; }

/* ---------- lost / reset password ---------- */

/* form-lost-password.php and form-reset-password.php (the "choose a new
   password" step after the emailed link) share this one class between them. */
.gp-account .woocommerce-ResetPassword {
	box-sizing: border-box;
	max-inline-size: 440px;
	margin-inline: auto;
	padding: 32px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}

.gp-account .woocommerce-ResetPassword > p:first-child {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.65);
}

/* The reset step's two password fields carry the same first/last pairing
   edit-account's name fields do, but this card is 440px against edit-
   account's 560 — too narrow to float two fields side by side and still
   read as a password. Stacked here specifically, rather than raising the
   breakpoint for every paired row on every form. */
.gp-account .woocommerce-ResetPassword .woocommerce-form-row--first,
.gp-account .woocommerce-ResetPassword .woocommerce-form-row--last {
	float: none;
	inline-size: 100%;
}

/* ---------- logged in: the dashboard shell ---------- */

/* The nav only ever prints once a visitor is logged in — form-login.php is
   the whole of the page otherwise, with no nav in it — so the nav's presence
   is what tells the dashboard layout from the login/register one apart, with
   no PHP needed to say which page this is. The grid goes on .woocommerce
   itself: that element is exactly nav + content and nothing else when logged
   in, where .gp-account__inner also carries the page head and the notices
   block above it. Where :has() is not supported the columns collapse to one
   and the page still works, just without the side rail sitting beside it. */
.gp-account:has(.woocommerce-MyAccount-navigation) .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 780px) {
	.gp-account:has(.woocommerce-MyAccount-navigation) .woocommerce { grid-template-columns: 1fr; }
}

/* Live's own rail language, one more time: a card, a hairline between each
   row rather than a gap, the current row picked out in the brand tint. */
.gp-account .woocommerce-MyAccount-navigation {
	box-sizing: border-box;
	padding: 12px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}

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

.gp-account .woocommerce-MyAccount-navigation li { border-block-start: 1px solid rgba(0, 0, 0, 0.08); }

.gp-account .woocommerce-MyAccount-navigation li:first-child { border-block-start: 0; }

.gp-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

/*
 * Doubled, and with the .is-active/li:hover shape restated, to outrank
 * WooCommerce's own woocommerce-blocktheme.css: it underlines both of these
 * states — `li.is-active a` and `li a:hover`, each (0,3,2) — printed after
 * this stylesheet, so a plain rule of the same weight here always lost to it.
 */
.gp-account.gp-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(6, 78, 59, 0.06);
	color: var(--wp--preset--color--brand-green);
	text-decoration: none;
}

.gp-account.gp-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

@media (max-width: 780px) {
	.gp-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.gp-account .woocommerce-MyAccount-navigation li { border-block-start: 0; }
}

.gp-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
	min-inline-size: 0;
	padding: 28px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}

.gp-account .woocommerce-MyAccount-content > p:first-child { margin-block-start: 0; }

.gp-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--wp--preset--color--brand-green);
	text-decoration: underline;
}

.gp-account .woocommerce-MyAccount-content a:not(.button):hover { text-decoration: none; }

/* ---------- orders table ---------- */

.gp-account table.woocommerce-orders-table {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.gp-account table.woocommerce-orders-table th {
	padding: 10px 14px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
	text-align: start;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.gp-account table.woocommerce-orders-table td {
	padding: 14px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: middle;
}

.gp-account table.woocommerce-orders-table tr:last-child td { border-block-end: 0; }

.gp-account .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	text-align: end;
}

.gp-account .woocommerce-orders-table__cell-order-actions a {
	/* WooCommerce's own woocommerce-blocktheme.css targets this exact link with
	   three classes (.woocommerce-account .cell.cell-order-actions a) and loads
	   after this sheet, so its display:block outranks and overrides ours —
	   !important is the only way to actually win the text centering below. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	/* The shared button rule sets every a.button to fill its container — right
	   for a submit button, wrong here: the cell narrows with the column at a
	   fixed page width, and a 100% button was squeezed down to whatever was
	   left, well under what "View" plus its own padding needs. This one sizes
	   to its own label instead. */
	inline-size: auto;
	block-size: 34px;
	padding: 0 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}

/* The status word, coloured by state — green for anything settled, amber for
   anything still moving, red for anything stopped. WooCommerce prints it as
   plain text with no element of its own to wrap in a pill, and this cell is
   a <td>: giving it a fixed-width background would mean changing its display
   away from table-cell, which breaks the column it sits in. The row already
   carries the status as a class of its own — woocommerce-orders-table__row
   --status-completed and so on — which is what each colour is read from. */
.gp-account .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--brand-green);
	font-weight: 600;
}

.gp-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.gp-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	color: #8a6100;
}

.gp-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.gp-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--sale-red);
}

@media (max-width: 640px) {
	.gp-account table.woocommerce-orders-table thead { display: none; }

	.gp-account table.woocommerce-orders-table,
	.gp-account table.woocommerce-orders-table tbody,
	.gp-account table.woocommerce-orders-table tr,
	.gp-account table.woocommerce-orders-table td { display: block; inline-size: 100%; }

	.gp-account table.woocommerce-orders-table tr {
		margin-block-end: 16px;
		padding: 12px 14px;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 10px;
	}

	.gp-account table.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
		border-block-end: 1px solid rgba(0, 0, 0, 0.06);
	}

	.gp-account table.woocommerce-orders-table td:last-child { border-block-end: 0; }

	.gp-account table.woocommerce-orders-table td::before {
		content: attr(data-title);
		flex: none;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.55);
	}

	.gp-account .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
}

.gp-account .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 20px;
}

.gp-account .woocommerce-pagination a { inline-size: auto; padding: 0 20px; }

/* ---------- addresses ---------- */

.gp-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 560px) {
	.gp-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; }
}

.gp-account .woocommerce-Address {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--gp-acc-border);
	border-radius: 12px;
}

.gp-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 12px;
}

/* WooCommerce prints this heading as an h2 — theme.json's own global styles
   would otherwise set it at the xxl heading size the page title itself uses,
   which read as a second, competing title on every card. */
.gp-account .woocommerce-Address-title h2,
.gp-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.gp-account .woocommerce-Address-title .edit {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-green);
	text-decoration: underline;
}

.gp-account .woocommerce-Address-title .edit:hover { text-decoration: none; }

.gp-account address {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.75);
}

/* ---------- single order view ---------- */

/* The intro line WooCommerce prints above everything else on this endpoint —
   "Order #176 was placed on ... and is currently Processing." — restated as
   a quiet banner instead of the browser's own yellow <mark> highlight, with
   the status word pulled out as the one thing that still needs to read at a
   glance. :first-of-type, not :first-child — wc_print_notices() prints an
   (often empty) notices wrapper div immediately before this same paragraph. */
.gp-account .woocommerce-MyAccount-content > p:first-of-type {
	margin: 0 0 32px;
	padding: 14px 18px;
	border: 1px solid rgba(6, 78, 59, 0.15);
	border-radius: var(--gp-acc-radius);
	background: var(--wp--preset--color--highlight-green);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--surface);
}

.gp-account .woocommerce-MyAccount-content > p:first-of-type a {
	color: var(--wp--preset--color--surface);
}

.gp-account .woocommerce-MyAccount-content > p:first-of-type mark {
	background: none;
	padding: 0;
	color: inherit;
	font-weight: 700;
}

.gp-account .woocommerce-MyAccount-content > p:first-of-type mark.order-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-green);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* "Order updates" — the only heading on this endpoint WooCommerce prints
   bare, with no class of its own to hook. */
.gp-account .woocommerce-MyAccount-content > h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-heading);
}

.gp-account .woocommerce-OrderUpdates {
	margin: 0 0 32px;
	padding: 4px 20px;
	list-style: none;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
}

.gp-account .woocommerce-OrderUpdate { padding: 16px 0; }

.gp-account .woocommerce-OrderUpdate + .woocommerce-OrderUpdate {
	border-block-start: 1px solid rgba(0, 0, 0, 0.06);
}

.gp-account .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.gp-account .woocommerce-OrderUpdate-description p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* The line-item table plus its subtotal/total footer, as one card matching
   the address cards below it. */
.gp-account .woocommerce-order-details { margin: 0 0 32px; }

.gp-account .woocommerce-order-details__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-heading);
}

.gp-account table.shop_table {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
	overflow: hidden;
	font-size: 14px;
}

.gp-account table.shop_table th,
.gp-account table.shop_table td {
	padding: 12px 16px;
	text-align: start;
	border-block-end: 1px solid rgba(0, 0, 0, 0.06);
}

.gp-account table.shop_table thead th {
	background: var(--wp--preset--color--surface-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: rgba(0, 0, 0, 0.55);
}

.gp-account table.shop_table .product-name a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}

.gp-account table.shop_table .product-name a:hover { color: var(--wp--preset--color--brand-green); }

.gp-account table.shop_table .product-quantity {
	color: rgba(0, 0, 0, 0.45);
	font-weight: 400;
}

.gp-account table.shop_table .product-total,
.gp-account table.shop_table tfoot td { text-align: end; }

.gp-account table.shop_table tfoot th { font-weight: 400; text-align: start; }

.gp-account table.shop_table tfoot tr:last-child th,
.gp-account table.shop_table tfoot tr:last-child td {
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--ink-heading);
}

.gp-account table.shop_table tbody tr:last-child td,
.gp-account table.shop_table tfoot tr:last-child th,
.gp-account table.shop_table tfoot tr:last-child td {
	border-block-end: 0;
}

/* WooCommerce repeats the column header as a literal cell — "Actions:" —
   next to the pay/cancel links; the section already reads as actions
   without it. */
.gp-account table.shop_table .order-actions--heading { display: none; }

.gp-account table.shop_table .order-actions-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: auto;
	block-size: 38px;
	padding: 0 18px;
	margin-inline-end: 8px;
	border-radius: 8px;
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.gp-account table.shop_table .order-actions-button:hover { background: var(--wp--preset--color--ink); }

.gp-account table.shop_table .order-actions-button.cancel {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

/* Billing / shipping: a single address prints straight into the card, two
   addresses hand the border down to each column and let the section itself
   become a plain grid — the same has() test the dashboard grid uses
   elsewhere on this page to tell one layout from the other. */
.gp-account .woocommerce-customer-details {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
}

.gp-account .woocommerce-customer-details:has(.woocommerce-columns) {
	padding: 0;
	border: 0;
}

.gp-account .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 560px) {
	.gp-account .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }
}

.gp-account .woocommerce-column {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--gp-acc-border);
	border-radius: var(--gp-acc-radius);
}

/* woocommerce-blocktheme.css targets this same class (.woocommerce-page
   .woocommerce-column__title) with equal specificity and loads after this
   sheet, so its own font-size wins the tie without !important. */
.gp-account .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 16px !important;
	font-weight: 600;
	color: var(--wp--preset--color--ink-heading);
}

.gp-account .woocommerce-customer-details--phone,
.gp-account .woocommerce-customer-details--email {
	margin: 8px 0 0;
}

@media (max-width: 480px) {
	.gp-account table.shop_table thead { display: none; }

	.gp-account table.shop_table,
	.gp-account table.shop_table tbody,
	.gp-account table.shop_table tr,
	.gp-account table.shop_table th,
	.gp-account table.shop_table td,
	.gp-account table.shop_table tfoot { display: block; }

	.gp-account table.shop_table tr { padding: 12px 16px; border-block-end: 1px solid rgba(0, 0, 0, 0.06); }

	.gp-account table.shop_table tbody tr:last-child { border-block-end: 0; }

	.gp-account table.shop_table td { padding: 4px 0; border: 0; }

	.gp-account table.shop_table .product-total { text-align: start; font-weight: 600; }

	.gp-account table.shop_table tfoot tr {
		box-sizing: border-box;
		display: flex;
		inline-size: 100%;
		justify-content: space-between;
		padding: 4px 16px;
	}

	.gp-account table.shop_table tfoot th,
	.gp-account table.shop_table tfoot td { padding: 4px 0; border: 0; }
}

/* ---------- edit-account / edit-address forms ---------- */

.gp-account .woocommerce-EditAccountForm,
.gp-account form.edit-address {
	max-inline-size: 560px;
}

.gp-account fieldset {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

.gp-account fieldset legend {
	margin-block-end: 12px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
}

/* ---------- payment methods ---------- */

.gp-account ul.payment-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gp-account ul.payment-methods li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--gp-acc-border);
	border-radius: 10px;
}

.gp-account .payment-method-actions a { text-decoration: underline; color: var(--wp--preset--color--ink); }

@media (prefers-reduced-motion: reduce) {
	.gp-account input.input-text,
	.gp-account textarea,
	.gp-account select,
	.gp-account button.button,
	.gp-account a.button {
		transition: none;
	}
}