/* POSxp member module: styles for its pages and sheets (.pxm), the same in
   the standard storefront and in a client's own site. Colours and fonts come
   from the page's variables, so the module wears whatever brand runs it:
   --ink --acc --acc-text --on-acc --line --soft --muted --ok --bad --head */
.pxm{--_ink:var(--ink,#111314);--_acc:var(--acc,#3D3D3A);--_acct:var(--acc-text,var(--_acc));--_on:var(--on-acc,#fff);
  --_line:var(--line,#e6e4dd);--_soft:var(--soft,#f5f5f2);--_muted:var(--muted,#6b6a64);--_ok:var(--ok,#1f7a4d);--_bad:var(--bad,#b3261e);
  --_head:var(--head,inherit);color:var(--_ink)}
.pxm.page{max-width:620px;margin:0 auto;padding:22px 0 30px;display:grid;gap:14px}
.pxm h1,.pxm h2{font-family:var(--_head);margin:0;letter-spacing:-.01em}
.pxm h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.1}.pxm h2{font-size:1.25rem}
.pxm p{margin:0}
.pxm .note{color:var(--_muted);font-size:.9rem;line-height:1.45}
.pxm .err{color:var(--_bad);font-size:.88rem}
.pxm .back{color:var(--_muted);text-decoration:none;font-size:.9rem}
.pxm .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;font:inherit;font-weight:700;
  cursor:pointer;border:1px solid var(--_line);background:#fff;color:var(--_ink);text-decoration:none;white-space:nowrap}
.pxm .btn.primary{background:var(--_acc);border-color:var(--_acc);color:var(--_on)}
.pxm .btn.block{display:flex;width:100%}
.pxm .btn:disabled{opacity:.45;cursor:default}
.pxm .link{background:none;border:0;padding:4px;font:inherit;font-weight:700;color:var(--_acct);cursor:pointer;text-decoration:none}
.pxm .f{display:grid;gap:6px;font-size:.88rem;color:var(--_muted)}
.pxm input,.pxm select,.pxm textarea{font:inherit;color:var(--_ink);border:1px solid var(--_line);border-radius:10px;padding:10px 12px;background:#fff;width:100%;box-sizing:border-box}
.pxm .line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--_line)}
.pxm .line .m{flex:1;min-width:0}.pxm .line small{display:block;color:var(--_muted)}
.pxm .box{border:1px solid var(--_line);border-radius:14px;padding:14px;display:grid;gap:6px;background:#fff}
.pxm .row{display:flex;justify-content:space-between}
.pxm .total{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:700;border-top:1px solid var(--_line);padding-top:8px}
.pxm .choices{display:flex;flex-wrap:wrap;gap:8px}
.pxm .choice{border:1px solid var(--_line);border-radius:10px;padding:8px 12px;background:#fff;font:inherit;cursor:pointer;text-align:left;color:var(--_ink)}
.pxm .choice small{display:block;color:var(--_acct);font-weight:700}
.pxm .membercard{border-radius:20px;padding:22px;background:var(--_ink);color:#fff;display:grid;gap:14px}
.pxm .membercard .qr{background:#fff;border-radius:14px;padding:14px;justify-self:center}
.pxm .membercard .qr img,.pxm .membercard .qr canvas{display:block}
.pxm .bal{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.pxm .bal div{background:rgba(255,255,255,.12);border-radius:12px;padding:10px 12px}
.pxm .bal b{display:block;font-size:1.3rem;font-family:var(--_head)}
.pxm .goods{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.pxm .goods div{border:1px solid var(--_line);border-radius:14px;padding:12px 14px;background:#fff}
.pxm .goods b{display:block;font-family:var(--_head);font-size:1.3rem}.pxm .goods span{font-size:.82rem;color:var(--_muted)}
.pxm .links{display:flex;flex-wrap:wrap;gap:8px}
.pxm .act{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--_line);border-radius:14px;padding:12px 14px;background:#fff}
.pxm .act div{display:grid;gap:2px}.pxm .act span{font-size:.84rem;color:var(--_muted)}
.pxm .invitebox{border:1px solid var(--_line);border-radius:16px;padding:16px;display:grid;justify-items:center;gap:10px;text-align:center;background:#fff}
.pxm .invitebox small{color:var(--_muted)}
.pxm .scanbox{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:1/1}.pxm .scanbox video{width:100%;height:100%;object-fit:cover}
.pxm .gift{background:var(--_acc);color:var(--_on);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.pxm .steps{border:1px solid var(--_line);border-radius:14px;padding:14px;display:grid;gap:8px;background:#fff}
.pxm .steps .sh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.pxm .steps .sh span{font-size:.84rem;color:var(--_muted)}
.pxm .bar{height:6px;border-radius:6px;background:var(--_soft);overflow:hidden}.pxm .bar i{display:block;height:100%;background:var(--_acc)}
.pxm .step{display:flex;align-items:center;gap:10px}.pxm .step div{flex:1;display:grid}.pxm .step small{color:var(--_muted)}
.pxm .step .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--_line);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex:none}
.pxm .step.ok .tick{background:var(--_ok);border-color:var(--_ok);color:#fff}.pxm .step.ok b{color:var(--_muted)}
.pxm .neg{color:var(--_bad)}.pxm .pos{color:var(--_ok)}
.pxm .note-item .m{display:grid;gap:3px}.pxm .note-item .m span{font-size:.92rem}
.pxm .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--_acc);vertical-align:middle}
.pxm .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.pxm .acts .btn{min-height:36px;padding:7px 12px;font-size:.88rem}
.pxm.sheet{display:grid;gap:12px}

/* ---------------------------------------------------------------- member app
   The member home, wallet, history and me, after the Member Portal design
   (artifact "CommonHome Member Portal", 2026-10-22), in any client's colours. */
.pxm{--_okdeep:var(--ok-deep,#14553D);--_oksoft:rgba(30,158,111,.12);--_card:var(--soft,#F1ECE1);--_yel:#E0A21E;--_yelsoft:rgba(224,162,30,.14)}
.pxm.mapp{max-width:520px;margin:0 auto;padding:0 0 110px;display:flex;flex-direction:column;gap:14px}
.pxm .mpad{padding:0 16px;display:flex;flex-direction:column;gap:14px}
.pxm .num{font-variant-numeric:tabular-nums}
.pxm .mcard{background:var(--_ink);color:#fff;padding:18px 18px 20px;border-radius:0 0 24px 24px;display:grid;gap:16px}
@media (min-width:560px){.pxm .mcard{border-radius:24px;margin-top:16px}}
.pxm .mcard .mtop{display:flex;align-items:center;gap:10px}
.pxm .mcard .mlogo{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;color:var(--_ink);font-family:var(--_head);font-weight:700;font-size:14px}
.pxm .mcard .mlogo img{width:100%;height:100%;object-fit:contain}
.pxm .mcard .mbrand{font-family:var(--_head);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxm .badge{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--_acc);color:var(--_on);white-space:nowrap}
.pxm .badge.ghost{background:rgba(255,255,255,.14);color:#fff}
.pxm .bell{position:relative;width:40px;height:40px;border-radius:20px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;flex:none;padding:0;cursor:pointer;text-decoration:none}
.pxm .bell svg{width:20px;height:20px}
.pxm .bell i{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--_acc);color:var(--_on);font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.pxm .who{display:flex;align-items:center;gap:14px}
.pxm .avatar{width:58px;height:58px;border-radius:50%;background:var(--_acc);color:#fff;display:grid;place-items:center;font-family:var(--_head);font-weight:700;font-size:26px;border:3px solid rgba(255,255,255,.25);flex:none}
.pxm .who b{display:block;font-family:var(--_head);font-size:22px;font-weight:600}
.pxm .who small{display:block;font-size:12.5px;opacity:.75}
.pxm .bal3{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 6px;text-align:center}
.pxm .bal3 a{color:inherit;text-decoration:none;padding:2px}
.pxm .bal3 b{display:block;font-family:var(--_head);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.pxm .bal3 span{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.7;font-weight:700}
.pxm .bal3 .c b{color:#8FE3BD}
.pxm .waitchip{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid rgba(224,162,30,.6);background:rgba(224,162,30,.22);color:#fff;cursor:pointer}
.pxm .waitchip::before{content:'';width:8px;height:8px;border-radius:4px;background:var(--_yel)}
.pxm .sec{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--_muted);margin:2px 0 -6px}
.pxm .mbox{background:#fff;border:1px solid var(--_line);border-radius:16px;padding:14px}
.pxm .impact2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pxm .imp{border-radius:16px;padding:14px}
.pxm .imp.me{background:var(--_okdeep);color:#fff}
.pxm .imp.us{background:#fff;border:1px solid var(--_line)}
.pxm .imp b{display:block;font-family:var(--_head);font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.pxm .imp span{font-size:12px;opacity:.85}.pxm .imp.us span,.pxm .imp.us small{color:var(--_muted);opacity:1}
.pxm .imp small{display:block;margin-top:6px;font-size:11.5px;opacity:.85}
.pxm .mbar{height:10px;background:var(--_card);border-radius:5px;overflow:hidden}.pxm .mbar i{display:block;height:100%;background:var(--_ok);border-radius:5px}
.pxm .goal{display:grid;gap:8px}.pxm .goal .r1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pxm .goal b{font-family:var(--_head);font-size:16px;font-weight:600}.pxm .goal span{font-size:12.5px;color:var(--_muted)}
.pxm .cta{display:flex;gap:12px;align-items:center;background:var(--_oksoft);border:1px solid rgba(30,158,111,.3);border-radius:16px;padding:14px}
.pxm .cta b{display:block;font-size:14.5px}.pxm .cta span{font-size:12.5px;color:var(--_muted)}
.pxm .btn.green{background:var(--_ok);border-color:var(--_ok);color:#fff}
.pxm .btn.inkb{background:var(--_ink);border-color:var(--_ink);color:#fff}
.pxm .btn.sm{min-height:38px;font-size:13px;padding:0 12px}
.pxm .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pxm .tile{min-height:80px;border:1px solid var(--_line);border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;font-size:12px;padding:8px;text-align:center;color:var(--_ink);cursor:pointer}
.pxm .tile svg{width:24px;height:24px;color:var(--_acc)}
.pxm .tile.locked{opacity:.5}
.pxm .checklist{display:grid}
.pxm .ck{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--_line)}
.pxm .ck .cd{width:26px;height:26px;border-radius:13px;border:2px solid var(--_line);display:grid;place-items:center;color:#fff}
.pxm .ck.ok .cd{background:var(--_ok);border-color:var(--_ok)}.pxm .ck .cd svg{width:14px;height:14px}
.pxm .ck b{display:block;font-size:14px}.pxm .ck.ok b{color:var(--_muted)}.pxm .ck small{display:block;font-size:12.5px;color:var(--_muted)}
.pxm .mhead{padding:16px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pxm .mhead h2{margin:0;font-family:var(--_head);font-size:24px;font-weight:600}
.pxm .wb{border-radius:16px;padding:16px;display:grid;gap:10px;border:1px solid var(--_line);background:#fff}
.pxm .wb .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pxm .wb .t span{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--_muted)}
.pxm .wb .t b{font-family:var(--_head);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.pxm .wb.credits{border-color:rgba(30,158,111,.4)}.pxm .wb.credits .t b{color:var(--_ok)}
.pxm .wb p{font-size:12.5px;color:var(--_muted);line-height:1.45}
.pxm .wb .btns{display:flex;gap:8px;flex-wrap:wrap}.pxm .wb .btns .btn{flex:1;min-width:120px}
.pxm .filters{display:flex;gap:8px;overflow-x:auto}
.pxm .pill{min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--_line);background:#fff;font:inherit;font-weight:600;font-size:13px;color:var(--_muted);white-space:nowrap;cursor:pointer}
.pxm .pill[aria-pressed="true"]{background:var(--_ink);border-color:var(--_ink);color:#fff}
.pxm .lg{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--_line);text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit;text-decoration:none}
.pxm .lg .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-family:var(--_head);font-size:12px}
.pxm .lg .ic.cr{background:var(--_oksoft);color:var(--_ok)}.pxm .lg .ic.co{background:var(--_card);color:var(--_ink)}.pxm .lg .ic.sh{background:rgba(243,116,32,.14);color:var(--_acct)}
.pxm .lg b{display:block;font-size:13.5px;font-weight:600}.pxm .lg span span,.pxm .lg small{font-size:12px;color:var(--_muted)}
.pxm .lg .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.pxm .lg .amt.plus{color:var(--_ok)}
.pxm .lg .amt small{display:block;font-weight:500}
.pxm .merow{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--_line);font-size:14px}
.pxm .merow span{color:var(--_muted)}
.pxm .stat{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700}
.pxm .stat.ok{background:var(--_oksoft);color:var(--_ok)}.pxm .stat.wait{background:var(--_yelsoft)}
.pxm .warnbox{background:var(--_yelsoft);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.45}
.pxm .mnote{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--_line)}
.pxm .mnote .avatar{width:40px;height:40px;font-size:16px;border-width:0}
.pxm .mnote b{font-size:14px}.pxm .mnote p{margin:3px 0 4px;font-size:13px;line-height:1.45}.pxm .mnote small{color:var(--_muted);font-size:11.5px}
.pxm .mnote.unread b::after{content:'';display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--_acc);margin-left:6px;vertical-align:middle}
/* tabs: bottom bar on phones, a row on wide screens */
.pxtabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--_line,#e6e4dd);display:flex;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
.pxtabs a,.pxtabs button{flex:1;min-height:56px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted,#6b6a64);border-radius:10px;text-decoration:none;cursor:pointer}
.pxtabs svg{width:22px;height:22px}
.pxtabs [aria-current="page"]{color:var(--acc,#3D3D3A)}
.pxtabs .qrtab .b{width:54px;height:54px;margin-top:-24px;border-radius:27px;background:var(--acc,#3D3D3A);color:var(--on-acc,#fff);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.2)}
@media (min-width:900px){.pxtabs{position:sticky;top:auto;bottom:16px;max-width:520px;margin:0 auto;border:1px solid var(--_line,#e6e4dd);border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.08)}}
/* QR full screen */
.pxqr{position:fixed;inset:0;z-index:70;background:#fff;color:#1C1B29;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.pxqr .qrb{padding:12px;border:1px solid #E5E1D8;border-radius:8px;background:#fff}
.pxqr b{font-family:var(--head,inherit);font-size:24px}.pxqr p{margin:0;font-size:13.5px;color:#6E6A7A;max-width:280px;line-height:1.45}
.pxqr button{min-height:52px;min-width:160px;border-radius:12px;border:1px solid #E5E1D8;background:#FAF8F4;font:inherit;font-weight:700;cursor:pointer}

/* On member pages the site footer gives way to the app's tabs */
body.pxm-app .foot,body.pxm-app .foot2,body.pxm-app footer{display:none}

/* the signed-in member in the site header: their avatar */
.pxav{width:40px;height:40px;border-radius:50%;background:var(--acc,#3D3D3A);color:var(--on-acc,#fff);display:inline-grid;place-items:center;
  font-family:var(--head,inherit);font-weight:700;font-size:17px;line-height:1}
/* My store: a card in the store's own colour */
.pxm .mystore{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ms);border-radius:16px;padding:12px 14px;background:#fff;color:var(--_ink);text-decoration:none}
.pxm .mystore .msl{width:40px;height:40px;border-radius:10px;background:var(--ms);color:#fff;display:grid;place-items:center;overflow:hidden;font-weight:700;flex:none}
.pxm .mystore .msl img{width:100%;height:100%;object-fit:contain;background:#fff}
.pxm .mystore .msm{flex:1;display:grid}.pxm .mystore .msm span{font-size:12.5px;color:var(--_muted)}