/* Web-app polish (footer, Rewards, Account, My Orders, notification status). Presentation only: no logic, rules or data contracts live here.
   Shares the hero's language: warm cream surfaces, one terracotta accent, system sans headings, 22px cards, short motion that honours reduced-motion. */
.mol-brand{--wa-ink:#111111;--wa-muted:#5b5b5b;--wa-line:#e5e5e5;--wa-card:#ffffff;--wa-sand:#fdece9;--wa-accent:var(--mol-action,#d83c1d);--wa-radius:22px;--wa-heading:820 clamp(28px,4.2vw,40px)/1.06 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hs-sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Footer ---------- */
.mol-brand body>footer.mol-footer{background:#111111;color:#e5e5e5;border-top:0;padding:clamp(28px,4vw,48px) max(18px,calc((100% - 1180px)/2)) calc(var(--mol-bottom-dock-height,90px) + 30px);text-align:left;font-size:14px;line-height:1.6}
.mol-footer a,.mol-footer .mf-link{color:#fdece9;text-decoration:none}
.mol-footer a:hover,.mol-footer .mf-link:hover{text-decoration:underline}
.mol-footer .mf-link{display:inline;padding:0;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.mol-footer :is(a,.mf-link):focus-visible,.mol-footer button:focus-visible{outline:3px solid #fdece9;outline-offset:3px;border-radius:6px}
.mol-footer .mf-app{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 18px;max-width:none;margin:0 0 clamp(26px,3.5vw,40px);padding:18px 20px;border:1px solid #ffffff1f;border-radius:var(--wa-radius);background:linear-gradient(120deg,#111111,#111111)}
.mol-footer .mf-app[hidden]{display:none}
.mol-footer .mf-app-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#ffffff12;color:#d83c1d}
.mol-footer .mf-app-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mol-footer .mf-app-copy{margin:0!important;min-width:0}.mol-footer .mf-app-copy strong{display:block;font-size:16px;color:#ffffff}.mol-footer .mf-app-copy p{margin:3px 0 0;font-size:13px;color:#cacaca}
.mol-footer .mf-app-actions{display:flex;gap:10px;flex-wrap:wrap}
.mol-footer .mf-app-actions button{min-height:44px;padding:0 20px;border-radius:14px;font:750 14px/1 system-ui,sans-serif}
.mol-footer .mf-app-actions .secondary{background:transparent;color:#fdece9;border:1px solid #ffffff40}
.mol-footer .mf-app-note{grid-column:1/-1;margin:0;padding-top:12px;border-top:1px solid #ffffff14;font-size:12.5px;color:#bdbdbd}
.mol-footer .mol-discover-trigger{display:none}
.mol-footer .mf-grid{display:grid;grid-template-columns:1.25fr 1fr 1.1fr 1.1fr;gap:28px clamp(20px,4vw,56px);align-items:start}
.mol-footer .mf-brand img{display:block;width:170px;height:auto;margin-bottom:14px;filter:brightness(0) invert(.93)}
.mol-footer .mf-brand p{margin:0;color:#cacaca;font-size:13.5px}.mol-footer .mf-brand strong{color:#ffffff}
.mol-footer h2{margin:0 0 12px;font:800 11px/1.4 system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#d83c1d}
.mol-footer ul{list-style:none;margin:0;padding:0}.mol-footer li{margin:0}
.mol-footer li>:is(a,.mf-link){display:inline-flex;align-items:center;min-height:36px}
.mol-footer address{font-style:normal;margin:0 0 8px;color:#fdece9}
.mol-footer .mf-legal{margin:clamp(24px,3vw,36px) 0 0;padding-top:18px;border-top:1px solid #ffffff14;font-size:12px;color:#a8a8a8}
@media(max-width:860px){.mol-footer .mf-grid{grid-template-columns:1fr 1fr}.mol-footer .mf-brand{grid-column:1/-1}.mol-footer .mf-brand img{width:150px;margin-bottom:10px}}
@media(max-width:600px){.mol-brand body>footer.mol-footer{padding:22px 18px calc(var(--mol-bottom-dock-height,90px) + 30px + env(safe-area-inset-bottom))}.mol-footer .mf-app{grid-template-columns:auto minmax(0,1fr);padding:16px}.mol-footer .mf-app-actions{grid-column:1/-1}.mol-footer .mf-app-actions button{flex:1 1 140px}.mol-footer .mf-grid{gap:22px 16px}}

/* ---------- Shared route headings (Rewards, Account, My Orders) ---------- */
.mol-brand body:is([data-public-route=account],[data-public-route=rewards]) :is(.account-card h2,.account-app .account-hero h1,.account-reorder h3){font:var(--wa-heading);letter-spacing:-.03em;color:var(--wa-ink)}
.mol-brand body[data-public-route=account] .account-card h2{font-size:clamp(22px,3vw,28px);letter-spacing:-.025em}
.mol-brand body[data-public-route=account] .account-kicker,.mol-brand body[data-public-route=account] .account-order-label{color:#a93620;letter-spacing:1.5px}

/* ---------- Account ---------- */
.mol-brand body[data-public-route=account] .account-landing.account-app{max-width:880px;margin:22px auto 36px;padding-inline:16px}
.mol-brand body[data-public-route=account] .account-app .account-hero{padding:clamp(20px,3vw,30px);border:1px solid var(--wa-line);border-radius:var(--wa-radius);background:radial-gradient(ellipse 70% 120% at 100% 0,#fdece9,transparent 70%),linear-gradient(180deg,#ffffff,#ffffff);color:var(--wa-ink);box-shadow:none}
.mol-brand body[data-public-route=account] .account-app .account-hero .eyebrow{color:#a93620;font-size:11px;letter-spacing:1.8px}
.mol-brand body[data-public-route=account] .account-app .account-hero h1{font-size:clamp(30px,5vw,42px);margin:0 0 8px;color:var(--wa-ink)}
.mol-brand body[data-public-route=account] .account-app .account-hero p:last-child{color:var(--wa-muted);font-size:15px}
.mol-brand body[data-public-route=account] .account-avatar{width:64px;height:64px;border-radius:50%;border:0;background:var(--wa-accent);color:#ffffff;font:800 22px/1 system-ui,sans-serif;letter-spacing:.5px;box-shadow:0 8px 18px #d83c1d33}
.mol-brand body[data-public-route=account] .account-shortcuts{flex-wrap:wrap;gap:12px 16px;padding:16px 0}
.mol-brand body[data-public-route=account] .account-wallet-link{padding:8px 16px 8px 8px;border:1px solid var(--wa-line);border-radius:18px;background:var(--wa-card);min-height:56px}
.mol-brand body[data-public-route=account] .account-wallet-link>span{border-radius:12px;background:#fdece9;font-size:22px}
.account-links{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.account-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--wa-line);border-radius:14px;background:var(--wa-card);color:var(--wa-ink);font:700 13px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.account-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--wa-accent)}
#accountPageSignOut.account-link{color:#8a2f1f;border-color:#fdece9}
.mol-brand body[data-public-route=account] .account-tabs{display:flex;width:100%;gap:4px;padding:4px;border:0;border-radius:16px;background:#eeeeee;margin:2px 0 18px}
.mol-brand body[data-public-route=account] .account-tabs button{flex:1;min-height:46px;padding:10px 12px;border-radius:12px;background:none;color:#4d4d4d;font:750 14px/1.2 system-ui,sans-serif;transition:background-color .18s ease,box-shadow .18s ease}
.mol-brand body[data-public-route=account] .account-tabs [aria-selected=true]{background:#ffffff;color:var(--wa-ink);box-shadow:0 2px 8px #a626141f}
.mol-brand body[data-public-route=account] .account-tabs button:focus-visible{outline:3px solid var(--wa-accent);outline-offset:2px}
.mol-brand body[data-public-route=account] .account-card{padding:clamp(20px,3vw,28px);border:1px solid var(--wa-line);border-radius:var(--wa-radius);background:var(--wa-card);box-shadow:0 10px 28px -20px #a6261455}
.mol-brand body[data-public-route=account] .account-card label{color:var(--wa-ink)}
.mol-brand body[data-public-route=account] .account-card input{border-radius:14px;border:1px solid #e5e5e5;min-height:50px;transition:border-color .15s ease,box-shadow .15s ease}
.mol-brand body[data-public-route=account] .account-card input:focus{border-color:var(--wa-accent);box-shadow:0 0 0 4px #d83c1d1f;outline:none}
.mol-brand body[data-public-route=account] .account-form-footer .primary,.mol-brand body[data-public-route=account] .account-buttons .primary{min-height:48px;border-radius:50px;padding:0 26px}
.mol-brand body[data-public-route=account] .account-guest{text-align:left}
@media(max-width:650px){
 .mol-brand body[data-public-route=account] .account-landing.account-app{margin:14px 0 24px;padding-inline:14px}
 .mol-brand body[data-public-route=account] .account-app .account-hero{padding:18px}
 .mol-brand body[data-public-route=account] .account-avatar{width:52px;height:52px;font-size:18px}
 .mol-brand body[data-public-route=account] .account-shortcuts{display:grid;grid-template-columns:1fr}
 .account-links{margin-left:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
 .account-link{justify-content:center}
 .mol-brand body[data-public-route=account] .account-tabs button{font-size:12.5px;padding:8px 6px}
}

/* ---------- My Orders ---------- */
.mol-brand body[data-public-route=account] .account-order{margin-block:16px;border:1px solid var(--wa-line);border-radius:var(--wa-radius);background:var(--wa-card);box-shadow:0 10px 28px -22px #a6261466}
.mol-brand body[data-public-route=account] .account-order>header{align-items:flex-start;padding:18px 20px 8px}
.mol-brand body[data-public-route=account] .account-order h3{font:800 20px/1.2 system-ui,sans-serif;letter-spacing:-.02em;color:var(--wa-ink)}
.mol-brand body[data-public-route=account] .account-order time{display:block;margin-top:4px;color:var(--wa-muted);font-size:12.5px}
.mol-brand body[data-public-route=account] .account-order-state{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;font-size:12px;border-radius:20px}
.mol-brand body[data-public-route=account] .account-order-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mol-brand body[data-public-route=account] .pickup-ol,.mol-brand body[data-public-route=account] .pickup-tracking{padding-inline:20px}
.mol-brand body[data-public-route=account] .pickup-items{padding:6px 20px 14px!important}
.mol-brand body[data-public-route=account] .pickup-items li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:9px 0;border-top:1px solid #fdece9}
.mol-brand body[data-public-route=account] .pickup-items li:first-child{border-top:0}
.pickup-item-qty{display:grid;place-items:center;min-width:34px;height:28px;border-radius:9px;background:var(--wa-sand);color:#a62614;font:800 12px/1 system-ui,sans-serif}
.pickup-items strong{font:700 15px/1.35 system-ui,sans-serif;overflow-wrap:anywhere}
.mol-brand body[data-public-route=account] .account-order footer{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;padding:14px 20px 16px;background:#ffffff;border-top:1px solid #fdece9}
.account-order-money{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.account-order-money small{margin:0;color:var(--wa-muted);font-size:12px;line-height:1.5;white-space:normal}
.account-order-money strong{font:800 21px/1.1 system-ui,sans-serif;letter-spacing:-.02em;color:var(--wa-ink)}
.money-chip{display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:20px;background:#e9eef7;color:#27466f;font:750 12px/1.2 system-ui,sans-serif}
.money-note{max-width:42ch}
.mol-brand body[data-public-route=account] .account-order .secondary{min-height:46px;border-radius:50px;padding:0 18px}
.account-pagination{display:flex;justify-content:center;align-items:center;gap:14px}
#accountOrdersStatus{min-height:22px;margin:0 0 6px;font-size:13px;color:var(--wa-muted)}#accountOrdersStatus.is-error{color:#a22635}
.pickup-timeline li.is-current .pickup-step{animation:wa-pulse 2.2s ease-out 2}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 #d83c1d55}100%{box-shadow:0 0 0 9px #d83c1d00}}
@media(max-width:650px){
 .mol-brand body[data-public-route=account] .account-order>header{padding:16px 16px 6px}.mol-brand body[data-public-route=account] .pickup-items{padding:6px 16px 12px!important}.mol-brand body[data-public-route=account] .account-order footer{padding:14px 16px;align-items:stretch;flex-direction:column}.mol-brand body[data-public-route=account] .account-order footer .secondary{width:100%;justify-content:center}
}

/* ---------- Rewards ---------- */
/* Phones: the wallet stacks (ring, balance, goal, milestones, actions) instead of squeezing two columns into 340px. */
@media(max-width:600px){
 .mol-brand body[data-public-route=rewards] .loyalty .member-details{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:'greeting' 'gauge' 'balance-note' 'goal' 'goal-note' 'milestones' 'actions'!important;justify-items:stretch;gap:14px}
 .mol-brand body[data-public-route=rewards] .loyalty .member-details>*{grid-column:1!important}
 .mol-brand body[data-public-route=rewards] .loyalty .member-details>.member-gauge{grid-row:gauge!important;width:min(200px,62vw);margin-inline:auto}
 .mol-brand body[data-public-route=rewards] .member-balance{justify-content:center;text-align:center}
 .mol-brand body[data-public-route=rewards] .member-gauge .member-balance strong{font-size:54px!important;letter-spacing:-.04em}
 .mol-brand body[data-public-route=rewards] .member-gauge .member-balance>span{font-size:11px!important}
 .mol-brand body[data-public-route=rewards] .loyalty-stats{gap:10px}
}

/* ---------- Notification status (inside the preferences sheet) ---------- */
.mol-notify-status{margin:0 0 16px;padding:16px;border:1px solid var(--wa-line);border-radius:18px;background:#ffffff}
.mol-notify-status h3{margin:0 0 10px;font:800 13px/1.3 system-ui,sans-serif;letter-spacing:.3px;color:var(--wa-ink)}
.mol-notify-status dl{display:grid;gap:0;margin:0}
.mol-notify-status dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #fdece9}.mol-notify-status dl>div:first-child{border-top:0}
.mol-notify-status dt{font-size:13px;color:#4d4d4d;font-weight:650}.mol-notify-status dd{margin:0;text-align:right;min-width:0}
.ns-chip{display:inline-block;max-width:100%;padding:5px 10px;border-radius:20px;background:#eeeeee;color:#494949;font:750 12px/1.3 system-ui,sans-serif;overflow-wrap:anywhere}
.ns-chip.is-ok{background:#dff2e6;color:#1d6745}.ns-chip.is-warn{background:#fdece9;color:#a62614}.ns-chip.is-bad{background:#fdece9;color:#9a372c}.ns-chip.is-wait{background:#e9eef7;color:#27466f}
.ns-note{margin:12px 0 0;font-size:12.5px!important;line-height:1.6;color:var(--wa-muted)}
.ns-help{margin-top:12px;padding-top:10px;border-top:1px solid #fdece9}.ns-help summary{min-height:40px;display:flex;align-items:center;cursor:pointer;font-weight:750;font-size:13px;color:#8a2f1f}
.ns-help ul{margin:6px 0 8px;padding-left:18px;font-size:13px;line-height:1.6;color:#3f3f3f}.ns-help li{margin:6px 0}.ns-help p{font-size:12.5px;color:var(--wa-muted);margin:0}

@media(prefers-reduced-motion:reduce){.mol-brand body[data-public-route=account] .account-tabs button,.mol-brand body[data-public-route=account] .account-card input{transition:none}.pickup-timeline li.is-current .pickup-step{animation:none}}