/* Account styles are scoped; existing catalogue and footer dimensions stay intact. */
.customer-account-button{border:1px solid var(--line);border-radius:99px;padding:10px 14px;background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;margin-right:10px;min-height:40px;white-space:nowrap}
#customerAccountDialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);overflow-y:auto;font-family:Arial, sans-serif}
#customerAccountDialog::backdrop{background:#29373080}
/* Compact only sign-in and verification; authenticated account views keep their own sizing. */
#customerAccountDialog:has(#customerSignedOut:not([hidden])){width:min(460px,calc(100vw - 24px));padding-top:15px;padding-bottom:15px}
#customerAccountDialog [hidden]{display:none!important}
.customer-account-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.customer-account-heading h2{margin:0;font-size:24px}
.customer-account-title-row{display:flex;align-items:center;flex-wrap:wrap;flex:1;gap:4px 8px;min-width:0}
.customer-account-title-row h2{display:flex;align-items:center;min-height:44px;flex:none}
#customerAccountDialog button:not(.lookup-order-card *){font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;cursor:pointer}
#customerAccountDialog button:disabled{opacity:.55;cursor:default}
#customerAccountDialog button:focus-visible,#customerAccountDialog input:focus-visible,#customerAccountDialog textarea:focus-visible,.customer-account-button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
#customerAccountDialog .customer-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#customerAccountDialog #customerGoogleSignIn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:16px;background:#fff;font-size:15px}
#customerGoogleSignIn svg{flex:none}
#customerAccountDialog #customerGoogleSignIn:hover:not(:disabled){background:#fff5f2;border-color:var(--red)}
.customer-login-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#68776e;font-size:13px}
.customer-login-divider::before,.customer-login-divider::after{content:"";height:1px;flex:1;background:var(--line)}
#customerAccountMessage{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
#customerAccountDialog form:not(.lookup-order-card *){display:grid;gap:12px;margin:16px 0}
#customerAccountDialog label:not(.lookup-order-card *){display:grid;gap:6px;font-size:14px}
#customerAccountDialog input:not(.lookup-order-card *),#customerAccountDialog textarea:not(.lookup-order-card *){width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:11px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.customer-muted{color:#68776e;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
#customerAccountAvatar{display:none}
#customerAccountBack{margin:0;flex:none;white-space:nowrap}
/* All signed-in account views share one compact back control on desktop and mobile. */
#customerAccountDialog:has(#customerSignedIn:not([hidden])) #customerAccountBack{font-size:15px;padding:0;width:70px;height:40px;min-height:40px;border-radius:20px;background:#fbf2e2;border-color:#eee1ce;color:#805132}
#customerAccountDialog:has(#customerSignedIn:not([hidden])) #customerAccountBack::before{content:'‹ ';font-size:18px}
#customerAccountEmail{margin:0 0 16px;font-size:14px;color:#000000}
#customerAccountMessage:empty{display:none}
.customer-feature-note{margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--cream);line-height:1.7;font-size:14px}
.customer-feature-note h3{margin:0 0 10px;font-size:16px}.customer-feature-note p{margin:0}
#customerAccountDialog [aria-pressed=true]{background:var(--cream);border-color:var(--ink)}
.customer-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:16px;font-size:13px}
.customer-checkout-hint{font-size:12px;line-height:1.6;color:#68776e;background:var(--cream);padding:10px;border-radius:8px;grid-column:1/-1}
.customer-order-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.45fr);gap:12px;margin:16px 0}
#customerAccountDialog select{width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;font:inherit;font-size:16px}
#customerAccountDialog select:focus-visible,#customerAccountDialog summary:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Keep the refresh control compact; animation follows the actual request state. */
.customer-order-refresh{display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;max-width:100%}
#customerAccountDialog #customerRefreshOrders{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--red);background:#fff;font-size:15px;font-weight:500;line-height:1;border:1px solid currentColor;border-radius:8px;padding:0 5px;height:36px;min-height:36px;flex:none;white-space:nowrap}
#customerAccountDialog #customerRefreshOrders:hover:not(:disabled){background:#fff1ee}
#customerRefreshOrders svg{width:16px;height:16px;flex:none;transform-origin:center}
#customerRefreshOrders{justify-self:start}
#customerRefreshOrders[aria-busy="true"] svg{animation:customer-order-refresh-spin .75s linear infinite}
@keyframes customer-order-refresh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#customerRefreshOrders[aria-busy="true"] svg{animation:none}}
/* Only the orders heading uses this grid; other account panels stay unchanged. */
.customer-account-heading:has(#customerOrderRefresh:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.customer-account-heading:has(#customerOrderRefresh:not([hidden])) .customer-account-title-row,
.customer-account-heading #customerOrderRefresh:not([hidden]){display:contents}
.customer-account-heading:has(#customerOrderRefresh:not([hidden])) h2{font-size:24px;white-space:nowrap}
.customer-account-heading:has(#customerOrderRefresh:not([hidden])) #customerAccountBack{grid-column:3;grid-row:1}
@media(max-width:780px){
  .customer-account-heading:has(#customerOrderRefresh:not([hidden])){grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
  .customer-account-heading:has(#customerOrderRefresh:not([hidden])) #customerAccountBack{grid-column:3}
}
.customer-reorder-preview{padding:12px;background:var(--cream);border-radius:8px;margin:10px 0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.customer-order-entry .lookup-order-card header{flex-wrap:wrap}
.customer-order-entry .lookup-order-card header>div{flex:1 1 220px;min-width:0}
.customer-order-number-row{display:flex;align-items:center;gap:6px;min-width:0}
.customer-order-number-row b{min-width:0;overflow-wrap:anywhere}
.customer-copy-order{flex:none;padding:3px 6px;min-height:26px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);font:11px Arial, sans-serif;cursor:pointer}
.customer-reorder-preview h4{margin:0 0 10px;font-size:16px}.customer-reorder-preview button{margin:4px 6px 0 0}
.customer-reorder-issue{color:#994321}
.customer-address-region{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:388px){.customer-order-toolbar{grid-template-columns:minmax(0,1fr)}}
@media(max-width:780px){.customer-account-preview .site-header{gap:6px}.customer-account-button{margin:0;padding:8px 9px;min-height:40px}.customer-account-preview .site-header .order-lookup-button{margin-left:auto}.customer-account-preview .site-header .bag-button{white-space:nowrap}}
@media(max-width:388px){.customer-account-preview .site-header{padding-left:12px;padding-right:12px;gap:4px}.customer-account-preview .site-header .brand{font-size:23px;letter-spacing:1px}.customer-account-preview .site-header .brand small{font-size:7px;letter-spacing:0}.customer-account-preview .site-header .bag-button{padding:8px}.customer-account-preview .site-header .order-lookup-button{padding:8px}.customer-account-button{padding:8px}#customerAccountDialog{padding:16px}}
/* Home and every signed-in panel share the same width, including mobile gutters. */
#customerAccountDialog:has(#customerSignedIn:not([hidden])){width:min(520px,calc(100vw - 24px));max-width:none}
@media(min-width:781px){#customerAccountDialog:has(#customerSignedIn:not([hidden])){padding:36px;border:0}}
@media(max-width:780px){#customerAccountDialog:has(#customerSignedIn:not([hidden])){padding:14px 16px 18px;border:0}#customerOrders{padding-right:2px}}
#customerOrders .lookup-order-card:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Compact the orders view without changing the home heading or card widths. */
#customerAccountDialog:has(#customerSignedIn:not([hidden]) #customerOrdersPanel:not([hidden])){padding-top:20px;padding-bottom:20px}
.customer-orders-no-match{width:fit-content;max-width:100%;margin:40px auto;text-align:center;overflow-wrap:anywhere}
/* Delivery profile: shared account width, three warm cards, no fixed form height. */
#customerAccountDialog:has(#customerSignedIn:not([hidden]) #customerDetailsPanel:not([hidden])){padding-top:20px;padding-bottom:20px;background:#fffcf7}
#customerAccountDialog:has(#customerDetailsPanel:not([hidden])) #customerAccountTitle{color:#4b3025}
#customerAccountDialog:has(#customerDetailsPanel:not([hidden])) #customerAccountEmail{display:none}
#customerAccountDialog #customerDetailsForm{margin:12px 0 0;gap:10px}
.customer-details-card{display:grid;gap:9px;min-width:0;padding:14px 16px;border:1px solid #f0e7db;border-radius:14px;background:#fffefa;box-shadow:0 3px 12px #78523204}
.customer-details-card h3{display:flex;align-items:center;gap:9px;margin:0 0 1px;color:#52352b;font-size:16px;line-height:22px}
.customer-details-card h3 svg{width:21px;height:21px;flex:none;fill:#863f33}
#customerAccountDialog #customerDetailsForm label{min-width:0;gap:4px;margin:0;color:#383330;font-size:13px;line-height:17px;font-weight:400}
#customerAccountDialog #customerDetailsForm :is(input,textarea,select){height:36px;min-height:36px;margin:0;padding:7px 11px;border:1px solid #e4d9ce;border-radius:8px;background:#fff;color:#302c28;font:400 14px/20px Arial, sans-serif;box-shadow:0 1px 2px #57311d03 inset}
#customerAccountDialog #customerDetailsForm textarea[name="address"]{resize:vertical}
.customer-details-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 12px;border-radius:11px;background:#faf2e5}
#customerAccountDialog #customerDetailsForm .customer-details-identity label{color:#6c6660;font-size:12px}
#customerAccountDialog #customerDetailsForm #customerIdentityEmail{height:22px;min-height:22px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#35302c;font-size:14px}
.customer-details-bound{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:18px;background:#fffdfa;color:#803e31;font-size:12px;white-space:nowrap}
.customer-details-bound svg{width:13px;height:14px;fill:currentColor}
.customer-details-note{display:flex;align-items:flex-start;gap:7px;margin:0 7px;color:#7b7975;font-size:12px;line-height:18px}
.customer-details-note>span{font-size:17px;flex:none}
#customerAccountDialog #customerSaveDetails{width:100%;min-height:44px;margin:0;padding:9px 14px;border:1px solid #913f32;border-radius:9px;background:linear-gradient(110deg,#963f31,#82362d);color:#fff;font-size:16px;font-weight:600}
#customerAccountDialog #customerSaveDetails:hover:not(:disabled){background:#793127}
#customerAccountDialog #customerSaveDetails:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:780px){
  #customerAccountDialog #customerDetailsForm :is(input,textarea,select){font-size:16px}
  .customer-details-card{padding:12px}
}
@media(max-width:380px){
  .customer-details-identity{grid-template-columns:minmax(0,1fr)}
  .customer-details-bound{justify-self:end}
}
#customerDetailsStatus{margin-top:0;margin-bottom:0}
#customerDetailsStatus:empty{display:none}
/* Coupon view only: preserve horizontal padding and the other account views. */
#customerAccountDialog:has(#customerSignedIn:not([hidden]) #customerCouponsPanel:not([hidden])){padding-top:20px;padding-bottom:20px}
/* Rewards view only: match the compact feature panels without changing their width. */
#customerAccountDialog:has(#customerSignedIn:not([hidden]) #customerRewardsPanel:not([hidden])){padding-top:20px;padding-bottom:20px}
/* Account HOME decoration; width is owned by the shared signed-in rule above. */
#customerAccountDialog.customer-home-view:has(#customerSignedIn){padding:26px 24px 0;background:linear-gradient(125deg,#fffefa,#fdfaf5);color:#4b291b;border:1px solid #eaded0}
.customer-home-view>.customer-account-heading{position:relative;align-items:center;padding-left:68px;min-height:44px;margin:0}
.customer-home-view .customer-account-title-row h2{font-size:28px;line-height:1.25;min-height:40px}
.customer-home-view #customerAccountTitle:focus{outline:none} /* Programmatic heading focus, not an interactive control. */
.customer-home-view #customerAccountAvatar{position:absolute;left:0;top:2px;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#f4e7d8;color:#633719;font-size:30px;font-weight:600}
.customer-home-view #customerAccountEmail{margin:2px 0 0 68px;color:#765e51;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.customer-home-welcome{position:relative;display:flex;align-items:center;min-height:112px;margin:4px -12px 0;isolation:isolate;pointer-events:none}
.customer-home-welcome p{position:relative;z-index:1;margin:8px 0 0 14px;font-size:22px;line-height:1.55;letter-spacing:2px;color:#bd874b;transform:rotate(-6deg)}
.customer-home-welcome p span{margin-left:14px;border-bottom:2px solid #e9c69a;padding-bottom:5px}
.customer-home-welcome>svg{position:absolute;right:0;bottom:0;width:185px;height:115px;opacity:.85;z-index:0}
.customer-home-menu{display:grid;gap:12px;margin:0 0 20px}
#customerAccountDialog .customer-home-menu button{display:grid;grid-template-columns:52px minmax(0,1fr) auto 12px;align-items:center;gap:12px;width:100%;min-height:92px;padding:14px;text-align:left;border:1px solid #e5d7c8;border-radius:13px;background:#fffefd;color:#4b291b}
#customerAccountDialog .customer-home-menu button:hover{background:#fff8ee;border-color:#cfad86}
.customer-home-copy{display:grid;gap:6px;min-width:0}
.customer-home-menu strong{font-size:18px;line-height:1.35}
.customer-home-menu small{font-size:12px;line-height:1.5;color:#77716b;overflow-wrap:anywhere}
.customer-home-menu i{font-size:25px;line-height:1;font-style:normal;color:#78716a;text-align:center}
.customer-home-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#faf1e5}
.customer-home-icon svg{width:29px;height:29px;fill:none;stroke:#67391f;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
[data-account-tab="coupons"] .customer-home-icon{background:#fcece2}
.customer-home-badge{display:block;padding:6px 9px;border-radius:30px;background:#fcf3e2;color:#996019;font-size:11px;line-height:1.3;font-weight:600;white-space:nowrap}
.customer-home-badge--coupon{background:#fceae3;color:#ad563e}
.customer-home-badge.is-complete{background:#f0f6e8;color:#587d39}
#customerAccountDialog #customerSignOut{display:block;width:100%;min-height:44px;padding:10px;border:1px solid #cbb39c;border-radius:12px;text-align:center;font-size:16px;font-weight:600;color:#633719;background:transparent}
#customerAccountDialog #customerSignOut:hover{background:#f9efdf}
.customer-home-footer{position:relative;height:90px;margin:8px -24px 0;pointer-events:none;overflow:hidden;border-radius:0 0 16px 16px}
.customer-home-footer span{position:absolute;right:26px;top:10px;z-index:1;font-size:18px;line-height:1.4;letter-spacing:3px;color:#c0915c;transform:rotate(-8deg)}
.customer-home-footer svg{position:absolute;inset:auto 0 0;width:100%;height:55px}
@media(max-width:580px){
  #customerAccountDialog.customer-home-view:has(#customerSignedIn){padding:20px 16px 0}
  .customer-home-view>.customer-account-heading{padding-left:54px}
  .customer-home-view #customerAccountAvatar{width:44px;height:44px;font-size:26px}
  .customer-home-view .customer-account-title-row h2{font-size:24px}
  .customer-home-view #customerAccountEmail{margin-left:54px;font-size:12px}
  .customer-home-welcome{min-height:96px;margin-top:8px}
  .customer-home-welcome p{font-size:18px;letter-spacing:1px}
  .customer-home-welcome>svg{width:142px;height:90px;opacity:.7}
  #customerAccountDialog .customer-home-menu button{grid-template-columns:42px minmax(0,1fr) auto 10px;gap:8px;min-height:78px;padding:12px 10px}
  .customer-home-icon{width:42px;height:42px}
  .customer-home-icon svg{width:26px;height:26px}
  .customer-home-menu strong{font-size:16px}
  .customer-home-copy{gap:4px}
  .customer-home-badge{padding:5px 7px;font-size:10px}
  .customer-home-footer{margin-left:-16px;margin-right:-16px;height:80px}
}
@media(max-width:360px){
  #customerAccountDialog .customer-home-menu button{grid-template-columns:34px minmax(0,1fr) auto 8px;gap:6px}
  .customer-home-icon{width:34px;height:34px}
  .customer-home-icon svg{width:23px;height:23px}
  .customer-home-welcome>svg{width:116px;opacity:.6}
}

/* My orders: compact cream ticket cards. Guest lookup and owner orders are unchanged. */
#customerAccountDialog:has(#customerOrdersPanel:not([hidden])){background:#fffcf7}
#customerAccountDialog:has(#customerOrdersPanel:not([hidden])) #customerAccountTitle{color:#4b3025}
#customerAccountDialog:has(#customerOrdersPanel:not([hidden])) #customerAccountEmail{font-size:15px}
.customer-order-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#customerOrdersPanel .customer-order-toolbar{grid-template-columns:minmax(0,1fr) 104px;gap:10px;margin:10px 0 0}
#customerOrdersPanel .customer-order-toolbar label{position:relative;display:block;margin:0}
#customerOrdersPanel .customer-order-toolbar input,#customerOrdersPanel .customer-order-toolbar select{height:36px;min-height:36px;margin:-5px 0 0;padding:7px 10px;border-color:#e5d9cc;border-radius:8px;background:#fffefa;font-size:12px;font-weight:400}
#customerOrdersPanel .customer-order-toolbar input{padding-left:30px}
#customerOrdersPanel .customer-order-toolbar label:first-child::before{content:'';position:absolute;left:11px;top:7px;width:9px;height:9px;border:1.5px solid #765344;border-radius:50%;pointer-events:none}
#customerOrdersPanel .customer-order-toolbar label:first-child::after{content:'';position:absolute;left:20px;top:17px;width:5px;height:1.5px;background:#765344;transform:rotate(45deg);pointer-events:none}
#customerOrders .customer-order-tile{margin:10px 0 0;padding:12px 14px 10px;background:#fffefa;border:1px solid #ecdfd0;border-radius:12px;box-shadow:0 3px 10px #78523208;color:#292925;overflow-wrap:anywhere}
.customer-order-tile header{gap:8px;align-items:flex-start}
.customer-order-entry .customer-order-tile header>div{flex:1 1 0;gap:3px}
.customer-order-tile .customer-order-number-row{gap:6px;flex-wrap:wrap}
.customer-order-tile header b{font-size:15px;letter-spacing:.3px;line-height:1.3}
.customer-order-tile header small{font-size:10px;color:#8d9092;line-height:1.4}
.customer-order-tile .customer-copy-order{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:78px;min-height:28px;padding:4px 6px;border:1px solid #dce7e0;border-radius:10px;background:#f1f6f3;color:#466958;font-size:13px;line-height:1;white-space:nowrap}
.customer-order-tile .customer-copy-order svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.customer-order-tile .customer-copy-order:hover:not(:disabled){background:#e7efe9;border-color:#9ab3a4}
.customer-order-tile .customer-copy-order.is-copied{background:#466958;border-color:#466958;color:#fff}
.customer-order-tile .customer-copy-order.is-copied:hover:not(:disabled){background:#3b594b;border-color:#3b594b}
.customer-order-tile .lookup-status{padding:5px 11px;border-radius:20px;background:#edf4ff;color:#477ddb;font-size:12px;line-height:1.3;white-space:nowrap}
.customer-order-tile[data-status="已确认"] .lookup-status{background:#fff2dd;color:#cc862c}
.customer-order-tile:is([data-status="配送中"],[data-status="等待取单"],[data-status="已完成"]) .lookup-status{background:#e7f6e7;color:#32934e}
.customer-order-tile:is([data-status="已取消"],[data-status="取消申请中"]) .lookup-status{background:#fae8e3;color:#b74c3e}
.customer-order-tile .lookup-progress.lookup-progress-v2{margin:7px 0 6px;grid-template-columns:repeat(var(--lookup-steps,3),minmax(0,1fr))}
.customer-order-tile .lookup-progress::before{top:8px;left:calc(50% / var(--lookup-steps,3));right:calc(50% / var(--lookup-steps,3));height:2px;background:#e1ded7}
.customer-order-tile .lookup-step{gap:3px;color:#8f9391;min-width:0}
.customer-order-tile .lookup-step span{width:16px;height:16px;font-size:9px;border:1.5px solid #d4d3cc;background:#fffefa;box-shadow:none;color:transparent}
.customer-order-tile .lookup-step b{font-size:10px;font-weight:500;line-height:1.25}
.customer-order-tile .lookup-step:is(.done,.current,.cancelled,.rejected){color:#d7493d}
.customer-order-tile .lookup-step:is(.done,.current,.cancelled,.rejected) span{border-color:#db493d;background:#db493d;color:#fff;box-shadow:none}
.customer-order-tile .lookup-step.done:not(:last-child)::after{content:'';position:absolute;left:calc(50% + 8px);top:8px;width:calc(100% - 16px);height:2px;background:#e35b4c;z-index:0}
.customer-order-tile .lookup-step.current:not(:last-child)::after{content:'';position:absolute;left:calc(50% + 8px);top:8px;width:calc(50% - 8px);height:2px;background:#e35b4c;z-index:0}
.customer-order-tile .lookup-address{display:flex;gap:8px;margin:5px 0;padding:4px 8px;border-radius:6px;background:#faf6ee;font-size:13px;line-height:1.3}
.customer-order-tile .lookup-address-content{gap:6px}
.customer-order-tile .lookup-address-content>span{font-size:13px}
.customer-order-tile .lookup-fulfillment-pill{padding:0;border:0;border-radius:0;font-size:13px;font-weight:500;color:#35322c}
.customer-order-tile .lookup-fulfillment-pill::after{content:' ·';color:#8a8074}
.customer-order-tile .lookup-address i{font-size:18px;line-height:14px;color:#6e5141}
.customer-order-fulfillment-icon{width:18px;height:16px;flex:none;background:#d94737;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 2h13v13H1zm14 4h5l3 5v4h-8z'/%3E%3Ccircle cx='5' cy='16' r='3'/%3E%3Ccircle cx='19' cy='16' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.customer-order-tile.is-pickup .customer-order-fulfillment-icon{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l2 14H3zm3 0V6a4 4 0 0 1 8 0v2h-2V6a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E")}
.customer-order-tile .lookup-items-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;padding:5px 8px;border:0;border-radius:7px;background:#faf6ee}
.customer-order-tile .lookup-thumbs{gap:5px;margin:0;min-width:0}
.customer-order-tile .lookup-item-thumb{width:calc((100% - 10px)/3);max-width:52px;height:auto;aspect-ratio:1;flex:0 0 calc((100% - 10px)/3);border-radius:6px;background:#f6ead4;font-size:26px}
.customer-order-tile .lookup-items-preview ul{padding-left:12px;font-size:10px;line-height:1.3}
.customer-order-tile .lookup-items-preview.has-single-item{grid-template-columns:42px minmax(0,1fr)}
.customer-order-tile .has-single-item .lookup-item-thumb{width:42px;max-width:42px;flex-basis:42px}
.customer-order-tile .has-single-item ul{list-style:none;padding:0;font-size:12px}
.customer-order-tile .lookup-items-preview>div:nth-of-type(2)>small{margin:2px 0 0;padding:0;color:#7d634c;font-size:10px}
.customer-order-tile .lookup-total{justify-content:space-around;gap:10px;margin:6px 0 0;padding:0;border:0;line-height:1.3}
.customer-order-tile .lookup-item-count{display:block;height:auto;margin:0;font-size:12px;font-weight:600}
.customer-order-tile .lookup-total>span{display:none}
.customer-order-tile .lookup-total>b{padding-left:18px;border-left:1px solid #e9dfd2;font-size:21px;line-height:1;color:#f02016}
.customer-order-tile .lookup-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.customer-order-tile .lookup-actions>button{min-width:0;min-height:32px;padding:5px 6px;border:1px solid #de5848;border-radius:6px;color:#cb4a3c;background:#fffefa;font-size:11px;font-weight:600;line-height:1.4}
.customer-order-tile .lookup-actions>.customer-order-rebuy{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(105deg,#e85b49,#d84d40);color:#fff;border-color:#dc5143}
/* Give the open cancellation form breathing room; paired actions stay aligned otherwise. */
.customer-order-tile:has(>.lookup-cancel-form:not([hidden])) .customer-order-rebuy{margin-top:12px}
.customer-order-rebuy::before{content:'';width:16px;height:16px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3l3 13h11l3-10H6M9 20h1m7 0h1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.customer-order-tile.is-expanded .lookup-items-preview,.customer-order-tile.is-expanded .lookup-total{display:none}
.customer-order-tile .lookup-detail-item .lookup-item-thumb{width:42px;height:42px;max-width:none}
@media(max-width:380px){
  #customerOrdersPanel .customer-order-toolbar{grid-template-columns:minmax(0,1fr) 88px;gap:8px}
  #customerOrders .customer-order-tile{padding:10px}
  .customer-order-tile header b{letter-spacing:0}
  .customer-order-tile .lookup-status{padding:5px 8px}
  .customer-order-tile .lookup-actions{gap:8px}
}
@media(max-width:360px){
  .customer-account-heading:has(#customerOrderRefresh:not([hidden])) h2{font-size:20px}
}