/*
 * CL.2 PouchPick Club — the public Club page (template-club.php), My Club
 * (woocommerce/myaccount/club.php), the account's Club summary row and the
 * Club fields on Create account.
 *
 * Port of the approved CL.1R lab layer (~/Documents/PouchPick-Labs/design/
 * pouchpick-club-cl1/rewards-r1/club/css/club.css, `.clx-*`) to PouchPick-
 * owned `.pp-club-*` classes on the production tokens. Lab-only parts
 * (ribbon, illustrative markers, lab panel, dialogs, the Subscribe & Save
 * demo builder) are not ported.
 *
 * Colour rules (DESIGN.md, GLOBAL-COMMERCE-POLISH-LOCK §5, Account lock §N):
 *   - Navy is the only action colour; Lime is never a CTA, success state,
 *     status or progress fill.
 *   - Lime appears only as the public hero's eyebrow dot and in the brand
 *     wordmark on the member card. The account (My Club) carries no Lime.
 *   - Points and level progress are Navy on light (never a Lime meter).
 *   - Green = genuinely available / earned; amber = needs attention;
 *     red = error; navy tint = information.
 */

.pp-club {
	--pp-club-max: 1280px;
	--pp-club-radius: 16px;
	--pp-club-shadow-card: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px -12px rgba(11, 29, 56, .18);
	font-family: var(--pp-font-body);
	color: var(--pp-ink);
}

/* =====================================================================
 * 1. PUBLIC PAGE — layout + type (Inter headings: the HD.1 Coming Soon grammar)
 * ================================================================== */
.pp-club-wrap { max-width: var(--pp-club-max); margin: 0 auto; padding-inline: var(--pp-gutter); }
.pp-club-sec { padding-block: 88px; }
.pp-club-sec--tight { padding-block: 64px; }
.pp-club-sec--soft { background: var(--pp-soft-surface); }
.pp-club-sec--line { border-top: 1px solid var(--pp-border); }
.pp-club-dark { background: var(--pp-navy-chrome); color: #fff; }
.pp-club-h1 { margin: 0 0 18px; font: 700 clamp(40px, 5vw, 62px)/1.03 var(--pp-font-body); letter-spacing: -.03em; text-wrap: balance; }
.pp-club-h2 { margin: 0 0 12px; font: 700 clamp(28px, 2.9vw, 38px)/1.1 var(--pp-font-body); letter-spacing: -.024em; text-wrap: balance; }
.pp-club-h3 { margin: 0 0 8px; font: 650 19px/1.3 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-lead { margin: 0; font: 400 18px/1.6 var(--pp-font-body); color: var(--pp-secondary-text); max-width: 640px; }
.pp-club-dark .pp-club-lead { color: rgba(255, 255, 255, .74); }
.pp-club-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 40px; }
.pp-club-head > div { max-width: 720px; }
.pp-club-kicker { display: block; margin-bottom: 14px; font: 700 12px/1 var(--pp-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-secondary-text); }

/* Level-2 semantic eyebrow (DESIGN.md: one named moment) — the page's one Lime dot. */
.pp-club-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 700 12.5px/1 var(--pp-font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.pp-club-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-lime); }

.pp-club-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; font: 500 13px/1.3 var(--pp-font-body); color: rgba(255, 255, 255, .5); }
.pp-club-crumb a { color: rgba(255, 255, 255, .72); }
.pp-club-crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pp-club-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pp-club-btn-hero { min-height: 52px; padding-inline: 24px; border-radius: 10px; font-size: 15.5px; }
.pp-club-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font: 600 15px/1.2 var(--pp-font-body); color: var(--pp-navy); }
.pp-club-link .pp-i { width: 16px; height: 16px; }
.pp-club-dark .pp-club-link { color: #fff; }
.pp-club-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* Test configuration strip (Staging review only: Core never lets a test programme go live in production). */
.pp-club-testcfg { background: var(--pp-amber-bg); border-bottom: 1px solid var(--pp-amber-border); color: #5f4a13; }
.pp-club-testcfg .pp-club-wrap { display: flex; align-items: flex-start; gap: 10px; padding-block: 12px; font-size: 13.5px; line-height: 1.5; }
.pp-club-testcfg .pp-i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pp-amber-text); }
.pp-club-testcfg strong { font-weight: 650; }

/* ---------------------------------------------------------------- hero */
.pp-club-hero { position: relative; overflow: hidden; }
.pp-club-hero::before {
	/* a quiet structural light — no artwork, no characters */
	content: ""; position: absolute; inset: -40% -10% auto auto; width: 900px; height: 900px; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(73, 112, 168, .22), rgba(73, 112, 168, 0)); pointer-events: none;
}
.pp-club-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; align-items: center; padding-block: 72px 96px; }
.pp-club-hero-copy .pp-club-lead { margin-bottom: 26px; }
/* CL.2R FINAL: the welcome offer, said once — the points, their reward value, and what it takes. */
.pp-club-offer { margin: 0 0 26px; max-width: 620px; }
.pp-club-offer-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: rgba(255, 255, 255, .07); font: 700 21px/1.3 var(--pp-font-body); letter-spacing: -.01em; color: #fff; }
.pp-club-offer-v b { font-weight: 700; }
.pp-club-offer-val { display: inline-flex; gap: 10px; font-weight: 500; color: rgba(255, 255, 255, .84); }
.pp-club-offer-v i { font-style: normal; color: rgba(255, 255, 255, .5); }
.pp-club-offer-note { margin: 10px 0 0; font: 400 14px/1.5 var(--pp-font-body); color: rgba(255, 255, 255, .7); text-wrap: pretty; }
.pp-club-hero-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 620px; }
.pp-club-hero-points li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 500 15px/1.45 var(--pp-font-body); color: rgba(255, 255, 255, .9); }
.pp-club-hero-points li span { text-wrap: pretty; }
.pp-club-hero-points .pp-i { width: 18px; height: 18px; margin-top: 2px; color: #fff; }
.pp-club-hero-note { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 13px/1.4 var(--pp-font-body); color: rgba(255, 255, 255, .58); }
.pp-club-hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.pp-club-hero-note .pp-i { width: 16px; height: 16px; color: rgba(255, 255, 255, .8); }

/* Member card — a deliberate brand surface (CSS only; the logo is the production lime wordmark). */
.pp-club-cardstage { position: relative; display: grid; place-items: center; min-height: 380px; perspective: 1200px; }
.pp-club-mcard {
	position: relative; width: min(100%, 440px); aspect-ratio: 1.586; border-radius: 22px; padding: 26px 28px;
	display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #1D406D 0%, #142F51 46%, #0D2140 100%);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 2px 0 rgba(255, 255, 255, .06) inset;
	transform: rotate(-3deg);
	transition: transform var(--pp-motion-overlay) var(--pp-ease-out);
}
.pp-club-mcard::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 12px);
	mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
}
@media (hover: hover) { .pp-club-cardstage:hover .pp-club-mcard { transform: rotate(calc(-3deg + var(--pp-tilt))) translateY(-4px); } }
.pp-club-mcard-back {
	position: absolute; width: min(100%, 440px); aspect-ratio: 1.586; border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transform: rotate(5deg) translate(26px, 18px);
}
.pp-club-mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.pp-club-mcard-top img { height: 26px; width: auto; display: block; }
.pp-club-mcard-club { font: 700 11px/1 var(--pp-font-body); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pp-club-mcard-mid { align-self: center; position: relative; z-index: 1; }
.pp-club-mcard-name { font: 650 22px/1.2 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-mcard-since { margin-top: 4px; font: 500 12.5px/1.3 var(--pp-font-body); color: rgba(255, 255, 255, .62); }
.pp-club-mcard-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.pp-club-mcard-k { font: 600 11px/1 var(--pp-font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 6px; }
.pp-club-mcard-v { font: 700 24px/1 var(--pp-font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-club-mcard-tier { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34); font: 650 12.5px/1 var(--pp-font-body); }

/* Signed-in member: the live preview in place of the card. */
.pp-club-preview { position: relative; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.pp-club-preview-in { border-radius: 14px; background: #fff; color: var(--pp-ink); padding: 18px; display: grid; gap: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.pp-club-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--pp-soft-surface); font-size: 13.5px; }
.pp-club-preview-row b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shared blocks */
.pp-club-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--pp-navy); box-shadow: 0 1px 2px rgba(17, 17, 17, .06); }
.pp-club-ic .pp-i { width: 24px; height: 24px; }
.pp-club-fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--pp-secondary-text); }
.pp-club-muted { color: var(--pp-secondary-text); }
.pp-club-small { font-size: 13px; line-height: 1.5; }
.pp-club-strong { font-weight: 600; color: var(--pp-navy); }
.pp-club-gap { margin-top: 12px; }
.pp-club-flush { margin: 0 0 12px; }

/* Availability badges: Available / On now (green) · Coming soon (navy tint) */
.pp-club-av { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 650 11.5px/1 var(--pp-font-body); white-space: nowrap; vertical-align: middle; border: 1px solid var(--pp-border); background: #fff; color: var(--pp-secondary-text); }
.pp-club-av i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pp-club-av--now { color: var(--pp-success-text); border-color: #cdeed3; background: #f3fbf4; }
.pp-club-av--soon { color: var(--pp-navy); border-color: #dbe3ee; background: #f4f6fa; }

/* Three steps */
.pp-club-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pp-border); }
.pp-club-step { position: relative; padding: 28px 28px 0 0; }
.pp-club-step + .pp-club-step { padding-inline-start: 28px; border-inline-start: 1px solid var(--pp-border); }
.pp-club-step-n { display: block; margin-bottom: 26px; font: 700 15px/1 var(--pp-font-body); color: var(--pp-navy); font-variant-numeric: tabular-nums; }
.pp-club-step h3 { margin: 0 0 8px; font: 700 18px/1.3 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pp-secondary-text); }

/* Split band + check list */
.pp-club-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pp-club-split--top { align-items: start; }
.pp-club-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.pp-club-checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.pp-club-checks .pp-i { width: 20px; height: 20px; margin-top: 2px; color: var(--pp-navy); }
.pp-club-checks b { font-weight: 650; }

/* Example points history (welcome bonus) */
.pp-club-ledger { border-radius: 20px; background: #fff; border: 1px solid var(--pp-border); box-shadow: var(--pp-club-shadow-card); overflow: hidden; }
.pp-club-ledger-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--pp-border); font-size: 13px; }
.pp-club-ledger-h strong { font: 700 16px/1.3 var(--pp-font-body); }
.pp-club-lrow { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 14px 22px; }
.pp-club-lrow + .pp-club-lrow { border-top: 1px solid var(--pp-border); }
.pp-club-lrow-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pp-soft-surface); color: var(--pp-navy); }
.pp-club-lrow-ic .pp-i { width: 18px; height: 18px; }
.pp-club-lrow-t { font: 600 14px/1.35 var(--pp-font-body); }
.pp-club-lrow-d { font-size: 12.5px; line-height: 1.4; color: var(--pp-secondary-text); }
.pp-club-pts { font: 700 15px/1 var(--pp-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-club-pts--plus { color: var(--pp-success-text); }
.pp-club-pts--minus { color: var(--pp-ink); }
.pp-club-pts--rev { color: var(--pp-error-text); }
.pp-club-pts--muted { color: var(--pp-secondary-text); font-weight: 600; font-size: 13px; }

/* Tiles (Ways to earn, My Club access) */
.pp-club-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-club-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1101px) { #club-earn .pp-club-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-club-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--pp-club-radius); background: var(--pp-soft-surface); min-height: 200px; }
.pp-club-tile--white { background: #fff; border: 1px solid var(--pp-border); }
.pp-club-tile--white .pp-club-ic { background: var(--pp-navy-tint); box-shadow: none; }
.pp-club-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pp-club-tile h3 { margin: 6px 0 0; font: 700 18.5px/1.25 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-tile p { margin: 0; color: var(--pp-secondary-text); font-size: 15px; line-height: 1.55; }
.pp-club-tile .pp-club-tile-v { font: 700 17px/1.35 var(--pp-font-body); color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-club-tile .pp-club-link { margin-top: auto; }
.pp-club-tile .pp-club-av { align-self: flex-start; margin-top: auto; }
.pp-club-tile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-club-tile-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--pp-secondary-text); }
.pp-club-tile-list b { color: var(--pp-ink); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-club-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Use your points */
.pp-club-use { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pp-border); }
.pp-club-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.pp-club-subhead p { margin: 0; font-size: 15px; color: var(--pp-secondary-text); }
.pp-club-rewardrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pp-club-rewardopt { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--pp-border); border-radius: 12px; background: #fff; }
.pp-club-rewardopt-v { font: 700 20px/1.2 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-rewardopt-c { font-size: 13.5px; color: var(--pp-secondary-text); font-variant-numeric: tabular-nums; }
.pp-club-rewardopt-m { font-size: 12.5px; color: var(--pp-secondary-text); font-variant-numeric: tabular-nums; }

/* VIP levels */
.pp-club-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-club-level { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--pp-border); border-radius: var(--pp-club-radius); background: #fff; }
.pp-club-level.is-you { border-color: var(--pp-navy); box-shadow: inset 0 3px 0 var(--pp-navy); }
.pp-club-level-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-club-level-name { font: 700 19px/1.2 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-level-q { margin-top: 6px; font: 500 13px/1.35 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-club-level-x { align-self: flex-start; margin-top: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--pp-navy-tint); color: var(--pp-navy); font: 650 12.5px/1 var(--pp-font-body); font-variant-numeric: tabular-nums; }
.pp-club-level ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--pp-border); display: grid; gap: 8px; }
/* A level without a multiplier pill keeps its benefits divider level with the others (pill 26px + its 12px gap). */
@media (min-width: 768px) { .pp-club-level:not(:has(.pp-club-level-x)) ul { margin-top: 52px; } }
@media (min-width: 768px) and (max-width: 1100px) { .pp-club-level-q { min-height: calc(2em * 1.35); } }
.pp-club-level li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; line-height: 1.45; }
.pp-club-level li .pp-i { color: var(--pp-success-text); margin-top: 2px; }
.pp-club-you { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--pp-navy); color: #fff; font: 700 11px/1 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; }

/* Refer a friend */
.pp-club-refsteps { margin: 18px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.55; }
.pp-club-acct .pp-club-refsteps { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.pp-club-refcard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 20px; background: var(--pp-soft-surface); }
.pp-club-refcard .pp-club-ic { margin-bottom: 4px; }
.pp-club-refcard-t { margin: 0; font: 700 18px/1.35 var(--pp-font-body); }
.pp-club-refcard p { margin: 0; }
.pp-club-copy { display: flex; align-items: center; gap: 8px; width: 100%; }
.pp-club-copy .pp-input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding-block: 8px; font: 500 13.5px/1.3 var(--pp-font-body); background: #fff; }
.pp-club-copy .pp-btn { flex: none; gap: 6px; }
/* The copy button appears only when the Clipboard API works (club.js); `.pp-btn`'s display would otherwise beat [hidden]. */
.pp-club-copy [data-pp-club-copy-btn][hidden] { display: none; }
/* The referral code — the two-voice rule: Inter, spaced, tabular (no third, monospace face). */
.pp-club-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--pp-secondary-surface); font: 700 15px/1.4 var(--pp-font-body); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--pp-ink); }
.pp-club-codeline { margin: 10px 0 0; }
.pp-club-copy--lg { margin-bottom: 10px; }

/* FAQ + programme rules */
.pp-club-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.pp-club-faq-list { border-top: 1px solid var(--pp-border); }
.pp-club-faq-list details { border-bottom: 1px solid var(--pp-border); }
.pp-club-faq-list summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0;
	cursor: pointer; list-style: none; font: 650 16.5px/1.4 var(--pp-font-body); color: var(--pp-ink);
}
.pp-club-faq-list summary::-webkit-details-marker { display: none; }
.pp-club-faq-list summary .pp-i { flex: none; transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-club-faq-list details[open] summary .pp-i { transform: rotate(180deg); }
.pp-club-faq-list details > div { padding-block: 0 20px; padding-inline: 0 40px; color: #444; font-size: 15px; line-height: 1.6; }
.pp-club-terms { margin-top: 28px; padding: 20px 22px; border-radius: var(--pp-club-radius); background: var(--pp-soft-surface); scroll-margin-top: calc(var(--pp-sticky-top, 0px) + 24px); }
.pp-club-terms ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: #333; }

/* Closing band — light surface with the Navy CTA (never dark-on-dark above the Navy footer). */
.pp-club-band { background: var(--pp-soft-surface); border-top: 1px solid var(--pp-border); }
.pp-club-band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-block: 64px; }
.pp-club-band .pp-club-h2 { margin-bottom: 10px; }

/* Notes (shared by the page and My Club) */
.pp-club-note { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; border: 1px solid var(--pp-border); background: var(--pp-soft-surface); }
.pp-club-note .pp-i { width: 20px; height: 20px; }
.pp-club-note b { font-weight: 650; }
.pp-club-note--amber { background: var(--pp-amber-bg); border-color: var(--pp-amber-border); color: #5f4a13; }
.pp-club-note--amber .pp-i { color: var(--pp-amber-text); }
.pp-club-note--error { background: var(--pp-error-bg); border-color: var(--pp-error-border); color: var(--pp-error-text); }
.pp-club-note--success { background: var(--pp-success-bg); border-color: var(--pp-success-border); color: var(--pp-success-text); }
.pp-club-note--info { background: #F4F6FA; border-color: #dbe3ee; color: #213a5c; }
.pp-club-note--info .pp-i { color: var(--pp-navy); }
.pp-club-note .pp-btn { white-space: nowrap; }
.pp-club-note > span:only-of-type:last-child { grid-column: 2 / -1; }

/* =====================================================================
 * 2. MY CLUB — inside the locked account shell (Barlow display voice via account.css)
 * ================================================================== */
/* The account content column is the locked exhibit's full 1fr column: WooCommerce's own layout sheet would otherwise
   narrow it (`.woocommerce-account .woocommerce-MyAccount-content { float:right; width:68% }`). Scoped to My Club. */
body.pp-my-club .pp-acct-layout > .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }

.pp-club-acct { font-family: var(--pp-font-body); color: var(--pp-ink); }
.pp-club-acct-h1 { font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-text-page-title); letter-spacing: -.02em; margin: 0 0 4px; }
.pp-club-acct-sub { margin: 0; color: var(--pp-secondary-text); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pp-club-acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pp-club-acct-head .pp-club-link { min-height: 32px; font-size: 14px; }
.pp-club-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; scroll-margin-top: calc(var(--pp-sticky-top, 0px) + 16px); }
.pp-club-sec-h--first { margin-top: 0; }
.pp-club-sec-h h2 { margin: 0; font-family: var(--pp-font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.pp-club-sec-h a { font-size: 13.5px; font-weight: 600; color: var(--pp-navy); }

/* Tabs — one account destination, four Club views; a four-column icon bar on phones */
.pp-club-tabs { display: flex; gap: 4px; margin: 0 0 28px; border-bottom: 1px solid var(--pp-border); overflow-x: auto; scrollbar-width: none; contain: inline-size; }
.pp-club-tabs::-webkit-scrollbar { display: none; }
.pp-club-tabs a {
	position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px;
	font: 600 14.5px/1 var(--pp-font-body); color: var(--pp-secondary-text); white-space: nowrap;
}
.pp-club-tabs a .pp-i { display: none; }
.pp-club-tabs a:hover { color: var(--pp-ink); }
.pp-club-tabs a[aria-current="page"] { color: var(--pp-ink); }
.pp-club-tabs a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--pp-navy); }

/* Member identity card — Navy, no Lime */
.pp-club-idcard { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--pp-radius-lg); background: var(--pp-navy-chrome); color: #fff; }
.pp-club-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); font: 700 17px/1 var(--pp-font-body); letter-spacing: .02em; }
.pp-club-idcard-n { font: 650 18px/1.25 var(--pp-font-body); }
.pp-club-idcard-pts { text-align: end; }
.pp-club-idcard-pts .v { font: 700 26px/1 var(--pp-font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-club-idcard-pts .k { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pp-club-tierpill { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-inline-start: 8px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); font: 650 12px/1 var(--pp-font-body); vertical-align: 2px; }
.pp-club-tierpill--light { margin-inline-start: 0; border-color: #dbe3ee; color: var(--pp-navy); background: #f4f6fa; }
.pp-club-notes { margin-top: 16px; }
.pp-club-notes:empty { display: none; }

/* Panels + grids */
.pp-club-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.pp-club-grid2 > .pp-club-panel--soft { align-self: start; }
.pp-club-panel { min-width: 0; margin: 0; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); padding: 20px 22px; background: #fff; }
.pp-club-panel--soft { border-color: transparent; background: var(--pp-soft-surface); }
.pp-club-panel--start { margin-top: 16px; }
.pp-club-panel--rows { padding-block: 4px; }
.pp-club-panel > p:last-child, .pp-club-panel .pp-club-small:last-child { margin-bottom: 0; }
.pp-club-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pp-club-panel-h :is(h2, h3) { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--pp-font-display); font-weight: 600; font-size: 16.5px; letter-spacing: normal; }
.pp-club-panel-h :is(h2, h3) .pp-i { width: 18px; height: 18px; color: var(--pp-navy); }
.pp-club-big { font: 700 30px/1.05 var(--pp-font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-club-big--name { font-size: 24px; }
.pp-club-mid { font: 700 18px/1.2 var(--pp-font-body); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pp-club-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.pp-club-inline-form { display: inline-flex; margin: 0; }

/* Progress — Navy on light (never Lime: Strength-Signal Rule) */
.pp-club-prog { position: relative; height: 8px; border-radius: 999px; background: var(--pp-secondary-surface); overflow: hidden; margin: 14px 0 8px; }
.pp-club-prog > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--pp-navy); transition: width var(--pp-motion-component) var(--pp-ease-out); }
.pp-club-prog-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--pp-secondary-text); }

/* Activity list */
.pp-club-act { list-style: none; margin: 0 0 12px; padding: 0; }
.pp-club-act li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; }
.pp-club-act li + li { border-top: 1px solid var(--pp-border); }
.pp-club-act .pp-club-lrow-ic { width: 34px; height: 34px; }
.pp-club-act-t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pp-club-act-d { font-size: 12.5px; color: var(--pp-secondary-text); line-height: 1.4; }

/* Benefits */
.pp-club-benefits { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.pp-club-benefits li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; }
.pp-club-benefits .pp-i { color: var(--pp-navy); margin-top: 2px; }

/* Referral stats */
.pp-club-refstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.pp-club-refstats > div { padding: 8px 10px; border-radius: var(--pp-radius-md, 10px); background: var(--pp-secondary-surface); }
.pp-club-refstats dt { font-size: 12px; line-height: 1.25; color: var(--pp-secondary-text); }
.pp-club-refstats dd { margin: 2px 0 0; font: 700 18px/1.2 var(--pp-font-body); color: var(--pp-ink); font-variant-numeric: tabular-nums; }

/* Points bar */
.pp-club-ptsbar { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); overflow: hidden; }
.pp-club-ptsbar > div { padding: 16px 18px; min-width: 0; }
.pp-club-ptsbar > div + div { border-inline-start: 1px solid var(--pp-border); }

/* Rewards */
.pp-club-rewards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-club-reward { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--pp-border); border-radius: 12px; background: #fff; }
.pp-club-reward-v { font: 700 20px/1.2 var(--pp-font-body); letter-spacing: -.01em; }
.pp-club-reward-c { font-size: 13px; color: var(--pp-secondary-text); }
.pp-club-reward form { margin-top: 10px; }
.pp-club-reward.is-locked { background: var(--pp-soft-surface); border-color: transparent; }
.pp-club-reward.is-locked .pp-club-reward-v { color: var(--pp-secondary-text); }
.pp-club-held { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 12px; padding: 16px 18px; border: 1px solid var(--pp-navy); border-radius: 12px; background: var(--pp-navy-tint); }
.pp-club-held-v { font: 700 19px/1.2 var(--pp-font-body); }
.pp-club-held .pp-club-row-actions { margin-top: 0; }

/* Tables */
.pp-club-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.pp-club-table th { padding: 10px 12px; text-align: start; font: 600 12px/1.3 var(--pp-font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--pp-secondary-text); border-bottom: 1px solid var(--pp-border); white-space: nowrap; }
.pp-club-table td { padding: 14px 12px; border-bottom: 1px solid var(--pp-border); vertical-align: top; }
.pp-club-table td.num, .pp-club-table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-club-table .t { font-weight: 600; }
.pp-club-table .d { font-size: 12.5px; color: var(--pp-secondary-text); margin-top: 2px; }
.pp-club-table td.pp-club-bal { color: var(--pp-secondary-text); }
.pp-club-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pp-club-filter a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pp-border); background: #fff; font: 600 13px/1 var(--pp-font-body); color: var(--pp-ink); }
/* Selected filter: Navy (DESIGN.md — selected filters are Navy, like the account's own active states). */
.pp-club-filter a[aria-current="true"] { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.pp-club-filter a[aria-current="true"]:focus-visible { box-shadow: var(--pp-focus-ring-on-dark); }
.pp-club-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pp-club-show-m { display: none; }
.pp-club-faq-list--acct summary { font-size: 15px; min-height: 56px; }
.pp-club-faq-list--acct details > div { padding-inline-end: 0; font-size: 14px; }

/* Preferences */
.pp-club-pref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; margin: 0; }
.pp-club-pref + .pp-club-pref { border-top: 1px solid var(--pp-border); }
.pp-club-pref-t { font: 650 15px/1.35 var(--pp-font-body); }
.pp-club-pref-d { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--pp-secondary-text); }
.pp-club-comms { padding-block: 6px 18px; }
.pp-club-comms-r { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 14px 0; }
.pp-club-comms-r + .pp-club-comms-r { border-top: 1px solid var(--pp-border); }
.pp-club-comms-r > .pp-club-toggle { justify-self: center; }
.pp-club-kind { display: inline-flex; vertical-align: 1px; height: 20px; align-items: center; padding: 0 6px; border-radius: 4px; font: 700 11px/1 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; background: var(--pp-secondary-surface); color: var(--pp-secondary-text); }
.pp-club-kind--marketing { background: #f4f6fa; color: var(--pp-navy); }
.pp-club-kind--account { background: #f3fbf4; color: var(--pp-success-text); }

/* Switch — the native checkbox (role="switch") stays a real checkbox (design system: never appearance:none on it),
   visually hidden over the drawn track it controls; Navy when on, a visible grey track when off. No script needed. */
.pp-club-toggle { position: relative; display: inline-flex; flex: none; justify-self: center; width: 46px; height: 28px; }
/* The input covers the track plus 8px above and below: a 44px effective hit area (lock §15), the visual unchanged.
   Explicit sizes: WebKit keeps an auto-sized checkbox at its intrinsic 12×12 whatever the insets. */
.pp-club-toggle input[type="checkbox"] { position: absolute; inset: auto; top: -8px; inset-inline-start: 0; z-index: 1; width: 100%; height: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; }
.pp-club-toggle input:disabled { cursor: not-allowed; }
.pp-club-switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #C9CDCC; transition: background-color var(--pp-motion-micro) var(--pp-ease-out); }
.pp-club-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-club-toggle input:checked + .pp-club-switch { background: var(--pp-navy); }
.pp-club-toggle input:checked + .pp-club-switch::after { transform: translateX(18px); }
[dir="rtl"] .pp-club-toggle input:checked + .pp-club-switch::after { transform: translateX(-18px); }
.pp-club-toggle input:disabled + .pp-club-switch { opacity: .55; }
.pp-club-toggle input:focus-visible + .pp-club-switch { box-shadow: var(--pp-focus-ring); }
.pp-club-toggle input:checked:focus-visible + .pp-club-switch { box-shadow: var(--pp-focus-ring-on-dark); }
.pp-club-log { list-style: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--pp-soft-surface); font-size: 12.5px; line-height: 1.6; color: #444; }
.pp-club-bday { display: grid; grid-template-columns: minmax(150px, 220px) minmax(96px, 130px) auto; justify-content: start; align-items: center; gap: 10px; }
.pp-club-bday .pp-select { width: 100%; min-width: 0; }
.pp-club-leave .pp-btn { align-self: end; }

/* Get started checklist */
.pp-club-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-club-check li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--pp-border); border-radius: 12px; font-size: 14.5px; }
.pp-club-check .dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--pp-border); color: #fff; }
.pp-club-check .is-done .dot { background: var(--pp-success-text); border-color: var(--pp-success-text); }
.pp-club-check .is-done .t { color: var(--pp-secondary-text); text-decoration: line-through; }

/* Join card (signed-in customer who is not a member) */
.pp-club-joincard { max-width: 620px; padding: 28px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); background: #fff; }
.pp-club-joincard h2 { margin: 0 0 6px; font-family: var(--pp-font-display); font-weight: 600; font-size: 21px; }
.pp-club-joincard > p { margin: 0 0 20px; color: var(--pp-secondary-text); font-size: 15px; }
.pp-club-form { display: grid; gap: 14px; justify-items: start; }
.pp-club-form .pp-check { font-size: 14.5px; }
.pp-club-form .pp-check a { color: var(--pp-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-club-consent { justify-self: stretch; padding: 14px 16px; border-radius: 12px; background: var(--pp-soft-surface); display: grid; gap: 8px; }
.pp-club-consent-h { font: 650 12px/1.3 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--pp-secondary-text); }
.pp-club-consent p { margin: 0; }

/* =====================================================================
 * 3. ACCOUNT OVERVIEW — the one quiet Club summary row (Account lock §AH)
 * ================================================================== */
.pp-club-acctrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 0 var(--pp-space-5); padding: 14px 18px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); background: #fff; color: var(--pp-ink); transition: border-color var(--pp-motion-micro) var(--pp-ease-out); }
@media (hover: hover) { .pp-club-acctrow:hover { border-color: var(--pp-border-hover); } }
.pp-club-acctrow-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pp-navy-tint); color: var(--pp-navy); }
.pp-club-acctrow-ic .pp-i { width: 22px; height: 22px; }
.pp-club-acctrow-b { display: grid; gap: 3px; min-width: 0; }
.pp-club-acctrow-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 650 15.5px/1.3 var(--pp-font-body); }
.pp-club-acctrow-d { font-size: 13px; line-height: 1.45; color: var(--pp-secondary-text); font-variant-numeric: tabular-nums; }
.pp-club-acctrow > .pp-i { width: 18px; height: 18px; color: var(--pp-secondary-text); }

/* =====================================================================
 * 4. CREATE ACCOUNT — the Club fields inside WooCommerce's register form
 * ================================================================== */
.pp-club-reg { margin: 4px 0 18px; padding: 16px; border: 1px solid var(--pp-border); border-radius: 12px; background: var(--pp-soft-surface); display: grid; gap: 12px; min-width: 0; }
.pp-club-reg-h { padding: 0; font: 650 12px/1.3 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--pp-secondary-text); float: left; width: 100%; margin-bottom: 2px; }
.pp-club-reg .pp-auth-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.pp-club-reg .pp-auth-check input { margin: 2px 0 0; }
.pp-club-reg .pp-auth-check a { color: var(--pp-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-club-reg-join strong { display: block; font-weight: 650; }
.pp-club-reg-d { display: block; margin-top: 2px; color: var(--pp-secondary-text); font-size: 13px; }
.pp-club-reg-req { display: grid; gap: 10px; padding-block: 12px 0; padding-inline: 28px 0; border-top: 1px solid var(--pp-border); }
.pp-club-reg-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--pp-secondary-text); }
.pp-club-reg-ref { margin: 4px 0 0; }
.pp-club-reg-ref input { text-transform: uppercase; letter-spacing: .06em; }
/* WooCommerce's own register-form texts beside the Club fields, on the form's 12–14px scale (as checkout.css sets them). */
.pp-auth-card form.register > p.hint { font-size: 12px; line-height: 1.5; color: var(--pp-secondary-text); }
.pp-auth-card .woocommerce-privacy-policy-text { margin: 0 0 var(--pp-space-4); font-size: 12.5px; line-height: 1.5; color: var(--pp-secondary-text); }
.pp-auth-card .woocommerce-privacy-policy-text p { margin: 0; }
.pp-auth-card .woocommerce-privacy-policy-text a { color: var(--pp-navy); }

/* =====================================================================
 * 5. RESPONSIVE
 * ================================================================== */
@media (max-width: 1100px) and (min-width: 768px) {
	.pp-club-tiles, .pp-club-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) and (max-width: 1180px) {
	.pp-club-hero-points { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
	.pp-club-sec { padding-block: 64px; }
	.pp-club-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px 64px; }
	.pp-club-cardstage { min-height: 300px; }
	.pp-club-split { grid-template-columns: 1fr; gap: 40px; }
	.pp-club-faq { grid-template-columns: 1fr; gap: 24px; }
	.pp-club-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.pp-club-wrap { padding-inline: var(--pp-gutter-mobile); }
	.pp-club-sec { padding-block: 48px; }
	.pp-club-sec--tight { padding-block: 40px; }
	.pp-club-h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.06; margin-bottom: 14px; }
	.pp-club-h2 { font-size: clamp(25px, 7vw, 30px); }
	.pp-club-lead { font-size: 16px; }
	.pp-club-head { margin-bottom: 24px; }
	.pp-club-hero-in { padding-block: 28px 40px; gap: 28px; }
	.pp-club-crumb { margin-bottom: 16px; }
	.pp-club-eyebrow { margin-bottom: 14px; font-size: 11.5px; }
	.pp-club-hero-copy .pp-club-lead { margin-bottom: 20px; }
	.pp-club-hero-points { grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; }
	.pp-club-hero-points li { font-size: 14.5px; }
	.pp-club-offer { margin-bottom: 20px; }
	/* Stacked on phones: a wrap never starts a line with the separator (and translations may be longer). */
	.pp-club-offer-v { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; font-size: 18px; }
	.pp-club-offer-v i { display: none; }
	.pp-club-actions { flex-direction: column; align-items: stretch; gap: 6px; }
	.pp-club-actions .pp-club-link { align-self: flex-start; }
	.pp-club-cardstage { min-height: 0; padding: 4px 6px 18px; }
	.pp-club-mcard { padding: 18px 20px; border-radius: 18px; }
	.pp-club-mcard-back { display: none; }
	.pp-club-mcard-top img { height: 21px; }
	.pp-club-mcard-name { font-size: 18px; }
	.pp-club-mcard-v { font-size: 20px; }
	.pp-club-steps { grid-template-columns: 1fr; border-top: 0; }
	.pp-club-step, .pp-club-step + .pp-club-step { padding: 20px 0 0; border-inline-start: 0; border-top: 1px solid var(--pp-border); }
	.pp-club-step + .pp-club-step { margin-top: 20px; }
	.pp-club-step-n { margin-bottom: 12px; }
	.pp-club-tiles, .pp-club-tiles--4, .pp-club-duo, .pp-club-levels { grid-template-columns: 1fr; }
	.pp-club-tile { min-height: 0; padding: 18px; }
	.pp-club-lrow { padding: 12px 16px; }
	.pp-club-ledger-h { padding: 14px 16px; }
	.pp-club-refcard { padding: 20px; }
	.pp-club-faq-list summary { font-size: 15.5px; min-height: 56px; }
	.pp-club-faq-list details > div { padding-inline-end: 0; }
	.pp-club-band-in { grid-template-columns: 1fr; gap: 18px; padding-block: 44px; }
	.pp-club-use { margin-top: 32px; padding-top: 24px; }
	.pp-club-rewardrow { grid-template-columns: 1fr; }
	.pp-club-copy .pp-input { min-height: var(--pp-hit-min); }

	/* True-mobile hit areas (lock §15 "text actions, filter controls"): 44px effective, the visual unchanged. */
	.pp-club-acct-head .pp-club-link { min-height: var(--pp-hit-min); }
	.pp-club-filter a, a.pp-club-strong, .pp-club-sec-h a, .pp-club-crumb a { position: relative; }
	.pp-club-filter a::after, a.pp-club-strong::after, .pp-club-sec-h a::after, .pp-club-crumb a::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%);
	}

	/* My Club */
	.pp-club-tabs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; overflow: visible; contain: none; margin-inline: 0; padding: 0; }
	.pp-club-tabs a { flex-direction: column; justify-content: center; gap: 5px; min-height: 60px; padding: 8px 2px 10px; font-size: 12px; line-height: 1.15; text-align: center; white-space: normal; }
	.pp-club-tabs a .pp-i { display: block; width: 22px; height: 22px; }
	.pp-club-tabs a .lbl { display: block; overflow-wrap: anywhere; }
	.pp-club-tabs a[aria-current="page"]::after { inset-inline: 14%; }
	.pp-club-grid2 { grid-template-columns: 1fr; }
	.pp-club-idcard { grid-template-columns: auto 1fr; padding: 18px; }
	.pp-club-idcard-pts { grid-column: 1 / -1; text-align: start; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
	.pp-club-idcard-pts .k { margin: 0; }
	.pp-club-ptsbar { grid-template-columns: 1fr 1fr; }
	.pp-club-ptsbar > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--pp-border); }
	.pp-club-ptsbar > div:nth-child(2) { border-inline-start: 0; }
	.pp-club-rewards { grid-template-columns: 1fr; }
	.pp-club-table thead { display: none; }
	.pp-club-table, .pp-club-table tbody, .pp-club-table tr, .pp-club-table td { display: block; width: 100%; }
	.pp-club-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--pp-border); }
	.pp-club-table td { padding: 0; border: 0; }
	.pp-club-table td:nth-child(2):not(.num) { grid-column: 1; }
	.pp-club-table td.num { grid-column: 2; grid-row: 1; width: auto; }
	.pp-club-table td.pp-club-hide-m { display: none; }
	.pp-club-show-m { display: inline; }
	.pp-club-pref { grid-template-columns: 1fr; gap: 10px; }
	.pp-club-leave .pp-btn { justify-self: start; }
	.pp-club-comms-r { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; }
	.pp-club-note { grid-template-columns: 22px 1fr; }
	.pp-club-note > .pp-btn, .pp-club-note > form { grid-column: 1 / -1; }
	.pp-club-row-actions .pp-btn { flex: 1 1 auto; }
	.pp-club-bday { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.pp-club-bday > :nth-child(3) { grid-column: 1 / -1; justify-self: start; }
	.pp-club-joincard { padding: 20px; }
	.pp-club-held { flex-direction: column; align-items: stretch; }
	.pp-club-held .pp-club-row-actions > form { flex: 1 1 100%; }
	.pp-club-held .pp-club-row-actions .pp-btn { width: 100%; justify-content: center; }
	.pp-club-sec-h { flex-wrap: wrap; row-gap: 2px; }
	.pp-club-acctrow { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px 14px; }
	.pp-club-acctrow-ic { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
	.pp-club-mcard-bot { flex-wrap: wrap; }
	.pp-club-copy { flex-wrap: wrap; }
	.pp-club-copy .pp-btn { width: 100%; justify-content: center; }
}
/* 360: "Subscriptions" keeps one line, so the phone tab bar stays 60px (doc E §1). */
@media (max-width: 380px) {
	.pp-club-tabs a { font-size: 11px; padding-inline: 0; }
}

/* =====================================================================
 * FORCED COLOURS — the switch and the progress bar stay visible (system colours)
 * ================================================================== */
@media (forced-colors: active) {
	.pp-club-switch, .pp-club-switch::after, .pp-club-prog, .pp-club-prog > i { forced-color-adjust: none; }
	.pp-club-switch { background: Canvas; border: 1px solid CanvasText; }
	.pp-club-switch::after { top: 2px; inset-inline-start: 2px; background: CanvasText; box-shadow: none; }
	.pp-club-toggle input:checked + .pp-club-switch { background: Highlight; border-color: Highlight; }
	.pp-club-toggle input:checked + .pp-club-switch::after { background: HighlightText; }
	.pp-club-toggle input:disabled + .pp-club-switch { opacity: 1; border-color: GrayText; }
	.pp-club-toggle input:disabled + .pp-club-switch::after { background: GrayText; }
	.pp-club-toggle input:focus-visible + .pp-club-switch { outline: 2px solid Highlight; outline-offset: 2px; }
	.pp-club-prog { background: Canvas; border: 1px solid CanvasText; }
	.pp-club-prog > i { background: Highlight; }
	.pp-club-tabs a[aria-current="page"]::after { forced-color-adjust: none; background: Highlight; }
	.pp-club-filter a[aria-current="true"] { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}

/* =====================================================================
 * 6. REDUCED MOTION
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.pp-club-mcard, .pp-club-cardstage:hover .pp-club-mcard { transition: none; transform: rotate(-3deg); }
	.pp-club-prog > i, .pp-club-switch, .pp-club-switch::after, .pp-club-faq-list summary .pp-i { transition: none; }
}