/* =========================================
   ESTILOS BASE E UTILITÁRIOS 
   ========================================= */
body, html {
    font-family: 'Inter', sans-serif;
    background: #f4f7fc;
    height: 100%; width: 100%;
    overflow: hidden; 
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
}

#app-flow {
    position: relative; 
    width: 100%;
    max-width: 100%;
    height: var(--menu-viewport-height, 100svh);
    min-height: 0;
    background: #f4f7fc; 
    overflow: hidden; 
}

body[data-surface="menu"] #app-flow {
    min-height: 0 !important;
}

#menu-live-update {
    position: fixed;
    z-index: 4000;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: .55rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: #0c0c3a;
    color: #fff;
    box-shadow: 0 12px 32px rgba(12, 12, 58, .25);
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1rem);
    transition: opacity .2s ease, transform .2s ease;
}

#menu-live-update.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

#menu-live-update .material-icons-outlined {
    flex: 0 0 auto;
    font-size: 1.2rem;
}

@media (max-width: 859px) {
    body[data-surface="menu"] #app-flow {
        top: var(--menu-viewport-offset-top, 0px);
    }
}

.step-section {
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; /* Gruda nas 4 bordas da tela */
    width: 100%;
    height: 100%;
    background: #f4f7fc;
    display: flex; flex-direction: column;
    visibility: hidden;
    transform: none;
    transition: opacity 0.16s ease;
    z-index: 1; opacity: 0; pointer-events: none; 
}
.step-section.active {
    visibility: visible;
    transform: none; opacity: 1;
    z-index: 10; pointer-events: auto;
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

#loading-screen { position: fixed; inset: 0; background: #fff; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.spinner { width: 50px; height: 50px; border: 4px solid #f1f5f9; border-top: 4px solid #0c0c3a; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.address-search-map {
    position: absolute;
    top: 20px;
    left: 76px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(12, 12, 58, 0.14);
    backdrop-filter: blur(12px);
}

/* Personalização do pedido: observações e adicionais gerais */
.drawer-item-note{margin:0 1.5rem 1.25rem;padding:1rem;border:1px solid #ddd6fe;border-radius:1rem;background:#faf5ff}.drawer-item-note label{display:flex;align-items:center;gap:.6rem;color:#6d28d9}.drawer-item-note label>span:last-child{display:flex;flex-direction:column}.drawer-item-note strong{font-size:.78rem}.drawer-item-note label small{color:#7c718b;font-size:.62rem}.drawer-item-note textarea,.order-note-input{width:100%;margin-top:.7rem;padding:.75rem .85rem;border:1px solid #d8b4fe;border-radius:.8rem;background:#fff;color:#0c0c3a;font-size:.78rem;font-weight:650;outline:none;resize:vertical}.drawer-item-note textarea:focus,.order-note-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #ede9fe}.drawer-item-note>small,.note-counter{display:block;margin-top:.3rem;color:#8b83a0;font-size:.6rem;font-weight:800;text-align:right}.checkout-card-heading{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:.8rem;color:#7c3aed}.checkout-card-heading h3{margin:0;color:#1f2937;font-size:.9rem;font-weight:900}.checkout-card-heading p{margin:.15rem 0 0;color:#64748b;font-size:.66rem;font-weight:650}.checkout-card-heading>.material-icons-outlined{padding:.42rem;border-radius:.65rem;background:#ede9fe}.general-extra-option{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid #eef0f4}.general-extra-option:last-child{border-bottom:0}.general-extra-option>div:first-child{display:flex;flex-direction:column}.general-extra-option strong{color:#0c0c3a;font-size:.76rem}.general-extra-option small{color:#16a34a;font-size:.64rem;font-weight:850}.general-extra-option.is-selected strong{color:#6d28d9}.general-extra-stepper{display:flex;align-items:center;border:1px solid #e2e8f0;border-radius:.7rem;background:#f8fafc;overflow:hidden}.general-extra-stepper button{width:32px;height:31px;color:#6d28d9;font-size:1rem;font-weight:900}.general-extra-stepper span{min-width:24px;text-align:center;color:#0c0c3a;font-size:.72rem;font-weight:900}.cart-item-note{display:flex;align-items:flex-start;gap:.2rem;margin-top:.35rem;padding:.4rem .5rem;border-radius:.55rem;background:#fff7ed;color:#9a3412;font-size:.64rem;font-weight:750;line-height:1.35}.cart-item-note .material-icons-outlined{font-size:.85rem}.order-general-note{display:flex;gap:.55rem;margin-top:.85rem;padding:.75rem;border:1px solid #fde68a;border-radius:.8rem;background:#fffbeb;color:#92400e}.order-general-note>.material-icons-outlined{font-size:1.1rem}.order-general-note strong{font-size:.65rem;text-transform:uppercase}.order-general-note p{margin-top:.15rem;white-space:pre-wrap;font-size:.72rem;font-weight:650}

.checkout-add-more { display: flex; align-items: center; gap: .7rem; width: calc(100% - 32px); margin: 0 16px 14px; padding: 13px 15px; color: var(--menu-action, #6d28d9); text-align: left; background: #faf5ff; border: 1px dashed #a78bfa; border-radius: 16px; }
.checkout-add-more > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.checkout-add-more strong { font-size: .78rem; }
.checkout-add-more small { margin-top: 1px; color: var(--menu-muted, #64748b); font-size: .62rem; font-weight: 700; }
.checkout-add-more > .material-icons-outlined:last-child { font-size: 18px; }
.checkout-drinks-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(138px, 46%); gap: 9px; margin-inline: -2px; padding: 2px 2px 7px; overflow-x: auto; scroll-snap-type: x proximity; }
.checkout-drink-option { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px; text-align: left; background: var(--menu-card, #fff); border: 1px solid var(--menu-border, #e2e8f0); border-radius: 14px; scroll-snap-align: start; }
.checkout-drink-option img { width: 48px; height: 48px; object-fit: cover; background: #f1f5f9; border-radius: 10px; }
.checkout-drink-option span { display: flex; min-width: 0; flex-direction: column; }
.checkout-drink-option strong { overflow: hidden; color: var(--menu-text, #0c0c3a); font-size: .67rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.checkout-drink-option small { margin-top: 3px; color: #16a34a; font-size: .64rem; font-weight: 900; }
.checkout-drink-option i { position: absolute; right: 5px; bottom: 5px; display: grid; width: 20px; height: 20px; place-items: center; color: #fff; font-size: 14px; font-style: normal; background: var(--menu-action, #6d28d9); border-radius: 50%; }

.checkout-schedule-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checkout-schedule { grid-column: 1 / -1; }
.checkout-schedule-modes > button { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 10px; color: var(--menu-muted, #64748b); text-align: left; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 13px; }
.checkout-schedule-modes > button.is-active { color: var(--menu-action, #6d28d9); background: #faf5ff; border-color: #a78bfa; box-shadow: 0 0 0 2px #ede9fe; }
.checkout-schedule-modes > button:disabled { cursor: not-allowed; opacity: .42; }
.checkout-schedule-modes .material-icons-outlined { font-size: 20px; }
.checkout-schedule-modes button > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.checkout-schedule-modes strong { font-size: .68rem; line-height: 1.2; }
.checkout-schedule-modes small { margin-top: 2px; font-size: .56rem; font-weight: 700; }
.checkout-schedule-picker { margin-top: 12px; padding: 11px; background: #faf5ff; border-radius: 13px; }
.checkout-schedule-picker label { display: block; margin-bottom: 5px; color: #6d28d9; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.checkout-schedule-picker select { width: 100%; padding: 11px; color: #312e81; font-size: .73rem; font-weight: 850; background: #fff; border: 1px solid #ddd6fe; border-radius: 10px; outline: none; }
.checkout-schedule-picker p { color: #b45309; font-size: .68rem; font-weight: 800; }
.closed-store-modal { position: fixed; inset: 0; z-index: 4100; display: grid; padding: 18px; place-items: center; background: rgba(12, 12, 58, .62); backdrop-filter: blur(7px); }
.closed-store-modal.hidden { display: none; }
.closed-store-modal > div { position: relative; width: min(100%, 350px); padding: 25px 22px 21px; text-align: center; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(12, 12, 58, .28); animation: closedStoreIn 180ms ease-out both; }
@keyframes closedStoreIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.closed-store-close { position: absolute; top: 12px; right: 12px; display: grid; width: 32px; height: 32px; color: #64748b; background: #f1f5f9; border-radius: 50%; place-items: center; }
.closed-store-close .material-icons-outlined { font-size: 17px; }
.closed-store-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 10px; color: #7c3aed; background: #ede9fe; border-radius: 17px; place-items: center; }
.closed-store-modal small { color: #7c3aed; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.closed-store-modal h2 { margin-top: 4px; color: #0c0c3a; font-size: 1.25rem; font-weight: 950; }
.closed-store-modal p { margin: 7px auto 17px; color: #64748b; font-size: .76rem; font-weight: 650; line-height: 1.45; }
#closed-store-schedule { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 45px; color: #fff; font-size: .78rem; font-weight: 900; background: #7c3aed; border-radius: 13px; }
#closed-store-schedule:disabled { background: #cbd5e1; cursor: not-allowed; }

#map .maplibregl-canvas { outline: none; }
#map .maplibregl-ctrl-bottom-right { bottom: 145px; right: 10px; }
#map .maplibregl-ctrl-bottom-left { bottom: 7px; }
#map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
}
.customer-location-dot {
    width: 18px;
    height: 18px;
    border: 4px solid white;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 7px rgba(37, 99, 235, .18), 0 8px 20px rgba(15, 23, 42, .25);
}

.address-search-map input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0c0c3a;
    font-size: 0.86rem;
    font-weight: 800;
    padding: 0 4px;
}

.address-search-map button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #0c0c3a;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.map-search-results {
    position: absolute;
    top: 84px;
    left: 76px;
    right: 20px;
    z-index: 1001;
    display: none;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    padding: 7px;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .18);
    backdrop-filter: blur(16px);
}

.map-search-results.show { display: grid; gap: 4px; }
.map-search-results button {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    width: 100%;
    padding: 10px;
    border-radius: 13px;
    text-align: left;
    color: #0f172a;
}
.map-search-results button:hover { background: #f1f5f9; }
.map-search-results .material-icons-outlined { color: #2563eb; align-self: center; }
.map-search-results strong, .map-search-results small { display: block; }
.map-search-results strong { font-size: .78rem; line-height: 1.25; }
.map-search-results small { margin-top: 3px; color: #64748b; font-size: .66rem; font-weight: 700; }

.confirm-map-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #fde68a;
    border-radius: 13px;
    background: #fffbeb;
    color: #92400e;
    font-size: .76rem;
    font-weight: 900;
}

.address-field-label {
    display: block;
    margin: 0 0 6px 3px;
    color: #475569;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.checkout-address-assist {
    margin: -2px 0 14px;
}

.checkout-address-assist-status {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
    font-size: .69rem;
    font-weight: 800;
    line-height: 1.3;
}

.checkout-address-assist-status .material-icons-outlined { font-size: 16px; }
.checkout-address-assist-status.is-loading { background: #fff7ed; color: #c2410c; }
.checkout-address-assist-status.is-success { background: #ecfdf5; color: #047857; }
.checkout-address-assist-status.is-warning { background: #fffbeb; color: #a16207; }
.checkout-address-assist-status.is-error { background: #fef2f2; color: #b91c1c; }

.checkout-address-suggestions {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.checkout-address-suggestions:empty { display: none; }

.checkout-address-suggestion {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.checkout-address-suggestion:hover,
.checkout-address-suggestion:focus-visible {
    border-color: var(--menu-action);
    background: color-mix(in srgb, var(--menu-action) 4%, white);
    transform: translateY(-1px);
}

.checkout-address-suggestion > .material-icons-outlined {
    color: var(--menu-action);
    font-size: 19px;
}

.checkout-address-suggestion strong,
.checkout-address-suggestion small { display: block; }
.checkout-address-suggestion strong { font-size: .75rem; line-height: 1.25; }
.checkout-address-suggestion small { margin-top: 2px; color: #64748b; font-size: .64rem; font-weight: 700; }
.checkout-address-suggestion .suggestion-action { color: var(--menu-action); font-size: .62rem; font-weight: 900; }

.payment-wait-address {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: -4px 0 12px;
    padding: 10px;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .69rem;
    font-weight: 800;
    line-height: 1.35;
}

.payment-wait-address .material-icons-outlined { font-size: 18px; }
.payment-wait-address.hidden { display: none; }
#payment-method-card.is-locked .pay-btn { opacity: .45; cursor: not-allowed; }

/* =========================================
   TELA 1: BOAS VINDAS (MANTIDA INTACTA)
   ========================================= */
.welcome-banner { position: relative; height: 25vh; background-size: cover; background-position: center; border-radius: 0 0 30px 30px; }
.overlay-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); border-radius: 0 0 30px 30px; }
.store-brand { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; padding-top: 20px; }
.logo-container { width: 85px; height: 85px; background: white; border-radius: 20px; padding: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); margin-bottom: 12px; }
.logo-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
#store-display-name { font-size: 1.8rem; font-weight: 900; color: white; margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }


.status-badge { background: rgba(12,12,58,0.8); color: white; padding: 6px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px); }
.dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; animation: pulse-green 2s infinite; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.welcome-content { padding: 40px 25px; flex: 1; overflow-y: auto; }
.menu-opt-card { background: white; padding: 20px; border-radius: 24px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); width: 100%; text-align: left; transition: 0.2s; border: 1px solid #f8fafc; }
.menu-opt-card:active { transform: scale(0.96); }
.opt-icon { width: 55px; height: 55px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.opt-icon span { font-size: 26px; }
.opt-text strong { display: block; font-size: 1.1rem; color: #0c0c3a; margin-bottom: 2px; }
.opt-text p { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }

/* =========================================
   TELA 2: CARDÁPIO (NAV E GAVETA)
   ========================================= */
.cat-pill {
    padding: 8px 16px; border-radius: 12px;
    background: transparent; color: #64748b;
    font-weight: 800; font-size: 0.85rem;
    white-space: nowrap; transition: 0.3s;
    border: 1px solid transparent;
}

.cat-pill.active {
    background-color: #0c0c3a; /* Fundo escuro */
    color: white; /* Texto branco */
    box-shadow: 0 4px 12px rgba(12, 12, 58, 0.25); /* Sombra elegante */
    border-color: #0c0c3a;
}

#product-drawer { box-shadow: none; }
#product-drawer.open { transform: translateY(0); box-shadow: 0 -15px 40px rgba(12,12,58,0.15); }
#drawer-overlay.open { display: block; opacity: 1; }

#floating-cart {
    background: #0c0c3a;
    padding: 16px 24px; border-radius: 100px;
    /*display: flex; justify-content: space-between; align-items: center; */
    position: fixed; bottom: 30px; left: 20px; right: 20px; z-index: 999;
    animation: slideUpEnter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.checkout-flow-active #floating-cart { display: none !important; }
@keyframes slideUpEnter { from { transform: translateY(150%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* =========================================
   BLINDAGEM DO LAYOUT DOS CARDS (GRID/LISTA)
   ========================================= */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
}

/* Card Vertical (Ofertas) */
.card-oferta {
    background: white; border-radius: 1.2rem; padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;
    display: flex; flex-direction: column; cursor: pointer; position: relative;
    transition: transform 0.2s;
}
.card-oferta:active { transform: scale(0.95); }
.card-oferta .img-box {
    width: 100%; height: 110px; background: #f8fafc;
    border-radius: 0.75rem; margin-bottom: 12px;
    overflow: hidden; position: relative; flex-shrink: 0;
}
.card-oferta .img-box img { width: 100%; height: 100%; object-fit: cover; }
.card-oferta h4 { font-weight: 700; color: #0c0c3a; font-size: 0.85rem; line-height: 1.2; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-oferta .price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }

/* Card Horizontal (Normal) */
.card-normal {
    background: white; border-radius: 1.5rem; padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #f1f5f9;
    display: flex; gap: 16px; cursor: pointer; position: relative;
    transition: transform 0.2s;
}
.card-normal:active { transform: scale(0.95); }
.card-normal .info-box { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.card-normal h4 { font-weight: 800; color: #0c0c3a; font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-normal p.desc { font-size: 0.75rem; color: #64748b; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-normal .img-box {
    width: 110px; height: 110px; background: #f8fafc;
    border-radius: 1rem; overflow: hidden; position: relative; flex-shrink: 0;
}
.card-normal .img-box img { width: 100%; height: 100%; object-fit: cover; }

/* Tag Verde de Promoção */
.tag-oferta {
    position: absolute; top: 0; left: 0; background: #10b981; color: white;
    font-size: 0.65rem; font-weight: 900; padding: 4px 8px;
    border-bottom-right-radius: 12px; border-top-left-radius: 0.75rem; text-transform: uppercase;
}

/* =========================================
   TELA 3: CHECKOUT E COMUNS
   ========================================= */
.input-modern {
    width: 100%; padding: 16px; border: 2px solid #f1f5f9;
    border-radius: 16px; background: white; font-size: 0.95rem;
    font-weight: 600; color: #0c0c3a; transition: 0.3s; outline: none;
}
.input-modern:focus { border-color: #0c0c3a; box-shadow: 0 0 0 4px rgba(12,12,58,0.05); }

.pay-btn {
    background: #f8fafc; border: 2px solid transparent; padding: 12px; border-radius: 12px;
    font-weight: 800; color: #64748b; transition: 0.2s; cursor: pointer; text-align: center; font-size: 0.85rem;
}

/* =========================================
   MAPA
   ========================================= */
.center-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); z-index: 999; pointer-events: none; display: flex; flex-direction: column; align-items: center; }

@media (min-width: 1024px) {
    body { display: flex; justify-content: center; align-items: center; background: #E0E5EC; padding: 40px; }
    #app-flow { width: 100%; max-width: 480px; height: 90vh; max-height: 920px; background: white; border-radius: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 12px rgba(255,255,255,0.5); position: relative; }
}
















/* Garantia de Layout (Anti-Bug do Celular) */
/* Layout de Carrossel Horizontal para Ofertas */
.grid-ofertas-seguro { 
    display: flex; 
    gap: 14px; 
    overflow-x: auto; 
    padding-bottom: 12px; /* Dá um respiro pro card não cortar a sombra ao rolar */
    scroll-snap-type: x mandatory; /* Efeito "ímã" ao rolar no celular */
    -ms-overflow-style: none; /* Esconde barra de rolagem no IE/Edge */
    scrollbar-width: none; /* Esconde barra de rolagem no Firefox */
}

/* Esconde a barrinha cinza de rolagem no Chrome/Safari/Celular */
.grid-ofertas-seguro::-webkit-scrollbar { 
    display: none; 
}

/* Força os cards a manterem a largura fixa e não espremerem na tela */
.grid-ofertas-seguro > div {
    flex-shrink: 0;
    width: 160px; /* Largura ideal para deixar um pedacinho do próximo card aparecendo */
    scroll-snap-align: start; /* Para o "ímã" travar certinho no começo de cada card */
}
.lista-normal-segura { display: flex; flex-direction: column; gap: 16px; }


.checkout-card {
    background: white;
    border-radius: 1.5rem;
    padding: 20px;
    margin: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: 0;
}

/* =========================================
   REDESIGN DO CARDAPIO DIGITAL
   ========================================= */
#step-menu {
    background: #eef3f8 !important;
}

#step-menu > .relative.w-full.h-48 {
    height: 156px !important;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

#menu-logo-img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
}

#menu-store-name {
    font-size: 1.35rem !important;
    max-width: 280px;
}

#step-menu .sticky {
    top: 0;
    background: rgba(238, 243, 248, 0.92) !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.7) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

#category-scroll {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.cat-pill {
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    border: 1px solid #dfe7f1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
    font-size: 0.76rem;
}

.cat-pill.active {
    background: #0c0c3a;
    border-color: #0c0c3a;
    color: #fff;
}

#menu-items {
    padding: 10px 14px 128px;
}

.menu-section {
    padding: 18px 0 4px;
}

.menu-section > .flex.items-center {
    padding: 0 !important;
    margin-bottom: 10px !important;
    align-items: end;
}

.menu-section > .flex.items-center > div:first-child {
    width: 4px !important;
    height: 20px !important;
    background: #2563eb !important;
}

.menu-section h3 {
    font-size: 1.18rem !important;
    line-height: 1.1;
}

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

.menu-offers-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(155px, 170px);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}

.menu-offers-row::-webkit-scrollbar {
    display: none;
}

.menu-products-grid > div,
.menu-offers-row > div,
.card-normal,
.card-oferta {
    border-radius: 16px !important;
    border: 1px solid #dfe7f1 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

.menu-products-grid > div:hover,
.menu-offers-row > div:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important;
}

.menu-products-grid > div {
    padding: 12px !important;
    gap: 12px !important;
    min-height: 116px;
}

.menu-products-grid h4,
.menu-offers-row h4 {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.menu-products-grid p {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
    color: #64748b !important;
}

.menu-products-grid .w-28.h-28 {
    width: 92px !important;
    height: 92px !important;
    border-radius: 14px !important;
}

.menu-offers-row > div {
    padding: 10px !important;
    scroll-snap-align: start;
}

.menu-offers-row .h-24 {
    height: 92px !important;
}

.menu-offers-row button,
.menu-products-grid button {
    width: 32px !important;
    height: 32px !important;
}

#floating-cart {
    left: 14px;
    right: 14px;
    bottom: 16px;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(12, 12, 58, 0.25);
}

@media (min-width: 860px) {
    #app-flow {
        max-width: 1040px !important;
        height: 90vh !important;
        border-radius: 30px !important;
    }

    #step-menu > .relative.w-full.h-48 {
        height: 190px !important;
    }

    .menu-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-offers-row {
        grid-auto-columns: minmax(180px, 210px);
    }
}

@media (min-width: 1180px) {
    .menu-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================
   CARDAPIO DIGITAL PREMIUM
   ========================================= */
:root {
    --menu-bg: #f5f5f5;
    --menu-card: #ffffff;
    --menu-text: #111111;
    --menu-action: #111111;
    --menu-accent: #000000;
    --menu-border: #dedede;
    --menu-muted: #666666;
}

body,
#app-flow,
.step-section,
#step-menu,
#step-checkout,
#step-summary {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--menu-bg) 94%, white), var(--menu-bg)) !important;
    color: var(--menu-text);
}

#loading-screen {
    background: var(--menu-bg);
}

.spinner {
    border-color: color-mix(in srgb, var(--menu-border) 65%, white);
    border-top-color: var(--menu-action);
}

.welcome-banner {
    height: 34vh;
    min-height: 260px;
    border-radius: 0 0 34px 34px;
    overflow: hidden;
}

.overlay-gradient {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.62)),
        linear-gradient(90deg, rgba(0,0,0,0.42), transparent);
}

.store-brand {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 0 22px 24px;
}

.logo-container,
#menu-logo-img {
    animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
}

#store-display-name,
#menu-store-name,
#drawer-title,
.checkout-card h3 {
    color: var(--menu-text) !important;
}

#store-display-name {
    font-size: clamp(2rem, 9vw, 3.4rem);
    letter-spacing: 0;
    line-height: 0.95;
    max-width: 10ch;
}

.status-badge {
    background: color-mix(in srgb, var(--menu-action) 82%, black) !important;
    border-color: rgba(255,255,255,0.24);
}

.welcome-content {
    padding: 22px;
}

.welcome-content h3 {
    color: var(--menu-text);
}

.options-vertical {
    display: grid;
    gap: 10px;
}

.menu-opt-card,
.checkout-card,
#modal-info-content {
    background: color-mix(in srgb, var(--menu-card) 96%, white) !important;
    border: 1px solid var(--menu-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 38px rgba(31, 37, 35, 0.08) !important;
}

.menu-opt-card {
    min-height: 92px;
    padding: 16px;
}

.opt-icon {
    border-radius: 18px;
    background: color-mix(in srgb, var(--menu-accent) 12%, white) !important;
    color: var(--menu-action) !important;
}

.opt-text strong,
.opt-text p {
    color: var(--menu-text) !important;
}

#step-menu > .relative.w-full.h-48 {
    height: 250px !important;
    border-radius: 0 0 34px 34px;
    box-shadow: 0 24px 48px rgba(31, 37, 35, 0.16);
}

#menu-cover-img {
    animation: coverDrift 12s ease-in-out infinite alternate;
}

@keyframes coverDrift {
    from { transform: scale(1); }
    to { transform: scale(1.045); }
}

#step-menu > .relative.w-full.h-48 .absolute.inset-0 {
    background:
        linear-gradient(180deg, transparent 18%, rgba(0,0,0,0.72)),
        linear-gradient(90deg, color-mix(in srgb, var(--menu-action) 34%, transparent), transparent) !important;
}

#menu-logo-img {
    width: 78px !important;
    height: 78px !important;
    border-radius: 22px !important;
    border-color: color-mix(in srgb, var(--menu-card) 88%, white) !important;
}

#menu-store-name {
    color: #fff !important;
    font-size: 1.55rem !important;
}

#step-menu .sticky {
    background: color-mix(in srgb, var(--menu-bg) 82%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--menu-border) 78%, transparent) !important;
    box-shadow: 0 18px 34px rgba(31, 37, 35, 0.08);
}

.cat-pill {
    background: color-mix(in srgb, var(--menu-card) 88%, transparent) !important;
    color: var(--menu-muted) !important;
    border-color: var(--menu-border) !important;
    box-shadow: none !important;
}

.cat-pill.active {
    background: var(--menu-action) !important;
    color: #fff !important;
    border-color: var(--menu-action) !important;
}

#menu-items {
    padding: 4px 14px 128px;
}

.menu-section {
    padding-top: 20px;
    animation: menuFadeUp 440ms ease both;
}

@keyframes menuFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.menu-section-mark {
    width: 6px;
    height: 28px;
    border-radius: 99px;
    background: var(--menu-accent);
}

.menu-section-head p {
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--menu-muted);
    letter-spacing: 0;
}

.menu-section-head h3 {
    font-size: 1.28rem;
    line-height: 1;
    font-weight: 900;
    color: var(--menu-text);
}

.menu-products-grid {
    grid-template-columns: 1fr;
    gap: 9px;
}

.menu-offers-row {
    grid-auto-columns: minmax(150px, 168px);
    gap: 10px;
}

.menu-product-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--menu-card);
    border: 1px solid var(--menu-border);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(31, 37, 35, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    animation: itemPop 360ms ease both;
}

@keyframes itemPop {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.menu-product-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--menu-accent) 52%, var(--menu-border));
    box-shadow: 0 20px 38px rgba(31, 37, 35, 0.12);
}

.menu-product-card--promo {
    padding: 9px;
    display: flex;
    flex-direction: column;
}

.menu-product-card--list {
    min-height: 112px;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 10px;
}

.menu-product-image {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--menu-bg) 76%, white);
    border-radius: 14px;
}

.menu-product-card--promo .menu-product-image {
    height: 92px;
    margin-bottom: 9px;
}

.menu-product-card--list .menu-product-image {
    width: 88px;
    height: 88px;
}

.menu-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 280ms ease;
}

.menu-product-card:hover .menu-product-image img {
    transform: scale(1.06);
}

.menu-product-card h4 {
    color: var(--menu-text);
    font-size: 0.88rem;
    line-height: 1.1;
    font-weight: 900;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-product-kicker {
    font-size: 0.58rem;
    color: var(--menu-muted);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.menu-product-desc {
    color: var(--menu-muted) !important;
    font-size: 0.7rem !important;
    line-height: 1.28 !important;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-product-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
}

.menu-price-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-price-stack span:last-child {
    color: var(--menu-action) !important;
    font-size: 0.98rem;
    font-weight: 900;
}

.menu-add-btn {
    width: 31px !important;
    height: 31px !important;
    border-radius: 12px;
    background: var(--menu-action);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.menu-mini-action {
    font-size: 0.66rem;
    font-weight: 900;
    color: var(--menu-action);
    background: color-mix(in srgb, var(--menu-action) 9%, transparent);
    border-radius: 999px;
    padding: 5px 8px;
    white-space: nowrap;
}

#step-menu .cat-pill,
#step-menu .menu-section-head p,
#step-menu .menu-section-head h3,
#step-menu .menu-product-card h4,
#step-menu .menu-product-kicker,
#step-menu .menu-product-desc,
#step-menu .menu-price-stack span:last-child,
#step-menu .menu-mini-action {
    font-size: 1.005rem !important;
}

#step-menu .menu-section-head p { font-size: 0.91rem !important; }
#step-menu .menu-section-head h3 { font-size: 1.53rem !important; }
#step-menu .menu-product-card h4 { font-size: 1.13rem !important; }
#step-menu .menu-product-kicker { font-size: 0.83rem !important; }
#step-menu .menu-product-desc { font-size: 0.95rem !important; }
#step-menu .menu-price-stack span:last-child { font-size: 1.23rem !important; }
#step-menu .menu-mini-action { font-size: 0.91rem !important; }

.absolute.top-0.left-0.bg-green-500 {
    background: var(--menu-accent) !important;
}

#floating-cart,
#btn-ir-resumo,
#btn-add-drawer,
#btn-confirmar-local,
#step-success button {
    background: var(--menu-action) !important;
}

#floating-cart {
    border-radius: 22px;
    box-shadow: 0 22px 46px color-mix(in srgb, var(--menu-action) 28%, transparent);
}

.input-modern,
.pay-btn,
#product-drawer {
    border-color: var(--menu-border) !important;
}

.input-modern:focus {
    border-color: var(--menu-action) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--menu-action) 10%, transparent) !important;
}

#drawer-price,
#summary-total,
#summary-page-total,
.text-green-500,
.text-green-600 {
    color: var(--menu-action) !important;
}

@media (min-width: 860px) {
    body {
        background:
            var(--menu-bg) !important;
    }

    #app-flow {
        max-width: 1180px !important;
        border-radius: 34px !important;
        overflow: hidden;
    }

    #step-welcome.active {
        display: grid;
        grid-template-columns: minmax(360px, 0.95fr) 1.05fr;
    }

    .welcome-banner {
        height: 100% !important;
        border-radius: 0;
    }

    .welcome-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    #step-menu > .relative.w-full.h-48 {
        height: 280px !important;
    }

    .menu-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-product-card--list {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .menu-product-card--list .menu-product-image {
        width: 96px;
        height: 96px;
    }
}

@media (min-width: 1180px) {
    .menu-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .menu-product-card--list {
        grid-template-columns: minmax(0, 1fr) 82px;
    }

    .menu-product-card--list .menu-product-image {
        width: 82px;
        height: 82px;
    }

    .menu-mini-action {
        display: none;
    }
}

/* Legibilidade reforçada: textos funcionais nunca devem depender de fonte minúscula. */
body[data-surface="menu"] .text-\[9px\]:not(.material-icons-outlined),
body[data-surface="menu"] .text-\[10px\]:not(.material-icons-outlined),
body[data-surface="menu"] .text-\[11px\]:not(.material-icons-outlined),
body[data-surface="menu"] .text-\[12px\]:not(.material-icons-outlined) {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body[data-surface="menu"] .text-xs:not(.material-icons-outlined) {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body[data-surface="menu"] .text-sm:not(.material-icons-outlined) {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

#step-menu .status-badge,
#step-menu .cat-pill,
#step-menu .promo-badge,
#step-menu .menu-old-price,
#step-menu .menu-product-kicker,
#step-menu .menu-mini-action,
#menu-destino-entrega small {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.checkout-step-count,
.checkout-progress b,
.checkout-card-heading p,
.checkout-add-more small,
.checkout-schedule-modes strong,
.checkout-schedule-modes small,
.checkout-schedule-picker label,
.checkout-schedule-picker p,
.checkout-location-primary small,
.checkout-written-address small,
.checkout-save-address p,
.checkout-action-bar small,
.checkout-review-edit,
.checkout-review-label,
.checkout-review-edit button,
.checkout-review-heading button,
.checkout-review-label button,
.address-field-label,
.note-counter,
.drawer-item-note > small,
.drawer-item-note label small,
.cart-item-note,
.order-general-note strong,
.general-extra-option small,
.checkout-drink-option small,
.map-search-results small,
.checkout-address-suggestion small,
.checkout-address-suggestion .suggestion-action {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.checkout-card-heading h3,
.checkout-add-more strong,
.checkout-schedule-picker select,
.checkout-schedule-modes button strong,
.general-extra-option strong,
.general-extra-stepper span,
.checkout-drink-option strong,
.checkout-written-address strong,
.checkout-save-address strong,
.map-search-results strong,
.checkout-address-suggestion strong,
#closed-store-schedule {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.checkout-action-bar > button,
.pay-btn,
.checkout-manual-toggle,
.confirm-map-inline,
.checkout-save-address-actions button,
.general-extra-stepper button,
#btn-add-drawer {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

#step-checkout input,
#step-checkout select,
#step-checkout textarea,
#product-drawer textarea,
#modal-conta-cliente input,
#modal-seletor-endereco select {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.closed-store-modal small { font-size: 13px !important; }
.closed-store-modal p { font-size: 15px !important; line-height: 1.55 !important; }

/* Descrições dos produtos mantêm sua hierarquia, mas continuam confortáveis. */
#step-menu .menu-product-desc,
#drawer-desc {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Checkout em etapas — trilha de pedido */
body[data-surface="menu"] .checkout-journey {
    background:
        radial-gradient(circle at 92% 2%, color-mix(in srgb, var(--menu-accent) 14%, transparent), transparent 25rem),
        linear-gradient(180deg, color-mix(in srgb, var(--menu-bg) 92%, white), var(--menu-bg)) !important;
}

.checkout-journey-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: max(16px, env(safe-area-inset-top)) 16px 13px;
    color: var(--menu-text);
    background: color-mix(in srgb, var(--menu-bg) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--menu-border) 80%, transparent);
    backdrop-filter: blur(18px);
}

.checkout-back,
.checkout-heading-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--menu-border);
    border-radius: 14px;
    background: var(--menu-card);
    color: var(--menu-text);
    box-shadow: 0 8px 20px rgba(20, 24, 30, .07);
}

.checkout-heading-icon {
    border-color: color-mix(in srgb, var(--menu-action) 18%, var(--menu-border));
    background: color-mix(in srgb, var(--menu-action) 10%, var(--menu-card));
    color: var(--menu-action);
}

.checkout-heading-copy { min-width: 0; }
.checkout-step-count {
    display: block;
    margin-bottom: 1px;
    color: var(--menu-action);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.checkout-heading-copy h2 {
    margin: 0;
    color: var(--menu-text);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.1;
    outline: none;
}
.checkout-heading-copy p {
    overflow: hidden;
    margin: 3px 0 0;
    color: color-mix(in srgb, var(--menu-text) 64%, transparent);
    font-size: .68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 4px;
}
.checkout-progress > span {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: color-mix(in srgb, var(--menu-text) 42%, transparent);
}
.checkout-progress > span::before {
    position: absolute;
    top: 12px;
    right: 50%;
    width: 100%;
    height: 2px;
    content: "";
    background: var(--menu-border);
    transform: translateX(-12px);
}
.checkout-progress > span:first-child::before { display: none; }
.checkout-progress i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 2px solid var(--menu-border);
    border-radius: 50%;
    background: var(--menu-card);
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
}
.checkout-progress b { font-size: .58rem; font-weight: 850; }
.checkout-progress .is-active { color: var(--menu-action); }
.checkout-progress .is-active i {
    border-color: var(--menu-action);
    background: var(--menu-action);
    color: var(--menu-card);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--menu-action) 11%, transparent);
}
.checkout-progress .is-complete { color: color-mix(in srgb, var(--menu-action) 70%, var(--menu-text)); }
.checkout-progress .is-complete i {
    border-color: color-mix(in srgb, var(--menu-action) 55%, white);
    background: color-mix(in srgb, var(--menu-action) 14%, var(--menu-card));
    color: var(--menu-action);
    font-size: 15px;
}
.checkout-progress .is-complete::before,
.checkout-progress .is-active::before { background: color-mix(in srgb, var(--menu-action) 42%, var(--menu-border)); }

.checkout-journey-scroll {
    flex: 1;
    height: auto;
    min-height: 0;
    padding: 5px 0 calc(var(--checkout-action-bar-height, 64px) + 12px);
    overflow-y: auto;
    scroll-padding-bottom: calc(var(--checkout-action-bar-height, 64px) + 12px);
}
.checkout-stage[hidden] { display: none !important; }
.checkout-stage.is-active { animation: checkoutStageIn 220ms ease-out both; }
@keyframes checkoutStageIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

body[data-surface="menu"] #step-checkout .checkout-card,
body[data-surface="menu"] #step-summary .checkout-card {
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, var(--menu-border) 88%, white) !important;
    border-radius: 20px !important;
    background: var(--menu-card) !important;
    box-shadow: 0 12px 32px rgba(23, 28, 35, .075) !important;
}
.checkout-card-heading { color: var(--menu-action); }
.checkout-card-heading > .material-icons-outlined {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    padding: 0;
    background: color-mix(in srgb, var(--menu-action) 11%, var(--menu-card));
    color: var(--menu-action);
}
.checkout-card-heading h3,
.checkout-card-heading p { color: var(--menu-text) !important; }
.checkout-card-heading p { opacity: .62; }
.checkout-account-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--menu-action) 7%, var(--menu-card));
    color: color-mix(in srgb, var(--menu-action) 78%, var(--menu-text));
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.4;
}
.checkout-account-hint .material-icons-outlined { font-size: 16px; }
.checkout-account-hint > div { min-width: 0; flex: 1; }
.checkout-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.checkout-account-actions.hidden { display: none; }
.checkout-account-actions button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--menu-action) 24%, var(--menu-border));
    border-radius: 11px;
    background: var(--menu-card);
    color: var(--menu-action);
    font-size: .68rem;
    font-weight: 900;
}
.checkout-account-actions button:first-child {
    background: var(--menu-action);
    color: var(--menu-card);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--menu-action) 18%, transparent);
}
.checkout-account-actions .material-icons-outlined { font-size: 15px; }

.checkout-location-primary {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 82px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--menu-action) 35%, var(--menu-border));
    border-radius: 18px;
    background: var(--menu-action);
    color: var(--menu-card);
    text-align: left;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--menu-action) 24%, transparent);
}
.checkout-location-primary:disabled { opacity: .78; }
.checkout-location-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--menu-card) 18%, transparent);
}
.checkout-location-primary strong,
.checkout-location-primary small { display: block; }
.checkout-location-primary strong { font-size: .91rem; font-weight: 950; }
.checkout-location-primary small { margin-top: 3px; font-size: .62rem; font-weight: 720; opacity: .78; }
.checkout-location-state {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--menu-action) 15%, var(--menu-border));
    border-radius: 13px;
    background: color-mix(in srgb, var(--menu-action) 5%, var(--menu-card));
    color: color-mix(in srgb, var(--menu-text) 72%, transparent);
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.4;
}
.checkout-location-state .material-icons-outlined { color: var(--menu-action); font-size: 18px; }
.checkout-location-state.is-confirmed { border-color: #a7e1c1; background: #edf9f2; color: #12643a; }
.checkout-manual-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
    color: color-mix(in srgb, var(--menu-text) 40%, transparent);
    font-size: .65rem;
    font-weight: 850;
    text-transform: uppercase;
}
.checkout-manual-divider::before,
.checkout-manual-divider::after { height: 1px; flex: 1; content: ""; background: var(--menu-border); }
.checkout-manual-toggle {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    color: var(--menu-action);
    font-size: .75rem;
    font-weight: 900;
    text-align: left;
}
.checkout-address-fields {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--menu-border);
}
.checkout-written-address {
    display: flex;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--menu-text);
}
.checkout-written-address > .material-icons-outlined { color: var(--menu-action); }
.checkout-written-address strong,
.checkout-written-address small { display: block; }
.checkout-written-address strong { font-size: .76rem; font-weight: 900; }
.checkout-written-address small { margin-top: 2px; color: color-mix(in srgb, var(--menu-text) 59%, transparent); font-size: .64rem; font-weight: 700; }
.checkout-map-shortcut { padding: 12px; border-radius: 13px; background: color-mix(in srgb, var(--menu-action) 6%, var(--menu-card)); }
.checkout-map-shortcut button { color: var(--menu-action); font-weight: 900; }
.checkout-open-map { border-color: color-mix(in srgb, var(--menu-action) 24%, var(--menu-border)); background: color-mix(in srgb, var(--menu-action) 5%, var(--menu-card)); color: var(--menu-action); }
.confirm-map-inline.hidden { display: none !important; }

.checkout-save-address {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--menu-action) 25%, var(--menu-border));
    border-radius: 15px;
    background: color-mix(in srgb, var(--menu-action) 7%, var(--menu-card));
    color: var(--menu-text);
}
.checkout-save-address.hidden { display: none; }
.checkout-save-address-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: var(--menu-action);
    color: var(--menu-card);
    font-size: 19px;
}
.checkout-save-address strong { display: block; font-size: .75rem; font-weight: 950; }
.checkout-save-address p { margin-top: 3px; color: color-mix(in srgb, var(--menu-text) 62%, transparent); font-size: .64rem; font-weight: 700; }
.checkout-save-address-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.checkout-save-address-actions.hidden { display: none; }
.checkout-save-address-actions button {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--menu-border);
    border-radius: 10px;
    background: var(--menu-card);
    color: var(--menu-text);
    font-size: .67rem;
    font-weight: 900;
}
.checkout-save-address-actions button:first-child { border-color: var(--menu-action); background: var(--menu-action); color: var(--menu-card); }
.checkout-save-address-actions button:disabled { opacity: .55; }
.checkout-save-address.is-success { border-color: #9ed8b9; background: #edf9f2; }
.checkout-save-address.is-success .checkout-save-address-icon { background: #138a50; }
.checkout-save-address.is-error { border-color: #fecaca; background: #fff7f7; }
.checkout-save-address-status { line-height: 1.35; }
.checkout-save-address.is-success .checkout-save-address-status { color: #12643a; }
.checkout-save-address.is-error .checkout-save-address-status { color: #a51425; }

.checkout-inline-error {
    position: relative;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 12px 0;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 13px;
    background: #fff1f2;
    color: #a51425;
    font-size: .72rem;
    font-weight: 850;
}
.checkout-inline-error.hidden { display: none; }
#step-checkout [aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important; }

.checkout-action-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(70px, .38fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 2.8vw, 14px) clamp(10px, 3.5vw, 18px) max(12px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--menu-border);
    background: color-mix(in srgb, var(--menu-card) 94%, transparent);
    box-shadow: 0 -12px 32px rgba(20, 24, 30, .08);
    backdrop-filter: blur(18px);
}

@media (max-width: 759px) {
    .checkout-action-bar {
        position: absolute;
        right: max(clamp(10px, 4vw, 20px), env(safe-area-inset-right, 0px));
        bottom: max(0px, env(safe-area-inset-bottom, 0px));
        left: max(clamp(10px, 4vw, 20px), env(safe-area-inset-left, 0px));
        padding: clamp(10px, 2.8vw, 14px) clamp(10px, 3.5vw, 18px) max(12px, env(safe-area-inset-bottom, 0px));
        border: 1px solid color-mix(in srgb, var(--menu-border) 88%, white);
        border-radius: 22px;
        background: color-mix(in srgb, var(--menu-card) 96%, transparent);
        box-shadow: 0 22px 46px color-mix(in srgb, var(--menu-action) 28%, transparent);
    }
}
.checkout-action-bar small,
.checkout-action-bar strong { display: block; color: var(--menu-text); }
.checkout-action-bar small { font-size: .58rem; font-weight: 800; opacity: .56; text-transform: uppercase; }
.checkout-action-bar strong { margin-top: 2px; font-size: .89rem; font-weight: 950; }
.checkout-action-bar > button {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 15px;
    background: var(--menu-action) !important;
    color: var(--menu-card) !important;
    font-size: .79rem;
    font-weight: 950;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--menu-action) 22%, transparent);
}
.checkout-action-bar > button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.checkout-confirm-bar > button { background: #138a50 !important; box-shadow: 0 12px 25px rgba(19, 138, 80, .2); }

.checkout-review-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 16px 0;
    color: var(--menu-text);
    font-size: .72rem;
    font-weight: 850;
}
.checkout-review-edit button,
.checkout-review-heading button,
.checkout-review-label button { color: var(--menu-action); font-size: .66rem; font-weight: 900; }
.checkout-review-edit button { display: flex; align-items: center; gap: 4px; }
.checkout-review-edit > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 12px; }
.checkout-review-edit .material-icons-outlined { font-size: 15px; }
.checkout-review-heading,
.checkout-review-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-review-heading > span { display: flex; align-items: center; gap: 7px; }
.checkout-review-heading .material-icons-outlined { color: var(--menu-action); font-size: 18px; }
.checkout-review-label { margin-bottom: 4px; color: color-mix(in srgb, var(--menu-text) 50%, transparent); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 760px) {
    .checkout-journey-header { padding-inline: 24px; }
    .checkout-journey-scroll { width: min(100%, 720px); }
    .checkout-stage[data-checkout-stage="3"] { display: grid; grid-template-columns: 1.08fr .92fr; align-items: start; }
    .checkout-stage[data-checkout-stage="3"][hidden] { display: none !important; }
    .checkout-stage[data-checkout-stage="3"] #delivery-method-card { grid-row: span 2; }
    .checkout-action-bar { padding-inline: max(24px, calc((100% - 690px) / 2)); }
}

@media (max-width: 390px) {
    .checkout-journey-header { grid-template-columns: 40px minmax(0, 1fr) 38px; gap: 9px; padding-inline: 11px; }
    .checkout-back, .checkout-heading-icon { width: 38px; height: 38px; border-radius: 12px; }
    .checkout-heading-copy p { max-width: 205px; }
    .checkout-progress b { font-size: .54rem; }
    .checkout-action-bar { grid-template-columns: minmax(66px, .38fr) minmax(0, 1fr); gap: 9px; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-stage.is-active { animation: none; }
}

/* Adaptacao por largura util e zoom, sem simular um telefone gigante no desktop */
html {
    font-size: clamp(13px, calc(12.4px + .16vw), 15px);
}

@media (min-width: 860px) {
    body {
        padding: clamp(12px, 1.7vw, 24px) !important;
    }

    #app-flow {
        width: min(100%, 1400px) !important;
        max-width: 1400px !important;
        height: calc(100dvh - clamp(24px, 3.4vw, 48px)) !important;
        max-height: none !important;
        border-radius: clamp(18px, 2vw, 28px) !important;
    }

    #menu-items,
    #category-scroll {
        width: 100%;
        max-width: none;
        margin-inline: auto;
    }

    #category-scroll {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--menu-action) 42%, transparent) transparent;
    }

    #category-scroll::-webkit-scrollbar { display: block; height: 6px; }
    #category-scroll::-webkit-scrollbar-track { background: transparent; }
    #category-scroll::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--menu-action) 42%, transparent);
        border-radius: 999px;
    }

    #menu-items { padding-inline: clamp(18px, 2.4vw, 34px); }

    #product-drawer {
        left: 50% !important;
        right: auto !important;
        width: min(520px, calc(100vw - 32px));
        transform: translate(-50%, 100%);
        border-radius: 24px 24px 0 0 !important;
    }

    #product-drawer.open {
        transform: translate(-50%, 0);
    }

    .checkout-scroll {
        width: min(100%, 780px);
        margin-inline: auto;
    }
}

@media (min-width: 1280px) {
    .menu-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-height: 720px) {
    .welcome-banner { min-height: 190px; height: 30vh; }
    .welcome-content { padding-block: 20px; }
    .menu-opt-card { padding: 14px; border-radius: 17px; }
    #step-menu > .relative.w-full.h-48 { height: 132px !important; }
}

/* Nomes sobre fotos precisam manter contraste independentemente do tema da loja */
#store-display-name,
#menu-store-name {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .58);
}

/* Modo TOTEM de autoatendimento */
.totem-mode #app-flow {
    max-width: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.totem-mode #step-menu > .relative.w-full.h-48 {
    height: 220px !important;
}

.totem-label {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    backdrop-filter: blur(12px);
}

.totem-mode #menu-items {
    padding-left: clamp(18px, 4vw, 58px);
    padding-right: clamp(18px, 4vw, 58px);
}

.totem-mode #category-scroll {
    padding-left: clamp(18px, 4vw, 58px) !important;
    padding-right: clamp(18px, 4vw, 58px) !important;
}

.totem-mode .cat-pill {
    padding: 12px 18px;
    font-size: 0.9rem;
}

.totem-mode .menu-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.totem-mode .menu-offers-row {
    grid-auto-columns: minmax(220px, 250px);
}

.totem-mode .menu-product-card--list {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 138px;
    padding: 14px;
}

.totem-mode .menu-product-card--list .menu-product-image {
    width: 112px;
    height: 112px;
}

.totem-mode .menu-product-card--promo .menu-product-image {
    height: 130px;
}

.totem-mode .menu-product-card h4 {
    font-size: 1rem;
}

.totem-mode .menu-product-desc {
    font-size: 0.78rem !important;
}

.totem-mode .menu-add-btn {
    width: 42px !important;
    height: 42px !important;
}

.totem-mode #floating-cart {
    left: clamp(18px, 4vw, 58px);
    right: clamp(18px, 4vw, 58px);
    bottom: 24px;
    max-width: 760px;
    margin: 0 auto;
}

.totem-mode .checkout-card {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.totem-mode #cliente-zap::placeholder {
    color: transparent;
}

/* Neutraliza classes antigas do Tailwind nesta pagina publica */
.bg-\[\#0c0c3a\] {
    background-color: var(--menu-action) !important;
}

.bg-\[\#0c0c3a\]\/95 {
    background-color: color-mix(in srgb, var(--menu-action) 95%, transparent) !important;
}

.bg-\[\#0c0c3a\]\/80 {
    background-color: color-mix(in srgb, var(--menu-action) 80%, transparent) !important;
}

.bg-\[\#0c0c3a\]\/60 {
    background-color: color-mix(in srgb, var(--menu-action) 60%, transparent) !important;
}

.text-\[\#0c0c3a\],
.text-purple-600,
.text-purple-500,
.text-blue-600,
.text-green-600,
.text-green-500 {
    color: var(--menu-text) !important;
}

.bg-purple-50,
.bg-blue-50,
.bg-green-50 {
    background-color: color-mix(in srgb, var(--menu-card) 88%, var(--menu-bg)) !important;
}

.hover\:bg-\[\#0c0c3a\]:hover,
.group:hover .group-hover\:bg-\[\#0c0c3a\] {
    background-color: var(--menu-action) !important;
}

.group:hover .group-hover\:text-white {
    color: #ffffff !important;
}

.from-\[\#0c0c3a\] {
    --tw-gradient-from: rgba(0, 0, 0, 0.88) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Ajustes finos: cards, promocoes, checkout e modais */
#step-menu,
.checkout-scroll,
#product-drawer .custom-scrollbar {
    overscroll-behavior: contain;
}

.menu-offers-row {
    padding: 4px 4px 14px;
    margin: 0 -4px;
}

.menu-products-grid {
    padding: 2px 0 8px;
}

.menu-product-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.menu-product-card {
    isolation: isolate;
}

.menu-product-card--list {
    align-items: stretch;
}

.menu-product-card--promo {
    min-height: 248px;
}

.menu-product-image {
    flex: 0 0 auto;
}

.promo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    min-width: 44px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(22, 163, 74, 0.28);
}

.menu-old-price {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: line-through;
}

.pay-btn.active,
.pay-btn:focus-visible {
    background: color-mix(in srgb, var(--menu-action) 10%, white) !important;
    border-color: var(--menu-action) !important;
    color: var(--menu-action) !important;
    outline: none;
}

#delivery-method-card {
    border-color: color-mix(in srgb, var(--menu-action) 14%, var(--menu-border)) !important;
}

#map-address-preview {
    line-height: 1.35;
}

#product-drawer {
    max-height: min(90dvh, 780px) !important;
    border: 1px solid color-mix(in srgb, var(--menu-border) 78%, transparent);
}

#product-drawer.open {
    box-shadow: 0 -24px 60px rgba(15, 23, 42, 0.2) !important;
}

#drawer-img-container {
    max-height: 260px;
    overflow: hidden;
}

#drawer-adicionais-container {
    padding-bottom: 18px;
}

#product-drawer > .absolute.bottom-0 {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: 0 -14px 28px rgba(15, 23, 42, 0.08);
}

#modal-info-loja {
    z-index: 2100 !important;
}

#modal-info-content {
    max-height: min(86dvh, 680px);
    overflow-y: auto;
}

.checkout-card {
    overflow-wrap: anywhere;
}

/* Protecao contra estouro lateral em celulares e navegadores com zoom. */
#app-flow,
.step-section,
.checkout-scroll,
.checkout-card,
.checkout-card > *,
.checkout-card .flex > * {
    min-width: 0;
}

.checkout-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 480px) {
    .checkout-card {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin: 10px;
        padding: 16px;
    }

    #step-checkout > header,
    #step-summary > header {
        padding-inline: 16px !important;
    }
}

@media (max-width: 420px) {
    .menu-product-card--promo {
        min-height: 238px;
    }

    .menu-product-bottom {
        align-items: center;
    }

    #floating-cart {
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}
#link-confirmar-whatsapp {
    background-color: #128c45;
    color: #fff;
    text-decoration: none;
}

#link-confirmar-whatsapp:hover,
#link-confirmar-whatsapp:focus-visible {
    background-color: #0d7137;
    color: #fff;
}

.gps-support-dialog {
    width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    margin: auto;
    border: 0;
    border-radius: 24px;
    padding: 24px;
    background: white;
    color: #0c0c3a;
    box-shadow: 0 20px 70px #0004;
}
.gps-support-dialog::backdrop { background: #0c0c3a99; }
.gps-support-dialog h2 { font-size: 22px; font-weight: 900; line-height: 1.2; }
.gps-support-dialog p { margin: 16px 0; font-size: 15px; line-height: 1.5; }
.gps-support-dialog button {
    display: block; width: 100%; padding: 14px; margin-top: 10px;
    border-radius: 12px; font-size: 15px; font-weight: 800; background: #edf0f6;
}
.gps-support-dialog .gps-support-accept { background: #0c0c3a; color: white; }
.gps-support-note { margin-bottom: 16px; font-size: 14px; line-height: 1.4; color: #475569; }
.gps-support-note button { margin-top: 8px; padding: 8px 0; text-decoration: underline; font-weight: 800; color: #4338ca; }
.map-street-help {
    position: absolute; z-index: 900; top: 90px; left: 16px; right: 16px;
    max-height: 155px; overflow-y: auto; padding: 12px; border-radius: 14px;
    background: #fffffff2; color: #0c0c3a; box-shadow: 0 3px 12px #0002;
    font-size: 13px; line-height: 1.35;
}
.map-street-help button { font-size: 14px; font-weight: 800; text-decoration: underline; padding: 8px 8px 4px 0; }
.map-street-help p:empty { display: none; }
.map-street-help #map-gps-support-status { color: #475569; }

.customer-map-tools { position: absolute; z-index: 1000; right: 16px; top: 88px; bottom: 112px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 56px; overflow-y: auto; scrollbar-width: none; padding: 4px; }
.customer-map-tools button { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; color: #172033; box-shadow: 0 3px 12px #0f172a18; }
.customer-map-tools .btn-gps { background: #006fff; color: #fff; border-color: #006fff; }
.customer-map-tools button:focus-visible { outline: 3px solid #006fff; outline-offset: 3px; }
#step-address .address-search-map { display: none; right: 80px; }
#step-address.show-map-search .address-search-map { display: flex; }
.map-accessible-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-location-wait { position: absolute; inset: 0; z-index: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 88px 32px 24px; text-align: center; background: #f5f7fa; color: #475569; font-size: 16px; }
.map-location-wait[hidden] { display: none; }
.map-location-wait > span { font-size: 36px; color: #006fff; }
#step-address.waiting-customer-location .center-pin { display: none; }
#btn-confirmar-local:disabled { opacity: .45; cursor: wait; }
.customer-notice-dialog { max-height: 80vh; overflow-y: auto; }
.checkout-heading-copy p { font-size: 13px; white-space: normal; line-height: 1.35; }
.checkout-progress b { font-size: 13px !important; }
.checkout-location-state,
.checkout-address-assist-status,
.checkout-action-bar small { font-size: 13px !important; }
.checkout-location-primary strong { font-size: 15px; }
.checkout-location-primary small { font-size: 13px; }
.checkout-card-heading p { font-size: 13px; }
#step-address .maplibregl-ctrl-bottom-left { bottom: 96px; }
#step-address #map .maplibregl-ctrl-bottom-right { left: 10px; right: auto; bottom: 130px; }
#step-address .map-search-results { right: 84px; max-height: calc(100% - 196px); }
@media (prefers-reduced-motion: reduce) {
    .step-section { transition: none; }
}

/* Entrega: endereço primeiro, correções sob demanda. */
.checkout-journey [hidden] { display: none !important; }
.checkout-without-delivery .checkout-progress { grid-template-columns: repeat(3, 1fr); }
#delivery-method-card .checkout-card-heading { align-items: center; margin-bottom: 12px; }
#delivery-method-card .checkout-card-heading > div { flex: 1; }
.delivery-edit-link { color: var(--menu-action); font-size: 14px; font-weight: 700; padding: 10px 0 10px 12px; }
.delivery-address-compact { color: var(--menu-text); font-size: 16px; line-height: 1.5; margin: 0 0 12px; }
#delivery-method-card .checkout-manual-toggle { display: flex; border: 0; background: transparent; padding: 8px 0; justify-content: flex-start; font-size: 14px; }
#delivery-method-card .checkout-manual-toggle > .material-icons-outlined { display: none; }
#delivery-method-card.has-address:not(.editing-address) .delivery-detail,
#delivery-method-card.has-address .checkout-location-primary,
#delivery-method-card.has-address.fee-ready #checkout-location-state,
#delivery-method-card.has-address:not(.editing-address) #checkout-address-assist-status { display: none; }
#delivery-method-card.has-address:not(.editing-address) #address-fields-container > .grid { grid-template-columns: 1fr; max-width: 160px; }
#delivery-method-card .checkout-address-fields { border: 0; margin-top: 12px; padding-top: 0; }
#delivery-method-card .checkout-address-assist:has(#checkout-address-suggestions:empty):not(:has(button:not(.hidden))) { margin: 0; padding: 0; border: 0; }
#delivery-method-card.has-address:not(.editing-address) #checkout-address-assist:has(#checkout-address-suggestions:empty) { display: none; }
#delivery-method-card .address-field-label small { font-weight: 400; color: #64748b; }
#checkout-cost-card { box-shadow: none; font-size: 14px; }
#checkout-cost-card summary { cursor: pointer; color: #475569; font-size: 14px; font-weight: 650; }
#checkout-cost-card[open] summary { margin-bottom: 18px; }
.schedule-help-compact { color: #64748b; font-size: 13px; margin-top: 8px; }
.schedule-help-compact:empty { display: none; }
#checkout-schedule-card { padding-top: 16px; padding-bottom: 16px; }
@media (min-width: 900px) {
    .checkout-stage[data-checkout-stage="3"] #delivery-method-card { grid-column: 1; grid-row: 1 / span 3; }
    .checkout-stage[data-checkout-stage="3"] #checkout-schedule-card { grid-column: 2; grid-row: 1; }
    .checkout-stage[data-checkout-stage="3"] #payment-method-card { grid-column: 2; grid-row: 2; }
    .checkout-stage[data-checkout-stage="3"] #checkout-cost-card { grid-column: 2; grid-row: 3; }
}
.pizza-builder { margin: 0 24px 24px; padding: 20px; border: 1px solid #e8d9c5; border-radius: 22px; background: #fffaf1; color: #33281e; }
.pizza-builder[hidden] { display: none; }
.pizza-heading > span { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #85502b; }
.pizza-heading h3 { font-size: 23px; font-weight: 850; margin: 5px 0; }
.pizza-heading p, .pizza-instruction, .pizza-price-rule { font-size: 14px; line-height: 1.55; margin: 10px 0; }
.pizza-modes { display: flex; gap: 6px; background: #efe4d4; padding: 5px; border-radius: 14px; margin: 16px 0; }
.pizza-modes button { flex: 1; border-radius: 10px; padding: 12px 6px; min-height: 46px; font-size: 15px; font-weight: 750; color: #33281e; }
.pizza-modes button[aria-pressed="true"] { background: #33281e; color: white; }
.pizza-circle { display: flex; width: min(100%, 268px); aspect-ratio: 1; margin: 20px auto; border-radius: 50%; overflow: hidden; border: 9px solid #d7a054; box-shadow: 0 8px 22px #714a1926; background: #edc777; gap: 3px; }
.pizza-half { position: relative; flex: 1; min-width: 0; overflow: hidden; color: #fff; background: #d1a04d; }
.pizza-half img { width: 200%; max-width: none; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pizza-half:nth-child(2) img { left: -100%; }
.pizza-half[aria-pressed="true"] .pizza-half-label { background: #804318; text-decoration: underline; text-underline-offset: 3px; }
.pizza-cheese { display: block; position: absolute; inset: 0; background: radial-gradient(circle at 35% 24%, #a93923 0 12px, transparent 13px), radial-gradient(circle at 74% 47%, #a93923 0 13px, transparent 14px), radial-gradient(circle at 20% 80%, #a93923 0 11px, transparent 12px), radial-gradient(ellipse at 30% 42%, #567343 0 4px, transparent 5px), radial-gradient(ellipse at 60% 15%, #567343 0 4px, transparent 5px), #ebc76d; }
.pizza-half-label { display: block; position: absolute; bottom: 22%; left: 0; right: 0; padding: 8px 5px; font-size: 14px; line-height: 1.25; font-weight: 800; background: #33281eee; overflow-wrap: anywhere; }
.pizza-builder h4 { font-size: 16px; font-weight: 800; margin: 20px 0 10px; }
.pizza-builder h4:focus { outline: none; }
.pizza-card-hint { display: inline-block; margin: 5px 0; font-size: 13px; font-weight: 750; color: #754318; background: #fff0d8; border-radius: 6px; padding: 3px 7px; }
.pizza-flavors { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.pizza-flavors button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 12px; min-height: 48px; font-size: 14px; border-radius: 12px; border: 1px solid #dccbb5; background: white; color: #33281e; }
.pizza-flavors strong { white-space: nowrap; }
.pizza-flavors button[aria-pressed="true"] { border: 2px solid #85502b; background: #f8e7ce; }
.pizza-summary { margin-top: 16px; font-size: 15px; font-weight: 750; line-height: 1.5; }
.pizza-builder button:focus-visible { outline: 3px solid #176aa0; outline-offset: -3px; }
@media (max-width: 380px) { .pizza-builder { margin-inline: 14px; padding: 14px; } }

/* Theme surface pairs: action colors may be as light as white. */
#store-display-name { color: white !important; text-shadow: 0 2px 10px #0009; }
#floating-cart, #floating-cart *, #btn-ir-resumo, #btn-add-drawer,
#btn-confirmar-local, .menu-add-btn, .cat-pill.active { color: var(--menu-on-action, white) !important; }
.menu-price-stack span:last-child, .menu-mini-action { color: var(--menu-link, #111) !important; }
.menu-product-card, .checkout-card { color: var(--menu-text); }
.welcome-content > h3, .menu-section-head h3 { color: var(--menu-bg-text, #111) !important; }
.montagem-entrada { margin: 20px 0; padding: 20px; background: var(--menu-card); color: var(--menu-text); border: 1px solid var(--menu-border); border-radius: 20px; }
.montagem-entrada summary { cursor: pointer; font-weight: 850; font-size: 21px; }
.montagem-entrada summary span { display: block; font-size: 14px; font-weight: 500; margin-top: 5px; }
.montagem-entrada > button { display: inline-block; margin: 14px 8px 0 0; padding: 12px 16px; background: var(--menu-action); color: var(--menu-on-action); border-radius: 12px; font-weight: 750; }
.montagem-pizza { display: block; width: min(100%,300px); margin: 20px auto; filter: drop-shadow(0 12px 14px #714a1928); }
.montagem-pizza g[role=button] { cursor: pointer; }
.montagem-pizza g:focus { outline: none; }
.montagem-pizza g:focus > path:last-of-type { stroke: #176aa0; stroke-width: 6; }
.montagem-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.montagem-legenda button { min-height: 44px; padding: 9px; text-align: left; background: white; color: #33281e; border: 1px solid #dccbb5; border-radius: 10px; font-size: 14px; }
.montagem-legenda button[aria-pressed=true] { background: #33281e; color: white; }
.montagem-porcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.montagem-porcao { min-width: 0; overflow: hidden; background: white; border: 2px solid #dccbb5; border-radius: 16px; color: #33281e; }
.montagem-porcao > span { display: grid; place-items: center; height: 80px; font-size: 32px; background: #f2debd; }
.montagem-porcao img { width: 100%; height: 100px; object-fit: cover; }
.montagem-porcao strong { display: block; padding: 10px; font-size: 14px; }
.montagem-porcao[aria-pressed=true] { border-color: #683912; box-shadow: 0 0 0 2px #683912; }
.montagem-porcao.sorvete { border-radius: 48% 48% 18px 18px; background: #fff5e6; }
.pizza-modes { flex-wrap: wrap; }
.pizza-modes button { min-width: 70px; }
body[data-surface="menu"] *, body[data-surface="menu"] button { transition-property: transform, opacity, box-shadow; }
#btn-add-drawer:disabled { opacity: .55; cursor: not-allowed; }
#menu-store-name { color: white !important; text-shadow: 0 1px 8px #000; }
body[data-surface="menu"], body[data-surface="menu"] #app-flow,
body[data-surface="menu"] .step-section { background-color: var(--menu-bg) !important; }
body[data-surface="menu"] #floating-cart,
body[data-surface="menu"] #btn-ir-resumo,
body[data-surface="menu"] #btn-add-drawer { background: var(--menu-action) !important; color: var(--menu-on-action) !important; }
body[data-surface="menu"] #floating-cart * { color: var(--menu-on-action) !important; }
.casadinha-invite{position:fixed;z-index:2400;inset:0;display:grid;place-items:center;padding:18px;background:rgba(7,10,24,.76);backdrop-filter:blur(8px);color:var(--menu-text);animation:casadinha-backdrop-in .22s ease-out}.casadinha-invite.hidden{display:none}.casadinha-invite-card{position:relative;width:min(100%,540px);max-height:calc(100dvh - 36px);overflow-x:hidden;overflow-y:auto;border:1px solid color-mix(in srgb,var(--menu-action) 28%,var(--menu-border));border-radius:30px;background:var(--menu-card);box-shadow:0 30px 90px rgba(2,6,23,.55);animation:casadinha-card-in .34s cubic-bezier(.2,.85,.25,1.15)}.casadinha-invite-art{position:relative;height:220px;overflow:hidden;background:linear-gradient(135deg,#052e24,#2e1065)}.casadinha-invite-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.casadinha-invite-art>span{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(7,10,24,.72);box-shadow:0 8px 24px rgba(0,0,0,.22);color:#fff;font-size:10px;font-weight:950;letter-spacing:.08em;backdrop-filter:blur(7px)}.casadinha-invite-art>span .material-icons-outlined{font-size:16px;color:#fbbf24}.casadinha-invite-copy{padding:24px 24px 18px;text-align:center}.casadinha-invite-copy small,.casadinha-invite-copy strong,.casadinha-invite-copy>span{display:block}.casadinha-invite-copy small{margin-bottom:8px;color:var(--menu-action);font-size:10px;font-weight:950;letter-spacing:.12em}.casadinha-invite-copy h2{margin:0 0 14px;color:var(--menu-text);font-size:clamp(23px,6vw,31px);font-weight:950;line-height:1.05;letter-spacing:-.035em}.casadinha-invite-copy strong{font-size:17px;font-weight:900;line-height:1.3}.casadinha-invite-copy>span{margin-top:7px;color:var(--menu-muted);font-size:13px;line-height:1.45}.casadinha-invite-card>#casadinha-invite-action{display:flex;width:calc(100% - 48px);min-height:56px;margin:0 24px;align-items:center;justify-content:center;gap:9px;padding:0 18px;border-radius:17px;background:linear-gradient(135deg,var(--menu-action),color-mix(in srgb,var(--menu-action) 72%,#7c3aed));box-shadow:0 13px 28px color-mix(in srgb,var(--menu-action) 30%,transparent);color:var(--menu-on-action);font-size:13px;font-weight:950;letter-spacing:.025em;transition:transform .18s ease,filter .18s ease}.casadinha-invite-card>#casadinha-invite-action:active{transform:scale(.975);filter:brightness(.96)}.casadinha-invite-card>#casadinha-invite-action .material-icons-outlined{font-size:21px}.casadinha-invite-later{display:block;margin:4px auto 12px;padding:10px 18px;color:var(--menu-muted);font-size:12px;font-weight:800}.casadinha-invite-close{position:absolute;z-index:2;top:14px;right:14px;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(7,10,24,.72);box-shadow:0 8px 24px rgba(0,0,0,.25);color:#fff;backdrop-filter:blur(7px)}.casadinha-invite-close .material-icons-outlined{font-size:23px}@keyframes casadinha-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes casadinha-card-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}@media(max-width:560px){.casadinha-invite{padding:12px}.casadinha-invite-card{max-height:calc(100dvh - 24px);border-radius:26px}.casadinha-invite-art{height:180px}.casadinha-invite-copy{padding:21px 18px 16px}.casadinha-invite-card>#casadinha-invite-action{width:calc(100% - 36px);margin-inline:18px}}@media(prefers-reduced-motion:reduce){.casadinha-invite,.casadinha-invite-card{animation:none}.casadinha-invite-card>#casadinha-invite-action{transition:none}}
#casadinha-invite-action,#casadinha-invite-action *{color:#fff!important}
.montagem-porcoes.sorvete { position:relative; padding:12px 8px 62px; gap:8px; }
.montagem-porcoes.sorvete::after { content:''; position:absolute; bottom:0; left:8%; width:84%; height:64px; background:linear-gradient(100deg,#c88d5c,#edc398,#c88d5c); clip-path:polygon(0 0,100% 0,83% 100%,17% 100%); border-radius:0 0 28px 28px; }
.montagem-porcao.sorvete { aspect-ratio:1; position:relative; display:grid; place-content:center; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff9f0,#f2c9c2 65%,#d69c94); }
.montagem-porcao.sorvete:nth-child(even) { background:radial-gradient(circle at 35% 25%,#fff9e5,#e7cf99 65%,#c8a263); }
.montagem-porcao.sorvete > span { height:30px; background:transparent; font-size:26px; }
.montagem-porcao.sorvete img { position:absolute; inset:0; width:100%; height:100%; }
.montagem-porcao.sorvete strong { position:relative; z-index:1; border-radius:12px; background:#fff9; margin:6px; padding:7px; }
body[data-venda-interna="1"] #btn-conta-cliente,
body[data-venda-interna="1"] #conta-checkout-hint,
body[data-venda-interna="1"] #checkout-schedule-card { display:none !important; }

/* Frete autorizado pela loja na venda interna. */
.internal-fee-control { margin: 14px 0; padding: 14px; border: 1px solid #ddd6fe; border-radius: 12px; background: #faf8ff; }
.internal-fee-control legend { padding: 0 5px; font-weight: 800; color: #0c0c3a; }
.internal-fee-control label { display: block; margin: 8px 0; font-size: 13px; font-weight: 700; color: #312e55; }
.internal-fee-control p { margin-top: 9px; color: #534b63; font-size: 12px; line-height: 1.6; }
.internal-order-type { display: flex; align-items: center; gap: 12px; margin: 0 16px 10px; color: #0c0c3a; font-size: 12px; font-weight: 800; }
.internal-order-type select { flex: 1; min-width: 0; width: auto; }
.internal-fee-control :is(input, select):focus-visible, .internal-order-type select:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

.customer-account-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); min-height: 48px; margin: 16px; padding: 10px 16px; border: 1px solid #e9d5ff; border-radius: 14px; background: white; color: #0c0c3a; font-size: 14px; font-weight: 800; }
.welcome-content .customer-account-button { width: 100%; margin: 0 0 20px; }
.customer-account-button:focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }
body[data-venda-interna="1"] .customer-account-button { display: none; }

/* Stable contrast for the conditional add-on, regardless of the store palette. */
.casadinha-invite-card > #casadinha-invite-action { background: #5b21b6; color: #fff !important; text-shadow: none; font-size: 14px; font-weight: 800; letter-spacing: 0; padding: 12px 18px; line-height: 1.4; }
.casadinha-invite-card > #casadinha-invite-action > span { color: #fff !important; }
.casadinha-invite-card > #casadinha-invite-action:hover { background: #4c1d95; }
.casadinha-invite-card > #casadinha-invite-action:focus-visible { outline: 3px solid #a78bfa; outline-offset: 4px; }
.casadinha-invite-copy strong { color: var(--menu-text); font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.casadinha-invite-copy > span { font-size: 14px; line-height: 1.5; }

/* Convite acompanha as cores configuradas da loja. */
.casadinha-invite { background: color-mix(in srgb, var(--menu-text, #172033) 55%, transparent); }
.casadinha-invite-card { background: var(--menu-card, #fff); color: var(--menu-text, #172033); border: 1px solid var(--menu-border, #e5e7eb); }
.casadinha-products { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:24px 22px 4px; }
.casadinha-products figure { flex:1 1 90px; min-width:0; max-width:145px; margin:0; text-align:center; }
.casadinha-products img { display:block; width:100%; height:112px; object-fit:cover; border-radius:18px; background:var(--menu-bg, #f4f6f8); }
.casadinha-products small { display:block; margin:9px 0 4px; color:var(--menu-muted, #667085); font-size:10px; }
.casadinha-products figcaption { font-size:13px; line-height:1.35; font-weight:750; overflow-wrap:anywhere; }
.casadinha-photo-plus { color:var(--menu-action, #6941c6); font-size:27px; font-weight:800; }
.casadinha-invite-copy { padding:20px 24px 14px; }
.casadinha-invite-copy small { color:var(--menu-action, #6941c6); }
.casadinha-invite-copy h2 { color:var(--menu-text, #172033); font-size:24px; }
.casadinha-invite-copy strong { color:var(--menu-text, #172033); font-size:18px; }
.casadinha-invite-copy > span { color:var(--menu-muted, #667085); font-size:12px; }
.casadinha-invite-card > #casadinha-invite-action { background:var(--menu-action, #6941c6); color:var(--menu-on-action, #fff); box-shadow:none; }
.casadinha-invite-card > #casadinha-invite-action:disabled { opacity:.5; cursor:not-allowed; }
.casadinha-invite-close { background:var(--menu-card, #fff); color:var(--menu-text, #172033); border:1px solid var(--menu-border, #e5e7eb); box-shadow:none; top:10px; right:10px; }
.casadinha-invite-later { color:var(--menu-muted, #667085); }
.casadinha-options { padding:0 24px; }
.casadinha-options fieldset { margin:0 0 16px; padding:12px; border:1px solid var(--menu-border, #e5e7eb); border-radius:14px; }
.casadinha-options legend { padding:0 5px; font-size:12px; font-weight:750; }
.casadinha-options label { display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px; }
.casadinha-options input { accent-color:var(--menu-action, #6941c6); width:19px; height:19px; flex:0 0 auto; }
.casadinha-options label small { display:block; font-size:11px; color:var(--menu-muted, #667085); margin-top:2px; }
.casadinha-live { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:430px) { .casadinha-products { gap:8px; padding:22px 18px 0; } .casadinha-products img { height:90px; } }

/* Product sharing and the final customer review. */
.product-share-button{display:flex;align-items:center;gap:6px;margin:0 0 12px auto;padding:8px 12px;border:1px solid var(--menu-border);border-radius:12px;color:var(--menu-action);background:var(--menu-card);font-size:.78rem;font-weight:700;min-height:40px}
.product-share-button .material-icons-outlined{font-size:18px}
.recent-order-link{display:block;margin:12px 18px;padding:12px 14px;border:1px solid var(--menu-border);border-radius:14px;background:var(--menu-card);color:var(--menu-action);font-size:.82rem;font-weight:700;line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
.recent-order-link[hidden]{display:none!important}
.checkout-review-items{margin-bottom:18px}
.checkout-review-items .checkout-review-heading{margin-bottom:12px}
.checkout-review-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;margin:9px 0;padding:14px;border:1px solid color-mix(in srgb,var(--menu-border) 85%,transparent);border-radius:14px;background:color-mix(in srgb,var(--menu-action) 5%,var(--menu-card));color:var(--menu-text);font-size:.9rem}
.checkout-review-item-copy{display:flex;min-width:0;flex-direction:column;gap:5px;overflow-wrap:anywhere}
.checkout-review-item-title{font-weight:700;line-height:1.45}
.checkout-review-quantity{display:inline-block;margin-right:4px;padding:2px 7px;border-radius:7px;background:color-mix(in srgb,var(--menu-action) 11%,var(--menu-card));color:var(--menu-action);font-size:.8rem}
.checkout-review-item-price{padding-top:3px;white-space:nowrap;color:var(--menu-text);font-size:.94rem;font-variant-numeric:tabular-nums}
.checkout-review-item--extra{background:color-mix(in srgb,var(--menu-action) 3%,var(--menu-card));font-size:.83rem}
.checkout-review-payment{margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--menu-action) 25%,var(--menu-border));border-radius:14px;background:color-mix(in srgb,var(--menu-action) 6%,var(--menu-card))}
.checkout-review-payment-type{margin:9px 0 0;color:var(--menu-text);font-size:1.15rem;font-weight:750}
.checkout-review-change{margin:5px 0 0;line-height:1.45}
.checkout-review-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:15px;border-top:1px solid var(--menu-border);color:var(--menu-text);font-weight:750}
.checkout-review-total>span:first-child{font-size:.94rem}
#summary-page-total{font-size:1.5rem!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.success-tracking-link,.success-copy-link{display:flex;width:100%;align-items:center;justify-content:center;min-height:44px;margin-bottom:10px;padding:12px;border-radius:12px;font-size:.9rem;font-weight:700;text-decoration:none}
.success-tracking-link{background:var(--menu-action);color:var(--menu-on-action,#fff)}
.success-copy-link{border:1px solid var(--menu-border);color:var(--menu-action);background:var(--menu-card)}
@media(max-width:360px){.checkout-review-item{gap:8px;padding:11px}.checkout-review-item-price{font-size:.83rem}}