@font-face{font-family:Maixu Sans;src:url('/demo/assets/maixu-sans-v1.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Maixu Condensed;src:url('/demo/assets/BarlowCondensed-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}

/* Customer pages continue the storefront's warm paper, ink and hand-drawn marks. */
:root[data-storefront-ui],html[data-storefront-ui] body{
  color-scheme:light;
  --paper:#fee5ca;--paper-deep:#f8dabb;--white:#fff5e9;
  --ink:#63152b;--ink-soft:#81525a;--ink-faint:#89616a;
  --red:#b00e2f;--red-deep:#9a1230;--line:#b00e2f33;
  --mint-deep:#356046;--blue:#805361;--yellow:#d99455;
  --surface:#fff2e2;--soft:#f5d8c1;--accent-soft:#f5ccd0;
  --glass:rgba(254,229,202,.9);--glass-edge:#fff8ead9;
  --sans:'Maixu Sans',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
  --serif:var(--sans);--mono:var(--sans);
  --condensed:'Maixu Condensed',Impact,sans-serif;
  --shadow:0 15px 40px #63152b0a;
}
:root[data-storefront-ui][data-theme=dark],html[data-storefront-ui][data-theme=dark] body{
  color-scheme:dark;
  --paper:#261a20;--paper-deep:#432c35;--white:#38222b;
  --ink:#fee5ca;--ink-soft:#dbc0b4;--ink-faint:#c4a79f;
  --red:#ffc1c2;--red-deep:#ffc1c2;--line:#e8b3b04d;
  --mint-deep:#bfdbb4;--blue:#efb8c0;--yellow:#d6ac79;
  --surface:#38222b;--soft:#432c35;--accent-soft:#59323f;
  --glass:rgba(38,26,32,.91);--glass-edge:#f9cecd47;
  --shadow:none;
}
html[data-storefront-ui] body{background:var(--paper);color:var(--ink)}
html[data-storefront-ui] .app-shell{display:flex;flex-direction:column;min-height:100svh}
html[data-storefront-ui] #app-main{width:min(1180px,100%);padding:0 36px 80px;flex:1;color:var(--ink)}
/* Explicit text owners also refresh reliably when WebKit changes system theme. */
html[data-storefront-ui] :is(h1,h2,h3,h4,.timeline-item strong,.order-state-card strong){color:var(--ink)}
html[data-storefront-ui] .topbar{padding:18px 32px;min-height:84px;gap:20px;background:var(--glass);border-color:var(--line);box-shadow:inset 0 1px var(--glass-edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:none}
html[data-storefront-ui] .brand{width:155px;flex-shrink:0;color:var(--red)}
html[data-storefront-ui] .brand:before{content:'';display:block;width:100%;height:40px;background:currentColor;mask:url('/assets/maixu-wordmark.svg') center/contain no-repeat;-webkit-mask:url('/assets/maixu-wordmark.svg') center/contain no-repeat}
html[data-storefront-ui] .brand :is(.brand-mark,.brand-copy){display:none}
html[data-storefront-ui] .topbar-tools{gap:8px}
html[data-storefront-ui] :is(.topbar-order-button,.customer-auth-button,.storefront-home-link,.storefront-appearance-trigger,.customer-topbar-account){min-height:42px;padding:0 14px;border:1px solid var(--red);border-radius:3px;background:transparent;color:var(--red);font-size:12px;text-decoration:none;box-shadow:2px 2px 0 var(--red);white-space:nowrap;transition:background-color .16s,color .16s}
html[data-storefront-ui] .storefront-home-link{display:inline-flex;align-items:center;gap:18px}
html[data-storefront-ui] .storefront-appearance-trigger{display:grid;place-items:center;width:42px;padding:9px}
html[data-storefront-ui] .storefront-appearance-trigger svg{width:21px;height:21px}
html[data-storefront-ui] :is(.topbar-order-button.is-active,.customer-auth-button:hover,.storefront-home-link:hover){color:var(--paper);background:var(--red);transform:none}
html[data-storefront-ui] .locale-switch{min-height:42px;border-radius:3px;background:transparent;border-color:var(--line);padding:3px}
html[data-storefront-ui] .locale-button{border-radius:1px;min-width:28px}
html[data-storefront-ui] .locale-button.is-active{background:var(--red);color:var(--paper)}
html[data-storefront-ui] .customer-topbar-account{padding:3px 8px;box-shadow:none}
html[data-storefront-ui] .customer-account-avatar{background:var(--accent-soft);color:var(--ink)}
html[data-storefront-ui] .site-footer{width:min(1180px,100%);padding:24px 36px 30px;font-size:11px;letter-spacing:.02em;color:var(--ink-soft);border-color:var(--line)}
html[data-storefront-ui] .site-footer a{color:var(--red)}

/* A small hand-drawn bun adds the brand without competing with order information. */
html[data-storefront-ui] :is(.orders-intro,.payment-step-head){position:relative;padding:58px 118px 30px 0;margin-bottom:24px;border-bottom:1px solid var(--red);max-width:none}
html[data-storefront-ui] .orders-intro{align-items:flex-end}
html[data-storefront-ui] :is(.orders-intro h1,.payment-step-head h1){font:700 clamp(32px,4vw,48px)/1.2 var(--sans);letter-spacing:-.045em;margin:10px 0 0;color:var(--ink)}
html[data-storefront-ui] :is(.orders-intro p,.payment-step-head p){font-size:13px;line-height:1.8;color:var(--ink-soft);margin:12px 0 0;overflow-wrap:anywhere}
html[data-storefront-ui] .orders-intro-note{max-width:360px}
html[data-storefront-ui] .order-doodle{position:absolute;right:0;bottom:24px;width:90px;height:82px;color:var(--red);pointer-events:none}
html[data-storefront-ui] .eyebrow{display:block;font:600 13px/1.3 var(--condensed);letter-spacing:.16em;color:var(--red)}
html[data-storefront-ui] .back-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);min-height:36px;margin:0 0 18px;padding:0;font-size:12px}
html[data-storefront-ui] .order-detail-intro{padding-top:32px}
html[data-storefront-ui] .order-lookup-panel{padding:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;margin-bottom:28px}
html[data-storefront-ui] .contact-lookup-fields{gap:14px}
html[data-storefront-ui] .order-lookup-secondary{margin-top:10px}
html[data-storefront-ui] .order-link-lookup summary{min-height:48px;font-size:12px}
html[data-storefront-ui] .order-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 16px}
html[data-storefront-ui] .order-section-heading h2{font-size:17px;margin:0}
html[data-storefront-ui] .order-section-heading p{font-size:12px;line-height:1.7;color:var(--ink-soft)}
html[data-storefront-ui] .order-list{gap:14px}
html[data-storefront-ui] .order-card{padding:24px;border-radius:8px;background:var(--surface);border-color:var(--line);box-shadow:var(--shadow);transition:border-color .16s}
html[data-storefront-ui] .order-card:hover{transform:none;border-color:var(--red)}
html[data-storefront-ui] .order-card h3{font:600 24px/1.15 var(--condensed);letter-spacing:.015em;overflow-wrap:anywhere}
html[data-storefront-ui] .order-card .order-meta{font-size:11px;color:var(--ink-soft);margin-top:8px}
html[data-storefront-ui] .order-items{gap:8px;font-size:12px;line-height:1.65}
html[data-storefront-ui] .order-items span{border-radius:3px;background:var(--paper);padding:6px 10px;overflow-wrap:anywhere}
html[data-storefront-ui] .order-total{font:600 32px/1.1 var(--condensed);color:var(--red)}
html[data-storefront-ui] .customer-order-filters{background:var(--soft);padding:5px;border:1px solid var(--line);border-radius:6px;margin-bottom:20px}
html[data-storefront-ui] .customer-order-filter{font-size:12px;min-height:44px;border-radius:3px;color:var(--ink-soft);transition:background-color .16s,color .16s}
html[data-storefront-ui] .customer-order-filter.is-active{background:var(--red);color:var(--paper)}
html[data-storefront-ui] .customer-order-filter b{background:var(--accent-soft);color:var(--ink)}
html[data-storefront-ui] .customer-order-filter.is-active b{background:transparent;color:inherit;border:1px solid currentColor}
html[data-storefront-ui] :is(.empty-state,.contact-result-help,.order-recovery,.order-state-card){background:var(--surface);border-color:var(--line);border-radius:8px}
html[data-storefront-ui] .empty-state{padding:44px 24px}
html[data-storefront-ui] .empty-state p{line-height:1.8;font-size:13px}

/* Keep every state rendered. No scroll culling, animated blurs or card layers. */
html[data-storefront-ui] #app-main :is([data-motion],[data-motion-scroll]){animation:none!important;opacity:1!important;transform:none!important}
html[data-storefront-ui] :is(.primary-button,.secondary-button,.danger-button,.tiny-button){min-height:44px;padding:11px 17px;border:1px solid var(--red);border-radius:4px;box-shadow:none;font-size:12px;line-height:1.4;transition:background-color .16s,color .16s;transform:none}
html[data-storefront-ui] .primary-button{background:var(--red);color:var(--paper)}
html[data-storefront-ui] .primary-button:hover{background:var(--red-deep);box-shadow:none;transform:none}
html[data-storefront-ui] :is(.secondary-button,.tiny-button){background:transparent;color:var(--red);border-color:var(--line)}
html[data-storefront-ui] :is(.secondary-button,.tiny-button):hover{background:var(--accent-soft);border-color:var(--red);transform:none}
html[data-storefront-ui] .danger-button{background:transparent;color:var(--red);border-color:var(--line)}
html[data-storefront-ui] :is(.form-field input,.form-field textarea,.form-field select,.lookup-form input,.lookup-panel input){background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:4px;min-height:48px;font-size:16px;box-shadow:none}
html[data-storefront-ui] :is(input,textarea)::placeholder{color:var(--ink-faint);opacity:1}
html[data-storefront-ui] :is(button,input,textarea,select,a):focus-visible{outline:2px solid var(--red);outline-offset:3px}
html[data-storefront-ui] :is(.form-field label,.lookup-form label,.field-label){color:var(--ink-soft);font-size:12px}
html[data-storefront-ui] :is(.text-button,.orders-login-link){color:var(--red);font-size:12px;min-height:40px}
html[data-storefront-ui] .status-chip{min-height:28px;padding:4px 9px;border-radius:4px;font-size:11px;line-height:1.4;white-space:normal;text-align:center}
html[data-storefront-ui] .status-pending{color:#76501c;background:#f5e2ba}
html[data-storefront-ui] .status-approved{color:#31573d;background:#dce7cc}
html[data-storefront-ui] .status-picked{color:#66566d;background:#e8dce7}
html[data-storefront-ui] :is(.status-rejected,.status-cancelled,.status-overdue){color:#8f2943;background:#f6d5d8}
html[data-storefront-ui][data-theme=dark] .status-pending{color:#f6d29c;background:#554135}
html[data-storefront-ui][data-theme=dark] .status-approved{color:#c5ddb5;background:#34453b}
html[data-storefront-ui][data-theme=dark] .status-picked{color:#e4cdea;background:#49384e}
html[data-storefront-ui][data-theme=dark] :is(.status-rejected,.status-cancelled,.status-overdue){color:#ffc1c2;background:#59323f}

html[data-storefront-ui] .payment-step{padding:0;width:100%}
html[data-storefront-ui] .payment-step-head{padding-top:32px}
html[data-storefront-ui] .payment-step-layout{grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:24px}
html[data-storefront-ui] .payment-step-main{gap:16px}
html[data-storefront-ui] .payment-countdown{border:1px solid var(--line);border-radius:5px;background:var(--soft);padding:14px 18px;color:var(--ink)}
html[data-storefront-ui] .payment-countdown strong{font:600 25px/1 var(--condensed);color:var(--red)}
html[data-storefront-ui] .payment-countdown small{font-size:11px;line-height:1.7}
html[data-storefront-ui] .payment-amount{padding:20px 24px;background:var(--surface);border-color:var(--line);border-radius:8px}
html[data-storefront-ui] .payment-amount strong{font:600 46px/1 var(--condensed);color:var(--red)}
html[data-storefront-ui] .bank-card{padding:24px;background:#73152f;color:#fff2e2;border-radius:8px}
html[data-storefront-ui] .bank-card>.label{color:#f2c1b8;font:600 12px var(--condensed);letter-spacing:.14em}
html[data-storefront-ui] .bank-card>strong{font-size:20px}
html[data-storefront-ui] .bank-details{margin-top:20px;gap:14px}
html[data-storefront-ui] .bank-details>div{border-color:#ffd8c740;gap:8px 14px}
html[data-storefront-ui] .bank-details>div>span{color:#f2c1b8;font-size:12px}
html[data-storefront-ui] .bank-details strong{color:#fff2e2;font-size:19px;line-height:1.4;font-weight:550;overflow-wrap:anywhere}
html[data-storefront-ui] .bank-copy{color:#fff2e2;border:1px solid #ffd8c766;border-radius:3px;min-height:40px;padding:6px 12px;font-size:11px;background:transparent}
html[data-storefront-ui] .bank-copy:hover{background:#ffffff14}
html[data-storefront-ui] .payment-proof-form{padding:22px;margin-top:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);gap:14px}
html[data-storefront-ui] .payment-proof-form>label:first-child{font-size:16px;font-weight:650}
html[data-storefront-ui] .proof-file-picker{min-height:66px;padding:12px;border-color:var(--red);border-radius:4px;background:var(--paper)}
html[data-storefront-ui] .proof-file-command{border-radius:3px;background:var(--red);color:var(--paper);font-size:12px;padding:10px}
html[data-storefront-ui] .proof-file-name{font-size:12px;color:var(--ink-soft)}
html[data-storefront-ui] .payment-proof-form small{font-size:11px;line-height:1.8;color:var(--ink-soft)}
html[data-storefront-ui] .payment-proof-form>.primary-button{min-height:48px;width:100%;justify-content:center}
html[data-storefront-ui] .payment-order-card{padding:24px;border-radius:8px;border-color:var(--line);background:var(--surface)}
html[data-storefront-ui] .payment-order-card h2{font-size:18px}
html[data-storefront-ui] .summary-row{font-size:13px;line-height:1.7;gap:18px;padding:12px 0;color:var(--ink-soft)}
html[data-storefront-ui] .summary-row>span{overflow-wrap:anywhere;min-width:0}
html[data-storefront-ui] .summary-row>strong{flex-shrink:0}
html[data-storefront-ui] .summary-total{border-color:var(--line);padding-top:18px;margin-top:16px}
html[data-storefront-ui] .summary-total span{font-size:12px}
html[data-storefront-ui] .summary-total strong{font:600 34px/1 var(--condensed);color:var(--red)}
html[data-storefront-ui] .payment-pickup{gap:8px;margin-top:24px;padding-top:22px}
html[data-storefront-ui] .payment-pickup strong{font-size:15px;line-height:1.7}
html[data-storefront-ui] .payment-pickup :is(span,small){font-size:12px;line-height:1.7}
html[data-storefront-ui] .lookup-panel{background:transparent;border-color:var(--line);padding:14px 0}
html[data-storefront-ui] .lookup-panel .label{font-size:11px;color:var(--ink-soft)}
html[data-storefront-ui] .lookup-panel>div{gap:8px}
html[data-storefront-ui] .lookup-panel input{width:100%;min-width:0;padding:8px;font-size:16px}
html[data-storefront-ui] .payment-step-actions{padding-top:18px;border-top:1px dashed var(--line);gap:10px}
html[data-storefront-ui] .payment-step-actions>*{flex:1}

html[data-storefront-ui] .customer-order-detail{border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow)}
html[data-storefront-ui] .customer-order-detail>.panel-head{padding:24px;border-bottom:1px dashed var(--line);background:transparent}
html[data-storefront-ui] .customer-order-detail>.panel-head h3{font:600 29px/1.2 var(--condensed);letter-spacing:.02em;overflow-wrap:anywhere}
html[data-storefront-ui] .customer-order-detail>.panel-head small{font-size:11px;color:var(--ink-soft)}
html[data-storefront-ui] .customer-order-detail>.panel-body{padding:28px}
html[data-storefront-ui] .detail-block{margin-bottom:28px}
html[data-storefront-ui] .detail-block h3{font-size:17px;line-height:1.5;margin-bottom:16px}
html[data-storefront-ui] .detail-kv{grid-template-columns:90px minmax(0,1fr);gap:14px 20px;font-size:13px;line-height:1.8}
html[data-storefront-ui] .detail-kv dt{color:var(--ink-soft)}
html[data-storefront-ui] .order-primary-qr{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:none;width:min(100%,440px);padding:24px;gap:16px;margin-bottom:32px}
html[data-storefront-ui] .order-primary-qr h3{font-size:22px}
html[data-storefront-ui] .order-primary-qr .qr-code{width:min(100%,260px);height:auto;border:12px solid #fff;background:#fff;box-shadow:none}
html[data-storefront-ui] .qr-card p{font-size:11px;line-height:1.8}
html[data-storefront-ui] .pickup-ready{color:var(--mint-deep);font-size:12px}
html[data-storefront-ui] .order-history-details summary{min-height:52px;font-size:13px}
html[data-storefront-ui] .timeline-item{min-height:59px}
html[data-storefront-ui] .timeline-item strong{font-size:12px}
html[data-storefront-ui] .timeline-item small{font-size:11px}
html[data-storefront-ui] :is(.notice,.refund-status,.fulfillment-resolution,.pickup-change-history,.pickup-update-notice){border:1px solid var(--line);border-radius:5px;background:var(--soft);color:var(--ink);font-size:12px;line-height:1.8}
html[data-storefront-ui] .order-detail-actions{padding-top:14px;gap:12px}
html[data-storefront-ui] .pickup-help-card{background:var(--paper);border-color:var(--line)}
html[data-storefront-ui] .pickup-image-gallery{border-radius:5px;overflow:hidden}
html[data-storefront-ui] .modal-backdrop{background:#27000a66;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-storefront-ui] .modal-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 80px #19061033}
html[data-storefront-ui] .modal-foot{background:var(--paper);border-color:var(--line)}
html[data-storefront-ui] .modal-body>form>.form-actions{background:var(--paper);border-color:var(--line)}
html[data-storefront-ui] .modal-close{width:40px;height:40px;color:var(--ink)}
html[data-storefront-ui] .toast{background:var(--red);color:var(--paper);border:1px solid var(--paper);box-shadow:none;border-radius:4px}
html[data-storefront-ui] .auth-page{background:var(--surface);border-color:var(--line)}

@media(max-width:760px){
  html[data-storefront-ui] #app-main{padding:0 20px 48px}
  html[data-storefront-ui] .topbar{padding:14px 20px;min-height:72px;gap:10px}
  html[data-storefront-ui] .brand{width:114px}
  html[data-storefront-ui] .brand:before{height:34px}
  html[data-storefront-ui] .topbar-tools{gap:6px}
  html[data-storefront-ui] .storefront-home-link{display:none}
  html[data-storefront-ui] :is(.topbar-order-button,.customer-auth-button,.storefront-appearance-trigger,.customer-topbar-account){min-height:38px;padding:0 9px;box-shadow:none;font-size:11px}
  html[data-storefront-ui] .storefront-appearance-trigger{width:34px;padding:7px}
  html[data-storefront-ui] .locale-switch{min-height:38px;padding:2px}
  html[data-storefront-ui] .locale-button{min-width:25px;padding-inline:4px;font-size:10px}
  html[data-storefront-ui] .order-label-full{display:none}
  html[data-storefront-ui] .order-label-short{display:inline}
  html[data-storefront-ui] :is(.orders-intro,.payment-step-head){display:block;padding:36px 64px 24px 0;margin-bottom:22px}
  html[data-storefront-ui] :is(.orders-intro h1,.payment-step-head h1){font-size:33px;margin-top:8px}
  html[data-storefront-ui] .order-doodle{width:60px;height:64px;bottom:24px}
  html[data-storefront-ui] .orders-intro-note{margin-top:16px}
  html[data-storefront-ui] :is(.orders-intro p,.payment-step-head p){font-size:12px;line-height:1.8}
  html[data-storefront-ui] .back-link{margin-bottom:16px;font-size:11px}
  html[data-storefront-ui] .order-lookup-panel{padding:20px}
  html[data-storefront-ui] .contact-lookup-fields{grid-template-columns:minmax(0,1fr);gap:12px}
  html[data-storefront-ui] .contact-lookup-fields>.primary-button{width:100%;justify-content:center;min-height:48px}
  html[data-storefront-ui] .order-card{padding:18px;gap:18px}
  html[data-storefront-ui] .order-card-head{gap:10px}
  html[data-storefront-ui] .order-card h3{font-size:23px}
  html[data-storefront-ui] .order-card-side{padding-top:15px;border-top:1px dashed var(--line)}
  html[data-storefront-ui] .order-total{font-size:30px}
  html[data-storefront-ui] .order-card-side .tiny-button{min-width:78px}
  html[data-storefront-ui] .payment-step-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  html[data-storefront-ui] .payment-step-main{gap:14px}
  html[data-storefront-ui] :is(.payment-amount,.bank-card,.payment-proof-form,.payment-order-card){padding:20px}
  html[data-storefront-ui] .payment-countdown{padding:14px 16px}
  html[data-storefront-ui] .payment-amount strong{font-size:41px}
  html[data-storefront-ui] .customer-order-detail>.panel-head{padding:18px;gap:12px;align-items:flex-start}
  html[data-storefront-ui] .customer-order-detail>.panel-head h3{font-size:25px}
  html[data-storefront-ui] .customer-order-detail>.panel-body{padding:18px}
  html[data-storefront-ui] .detail-kv{grid-template-columns:70px minmax(0,1fr);gap:12px;font-size:12px}
  html[data-storefront-ui] .order-primary-qr{padding:20px 16px;margin-bottom:28px}
  html[data-storefront-ui] .order-primary-qr .qr-code{width:min(100%,240px)}
  html[data-storefront-ui] .site-footer{padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  html[data-storefront-ui] .modal-card{max-height:calc(100dvh - 32px)}
}
@media(max-width:360px){
  html[data-storefront-ui] .topbar{padding-inline:16px;gap:7px}
  html[data-storefront-ui] .brand{width:96px}
  html[data-storefront-ui] .topbar-tools{gap:4px}
  html[data-storefront-ui] :is(.topbar-order-button,.customer-auth-button){padding-inline:7px}
  html[data-storefront-ui] #app-main{padding-inline:16px}
  html[data-storefront-ui] .bank-card{padding:16px}
  html[data-storefront-ui] .bank-details strong{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  html[data-storefront-ui] :is(button,a,.order-card){transition:none}
}