/* Account and receipt pages */
.page{padding-block:clamp(40px,7vw,90px);min-height:70vh;background:linear-gradient(180deg,var(--surface),var(--bg) 320px)}
.narrow{max-width:460px;margin:0 auto}
.page h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,56px);line-height:1.05;margin:0 0 10px;text-wrap:balance}
.page .sub{color:var(--muted);margin:0 0 30px}
.panel{background:var(--bg);border:1px solid var(--line);padding:clamp(22px,4vw,40px)}
.switch{display:flex;border-bottom:1px solid var(--line);margin-bottom:26px}
.switch button{flex:1;background:none;border:0;padding:14px 0;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);position:relative}
.switch button[aria-pressed="true"]{color:var(--ink)}
.switch button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--gold)}
.form{display:grid;gap:18px}
.form .btn{width:100%}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:14px;cursor:pointer}
.note{padding:12px 14px;font-size:14px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 7%,var(--bg))}
.note.ok{border-color:#9fcfb3;background:#eef8f2;color:#1f5e3c}
.note.bad{border-color:#e7b3ad;background:#fcf0ee;color:var(--bad)}
.acct{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media (max-width:900px){.acct{grid-template-columns:1fr}}
.olist{display:grid;gap:14px}
.ocard{background:var(--bg);border:1px solid var(--line);padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:8px 20px;text-decoration:none;color:inherit;transition:border-color .3s}
.ocard:hover{border-color:var(--gold)}
.ocard .r{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ocard .nm{font-family:var(--display);font-size:20px;line-height:1.3;grid-column:1}
.ocard .tt{font-variant-numeric:tabular-nums;text-align:right;font-size:17px}
.ocard .ft{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--line)}
.pill.paid,.pill.completed{border-color:#9fcfb3;color:#1f5e3c;background:#eef8f2}
.pill.pending{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:#6a5518;background:#fbf6e2}
.pill.cancelled,.pill.failed{border-color:#e7b3ad;color:var(--bad)}
.pill.processing,.pill.dispatched{border-color:var(--dark);background:var(--dark);color:#fff}
.side{display:grid;gap:18px}
.side h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 14px}
.emptyo{padding:40px;text-align:center;border:1px dashed var(--line);color:var(--muted)}
/* receipt */
.rcpt{max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(14,13,11,.35)}
.rtop{background:var(--dark);color:#efe9da;padding:30px clamp(22px,5vw,48px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:end}
.rtop h1{color:#fff;font-size:clamp(30px,4vw,44px);margin:0}
.rtop .k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.rbody{padding:clamp(22px,5vw,48px)}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 36px;counter-reset:t}
.stp{position:relative;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:30px}
.stp::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:1px solid var(--line);background:var(--bg);z-index:1}
.stp::after{content:"";position:absolute;top:14px;left:-50%;right:50%;height:1px;background:var(--line)}
.stp:first-child::after{display:none}
.stp.on{color:var(--ink)}
.stp.on::before{background:var(--gold);border-color:var(--gold)}
.stp.on::after{background:var(--gold)}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px;font-size:14.5px;line-height:1.7}
.rgrid h4{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 6px}
@media (max-width:600px){.rgrid{grid-template-columns:1fr}.progress{font-size:9px}}
.rtable{width:100%;border-collapse:collapse;font-size:15px}
.rtable td{padding:13px 0;border-bottom:1px solid var(--line)}
.rtable td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtable .muted{color:var(--muted);font-size:13px}
.rtable tr.tot td{border-bottom:0;padding-top:20px;font-family:var(--display);font-size:26px}
.ractions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
@media print{.noprint,.ractions{display:none!important}.page{padding:0;background:none}.rcpt{box-shadow:none;border:0}.rtop{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* delivery / parcel request on the receipt */
.reqbox{margin-top:22px;padding:16px 18px;background:#f8f5ee;border-left:3px solid var(--gold);font-size:14px;line-height:1.7}
.reqbox h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 6px}
.reqbox p{margin:0 0 6px}.reqbox a{color:inherit}
@media print{.reqbox{background:none;border:1px solid #ccc}}