/* =============================================================================
 * zphcstore-v1 — MY ACCOUNT  (P7, tuju-account)
 *
 * Loaded on `is_account_page()` only, at `wp_enqueue_scripts` priority 40 —
 * i.e. AFTER WooCommerce's own sheets (priority 10) and after the checkout
 * plugin's (30). Source order is load-bearing for §1 and nothing else.
 *
 * TOKENS ARE CONSUMED, NEVER FORKED. Every colour, font, radius and spacing
 * value below comes from `assets/css/zphc-tokens.css`, which was measured off
 * the source. Three agents have already re-declared those custom properties on
 * this project and had to have them removed; this file declares none.
 *
 * REUSED, NOT RE-DECLARED: `zphcstore-checkout.css` already styles
 * `.zphc-woo .input-text`, `.zphc-woo select`, `.zphc-woo textarea`,
 * `.zphc-woo .form-row label`, `.zphc-woo abbr.required`, `.zphc-woo .button`
 * and the select2 control — and that sheet loads on account pages too
 * (`is_account_page()` is in its enqueue guard). So there are no input or
 * button declarations here beyond the few account-only variants. If that plugin
 * is ever deactivated the account forms fall back to browser defaults rather
 * than breaking layout; §11 carries a minimal safety net for exactly that case.
 *
 * MEASURED AT 390 FIRST, then 820, then 1440.
 * ========================================================================== */

/* =============================================================================
 * 1. ⛔ THE SQUEEZED-RAIL NEUTRALISER — the single most important block here.
 *
 * `woocommerce-layout.css` ships:
 *     .woocommerce-account .woocommerce-MyAccount-navigation { float:left; width:30% }
 *     .woocommerce-account .woocommerce-MyAccount-content    { float:right; width:68% }
 *
 * That is 0,2,0 specificity, so it BEATS any single-class `.zphc-acct__nav`
 * rule, and `float` takes both children out of grid flow — at which point the
 * rail shrink-to-fits (it collapses to roughly icon width) and "Account details"
 * wraps onto two lines. The wrapping label is the SECOND symptom of this one
 * bug, not a separate typography problem, which is why it is fixed here and not
 * with a lone `white-space: nowrap`.
 *
 * Countered at 0,3,0 (an extra class in the ancestor chain) so it wins on
 * specificity as well as on source order — relying on source order alone breaks
 * the day someone reorders an enqueue.
 *
 * The 769–991px band is the one most often missed: Woo's
 * `woocommerce-smallscreen.css` reset only starts at <=768px, so between 769
 * and 991 the floats are still live. The grid below covers every width, with no
 * media query needed for the neutraliser itself.
 * ========================================================================== */

.woocommerce-account .zphc-acct__grid .woocommerce-MyAccount-navigation,
.woocommerce-account .zphc-acct__grid .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* `min-width: 0` on the content column is required, not cosmetic: a grid item
   defaults to `min-width: auto`, so a wide order table (or a long unbroken
   order note) pushes the column past its track and the rail is what gives. */
.woocommerce-account .zphc-acct__grid .zphc-acct__content {
	min-width: 0;
}

/* =============================================================================
 * 2. Shell + the page-title band
 *
 * The source renders `div.my-account-header.page-title` with
 * `<h1 class="uppercase">My Account</h1>` above every account screen. The band
 * is emitted from inside the account templates because `woocommerce.php`
 * deliberately ships no page hero (LOCKED #1 — a brand-zone hero above an
 * account screen is the other visible symptom of the wrapper bug).
 *
 * Visual language matched to `.zphc-title-band` in `zphc-pages.css`, which
 * tuju-pages measured off this same source's page-title band.
 * ========================================================================== */

.zphc-acct-band {
	padding: 22px 0;
	border-bottom: 1px solid var(--zphc-border-strong);
	background: #fafafa;
}

.zphc-acct-band__h1 {
	margin: 0;
	font-family: var(--zphc-font-head);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--zphc-secondary);
	text-align: center;
}

.zphc-acct {
	padding: var(--zphc-sp-6) 0 var(--zphc-sp-7);
	font-family: var(--zphc-font-body);
	color: var(--zphc-ink);
}

/* The rail is pinned to a real px track, not a percentage. `minmax(0, 1fr)` on
   the content column is the other half of the overflow guard in §1. */
.zphc-acct__grid {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr);
	gap: var(--zphc-sp-6);
	align-items: start;
}

/* =============================================================================
 * 3. The rail
 * ========================================================================== */

.zphc-acct__nav {
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	overflow: hidden;
}

.zphc-acct__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zphc-acct__nav li {
	margin: 0;
	border-bottom: 1px solid var(--zphc-hairline);
}

.zphc-acct__nav li:last-child {
	border-bottom: 0;
}

.zphc-acct__nav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	font-family: var(--zphc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--zphc-ink-strong);
	text-decoration: none;
	transition: background-color .2s var(--zphc-ease), color .2s var(--zphc-ease);
}

/* Labels on ONE line. This is the second symptom of the §1 bug; it is held here
   as well so that if the float ever creeps back the failure is a horizontal
   scroll (obvious) rather than a wrapped label (easy to dismiss as styling). */
.zphc-acct__nav-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zphc-acct__nav-ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	line-height: 0;
	color: var(--zphc-primary);
}

.zphc-acct__nav-ico svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.zphc-acct__nav li a:hover,
.zphc-acct__nav li a:focus-visible {
	background: var(--zphc-tint);
	color: var(--zphc-primary);
}

.zphc-acct__nav li.is-active > a,
.zphc-acct__nav li a[aria-current="page"] {
	background: var(--zphc-primary);
	color: var(--zphc-white);
}

.zphc-acct__nav li.is-active > a .zphc-acct__nav-ico,
.zphc-acct__nav li a[aria-current="page"] .zphc-acct__nav-ico {
	color: var(--zphc-white);
}

/* `customer-logout` reads as an exit, not as a peer destination. */
.zphc-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--zphc-ink-muted);
}

.zphc-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.zphc-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
	color: var(--zphc-alert);
	background: #fff5f5;
}

.zphc-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover .zphc-acct__nav-ico,
.zphc-acct__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible .zphc-acct__nav-ico {
	color: var(--zphc-alert);
}

/* =============================================================================
 * 4. Content column — headings and copy
 * ========================================================================== */

.zphc-acct-head {
	margin: 0 0 var(--zphc-sp-4);
	font-family: var(--zphc-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--zphc-heading-deep);
}

.zphc-acct-hello {
	margin: 0 0 6px;
	font-family: var(--zphc-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--zphc-primary);
}

.zphc-acct-intro {
	margin: 0 0 var(--zphc-sp-5);
	font-size: 15px;
	line-height: 1.65;
	color: var(--zphc-ink);
}

.zphc-acct-hint {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--zphc-ink-muted);
}

.zphc-acct-crumb {
	margin: -4px 0 var(--zphc-sp-4);
	font-size: 14px;
}

.zphc-acct-crumb a,
.zphc-acct-card__links a {
	color: var(--zphc-link);
	text-decoration: none;
	font-weight: 600;
}

.zphc-acct-crumb a:hover,
.zphc-acct-card__links a:hover {
	color: var(--zphc-link-hover);
	text-decoration: underline;
}

/* =============================================================================
 * 5. Cards
 * ========================================================================== */

.zphc-acct-card {
	margin: 0 0 var(--zphc-sp-5);
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	overflow: hidden;
}

.zphc-acct-card__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 18px;
	background: var(--zphc-tint);
	border-bottom: 1px solid var(--zphc-border);
	font-family: var(--zphc-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--zphc-secondary);
}

.zphc-acct-card__ico {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	line-height: 0;
	color: var(--zphc-primary);
}

.zphc-acct-card__ico svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.zphc-acct-card__body {
	padding: 18px;
}

.zphc-acct-card__sub {
	margin: 0 0 8px;
	font-family: var(--zphc-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--zphc-heading-deep);
}

.zphc-acct-card__line {
	margin: 0 0 3px;
	font-size: 15px;
	line-height: 1.6;
	word-break: break-word;
}

.zphc-acct-card__links {
	margin: 12px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
}

/* Recent-order key/value strip. */
.zphc-acct-recent {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
}

.zphc-acct-recent__k,
.zphc-acct-meta__k {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
}

.zphc-acct-recent__v,
.zphc-acct-meta__v {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--zphc-ink);
}

.zphc-acct-recent__v a {
	color: var(--zphc-link);
	font-weight: 700;
	text-decoration: none;
}

/* =============================================================================
 * 6. Dashboard tiles
 * ========================================================================== */

.zphc-acct-tiles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zphc-sp-4);
}

.zphc-acct-tile a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 16px;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	text-decoration: none;
	transition: border-color .2s var(--zphc-ease), box-shadow .2s var(--zphc-ease);
}

.zphc-acct-tile a:hover,
.zphc-acct-tile a:focus-visible {
	border-color: var(--zphc-primary);
	box-shadow: 0 4px 10px rgba(0, 114, 188, .12);
}

.zphc-acct-tile__ico {
	display: block;
	width: 22px;
	height: 22px;
	margin-bottom: 9px;
	line-height: 0;
	color: var(--zphc-primary);
}

.zphc-acct-tile__ico svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

.zphc-acct-tile__label {
	display: block;
	font-family: var(--zphc-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--zphc-primary);
}

.zphc-acct-tile__desc {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--zphc-ink-muted);
}

/* =============================================================================
 * 7. Orders table
 *
 * Woo's `shop_table_responsive` + `data-title` attributes are KEPT on the markup
 * so `woocommerce-smallscreen.css` still stacks the rows below 768px. This
 * block restyles that behaviour rather than fighting it — which is why the
 * mobile rules below re-state `display: block` instead of trying to force a
 * table back on.
 * ========================================================================== */

.zphc-acct-table {
	width: 100%;
	margin: 0 0 var(--zphc-sp-5);
	border-collapse: collapse;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	overflow: hidden;
	font-size: 14.5px;
}

.zphc-acct-table thead th {
	padding: 11px 14px;
	background: var(--zphc-tint);
	border-bottom: 1px solid var(--zphc-border);
	font-family: var(--zphc-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
	text-align: left;
}

.zphc-acct-table tbody th,
.zphc-acct-table tbody td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--zphc-hairline);
	text-align: left;
	font-weight: 400;
	vertical-align: middle;
}

.zphc-acct-table tbody tr:last-child th,
.zphc-acct-table tbody tr:last-child td {
	border-bottom: 0;
}

.zphc-acct-table tbody tr:hover {
	background: #fbfdff;
}

.zphc-acct-table .woocommerce-orders-table__cell-order-number a {
	color: var(--zphc-link);
	font-weight: 700;
	text-decoration: none;
}

.zphc-acct-table .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--zphc-link-hover);
}

/* Woo's action buttons are small secondary chips in a data table, not full
   primary CTAs — the checkout plugin's `.zphc-woo .button` is deliberately
   overridden here, and only inside this table. */
.zphc-acct-table .woocommerce-orders-table__cell-order-actions .button,
.zphc-acct-table .woocommerce-orders-table__cell-order-actions a.button {
	display: inline-block;
	padding: 7px 13px;
	margin: 2px 4px 2px 0;
	font-size: 11px;
	line-height: 1.2;
	border-width: 1px;
	background: var(--zphc-white);
	color: var(--zphc-primary);
}

.zphc-acct-table .woocommerce-orders-table__cell-order-actions .button:hover {
	background: var(--zphc-primary);
	color: var(--zphc-white);
}

.zphc-acct-pager {
	display: flex;
	gap: 10px;
	margin: 0 0 var(--zphc-sp-5);
}

/* =============================================================================
 * 8. Status pills
 *
 * Every WooCommerce core status is covered, not just the two this store
 * currently has orders in — an uncovered status falls back to the neutral base
 * rather than losing its pill entirely.
 * ========================================================================== */

.zphc-acct-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: var(--zphc-r-round);
	border: 1px solid currentColor;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--zphc-ink-muted);
	background: rgba(128, 137, 148, .08);
}

.zphc-acct-pill--on-hold,
.zphc-acct-pill--pending {
	color: #8a5a00;
	background: #fff8e8;
}

.zphc-acct-pill--processing {
	color: var(--zphc-primary);
	background: rgba(0, 114, 188, .08);
}

.zphc-acct-pill--completed {
	color: #3f6128;
	background: #f1f8ec;
}

.zphc-acct-pill--cancelled,
.zphc-acct-pill--failed {
	color: var(--zphc-alert);
	background: #fdf2f2;
}

.zphc-acct-pill--refunded {
	color: var(--zphc-secondary);
	background: rgba(1, 70, 115, .07);
}

/* =============================================================================
 * 9. View order — meta strip + the checkout plugin's order-details markup
 *
 * `order/order-details.php` comes from `zphcstore-checkout` (LOCKED #12). Its
 * own stylesheet is scoped under `.zphck-ty`, which exists on the
 * order-received screen ONLY — so on this screen that markup arrives
 * UNSTYLED and is styled here. That split is deliberate on both sides: the
 * theme must not ship `woocommerce/order/order-details.php` or the plugin's
 * loader stands down and the thank-you page silently reverts to stock Woo.
 * ========================================================================== */

.zphc-acct-meta {
	margin: 0 0 var(--zphc-sp-5);
	padding: 16px 18px;
	list-style: none;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px 20px;
}

.zphc-acct-meta__v--total {
	font-weight: 700;
	color: var(--zphc-heading-deep);
}

.woocommerce-account .woocommerce-order-details {
	margin: 0 0 var(--zphc-sp-5);
}

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details h2 {
	margin: 0 0 var(--zphc-sp-4);
	font-family: var(--zphc-font-head);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--zphc-heading-deep);
}

.woocommerce-account table.order_details {
	width: 100%;
	margin: 0 0 var(--zphc-sp-5);
	border-collapse: collapse;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	overflow: hidden;
	font-size: 14.5px;
}

.woocommerce-account table.order_details thead th {
	padding: 11px 14px;
	background: var(--zphc-tint);
	border-bottom: 1px solid var(--zphc-border);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
	text-align: left;
}

.woocommerce-account table.order_details thead th.product-total,
.woocommerce-account table.order_details tbody td.product-total,
.woocommerce-account table.order_details tfoot td {
	text-align: right;
}

.woocommerce-account table.order_details tbody th,
.woocommerce-account table.order_details tbody td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--zphc-hairline);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.woocommerce-account table.order_details tbody .product-name a {
	color: var(--zphc-primary);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account table.order_details .wc-item-meta,
.woocommerce-account table.order_details .variation {
	margin: 5px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--zphc-ink-muted);
	list-style: none;
}

.woocommerce-account table.order_details tfoot th,
.woocommerce-account table.order_details tfoot td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--zphc-hairline);
	font-size: 14px;
}

.woocommerce-account table.order_details tfoot th {
	text-align: left;
	font-weight: 600;
	color: var(--zphc-ink);
}

/* The grand total, emphasised using the `zphck-tot-*` classes the checkout
   plugin's fork of `order-details.php` adds. Woo ships class-less `<tr>`s in
   that footer, so without those hooks the total cannot be told apart from the
   shipping row in CSS. */
.woocommerce-account table.order_details tfoot tr.zphck-tot-order_total th,
.woocommerce-account table.order_details tfoot tr.zphck-tot-order_total td {
	border-top: 2px solid rgba(0, 114, 188, .28);
	font-size: 16px;
	font-weight: 700;
	color: var(--zphc-heading-deep);
}

.woocommerce-account table.order_details tfoot tr:last-child th,
.woocommerce-account table.order_details tfoot tr:last-child td {
	border-bottom: 0;
}

/* Billing / Shipping address blocks, as cards matching the thank-you page's
   language (same radius, same hairline, same tint). */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-account .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zphc-sp-4);
	margin: 0;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column,
.woocommerce-account .woocommerce-customer-details .col-1,
.woocommerce-account .woocommerce-customer-details .col-2 {
	float: none;
	width: auto;
	padding: 16px 18px;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--zphc-ink);
	word-break: normal;
}

.zphc-acct-notes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zphc-acct-notes li {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--zphc-hairline);
}

.zphc-acct-notes li:last-child {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.zphc-acct-notes .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
}

.zphc-acct-notes .woocommerce-OrderUpdate-description p:last-child {
	margin-bottom: 0;
}

/* =============================================================================
 * 10. Addresses
 * ========================================================================== */

.zphc-acct-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zphc-sp-4);
}

/* Woo's `u-column1/2` are floated by `woocommerce.css`; the grid above needs
   them back in flow. Same failure shape as §1, different selector. */
.woocommerce-account .zphc-acct-addresses .u-column1,
.woocommerce-account .zphc-acct-addresses .u-column2 {
	float: none;
	width: auto;
}

.zphc-acct-address {
	padding: 0;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	overflow: hidden;
}

.zphc-acct-address__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	background: var(--zphc-tint);
	border-bottom: 1px solid var(--zphc-border);
}

.zphc-acct-address__head h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--zphc-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--zphc-secondary);
}

.zphc-acct-address__ico {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	line-height: 0;
	color: var(--zphc-primary);
}

.zphc-acct-address__ico svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}

.zphc-acct-address__head a.edit {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--zphc-link);
	text-decoration: none;
	white-space: nowrap;
}

.zphc-acct-address__head a.edit:hover {
	color: var(--zphc-link-hover);
	text-decoration: underline;
}

.zphc-acct-address address {
	display: block;
	margin: 0;
	padding: 16px 18px;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--zphc-ink);
}

.zphc-acct-address__none {
	color: var(--zphc-ink-muted);
	font-size: 14px;
}

/* =============================================================================
 * 11. Forms
 *
 * Controls themselves come from `zphcstore-checkout.css` (`.zphc-woo .input-text`
 * et al). What is here is the two-up row grid, plus a minimal fallback so the
 * screens stay usable if that plugin is ever deactivated.
 * ========================================================================== */

.zphc-acct-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--zphc-sp-4);
}

.zphc-acct-fields > .form-row,
.zphc-acct-fields > p {
	margin: 0 0 var(--zphc-sp-4);
	padding: 0;
	float: none;
	width: auto;
}

.zphc-acct-fields > .form-row-wide,
.zphc-acct-fields > .woocommerce-form-row--wide,
.zphc-acct-fields > .clear {
	grid-column: 1 / -1;
}

/* `.clear` is Woo's float-clearing div. In a grid it would otherwise occupy a
   real cell and knock the next field into the wrong column. */
.zphc-acct-fields > .clear {
	display: none;
}

.zphc-acct-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.zphc-acct-actions {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Fallback ONLY — every one of these is already supplied by
   `zphcstore-checkout.css` under `.zphc-woo`. Declared at lower specificity
   (one class) so the plugin's rules win whenever it is active, and so this
   never becomes a competing second source of truth. */
.zphc-acct-form .input-text,
.zphc-acct-form select {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--zphc-border-strong);
	border-radius: var(--zphc-r);
	font-family: var(--zphc-font-body);
	font-size: 15px;
}

.zphc-acct-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zphc-ink-strong);
}

.zphc-acct-form .required {
	color: var(--zphc-alert);
	border: 0;
	text-decoration: none;
}

/* =============================================================================
 * 12. Logged-out screens — login / register / lost password / reset
 *
 * The source splits `#customer_login` into two equal columns with a vertical
 * divider (`col2-set row row-divided`). Reproduced as a grid; the divider is a
 * border on the second panel so it disappears cleanly when the columns stack.
 * ========================================================================== */

.zphc-acct--login {
	padding-top: var(--zphc-sp-6);
}

.zphc-acct-login-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--zphc-sp-6);
	align-items: start;
	max-width: 920px;
	margin: 0 auto;
}

.zphc-acct-login-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px;
}

/* Same neutraliser shape as §1: `woocommerce.css` floats `#customer_login`'s
   columns at `.col2-set .col-1 { float:left; width:48% }`. */
.woocommerce-account .zphc-acct-login-grid > .col-1,
.woocommerce-account .zphc-acct-login-grid > .col-2,
.woocommerce-account .zphc-acct-login-grid > .u-column1,
.woocommerce-account .zphc-acct-login-grid > .u-column2 {
	float: none;
	width: auto;
}

.zphc-acct-panel {
	box-sizing: border-box;
	padding: 24px;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
}

.zphc-acct-panel__title {
	margin: 0 0 var(--zphc-sp-4);
	font-family: var(--zphc-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--zphc-primary);
}

/* The lost-password form inherits Woo's `form-row-first` (a 48% float) on a
   single-field form. Laid out full width — a half-width lone field reads as a
   broken form, especially on a phone. */
.zphc-acct-panel .form-row-first,
.zphc-acct-panel .form-row-last,
.zphc-acct-panel .woocommerce-form-row--first,
.zphc-acct-panel .woocommerce-form-row--last {
	float: none;
	width: auto;
	margin: 0 0 var(--zphc-sp-4);
}

.zphc-acct-panel .form-row {
	margin: 0 0 var(--zphc-sp-4);
}

.zphc-acct-panel .input-text {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--zphc-border-strong);
	border-radius: var(--zphc-r);
	font-family: var(--zphc-font-body);
	font-size: 15px;
}

.zphc-acct-panel label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zphc-ink-strong);
}

.zphc-acct-remember label,
.zphc-acct-panel .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--zphc-ink);
	cursor: pointer;
}

.zphc-acct-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	flex: 0 0 16px;
	accent-color: var(--zphc-primary);
}

.zphc-acct-panel .lost_password {
	margin: 12px 0 0;
	font-size: 14px;
}

.zphc-acct-panel .lost_password a {
	color: var(--zphc-link);
	text-decoration: none;
	font-weight: 600;
}

.zphc-acct-panel .lost_password a:hover {
	color: var(--zphc-link-hover);
	text-decoration: underline;
}

/* Woo's privacy-policy block, emitted into the register form. */
.zphc-acct-panel .woocommerce-privacy-policy-text p {
	margin: 0 0 var(--zphc-sp-4);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--zphc-ink-muted);
}

.zphc-acct-panel .woocommerce-privacy-policy-text a {
	color: var(--zphc-link);
}

/* `/register/` redirects to `/my-account/#zphc-register`; make the landing
   obvious rather than silently scrolling to an identical-looking card. */
#zphc-register:target {
	border-color: var(--zphc-primary);
	box-shadow: 0 0 0 3px rgba(0, 114, 188, .14);
}

/* =============================================================================
 * 13. Empty states + notices
 * ========================================================================== */

.zphc-acct-empty {
	padding: 32px 24px;
	text-align: center;
	background: var(--zphc-white);
	border: 1px dashed var(--zphc-border-strong);
	border-radius: var(--zphc-r);
}

.zphc-acct-empty--flush {
	border: 0;
	padding: 8px 0 0;
}

.zphc-acct-empty__ico {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-bottom: 10px;
	line-height: 0;
	color: var(--zphc-primary);
	opacity: .7;
}

.zphc-acct-empty__ico svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
	display: block;
}

.zphc-acct-empty__title {
	margin: 0 0 6px;
	font-family: var(--zphc-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--zphc-heading-deep);
}

.zphc-acct-empty__text {
	margin: 0 auto 18px;
	max-width: 420px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--zphc-ink-muted);
}

/* Woo notices in the brand palette. Scoped to `.woocommerce-account` so the
   cart/checkout versions in `zphcstore-checkout.css` are untouched. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	background: var(--zphc-tint);
	border-top-color: var(--zphc-primary);
	color: var(--zphc-ink);
	border-radius: var(--zphc-r);
}

.woocommerce-account .woocommerce-error {
	background: #fff5f5;
	border-top-color: var(--zphc-alert);
	color: var(--zphc-ink);
	border-radius: var(--zphc-r);
}

.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error a.button {
	font-size: 11px;
	padding: 7px 13px;
}

/* =============================================================================
 * 14. Responsive
 *
 * Breakpoints follow the source's Flatsome scale (small <=549, medium <=849)
 * which the rest of this theme already uses, plus one at 1024 for the rail.
 * ========================================================================== */

@media (max-width: 1024px) {
	.zphc-acct__grid {
		grid-template-columns: 212px minmax(0, 1fr);
		gap: var(--zphc-sp-5);
	}

	.zphc-acct__nav li a {
		padding: 12px 13px;
		font-size: 13.5px;
	}
}

/* <=849: the rail moves above the content as a full-width horizontal strip.
   NOT hidden — it is the only navigation between account screens, unlike the
   shop's category rail which the mobile drawer duplicates. */
@media (max-width: 849px) {
	.zphc-acct__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--zphc-sp-5);
	}

	.zphc-acct__nav {
		order: 1;
	}

	.zphc-acct__content {
		order: 2;
	}

	.zphc-acct__nav ul {
		display: flex;
		flex-wrap: wrap;
	}

	.zphc-acct__nav li {
		border-bottom: 0;
		border-right: 1px solid var(--zphc-hairline);
	}

	.zphc-acct__nav li:last-child {
		border-right: 0;
	}

	.zphc-acct__nav li a {
		padding: 11px 14px;
	}

	.zphc-acct-login-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--zphc-sp-5);
		max-width: 480px;
	}

	.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
	.woocommerce-account .woocommerce-customer-details .col2-set,
	.zphc-acct-addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* <=600: stack everything that was two-up. The orders table is handed to
   `woocommerce-smallscreen.css`'s `data-title` stacking, restyled rather than
   replaced — see §7. */
@media (max-width: 600px) {
	.zphc-acct {
		padding-top: var(--zphc-sp-5);
	}

	.zphc-acct-band__h1 {
		font-size: 1.3rem;
	}

	.zphc-acct-head {
		font-size: 1.3rem;
	}

	.zphc-acct-fields,
	.zphc-acct-tiles,
	.zphc-acct-recent {
		grid-template-columns: minmax(0, 1fr);
	}

	.zphc-acct-panel,
	.zphc-acct-card__body {
		padding: 16px;
	}

	.zphc-acct-meta {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	/* Woo stacks the responsive table into rows of label/value pairs using the
	   `data-title` attributes kept on the markup. Restyled to read as cards. */
	.zphc-acct-table {
		border: 0;
		background: none;
	}

	.zphc-acct-table thead {
		display: none;
	}

	.zphc-acct-table tbody,
	.zphc-acct-table tbody tr,
	.zphc-acct-table tbody th,
	.zphc-acct-table tbody td {
		display: block;
		width: auto;
		text-align: left;
	}

	.zphc-acct-table tbody tr {
		margin: 0 0 var(--zphc-sp-4);
		padding: 6px 0;
		background: var(--zphc-white);
		border: 1px solid var(--zphc-border);
		border-radius: var(--zphc-r);
		box-shadow: var(--zphc-sh-card);
	}

	.zphc-acct-table tbody th,
	.zphc-acct-table tbody td {
		padding: 9px 16px;
		border-bottom: 0;
	}

	.zphc-acct-table tbody th::before,
	.zphc-acct-table tbody td::before {
		content: attr(data-title) ": ";
		display: block;
		margin-bottom: 3px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--zphc-ink-muted);
	}

	.woocommerce-account table.order_details thead {
		display: none;
	}

	.woocommerce-account table.order_details,
	.woocommerce-account table.order_details tbody,
	.woocommerce-account table.order_details tfoot,
	.woocommerce-account table.order_details tr,
	.woocommerce-account table.order_details th,
	.woocommerce-account table.order_details td {
		display: block;
		width: auto;
		text-align: left;
	}

	.woocommerce-account table.order_details tbody tr,
	.woocommerce-account table.order_details tfoot tr {
		padding: 8px 0;
		border-bottom: 1px solid var(--zphc-hairline);
	}

	.woocommerce-account table.order_details tbody th,
	.woocommerce-account table.order_details tbody td,
	.woocommerce-account table.order_details tfoot th,
	.woocommerce-account table.order_details tfoot td {
		padding: 4px 14px;
		border-bottom: 0;
	}

	.woocommerce-account table.order_details tfoot th {
		font-size: 10.5px;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--zphc-ink-muted);
	}

	.zphc-acct-actions .button,
	.zphc-acct-empty .zphc-btn {
		width: 100%;
		box-sizing: border-box;
	}
}