/* El Molcajete footer: dark brand footer, big pickup button, account-aware chip. Delete the file (and its entry in the config) to revert. */
html body footer.mol-footer { position: relative; margin: 56px 0 0; padding: 40px max(20px, calc((100% - 1180px) / 2)) 30px; background: linear-gradient(165deg, #191816 0%, #23201d 100%) !important; color: #f6ece2 !important; border-radius: 30px 30px 0 0; border: 0 !important; box-shadow: none !important; }
html body footer.mol-footer a, footer.mol-footer .mf-link { color: #f6ece2; text-decoration: none; }
html body footer.mol-footer a:hover, footer.mol-footer .mf-link:hover { text-decoration: underline; }
html body footer.mol-footer .mf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.1fr; gap: 34px 40px; align-items: start; }
html body footer.mol-footer h2 { margin: 0 0 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ff7a4d; font-weight: 800; font-family: inherit; }
html body footer.mol-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html body footer.mol-footer li a, footer.mol-footer li .mf-link { display: inline-block; padding: 7px 0; font-size: 15px; background: none; border: 0; cursor: pointer; font-family: inherit; }
html body footer.mol-footer address { font-style: normal; font-size: 15px; line-height: 1.55; margin: 0 0 10px; color: #f6ece2; }

/* brand block */
html body footer.mol-footer .mf-brand img { filter: invert(1) brightness(1.1); height: 40px; width: auto; display: block; margin-bottom: 12px; }
html body footer.mol-footer .mf-brand p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #d8c9ba; }
html body footer.mol-footer .mf-brand strong { color: #fff; }
.mfx-cta { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 14px 22px; border-radius: 999px; background: #d83c1d; color: #fff !important; font-weight: 800; font-size: 16px; text-decoration: none !important; box-shadow: 0 12px 26px rgba(216, 60, 29, .4); }
.mfx-cta svg { width: 18px; height: 18px; }
.mfx-member { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); max-width: 340px; text-decoration: none !important; }
.mfx-member i { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #d83c1d; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; }
.mfx-member b { display: block; font-size: 15px; color: #fff; } .mfx-member span { font-size: 13.5px; color: #ffb599; }
button.mfx-join { display: block; margin: 0 0 16px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit; }
html body footer.mol-footer .mf-social { display: flex; flex-direction: row; gap: 10px; }
html body footer.mol-footer .mf-soc { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; }
html body footer.mol-footer .mf-soc svg { width: 20px; height: 20px; } footer.mol-footer .mf-soc > span:not(.hs-sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body footer.mol-footer .mf-soc:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }

/* visit column: phone as a button */
html body footer.mol-footer .mf-col a[href^="tel:"] { padding: 10px 16px; margin: 4px 0; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-weight: 700; }

/* app install strip */
html body footer.mol-footer .pwa-strip { margin: 0 0 32px; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #f6ece2; }
html body footer.mol-footer .pwa-strip strong { color: #fff; } footer.mol-footer .pwa-strip p { color: #d8c9ba; }
html body footer.mol-footer .pwa-strip button.primary { background: #d83c1d; color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 700; }
html body footer.mol-footer .pwa-strip button.secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 10px 18px; font-weight: 700; }
html body footer.mol-footer .mf-app-note { font-size: 12.5px; color: #b9a99a; }
html body footer.mol-footer .mf-app-note .mf-link { text-decoration: underline; color: #f6ece2; }
html body footer.mol-footer .mf-app-ico { background: rgba(255, 255, 255, .12); color: #fff; }

/* bottom bar */
html body footer.mol-footer .mf-legal { margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: #b9a99a; text-align: left; }
html body footer.mol-footer .sts-credit { color: #b9a99a; padding: 10px 0 0; text-align: left; } footer.mol-footer .sts-credit a { color: #d8c9ba !important; }
html body footer.mol-footer .p8app-flink { display: none !important; }   /* the strip above already has Install / How to install */

@media (max-width: 900px) { html body footer.mol-footer .mf-grid { grid-template-columns: 1fr 1fr; } footer.mol-footer .mf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  html body footer.mol-footer { border-radius: 24px 24px 0 0; margin-top: 40px; padding: 30px 20px calc(110px + env(safe-area-inset-bottom)); }
  html body footer.mol-footer .mf-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .mfx-cta { width: 100%; justify-content: center; }
}

html body footer.mol-footer * { border-color: rgba(255,255,255,.16); }
html body footer.mol-footer .mf-brand strong, html body footer.mol-footer .mf-brand p, html body footer.mol-footer address, html body footer.mol-footer .pwa-strip p, html body footer.mol-footer .pwa-strip strong { color: inherit !important; }
html body footer.mol-footer .mf-brand p { color: #d8c9ba !important; } html body footer.mol-footer .mf-brand strong, html body footer.mol-footer .pwa-strip strong { color: #fff !important; }
html body footer.mol-footer .mf-brand img { filter: invert(1) brightness(1.1) !important; opacity: 1 !important; }
html body footer.mol-footer a, html body footer.mol-footer li a { color: #f6ece2 !important; }
html body footer.mol-footer a.mfx-cta { color: #fff !important; }
html body footer.mol-footer .mf-app-ico { background: rgba(255,255,255,.12) !important; }
html body footer.mol-footer .mf-app-note, html body footer.mol-footer .mf-legal { color: #b9a99a !important; }

html body footer.mol-footer .mf-brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
html body footer.mol-footer .mf-brand > * { position: static !important; }
html body footer.mol-footer .mf-brand .mfx-cta { margin: 4px 0 14px !important; }
html body footer.mol-footer .mf-soc { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.35) !important; } html body footer.mol-footer .mf-soc svg { color: #fff !important; fill: currentColor; stroke: none; }
html body footer.mol-footer .mf-link, html body footer.mol-footer button.mf-link { color: #f6ece2 !important; background: none !important; }
html body footer.mol-footer .mf-brand .mf-social { margin-top: 2px !important; }

html body footer.mol-footer .mf-brand .mfx-member { margin: 0 0 16px !important; padding: 12px 14px !important; }
html body footer.mol-footer .mf-brand .mfx-join { margin: 0 0 16px !important; }
html body footer.mol-footer .mf-brand ul.mf-social { display: flex !important; flex-direction: row !important; gap: 10px !important; height: auto !important; margin: 4px 0 0 !important; }
html body footer.mol-footer .mf-brand ul.mf-social li { display: block !important; height: auto !important; margin: 0 !important; }
html body footer.mol-footer .mf-brand .mf-soc { width: 46px !important; height: 46px !important; flex: none !important; margin: 0 !important; }

/* Empty cart: no tip picker or pickup fields until there is something to pay for. */
#cartDialog:not(:has(.cart-line)) .mol-tip-picker,
#cartDialog:not(:has(.cart-line)) .tip-label,
#cartDialog:not(:has(.cart-line)) #cartTotals,
#cartDialog:not(:has(.cart-line)) #checkoutContact,
#cartDialog:not(:has(.cart-line)) #checkoutButton { display: none !important; }
/* Guest avatar: a person icon instead of the letters MOL. */
.account-avatar.mfx-guest { display: inline-grid; place-items: center; }
.account-avatar.mfx-guest svg { width: 55%; height: 55%; opacity: .85; }