/* ==========================================================
 * S8F — Account + Post-Purchase production implementation.
 * Governed by design-locks/ACCOUNT-POSTPURCHASE-VISUAL-SYSTEM-LOCK.md v1.1
 * and design-lab/final/account/s8-account-postpurchase-final/. Tokens
 * reused from design-system.css (--pp-*) — only the two NEW tokens this
 * surface introduces (--pp-acct-max, --pp-acct-mobile-gutter) are declared
 * here. Real WooCommerce markup (.form-row, .woocommerce-Input,
 * .wc_payment_methods, .woocommerce-message/-error, etc.) is restyled via
 * its own real classes throughout — never renamed or rebuilt, matching
 * this theme's own S7E precedent (assets/css/checkout.css).
 *
 * Class naming is a deliberate, disclosed, NON-visual rename from the
 * locked lab exhibit: the lab's own `hy-*`/`cb-*` prefixes were an
 * internal S8C lab shorthand ("hybrid"/"Concept B"), never intended as
 * production class names. Every value below (spacing/color/size) is
 * pixel-identical to the locked exhibit — only the selector names are
 * promoted to this theme's real `.pp-*` ownership convention
 * (CLAUDE.md "POUCHPICK VISUAL OWNERSHIP"). See the S8F final report for
 * the full rename map.
 * ========================================================== */

:root {
	--pp-acct-max: 1120px;
	--pp-acct-mobile-gutter: 18px;
}

/* ============================================================
   ORDER RECEIVED — DEDICATED SHELL (header.php)
   Same geometry as the already-locked reduced Checkout shell
   (assets/css/checkout.css .pp-checkout-header-*) — a deliberately
   different content role (success context + two named actions, never
   "Secure Checkout"/"Back to Cart"), lock Section W.
   ============================================================ */
.pp-orx-header-shell { background: #fff; border-bottom: 1px solid var(--pp-border); }
.pp-orx-header-row { max-width: 1360px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pp-space-6); gap: var(--pp-space-4); }
.pp-orx-header-plate { background: var(--pp-lime); border-radius: 4px; padding: 10px var(--pp-space-4); display: inline-flex; align-items: center; flex: none; }
.pp-orx-header-plate img { height: 22px; display: block; }
.pp-orx-header-context { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--pp-success-text); flex: 1; justify-content: center; }
.pp-orx-header-context .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pp-green); flex: none; }
.pp-orx-header-actions { display: flex; align-items: center; gap: 4px; flex: none; }
/* S9D-D (lock §15 / §43): ≥44px effective shell targets; the visual label
   size is unchanged. */
.pp-orx-header-actions a {
	display: inline-flex; align-items: center; gap: 4px;
	min-height: var(--pp-hit-min); padding: 0 10px; border-radius: var(--pp-radius-control);
	font-size: 0.8125rem; font-weight: 600; color: var(--pp-ink); white-space: nowrap;
	transition: background-color var(--pp-motion-micro) var(--pp-ease-out);
}
.pp-orx-header-actions a.primary { color: var(--pp-navy); }
.pp-orx-header-actions a:hover { background: var(--pp-soft-surface); }
.pp-orx-header-actions a:active { background: var(--pp-navy-tint); }
.pp-orx-header-plate { min-height: var(--pp-hit-min); justify-content: center; }
@media (max-width: 640px) {
	/* S9D-D-R3 (MATERIAL): the wrap MUST live in the same query as the
	   layout that depends on it. `.pp-orx-header-actions` below takes
	   `width: 100%` from ≤640, but this row only began wrapping at ≤480, so
	   across 481–640 a full-width child sat on a `nowrap` row beside the
	   plate and the context block — a guaranteed ≈+102px horizontal
	   overflow at every width in that band (measured 481→583, 520→622,
	   560→662, 600→702, 640→742). Moved up from the ≤480 query; the values
	   are unchanged and no new geometry, calc, clipping or type change was
	   introduced. */
	.pp-orx-header-row { padding: 10px var(--pp-gutter-mobile); flex-wrap: wrap; row-gap: 10px; }
	.pp-orx-header-plate { padding: 8px 12px; }
	.pp-orx-header-plate img { height: 18px; }
	/* S9D-D (lock §43): the status dot and its label stay together on the
	   first row at every width — the S9A "orphan green dot ≤480" P0. The
	   label is no longer clipped away, so the dot never stands alone. */
	.pp-orx-header-context { order: 2; flex: none; margin-inline-start: auto; justify-content: flex-end; }
	.pp-orx-header-actions { order: 3; width: 100%; justify-content: space-between; gap: var(--pp-space-3); }
	.pp-orx-header-actions a {
		flex: 1; min-width: 0; justify-content: center; text-align: center; white-space: normal;
		border: 1px solid var(--pp-border); padding: 8px 12px;
	}
	.pp-orx-header-actions a.primary { background: var(--pp-navy); color: #fff; border-color: var(--pp-navy); }

	/* S9D-D-R2 (MINOR C): on a NON-confirmed request (failed order, or an
	   unresolvable / wrong-key URL) the shell holds only the fallback
	   "Continue shopping" link. Left as-is it would flex-grow to full width
	   and fill Navy, out-ranking WooCommerce's own real recovery action —
	   Pay, on the failed-order body — as the page's dominant control. Here
	   it stays a restrained secondary action: it does not grow, it is not
	   promoted to filled Primary, it keeps its real destination and it keeps
	   the ≥44px true-mobile target from the base rule above. The confirmed
	   composition (View order + Continue shopping) is untouched. */
	.pp-orx-header-shell--unconfirmed .pp-orx-header-actions { justify-content: flex-end; }
	.pp-orx-header-shell--unconfirmed .pp-orx-header-actions a { flex: 0 1 auto; }
	.pp-orx-header-shell--unconfirmed .pp-orx-header-actions a.primary {
		background: none;
		color: var(--pp-navy);
		border-color: var(--pp-border);
	}
}

/* ============================================================
   CONTENT WIDTH + PAGE SHELL
   ============================================================ */
.pp-acct-container { max-width: var(--pp-acct-max); margin: 0 auto; padding: 0 var(--pp-space-6); }
@media (max-width: 767px) { .pp-acct-container { padding: 0 var(--pp-acct-mobile-gutter); } }

/* Vertical rhythm ONLY — left/right gutter belongs exclusively to
   .pp-acct-container/.pp-container, which this class is always combined
   with on the same element. Longhand top/bottom is deliberate (lock
   Section F, absolute rule): a 3-value `padding: X 0 Y` shorthand here
   would zero .pp-acct-container's own horizontal padding at equal
   specificity purely by later source order — the exact defect the lock's
   own S8C correction pass found and fixed. Never reintroduce the
   shorthand form. */
.pp-acct-shell { padding-top: var(--pp-space-7); padding-bottom: 96px; }
@media (max-width: 767px) { .pp-acct-shell { padding-top: var(--pp-space-5); padding-bottom: 72px; } }
.pp-acct-head { margin-bottom: var(--pp-space-6); }
.pp-acct-head h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -0.02em; margin: 0 0 4px; }   /* S9D-D: the shared page-title role (lock §11) */
.pp-acct-head .sub { color: var(--pp-secondary-text); font-size: 14px; }
.pp-acct-head .sub a { color: var(--pp-navy); font-weight: 600; }

.pp-acct-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--pp-space-6); align-items: start; }
/* Lock Section E, three real tiers (v1.1 correction): 768-900px collapses
   to one column but keeps the FULL desktop sidebar (stacked above content,
   document order) — the compact bar stays exclusive to <=767px below. */
@media (max-width: 900px) { .pp-acct-layout { grid-template-columns: 1fr; } }

/* ============================================================
   ACCOUNT NAVIGATION — DESKTOP (>=768px, hidden <=767px)
   Concept B's active-state strength without a heavy card wrapper (lock
   Section C: "do not make the sidebar visually heavier than the actual
   content") — no soft-surface background, just a quiet identity line +
   a plain nav list whose ACTIVE item alone gets the filled-Navy tab.
   ============================================================ */
.pp-acct-sidebar { display: block; }
@media (max-width: 767px) { .pp-acct-sidebar { display: none; } }
.pp-acct-identity { padding-bottom: var(--pp-space-4); margin-bottom: var(--pp-space-3); border-bottom: 1px solid var(--pp-border); }
.pp-acct-identity .name { font-family: var(--pp-font-display); font-weight: 600; font-size: 16px; }
.pp-acct-identity .since { font-size: 12px; color: var(--pp-secondary-text); margin-top: 2px; }
.pp-acct-nav { list-style: none; margin: 0; padding: 0; }
.pp-acct-nav a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; margin-bottom: 2px; font-size: 14.5px; font-weight: 500; color: var(--pp-ink); border-radius: var(--pp-radius-sm); font-family: inherit; }
.pp-acct-nav a.is-active { background: var(--pp-navy); color: #fff; font-weight: 700; }
.pp-acct-nav a.is-muted { color: var(--pp-secondary-text); font-size: 13.5px; }
.pp-acct-nav-signout { margin-top: var(--pp-space-4); padding-top: var(--pp-space-4); border-top: 1px solid var(--pp-border); }
/* A quiet text-action, deliberately lower emphasis than any nav item —
   never a bordered/filled button, never red (Sign out is routine here,
   not destructive). Correctly scoped as a real descendant selector (lock
   Section AG names the historical bug this corrects: an unscoped sibling
   rule that never matched, leaving raw browser-button chrome live). */
.pp-acct-nav-signout .pp-navbtn { display: block; width: 100%; padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: var(--pp-secondary-text); border-radius: var(--pp-radius-sm); font-family: inherit; }
.pp-acct-nav-signout .pp-navbtn:hover { color: var(--pp-ink); background: var(--pp-soft-surface); }

/* ============================================================
   ACCOUNT NAVIGATION — TRUE MOBILE (<=767px)
   A compact current-section bar that expands into an accordion panel on
   demand, replacing the desktop sidebar entirely (lock Section D) — real
   accessible disclosure (native `hidden` + aria-expanded, assets/js/account.js).
   ============================================================ */
.pp-macct-bar { display: none; }
@media (max-width: 767px) {
	.pp-macct-bar { display: block; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); margin-bottom: var(--pp-space-5); overflow: hidden; }
}
/* Human-review visual issue V2: on real iPhone Safari, a real <button>
   with no explicit color can render its text in the system accent color
   (bright link blue) rather than inheriting body/ink color — headless
   Chromium never reproduced this, exactly why real-device review exists
   (lock Section AE). -webkit-appearance/appearance: none plus an
   explicit color on both the button and its current-section-label span
   removes any native chrome that color could otherwise ride in on. */
.pp-macct-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px var(--pp-space-4); background: var(--pp-soft-surface); border: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--pp-ink); -webkit-appearance: none; appearance: none; }
.pp-macct-current { font-family: var(--pp-font-display); font-weight: 600; font-size: 15px; color: var(--pp-ink); text-decoration: none; }
.pp-macct-chev { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pp-navy); }
/* S9D-D (lock §44): the chevron rotates on the shared micro token. */
.pp-macct-chev svg { transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-macct-bar.is-open .pp-macct-chev svg { transform: rotate(180deg); }

/* S9D-D (lock §44): the mobile Account nav opens with the approved
   COMPONENT transition (grid-template-rows 0fr -> 1fr) instead of an
   instant show/hide — Account's one allowed panel motion; the surface
   still runs no page entrance.
   The panel keeps the NATIVE `hidden` attribute exactly as Account lock
   Section AC requires (removed from the accessibility tree and the tab
   order while closed, not merely visually hidden). assets/js/account.js
   removes `hidden` one frame BEFORE adding `.is-open`, and re-applies it
   only after the closing transition has finished, so `hidden` and the
   transition coexist rather than cancel each other. Reduced motion sets
   the component token to 0ms, which makes both directions instant with no
   broken intermediate state. */
.pp-macct-panel {
	border-top: 1px solid var(--pp-border);
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pp-motion-component-exit) var(--pp-ease-in);
}
.pp-macct-bar.is-open .pp-macct-panel {
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--pp-motion-component) var(--pp-ease-out);
}
.pp-macct-panel > .pp-macct-panel-inner { overflow: hidden; min-height: 0; }
/* The author-level `display: grid` above would otherwise beat the UA
   stylesheet's `[hidden] { display: none }`, leaving a closed panel
   rendered (and its links tabbable) even though the attribute says
   hidden — the exact "hidden tabbables" defect S9D-B closed on the header
   drawer. Restoring it here keeps Account lock Section AC's requirement
   true: while closed the panel is out of the accessibility tree AND the
   tab order. */
.pp-macct-panel[hidden] { display: none; }
.pp-macct-panel a, .pp-macct-panel .pp-navbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px var(--pp-space-4); font-size: 14.5px; font-weight: 500; color: var(--pp-ink); border-bottom: 1px solid var(--pp-border); background: #fff; text-align: left; font-family: inherit; }
.pp-macct-panel-inner > :last-child { border-bottom: none; }
/* S9D-D (lock §15 / §30 of the brief): ≥44px rows on true mobile — the
   padding already exceeds it; stated explicitly so a future density change
   cannot silently undercut the floor. */
.pp-macct-panel a, .pp-macct-panel .pp-navbtn { min-height: var(--pp-hit-min); }
.pp-macct-toggle { min-height: var(--pp-hit-min); }
.pp-macct-panel a.is-active { color: var(--pp-navy); font-weight: 700; background: var(--pp-navy-tint); }
.pp-macct-panel a.is-muted { color: var(--pp-secondary-text); }

/* ============================================================
   BADGES / BUTTONS / FORM PRIMITIVES
   ============================================================ */
.pp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; border: 1px solid var(--pp-border); }
.pp-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pp-badge--completed { color: var(--pp-success-text); border-color: #cdeed3; background: #f3fbf4; }
.pp-badge--processing { color: var(--pp-navy); border-color: #dbe3ee; background: #f4f6fa; }
.pp-badge--on-hold { color: #8a6d1f; border-color: #f0e2b8; background: #fdf8ea; }
.pp-badge--cancelled { color: var(--pp-secondary-text); border-color: var(--pp-border); background: var(--pp-soft-surface); }
.pp-badge--refunded { color: var(--pp-secondary-text); border-color: var(--pp-border); background: var(--pp-soft-surface); }
.pp-badge--failed { color: var(--pp-red); border-color: #f7c9c9; background: #fef4f4; }

/* Additive to design-system.css's own .pp-btn (background/shape/base
   sizing already defined there) — this file only adds the modifiers this
   surface's cards need, plus the mobile 44px touch-target floor. Scoped
   to account.css's own load surfaces (Account/Order Received/Pay for
   Order), matching the lock's Section 53 requirement without touching the
   global .pp-btn used by unrelated already-approved surfaces. */
.pp-btn-outline { background: none; color: var(--pp-ink); border-color: var(--pp-border); }
.pp-btn-link { background: none; border: none; color: var(--pp-navy); font-weight: 600; font-size: 13.5px; padding: 0; cursor: pointer; }
.pp-btn-sm { padding: 8px 14px; font-size: 12.5px; }
.pp-btn.is-confirmed { background: var(--pp-soft-surface); color: var(--pp-success-text); border-color: #cdeed3; }
/* Lock Section L/AK-3, absolute rule going forward: no size-modifier class
   may set its own mobile min-height that could outrank the shared floor.
   S9D-D-R (MINOR 3): this surface-level DUPLICATE of the foundation's
   true-mobile floor is removed. It was the same cascade defect the
   foundation fix corrects — a bare `.pp-btn` rule in a later stylesheet
   out-ranked `.pp-btn-l`, so every L button on Account, Order Received and
   Pay for Order collapsed to 44px on ≤767px. The floor now lives in exactly
   one place, design-system.css, where it is written as
   `.pp-btn:not(.pp-btn-l)` and cannot undercut the L tier. */

.pp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-4); }
.pp-field-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .pp-field-grid { grid-template-columns: 1fr; } }
.pp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--pp-space-4); }
.pp-field label { font-size: 12.5px; font-weight: 600; color: var(--pp-ink); }
.pp-field input, .pp-field select { border: 1.5px solid var(--pp-border); border-radius: var(--pp-radius-sm); padding: 12px 13px; font-size: 14.5px; color: var(--pp-ink); background: #fff; width: 100%; }
.pp-field input:focus, .pp-field select:focus { outline: none; border-color: var(--pp-ink); box-shadow: 0 0 0 1px var(--pp-ink); }
.pp-field .hint { font-size: 12px; color: var(--pp-secondary-text); }
/* CL.2B: the password-minimum line (assets/js/account.js), also under WooCommerce's own reset form, whose rows are not .pp-field. */
.pp-pw-hint { display: block; font-size: 12px; line-height: 1.5; color: var(--pp-secondary-text); }
.form-row .pp-pw-hint { margin-top: 6px; }

.pp-panel { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-5); background: #fff; }
.pp-empty { text-align: center; padding: 56px 20px; }
.pp-empty h3 { font-family: var(--pp-font-display); font-size: 19px; margin: 0 0 8px; }
.pp-empty p { color: var(--pp-secondary-text); font-size: 14px; margin: 0 0 20px; }

.pp-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--pp-secondary-surface); border-radius: var(--pp-radius-sm); font-size: 9px; color: var(--pp-secondary-text); flex: none; text-align: center; }
.pp-note-unavailable { font-size: 12px; color: var(--pp-secondary-text); font-style: italic; }
.pp-price-note { font-size: 11.5px; color: var(--pp-secondary-text); margin-top: 2px; }
/* Human-review visual issue V1 (corrected): always its own full-width
   row — never a flex item sharing the actions row's track with View
   Order/Buy Again, regardless of which of the three real contexts
   (Orders card, Order Detail, Dashboard hero) appended it. */
.pp-buyagain-notice { display: block; width: 100%; flex-basis: 100%; box-sizing: border-box; font-size: 12.5px; line-height: 1.5; margin: var(--pp-space-3) 0 0; padding: 8px 12px; border-radius: var(--pp-radius-sm); word-wrap: break-word; }
/* S9D-D-R6 (AP-7): Buy Again stays a DISTINCT compact row-level feedback
   component — it is not a WooCommerce notice-printing path and is deliberately
   not converted to `.pp-commerce-notice`, kept page-level, or given the shared
   component's geometry. Only its COLOURS converge: the raw near-miss hexes
   (#f3fbf4/#cdeed3, #fef4f4/#f7c9c9 with the bright --pp-red) are replaced by
   the semantic tokens the design system already owns, so the same semantic
   state cannot mean two slightly different colours in one product. No new
   token family was invented — both the success and the error trio already
   exist (design-system.css §tokens). Size, radius, padding and behaviour are
   unchanged. */
.pp-buyagain-notice.woocommerce-message { color: var(--pp-success-text); background: var(--pp-success-bg); border: 1px solid var(--pp-success-border); }
.pp-buyagain-notice.woocommerce-error { color: var(--pp-error-text); background: var(--pp-error-bg); border: 1px solid var(--pp-error-border); }

/* Level 1 Merchandising Signature (DESIGN.md, locked spec — same fixed
   60x3px/44+16/hard-edge token already implemented as .pp-level-1 for
   Homepage's Best Selling Products, assets/css/home-page.css) —
   reproduced verbatim under the same canonical class name here since
   home-page.css itself is not enqueued on Account surfaces. Genuine
   second legitimate curated-commerce use of this token (lock Section H),
   not a new invented one. */
.pp-level-1 { position: relative; padding-bottom: 13px; }
.pp-level-1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; border-radius: 1px; background: linear-gradient(90deg, var(--pp-navy) 0 44px, var(--pp-lime) 44px 60px); }

/* Level 2 semantic eyebrow (DESIGN.md, locked spec: "one named commercial
   or editorial moment") — Order Received IS exactly one such moment; the
   correctly-scoped token, deliberately not Level 1 (lock Section X). */
.pp-level-2 { margin-bottom: var(--pp-space-2); }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-navy); margin-bottom: 10px; }
.pp-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pp-lime); flex: none; }

/* ============================================================
   LOGIN / REGISTER — one tabbed single card at every width (lock Section
   S). Restyles WooCommerce's own real #customer_login two-column markup
   (myaccount/form-login.php) into the tabbed card; assets/js/account.js
   only toggles which panel is visible.
   ============================================================ */
.pp-auth-wrap { max-width: 460px; margin: 0 auto; }
/* S9D-D-R5 (MINOR C): on the Sign in surface the "surface" IS the 460px auth
   column, not the page measure — WooCommerce prints its notices into a sibling
   wrapper above it, which would otherwise land a 1256px notice over a 460px
   card. Keyed off the real shell rather than a body class so it applies exactly
   where that shell is used; browsers without :has() keep the page measure,
   which is the aligned, non-broken state this pass already establishes. */
/* S9D-D-R6 (AP-6): the notice takes the auth column's OWN formula — the same
   `min(460px, 100%)` the card resolves to — rather than the commerce mobile
   gutter. Where the card is centred at 460px the notice is too; where the card
   goes full-bleed below 460px the notice goes with it, so the two never
   disagree about their edges at any width. */
.woocommerce:has(> .pp-auth-wrap) .woocommerce-notices-wrapper {
	width: 100%; max-width: 460px; margin-inline: auto;
}
.pp-auth-card { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-6); }
@media (max-width: 767px) { .pp-auth-card { padding: var(--pp-space-5); } }
.pp-auth-card h2 { font-family: var(--pp-font-display); font-size: 20px; margin: 0 0 4px; }
.pp-auth-card .sub { font-size: 13px; color: var(--pp-secondary-text); margin: 0 0 var(--pp-space-5); }
.pp-auth-benefits { list-style: none; margin: 0 0 var(--pp-space-5); padding: 0; font-size: 13.5px; color: var(--pp-ink); }
.pp-auth-benefits li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-auth-benefits li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pp-navy); flex: none; }
.pp-auth-links { display: flex; justify-content: center; margin-top: var(--pp-space-4); font-size: 13px; }
.pp-auth-links a { color: var(--pp-navy); font-weight: 600; }
.pp-auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pp-border); margin-bottom: var(--pp-space-5); }
.pp-auth-tab { padding: 10px 4px; margin-right: var(--pp-space-5); font-family: var(--pp-font-display); font-weight: 600; font-size: 15px; color: var(--pp-secondary-text); background: none; border: none; border-bottom: 2.5px solid transparent; cursor: pointer; }
.pp-auth-tab.is-active { color: var(--pp-ink); border-bottom-color: var(--pp-navy); }
/* Real WooCommerce #customer_login markup restyled in place — the two
   real forms become the two tab panels, never duplicated/rebuilt. */
#customer_login { display: block; }
#customer_login .u-column1,
#customer_login .u-column2 { width: 100%; float: none; }
#customer_login h2 { display: none; }
#customer_login .form-row-first, #customer_login .form-row-last { width: 100%; float: none; }

.pp-lost-pw { max-width: 420px; margin: 40px auto; text-align: left; }
@media (max-width: 767px) { .pp-lost-pw { margin: var(--pp-space-6) auto; } }
/* S9D-D-R (MINOR 4): converged on the ONE shared page-title role (lock §11),
   like every other S9D-D-owned page title — was a local 24px. */
.pp-lost-pw h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -0.02em; margin: 0 0 8px; }
.pp-lost-pw p { color: var(--pp-secondary-text); font-size: 14px; margin: 0 0 var(--pp-space-5); }
.pp-lost-pw .woocommerce-form-row { margin-bottom: var(--pp-space-4); }
.pp-lost-pw input[type="text"] { border: 1.5px solid var(--pp-border); border-radius: var(--pp-radius-sm); padding: 12px 13px; font-size: 14.5px; width: 100%; }
.pp-lost-pw button[type="submit"] { width: 100%; }

/* ============================================================
   DASHBOARD — Buy Again hero module
   ============================================================ */
.pp-buyagain-hero { background: var(--pp-soft-surface); border-radius: var(--pp-radius-lg); padding: var(--pp-space-6); margin-top: var(--pp-space-2); }
@media (max-width: 767px) { .pp-buyagain-hero { padding: var(--pp-space-4); } }
.pp-buyagain-hero-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--pp-space-4); flex-wrap: wrap; gap: 8px; }
.pp-buyagain-hero-head h2 { font-family: var(--pp-font-display); font-weight: 600; font-size: 19px; margin: 0; }
.pp-buyagain-hero-items { display: flex; gap: var(--pp-space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--pp-space-5); }
.pp-buyagain-hero-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); padding: 8px 14px 8px 8px; }
.pp-buyagain-hero-item img, .pp-buyagain-hero-item .pp-acct-packshot, .pp-buyagain-hero-item .pp-thumb-placeholder { width: 48px; height: 48px; }
.pp-buyagain-hero-item .t { font-size: 13px; font-weight: 600; }
.pp-buyagain-hero-item .m { font-size: 11.5px; color: var(--pp-secondary-text); }
.pp-buyagain-hero-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pp-buyagain-hero-foot .total { font-size: 13px; color: var(--pp-secondary-text); }
.pp-buyagain-hero-foot .total strong { color: var(--pp-ink); font-size: 16px; }
@media (max-width: 480px) { .pp-buyagain-hero-foot { flex-direction: column; align-items: stretch; } .pp-buyagain-hero-foot .pp-btn { width: 100%; } }

.pp-section-head { margin: var(--pp-space-7) 0 var(--pp-space-4); }
@media (max-width: 767px) { .pp-section-head { margin: var(--pp-space-6) 0 var(--pp-space-3); } }
.pp-section-head h2 { font-family: var(--pp-font-display); font-weight: 600; font-size: 19px; margin: 0; }

.pp-acct-tile-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--pp-space-4); margin-top: var(--pp-space-7); }
@media (max-width: 640px) { .pp-acct-tile-row { grid-template-columns: 1fr; margin-top: var(--pp-space-5); } }
.pp-acct-tile { background: var(--pp-soft-surface); border-radius: var(--pp-radius-lg); padding: var(--pp-space-4) var(--pp-space-5); }
.pp-acct-tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-secondary-text); margin-bottom: 6px; }
.pp-acct-tile .v { font-family: var(--pp-font-display); font-weight: 600; font-size: 15px; }

/* ============================================================
   ORDERS — HYBRID CARD (lock Section K/L)
   No nested per-line "chip" boxes (Section K, architectural correction
   from S8B): a single thumbnail strip directly inside the card, one
   compact header row, one compact footer row.
   ============================================================ */
.pp-order-card { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); padding: var(--pp-space-4) var(--pp-space-5); margin-bottom: var(--pp-space-3); }
.pp-order-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--pp-space-3); flex-wrap: wrap; margin-bottom: var(--pp-space-3); }
.pp-order-card-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-order-card-id .num { font-family: var(--pp-font-display); font-weight: 600; font-size: 15.5px; }
.pp-order-card-id .date { font-size: 12.5px; color: var(--pp-secondary-text); }
.pp-order-card-body { display: flex; align-items: center; gap: var(--pp-space-4); flex-wrap: wrap; }
/* Packshots side by side with a real visible gap — never stacked/
   overlapping (lock Section M, a real found-and-fixed defect: a negative-
   margin overlap treatment made PouchPick's strong-individual-identity
   cans harder to tell apart). 7px desktop / 5px mobile. Orders with more
   line items than fit show a "+N" chip instead of stacking further cans. */
.pp-order-thumbs { display: flex; gap: 7px; flex: none; }
.pp-order-thumbs img, .pp-order-thumbs .pp-acct-packshot, .pp-order-thumbs .pp-thumb-placeholder, .pp-order-thumbs .pp-thumb-more { width: 44px; height: 44px; border-radius: var(--pp-radius-sm); }
.pp-order-thumbs .pp-thumb-more { display: flex; align-items: center; justify-content: center; background: var(--pp-secondary-surface); color: var(--pp-secondary-text); font-size: 12px; font-weight: 700; }
@media (max-width: 767px) { .pp-order-thumbs { gap: 5px; } }
.pp-order-card-meta { font-size: 12.5px; color: var(--pp-secondary-text); flex: 1; min-width: 120px; }
.pp-order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-space-3); margin-top: var(--pp-space-4); flex-wrap: wrap; }
.pp-order-card-total { font-weight: 700; font-size: 15.5px; }
.pp-order-card-actions { display: flex; gap: 8px; }

@media (max-width: 767px) {
	.pp-order-card { padding: var(--pp-space-4); }
	.pp-order-card-body { align-items: flex-start; }
	.pp-order-thumbs img, .pp-order-thumbs .pp-acct-packshot, .pp-order-thumbs .pp-thumb-placeholder { width: 46px; height: 46px; }
	.pp-order-card-foot { flex-direction: column; align-items: stretch; }
	.pp-order-card-actions { width: 100%; }
	.pp-order-card-actions .pp-btn { flex: 1; }
}

/* ============================================================
   ORDER DETAIL — restrained hybrid, mobile-safe price separation
   ============================================================ */
.pp-detail-line { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--pp-border); align-items: center; flex-wrap: wrap; }
.pp-detail-line img, .pp-detail-line .pp-acct-packshot, .pp-detail-line .pp-thumb-placeholder { width: 52px; height: 52px; }
.pp-detail-line-body { flex: 1; min-width: 160px; }
.pp-detail-line-title { font-size: 14px; font-weight: 600; }
.pp-detail-line-meta { font-size: 12px; color: var(--pp-secondary-text); }
.pp-detail-line-price { font-weight: 700; font-size: 14px; flex: none; margin-left: auto; }
@media (max-width: 420px) {
	.pp-detail-line { align-items: flex-start; }
	.pp-detail-line-price { width: 100%; margin-left: 0; padding-left: 66px; font-size: 13.5px; }
}
/* Real per-item WooCommerce meta (independent review finding M3,
   pp_get_order_item_meta_html()) — a restrained secondary line, never
   allowed to break this card's fixed row layout. WooCommerce's own
   .wc-item-meta <ul><li> structure is kept (never renamed), just reset
   to plain restrained text here. Default WC bundled styles are dequeued
   on Checkout-family pages (is_checkout(), inc/checkout.php) but NOT on
   the real View Order account page, so this rule is the one place that
   makes the two contexts consistent rather than relying on WooCommerce's
   own un-dequeued default list styling on one of them only. */
.pp-detail-line-itemmeta { flex-basis: 100%; margin-top: 2px; }
.pp-detail-line-itemmeta .wc-item-meta { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--pp-secondary-text); }
.pp-detail-line-itemmeta .wc-item-meta-label { font-weight: 600; }
.pp-totals-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.pp-totals-row.pp-totals-row--total { font-weight: 700; font-size: 17px; border-top: 1.5px solid var(--pp-ink); margin-top: 8px; padding-top: 14px; }
.pp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-6); margin-top: var(--pp-space-6); background: var(--pp-soft-surface); border-radius: var(--pp-radius-lg); padding: var(--pp-space-5); }
@media (max-width: 640px) { .pp-detail-grid { grid-template-columns: 1fr; gap: var(--pp-space-4); padding: var(--pp-space-4); } }
.pp-detail-grid h4 { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pp-secondary-text); margin: 0 0 8px; }
.pp-detail-grid address, .pp-detail-grid p { font-style: normal; font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ============================================================
   ADDRESSES — restyles the real woocommerce-Addresses markup
   ============================================================ */
.pp-addr-grid.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-4); }
@media (max-width: 640px) { .pp-addr-grid.u-columns { grid-template-columns: 1fr; } }
.pp-addr-grid .woocommerce-Address { width: 100%; float: none; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-5); background: #fff; }
.pp-addr-grid .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.pp-addr-grid .woocommerce-Address-title h2 { font-family: var(--pp-font-display); font-size: 15.5px; margin: 0; }
.pp-addr-grid .woocommerce-Address-title .edit { font-size: 13.5px; font-weight: 600; color: var(--pp-navy); }
/* S9D-D-R (MINOR 2): Edit / Add is a governed action — and the only way to
   edit or add an address — so it takes a real ≥44×44 box on true mobile
   (lock §15). A real box, not an absolutely-positioned pseudo: flex layout
   then reserves the space, so the target can never overlap the card
   heading. The label keeps its 13.5px type and stays visually right-aligned
   inside the larger box; the header row centres so the heading and the
   action share one baseline. */
@media (max-width: 767px) {
	.pp-addr-grid .woocommerce-Address-title { align-items: center; }
	.pp-addr-grid .woocommerce-Address-title .edit {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		min-width: var(--pp-hit-min);
		min-height: var(--pp-hit-min);
		padding-inline-start: var(--pp-space-3);
		flex: none;
	}
}
.pp-addr-grid address { font-style: normal; font-size: 13.5px; line-height: 1.6; }

.pp-edit-address-panel { max-width: 640px; }
.pp-edit-address-panel .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-4); }
@media (max-width: 560px) { .pp-edit-address-panel .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } }
.pp-edit-address-panel .form-row-wide,
.pp-edit-address-panel .form-row-first.address-field,
.pp-edit-address-panel #billing_address_1_field,
.pp-edit-address-panel #billing_address_2_field,
.pp-edit-address-panel #shipping_address_1_field,
.pp-edit-address-panel #shipping_address_2_field,
.pp-edit-address-panel #billing_country_field,
.pp-edit-address-panel #shipping_country_field { grid-column: 1 / -1; }
.pp-edit-address-panel .form-row { margin-bottom: 0; }
.pp-edit-address-panel label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.pp-edit-address-panel input, .pp-edit-address-panel select { border: 1.5px solid var(--pp-border); border-radius: var(--pp-radius-sm); padding: 12px 13px; font-size: 14.5px; width: 100%; }
.pp-edit-address-panel .select2-container { width: 100% !important; }
.pp-edit-address-panel button[type="submit"] { margin-top: var(--pp-space-4); }

/* ============================================================
   ORDER RECEIVED — content (lock Section X)
   Same vertical-only rule as .pp-acct-shell above — always combined with
   .pp-acct-container on the same element; must never zero horizontal
   padding via a 3-value shorthand.
   ============================================================ */
.pp-orx-wrap { max-width: 720px; margin: 0 auto; padding-top: 48px; padding-bottom: 96px; }
@media (max-width: 767px) { .pp-orx-wrap { padding-top: var(--pp-space-6); padding-bottom: 72px; } }
.pp-orx-wrap h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; }   /* S9D-D: the shared page-title role (lock §11) */

/* ---- The ONE approved one-shot entrance (lock §43) ----
   eyebrow -> heading -> summary card, small fade + 6px rise, ~240ms on the
   decelerate curve, 60ms stagger, once. Nothing below the card animates
   (addresses, actions, legal, customer information stay static), and the
   eyebrow's Lime dot rides its own block rather than animating on its own
   (Account lock Section X). `both` keeps the pre-animation state applied
   so nothing flashes at full opacity first. */
@keyframes pp-orx-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pp-orx-enter > .pp-enter-1,
.pp-orx-enter > .pp-enter-2,
.pp-orx-enter > .pp-enter-3 { animation: pp-orx-enter var(--pp-motion-entrance) var(--pp-ease-out) both; }
.pp-orx-enter > .pp-enter-2 { animation-delay: var(--pp-motion-stagger); }
.pp-orx-enter > .pp-enter-3 { animation-delay: calc(var(--pp-motion-stagger) * 2); }
/* Reduced motion: no entrance at all — the content is simply present
   (lock §43 / §41). */
@media (prefers-reduced-motion: reduce) {
	.pp-orx-enter > .pp-enter-1,
	.pp-orx-enter > .pp-enter-2,
	.pp-orx-enter > .pp-enter-3 { animation: none; }
}
.pp-orx-wrap .lede { color: var(--pp-secondary-text); font-size: 15px; margin: 0 0 var(--pp-space-6); }
.pp-orx-summary { border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: var(--pp-space-5); margin-bottom: var(--pp-space-5); }
@media (max-width: 767px) { .pp-orx-summary { padding: var(--pp-space-4); } }
.pp-orx-summary-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--pp-space-4); margin-bottom: var(--pp-space-4); border-bottom: 1px solid var(--pp-border); flex-wrap: wrap; gap: 6px; }
.pp-orx-summary-head .num { font-family: var(--pp-font-display); font-weight: 600; font-size: 18px; }
.pp-orx-summary-head .meta { font-size: 12.5px; color: var(--pp-secondary-text); }
.pp-orx-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-5); margin-bottom: var(--pp-space-6); }
@media (max-width: 560px) { .pp-orx-addr-grid { grid-template-columns: 1fr; gap: var(--pp-space-4); } }
.pp-orx-addr-grid h4 { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pp-secondary-text); margin: 0 0 8px; }
.pp-orx-addr-grid address, .pp-orx-addr-grid p { font-style: normal; font-size: 13.5px; line-height: 1.6; margin: 0; }
.pp-orx-actions-row { display: flex; gap: var(--pp-space-3); flex-wrap: wrap; }
@media (max-width: 480px) { .pp-orx-actions-row { flex-direction: column; } .pp-orx-actions-row .pp-btn { width: 100%; } }
.pp-orx-below { margin-top: var(--pp-space-7); padding-top: var(--pp-space-6); border-top: 1px solid var(--pp-border); font-size: 13px; color: var(--pp-secondary-text); }
.pp-orx-below a { color: var(--pp-navy); font-weight: 600; }
@media (max-width: 767px) { .pp-orx-below { margin-top: var(--pp-space-6); padding-top: var(--pp-space-5); } }

/* ============================================================
   ORDER RECEIVED / PAY FOR ORDER — REAL WOOCOMMERCE FALLBACK /
   ACCESS-GATE STATES (independent review finding M1, plus the same real
   gate discovered live on Pay for Order while re-testing M2/M3 — WC_
   Shortcode_Checkout::order_pay() has its own equivalent
   current_user_can('pay_for_order')-gated login prompt, same template).
   Real core renders these legitimate states with NO thankyou.php/
   form-pay.php wrapper reached at all — an invalid/guessed order id or
   key, a registered customer's order viewed from the wrong session
   (followed by the real global/form-login.php — left as a template,
   shared with Checkout's own login reminder, so it is restyled here via
   the real body.woocommerce-order-received / body.woocommerce-order-pay
   classes rather than touched globally), and a guest order requiring
   email verification (followed by this theme's own
   checkout/form-verify-email.php override).
   DOM note (found live, corrected): the checkout shortcode's own real
   output wraps all of this in a `<div class="woocommerce">` — these are
   NOT direct children of #pp-main, so plain descendant selectors are
   used below rather than a `>` combinator that quietly never matched.
   ============================================================ */
.pp-orx-fallback-head { max-width: 720px; padding-top: 48px; padding-bottom: 0; }
@media (max-width: 767px) { .pp-orx-fallback-head { padding-top: var(--pp-space-6); } }
/* S9D-D-R2 (MINOR B): the Order Received login / e-mail-verification
   fallback title joins the same shared page-title role — its own
   clamp(24px, 3.4vw, 32px) resolved to ~32px desktop / ~24px mobile, outside
   the locked 28/26 system. Shell structure unchanged. */
.pp-orx-fallback-head h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -0.02em; margin: 0 0 6px; }
.pp-orx-fallback-action { max-width: 460px; padding-top: var(--pp-space-6); padding-bottom: 96px; }
@media (max-width: 767px) { .pp-orx-fallback-action { padding-bottom: 72px; } }

/* Real wc_print_notice() output on the two post-purchase surfaces —
   notices/notice.php (.woocommerce-info), notices/success.php
   (.woocommerce-message), notices/error.php (.woocommerce-error, a real
   <ul role="alert">) — never renamed.

   S9D-D-R5 (MINOR B): the VISUAL band this block used to paint — its own
   background, border, radius, padding, font-size and `display: block` — is
   retired. Those properties are now owned by the one shared
   `.pp-commerce-notice` component (design-system.css), and this rule was
   silently out-ranking it, so Pay for Order still rendered the old
   green-tinted 6px-radius band instead of the approved grammar. What
   remains here is only what genuinely belongs to these two surfaces: the
   narrow post-purchase measure and their own spacing/gutter. Order and
   payment semantics are untouched. */
/* S9D-D-R6 (AP-5): the 460px measure belongs to the post-purchase notice
   COLUMN, not to each notice. Carrying `max-width` + `margin-inline: auto` on
   every notice made each one shrink-wrap its own text inside the flex column
   (auto inline margins cancel the stack's `align-items: stretch`), so a short
   success sat at ~262px beside a 460px info — ragged, and reading as several
   components rather than one. The stack and the error root — the two real
   print roots, since notices/error.php renders its own <ul> — now own the
   measure; their children simply fill it. */
body.woocommerce-order-received #pp-main .pp-notice-stack,
body.woocommerce-order-received #pp-main .woocommerce-error,
body.woocommerce-order-pay #pp-main .pp-notice-stack,
body.woocommerce-order-pay #pp-main .woocommerce-error {
	width: 100%; max-width: 460px; margin: var(--pp-space-6) auto 0;
}
body.woocommerce-order-received #pp-main .pp-notice-stack .pp-commerce-notice,
body.woocommerce-order-pay #pp-main .pp-notice-stack .pp-commerce-notice {
	width: auto; max-width: none; margin-inline: 0;
}
@media (max-width: 767px) {
	body.woocommerce-order-received #pp-main .pp-notice-stack,
	body.woocommerce-order-received #pp-main .woocommerce-error,
	body.woocommerce-order-pay #pp-main .pp-notice-stack,
	body.woocommerce-order-pay #pp-main .woocommerce-error {
		width: calc(100% - 2 * var(--pp-acct-mobile-gutter)); max-width: none; margin-inline: auto;
	}
}

/* The real registered-customer/pay_for_order login gate —
   woocommerce/global/form-login.php, untouched as a template (Checkout's
   own login reminder shares it) — restyled only in these two real,
   precise page contexts. */
body.woocommerce-order-received #pp-main .woocommerce-form-login,
body.woocommerce-order-pay #pp-main .woocommerce-form-login {
	max-width: 460px; margin: var(--pp-space-4) auto 96px; padding: var(--pp-space-6);
	border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg);
}
@media (max-width: 767px) {
	body.woocommerce-order-received #pp-main .woocommerce-form-login,
	body.woocommerce-order-pay #pp-main .woocommerce-form-login { margin-left: var(--pp-acct-mobile-gutter); margin-right: var(--pp-acct-mobile-gutter); padding: var(--pp-space-5); margin-bottom: 72px; }
}
body.woocommerce-order-received #pp-main .woocommerce-form-login .form-row,
body.woocommerce-order-pay #pp-main .woocommerce-form-login .form-row { margin-bottom: var(--pp-space-4); }
body.woocommerce-order-received #pp-main .woocommerce-form-login label,
body.woocommerce-order-pay #pp-main .woocommerce-form-login label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
body.woocommerce-order-received #pp-main .woocommerce-form-login input[type="text"],
body.woocommerce-order-received #pp-main .woocommerce-form-login input[type="password"],
body.woocommerce-order-pay #pp-main .woocommerce-form-login input[type="text"],
body.woocommerce-order-pay #pp-main .woocommerce-form-login input[type="password"] {
	border: 1.5px solid var(--pp-border); border-radius: var(--pp-radius-sm); padding: 12px 13px; font-size: 14.5px; width: 100%;
}
body.woocommerce-order-received #pp-main .woocommerce-form-login .woocommerce-form-login__submit,
body.woocommerce-order-pay #pp-main .woocommerce-form-login .woocommerce-form-login__submit {
	background: var(--pp-navy); color: #fff; border: none; border-radius: var(--pp-radius-md); font-weight: 700; font-size: 14px; padding: 12px 20px; cursor: pointer; width: 100%; margin-top: 4px;
}
body.woocommerce-order-received #pp-main .woocommerce-form-login .lost_password,
body.woocommerce-order-pay #pp-main .woocommerce-form-login .lost_password { margin: var(--pp-space-3) 0 0; font-size: 13px; text-align: center; }
body.woocommerce-order-received #pp-main .woocommerce-form-login .lost_password a,
body.woocommerce-order-pay #pp-main .woocommerce-form-login .lost_password a { color: var(--pp-navy); font-weight: 600; }

/* ============================================================
   PAY FOR ORDER — honest zero-state body (lock Section Z/38)
   Reuses the real .wc_payment_methods gateway-list styling already
   locked for Checkout (assets/css/checkout.css .pp-checkout-gateway-list)
   — this file only adds the narrow content-column wrapper.
   ============================================================ */
.pp-pfo-wrap { max-width: 640px; margin: 0 auto; padding: 48px var(--pp-space-6) 96px; }
@media (max-width: 640px) { .pp-pfo-wrap { padding: var(--pp-space-6) var(--pp-space-4) 72px; } }
/* S9D-D-R2 (MINOR B): Pay for Order's title joins the ONE shared page-title
   role (lock §11, --pp-text-page-title) — it was a fixed 26px, 2px under the
   shared desktop size. Barlow role, weight, line-height, spacing and the
   reduced shell composition are unchanged; no new font-size literal. */
.pp-pfo-wrap h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -0.02em; margin: 0 0 6px; }
.pp-pfo-wrap > p.sub { color: var(--pp-secondary-text); font-size: 14px; margin: 0 0 var(--pp-space-6); }
.pp-pfo-summary { display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: 700; }
.pp-pfo-panel + .pp-pfo-panel { margin-top: var(--pp-space-5); }


/* =========================================================================
 * S9D-D — SHARED PACKSHOT ON ACCOUNT / POST-PURCHASE THUMBS (lock §24)
 *
 * `pp_render_packshot()` renders the one `.pp-packshot` component
 * (design-system.css) so a can reads at the same apparent scale in an Orders
 * card, an Order Detail line and the Order Received summary as it does on
 * the Homepage, PLP, PDP and Cart. Only the box size differs per context
 * (set above, alongside the placeholder each context already had).
 * ====================================================================== */
.pp-acct-packshot { display: flex; flex: none; }

/* S9D-D: the back actions on Order Detail / Addresses / Lost password use
   the shared inline-SVG arrow (lock §18) instead of a raw ← glyph, mirror
   correctly under [dir="rtl"], and carry a ≥44px effective hit area on true
   mobile (lock §15). */
.pp-acct-back { display: inline-flex; align-items: center; gap: 6px; color: var(--pp-navy); font-weight: 600; }
@media (max-width: 767px) { .pp-acct-back { min-height: var(--pp-hit-min); } }

/* =========================================================================
 * S9D-D — ONE-CARD LOGIN (GLOBAL-COMMERCE-POLISH-LOCK.md §44)
 *
 * WooCommerce's own bundled woocommerce.css paints `.woocommerce form.login`
 * / `form.register` with its own border, padding and 5px radius, which drew
 * a second card INSIDE PouchPick's auth card (S9A F5a). Corrected with a
 * scoped override on WooCommerce's own real classes — never by renaming
 * them, and deliberately NOT by dequeuing WooCommerce's default stylesheets
 * on Account: that asset-policy decision is an explicit human item
 * (lock §52 / §53) and dequeuing here would silently change every other
 * WooCommerce-rendered Account control at the same time.
 * ====================================================================== */
.pp-auth-card .woocommerce form.login,
.pp-auth-card .woocommerce form.register,
.pp-auth-card form.woocommerce-form-login,
.pp-auth-card form.woocommerce-form-register {
	border: 0;
	padding: 0;
	border-radius: 0;
	margin: 0;
}

/* =========================================================================
 * S9D-D — ≥44px EFFECTIVE TRUE-MOBILE HIT AREAS (lock §15 / §44 / §50)
 *
 * Measured on the real rendered surfaces at 767 / 430 / 393 / 360, not
 * assumed from source. Visual type sizes and the layout are unchanged —
 * only the hit area grows.
 *
 * Deliberately NOT listed here: the inline title link inside a cart/order
 * line item, which lock §15 exempts explicitly ("duplicate-destination
 * inline title links inside a line item are covered by the adjacent ≥64px
 * packshot link"), and inline links inside a sentence (the privacy /
 * "Already have an account? Sign in" prose), which §15's enumerated
 * control list does not govern and which cannot take a block hit area
 * without breaking the sentence.
 * ====================================================================== */
@media (max-width: 767px) {
	.pp-auth-tab { min-height: var(--pp-hit-min); }
	.pp-auth-links a { display: inline-flex; align-items: center; min-height: var(--pp-hit-min); padding-inline: 8px; }
	/* WooCommerce's own password-reveal control — normalized through a
	   scoped rule on its real class (lock §12), never renamed or removed. */
	.pp-auth-card .show-password-input,
	.pp-acct-container .show-password-input { position: relative; }
	.pp-auth-card .show-password-input::after,
	.pp-acct-container .show-password-input::after {
		content: ""; position: absolute; top: 50%; left: 50%;
		width: max(100%, var(--pp-hit-min)); height: max(100%, var(--pp-hit-min));
		transform: translate(-50%, -50%);
	}
}
/* UI.2A — the same control's glyph: the theme's Tabler pair (account.js adds
   .pp-pw-toggle to every WooCommerce reveal button on the account pages —
   sign-in, account details, password reset) replaces WooCommerce's data-URI
   drawing inside the unchanged 22px button — eye-off while the password is
   hidden, eye once WooCommerce marks it .display-password (its own state
   convention). 22px — the button's full box, so the glyph keeps the optical
   size of the drawing it replaces — stroke 1.75, Ink (the drawing's own
   #111); WooCommerce keeps the click, label and type. Scoped like
   WooCommerce's own `.woocommerce form .show-password-input` rules, one
   class stronger. */
.woocommerce-page form .show-password-input.pp-pw-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--pp-ink); }
.woocommerce-page form .show-password-input.pp-pw-toggle::before { display: none; }
.pp-pw-toggle .pp-pw-i { width: 22px; height: 22px; flex: none; }
.pp-pw-toggle .pp-pw-i--shown,
.pp-pw-toggle.display-password .pp-pw-i--hidden { display: none; }
.pp-pw-toggle.display-password .pp-pw-i--shown { display: block; }