/**
 * Paripoorn Account Page (template-account.php + the
 * woocommerce/myaccount/* overrides).
 *
 * Loaded alongside cart-page.css (see inc/enqueue.php) so the shared
 * classes both areas use — .pp-cart-page__title and the card/heading
 * treatments — stay identical without duplication.
 *
 * Two categories of selector live here:
 *   1. .pp-account*/.pp-dash*/.pp-login* — this theme's own markup, from
 *      the myaccount template overrides.
 *   2. .woocommerce-* / .shop_table / .form-row — WooCommerce's own
 *      markup for the screens deliberately NOT overridden (orders table,
 *      downloads, addresses, account details), styled by its default
 *      class names so plugin-added columns and fields keep working.
 *
 * Buttons carry !important: Elementor's generated Kit stylesheet
 * (uploads/elementor/css/post-6.css) styles every <button> on the page
 * as a primary pill and is enqueued after this file, so a plain rule
 * loses to it.
 */

/* ---------------------------------------------------------------------
 * Shell: sidebar nav + content panel
 * ------------------------------------------------------------------ */
/* WooCommerce wraps shortcode output in <div class="woocommerce">, so
   .pp-account is nested one level in. The wrapper is given display:block
   explicitly because WooCommerce's own stylesheets have historically set
   flex/table display on it, which would stop the grid below from being
   the layout that actually applies. */
.pp-account-page .woocommerce {
	display: block;
	width: 100%;
}

.pp-account-page .pp-account {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--pp-space-8);
	align-items: start;
}

/* ---------- Sidebar ---------- */
.pp-account__nav {
	background: var(--pp-bg-card);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-5);
	position: sticky;
	top: var(--pp-space-8);
}

.pp-account__user {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	padding-bottom: var(--pp-space-5);
	margin-bottom: var(--pp-space-4);
	border-bottom: 1px solid var(--pp-border);
	min-width: 0;
}

.pp-account__avatar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pp-bg-section);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pp-account__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-account__user-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pp-account__user-name {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pp-account__user-email {
	font-family: var(--pp-font-body);
	font-size: 0.75rem;
	color: var(--pp-muted);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pp-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pp-account__nav li {
	margin: 0;
}

.pp-account__nav a {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	padding: 11px var(--pp-space-3);
	border-radius: var(--pp-radius-sm);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-weight: 500;
	color: var(--pp-text);
	text-decoration: none;
	transition: background-color var(--pp-transition), color var(--pp-transition);
}

.pp-account__nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--pp-muted);
	transition: color var(--pp-transition);
}

.pp-account__nav a:hover {
	background: var(--pp-bg-section);
	color: var(--pp-heading);
}

.pp-account__nav a:hover .pp-account__nav-icon {
	color: var(--pp-primary);
}

.pp-account__nav li.is-active a {
	background: var(--pp-primary);
	color: var(--pp-light-text);
}

.pp-account__nav li.is-active .pp-account__nav-icon {
	color: var(--pp-light-text);
}

/* Log out reads as a quieter, separated action. */
.pp-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--pp-space-3);
	padding-top: var(--pp-space-3);
	border-top: 1px solid var(--pp-border);
}

/* ---------- Content panel ---------- */
.pp-account__content {
	background: var(--pp-bg-card);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-8);
	min-width: 0;
}

.pp-account__content > h2,
.pp-account__content > h3 {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h5);
	color: var(--pp-heading);
	margin: 0 0 var(--pp-space-5);
}

.pp-account__content > p {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-text);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------
 * Dashboard
 * ------------------------------------------------------------------ */
.pp-dash__greeting {
	margin-bottom: var(--pp-space-6);
}

.pp-dash__hello {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h4);
	color: var(--pp-heading);
	margin: 0 0 4px;
}

.pp-dash__sub {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
	margin: 0;
}

/* auto-fit rather than a fixed 3: the Downloads tile is only rendered
   when the customer actually has downloads, so this grid holds either two
   or three items and both need to fill the row evenly. */
.pp-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--pp-space-4);
	margin-bottom: var(--pp-space-8);
}

.pp-dash__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--pp-bg-section);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-5);
}

.pp-dash__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pp-bg-card);
	color: var(--pp-primary);
	margin-bottom: var(--pp-space-2);
}

.pp-dash__stat-value {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-h5);
	font-weight: var(--pp-weight-price);
	color: var(--pp-heading);
	line-height: 1.2;
}

/* wc_price() wraps the amount in its own markup — keep it inheriting
   the stat's type rather than WooCommerce's defaults. */
.pp-dash__stat-value .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.pp-dash__stat-label {
	font-family: var(--pp-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

/* ---------- Recent orders panel ---------- */
.pp-dash__panel {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-5);
	margin-bottom: var(--pp-space-8);
}

.pp-dash__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pp-space-4);
	margin-bottom: var(--pp-space-4);
}

.pp-dash__panel-title {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h6);
	color: var(--pp-heading);
	margin: 0;
}

.pp-dash__panel-link {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-primary);
	text-decoration: none;
}

.pp-dash__panel-link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pp-dash__orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.pp-dash__order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-4);
	padding: var(--pp-space-3) 0;
	border-bottom: 1px dashed var(--pp-border);
	margin: 0;
}

.pp-dash__order:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pp-dash__order-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pp-dash__order-number {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
	text-decoration: none;
}

.pp-dash__order-number:hover {
	color: var(--pp-primary);
}

.pp-dash__order-meta {
	font-family: var(--pp-font-body);
	font-size: 0.75rem;
	color: var(--pp-muted);
}

.pp-dash__order-sep {
	margin: 0 4px;
}

.pp-dash__order-side {
	display: flex;
	align-items: center;
	gap: var(--pp-space-4);
	flex-shrink: 0;
}

.pp-dash__order-status {
	font-family: var(--pp-font-body);
	font-size: 0.6875rem;
	font-weight: var(--pp-weight-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pp-bg-section);
	color: var(--pp-text);
	white-space: nowrap;
}

.pp-dash__order-status--completed {
	background: #E8F3E9;
	color: var(--pp-success);
}

.pp-dash__order-status--processing,
.pp-dash__order-status--on-hold {
	background: #FDF3E2;
	color: #9A6B12;
}

.pp-dash__order-status--cancelled,
.pp-dash__order-status--failed,
.pp-dash__order-status--refunded {
	background: #FCEBEA;
	color: var(--pp-primary-dark);
}

.pp-dash__order-total {
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-price);
	color: var(--pp-price);
	white-space: nowrap;
}

/* ---------- Quick links ---------- */
.pp-dash__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-4);
}

.pp-dash__link {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	padding: var(--pp-space-4);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	text-decoration: none;
	transition: border-color var(--pp-transition), background-color var(--pp-transition);
}

.pp-dash__link:hover {
	border-color: var(--pp-accent);
	background: var(--pp-bg-section);
}

.pp-dash__link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pp-bg-section);
	color: var(--pp-primary);
}

.pp-dash__link:hover .pp-dash__link-icon {
	background: var(--pp-bg-card);
}

.pp-dash__link-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pp-dash__link-text strong {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
}

.pp-dash__link-text small {
	font-family: var(--pp-font-body);
	font-size: 0.75rem;
	color: var(--pp-muted);
}

/* ---------------------------------------------------------------------
 * Login / register (logged-out state)
 * ------------------------------------------------------------------ */
.pp-account-page--guest .pp-login {
	max-width: 960px;
	margin: 0 auto;
}

.pp-login--single .pp-login__col {
	max-width: 460px;
	margin: 0 auto;
}

.pp-login__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-6);
}

.pp-login__card {
	background: var(--pp-bg-card);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-8);
	height: 100%;
}

.pp-login__head {
	margin-bottom: var(--pp-space-6);
	text-align: center;
}

.pp-login__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--pp-bg-section);
	color: var(--pp-primary);
	margin-bottom: var(--pp-space-3);
}

.pp-login__title {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h5);
	color: var(--pp-heading);
	margin: 0 0 6px;
}

.pp-login__lead {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
	margin: 0;
	line-height: 1.6;
}

.pp-login__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-4);
	flex-wrap: wrap;
}

.pp-login__forgot {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-primary);
	text-decoration: none;
}

.pp-login__forgot:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pp-login__note {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
	background: var(--pp-bg-section);
	border-radius: var(--pp-radius-sm);
	padding: var(--pp-space-3) var(--pp-space-4);
	margin: 0 0 var(--pp-space-4);
}

.pp-login__submit-row {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * WooCommerce's own markup on the screens not overridden
 * ------------------------------------------------------------------ */

/* ---------- Form fields (account details, addresses, login) ---------- */
.pp-account-page .form-row,
.pp-account-page .woocommerce-form-row {
	display: block;
	margin: 0 0 var(--pp-space-4);
	padding: 0;
}

.pp-account-page .form-row label,
.pp-account-page .woocommerce-form-row label {
	display: block;
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
	margin-bottom: 6px;
}

.pp-account-page .required {
	color: var(--pp-primary);
	text-decoration: none;
	border: 0;
}

.pp-account-page input.input-text,
.pp-account-page input[type="text"],
.pp-account-page input[type="email"],
.pp-account-page input[type="tel"],
.pp-account-page input[type="password"],
.pp-account-page select,
.pp-account-page textarea {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 var(--pp-space-4);
	border: 1px solid var(--pp-input-border);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-input-bg);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-heading);
}

.pp-account-page textarea {
	height: auto;
	min-height: 96px;
	padding: var(--pp-space-3) var(--pp-space-4);
}

.pp-account-page input.input-text:focus,
.pp-account-page select:focus,
.pp-account-page textarea:focus {
	border-color: var(--pp-primary);
	outline: none;
}

/* Checkbox rows must not stretch like text inputs. */
.pp-account-page input[type="checkbox"],
.pp-account-page input[type="radio"] {
	width: auto;
	height: auto;
}

.pp-account-page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--pp-space-2);
	font-weight: var(--pp-weight-body);
	color: var(--pp-text);
	margin-bottom: 0;
	cursor: pointer;
}

.pp-account-page .woocommerce-form__label-for-checkbox span {
	font-size: var(--pp-fs-small);
}

/* Select2 (country/state pickers on the address form). */
.pp-account-page .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--pp-input-border);
	border-radius: var(--pp-radius-sm);
}

.pp-account-page .select2-container .select2-selection__rendered {
	line-height: 48px;
	padding-left: var(--pp-space-4);
	color: var(--pp-heading);
}

.pp-account-page .select2-container .select2-selection__arrow {
	height: 46px;
}

/* Two-up rows where WooCommerce marks them first/last. */
@media (min-width: 600px) {
	.pp-account__content .woocommerce-address-fields__field-wrapper,
	.pp-account__content .woocommerce-EditAccountForm .pp-account-fields-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--pp-space-4);
	}

	.pp-account__content .woocommerce-address-fields__field-wrapper > .form-row-wide {
		grid-column: 1 / -1;
	}
}

/* ---------- Buttons ---------- */
.pp-account-page .woocommerce-Button,
.pp-account-page .woocommerce-button,
.pp-account-page button.button,
.pp-account-page a.button,
.pp-account-page input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: 48px !important;
	padding: 0 var(--pp-space-6) !important;
	border: 1px solid var(--pp-primary) !important;
	border-radius: 999px !important;
	background-color: var(--pp-primary) !important;
	color: var(--pp-light-text) !important;
	font-family: var(--pp-font-button) !important;
	font-weight: var(--pp-weight-button) !important;
	font-size: var(--pp-fs-small) !important;
	line-height: normal !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--pp-transition), color var(--pp-transition);
}

.pp-account-page .woocommerce-Button:hover,
.pp-account-page .woocommerce-button:hover,
.pp-account-page button.button:hover,
.pp-account-page a.button:hover,
.pp-account-page input[type="submit"]:hover {
	background-color: var(--pp-primary-dark) !important;
	border-color: var(--pp-primary-dark) !important;
}

/* Cell holding View/Cancel/Pay side by side — a gap between the buttons
   themselves, since neither button carries its own margin. */
.pp-account-page .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-2);
}

/* Row-level actions in the orders table read as secondary. */
.pp-account-page .woocommerce-orders-table__cell-order-actions a.button {
	height: 38px !important;
	padding: 0 var(--pp-space-4) !important;
	background-color: transparent !important;
	color: var(--pp-primary) !important;
	font-size: 0.75rem !important;
}

.pp-account-page .woocommerce-orders-table__cell-order-actions a.button:hover {
	background-color: var(--pp-primary) !important;
	color: var(--pp-light-text) !important;
}

/* ---------- Orders / downloads tables ---------- */
.pp-account-page .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}

.pp-account-page .shop_table thead th {
	text-align: left;
	padding: 0 var(--pp-space-3) var(--pp-space-3);
	border-bottom: 1px solid var(--pp-border);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-eyebrow);
	font-weight: var(--pp-weight-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-account-page .shop_table tbody td,
.pp-account-page .shop_table tbody th {
	padding: var(--pp-space-4) var(--pp-space-3);
	border-bottom: 1px solid var(--pp-border);
	border-top: 0;
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-text);
	text-align: left;
	font-weight: var(--pp-weight-body);
	vertical-align: middle;
}

.pp-account-page .shop_table tbody tr:last-child td,
.pp-account-page .shop_table tbody tr:last-child th {
	border-bottom: none;
}

.pp-account-page .woocommerce-orders-table__cell-order-number a {
	font-family: var(--pp-font-product);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
	text-decoration: none;
}

.pp-account-page .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--pp-primary);
}

.pp-account-page .woocommerce-orders-table__cell-order-total {
	font-family: var(--pp-font-product);
	font-weight: var(--pp-weight-price);
	color: var(--pp-price);
}

/* Order detail (view-order) totals + item table. */
.pp-account-page .woocommerce-table--order-details tfoot th,
.pp-account-page .woocommerce-table--order-details tfoot td {
	padding: var(--pp-space-3);
	border-bottom: 1px dashed var(--pp-border);
	font-size: var(--pp-fs-small);
}

.pp-account-page .woocommerce-table--order-details tfoot tr:last-child th,
.pp-account-page .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none;
	font-family: var(--pp-font-product);
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-weight-price);
	color: var(--pp-price);
}

.pp-account-page .woocommerce-order-details,
.pp-account-page .woocommerce-customer-details {
	margin-bottom: var(--pp-space-8);
}

/* WooCommerce wraps the order number/date/status in the "Order #123 was
   placed on [date] and is now [status]" intro line with <mark> tags —
   browsers apply a yellow highlighter background to <mark> by default.
   Reset to plain inline text so those values read like normal copy. */
.pp-account-page mark {
	background: none;
	color: inherit;
	font-weight: var(--pp-weight-label);
}

/* The "Order #123 was placed on..." intro line — a bare <p> WooCommerce
   prints just above .woocommerce-order-details, with no class of its
   own to hook. Selecting the paragraph immediately before that section
   is the only safe way to reach it. */
.pp-account-page p:has(+ .woocommerce-order-details) {
	margin: 0 0 var(--pp-space-2);
	font-size: var(--pp-fs-small);
	color: var(--pp-muted);
}

/* "Order details" / "Billing address" / "Shipping address" — plain <h2>s
   with no class-based sizing, so they were inheriting the page's h1-scale
   heading style. Bring them down to match the other card titles on this
   page (.pp-fs-h6, same as the totals rows just below). */
.pp-account-page .woocommerce-order-details__title,
.pp-account-page .woocommerce-column__title {
	margin: 0 0 var(--pp-space-4);
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
}

.pp-account-page .woocommerce-customer-details {
	margin-top: var(--pp-space-8);
	padding-top: var(--pp-space-8);
	border-top: 1px solid var(--pp-border);
}

/* Actions row (Pay / Cancel / View, etc. — order/order-details.php
   renders every action link into one <td> with no gap of its own). */
.pp-account-page .woocommerce-table--order-details tfoot td:has(.order-actions-button) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-3);
}

/* ---------- Addresses ---------- */
.pp-account-page .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-5);
}

.pp-account-page .woocommerce-Address {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-5);
	min-width: 0;
}

.pp-account-page .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-3);
}

.pp-account-page .woocommerce-Address-title h2,
.pp-account-page .woocommerce-Address-title h3 {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h6);
	color: var(--pp-heading);
	margin: 0;
}

/* The edit link inside an address card is a plain link, not a pill. */
.pp-account-page .woocommerce-Address-title .edit {
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--pp-primary) !important;
	font-family: var(--pp-font-body) !important;
	font-size: var(--pp-fs-small) !important;
	font-weight: var(--pp-weight-label) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.pp-account-page .woocommerce-Address address {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	font-style: normal;
	line-height: 1.8;
	color: var(--pp-text);
}

/* ---------- Downloads / empty states / notices ---------- */
.pp-account-page .woocommerce-info,
.pp-account-page .woocommerce-message,
.pp-account-page .woocommerce-error {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	list-style: none;
	background: var(--pp-bg-section);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-4) var(--pp-space-5);
	margin: 0 0 var(--pp-space-5);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-heading);
}

.pp-account-page .woocommerce-error {
	background: #FCEBEA;
	color: var(--pp-primary-dark);
	flex-direction: column;
	align-items: flex-start;
}

.pp-account-page .woocommerce-message {
	background: #E8F3E9;
	color: var(--pp-success);
}

.pp-account-page .woocommerce-info::before,
.pp-account-page .woocommerce-message::before,
.pp-account-page .woocommerce-error::before {
	display: none;
}

/*
 * Notice buttons sit next to their text, not pushed to the far edge.
 *
 * The alignment itself is now handled once in woocommerce.css (flex-start
 * with no `order` override), so this only sets the account-specific
 * spacing rather than repeating those rules.
 */
.pp-account-page .woocommerce-info,
.pp-account-page .woocommerce-message,
.pp-account-page .woocommerce-error {
	flex-wrap: wrap;
	line-height: 1.5;
}

.pp-account-page .woocommerce-info .button,
.pp-account-page .woocommerce-message .button,
.pp-account-page .woocommerce-error .button {
	flex-shrink: 0;
}

/*
 * No margin-left:auto anywhere on notice buttons.
 *
 * An earlier attempt used :last-child to push a *trailing* button right,
 * on the assumption that the confirm-email notice's trailing text node
 * would exclude it. Browsers ignore text nodes when matching :last-child,
 * so it matched that button too and shoved it back to the far right —
 * the exact behaviour being fixed. Buttons now always sit next to their
 * text, which is also the more readable result in both notices.
 */

/* Password strength meter on the account-details form. */
.pp-account-page .woocommerce-password-strength {
	font-family: var(--pp-font-body);
	font-size: 0.75rem;
	font-weight: var(--pp-weight-label);
	padding: var(--pp-space-2) 0;
}

.pp-account-page .woocommerce-password-strength.strong {
	color: var(--pp-success);
}

.pp-account-page .woocommerce-password-strength.short,
.pp-account-page .woocommerce-password-strength.bad {
	color: var(--pp-primary);
}

.pp-account-page fieldset {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-5);
	margin: var(--pp-space-6) 0 var(--pp-space-5);
}

.pp-account-page fieldset legend {
	font-family: var(--pp-font-heading);
	font-size: var(--pp-fs-h6);
	color: var(--pp-heading);
	padding: 0 var(--pp-space-2);
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.pp-account-page .pp-account {
		grid-template-columns: minmax(0, 1fr);
	}

	.pp-account__nav {
		position: static;
	}

	/* Sidebar becomes a horizontal scrolling row of chips. */
	.pp-account__nav ul {
		flex-direction: row;
		overflow-x: auto;
		gap: var(--pp-space-2);
		padding-bottom: var(--pp-space-2);
	}

	.pp-account__nav a {
		white-space: nowrap;
	}

	.pp-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		border-left: 1px solid var(--pp-border);
		padding-left: var(--pp-space-2);
	}

	.pp-account__content {
		padding: var(--pp-space-6);
	}

	.pp-login__columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.pp-dash__stats {
		grid-template-columns: 1fr;
	}

	.pp-dash__links {
		grid-template-columns: 1fr;
	}

	.pp-account-page .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.pp-dash__order {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pp-space-2);
	}
}

@media (max-width: 599px) {
	.pp-account__content,
	.pp-login__card {
		padding: var(--pp-space-4);
	}

	/* WooCommerce's shop_table_responsive turns rows into stacked
	   label/value pairs using the data-title attribute — honour that
	   rather than forcing a table layout at this width. */
	.pp-account-page .shop_table_responsive thead {
		display: none;
	}

	.pp-account-page .shop_table_responsive tbody tr {
		display: block;
		border-bottom: 1px solid var(--pp-border);
		padding: var(--pp-space-3) 0;
	}

	.pp-account-page .shop_table_responsive tbody td,
	.pp-account-page .shop_table_responsive tbody th {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pp-space-4);
		border: 0;
		padding: 6px 0;
		text-align: right;
	}

	.pp-account-page .shop_table_responsive tbody td::before,
	.pp-account-page .shop_table_responsive tbody th::before {
		content: attr(data-title) ":";
		font-weight: var(--pp-weight-label);
		color: var(--pp-muted);
		text-align: left;
	}

	.pp-account-page .woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/* ---------- Cancel-order confirmation ---------- */
/* Rendered by woocommerce/myaccount/cancel-order-confirm.php in place of
   the normal My Account content when a customer clicks "Cancel". */

.pp-cancel-confirm__lede {
	color: var(--pp-muted);
	font-size: var(--pp-fs-small);
	margin: 0 0 var(--pp-space-5);
}

.pp-cancel-confirm__form {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
}

.pp-cancel-confirm__label {
	font-size: var(--pp-fs-small);
	font-weight: var(--pp-weight-label);
	color: var(--pp-heading);
}

.pp-cancel-confirm__textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 88px;
	padding: var(--pp-space-3);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-sm);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-small);
	color: var(--pp-heading);
}

.pp-cancel-confirm__textarea:focus-visible {
	outline: 2px solid var(--pp-primary);
	outline-offset: 1px;
}

.pp-cancel-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-3);
	margin-top: var(--pp-space-3);
}

/* !important required: body carries .elementor-kit-6 (specificity 0,2,1
   via ".elementor-kit-6 button"), which beats a plain .pp-button rule at
   0,2,0 and would render this as the Kit's default red pill instead of
   the danger/outline styling. Same reasoning as every other button rule
   in this file (see the file header comment). */
.pp-cancel-confirm__actions .pp-button.pp-button--danger {
	background-color: #A83232 !important;
	border-color: #A83232 !important;
	color: var(--pp-light-text) !important;
}

.pp-cancel-confirm__actions .pp-button.pp-button--danger:hover {
	background-color: #8A2A2A !important;
	border-color: #8A2A2A !important;
}

.pp-cancel-confirm__actions .pp-button.pp-button--outline {
	background-color: transparent !important;
	color: var(--pp-primary) !important;
	border: 1px solid var(--pp-primary) !important;
}

.pp-cancel-confirm__actions .pp-button.pp-button--outline:hover {
	background-color: var(--pp-primary) !important;
	color: var(--pp-light-text) !important;
}

@media (max-width: 480px) {
	.pp-cancel-confirm__actions .pp-button {
		flex: 1 1 auto !important;
		width: auto !important;
	}
}