* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f5f5f0;
    color: #1a1a1a;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 100px;
}

header {
    text-align: center;
    padding: 2rem 1rem 1rem;
    background: white;
    border-bottom: 1px solid #eee;
}

header h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

header p {
    font-size: 14px;
    color: #888;
}

.closed-message {
    text-align: center;
    padding: 4rem 1.5rem;
    margin-top: 2rem;
}

.closed-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.closed-sub {
    font-size: 15px;
    color: #888;
}

.category-tabs {
    display: flex;
    gap: 8px;
    padding: 1rem;
    overflow-x: auto;
    background: white;
    border-bottom: 1px solid #eee;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.cat-tab {
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
}

.cat-tab.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.subcategory-tabs {
    gap: 8px;
    padding: 8px 1rem;
    overflow-x: auto;
    background: #f5f5f0;
    border-bottom: 1px solid #e8e8e8;
    scrollbar-width: none;
}

.subcategory-tabs--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}

.subcategory-tabs::-webkit-scrollbar {
    display: none;
}

.subcat-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #d5d5d0;
    background: white;
    color: #777;
    cursor: pointer;
    white-space: nowrap;
}

.subcat-tab.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.subcat-tab--featured {
    color: #b45309;
    border-color: rgba(199, 154, 82, 0.6);
    animation: favBounce 6s ease 0.15s 1 both;
}

.subcat-tab--featured::before {
    content: '★ ';
    font-size: 11px;
}

@keyframes favBounce {
    0%, 9%,
    42%, 51%,
    84%, 100%    { transform: translateY(0); }
    3%, 45%, 87% { transform: translateY(-5px); }
    6%, 48%, 90% { transform: translateY(-2px); }
}

.menu-section-anchor {
    grid-column: 1 / -1;
    height: 0;
    scroll-margin-top: 56px;
}

.menu-section-header {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    padding: 14px 0 8px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 2px;
}

.menu-section-empty {
    grid-column: 1 / -1;
    color: #bbb;
    font-size: 13px;
    padding: 6px 0 12px;
}

.menu-list {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.coming-soon {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
}

.coming-soon-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.coming-soon-subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 1.25rem;
}

.waitlist-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.waitlist-input {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 200px;
}

.waitlist-btn {
    padding: 10px 20px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.waitlist-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Passive availability band on the menu card — info callout, not a
   tappable control. Warm-cream background, no border, no affordance. */
.temp-indicator {
    display: block;
    width: fit-content;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    background: #f5f1eb;
    border-radius: 6px;
    padding: 5px 10px;
    margin: 0;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.temp-indicator-hot   { color: #b45309; }
.temp-indicator-iced  { color: #0369a1; }
.temp-indicator-muted { color: #999; }

/* Passive confirmation pill at the top of the modifier modal — shows
   the Hot/Iced choice the customer just made in the previous popup. */
#modifierTempBadge {
    display: flex;
    justify-content: center;
    margin: 0;
}

#modifierTempBadge:empty { display: none; }

.modal-temp-pill {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    line-height: 1.2;
}

.modal-temp-hot  { background: #fff3e0; color: #b45309; }
.modal-temp-iced { background: #e0f2fe; color: #0369a1; }

.cart-temp-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.cart-temp-hot { background: #fff3e0; color: #b45309; }
.cart-temp-iced { background: #e0f2fe; color: #0369a1; }

.menu-hint {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #16a34a;
    padding: 6px 1rem 0;
}

.menu-card-unavailable {
    opacity: 0.5;
}

.out-of-stock-badge {
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 8px;
    padding: 5px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 16px;
}

.menu-card-tile {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.menu-card-tile-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.menu-card-tile-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.menu-card-tile .menu-card-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 3px;
}

.menu-card-tile .menu-card-desc {
    font-size: 11px;
    line-height: 1.4;
    flex: 1;
    margin-bottom: 0;
    overflow-wrap: break-word;
}

.menu-card-tile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-card-tile .add-btn {
    margin-left: 0;
    flex-shrink: 0;
}

.menu-card-tile .out-of-stock-badge {
    font-size: 10px;
    padding: 4px 6px;
}

.menu-card-info { flex: 1; }

.menu-card-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.menu-card-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
}

.menu-card-desc {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.menu-card-price {
    font-size: 14px;
    font-weight: 500;
}

.add-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 12px;
    flex-shrink: 0;
    line-height: 1;
}

.add-btn:hover { background: #f5f5f0; }

.cart-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 440px;
    background: #1a1a1a;
    color: white;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 100;
}

#cartCount { font-size: 13px; opacity: 0.7; }
#cartTotal { font-size: 15px; font-weight: 500; }

/* Lock the page underneath while any popup is open. JS sets `top`
   to the current scrollY and restores it on close, so the page can
   never be left stuck unable to scroll. width:100% prevents layout
   collapse from position:fixed.                                    */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    z-index: 200;
    /* overscroll-behavior on the backdrop is a second line of defense
       against scroll chaining if a touch starts on the dim area.   */
    overscroll-behavior: contain;
}

.modal-box {
    background: white;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-box h2 {
    font-size: 20px;
    font-weight: 600;
}

.cart-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#modifierModal .modifier-instructions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

#modifierModal .instructions-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

#modifierModal .modifier-notes-warning {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #999;
}

#modifierModal .modifier-notes-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    outline: none;
}

#modifierModal .modifier-notes-input:focus {
    border-color: #1a1a1a;
}

#modifierModal .modifier-notes-input::placeholder {
    color: #aaa;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 16px;
    padding-top: 8px;
}

#cartModal .modal-box input:not([type="checkbox"]) {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
}

#cartModal .modal-box input:not([type="checkbox"]):focus { border-color: #1a1a1a; }

#checkoutBtn {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

#checkoutBtn:hover { background: #333; }

#closeModal {
    width: 100%;
    padding: 12px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.result-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    gap: 12px;
}

.result-icon { font-size: 64px; }

.result-page h1 {
    font-size: 24px;
    font-weight: 600;
}

.result-page p {
    font-size: 15px;
    color: #888;
}

.order-num {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a !important;
}

.back-btn {
    margin-top: 1rem;
    padding: 14px 28px;
    background: #1a1a1a;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.mod-group {
    background: #f6f6f4;
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.mod-group:last-child {
    margin-bottom: 0;
}

.mod-group-name {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mod-group-req-label {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 400;
}

.mod-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 12px;
}

.mod-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f5f5f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.mod-option input { width: 16px; height: 16px; cursor: pointer; }

.mod-option span:nth-child(2) { flex: 1; }

/* For syrup options the name is a <span class="mod-opt-name">, not :nth-child(2). */
.mod-opt-name { flex: 1; }

.mod-price {
    font-size: 13px;
    color: #888;
}

/* Pump stepper — appears inline inside a syrup mod-option when checked */
.syrup-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pump-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #d0d0cc;
    background: white;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #333;
    -webkit-tap-highlight-color: transparent;
}

.pump-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.pump-count {
    min-width: 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ── Modifier accordion ─────────────────────────────────────────── */
.mod-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 14px;
    gap: 8px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.mod-group-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.mod-group-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mod-group-req-pill {
    font-size: 10px;
    font-weight: 500;
    color: #555;
    background: #efefef;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.mod-group-summary {
    font-size: 12px;
    color: #aaa;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mod-group[data-open="true"] .mod-group-summary {
    display: none;
}

.mod-group-chevron {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.mod-group-chevron::before {
    content: '›';
}

.mod-group[data-open="true"] .mod-group-chevron {
    transform: rotate(90deg);
}

.mod-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.mod-group[data-open="true"] .mod-group-body {
    max-height: 800px;
}
/* ────────────────────────────────────────────────────────────────── */

.modifier-base-price {
    font-size: 14px;
    color: #888;
    margin-bottom: 0;
}

.mod-section-heading {
    margin: 0;
}

.mod-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.mod-section-subtitle {
    font-size: 12px;
    color: #aaa;
}

#modifierConfirm {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.5rem;
}

#modifierConfirm:hover { background: #333; }

#modifierCancel {
    width: 100%;
    padding: 12px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

.cart-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.cart-item-name { font-size: 14px; }

.cart-item-mods {
    font-size: 12px;
    color: #888;
}

.cart-edit-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

#modifierTotal { font-weight: 500; }

.modal-box {
    max-height: 85vh;
    overflow-y: auto;
    /* Make the popup's own content the scroll container. contain stops
       scroll chaining into the page behind once the user hits the top
       or bottom of the list. -webkit-overflow-scrolling enables
       momentum scrolling on older iOS Safari.                       */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.spot-label {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

.spot-selector {
    display: flex;
    gap: 10px;
}

.spot-btn {
    flex: 1;
    padding: 14px 12px;
    border-radius: 10px;
    border: 2px solid #ddd;
    background: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.spot-btn-label {
    font-size: 16px;
    font-weight: 600;
}

.spot-btn-desc {
    font-size: 11px;
    font-weight: 400;
    color: #888;
    line-height: 1.3;
}

.spot-btn.active .spot-btn-desc {
    color: rgba(255,255,255,0.75);
}

.spot-btn.active {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: white;
}

.tip-selector {
    display: flex;
    gap: 8px;
}

.tip-btn {
    flex: 1;
    padding: 12px 6px;
    border-radius: 10px;
    border: 2px solid #ddd;
    background: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.tip-btn.active {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: white;
}

#tipCustomRow {
    margin-top: 8px;
}

.tip-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 4px;
}

.tip-label-optional {
    font-weight: 400;
    color: #999;
}

.cart-tip-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #666;
    padding-top: 6px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 16px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    margin-top: 4px;
}

.reorder-banner {
    background: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
    padding: 10px 1rem;
}

.reorder-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reorder-banner-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #166534;
    font-weight: 500;
    flex: 1;
}

.reorder-banner-wave { font-size: 18px; }

.reorder-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reorder-btn {
    padding: 7px 14px;
    background: #16a34a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.reorder-dismiss {
    padding: 4px 8px;
    background: transparent;
    color: #6b7280;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.choice-option-card {
    padding: 12px 14px;
    border: 2px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 8px;
}

.choice-option-card:last-child { margin-bottom: 0; }

.choice-option-card.selected {
    border-color: #1a1a1a;
    background: #f9f9f9;
}

.choice-option-card:hover:not(.selected) {
    border-color: #ccc;
    background: #fafafa;
}

.choice-opt-name {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

.choice-opt-desc {
    font-size: 13px;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
}

/* Footer buttons in the multi-step item flow (Back / Cancel).
   Same visual weight as the modifier modal's Cancel.            */
#choiceBackBtn,
#tempCancelBtn {
    width: 100%;
    padding: 12px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    margin-top: 6px;
}

.cart-choice-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Fulfillment gate ────────────────────────────────────────────── */
.fulfillment-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f5f5f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.gate-inner {
    width: 100%;
    max-width: 420px;
}

.gate-brand {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

.gate-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 1.25rem;
}

.gate-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gate-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.gate-btn:active {
    border-color: #1a1a1a;
    background: #fafafa;
}

.gate-btn.active {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: white;
}

.gate-btn.active .gate-btn-desc {
    color: rgba(255,255,255,0.7);
}

.gate-btn-label {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.gate-btn.active .gate-btn-label {
    color: white;
}

.gate-btn-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.35;
}

.gate-spot-btn {
    align-items: center;
    padding: 1.25rem;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}

.gate-spot-btn.active {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: white;
}

.gate-confirm-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gate-confirm-btn:disabled {
    background: #ccc;
    cursor: default;
}

.gate-back-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    padding: 0 0 1rem 0;
    cursor: pointer;
    display: block;
    -webkit-tap-highlight-color: transparent;
}

/* ── Add-to-home-screen nudge ─────────────────────────────────────────
   A slim bar pinned to the bottom of the viewport, floating just above
   the Safari toolbar. On-brand charcoal/gold/cream and deliberately quiet
   so it reads as a tip rather than an interruption.

   z-index 1000 puts it above page content but below the loyalty modal
   (1100), so the two can never fight. env(safe-area-inset-bottom) keeps
   it clear of the iPhone home indicator; the extra bottom margin is what
   makes it float rather than sit flush against the toolbar.           */
/* Positioning shell only: holds the card and, on iOS, the pointer arrow
   beneath it. pointer-events:none so the transparent area either side of
   the card never swallows a tap meant for the page underneath.         */
.install-nudge {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* float above the toolbar, and clear the home indicator on notched iPhones */
    margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.install-nudge-card {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: calc(100% - 20px);   /* 10px breathing room each side on phones */
    max-width: 440px;
    padding: 12px 14px;
    background: #F5EFE6;
    border: 1px solid #EADFC6;
    border-left: 3px solid #B6913F;
    border-radius: 10px;
    box-shadow: 0 -2px 12px rgba(38, 33, 29, 0.12);
    text-align: left;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* iOS share icon, inline with the sentence */
.share-glyph {
    vertical-align: -3px;
    margin: 0 2px;
}

/* Points down at the Safari share button. Decorative, so it never takes
   taps; the gentle bounce is there to draw the eye to the toolbar.     */
.nudge-arrow {
    pointer-events: none;
    display: block;
    animation: nudge-arrow-bounce 1.3s ease-in-out infinite;
}

@keyframes nudge-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .nudge-arrow { animation: none; }
}

.install-nudge-emoji {
    font-size: 18px;
    line-height: 1.4;
    flex: 0 0 auto;
}

.install-nudge-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #26211D;
}

.install-nudge-text strong {
    font-weight: 600;
    color: #26211D;
}

.install-nudge-share {
    font-weight: 600;
    color: #B6913F;
}

.install-nudge-close {
    flex: 0 0 auto;
    margin: -4px -4px 0 0;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #9a9086;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.install-nudge-close:active { color: #26211D; }

/* ── Closed screen ────────────────────────────────────────────────────
   Mirrors the open pickup gate so the café keeps its shape when shut —
   same two buttons, same wording — only greyed and inert, with one live
   control (Browse) beneath them. Not a fixed overlay like the real gate:
   it scrolls with the page and leaves the bottom of the viewport to the
   add-to-home-screen nudge.                                           */
.closed-screen {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    box-sizing: border-box;
}

.closed-screen .closed-message {
    padding: 0 0 1.5rem;
    margin-top: 0;
}

/* Greyed copies of Curbside / Counter pickup. The disabled attribute
   already blocks clicks — pointer-events is the belt to that braces, so
   a stray tap can never reach them however the button is rebuilt.     */
.gate-btn-disabled,
.gate-btn-disabled:active {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
    background: #f7f7f5;
    border-color: #e6e6e2;
}

.closed-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ece9e2;
    color: #6b6257;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 2px;
}

/* Optional owner note ("Back at 2pm"). Sits between the closed title and
   the hours link. Warm gold on parchment rather than a red/amber alert box,
   so it reads as a deliberate note from the cafe and not as an error the
   customer has to solve. Absent entirely when no note is set.

   The wrapping rules are the layout guarantee that pairs with the 160-char
   server-side cap: even a single unbroken 160-character token breaks and
   wraps inside the card instead of widening the screen. */
.closed-note {
    max-width: 32ch;
    margin: 1rem auto 0;
    padding: 12px 16px;
    border: 1px solid rgba(182, 145, 63, 0.38);
    border-radius: 10px;
    background: rgba(182, 145, 63, 0.09);
    color: #26211D;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* The only thing on the closed screen with colour on it, so it reads as
   the one available action. */
.browse-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 12px;
    background: #B6913F;
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.browse-btn:active { background: #9d7c34; }

/* ── Browse-only menu ─────────────────────────────────────────────────
   Header strip for the view-only menu: says why there is nothing to tap,
   and carries the way back to the closed screen.                      */
.browse-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #FBF7EF;
    border-bottom: 1px solid #EADFC6;
    color: #26211D;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.browse-banner-text { flex: 1 1 auto; }

.browse-back-btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid #EADFC6;
    border-radius: 8px;
    background: #fff;
    color: #26211D;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.browse-back-btn:active { background: #f2ece1; }

/* Hours link on the closed screen — the one thing to tap besides Browse, so
   it gets brand gold and a tap target well over the 44px minimum. */
.hours-link {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 4px;
    color: #B6913F;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}

.hours-link:active { color: #9d7c34; }

/* ── Pastry upsell modal ───────────────────────────────────────────────
   Sits on the ordering page, so it borrows that page's furniture: the
   shared .modal backdrop and .modal-box sheet, the same 10px radii and
   14px tap targets as #checkoutBtn. Charcoal #26211D for text, gold
   #B6913F for the one thing we want tapped. The Poppins-first stack
   matches the loyalty modal and the install nudge already on this page
   — index.html loads no webfont, so in practice all three render in the
   system font together, which is the point: this should look like the
   rest of the app, not like a promo that wandered in.                 */
.upsell-box {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #26211D;
}

.upsell-title {
    font-size: 20px;
    font-weight: 600;
    color: #26211D;
}

.upsell-sub {
    font-size: 14px;
    color: #6b6257;
    margin: -6px 0 2px;
}

.upsell-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A <button>, not a div: the whole row is the tap target, and it stays
   keyboard-reachable without any extra ARIA. */
.upsell-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    text-align: left;
    background: #FBF7EF;
    border: 1px solid #EADFC6;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.upsell-item:hover  { border-color: #B6913F; }
.upsell-item:active { background: #F5EEE0; }

/* Fixed-size thumbnail slot, present on every card whether or not the item has
   a photo. Because the box is sized here and not by the image, the modal opens
   at its final height and a photo arriving late (or never) shifts nothing.
   The croissant is the empty state: it sits in the slot's background, and the
   photo simply paints over it once the browser has it. */
.upsell-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #F3EAD8;
    display: block;
}

.upsell-thumb::after {
    content: '\1F950';                /* 🥐 — reads as "pastry", not "missing image" */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0.55;
}

/* Above the placeholder, and opaque, so a loaded photo hides it completely.
   onerror sets display:none on this element alone, uncovering the croissant. */
.upsell-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #F3EAD8;
    z-index: 1;
}

.upsell-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;          /* lets a long description ellipsize instead of shoving the price off */
    flex: 1;
}

.upsell-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #26211D;
}

.upsell-item-desc {
    font-size: 12px;
    color: #6b6257;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upsell-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.upsell-item-price {
    font-size: 15px;
    font-weight: 600;
    color: #26211D;
}

.upsell-add {
    padding: 5px 12px;
    background: #B6913F;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Declining is the straight-through path, so it reads as the plain
   secondary action — same shape as #closeModal, no colour competing
   with the gold Add pills. */
.upsell-decline {
    width: 100%;
    margin-top: 4px;
    padding: 14px;
    background: white;
    color: #6b6257;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.upsell-decline:hover { border-color: #26211D; color: #26211D; }

/* The sheet is compact on purpose. It opens on a phone at the exact moment
   someone is trying to pay, so three cards with photos have to clear a typical
   viewport without scrolling — a modal that needs a scroll to reach "No thanks"
   is a modal standing between a customer and a sale. The shared .modal-box
   padding (2rem 1.5rem) and 12px gap are trimmed here only, so every other
   popup on the page keeps the roomier spacing it has today. */
.upsell-box {
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 10px;
}

.upsell-box .upsell-title { font-size: 19px; }