.simple-body > .site-footer { margin-top: auto; }
.simple-body.auth-pending > .site-footer,
.simple-body.auth-pending > p[role="status"] { display: none; }
.simple-body:has(#simple-app:not([hidden])) > .site-footer { padding-bottom: 122px; }
.simple-body #simple-app { flex: 1; }
html:has(body.simple-body) { scrollbar-width: none; }
html:has(body.simple-body)::-webkit-scrollbar,
.simple-body::-webkit-scrollbar,
.simple-body *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.simple-body, .simple-body * { scrollbar-width: none; }
html:has(body.simple-body dialog[open]), body.simple-body:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }
.simple-body .customer-header { justify-content: flex-start; gap: 10px; }
.simple-body .customer-brand { margin-right: auto; }
.account-slide-layer { position: fixed; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 35; background: var(--cream); pointer-events: none; }
.simple-credit { min-height: 40px; padding: 4px 12px 4px 7px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #b9d8c5; border-radius: 999px; background: #edf8f0; color: #18743b; cursor: pointer; }
.simple-credit:hover, .simple-credit:focus-visible { border-color: #23894c; background: #e2f4e7; }
.simple-credit-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #23894c; color: #fff; font-size: 13px; font-weight: 800; }
.simple-credit-copy { display: grid; justify-items: start; line-height: 1.05; }
.simple-credit-copy small { color: #4c7659; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.simple-credit strong { color: #18743b; font-size: 13px; font-weight: 800; }
.simple-credit.owes { border-color: #e3b7b2; background: #fff0ee; color: #a6382d; }
.simple-credit.owes:hover, .simple-credit.owes:focus-visible { border-color: #c65347; background: #ffe5e1; }
.simple-credit.owes .simple-credit-icon { background: #c4473b; }
.simple-credit.owes .simple-credit-copy small, .simple-credit.owes strong { color: #a6382d; }
.simple-receipts-button { min-height: 40px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--green); font-weight: 800; cursor: pointer; }
.simple-receipts-button:hover, .simple-receipts-button:focus-visible { border-color: var(--green); background: var(--soft); }
.simple-receipts-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.simple-receipts-button span { font-size: 12px; }
.simple-body .notification-bell { width: 36px; height: 36px; flex-basis: 36px; padding: 0; line-height: 0; }
.simple-body .notification-bell svg { display: block; width: 20px; height: 20px; margin: auto; }
.simple-body .auth-message { margin-top: 14px; margin-bottom: 0; }
.simple-body .auth-divider { margin: 19px 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.simple-body .auth-divider::before,
.simple-body .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.simple-body .auth-link-hint { margin: -8px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.simple-body #simple-email-auth { gap: 13px; }
.simple-body #simple-email-auth .field { gap: 6px; }
.simple-body .google-button { gap: 10px; }
.google-mark { width: 22px; height: 22px; display: inline-grid; place-items: center; flex: 0 0 22px; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #d9ded7; }
.google-mark img { width: 17px; height: auto; display: block; }
.simple-body .customer-order-intro > .button { margin-bottom: 12px; }

.simple-body button,
.simple-body input,
.simple-body select,
.simple-body textarea { font: inherit; }
.simple-body button { cursor: pointer; }
.simple-body button:disabled { cursor: default; }

.simple-body .customer-view { padding-bottom: 150px; }
.simple-body .simple-home h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.2; letter-spacing: -1px; font-weight: 400; }
.simple-body .simple-home h1 strong { font-weight: 700; }
.simple-body .simple-home h2 { margin: 0; font-size: 21px; }
.simple-body .simple-home p { line-height: 1.6; color: var(--muted); }
.simple-body .intro { margin-bottom: 32px; }
.simple-body .intro p { margin: 0; font-size: 17px; }
.simple-body .menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 30px 0 20px; }
.simple-body .menu-heading .button { flex: 0 0 auto; }
.simple-menu-filters { display: flex; gap: 8px; margin: -4px 0 24px; overflow: hidden; }
.simple-menu-filters button { min-width: 0; min-height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.simple-menu-filters button[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.menu-section + .menu-section { margin-top: 30px; }
.menu-section > h3 { margin: 0 0 14px; font-size: 14px; letter-spacing: .02em; }
.menu-empty { padding: 22px 0; color: var(--muted); }
.check-order-times { margin-top: 34px; padding: 22px; display: grid; justify-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-align: center; }
.check-order-times p { margin: 0; color: var(--muted); font-size: 13px; }
.check-order-times .button { width: min(100%, 360px); min-height: 50px; }
.simple-body .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.simple-body .drink { padding: 22px; display: flex; flex-direction: column; gap: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.simple-body .drink-info { display: flex; flex: 1; align-items: center; gap: 15px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.simple-body .drink-art { width: 58px; height: 65px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; background: var(--soft); font-size: 30px; }
.simple-body .drink-info strong { display: block; font-size: 17px; line-height: 1.35; }
.simple-body .drink-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.simple-body .drink { position: relative; }
.simple-body .drink.snoopy-favorite { margin-top: 40px; padding: 30px; }
.snoopy-decoration { pointer-events: none; }
.snoopy-resting { position: absolute; width: 126px; height: 63px; object-fit: contain; left: 22px; top: -49px; z-index: 1; }
.autumn-frame { position: absolute; inset: -11px; box-sizing: border-box; padding: 30px; border-radius: 31px; background: url('seasonal_icons/autumn-leaves-natural.png') center / 100% 100% no-repeat; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.simple-body .snoopy-favorite:has(.new-drink-badge) { padding-top: 66px; }
.simple-body .drink:has(.new-drink-badge) { padding-top: 66px; }
.simple-body .new-drink-badge { position: absolute; top: -13px; right: 12px; width: 72px; height: 72px; border: 3px solid #fffdf5; border-radius: 18px; overflow: hidden; background: #103e32; transform: rotate(12deg); box-shadow: 0 3px 5px #173f3530; pointer-events: none; }
.simple-body .new-drink-badge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.simple-body .new-drink-badge > span { position: absolute; bottom: 5px; left: 5px; right: 5px; color: #fff; font-family: Georgia, serif; font-size: 9px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; }
.simple-body .drink-info small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.4; }
.simple-body .drink-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.simple-body .price { font-weight: 600; }
.simple-body .discount-price { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; }
.simple-body .discount-current { color: var(--green); font-size: 19px; font-weight: 800; line-height: 1.2; }
.simple-body .discount-price s { color: var(--muted); font-size: 12px; font-weight: 600; }
.simple-body .discount-price em { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.simple-body .quantity { display: flex; align-items: center; gap: 12px; }
.simple-body .quantity button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); color: var(--green); font-size: 22px; }
.simple-body .quantity button:disabled { background: var(--cream); color: #a8aea5; }
.simple-body .quantity output { min-width: 16px; text-align: center; font-weight: 600; }
.simple-body .upcoming-panel { margin-top: 18px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 5px 18px rgba(30,61,51,.045); }
.simple-body .upcoming-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.simple-body .upcoming-heading h2 { font-size: 16px; }
.simple-body .upcoming-heading > span { min-width: 24px; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--green); font-size: 10px; font-weight: 800; text-align: center; }
.simple-body .upcoming { display: grid; gap: 6px; }
.simple-body .pending { width: 100%; padding: 10px 8px; display: grid; grid-template-columns: 72px minmax(0,1fr) 16px; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font-size: 13px; text-align: left; }
.simple-body .pending:first-child { border-top: 0; }
.simple-body .pending:hover, .simple-body .pending:focus-visible { border-radius: 10px; background: var(--soft); }
.simple-body .pending-label { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .45px; }
.simple-body .pending-copy { min-width: 0; display: grid; gap: 3px; }
.simple-body .pending-copy strong { overflow-wrap: anywhere; font-size: 12px; }
.simple-body .pending time { color: var(--muted); font-size: 10px; }
.simple-body .pending-chevron { color: var(--muted); font-size: 24px; line-height: 1; }
.simple-body .chat-upcoming-panel { padding: 16px; }
.simple-body .chat-upcoming-panel .upcoming-heading { margin-bottom: 10px; }
.simple-body .chat-upcoming-panel .upcoming-heading h2 { color: var(--green); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.simple-body .chat-upcoming-panel .upcoming { gap: 8px; }
.simple-body .chat-pending { grid-template-columns: 58px minmax(0,1fr) 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.simple-body .chat-pending:first-child { border-top: 1px solid var(--line); }
.simple-body .chat-pending .pending-label { font-size: 11px; letter-spacing: 0; text-transform: none; }
.simple-body .upcoming-empty { margin: 0; padding: 3px 0 1px; font-size: 12px; }

#order-bar { position: fixed !important; z-index: 40; inset: auto 0 0; box-sizing: border-box; width: auto; margin: 0; padding: 16px 24px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 95%, transparent); backdrop-filter: blur(10px); isolation: isolate; }
#order { width: 100%; max-width: 756px; min-height: 54px; margin: auto; padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 15px; background: var(--green); color: #fff; font-size: 17px; font-weight: 600; }
#order:disabled { background: #e4e6df; color: #838b80; }
#cart-total { font-size: 13px; font-weight: 400; }
.simple-body button, .simple-body a.button { touch-action: manipulation; }
.simple-body button.is-pressed, .simple-body a.button.is-pressed { filter: brightness(.72); transform: none !important; }
.simple-body #order, .simple-body .drink-add, .simple-body #pay-order { transition: background-color .04s ease, filter .04s ease; }
.simple-body #order:active, .simple-body .drink-add:active, .simple-body #pay-order:active,
.simple-body #order.is-pressed, .simple-body .drink-add.is-pressed, .simple-body #pay-order.is-pressed { background: var(--dark); filter: brightness(.68); }
.simple-body .drink, .simple-body .coffee-chat-receipt { transition: filter .04s ease; }
.simple-body .drink.is-pressed, .simple-body .coffee-chat-receipt.is-pressed { filter: brightness(.86); }
.simple-body #simple-credit:active,
.simple-body .notification-bell:active,
.simple-body #customer-account:active,
.simple-body .drink-info:active,
.simple-body .chat-drink:active,
.simple-body .editable-summary-line:active,
.simple-body [aria-label^="Close"]:active,
.simple-body [aria-label^="Cancel checkout"]:active,
.simple-body #back-to-home:active,
.simple-body #back-to-orders:active,
.simple-body #back-to-settings:active { filter: none !important; }

.simple-body dialog { --dialog-pad: 26px; width: min(520px, calc(100% - 28px)); max-height: 90dvh; box-sizing: border-box; padding: var(--dialog-pad); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 24px; outline: none; background: var(--cream); color: var(--ink); }
.simple-body dialog::backdrop { background: #16261e75; backdrop-filter: blur(4px); animation: simple-backdrop-in .18s ease-out both; }
.simple-body dialog.dialog-closing::backdrop { animation: simple-backdrop-out .16s ease-in both; }
.simple-body .simple-dialog.dialog-closing { animation: simple-dialog-out .16s ease-in both; }
@keyframes simple-backdrop-in { from { background: transparent; backdrop-filter: blur(0); } }
@keyframes simple-backdrop-out { to { background: transparent; backdrop-filter: blur(0); } }
@keyframes simple-dialog-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }
.simple-body .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.simple-body .dialog-head button { display: grid; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--soft); font-size: 25px; line-height: 1; }
.simple-body .simple-dialog > .field { margin: 18px 0; }
.simple-body .simple-dialog input,
.simple-body .simple-dialog select,
.simple-body .simple-dialog textarea { width: 100%; min-width: 0; padding: 14px; border: 1px solid #ced5c8; border-radius: 12px; background: #fff; color: inherit; }
.simple-body .simple-dialog textarea { resize: vertical; }
.simple-body .simple-dialog .primary { width: 100%; min-height: 54px; padding: 17px 22px; border: 0; border-radius: 15px; background: var(--green); color: #fff; font-weight: 600; }
.simple-body .simple-dialog .simple-dialog-secondary { width: 100%; min-height: 48px; margin-top: 9px; }
.simple-body .signup-install-copy { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.simple-body .signup-install-steps { margin: 0 0 20px; padding-left: 24px; color: var(--ink); line-height: 1.65; }
.simple-body .signup-install-steps li + li { margin-top: 8px; }
.simple-body .signup-install-note { display: block; margin: -8px 0 18px; color: var(--muted); }
.simple-body .notification-permission-card { background: var(--cream, #fff); color: var(--ink); }
.simple-body .notification-permission-card p { font-size: 13px; }
.simple-body .simple-cancel-order { width: 100%; min-height: 48px; margin-top: 18px; }
.simple-cancel-notice { padding: 14px 15px; border: 1px solid #e4bfba; border-radius: 13px; background: #fff1ef; color: #8e2f26; line-height: 1.5; }
.simple-body .simple-dialog .simple-cancel-confirm { background: #b84c4c; }
.simple-order-state { width: max-content; margin-bottom: 18px; padding: 5px 9px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.simple-order-state.in-progress { background: #e0edff; color: #24578d; }
.simple-order-lines { margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.simple-order-lines > div, .simple-order-total { display: flex; justify-content: space-between; gap: 14px; }
.simple-order-lines > div + div { margin-top: 9px; }
.simple-order-total { align-items: center; }
.simple-credit-balance { margin: 4px 0 22px; padding: 24px; border: 1px solid #c8ddce; border-radius: 18px; background: #edf8f0; text-align: center; }
.simple-credit-balance small { display: block; margin-bottom: 5px; color: #4c7659; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.simple-credit-balance strong { display: block; color: #18743b; font: 700 38px Fraunces, Georgia, serif; line-height: 1.1; }
.simple-credit-balance.owes { border-color: #e3b7b2; background: #fff0ee; }
.simple-credit-balance.owes small, .simple-credit-balance.owes strong { color: #a6382d; }
.simple-close-tab { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.simple-close-tab p { margin: 0 0 12px; }
.simple-credit-form { display: grid; gap: 13px; }
.simple-credit-form .field { display: grid; gap: 7px; }
.simple-credit-form .field label { font-weight: 700; }
.simple-credit-form .hint { margin: 0; line-height: 1.5; }
.simple-venmo-fallback { display: block; margin-top: 10px; color: var(--green); font-size: 12px; text-align: center; }
.simple-body #simple-bug-word-count { text-align: right; }
.simple-body #simple-bug-word-count.over-limit { color: #b84c4c; font-weight: 800; }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0; }
.calendar-days button { padding: 9px 0; border: 1px solid #d8dfd0; border-radius: 10px; background: #fff; color: inherit; font-size: 15px; }
.calendar-days button:disabled { opacity: .35; }
.calendar-days button[aria-pressed=true] { background: var(--green); color: #fff; }
.calendar-days small { color: var(--muted); text-align: center; font-size: 11px; }
.calendar-month { margin-top: 22px; font-weight: 600; }
.simple-body #calendar { margin-bottom: 24px; }
.simple-body #pickup-form { display: grid; gap: 20px; }
.simple-body #pickup-form .field { gap: 9px; }
.simple-body #pickup-form #pay-order { margin-top: 8px; }
.simple-body .pickup-time-field { min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 110px; }
.simple-body .pickup-time-field legend { margin-bottom: 10px; color: #4c625c; font-size: 11px; font-weight: 700; }
.simple-body .pickup-time-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.simple-body .pickup-time-options button { min-height: 46px; padding: 9px 12px; border: 1px solid #ced5c8; border-radius: 14px; background: var(--paper); color: var(--green); font-size: 14px; font-weight: 700; }
.simple-body .pickup-time-options button[aria-checked="true"] { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 5px 14px rgba(36,93,79,.18); }
.availability-preview-copy { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.availability-preview-times h3 { margin: 0 0 10px; color: #4c625c; font-size: 11px; }
.availability-preview .availability-time { min-height: 46px; padding: 9px 12px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid #ced5c8; border-radius: 14px; background: var(--paper); color: var(--green); font-size: 14px; font-weight: 700; }
.availability-preview .message:empty { display: none; }
.availability-preview #availability-preview-calendar > .button { width: 100%; }
.simple-body .calendar-days button:active, .simple-body .pickup-time-options button:active { filter: none; transform: none; }
.calendar-loading { min-height: 230px; display: grid; align-content: start; }
.calendar-loading > p { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.calendar-skeleton { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.calendar-skeleton span { height: 35px; border-radius: 10px; background: linear-gradient(100deg, #e4e8df 25%, #f4f6f1 45%, #e4e8df 65%); background-size: 220% 100%; animation: calendar-shimmer 1.1s linear infinite; }
@keyframes calendar-shimmer { to { background-position-x: -220%; } }
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 9%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--soft) 48%, transparent); }
#checkout-items { display: grid; gap: 7px; }
.checkout-item-swipe { position: relative; overflow: hidden; border-radius: 12px; background: #b84c4c; }
.checkout-item-swipe .editable-summary-line { position: relative; z-index: 1; background: color-mix(in srgb, var(--soft) 48%, var(--paper)); transition: transform .18s ease; }
.checkout-item-swipe.swiped .editable-summary-line { transform: translateX(-82px); }
.checkout-swipe-delete { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 82px; border: 0; background: #b84c4c; color: #fff; font-weight: 800; }
#checkout-items + .hint { margin-top: 12px; }
.editable-summary-line { width: 100%; align-items: center; color: inherit; text-align: left; }
.editable-summary-line > span { display: grid; gap: 4px; }
.editable-summary-line > span:last-child { flex: 0 0 auto; justify-items: end; }
.editable-summary-line small { color: var(--muted); font-size: 11px; font-weight: 400; }
.chat-drink .drink-info { width: 100%; }
.chat-drink { cursor: pointer; }
.chat-drink .drink-info > span:nth-child(2) { min-width: 0; flex: 1; }
.chat-drink .drink-info small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-drink .drink-chevron { color: var(--muted); font-size: 28px; }
.chat-drink .drink-bottom small { color: var(--muted); }
.simple-receipts { max-width: 760px; margin: 0 auto; }
.simple-receipts .history-heading > div { min-width: 0; }
.simple-receipts .history-heading h1 { margin-top: 16px; }

.simple-body .drink-customizer { inset: auto 0 0; width: min(620px,100%); max-width: none; max-height: min(88dvh,760px); margin: auto auto 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--cream); }
html:has(.simple-body.drink-customizer-open), .simple-body.drink-customizer-open { overflow: hidden; }
.drink-customizer-panel { min-height: min(76dvh,690px); max-height: min(88dvh,760px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.drink-customizer-panel > header { position: relative; padding: 30px 24px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); touch-action: none; }
.drink-customizer-panel > header::before { content: ""; position: absolute; top: 9px; left: 50%; width: 42px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 38%, transparent); transform: translateX(-50%); }
.drink-customizer-panel > header small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.drink-customizer-panel > header h2 { margin: 4px 0 0; font-size: 26px; }
.drink-customizer-close { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%; background: var(--soft); color: inherit; font-size: 25px; }
.drink-customizer-scroll { min-height: 0; padding: 22px 24px; overflow: auto; }
.drink-customizer-description { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.drink-customizer-options { display: grid; gap: 10px; }
.drink-customizer-step, .drink-customizer-check { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.drink-customizer-step > span, .drink-customizer-check > span { display: grid; gap: 4px; }
.drink-customizer-step small, .drink-customizer-check small { color: var(--muted); font-size: 11px; }
.drink-customizer-step .quantity { flex: 0 0 auto; }
.drink-customizer-check { justify-content: flex-start; cursor: pointer; }
.drink-customizer-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--green); }
.drink-customizer-panel > footer { padding: 14px 24px max(18px,env(safe-area-inset-bottom)); display: flex; gap: 10px; border-top: 1px solid var(--line); background: var(--cream); }
.drink-customizer-panel > footer .drink-add { min-height: 54px; flex: 1; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 15px; background: var(--green); color: #fff; font-weight: 700; }
.drink-remove { padding: 0 15px; border: 1px solid #e2b5b1; border-radius: 15px; background: #fff1ef; color: #9a342b; font-weight: 700; }
.checkout-total { margin: 15px 0; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 700; }
.hint { color: var(--muted); font-size: 13px; }
.message { color: #a13e28; font-size: 14px; }
#status:empty { display: none; }
#status { position: fixed; z-index: 70; top: max(16px, env(safe-area-inset-top)); right: auto; bottom: auto; left: 50%; width: max-content; max-width: min(360px, calc(100% - 48px)); margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--dark); color: #fff; box-shadow: 0 10px 28px rgba(15,39,32,.24); transform: translateX(-50%); }
#status.status-show { animation: notification-enter .34s cubic-bezier(.2,.85,.25,1) both; }
#status.status-leaving { pointer-events: none; animation: notification-exit .28s cubic-bezier(.55,.05,.7,.2) both; }
@keyframes notification-enter { from { opacity: 0; transform: translate3d(-50%,-24px,0) scale(.96); } to { opacity: 1; transform: translate3d(-50%,0,0) scale(1); } }
@keyframes notification-exit { to { opacity: 0; transform: translate3d(-50%,-16px,0); } }
.coffee-chat-payment-dialog .button { padding: 14px; border: 1px solid #d1d9ca; border-radius: 12px; background: var(--green); color: #fff; }
.coffee-chat-payment-dialog .secondary { background: var(--soft); color: var(--ink); }
.coffee-chat-payment-dialog .coffee-chat-payment-head { display: flex; justify-content: space-between; gap: 15px; }
.coffee-chat-payment-dialog dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; }
.coffee-chat-payment-dialog dd { margin: 0; }
.coffee-chat-payment-dialog .coffee-chat-credit-line { color: #18743b; }
.coffee-chat-payment-dialog input[type=checkbox],
.coffee-chat-payment-dialog input[type=radio] { width: auto; }
.coffee-chat-payment-dialog #coffee-chat-google-pay { min-height: 48px; margin: 12px 0; }
.coffee-chat-payment-dialog [data-payment-submit] { width: 100%; }
.coffee-chat-payment-dialog [data-payment-status] { margin: 12px 0; }
.coffee-chat-payment-dialog [data-payment-status]:empty { display: none !important; }
.coffee-chat-payment-dialog [data-payment-submit]:disabled {
  opacity: 1;
  border-color: #d9ded9;
  background: #e1e4e1;
  color: #7b847d;
  box-shadow: none;
  cursor: not-allowed;
}
.square-security { margin: 8px 0 12px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: var(--muted); }
.square-security > span:last-child { display: grid; gap: 1px; }
.square-security strong { color: var(--ink); font-size: 10px; line-height: 1.25; }
.square-security small { font-size: 9px; line-height: 1.35; }
.square-security-mark { position: relative; width: 20px; height: 20px; flex: 0 0 20px; border: 3px solid #111; border-radius: 5px; }
.square-security-mark i { position: absolute; inset: 4px; border-radius: 1px; background: #111; }
.coffee-chat-save-card { margin: 0 0 12px; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; cursor: pointer; }
.coffee-chat-save-card input { margin: 1px 0 0; accent-color: var(--green); }
.coffee-chat-payment-loading { min-height: 180px; display: grid; place-items: center; }
.coffee-chat-payment-dialog [data-payment-status].is-spinning { min-height: 24px; display: grid; place-items: center; }
.coffee-chat-spinner { width: 24px; height: 24px; display: inline-block; border: 3px solid #d5ddcf; border-top-color: var(--green); border-radius: 50%; animation: coffee-chat-spin .75s linear infinite; }
@keyframes coffee-chat-spin { to { transform: rotate(360deg); } }
.coffee-chat-payment-divider { margin: 20px 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .9px; }
.coffee-chat-payment-divider::before, .coffee-chat-payment-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.coffee-chat-card-payment h3 { margin: 0 0 12px; font-size: 14px; }
/* Square reserves space beneath its visible two-row card frame on iOS. */
.coffee-chat-card-payment #coffee-chat-card { margin-bottom: -32px; }
.simple-dialog > .coffee-chat-payment-dialog { width: 100%; max-width: none; max-height: none; margin: 20px 0 0; padding: 24px 0 0; overflow: visible; border: 0; border-top: 1px solid #dce0d4; border-radius: 0; background: transparent; }
.simple-dialog:has(.coffee-chat-payment-dialog) #pickup-form > .hint { display: none; }
.simple-dialog > .dialog-head { position: sticky; z-index: 2; top: 0; margin-top: -12px; padding: 12px 0; isolation: isolate; background: var(--cream); }
.simple-dialog > .dialog-head::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--dialog-pad)) calc(-1 * var(--dialog-pad)) 0; background: var(--cream); }
.coffee-chat-payment-dialog { scroll-margin-top: 72px; }

@media (max-width: 600px) {
  .simple-body .customer-view { padding: 24px 20px 145px; }
  .simple-body .simple-home h1 { font-size: 30px; }
  .simple-body .menu { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .simple-body .drink { padding: 20px; gap: 18px; }
  .simple-body .drink-art { width: 56px; height: 56px; }
  .simple-body .drink-bottom { padding-left: 71px; }
  .simple-body .intro { margin-bottom: 34px; }
  .simple-body .menu-heading { align-items: flex-start; margin: 26px 0 18px; }
  .simple-menu-filters { gap: 5px; margin-bottom: 21px; }
  .simple-menu-filters button { flex: 1 1 auto; min-height: 34px; padding: 6px 5px; font-size: 10px; }
  .menu-section + .menu-section { margin-top: 25px; }
  .check-order-times { margin-top: 28px; padding: 19px 16px; }
  .simple-body .menu-heading h2 { max-width: none; font-size: 19px; line-height: 1.25; white-space: nowrap; }
  #order-bar { padding-right: 20px; padding-left: 20px; }
  #status { max-width: calc(100% - 32px); }
  .simple-body dialog { --dialog-pad: 22px; }
  .simple-body .customer-header { gap: 6px; padding-right: 10px; padding-left: 10px; }
  .simple-body .customer-brand { gap: 6px; }
  .simple-body .customer-brand .brand-mark { width: 32px; height: 32px; }
  .simple-body .customer-brand strong { max-width: none; font-size: 13px; }
  .simple-body .notification-bell,
  .simple-body .customer-avatar { width: 34px; height: 34px; flex-basis: 34px; }
  .simple-credit { min-height: 36px; padding-right: 9px; }
  .simple-credit-copy small { display: none; }
  .simple-receipts-button { min-height: 36px; padding: 6px 9px; }
  .simple-receipts-button span { display: none; }
  .simple-body .drink-customizer { width: 100%; }
  .simple-body .calendar-days { gap: 4px; margin: 9px 0; }
  .simple-body .calendar-days button { padding: 6px 0; border-radius: 8px; font-size: 13px; }
  .simple-body .calendar-month { margin-top: 13px; font-size: 13px; }
  .simple-body #calendar { margin-bottom: 15px; }
  .simple-body #pickup-form { gap: 14px; }
  .simple-body .pickup-time-field legend { margin-bottom: 6px; }
  .simple-body .pickup-time-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .simple-body .pickup-time-options button { min-height: 34px; padding: 4px 5px; border-radius: 9px; font-size: 11px; }
  .availability-preview .availability-time { min-height: 34px; padding: 4px 5px; border-radius: 9px; font-size: 11px; }
  .drink-customizer-panel > header, .drink-customizer-scroll { padding-right: 20px; padding-left: 20px; }
  .drink-customizer-panel > footer { padding-right: 20px; padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-skeleton span { animation: none; }
  .coffee-chat-spinner { animation-duration: 1.5s; }
  .drink-customizer-panel { transform: none !important; }
  .simple-body dialog::backdrop, .simple-body dialog.dialog-closing::backdrop,
  .simple-body .simple-dialog.dialog-closing { animation: none; }
  #status.status-show, #status.status-leaving { animation: none; }
}

.guest-account { margin-left:auto; display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:14px; color:var(--muted,#62746b); }
.guest-account[hidden] { display:none; }
.guest-account button,.guest-sign-in-hint button { border:0; padding:8px 0; background:none; color:var(--ink,#173f35); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.guest-sign-in-hint { font-size:14px; color:var(--muted,#62746b); margin:0 0 14px; }

.customer-auth .auth-switch:has(#continue-guest) { margin-top: 20px; }
#continue-guest {
  width: 100%;
  min-height: 56px;
  padding: 14px 22px;
  border: 2px solid var(--green, #2f755f);
  border-radius: 13px;
  background: var(--soft, #edf5f0);
  color: var(--green, #2f755f);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
#continue-guest:hover { background: #e1efe8; }
#continue-guest:focus-visible { outline: 3px solid rgba(47,117,95,.25); outline-offset: 3px; }

/* Decoration never sizes the menu item. Keep the border and artwork fixed in
   pixels, with the normal drink-card spacing and typography underneath. */
.simple-body .menu:has(.woodstock-favorite) { align-items: start; }
.simple-body .drink.woodstock-favorite { min-width: 0; margin: 78px 0 12px; }
.woodstock-decoration { position: absolute; inset: 0; pointer-events: none; }
.woodstock-branch-frame { position: absolute; inset: -5px; border: 4px solid #bb805d; border-radius: 24px; box-shadow: 0 0 0 1.5px #291e16, inset 0 0 0 1.5px #291e16; }
.woodstock-orchard { position: absolute; left: -12px; top: -82px; width: 144px; height: 96px; object-fit: contain; }
.woodstock-apples { position: absolute; right: 6px; bottom: -18px; width: 46px; height: 32px; object-fit: contain; }
.simple-body .woodstock-favorite .drink-info { min-width: 0; }
.simple-body .woodstock-favorite .drink-info > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.simple-body .drink.woodstock-favorite:has(.new-drink-badge) { padding-top: 22px; }
.simple-body .woodstock-favorite .new-drink-badge { top: -61px; right: 4px; width: 48px; height: 48px; }
@media (max-width: 600px) {
  .simple-body .drink.woodstock-favorite:has(.new-drink-badge) { padding-top: 20px; }
}