/**
 * PhotoCab "My account" navigation.
 *
 * Follows the sidebar of the prototype "PhotoCab Account"; the panels on the
 * right are deliberately left alone for now.
 *
 * Markup is WooCommerce's, wrapped by Blocksy (see
 * blocksy/static/sass/frontend/8-integrations/woocommerce/account/account-page.scss):
 *
 *   .ct-woo-account
 *     .ct-acount-nav
 *       [.ct-account-welcome > media + .ct-account-user-box]
 *       nav.woocommerce-MyAccount-navigation > ul
 *         li.woocommerce-MyAccount-navigation-link--<endpoint>[.is-active] > a
 *     .woocommerce-MyAccount-content
 *
 * Blocksy paints the list as full-bleed 55px rows split by dividers and draws
 * the item icons with its bundled 'woo' icon font. The design is a card of
 * rounded 48px pills with stroked icons, so the font glyphs are dropped and
 * every endpoint gets its own mask instead - same technique as the share
 * icons in assets/css/product-page.css.
 *
 * `body` prefixes carry these rules past the --account-nav-* declarations the
 * theme prints from the Customizer.
 */

body .ct-acount-nav { 
	align-self: start;
	padding: var(--pc-space-2);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	box-shadow: none;
	overflow: visible;
}

@media (min-width: 1000px) {
	body .ct-acount-nav {
		width: 272px;
		min-width: 272px;
		margin-inline-end: var(--pc-space-8);
		position: sticky;
		top: var(--pc-space-6);
	}
}

/* ---- Welcome box (avatar + name), kept in step with the card ---- */

body .ct-acount-nav .ct-account-welcome {
	gap: var(--pc-space-3);
	padding: var(--pc-space-2) var(--pc-space-2) var(--pc-space-4);
	border-bottom: 1px solid var(--pc-border);
	margin-bottom: var(--pc-space-2);
}

body .ct-acount-nav .ct-account-welcome [class*="ct-media-container"] {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	margin: 0;
	background: var(--pc-surface-2);
}

body .ct-acount-nav .ct-account-user-box {
	margin-inline-start: 0;
	min-width: 0;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body .ct-acount-nav .ct-account-user-box span {
	margin-top: 2px;
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	letter-spacing: 0;
	color: var(--pc-ink-600);
	--theme-link-initial-color: var(--pc-ink-600);
}

/* ------------------------------------------------------------- Items -- */

body .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-1);
	margin: 0;
	padding: 0;
	font-size: var(--pc-fs-btn);
}

body .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	height: 48px;
	padding: 0 14px;
	border-bottom: 0;
	border-radius: var(--pc-radius-ctl);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-700);
	white-space: nowrap;
	transition:
		background var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-navigation ul li:not(:last-child) a {
	border-bottom: 0;
}

body .woocommerce-MyAccount-navigation ul li:hover a {
	background: var(--pc-accent-100);
	color: var(--pc-accent-700);
}

body .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--pc-accent-500);
	color: var(--pc-surface);
	font-weight: var(--pc-fw-medium);
}

/* ---- Count badge ---- */

/*
 * Printed by woocommerce/myaccount/navigation.php. The prototype hides the
 * badge on the active row; here it stays and switches to a translucent white
 * chip so it still reads against the accent fill.
 */
body .woocommerce-MyAccount-navigation ul li a .pc-nav-count {
	flex: 0 0 auto;
	margin-inline-start: auto;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--pc-surface-2);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	line-height: 20px;
	text-align: center;
	transition:
		background var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body .woocommerce-MyAccount-navigation ul li:hover a .pc-nav-count {
	background: var(--pc-surface);
	color: var(--pc-accent-700);
}

body .woocommerce-MyAccount-navigation ul li.is-active a .pc-nav-count {
	background: var(--pc-surface-2);
	color: var(--pc-accent-700);
}

/* ---- Icons ---- */

/*
 * The glyph is replaced by a mask so the icon can be stroked like the rest
 * of the UI. `background-color` carries the colour: muted by default, the
 * row's own colour once the row is hovered or active.
 */
body .woocommerce-MyAccount-navigation ul li a::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-inline-end: 0;
	background-color: var(--pc-ink-400);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;

	/* Fallback shape, overridden per endpoint below. */
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='6'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='6'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li:hover a::before,
body .woocommerce-MyAccount-navigation ul li.is-active a::before {
	background-color: currentColor;
}

body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 2.6h5.4v5.4H2.6z'/><path d='M10 2.6h5.4v5.4H10z'/><path d='M2.6 10h5.4v5.4H2.6z'/><path d='M10 10h5.4v5.4H10z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 2.6h5.4v5.4H2.6z'/><path d='M10 2.6h5.4v5.4H10z'/><path d='M2.6 10h5.4v5.4H2.6z'/><path d='M10 10h5.4v5.4H10z'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.4 5.4h11.2l-.9 9.1a1.2 1.2 0 0 1-1.2 1.1H5.5a1.2 1.2 0 0 1-1.2-1.1z'/><path d='M6.8 7V4.9a2.2 2.2 0 0 1 4.4 0V7'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.4 5.4h11.2l-.9 9.1a1.2 1.2 0 0 1-1.2 1.1H5.5a1.2 1.2 0 0 1-1.2-1.1z'/><path d='M6.8 7V4.9a2.2 2.2 0 0 1 4.4 0V7'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.8 7.6 9 2.8l6.2 4.8'/><path d='M4.4 9v5.2a.9.9 0 0 0 .9.9h7.4a.9.9 0 0 0 .9-.9V9'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.8 7.6 9 2.8l6.2 4.8'/><path d='M4.4 9v5.2a.9.9 0 0 0 .9.9h7.4a.9.9 0 0 0 .9-.9V9'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3.2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/><path d='M3.2 15.4c0-3.1 2.6-4.9 5.8-4.9s5.8 1.8 5.8 4.9'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3.2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/><path d='M3.2 15.4c0-3.1 2.6-4.9 5.8-4.9s5.8 1.8 5.8 4.9'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li[class*="ct-wish-list"] a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 15.2 3.9 10a3.1 3.1 0 0 1 4.4-4.4L9 6.3l.7-.7A3.1 3.1 0 0 1 14.1 10z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 15.2 3.9 10a3.1 3.1 0 0 1 4.4-4.4L9 6.3l.7-.7A3.1 3.1 0 0 1 14.1 10z'/></svg>");
}

/* Waitlist endpoint; the slug is filterable, hence the attribute match. */
body .woocommerce-MyAccount-navigation ul li[class*="waitlist"] a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 2.8h6.1l3.1 3.1v9.3a.9.9 0 0 1-.9.9H4.6a.9.9 0 0 1-.9-.9V3.7a.9.9 0 0 1 .9-.9Z'/><path d='M10.4 2.9v3.2h3.2'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 2.8h6.1l3.1 3.1v9.3a.9.9 0 0 1-.9.9H4.6a.9.9 0 0 1-.9-.9V3.7a.9.9 0 0 1 .9-.9Z'/><path d='M10.4 2.9v3.2h3.2'/></svg>");
}

/* Downloads has no counterpart in the prototype; a document with an arrow
   keeps it in the same family. */
body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3v8'/><path d='M5.8 8.2 9 11.4l3.2-3.2'/><path d='M3.6 14.4h10.8'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3v8'/><path d='M5.8 8.2 9 11.4l3.2-3.2'/><path d='M3.6 14.4h10.8'/></svg>");
}

body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7.2 15.2H4.4a1 1 0 0 1-1-1V3.8a1 1 0 0 1 1-1h2.8'/><path d='M11.6 12.2 14.8 9l-3.2-3.2'/><path d='M14.8 9H7.4'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7.2 15.2H4.4a1 1 0 0 1-1-1V3.8a1 1 0 0 1 1-1h2.8'/><path d='M11.6 12.2 14.8 9l-3.2-3.2'/><path d='M14.8 9H7.4'/></svg>");
}

/* ------------------------------------------------- Tablet and mobile -- */

/*
 * Below 1000px the design lays the menu out as a scrollable row above the
 * panel. Blocksy keeps the two-column flex from 768px up, so the row is
 * restored here as well - the pills would not fit a 20% column.
 */
@media (max-width: 999px) {
	body .ct-woo-account {
		display: block;
	}

	body .ct-acount-nav {
		width: auto;
		min-width: 0;
		margin: 0 0 var(--pc-space-5);
		position: static;
	}

	body .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: var(--pc-space-2);
		overflow-x: auto;
		scrollbar-width: none;
	}

	body .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	body .woocommerce-MyAccount-navigation ul li {
		flex: 0 0 auto;
	}
}

/* =============================================================== Orders == */

/*
 * /my-account/orders/ after the "Замовлення" panel of the prototype.
 *
 * WooCommerce prints a table (templates/myaccount/orders.php):
 *
 *   table.woocommerce-orders-table
 *     thead > tr > th.woocommerce-orders-table__header-<column>
 *     tbody > tr.woocommerce-orders-table__row--status-<status>
 *       th.woocommerce-orders-table__cell-order-number   (a <th>, not a <td>)
 *       td...cell-order-date / -status / -total / -actions
 *
 * The design is a card of rows rather than a table: no column headers, the
 * date sits under the order number, the status is a pill and the actions are
 * right-aligned buttons. That is a layout the same markup can carry once the
 * table parts are re-boxed as grid.
 */

body .woocommerce-MyAccount-content .woocommerce-orders-table {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	border-collapse: separate;
}

/* The design labels the columns nowhere; the row itself carries the meaning. */
body .woocommerce-MyAccount-content .woocommerce-orders-table thead {
	display: none;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table tbody {
	display: block;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) 150px 150px auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var(--pc-space-4);
	row-gap: var(--pc-space-1);
	padding: 18px 0;
	border-top: 1px solid var(--pc-border);
	background: none;
}

/* Woo has no card heading here, so the first row needs no rule above it. */
body .woocommerce-MyAccount-content .woocommerce-orders-table__row:first-child {
	border-top: 0;
	padding-top: 0;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__row:last-child {
	padding-bottom: 0;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell {
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/*
 * The responsive table prints the column name before every cell and hides
 * the order-number <th> outright below 690px. Both rules live behind
 * `table.shop_table_responsive tbody td[data-title]`, so the selectors here
 * carry the extra class to outweigh them.
 */
body .woocommerce-MyAccount-content table.woocommerce-orders-table tbody :is(th, td)[data-title]::before {
	display: none;
	content: none;
}

body .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell {
	display: block;
}

/* ---- Order number and date ---- */

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
	text-align: left;
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	color: inherit;
	transition: color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--pc-accent-500);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-date {
	grid-column: 1;
	grid-row: 2;
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

/* ---- Status pill ---- */

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
	grid-column: 2;
	grid-row: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	width: max-content;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--pc-surface-2);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
}

body .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	background: var(--pc-accent-100);
	color: var(--pc-accent-700);
}

body .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	background: var(--pc-cat-camera);
	color: var(--pc-cat-camera-fg);
}

body .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	background: var(--pc-surface-2);
	color: var(--pc-ink-700);
	box-shadow: inset 0 0 0 1px var(--pc-border);
}

body .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
	background: var(--pc-ok-100);
	color: var(--pc-ok-600);
}

body :is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed) .woocommerce-orders-table__cell-order-status {
	background: var(--pc-surface-2);
	color: var(--pc-ink-400);
}

body .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	background: var(--pc-cat-gift);
	color: var(--pc-cat-gift-fg);
}

/* ---- Total ---- */

/*
 * Woo prints "<amount> for N items" in one cell, with only the amount
 * wrapped. The design shows the sum alone, so the amount takes the headline
 * treatment on its own line and the trailing count reads as meta.
 */
body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total {
	grid-column: 3;
	grid-row: 1 / -1;
	justify-self: end;
	text-align: right;
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total .amount {
	display: block;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	white-space: nowrap;
}

/* ---- Actions ---- */

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
	grid-column: 4;
	grid-row: 1 / -1;
	justify-self: end;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--pc-space-2);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	color: var(--pc-ink-900);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition:
		background var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease,
		border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:hover {
	border-color: var(--pc-ink-900);
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button.pay {
	border-color: var(--pc-ink-900);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button.pay:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button.cancel {
	border-color: transparent;
	background: transparent;
	color: var(--pc-ink-600);
}

body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button.cancel:hover {
	border-color: transparent;
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
}

/* ---- Pagination ---- */

body .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-5);
}

body .woocommerce-MyAccount-content .woocommerce-pagination .button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	--theme-button-min-height: 40px;
	transition: border-color var(--pc-dur-fast) ease, background var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-pagination .button:hover {
	border-color: var(--pc-ink-900);
	background: var(--pc-surface-2);
}

/* ---- Empty state ---- */

/*
 * Two different notices land here as `.woocommerce-info`:
 *
 *   1. the e-mail verification prompt WooCommerce prints above the table
 *      (src/Internal/CustomerEmailVerification/VerificationController.php) -
 *      `<a class="button wc-forward">…</a> text`;
 *   2. the "no order has been made yet" empty state from orders.php -
 *      `text <a class="woocommerce-Button wc-forward button">…</a>`.
 *
 * The design draws them differently: the first is the accent notice bar with
 * a bell, the second the dashed empty card. Only the empty state carries
 * `woocommerce-Button`, which is what tells them apart below.
 *
 * Blocksy styles every Woo notice as a 60px bar with a 'woo' glyph absolutely
 * placed in a 55px inline-start gutter, so that gutter and glyph are undone
 * in both cases.
 */

body .woocommerce-MyAccount-content .woocommerce-info {
	display: flex;
	align-items: center;
	/*flex-wrap: wrap;*/
	gap: 14px;
	min-height: 0;
	margin-bottom: var(--pc-space-5);
	padding: var(--pc-space-4) var(--pc-space-5);
	padding-inline-start: var(--pc-space-5);
	background: var(--pc-accent-100);
	border: 1px solid rgba(186, 117, 23, 0.22);
	border-radius: var(--pc-radius-card);
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-accent-700);
}

/* Blocksy's glyph, re-drawn as the prototype's bell and pulled back into
   the flow ahead of the text. */
body .woocommerce-MyAccount-content .woocommerce-info::before {
	order: -1;
	position: static;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	top: auto;
	inset-inline-start: auto;
	content: "";
	background-color: var(--pc-accent-500);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2.4a4.4 4.4 0 0 1 4.4 4.4c0 3.4 1.2 4.6 1.2 4.6H3.4s1.2-1.2 1.2-4.6A4.4 4.4 0 0 1 9 2.4Z'/><path d='M7.6 14a1.5 1.5 0 0 0 2.8 0'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2.4a4.4 4.4 0 0 1 4.4 4.4c0 3.4 1.2 4.6 1.2 4.6H3.4s1.2-1.2 1.2-4.6A4.4 4.4 0 0 1 9 2.4Z'/><path d='M7.6 14a1.5 1.5 0 0 0 2.8 0'/></svg>");
}

body .woocommerce-MyAccount-content .woocommerce-info::after {
	display: none;
	content: none;
}

/* The button trails the text, as it does in Blocksy's own notice layout. */
body .woocommerce-MyAccount-content .woocommerce-info .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	height: 40px;
	min-height: 0;
	padding: 0 var(--pc-space-4);
	border: 1px solid var(--pc-ink-900);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition: background var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-info .button:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

/* ---- Empty state ---- */

body .woocommerce-MyAccount-content .woocommerce-info:has(> a.woocommerce-Button) {
	/*flex-direction: column;*/
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
	padding: var(--pc-space-6);
	padding-inline-start: var(--pc-space-6);
	background: transparent;
	border: 1px dashed var(--pc-border);
	font-size: var(--pc-fs-body);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
}

body .woocommerce-MyAccount-content .woocommerce-info:has(> a.woocommerce-Button)::before {
	display: none;
	content: none;
}

/* Blocksy pushes buttons inside notices to the far end with !important; in
   the empty card the button belongs under the text instead. */
body .woocommerce-MyAccount-content .woocommerce-info:has(> a.woocommerce-Button) .button {
	/* the wish list notice prints the button before the text; the design
	   puts it under the sentence either way */
	order: 2;
	margin: 0 !important;
}

/* ---- Tablet and mobile: one column per row ---- */

@media (max-width: 999px) {
	body .woocommerce-MyAccount-content .woocommerce-orders-table {
		padding: var(--pc-space-5);
	}

	body .woocommerce-MyAccount-content .woocommerce-orders-table__row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: var(--pc-space-3);
	}

	body .woocommerce-MyAccount-content .woocommerce-orders-table__cell {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		text-align: left;
	}

	/* The date belongs to the order number, not to the stack spacing. */
	body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-date {
		margin-top: -8px;
	}

	body .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 689px) {
	body .woocommerce-MyAccount-content .woocommerce-orders-table {
		padding: var(--pc-space-4);
	}
}

/* =========================================================== Order view == */

/*
 * /my-account/view-order/<id>/ after the "Замовлення №…" panel of the
 * prototype ("PhotoCab Account", isOrderView).
 *
 * The page is a stack of cards: a header card with the order number, the
 * status pill, the summary line, the action buttons and the four-stage
 * progress bar; a "Подробиці замовлення" card holding the item rows and the
 * totals; and the address card(s), with the customer notes card in between
 * when the order has any.
 *
 * Two of those are WooCommerce's own output, re-boxed here the same way the
 * orders list is above:
 *
 *   section.woocommerce-order-details
 *     h2.woocommerce-order-details__title
 *     table.shop_table.order_details
 *       thead > tr > th.product-name / th.product-total
 *       tbody > tr.order_item > td.product-name + td.product-total
 *       tfoot > tr > th + td            (Разом / Доставка / Всього / Оплата)
 *   section.woocommerce-customer-details
 *     [section.col2-set > div.woocommerce-column]  (only when the order
 *                                                   carries a shipping address)
 *     h2.woocommerce-column__title + address
 *
 * The header card, the back link and the item thumbnails have no counterpart
 * in WooCommerce's output at all - the stock template opens with a single
 * sentence - and come from the two overrides in woocommerce/: myaccount/
 * view-order.php and order/order-details-item.php. The `pc-*` classes below
 * are theirs; everything else is Woo's own.
 *
 * The emphasised "Всього" row leans on the marker span added by
 * photocab_mark_order_total(); see inc/woocommerce.php.
 */

/* ---- The stack ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-5);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---- Back to the orders list ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-back {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	gap: var(--pc-space-2);
	align-self: flex-start;
	width: max-content;
	font-size: var(--pc-fs-btn);
	color: var(--pc-ink-600);
	transition: color var(--pc-dur-fast) ease;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-back:hover {
	color: var(--pc-accent-500);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-back__icon {
	flex: 0 0 auto;
}

/* ---- Header card ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-space-6);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__main {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__title-row {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	flex-wrap: wrap;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__title {
	margin: 0;
	font-size: var(--pc-fs-h2);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__meta {
	margin: 0;
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

/* ---- Status pill; tones follow the orders list ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--pc-surface-2);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge--processing {
	background: var(--pc-accent-100);
	color: var(--pc-accent-700);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge--on-hold {
	background: var(--pc-cat-camera);
	color: var(--pc-cat-camera-fg);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge--pending {
	background: var(--pc-surface-2);
	color: var(--pc-ink-700);
	box-shadow: inset 0 0 0 1px var(--pc-border);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge--completed {
	background: var(--pc-ok-100);
	color: var(--pc-ok-600);
}

body.woocommerce-view-order .woocommerce-MyAccount-content :is(.pc-order-head__badge--cancelled, .pc-order-head__badge--failed) {
	background: var(--pc-surface-2);
	color: var(--pc-ink-400);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__badge--refunded {
	background: var(--pc-cat-gift);
	color: var(--pc-cat-gift-fg);
}

/* ---- Header buttons ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 40px;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	transition: background var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-btn--dark {
	background: var(--pc-ink-900);
	border: 1px solid var(--pc-ink-900);
	color: var(--pc-surface);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-btn--dark:hover {
	background: var(--pc-ink-700);
	border-color: var(--pc-ink-700);
	color: var(--pc-surface);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-btn--ghost {
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink-900);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-btn--ghost:hover {
	background: var(--pc-surface-2);
	border-color: var(--pc-ink-900);
	color: var(--pc-ink-900);
}

/* ---- Progress bar ---- */

/*
 * Four stages side by side, each a filled or empty rule with its name and
 * state under it; see photocab_order_view_steps() for which status sits
 * where. The rule above the row is the card divider, so the bar only starts
 * once there is something above it to divide from.
 */
body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-space-4);
	margin: 0;
	padding: var(--pc-space-4) 0 0;
	list-style: none;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-step {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
	margin: 0;
	list-style: none;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-step__bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--pc-border);
}

body.woocommerce-view-order .woocommerce-MyAccount-content :is(.pc-order-step--done, .pc-order-step--current) .pc-order-step__bar {
	background: var(--pc-accent-500);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-step__name {
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-400);
}

body.woocommerce-view-order .woocommerce-MyAccount-content :is(.pc-order-step--done, .pc-order-step--current) .pc-order-step__name {
	color: var(--pc-ink-900);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-step--current .pc-order-step__name {
	font-weight: var(--pc-fw-medium);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-step__note {
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

/* ---- Cancelled note ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-note {
	margin: 0;
	padding: 14px 18px;
	background: var(--pc-surface-2);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
	text-wrap: pretty;
}

/* ---- Order updates (customer notes) ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdates {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdate {
	margin: 0;
	padding: var(--pc-space-4) 0 0;
	list-style: none;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdate-meta {
	margin: 0 0 var(--pc-space-1);
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdate-description p {
	margin: 0;
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-700);
}

/* ---- The card shell, shared by the header, notes, details and addresses ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head,
body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdates-wrapper,
body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details:not(:has(.col2-set)),
body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set > .woocommerce-column {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-4);
	margin: 0;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body.woocommerce-view-order .woocommerce-MyAccount-content :is(.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-OrderUpdates-wrapper > h2) {
	margin: 0;
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

/* ---- The order table, re-boxed as grid rows ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details :is(thead, tbody, tfoot) {
	display: block;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--pc-space-4);
	background: none;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	font-weight: var(--pc-fw-regular);
	text-align: left;
}

/* ---- Column headers ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details thead tr {
	align-items: baseline;
	padding-bottom: var(--pc-space-3);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details thead th {
	font-size: var(--pc-fs-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-400);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details thead th.product-total {
	text-align: right;
}

/* ---- Item rows: name over quantity, total on the right ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody tr {
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid var(--pc-border);
}

/*
 * Thumbnail beside the text, as in the prototype. Both come from
 * woocommerce/order/order-details-item.php; a line item that is no longer a
 * product has no thumbnail, hence the :has() switch back to one column.
 */
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-name {
	/*display: grid;*/
	/*grid-template-columns: minmax(0, 1fr);*/
	align-items: center;
	column-gap: 18px;
	min-width: 0;
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-900);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-name:has(.pc-order-item__thumb) {
	grid-template-columns: 88px minmax(0, 1fr);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .pc-order-item__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: 6px;
	box-sizing: border-box;
	background: var(--pc-surface-2);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	overflow: hidden;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .pc-order-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .pc-order-item__text {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-name a {
	color: inherit;
	transition: color var(--pc-dur-fast) ease;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-name a:hover {
	color: var(--pc-accent-500);
}

/* Woo prints the quantity as "× 2"; the prototype labels the line instead. */
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .product-quantity {
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-400);
}

/* Variation data and item meta, when the line item carries any. */
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .wc-item-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .wc-item-meta p {
	margin: 0;
	display: inline;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-total {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	text-align: right;
	white-space: nowrap;
}

/* ---- Totals ---- */

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot tr {
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid var(--pc-border);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot th {
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-600);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot td {
	font-size: var(--pc-fs-price);
	color: var(--pc-ink-900);
	text-align: right;
}
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot .button {
	margin-left: var(--pc-space-2);
}
/* The order total is the one line the design sets in the card heading size. */
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot tr:has(.pc-order-total) td {
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
}

/* ---- The "Дії:" row ---- */

/*
 * order-details.php ends the totals table with the order's own buttons
 * ("Оплатити", "Скасувати"), which Blocksy paints as two identical solid
 * buttons - two primary actions side by side, neither leading. Payment keeps
 * the fill; everything else drops to the outline used across the design.
 *
 * The buttons are Blocksy's `.button`, driven by --theme-button-* custom
 * properties, so those are set as well as the plain ones - the hover state is
 * painted from the variables alone.
 */
body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot tr:has(.order-actions--heading) {
	align-items: center;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot .order-actions--heading {
	white-space: nowrap;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tfoot tr:has(.order-actions--heading) td {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .order-actions-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 0;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	text-decoration: none;
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition:
		background-color var(--pc-dur-fast) ease,
		border-color var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease;
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .order-actions-button.pay {
	--theme-button-background-initial-color: var(--pc-ink-900);
	--theme-button-background-hover-color: var(--pc-ink-700);
	--theme-button-text-initial-color: var(--pc-surface);
	--theme-button-text-hover-color: var(--pc-surface);
	--theme-button-border: 1px solid var(--pc-ink-900);
	background-color: var(--pc-ink-900);
	border: 1px solid var(--pc-ink-900);
	color: var(--pc-surface);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .order-actions-button.pay:hover {
	--theme-button-border: 1px solid var(--pc-ink-700);
	background-color: var(--pc-ink-700);
	border-color: var(--pc-ink-700);
	color: var(--pc-surface);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .order-actions-button:not(.pay) {
	--theme-button-background-initial-color: var(--pc-surface);
	--theme-button-background-hover-color: var(--pc-surface-2);
	--theme-button-text-initial-color: var(--pc-ink-900);
	--theme-button-text-hover-color: var(--pc-ink-900);
	--theme-button-border: 1px solid var(--pc-border);
	background-color: var(--pc-surface);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink-900);
}

body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .order-actions-button:not(.pay):hover {
	--theme-button-border: 1px solid var(--pc-ink-900);
	background-color: var(--pc-surface-2);
	border-color: var(--pc-ink-900);
	color: var(--pc-ink-900);
}

/* ---- Address card(s) ---- */

/*
 * With a shipping address WooCommerce nests both addresses in a .col2-set;
 * without one it prints the billing block straight into the section. The
 * section is the card in the second case and a bare grid in the first.
 */
body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details:has(.col2-set) {
	display: contents;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-4);
	align-items: start;
	margin: 0;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set::before,
body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set::after {
	display: none;
	content: none;
}

body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set > .woocommerce-column {
	float: none;
	width: auto;
}

body.woocommerce-view-order .woocommerce-MyAccount-content address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
}

body.woocommerce-view-order .woocommerce-MyAccount-content address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

body.woocommerce-view-order .woocommerce-MyAccount-content address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before {
	display: none;
	content: none;
}

/* Downloads, when the order carries any; Woo prints them after the table. */
body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-downloads {
	margin: 0;
}

/* ---- Tablet and mobile ---- */

@media (max-width: 999px) {
	body.woocommerce-view-order .woocommerce-MyAccount-content {
		gap: var(--pc-space-5);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdates-wrapper,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details:not(:has(.col2-set)),
	body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set > .woocommerce-column {
		padding: var(--pc-space-5);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--pc-space-4);
	}
}

@media (max-width: 689px) {
	body.woocommerce-view-order .woocommerce-MyAccount-content {
		gap: var(--pc-space-4);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-head,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-OrderUpdates-wrapper,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
	body.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details:not(:has(.col2-set)),
	body.woocommerce-view-order .woocommerce-MyAccount-content .col2-set > .woocommerce-column {
		padding: var(--pc-space-4);
	}

	/*
	 * The total stays on the product's row all the way down - it is the one
	 * number in the card and reads worse under the name than beside it - so
	 * only the gap between the two columns gives way.
	 */
	body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody tr {
		column-gap: var(--pc-space-3);
	}

	/* The thumbnail gives up width so the name keeps enough of it. */
	body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details tbody td.product-name:has(.pc-order-item__thumb) {
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: var(--pc-space-3);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content table.order_details .pc-order-item__thumb {
		width: 56px;
		height: 56px;
		padding: 4px;
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content .pc-order-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-space-3);
	}
}

/* ======================================================== Edit account == */

/*
 * /my-account/edit-account/ after the "Особисті дані" panel.
 *
 * WooCommerce prints one flat form (templates/myaccount/form-edit-account.php):
 * four <p class="form-row"> rows, a <fieldset> with the three password rows,
 * and a <p> holding the submit button. inc/woocommerce.php wraps the first
 * group in `.pc-account-card` so the two cards of the design exist; the
 * fieldset is the second one, and the submit paragraph is the save row.
 *
 * Each card is the grid: paired rows sit in two columns, wide rows span both.
 */

/* ---- The card shell, shared by every panel that gets one ---- */

body .woocommerce-MyAccount-content .pc-account-card {
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body .woocommerce-MyAccount-content .pc-account-card__title {
	margin: 0 0 var(--pc-space-4);
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-title);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content form.edit-account {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-5);
}

/* The fieldset itself draws nothing; see the note in inc/woocommerce.php. */
body .woocommerce-MyAccount-content form.edit-account fieldset {
	display: contents;
}

body .woocommerce-MyAccount-content form.edit-account .pc-account-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-4);
	margin: 0;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body .woocommerce-MyAccount-content form.edit-account .pc-account-card__title,
body .woocommerce-MyAccount-content form.edit-account fieldset legend {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	/* the card's own gap handles the spacing here */
	padding: 0;
	padding-inline: 0;
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-title);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

/* Woo's float clearing divs have nothing to clear in a grid. */
body .woocommerce-MyAccount-content form.edit-account .clear {
	display: none;
}

/* ---- Rows ---- */

body .woocommerce-MyAccount-content form.edit-account .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

body .woocommerce-MyAccount-content form.edit-account .form-row-first {
	grid-column: 1;
}

body .woocommerce-MyAccount-content form.edit-account .form-row-last {
	grid-column: 2;
}

/* The password rows are all `form-row-wide`, but the design pairs the first
   two and keeps the confirmation on its own line. */
body .woocommerce-MyAccount-content form.edit-account fieldset .form-row:has(#password_current) {
	grid-column: 1;
}

body .woocommerce-MyAccount-content form.edit-account fieldset .form-row:has(#password_1) {
	grid-column: 2;
}

/* ---- Labels, inputs, hints ---- */

body .woocommerce-MyAccount-content form.edit-account .form-row label {
	margin: 0;
	padding: 0;
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-700);
}

body .woocommerce-MyAccount-content form.edit-account .form-row label .required {
	color: var(--pc-accent-500);
	text-decoration: none;
	border: 0;
}

body .woocommerce-MyAccount-content form.edit-account .form-row .input-text {
	width: 100%;
	height: 48px;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	/*background: var(--pc-page);*/
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-family: var(--pc-font);
	/* 15px, not var(--pc-fs-price): the token reads 16px in tokens.css while
	   every prototype draws form fields at 15px - same pin as the checkout
	   fields, see the note in assets/css/checkout.css. */
	font-size: 15px;
	color: var(--pc-ink-900);
	transition: border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content form.edit-account .form-row .input-text:focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

body .woocommerce-MyAccount-content form.edit-account #account_display_name_description {
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content form.edit-account #account_display_name_description em {
	font-style: normal;
	font-size: inherit;
	opacity: 1;
}

/* ---- Save row ---- */

body .woocommerce-MyAccount-content form.edit-account > p:has(button[name="save_account_details"]) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

body .woocommerce-MyAccount-content form.edit-account button[name="save_account_details"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-height: 0;
	padding: 0 18px;
	border: 1px solid var(--pc-ink-900);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	--theme-button-min-height: 48px;
	transition: background var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content form.edit-account button[name="save_account_details"]:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

/* ---- Mobile: one field per row ---- */

@media (max-width: 689px) {
	body .woocommerce-MyAccount-content form.edit-account {
		gap: var(--pc-space-4);
	}

	body .woocommerce-MyAccount-content form.edit-account .pc-account-card {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--pc-space-4);
	}

	body .woocommerce-MyAccount-content form.edit-account .form-row,
	body .woocommerce-MyAccount-content form.edit-account .form-row-first,
	body .woocommerce-MyAccount-content form.edit-account .form-row-last,
	body .woocommerce-MyAccount-content form.edit-account fieldset .form-row:has(#password_current),
	body .woocommerce-MyAccount-content form.edit-account fieldset .form-row:has(#password_1) {
		grid-column: 1;
	}
}

/* ============================================================ Wish list == */

/*
 * /my-account/<wish-list slug>/ after the "Список бажань" panel.
 *
 * Blocksy Companion Pro prints a table (features/wish-list/table.php):
 *
 *   .ct-woocommerce-wishlist-table > table.shop_table
 *     thead > tr > th (Product / Actions)
 *     tbody > tr[data-add-to-cart]
 *       td.wishlist-product-thumbnail > a.product-thumb
 *       td.wishlist-product-name      > a.product-name + [dl] + p.price
 *       td.wishlist-product-actions   > add-to-cart form or button
 *       td.wishlist-product-remove    > a.remove
 *
 * The card around it comes from inc/woocommerce.php; here the table is
 * re-boxed as the design's product rows, same treatment as the orders table.
 */

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table,
body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table table.shop_table {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-collapse: separate;
}

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table thead {
	display: none;
}

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table tbody {
	display: block;
}

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table tbody tr {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--pc-border);
	background: none;
}

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table tbody tr:last-child {
	padding-bottom: 0;
}

body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table td {
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/*
 * views/columns/product-name.php renders a second add-to-cart button and a
 * second remove link inside the name cell, wrapped in
 * `.product-mobile-actions.ct-hidden-lg`. It is the plugin's answer to a
 * table that collapses below Blocksy's `lg` breakpoint: the real
 * `wishlist-product-actions` and `wishlist-product-remove` cells are meant to
 * be out of reach there.
 *
 * These rows are grid at every width and keep those cells - the media query
 * at the end of this section moves them under the name instead - so the copy
 * is not a fallback, it is a duplicate: below 1000px every product showed two
 * "Додати в кошик" buttons and two bins.
 *
 * Hidden at every width, not just the small ones: above `lg` the plugin's own
 * `ct-hidden-lg` already hides it, so there is nothing to keep in step.
 */
body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table .product-mobile-actions {
	display: none;
}

/* The responsive table prints the column name before every cell. */
body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table td::before {
	display: none;
	content: none;
}

/* ---- Thumbnail ---- */

body .woocommerce-MyAccount-content .wishlist-product-thumbnail .product-thumb {
	display: block;
	width: 88px;
	height: 88px;
	--ratio: 1/1;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface-2);
	overflow: hidden;
}

body .woocommerce-MyAccount-content .wishlist-product-thumbnail .product-thumb img {
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box;
	object-fit: contain;
}

/* ---- Name and price ---- */

body .woocommerce-MyAccount-content .wishlist-product-name {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
}

body .woocommerce-MyAccount-content .wishlist-product-name .product-name {
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-900);
	transition: color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .wishlist-product-name .product-name:hover {
	color: var(--pc-accent-500);
}

body .woocommerce-MyAccount-content .wishlist-product-name .price,
body .woocommerce-MyAccount-content .wishlist-product-name .price .sale-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
}

/* Woo prints the old price first; the design leads with the current one. */
body .woocommerce-MyAccount-content .wishlist-product-name .price ins {
	order: 1;
	background: none;
	text-decoration: none;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	white-space: nowrap;
}

body .woocommerce-MyAccount-content .wishlist-product-name .price del {
	order: 2;
	opacity: 1;
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-400);
	text-decoration: line-through;
	white-space: nowrap;
}

/* Variation attributes the plugin lists under the name. */
body .woocommerce-MyAccount-content .wishlist-product-name dl {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin: 0;
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content .wishlist-product-name dl :is(dt, dd) {
	margin: 0;
	font-weight: var(--pc-fw-regular);
}

/* ---- Actions ---- */

body .woocommerce-MyAccount-content .wishlist-product-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	/* Out-of-stock products get a plain sentence here instead of a button. */
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content .wishlist-product-actions form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/*
 * Blocksy's "type-2" stepper builds its own geometry from --quantity-* and
 * lays the two buttons over the input absolutely; the skin comes from
 * assets/css/product-page.css. Only the size is set here, exactly as the
 * cart does it - restating borders or button widths breaks that layout.
 */
body .woocommerce-MyAccount-content .wishlist-product-actions .quantity {
	--quantity-height: 40px;
	--quantity-width: 112px;
	margin: 0;
	font-size: var(--pc-fs-btn);
}

body .woocommerce-MyAccount-content .wishlist-product-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border: 1px solid var(--pc-ink-900);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition: background var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .wishlist-product-actions .button:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

/* ---- Remove ---- */

/* The table sizes this cell from its header, which is a non-breaking space;
   the icon button needs the full 40px column. */
body .woocommerce-MyAccount-content .wishlist-product-remove {
	display: flex;
	justify-content: flex-end;
	min-width: 40px;
}

body .woocommerce-MyAccount-content .wishlist-product-remove .remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: transparent;
	color: var(--pc-ink-600);
	--theme-icon-size: 16px;
	transition: border-color var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .wishlist-product-remove .remove:hover {
	border-color: var(--pc-accent-400);
	background: transparent;
	color: var(--pc-accent-500);
}

/*
 * The plugin hard-codes a solid bin through blocksy_action_button(), which
 * takes no filter. Hiding that glyph and masking in the same outline bin the
 * cart and mini cart use (photocab_cart_remove_icon() in inc/woocommerce.php)
 * keeps every remove control on the site identical. The loader svg Blocksy
 * appends for the AJAX state is left alone.
 */
body .woocommerce-MyAccount-content .wishlist-product-remove .remove .ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

body .woocommerce-MyAccount-content .wishlist-product-remove .remove .ct-icon-container > svg:not(.ct-button-loader) {
	display: none;
}

body .woocommerce-MyAccount-content .wishlist-product-remove .remove .ct-icon-container::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 4.8h11.6'/><path d='M7.2 4.8V3.4h3.6v1.4'/><path d='M4.6 4.8l.7 9.4a1.4 1.4 0 0 0 1.4 1.3h4.6a1.4 1.4 0 0 0 1.4-1.3l.7-9.4'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 4.8h11.6'/><path d='M7.2 4.8V3.4h3.6v1.4'/><path d='M4.6 4.8l.7 9.4a1.4 1.4 0 0 0 1.4 1.3h4.6a1.4 1.4 0 0 0 1.4-1.3l.7-9.4'/></svg>");
}

/* ---- Tablet and mobile ---- */

@media (max-width: 999px) {
	body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table tbody tr {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 16px;
	}

	body .woocommerce-MyAccount-content .wishlist-product-thumbnail .product-thumb {
		width: 72px;
		height: 72px;
	}

	/* Actions drop under the name, keeping the thumbnail column clear. */
	body .woocommerce-MyAccount-content .wishlist-product-actions {
		grid-column: 2 / -1;
	}

	body .woocommerce-MyAccount-content .wishlist-product-remove {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}
}

@media (max-width: 689px) {
	body .woocommerce-MyAccount-content .ct-woocommerce-wishlist-table tbody tr {
		gap: 12px;
	}
}

/* ============================================================= Waitlist == */

/*
 * /my-account/<waitlist slug>/ after the "Список очікування" panel.
 *
 * Blocksy Companion Pro prints a table
 * (features/product-waitlist/includes/views/table.php):
 *
 *   .ct-woocommerce-waitlist-table > table.shop_table
 *     tbody > tr.ct-woocommerce-waitlist-table-row
 *       td.waitlist-product-thumbnail    > a.product-thumb
 *       td.waitlist-product-name         > a.product-name + [dl] + p.price
 *                                          + .waitlist-product-mobile-actions
 *       td.waitlist-product-status       > "Out of Stock"
 *       td.waitlist-subscription-status  > "Yes" / "No"
 *       td.waitlist-product-actions      > button.unsubscribe
 *
 * The plugin hides the three right-hand cells below 1000px and shows the
 * mobile block inside the name cell instead; both arrangements are dressed
 * to the design below. The card wrapper comes from inc/woocommerce.php.
 */

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table,
body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table table.shop_table {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-collapse: separate;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table thead {
	display: none;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table tbody {
	display: block;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 18px;
	row-gap: 6px;
	padding: 18px 0;
	border-top: 1px solid var(--pc-border);
	background: none;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table-row:last-child {
	padding-bottom: 0;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td {
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/* The responsive table prints the column name before every cell. The rules
   further down re-enable ::before for the one cell that needs a label, so
   they carry the same `td` in the selector to outweigh this reset. */
body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td::before {
	display: none;
	content: none;
}

/* ---- Thumbnail, name, price ---- */

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-product-thumbnail {
	grid-column: 1;
	grid-row: 1 / -1;
}

body .woocommerce-MyAccount-content .waitlist-product-thumbnail .product-thumb {
	display: block;
	width: 88px;
	height: 88px;
	--ratio: 1/1;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface-2);
	overflow: hidden;
}

body .woocommerce-MyAccount-content .waitlist-product-thumbnail .product-thumb img {
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box;
	object-fit: contain;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-product-name {
	grid-column: 2;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	min-width: 0;
}

body .woocommerce-MyAccount-content .waitlist-product-name .product-name {
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-900);
	transition: color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .waitlist-product-name .product-name:hover {
	color: var(--pc-accent-500);
}

body .woocommerce-MyAccount-content .waitlist-product-name .price,
body .woocommerce-MyAccount-content .waitlist-product-name .price .sale-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .waitlist-product-name .price ins {
	order: 1;
	background: none;
	text-decoration: none;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	white-space: nowrap;
}

body .woocommerce-MyAccount-content .waitlist-product-name .price del {
	order: 2;
	opacity: 1;
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-400);
	text-decoration: line-through;
	white-space: nowrap;
}

body .woocommerce-MyAccount-content .waitlist-product-name dl {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin: 0;
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content .waitlist-product-name dl :is(dt, dd) {
	margin: 0;
	font-weight: var(--pc-fw-regular);
}

/* ---- Stock badge and subscription state ---- */

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-product-status {
	grid-column: 3;
	grid-row: 1;
	justify-self: start;
	align-self: end;
	display: inline-flex;
	align-items: center;
	width: max-content;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--pc-cat-gift);
	color: var(--pc-cat-gift-fg);
	font-size: var(--pc-fs-old);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
}

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-subscription-status {
	grid-column: 3;
	grid-row: 2;
	justify-self: start;
	align-self: start;
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
	white-space: nowrap;
}

/* The column headers are gone, so the cell carries its own label; the string
   is handed over as a custom property from inc/woocommerce.php. */
body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-subscription-status::before {
	display: inline;
	content: var(--pc-waitlist-confirmed-label, "");
}

/* ---- Unsubscribe ---- */

body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td.waitlist-product-actions {
	grid-column: 4;
	grid-row: 1 / -1;
	justify-self: end;
}

body .woocommerce-MyAccount-content :is(.waitlist-product-actions, .waitlist-product-mobile-actions) .button.unsubscribe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--pc-radius-ctl);
	background: transparent;
	color: var(--pc-ink-600);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	--theme-button-min-height: 40px;
	transition: background var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content :is(.waitlist-product-actions, .waitlist-product-mobile-actions) .button.unsubscribe:hover {
	border-color: transparent;
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
}

/* ---- Below 1000px: the plugin's own mobile block takes over ---- */

@media (max-width: 999px) {
	/*
	 * The plugin hides these three cells here and moves their contents into
	 * `.waitlist-product-mobile-actions`. Its rule is weaker than the badge
	 * and label rules above, so the hiding is restated at their weight -
	 * otherwise the cells keep their grid columns and squeeze the name.
	 */
	body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table td:is(.waitlist-product-status, .waitlist-subscription-status, .waitlist-product-actions) {
		display: none;
	}

	body .woocommerce-MyAccount-content .ct-woocommerce-waitlist-table-row {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: 16px;
	}

	body .woocommerce-MyAccount-content .waitlist-product-thumbnail .product-thumb {
		width: 72px;
		height: 72px;
	}

	body .woocommerce-MyAccount-content .waitlist-product-mobile-actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pc-space-3);
		margin-top: var(--pc-space-2);
	}

	body .woocommerce-MyAccount-content .waitlist-product-mobile-actions ul {
		display: flex;
		flex-direction: column;
		gap: var(--pc-space-1);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--pc-fs-old);
		line-height: var(--pc-lh-card);
		color: var(--pc-ink-400);
	}

	body .woocommerce-MyAccount-content .waitlist-product-mobile-actions ul li {
		display: flex;
		justify-content: flex-start;
		gap: var(--pc-space-1);
	}

	body .woocommerce-MyAccount-content .waitlist-product-mobile-actions .button.unsubscribe {
		margin-inline-start: calc(-1 * var(--pc-space-4));
	}
}

/* ============================================================== Address == */

/*
 * /my-account/edit-address/ after the "Адреса" panel, plus the single-address
 * form behind it (/edit-address/billing|shipping/).
 *
 * WooCommerce prints the list from templates/myaccount/my-address.php:
 *
 *   p                                     lead sentence
 *   .woocommerce-Addresses.col2-set
 *     .woocommerce-Address
 *       header.woocommerce-Address-title > h2 + a.edit
 *       address                              the formatted lines
 *
 * and the form from templates/myaccount/form-edit-address.php:
 *
 *   form > h2 + .woocommerce-address-fields
 *            > .woocommerce-address-fields__field-wrapper > p.form-row…
 *            > p > button[name="save_address"]
 */

body .woocommerce-MyAccount-content > p:first-child {
	margin: 0 0 var(--pc-space-5);
	font-size: var(--pc-fs-body);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-600);
}

/* ---- The two address cards ---- */

body .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-4);
	align-items: start;
	margin: 0;
}

/*
 * The design stacks the card as title / address / button, but Woo puts the
 * "Edit <address>" link in the same <header> as the title. `display: contents`
 * drops that header box so both of its children become items of the card, and
 * `order` puts the link back under the address.
 */
body .woocommerce-MyAccount-content .woocommerce-Address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pc-space-4);
	float: none;
	width: auto;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: contents;
}

body .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	order: 1;
	margin: 0;
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-title);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

/* The "Edit / Add <address>" link reads as the card's ghost button. */
body .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	order: 3;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	white-space: nowrap;
	transition: border-color var(--pc-dur-fast) ease, background var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
	border-color: var(--pc-ink-900);
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
}

/*
 * `wc_get_account_formatted_address()` returns one string with <br> between
 * the lines and no element around the recipient, so this stays a block with
 * the design's line rhythm rather than a flex column - a <br> inside a flex
 * container would become an item of its own.
 */
body .woocommerce-MyAccount-content .woocommerce-Address address {
	order: 2;
	align-self: stretch;
	margin: 0;
	font-style: normal;
	font-size: var(--pc-fs-card);
	line-height: 1.7;
	color: var(--pc-ink-600);
}

/* ---- The single-address form ---- */

body .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) {
	display: block;
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

body .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) > h2 {
	margin: 0 0 var(--pc-space-4);
	padding: 0 0 var(--pc-space-4);
	border-bottom: 1px solid var(--pc-border);
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-title);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-4);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first {
	grid-column: 1;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
	grid-column: 2;
}

/*
 * The address form's own fields (the checkout prefixes them `billing_`) come
 * out of WooCommerce as `form-row-wide`, one per line. From tablet up the
 * design pairs them: street / apartment on one line, postcode / phone on the
 * next. Halving their span lets the grid pack them two per row in DOM order;
 * the ids outweigh the `1 / -1` default above.
 */
@media (min-width: 690px) {
	body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row:is(#billing_address_1_field, #billing_address_2_field, #billing_postcode_field, #billing_phone_field) {
		grid-column: span 1;
		align-self: end;
	}
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row label {
	margin: 0;
	padding: 0;
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-700);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row label :is(.required, abbr.required) {
	color: var(--pc-accent-500);
	text-decoration: none;
	border: 0;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row label .optional {
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-400);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select) {
	width: 100%;
	height: 48px;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	/*background: var(--pc-page);*/
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-family: var(--pc-font);
	/* 15px, as on the checkout and the account details form. */
	font-size: 15px;
	color: var(--pc-ink-900);
	transition: border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields textarea {
	width: 100%;
	padding: var(--pc-space-3) var(--pc-space-4);
	box-sizing: border-box;
	background: var(--pc-page);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-family: var(--pc-font);
	font-size: 15px;
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields :is(input, select, textarea):focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

/*
 * The country / state pickers are select2 widgets, not plain selects; they
 * carry the checkout's skin - see the long note in assets/css/checkout.css
 * for what select2 and Blocksy each contribute here.
 */
body .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
	/* room for the arrow slot on the inline end */
	padding: 0 44px 0 var(--pc-space-4);
	/*background: var(--pc-page);*/
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	transition: border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	font-size: 15px;
	line-height: 46px;
	color: var(--pc-ink-900);
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--pc-ink-400);
}

/*
 * select2 draws its arrow as a CSS triangle on a <b>. The design uses the
 * stroked chevron, so the <b> goes and the slot carries the same data URI
 * as the checkout selects - colour baked in as --pc-ink-600.
 */
body .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	inset-inline-end: var(--pc-space-4);
	width: 14px;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F5C57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px auto;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

body .woocommerce-MyAccount-content .woocommerce-address-fields :is(.select2-container--open, .select2-container--focus) .select2-selection--single {
	border-color: var(--pc-accent-500);
}

/* ---- Country: one selling country, so the row has nothing to choose ---- */

/*
 * With a single allowed country WooCommerce prints the row as a select
 * holding one pre-selected option and marks it `country_to_state--single`
 * (wc-template-functions.php:3431). It is hidden rather than removed:
 * `billing_country` still posts, still feeds tax and address validation, and
 * country-select.js rebuilds the state list from it - so the field has to
 * stay in the form. The same rule is on the checkout, for the same reason.
 *
 * Enabling a second selling country drops the `--single` class and the row
 * reappears on its own.
 *
 * `!important` because the address scripts show and hide rows with jQuery,
 * which writes inline `display`.
 */
body.woocommerce-account #billing_country_field:has(.country_to_state--single) {
	display: none !important;
}

/* ---- The state dropdown ---- */

/*
 * `billing_state` is a `state_select`, which country-select.js hands to
 * selectWoo. The panel it opens is appended to <body>, outside
 * `.woocommerce-address-fields`, so none of the rules above reach it and it
 * would fall back to select2's own skin - 4px corners, #aaa borders, blue
 * highlight.
 *
 * The checkout dresses the same panel from its own body class (see the
 * select2 block in assets/css/checkout.css); these are those rules on the
 * account body class, so both pages open the same dropdown. The admin-bar
 * offset fix over there is unscoped and already applies here.
 *
 * NOTE: this is the second copy of the block. A third page needing it is the
 * point at which the pair should move to a stylesheet of its own.
 */
body.woocommerce-account :is(.select2-container, .select2-dropdown) {
	--theme-form-field-height: 48px;
	--theme-form-field-border-width: 1px;
	--theme-form-field-border-style: solid;
	--theme-form-field-border-initial-color: var(--pc-border);
	--theme-form-field-border-radius: var(--pc-radius-ctl);
	--theme-form-field-background-initial-color: var(--pc-surface);
	--theme-form-field-padding: 0 var(--pc-space-4);
	--theme-form-text-initial-color: var(--pc-ink-900);
	--theme-form-select-background-initial-color: var(--pc-surface);
	--form-field-select-initial-color: var(--pc-ink-600);
}

body.woocommerce-account .select2-container--open .select2-selection--single {
	background-color: var(--pc-surface);
}

body.woocommerce-account .select2-container--disabled .select2-selection--single {
	background: var(--pc-surface-2);
	color: var(--pc-ink-400);
	cursor: not-allowed;
}

/*
 * Matched to the header menus in the prototype: a 12px-radius panel with a
 * soft shadow, options on 8px corners that tint with the accent.
 */
body.woocommerce-account .select2-dropdown {
	/*
	 * The palette slot, not --pc-border: the open panel is an active state
	 * and takes the Customizer's accent, the same colour a focused field
	 * gets. Only the panel - the resting field keeps the hairline.
	 */
	border: 1px solid var(--theme-palette-color-1);
	border-radius: var(--pc-radius-card);
	background: var(--pc-surface);
	box-shadow: 0 12px 28px rgba(31, 30, 28, 0.12);
	overflow: hidden;
}

body.woocommerce-account .select2-container--default .select2-search--dropdown {
	padding: var(--pc-space-2);
}

body.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 40px;
	padding: 0 var(--pc-space-3);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	color: var(--pc-ink-900);
	font-family: inherit;
	font-size: var(--pc-fs-btn);
}

body.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

body.woocommerce-account .select2-results__options {
	padding: var(--pc-space-2);
}

body.woocommerce-account .select2-container--default .select2-results__option {
	padding: 10px var(--pc-space-3);
	border-radius: var(--pc-radius-ctl);
	color: var(--pc-ink-600);
	font-size: var(--pc-fs-btn);
	line-height: 1.4;
}

/*
 * Two select2 generations run on this site and they mark options up
 * differently: WooCommerce's selectWoo (4.0-era) carries the state on an
 * `aria-selected` attribute, while the select2 4.1 build the Nova Poshta
 * plugin ships of its own uses `--selected` / `--selectable` classes and no
 * attribute at all. Both schemes are named here so the two widgets open the
 * same dropdown; keying off the attribute alone left the plugin's city and
 * branch pickers on someone else's skin.
 *
 * The highlighted rule comes last, and repeats `.select2-results__option`
 * to match the weight of the `[aria-selected]` selector above it: the
 * selected option is also the highlighted one when the panel opens, and
 * pointing at it should read as pointing rather than as selection.
 */
body.woocommerce-account .select2-container--default .select2-results__option--selected,
body.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-account .select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--pc-surface-2);
	color: var(--pc-ink-900);
	font-weight: var(--pc-fw-medium);
}

body.woocommerce-account .select2-container--default .select2-results__option.select2-results__option--highlighted {
	background: var(--pc-accent-100);
	color: var(--pc-accent-500);
	font-weight: var(--pc-fw-regular);
}

/* select2 marks unreachable options; they should not read as choices. */
body.woocommerce-account .select2-container--default .select2-results__option[aria-disabled="true"],
body.woocommerce-account .select2-container--default .select2-results__option--disabled {
	color: var(--pc-ink-400);
	cursor: default;
}

body.woocommerce-account .select2-container--default .select2-results__message {
	color: var(--pc-ink-400);
	font-size: var(--pc-fs-btn);
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .select2-container .select2-selection--single {
		transition: none;
	}
}

/* ---- Save row ---- */

body .woocommerce-MyAccount-content .woocommerce-address-fields > p:has(button[name="save_address"]) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--pc-space-5) 0 0;
}

body .woocommerce-MyAccount-content button[name="save_address"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-height: 0;
	padding: 0 18px;
	border: 1px solid var(--pc-ink-900);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	--theme-button-min-height: 48px;
	transition: background var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

body .woocommerce-MyAccount-content button[name="save_address"]:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

/* ---- Mobile ---- */

@media (max-width: 689px) {
	body .woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	body .woocommerce-MyAccount-content .woocommerce-Address,
	body .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) {
		padding: var(--pc-space-4);
	}

	body .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
	body .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
		grid-column: 1;
	}
}

/* ================================================== Login / register == */

/*
 * The signed-out /my-account/ page and Blocksy's account modal both print
 * WooCommerce's login form (templates/myaccount/form-login.php):
 *
 *   [#customer_login.col2-set > .u-column1 / .u-column2]   only with
 *     h2                                                   registration on
 *     form.woocommerce-form.woocommerce-form-login.login
 *       p.form-row-wide > label + input.input-text          username
 *       p.form-row-wide > label + input.input-text          password
 *       p.form-row      > label.…__rememberme + button
 *       p.woocommerce-LostPassword > a
 *
 * It gets the same card and the same field styles as the address form. The
 * register form beside it is dressed identically - the two sit side by side,
 * so only one of them restyled would read as a bug.
 *
 * The order-received page prints the same form when a guest opens someone
 * else's order link, so it is dressed here too.
 *
 * The checkout proper is not touched: its own login form is hidden there in
 * favour of the account modal (see assets/css/checkout.css).
 */

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-space-4);
	align-items: start;
}

body:is(.woocommerce-account, .woocommerce-order-received) :is(.woocommerce-form-login, .woocommerce-form-register),
body.woocommerce-account #customer_login > div {
	float: none;
	width: auto;
	/*margin: 0;*/
	padding: var(--pc-space-6);
	box-sizing: border-box;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

/* Inside the two-column layout the column is the card, not the form. */
body.woocommerce-account #customer_login :is(.woocommerce-form-login, .woocommerce-form-register) {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.woocommerce-account #customer_login > div > h2 {
	margin: 0 0 var(--pc-space-4);
	padding: 0 0 var(--pc-space-4);
	border-bottom: 1px solid var(--pc-border);
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-title);
	letter-spacing: var(--pc-ls-heading);
	color: var(--pc-ink-900);
}

/* ---- Rows and fields ---- */

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	width: auto;
	margin: 0 0 var(--pc-space-4);
	padding: 0;
	float: none;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .form-row:last-of-type {
	margin-bottom: 0;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .form-row label {
	margin: 0;
	padding: 0;
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-700);
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .form-row label .required {
	color: var(--pc-accent-500);
	text-decoration: none;
	border: 0;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .input-text {
	width: 100%;
	height: 48px;
	padding: 0 var(--pc-space-4);
	box-sizing: border-box;
	background: var(--pc-page);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-family: var(--pc-font);
	/* 15px, as on the checkout and the address form. */
	font-size: 15px;
	color: var(--pc-ink-900);
	transition: border-color var(--pc-dur-fast) ease;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .input-text:focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

/* WooCommerce's script wraps the password field to hang a reveal toggle in
   it; the wrapper has to fill the row for the input to keep its width. */
:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) .password-input {
	display: block;
	width: 100%;
}

/* ---- "Remember me" and the submit button share one row ---- */

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	margin-top: var(--pc-space-5);
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	margin: 0;
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-600);
	cursor: pointer;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-form-login__rememberme input {
	margin: 0;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-height: 0;
	margin: 0;
	margin-inline-start: auto;
	padding: 0 18px;
	border: 1px solid var(--pc-ink-900);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-ink-900);
	color: var(--pc-surface);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	--theme-button-min-height: 48px;
	transition: background var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) :is(.woocommerce-form-login, .woocommerce-form-register) button[type="submit"]:hover {
	border-color: var(--pc-ink-700);
	background: var(--pc-ink-700);
	color: var(--pc-surface);
}

/* ---- Lost password and the registration note ---- */

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-LostPassword {
	margin: var(--pc-space-4) 0 0;
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-600);
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-LostPassword a {
	color: var(--pc-ink-600);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--pc-dur-fast) ease;
}

:is(body.woocommerce-account, body.woocommerce-order-received, body .ct-account-modal) .woocommerce-LostPassword a:hover {
	color: var(--pc-accent-500);
}

body.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-400);
}

@media (max-width: 689px) {
	.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
	}

	body:is(.woocommerce-account, .woocommerce-order-received) :is(.woocommerce-form-login, .woocommerce-form-register),
	body.woocommerce-account #customer_login > div {
		padding: var(--pc-space-4);
	}

	body.woocommerce-account #customer_login :is(.woocommerce-form-login, .woocommerce-form-register) {
		padding: 0;
	}
}