/* ==========================================================================
   APP DO CLIENTE — Modelo 3 (App de pedidos)
   ========================================================================== */
html, body { height: 100%; }
body { background: #ebe3df; }
.app { max-width: 640px; margin: 0 auto; min-height: 100%; background: var(--paper); position: relative; }
.app[data-route="inicio"] { background: #fff; }
@media (min-width: 680px) { .app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px rgba(29, 23, 22, .35); } }
.view { padding: 16px 14px calc(112px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 20px; align-content: start; }
.view > * { min-width: 0; }
.view.enter { animation: viewIn .32s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

/* Cabeçalho das telas internas */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px 12px; padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 8px 20px -16px rgba(29, 23, 22, .5);
}
.top-t { flex: 1; min-width: 0; display: grid; line-height: 1.1; }
.top-t .hand { font-size: 20px; color: var(--wine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-t h1 { font: 800 23px/1.1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-count { padding: 6px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.top-ext { flex-basis: 100%; display: grid; gap: 10px; min-width: 0; }

/* Cabeçalho da tela inicial */
.app[data-route="inicio"] .topbar { position: relative; background: transparent; box-shadow: none; border-radius: 0; padding-bottom: 6px; gap: 10px; }
.loc-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px; border-radius: 16px; border: 0; background: #fff; box-shadow: 0 6px 18px -8px rgba(29, 23, 22, .35); text-align: left; }
.loc-pill > .i { color: var(--wine); width: 22px; height: 22px; }
.loc-pill span { min-width: 0; display: grid; line-height: 1.15; }
.loc-pill small { font-size: 12px; color: var(--muted); }
.loc-pill b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-pill .chev { margin-left: auto; width: 18px; height: 18px; color: var(--ink); stroke-width: 2.4; }

/* Faixa do modo demonstração */
.demo-ribbon { display: flex; gap: 8px; align-items: center; padding: 8px 14px; background: var(--night); color: #f4e7c4; font-size: 12.5px; font-weight: 600; }
.demo-ribbon .i { color: var(--gold); width: 16px; height: 16px; }
.demo-ribbon b { color: #fff; }

/* Início · destaque com foto redonda */
.hero { position: relative; margin: -6px -14px 0; padding: 16px 16px 22px; overflow: hidden; }
.hero-photo { float: right; position: relative; width: 158px; height: 262px; margin: 0 0 0 6px; shape-outside: circle(136px at 120px 120px); }
.hero-photo img { position: absolute; left: 0; top: 0; width: 240px; height: 240px; max-width: none; border-radius: 50%; object-fit: cover; border: 7px solid #fff; box-shadow: 0 22px 44px -18px rgba(59, 2, 4, .55); background: var(--cream); }
.hero-photo .ring { position: absolute; left: -11px; top: -11px; width: 262px; height: 262px; border-radius: 50%; border: 2px dashed var(--gold); }
.hero .hand { display: block; font-size: 25px; color: var(--wine); margin: 8px 0 8px; }
.hero h1 { font: 800 clamp(28px, 8.2vw, 40px)/1.02 var(--f-display); letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--wine); }
.hero p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.hero-act { clear: both; display: grid; gap: 12px; justify-items: start; padding-top: 14px; }
.hero .cta { min-width: 240px; }

.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; background: var(--ok-soft); color: var(--ok); }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
.status-pill.closed { background: var(--danger-soft); color: var(--danger); }
.status-pill.closed .dot { animation: none; }
.status-pill.test { background: var(--gold-soft); color: var(--gold-ink); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.closed-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 14px 16px; border-radius: 20px; background: var(--danger-soft); color: #7d1218; }
.closed-card > .i { grid-row: span 3; width: 26px; height: 26px; color: var(--danger); margin-top: 2px; }
.closed-card strong { font: 800 16px/1.2 var(--f-display); color: var(--danger); letter-spacing: .02em; }
.closed-card p { font-size: 14px; }
.hero .closed-card { width: 100%; }

/* Faixa escura de categorias */
.band-dark { padding: 16px 14px 12px; border-radius: 24px; background: var(--night); color: #fff; display: grid; gap: 12px; }
.band-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.band-h .hand { font-size: 24px; color: var(--gold); }
.band-h .rbtn { width: 40px; height: 40px; background: rgba(255, 255, 255, .1); color: #fff; }
.band-h .rbtn .i { width: 19px; height: 19px; }
.cbtns { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.cbtns::-webkit-scrollbar { display: none; }
.cbtn { flex: none; width: 70px; display: grid; justify-items: center; gap: 6px; padding: 4px 0 2px; border: 0; background: transparent; color: #fff; border-radius: 14px; }
.cbtn .cd { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); transition: background .2s, transform .15s var(--ease); }
.cbtn .cd .i { width: 24px; height: 24px; stroke-width: 1.8; }
.cbtn .cl { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; max-width: 68px; min-height: 2.3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.cbtn .cb { width: 22px; height: 3px; border-radius: 3px; background: transparent; }
.cbtn[aria-pressed="true"] .cd { background: var(--gold); color: var(--wine-dd); border-color: var(--gold); }
.cbtn[aria-pressed="true"] .cl { font-weight: 800; }
.cbtn[aria-pressed="true"] .cb { background: var(--gold); }
.cbtn:active .cd { transform: scale(.94); }

/* Faixa vinho com cartões */
.band-wine { padding: 16px 0 16px 14px; border-radius: 24px; background: var(--wine); color: #fff; display: grid; gap: 12px; }
.band-wine .band-h { padding-right: 14px; }
.band-wine .band-h .hand { color: #fff; font-size: 26px; display: inline-flex; align-items: center; gap: 6px; }
.band-wine .band-h .hand .i { color: var(--gold); width: 20px; height: 20px; }
.pill-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: var(--night); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; border: 0; }
.pill-link .i { width: 15px; height: 15px; stroke-width: 2.6; }
.prow { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 14px 4px 0; scroll-snap-type: x mandatory; }
.prow::-webkit-scrollbar { display: none; }
.pcard { flex: none; width: 156px; border-radius: 18px; background: #fff; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; position: relative; scroll-snap-align: start; }
.pcard .hit { all: unset; cursor: pointer; display: grid; }
.pcard .thumb { border-radius: 0; aspect-ratio: auto; height: 96px; }
.pcard .pn { padding: 10px 10px 0; font-size: 14px; font-weight: 700; line-height: 1.2; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pf { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 6px 10px 12px; margin-top: auto; }
.pcard .price { font-size: 15px; }
.pcard .badge-ex { position: absolute; top: 8px; left: 8px; }
.band-wine .empty-band { padding: 4px 14px 6px 0; color: #f6dcdc; font-size: 14px; }

.in-plate { display: inline-block; font-size: 12px; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.add { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--gold); color: var(--wine-dd); flex: none; box-shadow: 0 6px 14px -8px rgba(120, 80, 0, .9); }
.add .i { width: 18px; height: 18px; stroke-width: 2.8; }
.add:active { transform: scale(.92); }
.add .q { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--wine); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }

/* Seções e linhas horizontais */
.sec { display: grid; gap: 12px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head h2 { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em; }
.sec-head .hand { font-size: 26px; color: var(--wine); }
.sec-head .sub { font-size: 13px; color: var(--muted); }
.sec-head .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--wine); background: none; border: 0; padding: 4px 0; text-decoration: none; white-space: nowrap; }
.sec-head .link .ri { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wine); color: #fff; }
.sec-head .link .ri .i { width: 14px; height: 14px; stroke-width: 2.8; }
.hrow { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 4px 14px 12px; scroll-snap-type: x mandatory; }
.hrow::-webkit-scrollbar { display: none; }

.scard { flex: none; width: 172px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; border: 0; padding: 0; text-align: left; scroll-snap-align: start; }
.scard .thumb { border-radius: 0; aspect-ratio: auto; height: 96px; }
.scard .badge-ex { position: absolute; top: 8px; left: 8px; z-index: 1; }
.scard .sb { padding: 10px 12px 12px; display: grid; gap: 3px; }
.scard .st { display: grid; gap: 1px; }
.scard .st b { font-weight: 800; font-size: 16px; }
.scard .st .price { font-size: 15px; }
.scard small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.scard .tw { position: relative; }

.gcard { flex: none; width: 164px; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); text-decoration: none; color: var(--ink); scroll-snap-align: start; }
.gcard .thumb { aspect-ratio: auto; height: 92px; border-radius: 14px; }
.gcard b { font-weight: 700; font-size: 14.5px; line-height: 1.15; overflow-wrap: anywhere; }
.gcard .gc { font-size: 13px; font-weight: 700; color: var(--wine); }
.gcard small { font-size: 12px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Faixa dourada de horário */
.gold-banner { padding: 18px; border-radius: 24px; background: var(--gold); color: var(--wine-dd); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gold-banner .gb { display: grid; gap: 4px; justify-items: start; }
.gold-banner .hand { font-size: 27px; }
.gold-banner p { font-size: 14px; line-height: 1.35; }
.gold-banner .pill-link { margin-top: 6px; }
.stamp { width: 84px; height: 84px; border-radius: 50%; border: 3px dashed var(--wine-dd); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 13px; line-height: 1.1; transform: rotate(-8deg); padding: 6px; text-transform: uppercase; }

/* Cartão escuro do pedido em andamento */
.live { display: grid; gap: 12px; padding: 16px; border-radius: 24px; background: var(--night); color: #fff; text-decoration: none; }
.live-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.live-h .hand { font-size: 25px; color: var(--gold); }
.live-h small { font-size: 12.5px; color: var(--night-txt); }
.live-t { display: grid; gap: 2px; }
.live-t b { font-weight: 800; font-size: 18px; }
.live-t span { font-size: 13px; color: var(--night-txt); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Linha do tempo horizontal */
.trk { --n: 4; --p: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.trk::before, .trk .fill { content: ""; position: absolute; top: 14px; height: 3px; left: calc(50% / var(--n)); border-radius: 3px; }
.trk::before { right: calc(50% / var(--n)); background: rgba(255, 255, 255, .16); }
.trk .fill { width: calc((100% - 100% / var(--n)) * var(--p)); background: var(--gold); transition: width .6s var(--ease); }
.trk-s { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; align-content: start; padding: 0 2px; }
.trk-s .d { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); color: var(--night-mute); }
.trk-s .d .i { width: 14px; height: 14px; stroke-width: 2.6; }
.trk-s b { font-size: 11px; line-height: 1.15; font-weight: 500; color: var(--night-mute); }
.trk-s small { font-size: 10.5px; color: var(--night-txt); font-variant-numeric: tabular-nums; }
.trk-s.done .d { background: var(--gold); color: var(--wine-dd); }
.trk-s.done b, .trk-s.now b { color: #fff; font-weight: 700; }
.trk-s.now .d { background: #fff; color: var(--wine); box-shadow: 0 0 0 5px rgba(232, 178, 28, .35); }
.trk-s.now .d::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold); animation: ring 1.8s infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }

/* Informações */
.info { display: grid; border-radius: 22px; background: var(--card); overflow: hidden; box-shadow: var(--sh-card); }
.app[data-route="inicio"] .info { border: 1px solid var(--line-2); }
.info-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; border-top: 1px solid var(--line-2); min-height: 62px; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.info-row:first-child { border-top: 0; }
.info-row > .ii { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--wine); flex: none; }
.info-row > .ii .i { width: 19px; height: 19px; }
.info-row div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.info-row b { font-size: 14.5px; }
.info-row span { color: var(--muted); font-size: 13.5px; }
.info-row .go { color: #b9aca7; }

/* Cardápio */
.app[data-route="cardapio"] .topbar { position: relative; }
.sticky-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin: -16px -14px 0; padding: 12px 14px 10px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; gap: 10px; }
.day-head { display: grid; gap: 2px; }
.day-head .hand { font-size: 22px; color: var(--wine); }
.day-head h2 { font: 800 24px/1.12 var(--f-display); letter-spacing: -.015em; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--gold-soft); color: #5e4300; font-size: 13.5px; }
.notice .i { color: var(--gold-d); margin-top: 1px; }

.sizes { display: grid; gap: 10px; }
.size-card {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: var(--card); border: 2px solid transparent;
  box-shadow: var(--sh-card); text-align: left; width: 100%; transition: border-color .2s, transform .15s var(--ease);
}
.size-card:hover { border-color: #ecd8d6; }
.size-card:active { transform: scale(.985); }
.size-card[aria-disabled="true"] { opacity: .7; }
.size-card .lt { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--wine); font: 800 20px/1 var(--f-display); }
.size-card h3 { font: 800 17px/1.15 var(--f-display); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.size-card .sz-t { display: grid; gap: 4px; min-width: 0; }
.size-card .sz-t p { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.size-card .side { display: grid; justify-items: end; gap: 6px; }
.size-card .price { font-size: 16px; }
.size-card .go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: #fff; }
.size-card .go .i { width: 17px; height: 17px; stroke-width: 2.8; }
.size-card .rules { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.size-card .rule { padding: 4px 10px; border-radius: 99px; background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 700; }

.cat-sec { display: grid; gap: 10px; scroll-margin-top: 130px; }
.cat-title { display: flex; align-items: center; gap: 10px; }
.cat-title .ci { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: #9a6a00; }
.cat-title .ci .i { width: 19px; height: 19px; }
.cat-title h3 { font: 800 19px/1.1 var(--f-display); flex: 1; letter-spacing: -.01em; }
.cat-title .count { font-size: 12px; color: var(--ink-2); font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #fff; }
.list { display: grid; border-radius: 22px; background: var(--card); padding: 2px 14px; box-shadow: var(--sh-card); }

.item { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; padding: 12px 0; align-items: center; border-top: 1px solid var(--line-2); position: relative; }
.item:first-child { border-top: 0; }
.item .thumb { width: 62px; border-radius: 50%; }
.item .thumb .ph { background: radial-gradient(circle, #fff 0 44%, var(--ph, var(--cream)) 45%); }
.item .thumb .ph .i { width: 42%; height: 42%; }
.item-body { min-width: 0; display: grid; gap: 3px; }
.item-body h4 { font-size: 15px; font-weight: 700; line-height: 1.25; }
.item-body p { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.item-tags:empty { display: none; }
.item-side { display: grid; justify-items: end; gap: 6px; align-self: stretch; align-content: space-between; }
.item.out .thumb, .item.out .item-body h4, .item.out .item-body p { opacity: .48; }
.item.out .thumb::after, .drink.out .thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 8px, rgba(255, 255, 255, .45) 8px 10px); }

.fav { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: #bfb2ad; }
.fav .i { width: 20px; height: 20px; }
.fav[aria-pressed="true"] { color: var(--wine); }
.fav[aria-pressed="true"] .i { fill: currentColor; }
.fav:active { transform: scale(.85); }

.drink-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .drink-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.drink { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; background: var(--card); overflow: hidden; box-shadow: var(--sh-card); position: relative; }
.drink .thumb { border-radius: 0; aspect-ratio: 1 / .8; }
.drink .fav { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .94); box-shadow: var(--sh-1); }
.drink-body { padding: 10px 12px 12px; display: grid; gap: 3px; align-content: start; }
.drink-body h4 { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.drink-body .size { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.drink-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; min-height: 36px; }
.drink-foot .price { font-size: 16px; }
.drink-foot .stepper button { width: 30px; height: 30px; }
.drink-foot .stepper output { min-width: 18px; }
.stock-note { font-size: 12px; font-weight: 700; color: var(--warn); }
.drink.out .drink-body h4, .drink.out .price { opacity: .5; }
.tag-out { position: absolute; z-index: 2; top: 10px; left: 10px; }
.drink .badge-ex { justify-self: start; }

/* Carrinho */
.lines { display: grid; border-radius: 22px; background: var(--card); padding: 2px 14px; box-shadow: var(--sh-card); }
.line { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.line:first-child { border-top: 0; }
.line .thumb { width: 48px; border-radius: 50%; }
.line .thumb .ph { background: radial-gradient(circle, #fff 0 44%, var(--ph, var(--cream)) 45%); }
.line .thumb .ph .i { width: 46%; height: 46%; }
.line-body { display: grid; gap: 5px; min-width: 0; }
.line-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.line-top h4 { font-size: 15px; font-weight: 700; line-height: 1.25; }
.line-top .price { white-space: nowrap; }
.line-det { font-size: 12.5px; color: var(--muted); display: grid; gap: 1px; line-height: 1.35; }
.line-det b { color: var(--ink-2); font-weight: 700; }
.line-act { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 3px; }
.line-act .unit { font-size: 12.5px; color: var(--muted); }
.line .warn-line { font-size: 12.5px; font-weight: 700; color: var(--danger); display: flex; gap: 6px; align-items: center; }
.line-add { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.line-add .thumb { width: 48px; border-radius: 50%; flex: none; }
.line-add .la { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.line-add b { font-size: 14.5px; }
.line-add small { font-size: 12.5px; color: var(--muted); }
.line-add .add { pointer-events: none; }
.line-add .add.plain { background: var(--paper); color: var(--wine); box-shadow: none; }

.summary { display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-card); }
.summary .row { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.summary .row b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.summary .total { padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--line); font-size: 17px; color: var(--ink); font-weight: 800; align-items: baseline; }
.summary .total b { font: 800 26px/1 var(--f-display); color: var(--wine); letter-spacing: -.01em; }
.summary small { color: var(--muted); }

/* Botão fixo inferior acima da barra de navegação */
.dock { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: grid; gap: 8px; }
.cart-pill { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(600px, calc(100% - 28px)); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border-radius: 99px; background: var(--night); color: #fff; border: 0; box-shadow: var(--sh-3); text-align: left; animation: viewIn .3s var(--ease); text-decoration: none; }
.cart-pill .n { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 99px; background: var(--wine); color: #fff; font-weight: 800; font-size: 15px; }
.cart-pill > span:not(.n) { flex: 1; font-weight: 700; }
.cart-pill b { padding: 10px 16px; border-radius: 99px; background: var(--gold); color: var(--wine-dd); font-variant-numeric: tabular-nums; font-weight: 800; }

/* Finalização */
.step { display: grid; gap: 14px; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-card); }
.step-h { display: flex; align-items: center; gap: 10px; }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--night); color: var(--gold); font-weight: 800; font-size: 14px; flex: none; }
.step-h h3 { font: 800 18px/1.15 var(--f-display); letter-spacing: -.01em; }
.choice-big {
  display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 20px; border: 2px solid var(--line-2);
  background: var(--card); font-weight: 800; font-size: 15px; line-height: 1.2; position: relative; transition: border-color .2s, box-shadow .2s;
}
.choice-big .ci { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--wine); margin-bottom: 4px; }
.choice-big .ci .i { width: 24px; height: 24px; }
.choice-big small { font-weight: 500; color: var(--muted); font-size: 12px; }
.choice-big[aria-pressed="true"] { border-color: var(--wine); box-shadow: 0 10px 22px -14px rgba(135, 1, 7, .9); }
.choice-big[aria-pressed="true"] .ci { background: var(--wine); color: #fff; }
.choice-big:disabled { opacity: .45; }
.addr-card { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--paper); align-items: flex-start; }
.addr-card > .i { color: var(--wine); margin-top: 2px; }
.addr-card b { display: block; }
.addr-card span { font-size: 13.5px; color: var(--muted); }
.saved-addr { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.saved-addr .chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.slots { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.slots::-webkit-scrollbar { display: none; }
.slot { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; font-weight: 700; font-size: 13.5px; background: #fff; color: var(--ink); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.slot[aria-pressed="true"] { background: var(--night); color: #fff; border-color: var(--night); }

/* Confirmação */
.confirm { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 12px 4px; }
.confirm .big-check { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--gold); color: var(--wine-dd); animation: pop .5s var(--ease); box-shadow: 0 0 0 10px var(--gold-soft); margin-bottom: 8px; }
.confirm .big-check .i { width: 46px; height: 46px; stroke-width: 2.6; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
.confirm .hand { font-size: 26px; color: var(--wine); }
.confirm h2 { font: 800 28px/1.1 var(--f-display); letter-spacing: -.015em; }
.confirm .ord-no { font: 800 17px/1 var(--f-display); color: var(--gold); padding: 10px 18px; border-radius: 99px; background: var(--night); letter-spacing: .02em; }
.confirm p { color: var(--ink-2); max-width: 36ch; }
.pix-box { display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: #f1f8f3; border: 1px solid #d6e7dc; }
.pix-box h3 { display: flex; align-items: center; gap: 8px; font: 800 17px/1.2 var(--f-display); color: #165b36; }
.pix-box code { display: block; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #d6e7dc; font-size: 12px; word-break: break-all; color: var(--ink-2); max-height: 84px; overflow: auto; }
.pix-box .key { font-weight: 800; font-size: 15px; word-break: break-all; }

/* Acompanhamento */
.track-card { display: grid; gap: 14px; padding: 18px 14px 18px; border-radius: 24px; background: var(--night); color: #fff; }
.track-card .live-h .hand { font-size: 25px; }
.track-card h2 { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em; }
.track-card p { color: var(--night-txt); font-size: 14px; margin-top: -8px; }
.track-card.cancelled { background: #3a1214; }
.cancel-box { display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: var(--danger-soft); color: #7d1218; }
.cancel-box > .i { color: var(--danger); }

.ocards { display: grid; gap: 10px; }
.ocard { display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; background: var(--card); text-align: left; width: 100%; box-shadow: var(--sh-card); text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.ocard-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ocard-top b { font: 800 18px/1 var(--f-display); }
.ocard .meta { font-size: 13px; color: var(--muted); }
.ocard .items-mini { font-size: 13.5px; color: var(--ink-2); }
.ocard-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.ocard .go-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wine); font-weight: 700; font-size: 14px; }
.ocard.active { border-color: var(--gold); }

/* Perfil */
.prof-head { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 24px; background: var(--night); color: #fff; }
.avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--gold); color: var(--wine-dd); font: 800 24px/1 var(--f-display); flex: none; }
.prof-head h2 { font: 800 20px/1.15 var(--f-display); }
.prof-head .ph-sub { color: var(--night-txt); font-size: 13.5px; }
.join-card { display: grid; gap: 12px; padding: 18px; border-radius: 24px; background: var(--gold); color: var(--wine-dd); }
.join-card .hand { font-size: 27px; }
.join-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.join-card li { display: flex; gap: 8px; align-items: center; }
.join-card li .i { width: 17px; height: 17px; }
.join-card .row { display: flex; gap: 10px; flex-wrap: wrap; }
.join-card .btn-outline { --bg: transparent; --bd: var(--wine-dd); --fg: var(--wine-dd); }
.panel { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-card); }
.panel h3 { font: 800 18px/1.15 var(--f-display); display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.panel h3 .pi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: var(--wine); }
.panel h3 .pi .i { width: 18px; height: 18px; }
.panel .list { box-shadow: none; padding: 0; }
.addr-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--paper); }
.addr-item div { flex: 1; min-width: 0; font-size: 14px; }
.addr-item small { display: block; color: var(--muted); }

/* Montagem do prato */
.szsel { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.szb { display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border-radius: 18px; background: #fff; border: 2px solid transparent; text-align: center; transition: border-color .2s, box-shadow .2s; }
.szb .lt { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--wine); font: 800 18px/1 var(--f-display); margin-bottom: 2px; }
.szb b { font-weight: 700; font-size: 14px; line-height: 1.15; }
.szb .price { font-size: 15px; }
.szb[aria-pressed="true"] { border-color: var(--wine); box-shadow: 0 10px 22px -14px rgba(135, 1, 7, .9); }
.szb[aria-pressed="true"] .lt { background: var(--wine); color: #fff; }
.szsel.one { grid-template-columns: 1fr; }
.szsel.one .szb { grid-template-columns: 40px 1fr auto; justify-items: start; align-items: center; text-align: left; gap: 12px; padding: 12px 14px; }
.szsel.one .szb .lt { margin: 0; }

.prog-card { display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: var(--night); color: #fff; }
.prog-card .ph-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prog-card .hand { font-size: 25px; color: var(--gold); }
.prog-card small { font-size: 12px; color: var(--night-txt); }
.prog-card p { font-size: 13px; color: var(--night-txt); }
.progress { display: flex; gap: 6px; flex-wrap: wrap; }
.progress .pg { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; }
.progress .pg.full { background: var(--gold); color: var(--wine-dd); }

.bgroup { display: grid; gap: 10px; }
.bgroup-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bgroup-h h4 { font: 800 19px/1.1 var(--f-display); display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.bgroup-h h4 .gi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: #9a6a00; }
.bgroup-h h4 .gi .i { width: 19px; height: 19px; }
.bgroup-h span.rl { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--ink-2); white-space: nowrap; }
.bgroup-h span.rl.full { background: var(--ok-soft); color: var(--ok); }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 8px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 16px;
  border: 2px solid transparent; background: var(--card); text-align: left; min-height: 58px; font-weight: 700; font-size: 13.5px; line-height: 1.2;
  transition: border-color .15s, background .15s, opacity .2s;
}
.pick .thumb { width: 38px; border-radius: 50%; }
.pick .thumb .ph { background: radial-gradient(circle, #fff 0 46%, var(--ph, var(--cream)) 47%); }
.pick .thumb .ph .i { width: 52%; height: 52%; stroke-width: 1.7; }
.pick .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; color: transparent; }
.pick .ck .i { width: 13px; height: 13px; stroke-width: 3.4; }
.pick[aria-pressed="true"] { border-color: var(--wine); background: var(--wine-tint); }
.pick[aria-pressed="true"] .ck { background: var(--wine); color: #fff; }
.pick:disabled { opacity: .45; }
.pick .sold { display: block; font-size: 11px; color: var(--danger); font-weight: 800; letter-spacing: .04em; }
@media (max-width: 360px) { .picks { grid-template-columns: 1fr; } }
.sheet-foot .cta { flex: 1; min-height: 52px; padding-left: 18px; }

/* Busca */
.search-box { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-radius: 99px; background: var(--card); border: 2px solid var(--gold); min-height: 52px; }
.search-box .i { color: var(--wine); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16.5px; min-height: 48px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.res-group { display: grid; gap: 8px; }
.res-group > h4 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Folhas de menu e avisos */
.menu-logo { display: grid; justify-items: center; gap: 10px; padding: 4px 0 2px; }
.menu-logo img { width: 170px; height: auto; }
.fee-list { display: grid; gap: 6px; }
.fee-list div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 12px; background: var(--paper); }
.fee-list b { font-variant-numeric: tabular-nums; }

/* Barra de navegação inferior com carrinho central */
.tabbar {
  position: fixed; z-index: 45; bottom: 0; left: 50%; transform: translateX(-50%); width: min(640px, 100%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; background: #fff; border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 30px -18px rgba(29, 23, 22, .45); padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 76px;
}
.tabbar a { display: grid; justify-items: center; gap: 3px; padding: 4px 2px; border-radius: 14px; text-decoration: none; color: #8c807b; font-size: 12px; font-weight: 600; position: relative; }
.tabbar a .i { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--wine); font-weight: 800; }
.tabbar .tb-dot { position: absolute; top: 2px; left: calc(50% + 7px); width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; }
.tabbar .tb-cart { justify-self: center; width: 66px; height: 66px; margin-top: -38px; border-radius: 50%; padding: 0; background: var(--gold); color: var(--wine-dd); display: grid; place-items: center; border: 5px solid #fff; box-shadow: 0 12px 24px -10px rgba(120, 80, 0, .8); }
.tabbar .tb-cart .i { width: 26px; height: 26px; stroke-width: 2.2; }
.tabbar .tb-cart[aria-current="page"] { background: var(--wine); color: #fff; box-shadow: 0 12px 24px -10px rgba(135, 1, 7, .8); }
.tabbar .tb-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--wine); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.tabbar .tb-cart[aria-current="page"] .tb-badge { background: var(--gold); color: var(--wine-dd); }

.foot-note { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 0; }
.foot-note a { color: var(--wine); font-weight: 700; }

.install-tip { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: var(--night); color: #fff; }
.install-tip > .i { color: var(--gold); }
.install-tip div { flex: 1; font-size: 13.5px; }
.install-tip b { display: block; font-size: 14.5px; }

/* Abertura */
.boot { min-height: 70vh; display: grid; place-items: center; align-content: center; gap: 16px; }
.boot img { width: 200px; animation: breathe 1.6s infinite ease-in-out; }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .8; } }

.grid-2 > .btn { white-space: normal; min-width: 0; text-align: center; }
.ghost-list { display: grid; gap: 2px; }
.ghost-list .btn { justify-content: flex-start; }

/* Quem leva o pedido (o telefone do entregador não aparece) */
.courier { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cour-top { display: flex; align-items: center; gap: 12px; }
.cour-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--wine); color: #fff; font: 800 19px/1 var(--f-display); box-shadow: 0 0 0 4px var(--gold-soft); }
.cour-top b { display: block; font: 800 17px/1.2 var(--f-display); }
.cour-top small { color: var(--muted); font-size: 13px; }
.cour-veh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--paper); font-weight: 700; font-size: 14px; }
.cour-veh .i { color: var(--wine); }
.cour-plate { margin-left: auto; padding: 3px 9px; border-radius: 7px; border: 1.5px solid var(--ink); background: #fff; font: 800 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.cour-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-ink); font-size: 13.5px; font-weight: 700; }
.cour-safe { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: 12.5px; }