@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500&display=swap');

:root{
  --ink:#1C2A22; --ink-soft:#63645A; --paper:#FAF7F0; --card:#FFFFFF;
  --line:#E7E1D2; --gold:#A6752E; --gold-soft:#F1E4CC; --wine:#6E1E2E; --pine:#3B5A45; --pine-bright:#4A7259;
  --shadow: 0 8px 24px -14px rgba(28,42,34,.35);
  --gold-ring: rgba(166,117,46,.16);
  --gold-dark:#96692A; --pine-deep:#24382B; --terra:#B98C4A;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  font-family:'Montserrat',system-ui,sans-serif; background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; display:flex; justify-content:center;
}
a{color:var(--gold); text-decoration:none; transition:color var(--t-fast) ease;}
a:hover{color:var(--gold-dark);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--gold); color:#fff;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* -------------------------------------------------- motion primitives */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: dibello-fade-out var(--t-base) var(--ease-out) both; }
  ::view-transition-new(root){ animation: dibello-fade-in var(--t-base) var(--ease-out) both; }
  @keyframes dibello-fade-out{ to{ opacity:0; transform:scale(.99) translateY(4px); } }
  @keyframes dibello-fade-in{ from{ opacity:0; transform:scale(.99) translateY(6px); } }

  @keyframes dibello-pulse{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.16); }
    100%{ transform:scale(1); }
  }
  @keyframes dibello-pop{
    from{ transform:scale(0); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }
  .pulse{ animation: dibello-pulse 420ms var(--ease-out); }
  .badge.pop{ animation: dibello-pop 320ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

#app{width:100%; max-width:480px; min-height:100vh; background:var(--paper); display:flex; flex-direction:column; position:relative; transition:max-width var(--t-base) var(--ease-out);}
.screen{display:none; flex-direction:column; min-height:100vh;}
.screen.active{display:flex;}

.appbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 20px 4px;}
.appbar .back{width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;}
.brand{font-weight:700; font-style:italic; font-size:16px;}
.brand b{font-style:normal; color:var(--gold);}

.desktop-nav{display:none;}

/* ------------------------------------------------------------ storehead */
.storehead{
  display:flex; align-items:center; gap:12px; margin:14px 20px 0; padding:16px; border-radius:18px; background:var(--ink);
  flex:none; /* item flex dentro de #scr-cardapio — sem isso, overflow:hidden deixa a altura mínima colapsar pra 0 */
}
.storehead-badge{
  width:42px;height:42px;border-radius:13px;background:color-mix(in srgb, var(--gold) 18%, transparent);display:flex;align-items:center;justify-content:center;flex:none;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;font-style:italic;color:var(--gold);
}
.storehead-info{min-width:0;}
.storehead-status{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#FAF7F0;}
.statusdot{width:7px;height:7px;border-radius:50%;background:#5FAE7A;flex:none;}
.statusdot.closed{background:var(--wine-bright, #B4495A);}
.storehead-meta{font-size:11px; color:#C9C2AE; margin-top:4px; line-height:1.5;}
.storepromo{margin:10px 20px 0; font-size:11px; font-weight:600; color:var(--gold); text-align:center;}

.searchbar{
  display:flex; align-items:center; gap:9px; margin:16px 20px 0; padding:13px 16px; border-radius:13px;
  background:var(--card); border:1.4px solid var(--line); box-shadow:0 1px 2px rgba(28,42,34,.04);
}
.searchbar input{flex:1; border:none; background:transparent; font-size:13px; color:var(--ink); font-family:inherit;}
.searchbar input:focus{outline:none;}
.searchbar input::placeholder{color:#8a8b7f;}

.browse{display:flex; flex-direction:column;}
.catpills.chips{padding-top:16px;}
.catpills .chip.active{background:var(--ink); color:#FAF7F0; box-shadow:none;}

/* ---------------------------------------------------- responsive shell */
@media (min-width:860px){
  body{
    background:
      radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(59,90,69,.06), transparent 40%),
      var(--paper);
    padding:36px 20px;
    align-items:flex-start;
  }
  #app{
    min-height:0; border-radius:26px; box-shadow:0 24px 60px -28px rgba(28,42,34,.35);
    border:1px solid var(--line); overflow:hidden;
  }
  #app:has(#scr-cardapio.active){max-width:1120px;}

  #scr-cardapio .appbar{padding:26px 32px 6px;}
  #scr-cardapio .brand{font-size:19px;}
  /* "Pedidos" fica à direita, ao lado do perfil e da sacola */
  .desktop-nav{display:flex; gap:6px; flex:1; justify-content:flex-end; margin-right:10px;}
  .navlink{background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); padding:9px 18px; border-radius:100px; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);}
  .navlink:hover{background:var(--paper-2, var(--card)); color:var(--ink);}
  #app .tabbar{display:none;}
  .userchip{max-width:200px;}

  .storehead{margin:20px 32px 0; padding:20px 24px;}
  .storepromo{margin:12px 32px 0; text-align:left;}
  .searchbar{margin:16px 32px 0; max-width:420px;}

  .browse{padding:0 32px 40px;}
  /* dentro de .browse (que já tem o recuo de 32px) nada recua de novo, senão a busca e os banners ficam desalinhados */
  .browse .searchbar{margin:16px 0 0; max-width:460px;}
  .browse .banners{padding:14px 0 4px; scroll-padding-inline:0;}
  .browse .banner{width:min(340px,80%);}
  #scr-cardapio .catpills.chips{padding:18px 0 6px;}
  #scr-cardapio .sectionhead{padding:18px 0 10px;}
  #scr-cardapio .itemlist{
    display:grid; gap:14px; padding:6px 0 20px; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  }
  #scr-cardapio .itemrow{padding:14px; align-items:stretch;}
  #scr-cardapio .itemrow .thumb{width:84px; height:84px; align-self:center;}
  #scr-cardapio .itemrow .name{font-size:14px;}
  #scr-cardapio .itemrow .desc{font-size:12px;}
}
.iconbtn{width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center; position:relative; transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast);}
.iconbtn.dark{background:var(--ink); border-color:var(--ink);}
.iconbtn:active{transform:scale(.92);}
.badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--gold); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;}

.chips{display:flex; gap:8px; padding:14px 20px; overflow-x:auto;}
.chip{flex:none; font-size:12px; font-weight:600; padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); transition:background var(--t-fast) var(--ease-out), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);}
.chip:active{transform:scale(.95);}
.chip.active{background:var(--gold-soft); color:var(--ink); box-shadow:inset 0 0 0 1.4px var(--gold);}

.sectionhead{display:flex; justify-content:space-between; align-items:center; padding:18px 20px 8px;}
.sectionhead h2{font-size:15px; margin:0;}

.itemlist{display:flex; flex-direction:column; gap:10px; padding:6px 20px 110px;}
.itemrow{
  display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:12px; cursor:pointer; text-align:left;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base);
}
.itemrow:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#DCD4BC;}
.itemrow:active{transform:translateY(-1px) scale(.995);}
.itemrow .info{flex:1; min-width:0;}
.itemrow .name{font-size:13px; font-weight:600; line-height:1.3;}
.itemrow .desc{font-size:11px; color:var(--ink-soft); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45;}
.itemrow .price{font-size:13px; font-weight:700; margin-top:7px;}
.itemrow .thumb{width:64px; height:64px; border-radius:12px; background:linear-gradient(135deg,var(--terra),var(--wine)); flex:none;}

.detailhero{height:180px; background:linear-gradient(135deg,var(--terra),var(--wine)); flex:none;}
.detailbody{padding:16px 20px 130px;}
.pairing-card{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;}
.pairing-lbl{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pine-bright);}
.pairing-row{display:flex;gap:10px;margin-top:12px;align-items:flex-start;}
.pairing-ic{width:32px;height:32px;border-radius:9px;background:var(--gold-soft);flex:none;display:flex;align-items:center;justify-content:center;}

.stickybar{position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line); padding:14px 20px 20px;}
.cta{
  width:100%; background:var(--gold); color:#fff; font-size:13.5px; font-weight:700; padding:15px; border-radius:13px; border:none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.cta:hover{background:var(--gold-dark); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--gold) 55%, transparent);}
.cta:active{transform:scale(.98);}
.cta.ghost{background:transparent; border:1.4px solid var(--gold); color:var(--gold);}
.cta.ghost:hover{background:var(--gold-ring);}
.cta.pine{background:var(--pine);}
.cta.pine:hover{background:#324e3c;}

.cartline{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; margin:0 20px 10px;}
.cartline .thumb{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--terra),var(--wine)); flex:none;}

.cashbanner{margin:14px 20px 0; padding:13px 14px; border-radius:14px; background:var(--ink); color:#EDE6D6; display:flex; gap:10px; align-items:center; font-size:11.5px;}

.field{padding:0 20px; margin-top:16px;}
.field label{font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:13px; border:1.5px solid var(--line); background:var(--card);
  font-size:14px; color:var(--ink); box-shadow:0 1px 2px rgba(28,42,34,.04);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder{color:#8a8b7f;}
.field input:hover, .field select:hover, .field textarea:hover{border-color:#D3CBB4;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:#FFFEFB;
  box-shadow:0 0 0 4px var(--gold-ring), 0 1px 2px rgba(28,42,34,.04);
}
.field-icon{position:relative;}
.field-icon svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); pointer-events:none;}
.field-icon input{padding-left:42px !important;}

/* -------------------------------------------------------------- login */
.loginhero{
  background:var(--ink); padding:26px 20px 24px; border-radius:0 0 28px 28px;
  display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;
}
.loginhero .back{
  position:absolute; left:20px; top:26px; width:36px; height:36px; border-radius:11px;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.back.light{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18);}
.loginhero-badge{
  width:52px; height:52px; border-radius:16px; background:color-mix(in srgb, var(--gold) 16%, transparent);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.loginhero-tag{font-size:11px; color:rgba(250,247,240,.6); margin-top:4px;}
.loginfoot{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:24px; padding:0 20px 8px; font-size:11px; color:var(--ink-soft);
}
.staff-link{font-size:11px; font-weight:600; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;}
.staff-link:hover{color:var(--ink);}

.addrcard{display:flex; gap:12px; padding:14px; border-radius:14px; background:var(--card); border:1.4px solid var(--line); margin:0 20px 10px; cursor:pointer;}
.addrcard.sel{border-color:var(--gold); background:var(--gold-soft);}
.addrcard .radio{width:17px;height:17px;border-radius:50%;border:1.6px solid var(--line); flex:none; margin-top:2px;}
.addrcard.sel .radio{border-color:var(--gold); background:radial-gradient(circle, var(--gold) 42%, transparent 46%);}
.sectionlbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:20px 20px 8px;}

.confwrap{padding:60px 32px; text-align:center; margin:auto 0;}
.confcheck{width:72px;height:72px;border-radius:50%;background:var(--pine);display:flex;align-items:center;justify-content:center; margin:0 auto;}
.progress{display:flex; justify-content:space-between; margin-top:32px; position:relative; padding:0 8px;}
.progress::before{content:"";position:absolute;top:10px;left:36px;right:36px;height:2px;background:var(--line);}
.progress .st{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;z-index:1;}
.progress .dot{width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--line);}
.progress .dot.done{background:var(--gold);border-color:var(--gold);}

/* Barra inferior: 3 colunas IGUAIS — a sacola é a coluna do meio, então fica exatamente no centro da tela. */
.tabbar{display:grid; grid-template-columns:repeat(3,1fr); align-items:end; padding:8px 8px calc(14px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); position:sticky; bottom:0; z-index:30; margin-top:auto;}
.tabbar.hide{display:none;}
.tabbar .tab{position:relative; background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:52px;color:var(--ink-soft);font-size:11px;font-weight:600;}
.tabbar .tab.active{color:var(--gold);}
.tab-dot{position:absolute; top:4px; left:calc(50% + 8px); width:9px; height:9px; border-radius:50%; background:var(--gold); border:2px solid var(--card);}
.tab-center{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:52px; font-size:11px; font-weight:600; color:var(--ink-soft);}
.tab-center button{position:relative; width:58px; height:58px; margin-top:-30px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; border:0; box-shadow:0 10px 22px -10px color-mix(in srgb, var(--gold) 85%, #000), 0 0 0 5px var(--card);}
.tab-center button:active{transform:scale(.94);}
.tab-center .badge{top:-3px; right:-3px; background:var(--ink);}
@keyframes vespa-ride{0%,100%{transform:translateY(0);} 50%{transform:translateY(-1.5px);}}
.tab-center .vespa{animation:vespa-ride 1.4s ease-in-out infinite;}

/* topo: avatar + nome da pessoa logada (abre o perfil) */
.appbar-right{display:flex; align-items:center; gap:10px; flex:none;}
.userchip{display:flex; align-items:center; gap:8px; max-width:150px; height:38px; padding:0 12px 0 4px; border-radius:100px; background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:12.5px; font-weight:600; transition:border-color var(--t-fast);}
.userchip:hover{border-color:var(--gold);}
.userchip.guest{padding:0 14px; color:var(--gold); border-color:var(--gold);}
.userchip .av{flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;}
.userchip .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* pedidos: em andamento / histórico */
.segs{display:grid; grid-template-columns:1fr 1fr; margin:14px 20px 4px; padding:4px; gap:4px; border-radius:12px; background:var(--line);}
.segs button{height:40px; border-radius:9px; border:0; background:none; font-weight:600; font-size:13.5px; color:var(--ink-soft);}
.segs button.active{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1);}
.ordercard.live{border:1.5px solid var(--gold);}
.ordercard .pill{display:inline-block; padding:3px 10px; border-radius:100px; background:var(--gold-soft); color:var(--gold-dark); font-size:11px; font-weight:700;}
.ordercard .pill.done{background:#E1EDE4; color:var(--pine);}
.ordercard .pill.cancel{background:#F6E3E3; color:var(--wine);}
.ordercard .minitrack{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:12px;}
.ordercard .minitrack i{height:4px; border-radius:4px; background:var(--line);}
.ordercard .minitrack i.on{background:var(--gold);}
.ordercard .open{margin-top:12px; width:100%; height:42px; border-radius:11px; background:var(--gold); color:#fff; border:0; font-weight:600; font-size:13px;}

.floatcart{
  position:sticky; bottom:84px; z-index:6; margin:0 20px 10px; padding:13px 16px; border-radius:14px;
  background:var(--ink); color:#FAF7F0; display:flex; align-items:center; gap:10px; cursor:pointer;
  box-shadow:0 12px 26px -10px rgba(28,42,34,.5);
  transition:transform var(--t-fast) var(--ease-out);
}
.floatcart:active{transform:scale(.98);}
.floatcart-count{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.floatcart span:nth-child(2){flex:1; font-size:12.5px; font-weight:600;}
.floatcart b{font-size:13px;}

.levelcard{margin:16px 20px 0;border-radius:18px;background:var(--ink);padding:18px;color:#fff;}
.barbg{height:6px;border-radius:100px;background:rgba(255,255,255,.14);margin-top:13px;overflow:hidden;}
.barfg{height:100%;background:var(--gold);border-radius:100px;}
.acctrow{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-top:1px solid var(--line);font-size:12px;}
.acctrow:first-child{border-top:none;}

.toast{
  position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(8px); background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:100px; font-size:12px; font-weight:600; opacity:0; pointer-events:none; z-index:50;
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.centered{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:40px; text-align:center;}
.stars{display:flex; gap:6px; margin-top:14px;}
.star{width:30px;height:30px;cursor:pointer;}

/* ------------------------------------------------------------ login OTP */
.fielderr{color:var(--wine); font-size:12px; padding:8px 20px 0; margin:0;}
.linklike{background:none; border:none; padding:0; font-size:11.5px; font-weight:600; color:var(--gold); text-decoration:underline; text-underline-offset:2px;}
.linklike:hover{color:var(--gold-dark);}

/* -------------------------------------------------------- entrega/retirada */
.fulfill-toggle{display:flex; gap:10px; padding:0 20px;}
.fulfillopt{
  flex:1; display:flex; align-items:center; gap:10px; text-align:left; padding:13px 14px; border-radius:14px;
  background:var(--card); border:1.4px solid var(--line); color:var(--ink-soft);
  transition:box-shadow var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast);
}
.fulfillopt b{display:block; font-size:12.5px; font-weight:600; color:var(--ink);}
.fulfillopt span{display:block; font-size:10.5px; margin-top:2px;}
.fulfillopt.active{border-color:var(--gold); background:var(--gold-soft); color:var(--ink);}
.fulfillopt.active svg{color:var(--gold);}

.pickupcard{margin:0 20px; padding:14px; border-radius:14px; background:var(--card); border:1.4px solid var(--line); font-size:12.5px; color:var(--ink-soft); line-height:1.6;}
.pickupcard b{color:var(--ink);}

.quotebanner{margin:14px 20px 0; padding:12px 14px; border-radius:14px; background:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--gold); font-size:12px; color:var(--ink); display:flex; justify-content:space-between; gap:10px;}
.quotebanner.warn{background:#F6E3E3; box-shadow:inset 0 0 0 1px var(--wine); color:var(--wine);}

/* -------------------------------------------------------- busca de endereço */
.searchbox{background:var(--card); border:1.5px solid var(--line); border-radius:13px; padding:0;}
.searchbox input{border:none !important; box-shadow:none !important; background:transparent !important;}
#addr-search-results{padding:6px 20px 0; display:flex; flex-direction:column; gap:8px;}
.addr-result{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:13px; background:var(--card); border:1px solid var(--line); text-align:left;}
.addr-result:hover{border-color:var(--gold);}
.addr-result svg{flex:none; margin-top:2px; color:var(--ink-soft);}
.addr-result span{font-size:12px; color:var(--ink); line-height:1.45;}

#addr-map{flex:none; height:240px; margin:12px 20px 0; border-radius:16px; overflow:hidden; border:1px solid var(--line);}
.leaflet-container{font-family:'Montserrat',sans-serif;}

/* ------------------------------------------------------- modal de item */
.modal-backdrop{
  display:none; position:absolute; inset:0; background:rgba(28,42,34,.45); z-index:40;
  align-items:flex-end; justify-content:center;
}
.modal-backdrop.open{display:flex;}
.modal-sheet{
  width:100%; max-height:88vh; background:var(--paper); border-radius:22px 22px 0 0; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 -16px 40px -12px rgba(28,42,34,.35);
}
@media (prefers-reduced-motion: no-preference){
  .modal-sheet{animation:dibello-sheet-up var(--t-base) var(--ease-out) both;}
  @keyframes dibello-sheet-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); flex:none; background:var(--paper);}
.modal-head h2{font-size:16px; margin:0; line-height:1.3;}
.modal-scroll{overflow-y:auto; flex:1;}

@media (min-width:860px){
  .modal-backdrop{align-items:center;}
  .modal-sheet{max-width:480px; max-height:82vh; border-radius:22px;}
}

/* ---- Clube: banners, cupom, pedidos ---- */
.banners{display:flex; gap:12px; overflow-x:auto; padding:14px 20px 4px; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none;}
.banners:empty{display:none;}
.banners::-webkit-scrollbar{display:none;}
.banner{flex:none; width:min(300px,80%); scroll-snap-align:start; border-radius:16px; padding:16px; color:#FAF7F0; background:linear-gradient(135deg,var(--pine),var(--pine-deep)); box-shadow:var(--shadow); text-align:left; border:none; background-size:cover; background-position:center;}
.banner.alt{background:linear-gradient(135deg,var(--wine),#4a1420);}
.banner b{display:block; font-size:15px; line-height:1.25;}
.banner span{display:block; font-size:11.5px; opacity:.85; margin-top:5px;}
/* modelos de banner: cupom (bilhete), promoção (destaque grande) e aviso (faixa discreta) */
.banner.bn-cupom{width:min(320px,86%); background:#FFF8E8; color:var(--ink); border:2px dashed var(--gold); box-shadow:none; position:relative;}
.banner.bn-cupom b{font-family:var(--font-display); font-weight:400; font-size:18px; color:var(--wine);}
.banner.bn-cupom span{opacity:.8;}
.banner.bn-cupom .tkt{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:10px; border-top:1.5px dashed var(--gold);}
.banner.bn-cupom .tkt code{font-family:'Courier New',monospace; font-size:16px; font-weight:700; letter-spacing:.12em; color:var(--ink); background:var(--gold-soft); padding:5px 10px; border-radius:6px;}
.banner.bn-cupom .tkt .bcta{margin:0; background:var(--pine); color:#fff; border-color:var(--pine); font-style:normal;}
.banner.bn-promo{width:min(340px,90%); min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background:linear-gradient(160deg,#8d2a3b,var(--wine) 55%,#3d0f19);}
.banner.bn-promo b{font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1.15; text-transform:uppercase; letter-spacing:.02em;}
.banner.bn-promo span{font-size:12.5px; opacity:.92;}
.banner.bn-promo .bcta{align-self:flex-start; background:#FAF7F0; color:var(--wine); border-color:#FAF7F0;}
.banner.bn-aviso{width:min(300px,82%); padding:12px 14px; background:var(--gold-soft); color:var(--ink); border-left:4px solid var(--gold); border-radius:12px; box-shadow:none; align-self:center;}
.banner.bn-aviso b{font-size:13.5px;}
.banner.bn-aviso span{opacity:.8;}
.banner.bn-aviso .bcta{background:transparent; color:var(--gold-dark); border-color:var(--gold); margin-top:8px;}
.banner .bcta{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; padding:6px 12px; border-radius:100px; background:rgba(250,247,240,.16); border:1px solid rgba(250,247,240,.35);}
.couponbox{padding:6px 20px 0;}
.couponbox:empty{display:none;}
.couponrow{display:flex; gap:8px;}
.couponrow input{flex:1; min-width:0; padding:11px 13px; border:1.4px solid var(--line); border-radius:12px; background:var(--card); font-size:13px; text-transform:uppercase;}
.couponrow button{padding:0 16px; border-radius:12px; border:1.4px solid var(--gold); background:transparent; color:var(--gold); font-weight:700; font-size:12px;}
.couponok{display:flex; justify-content:space-between; align-items:center; padding:11px 13px; border-radius:12px; background:var(--gold-soft); font-size:12px; font-weight:600;}
.couponcard{margin:0 20px 10px; padding:14px; border-radius:14px; background:var(--card); border:1.4px dashed var(--gold); display:flex; gap:12px; align-items:center;}
.couponcard .code{font-weight:700; letter-spacing:.06em; color:var(--gold); font-size:14px;}
.couponcard small{display:block; color:var(--ink-soft); font-size:11px; margin-top:3px;}
.couponcard button{margin-left:auto; padding:8px 14px; border-radius:100px; border:none; background:var(--gold); color:#fff; font-size:11px; font-weight:700;}
.ordercard{margin:0 20px 12px; padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--line);}
.ordercard .row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px;}
.ordercard .items{font-size:11px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
.ordercard .acts{display:flex; gap:8px; margin-top:12px;}
.ordercard .acts button{flex:1; padding:10px; border-radius:100px; font-size:11.5px; font-weight:700; border:1.4px solid var(--gold); background:transparent; color:var(--gold); position:relative;}
.ordercard .acts button.fill{background:var(--gold); color:#fff;}
.refhero{margin:6px 20px 0; padding:20px; border-radius:16px; background:linear-gradient(135deg,var(--pine),var(--pine-deep)); color:#FAF7F0; text-align:center;}
.refhero .big{font-size:30px; font-weight:700; letter-spacing:.14em; margin:10px 0 4px;}
.refstats{display:flex; gap:10px; margin:14px 20px 0;}
.refstats div{flex:1; text-align:center; padding:12px 6px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:10.5px; color:var(--ink-soft);}
.refstats b{display:block; font-size:18px; color:var(--ink);}

.ordercard .acts .wabtn{display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:100px; border:1.4px solid var(--line); background:var(--card); color:var(--ink); font-size:12px; font-weight:600; text-decoration:none;}

/* ---------------------------------------------------------------- acompanhamento do pedido (cena animada + resumo) */
.trk-scene{margin:0 20px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--gold-soft);}
.trk-scene svg{display:block; width:100%; height:auto;}
.trk-head{padding:16px 20px 0;}
.trk-status{font-size:20px; font-weight:700; color:var(--ink);}
.trk-sub{margin-top:3px; font-size:12.5px; color:var(--ink-soft);}
.trk-steps{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); margin:18px 20px 4px; padding:0;}
.trk-steps li{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:10.5px; font-weight:600; color:var(--ink-soft);}
.trk-steps li i{position:relative; z-index:1; width:14px; height:14px; border-radius:50%; background:var(--card); border:3px solid var(--line);}
.trk-steps li::before{content:""; position:absolute; top:6px; left:-50%; width:100%; height:3px; background:var(--line);}
.trk-steps li:first-child::before{display:none;}
.trk-steps li.done{color:var(--ink);} .trk-steps li.done i{background:var(--gold); border-color:var(--gold);} .trk-steps li.done::before{background:var(--gold);}
.trk-steps li.now i{box-shadow:0 0 0 5px var(--gold-ring);}
.trk-card{margin:16px 20px 0; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--card);}
.trk-card h3{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.trk-row{display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:13px; border-bottom:1px solid var(--line);}
.trk-row:last-child{border-bottom:0;}
.trk-who{display:flex; align-items:center; gap:12px;}
.trk-who i{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:16px; background:var(--wine,#6b1e3a); color:#fff;}
.trk-who b{display:block; font-size:15px; font-weight:700;}
.trk-who small{display:block; margin-top:2px; font-size:12px; color:var(--ink-soft);}
.trk-row span:first-child{color:var(--ink-soft); flex:none;}
.trk-row span:last-child{text-align:right; font-weight:600;}
.trk-item{display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--line);}
.trk-item small{display:block; margin-top:2px; font-size:11.5px; color:var(--gold-dark);}
.trk-item:last-of-type{border-bottom:0;}
.trk-total{display:flex; justify-content:space-between; padding-top:10px; margin-top:4px; border-top:1px solid var(--line); font-size:15px; font-weight:700;}
.trk-cancel{margin:24px 20px 0; padding:16px; border-radius:12px; background:#F6E3E3; color:var(--wine); font-weight:600; font-size:14px; text-align:center;}

@keyframes trk-flame{0%,100%{transform:scale(1,1);} 50%{transform:scale(.94,1.2);}}
.trk-fl{transform-box:fill-box; transform-origin:50% 100%; animation:trk-flame .8s ease-in-out infinite;}
.trk-fl.b{animation-delay:-.35s;}
@keyframes trk-glow{0%,100%{opacity:.4;} 50%{opacity:.7;}}
.trk-glow{animation:trk-glow 1.4s ease-in-out infinite;}
@keyframes trk-peel{0%{transform:translateX(0);} 36%{transform:translateX(46px);} 52%{transform:translateX(46px);} 86%,100%{transform:translateX(0);}}
.trk-peel{animation:trk-peel 4.2s ease-in-out infinite;}
@keyframes trk-arm{0%{transform:scaleX(1);} 36%{transform:scaleX(2.45);} 52%{transform:scaleX(2.45);} 86%,100%{transform:scaleX(1);}}
.trk-arm{transform-origin:136px 106px; animation:trk-arm 4.2s ease-in-out infinite;}
@keyframes trk-pz-out{0%,37%{opacity:1;} 40%,99%{opacity:0;} 100%{opacity:1;}}
.trk-pz-peel{animation:trk-pz-out 4.2s linear infinite;}
@keyframes trk-pz-in{0%,38%{opacity:0;} 44%,90%{opacity:1;} 98%,100%{opacity:0;}}
.trk-pz-in{animation:trk-pz-in 4.2s linear infinite;}
@keyframes trk-smoke{0%{opacity:0; transform:translateY(0);} 30%{opacity:.7;} 100%{opacity:0; transform:translateY(-22px);}}
.trk-smoke circle{animation:trk-smoke 2.4s ease-out infinite;} .trk-smoke circle:nth-child(2){animation-delay:-.8s;} .trk-smoke circle:nth-child(3){animation-delay:-1.6s;}
@keyframes trk-hand{0%,100%{transform:rotate(-7deg);} 50%{transform:rotate(9deg);}}
.trk-hand{transform-origin:104px 108px; animation:trk-hand 1.1s ease-in-out infinite;}
@keyframes trk-top{0%{opacity:0; transform:translateY(0);} 20%{opacity:1;} 80%{opacity:1;} 100%{opacity:0; transform:translateY(46px);}}
.trk-top circle{animation:trk-top 1.8s ease-in infinite;} .trk-top circle:nth-child(2){animation-delay:-.6s;} .trk-top circle:nth-child(3){animation-delay:-1.2s;}
@keyframes trk-chef{0%,100%{transform:translateY(0);} 50%{transform:translateY(-1.5px);}}
.trk-chef{animation:trk-chef 1.6s ease-in-out infinite;}

@keyframes trk-city{from{transform:translateX(0);} to{transform:translateX(-320px);}}
.trk-city{animation:trk-city 9s linear infinite;}
@keyframes trk-dash{to{stroke-dashoffset:-40;}}
.trk-dash{animation:trk-dash .6s linear infinite;}
@keyframes trk-bike{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-2.5px) rotate(-.6deg);}}
.trk-bike{animation:trk-bike .7s ease-in-out infinite;}
@keyframes trk-spin{to{transform:rotate(360deg);}}
.trk-wheel{transform-box:fill-box; transform-origin:center; animation:trk-spin .55s linear infinite;}
@keyframes trk-speed{0%,100%{opacity:.15; transform:translateX(0);} 50%{opacity:.6; transform:translateX(-10px);}}
.trk-speed{animation:trk-speed .9s ease-in-out infinite;}
@keyframes trk-steam{0%{opacity:0; transform:translateY(8px);} 40%{opacity:.85;} 100%{opacity:0; transform:translateY(-8px);}}
.trk-steam path{animation:trk-steam 2.2s ease-out infinite;} .trk-steam path:nth-child(2){animation-delay:-.7s;} .trk-steam path:nth-child(3){animation-delay:-1.4s;}
@keyframes trk-pop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;}}
.trk-check{transform-box:fill-box; transform-origin:center; animation:trk-pop .6s ease-out both;}
@keyframes trk-box{0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);}}
.trk-box{animation:trk-box 2.4s ease-in-out infinite;}

/* dúvidas sobre o pedido: WhatsApp e telefone */
.help{margin:16px 20px 0; padding:16px; border-radius:14px; background:var(--card); border:1px solid var(--line);}
.help-t{font-size:13.5px; font-weight:700; margin-bottom:10px;}
.help-b{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.help-b a{display:flex; align-items:center; justify-content:center; height:44px; border-radius:11px; font-weight:600; font-size:13.5px; text-decoration:none;}
.help-b .wa{background:#1FA855; color:#fff;}
.help-b .tel{background:transparent; border:1.5px solid var(--gold); color:var(--gold);}

/* ---------------------------------------------------------------- app web no celular: sem "bug" ao rolar
   - barra inferior FIXA no rodapé da tela (não "sticky": no iOS o sticky pula quando a barra do Safari recolhe)
   - altura em dvh (a tela de verdade, sem a barra do navegador), área segura do iPhone, sem toque azul nem zoom por toque duplo */
html{-webkit-text-size-adjust:100%; overscroll-behavior-y:none;}
button, a, input, select, textarea{-webkit-tap-highlight-color:transparent;}
button{color:inherit; touch-action:manipulation;}
@supports (height:100dvh){
  #app{min-height:100dvh;}
  .screen{min-height:100dvh;}
  .modal-sheet{max-height:88dvh;}
}
#app .tabbar{position:fixed; bottom:0; left:max(0px, calc(50% - 240px)); right:max(0px, calc(50% - 240px)); margin:0; z-index:40; transform:translateZ(0);}
#app.with-tabs .screen{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
.floatcart{position:fixed; bottom:calc(112px + env(safe-area-inset-bottom)); left:max(20px, calc(50% - 220px)); right:max(20px, calc(50% - 220px)); margin:0; z-index:35;}
@media (min-width:860px){
  .floatcart{bottom:24px;}
  #app.with-tabs .screen{padding-bottom:0;}
}
img.thumb{object-fit:cover; display:block;}

/* topo: avatar + nome + endereço principal de entrega */
.userchip.has-addr{height:auto; min-height:44px; padding:4px 14px 4px 5px; max-width:165px; text-align:left;}
.userchip .who{display:flex; flex-direction:column; min-width:0; line-height:1.2;}
.userchip .ad{font-size:10.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.userchip .ad.none{color:var(--gold);}
@media (min-width:860px){ .userchip.has-addr{max-width:280px;} }
.maintag{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:100px; background:var(--gold-soft); color:var(--gold-dark); font-size:10px; font-weight:700; font-style:normal; vertical-align:middle;}

/* perfil: endereços de entrega */
.addrbox{margin:16px 20px 0; padding:14px; border-radius:16px; background:var(--card); border:1px solid var(--line);}
.addrbox-t{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
.addrbox-empty{margin:6px 0 2px; font-size:12.5px; color:var(--ink-soft);}
.addrline{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line);}
.addrline:first-of-type{border-top:0;}
.addrline b{font-size:13.5px;} .addrline small{display:block; margin-top:3px; font-size:12px; color:var(--ink-soft);}
.addrline button{flex:none; height:34px; padding:0 12px; border-radius:100px; border:1.4px solid var(--gold); background:transparent; color:var(--gold); font-size:11.5px; font-weight:700;}
.addrline.main{background:linear-gradient(90deg, var(--gold-soft), transparent); margin:0 -14px; padding-left:14px; padding-right:14px;}

/* ---------------------------------------------------------------- janela do item: sempre por cima de tudo (barra inferior, sacola flutuante)
   e presa à tela (não à página inteira) — o botão "Adicionar" nunca fica coberto, então o toque não cai na sacola */
.modal-backdrop{position:fixed; inset:0; z-index:100;}
.modal-sheet .stickybar{padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.toast{z-index:120;}
.tab-center.filled{color:var(--gold); font-weight:700;} .tab-center.filled span{color:var(--gold);}

/* faixa do endereço de entrega, acima do banner (o avatar do topo tem só a inicial e o nome) */
.addrstrip{display:flex; align-items:center; gap:10px; width:calc(100% - 40px); margin:12px 20px 0; padding:10px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-align:left; cursor:pointer;}
.addrstrip[hidden]{display:none;}
.addrstrip svg{flex:none; color:var(--gold);}
.addrstrip .as-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25;}
.addrstrip small{font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
.addrstrip b{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.addrstrip .as-go{flex:none; font-size:12px; font-weight:700; color:var(--gold);}
@media (min-width:860px){ .addrstrip{width:calc(100% - 64px); max-width:none; margin:14px 32px 0; padding:14px 20px;} .addrstrip b{font-size:14px;} }

/* pagamento em dinheiro: troco obrigatório */
.cashbox{margin:4px 20px 0; padding:16px; border-radius:14px; background:var(--card); border:1.5px solid var(--gold);}
.cashbox[hidden]{display:none;}
.cashbox-t{font-size:14px; font-weight:700; margin-bottom:10px;}
.cashopts{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.cashopts button{min-height:46px; padding:8px 10px; border-radius:11px; border:1.5px solid var(--line); background:var(--paper); font-size:13px; font-weight:600; color:var(--ink);}
.cashopts button.active{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-dark);}
.cashamt{margin-top:12px;}
.cashamt[hidden]{display:none;}
.cashamt label{display:block; margin-bottom:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
.cashinput{display:flex; align-items:center; gap:8px; padding:0 14px; height:48px; border-radius:11px; border:1.5px solid var(--line); background:var(--paper);}
.cashinput span{font-weight:700; color:var(--ink-soft);}
.cashinput input{flex:1; min-width:0; border:0; background:transparent; outline:0; font-size:17px; font-weight:700; color:var(--ink);}
.cashinput:focus-within{border-color:var(--gold);}
.cashquick{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.cashquick button{height:36px; padding:0 14px; border-radius:100px; border:1.4px solid var(--gold); background:transparent; color:var(--gold); font-size:12.5px; font-weight:700;}
.cashhint{margin-top:10px; font-size:12.5px; color:var(--ink-soft);}
.cashhint.ok{color:var(--pine); font-weight:600;}


/* ---------------------------------------------------------------- montagem do item, passo a passo
   botões de seleção com cantos só levemente arredondados (8-10px), borda fina */
.modal-head{display:flex; align-items:center; gap:10px;}
.modal-head h2{flex:1; min-width:0;}
.wiz-progress{padding:0 20px 10px; border-bottom:1px solid var(--line);}
.wiz-progress[hidden]{display:none;}
.wiz-info{font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.wiz-track{height:3px; border-radius:2px; background:var(--line); overflow:hidden;}
.wiz-track i{display:block; height:100%; width:0; background:var(--gold); transition:width .25s ease;}
#wiz-body{flex:1; overflow-y:auto; padding:6px 20px 20px;}
.wiz-foot{flex:none; display:flex; align-items:center; gap:14px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper);}
.wiz-total{font-size:18px; font-weight:700; white-space:nowrap;}
.wiz-foot .cta{flex:1; border-radius:10px;}
.wiz-foot .cta:disabled{opacity:.4; cursor:default;}
.wz-head{padding:14px 0 6px;}
.wz-head h3{margin:0; font-size:19px; line-height:1.2;}
.wz-head p{margin:6px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.45;}
.wz-sec{margin:18px 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.wz-sec small{font-weight:500; text-transform:none; letter-spacing:0; margin-left:4px;}
.wz-opts{display:grid; gap:10px; margin-top:10px;}
.wz-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:16px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); text-align:left; color:var(--ink);}
.wz-opt b{font-size:15px;} .wz-opt span{font-size:13px; color:var(--ink-soft); font-weight:600;}
.wz-opt.sel{border-color:var(--gold); background:var(--gold-soft);}
.wz-opt.sel span{color:var(--gold-dark);}
.wz-ings{display:flex; flex-wrap:wrap; gap:8px;}
.wz-ing{padding:9px 12px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); font-size:13px; font-weight:500; color:var(--ink);}
.wz-ing.off{border-color:var(--wine); color:var(--wine); text-decoration:line-through; background:#FBF0F0;}
.wz-addons{display:grid; gap:8px;}
.wz-addon{display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); text-align:left; color:var(--ink);}
.wz-addon .wz-an{flex:1; font-size:13.5px; font-weight:500;} .wz-addon em{font-style:normal; font-size:11px; color:var(--ink-soft);}
.wz-addon b{font-size:13px; color:var(--gold-dark); white-space:nowrap;}
.wz-chk{flex:none; width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line); background:var(--paper); position:relative;}
.wz-addon.on{border-color:var(--gold); background:var(--gold-soft);}
.wz-addon.on .wz-chk{background:var(--gold); border-color:var(--gold);}
.wz-addon.on .wz-chk::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.wz-note textarea{width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); font-size:14px; color:var(--ink); resize:vertical; outline:0;}
.wz-note textarea:focus{border-color:var(--gold);}
.wz-count{text-align:right; font-size:11px; color:var(--ink-soft); margin-top:3px;}
.wz-list{display:grid; gap:8px; margin-top:10px;}
.wz-flav{display:flex; align-items:flex-start; gap:12px; width:100%; padding:14px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); text-align:left; color:var(--ink);}
.wz-flav b{display:block; font-size:14.5px;} .wz-flav small{display:block; margin-top:2px; font-size:12px; color:var(--ink-soft);}
.wz-flav .radio{flex:none; margin-top:2px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper);}
.wz-flav.sel{border-color:var(--gold); background:var(--gold-soft);}
.wz-flav.sel .radio{border-color:var(--gold); background:radial-gradient(circle, var(--gold) 45%, transparent 50%);}
.wz-empty{font-size:13px; color:var(--ink-soft);}
.wz-recap{margin-top:8px; border-radius:8px; border:1px solid var(--line); background:var(--card); padding:4px 14px;}
.wz-r{display:flex; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-size:13px;}
.wz-r:first-child{border-top:0;}
.wz-r > span{flex:none; width:78px; color:var(--ink-soft);}
.wz-r small{display:block; margin-top:2px; font-size:12px; color:var(--gold-dark);}
.wz-qty{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:14px; font-weight:600;}
.wz-qty .qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; background:var(--card);}
.wz-qty .qty button{width:42px; height:42px; border:0; background:none; font-size:20px; font-weight:600;}
.wz-qty .qty b{min-width:30px; text-align:center;}
.wz-sg{margin-top:8px; padding:14px; border-radius:8px; border:1.5px solid var(--line); background:var(--card);}
.wz-sg.on{border-color:var(--gold); background:var(--gold-soft);}
.wz-sg-top{display:flex; justify-content:space-between; gap:12px;}
.wz-sg-top b{font-size:14.5px;} .wz-sg-top p{margin:3px 0 0; font-size:12.5px; color:var(--ink-soft);}
.wz-sg-pr{font-weight:700; white-space:nowrap; color:var(--gold-dark);}
.wz-sg-acts{display:flex; gap:8px; margin-top:12px;}
.wz-sg-acts button{height:40px; padding:0 14px; border-radius:8px; border:1.5px solid var(--gold); background:transparent; color:var(--gold-dark); font-size:13px; font-weight:600;}
.wz-sg-acts button.fill{flex:1; background:var(--gold); color:#fff;}
.wz-sg-alts{margin-top:10px; border-top:1px solid var(--line); padding-top:6px;}
.wz-sg-alts button{display:flex; justify-content:space-between; width:100%; padding:10px 2px; border:0; border-bottom:1px solid var(--line); background:none; font-size:13.5px; color:var(--ink); text-align:left;}
.wz-sg-alts button:last-child{border-bottom:0;}
.wz-sg-alts b{color:var(--gold-dark);}

/* sugestão de bebida na sacola */
.drinkbox{margin:16px 20px 0; padding:14px; border-radius:8px; border:1.5px solid var(--gold); background:var(--card);}
.drinkbox-t{font-size:14px; font-weight:700;} .drinkbox-s{margin:2px 0 10px; font-size:12px; color:var(--ink-soft);}
.drinkrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line);}
.drinkrow:first-of-type{border-top:0;}
.drinkrow div{min-width:0; font-size:13.5px; font-weight:600;} .drinkrow small{display:block; color:var(--ink-soft); font-weight:500; font-size:12px;}
.drinkrow button{flex:none; height:36px; padding:0 14px; border-radius:8px; border:1.5px solid var(--gold); background:transparent; color:var(--gold-dark); font-size:12.5px; font-weight:700;}

/* ---------------------------------------------------------------- tipografia e formato do cardápio impresso da Di Bello
   títulos de seção em serifa de caixa alta na cor vinho, nomes dos pratos em serifa, descrição em sans leve,
   preços em colunas, itens separados por linha fina (sem cartões) */
:root{ --font-display:'Playfair Display','Times New Roman',serif; --font-name:'DM Serif Display','Times New Roman',serif; }
.catsec-head{align-items:flex-end;}
.catsec-head h2{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:24px; color:var(--wine); line-height:1.1;}
.catsec-cols{display:flex; gap:0; flex:none; font-size:10.5px; font-weight:500; line-height:1.15; color:var(--ink); text-align:center;}
.catsec-cols span{width:66px;}
.itemlist{gap:0;}
.itemrow{display:flex; align-items:flex-start; gap:14px; width:100%; margin:0; padding:14px 20px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; text-align:left; transform:none;}
.itemrow:hover, .itemrow:active{transform:none; box-shadow:none; background:color-mix(in srgb, var(--gold-soft) 35%, transparent);}
.itemrow .name{font-family:var(--font-name); font-size:17px; font-weight:400; line-height:1.2; color:var(--ink);}
.itemrow .desc{margin-top:3px; font-size:11.5px; font-weight:300; line-height:1.45; color:var(--ink); opacity:.85; -webkit-line-clamp:3;}
.itemrow .info{flex:1; min-width:0;}
.itemrow .prices{display:flex; flex:none; align-items:flex-start; font-family:var(--font-name); font-size:15.5px; color:var(--ink);}
.itemrow .prices .pc{display:block; width:66px; text-align:center;}
.itemrow .prices .pc.wide{width:auto; min-width:60px; padding-left:8px; text-align:right;}
.itemrow .prices .pc small{display:block; font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:500; color:var(--ink-soft);}
.itemrow .prices .pc .was{display:block; font-size:11px; color:var(--ink-soft);}
.itemrow .thumb{width:64px; height:64px; border-radius:6px; object-fit:cover;}
.catsec-head{padding-left:20px; padding-right:20px;}
.wz-head h3, .modal-head h2, .wiz-total{font-family:var(--font-name); font-weight:400;}
.wz-opt b, .wz-flav b, .wz-sg-top b{font-family:var(--font-name); font-weight:400;}
.cartline .nm, .confwrap h1{font-family:var(--font-name);}
@media (min-width:860px){
  .itemrow{padding-left:0; padding-right:0;}
  .catsec-head{padding-left:0; padding-right:0;}
  #scr-cardapio .itemrow{padding:14px 0; align-items:flex-start;}
  #scr-cardapio .itemlist{gap:0 40px;}
}

/* ofertas: etiquetas de combo / condição de pagamento, preço "de" riscado */
.otags{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px;}
.otag{display:inline-block; padding:3px 8px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.02em;}
.otag.combo{background:var(--pine); color:#fff;}
.otag.pay{background:var(--gold-soft); color:var(--gold-dark);}
.otag.promo{background:var(--wine); color:#fff;}
/* categorias de combos e promoções do dia: etiqueta no título e no chip, e uma faixa lateral na divisão */
.kindtag{display:inline-block; vertical-align:middle; margin-left:10px; padding:4px 9px; border-radius:6px; font-family:var(--font-body,inherit); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;}
.kindtag.promo{background:var(--wine); color:#fff;}
.kindtag.combo{background:var(--pine); color:#fff;}
.catsec.kind-promo .itemlist{border-left:3px solid var(--wine); padding-left:12px;}
.catsec.kind-combo .itemlist{border-left:3px solid var(--pine); padding-left:12px;}
.chip small{margin-left:7px; padding:2px 6px; border-radius:5px; font-size:9px; font-weight:700; letter-spacing:.08em; vertical-align:1px;}
.chip.kind-promo small{background:var(--wine); color:#fff;}
.chip.kind-combo small{background:var(--pine); color:#fff;}
.itemrow .price .was{font-weight:500; font-size:11.5px; color:var(--ink-soft); margin-right:4px;}
.paynote{margin-top:4px; font-size:11px; font-weight:600; color:var(--pine);}
.addrcard.blocked{opacity:.5;}

/* cardápio em uma página que rola: chips fixos no topo e uma divisão por categoria */
.catpills.chips{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); padding-top:12px; padding-bottom:12px; scrollbar-width:none;}
.catpills.chips::-webkit-scrollbar{display:none;}
.menu-sections{display:block;}
.catsec{scroll-margin-top:64px; padding-top:6px;}
.catsec + .catsec{margin-top:10px; border-top:6px solid var(--line);}
.catsec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 20px 6px;}
.catsec-head h2{margin:0; font-size:19px; line-height:1.2;}
.catsec-head span{font-size:12px; color:var(--ink-soft); white-space:nowrap;}
@media (min-width:860px){
  .catsec-head{padding:22px 0 8px;}
  .catsec + .catsec{border-top-width:1px;}
  .catpills.chips{margin:0 -32px; padding-left:32px; padding-right:32px;}
  #app{overflow:clip;} /* "hidden" cria um contêiner de rolagem e impede os chips de ficarem fixos no topo */
}
/* categorias (chips do topo): um pouco maiores e com borda só levemente arredondada, sem formato de balão */
.catpills.chips{gap:8px; padding-top:12px; padding-bottom:12px;}
.catpills .chip{padding:12px 18px; font-size:14px; font-weight:600; border-radius:8px; border-width:1.5px;}
.catpills .chip.active{border-color:var(--ink);}

/* ---------------------------------------------------------------- cenas do pedido (cozinha, forno, moto, entrega) */
.tk{display:block; width:100%; height:auto;}
.tk *{transform-box:fill-box;}
@keyframes tk-flame{0%,100%{transform:scale(1,1) skewX(0);} 35%{transform:scale(.93,1.22) skewX(3deg);} 70%{transform:scale(1.04,.9) skewX(-3deg);}}
.tk-fl{transform-origin:50% 100%; animation:tk-flame .75s ease-in-out infinite;} .tk-fl.b{animation-duration:.55s; animation-delay:-.3s;}
@keyframes tk-glow{0%,100%{opacity:.82;} 50%{opacity:1;} 75%{opacity:.7;}}
.tk-glow{animation:tk-glow 1.3s ease-in-out infinite;}
@keyframes tk-ember{0%{transform:translate(0,0) scale(1); opacity:0;} 15%{opacity:1;} 100%{transform:translate(var(--dx,6px),-46px) scale(.3); opacity:0;}}
.tk-ember{animation:tk-ember 2.6s ease-out infinite;} .tk-ember:nth-child(2n){--dx:-7px;} .tk-ember:nth-child(3n){--dx:11px;}
@keyframes tk-rise{0%{transform:translateY(0) scale(.6); opacity:0;} 25%{opacity:.5;} 100%{transform:translateY(-20px) scale(1.5); opacity:0;}}
.tk-smoke circle{animation:tk-rise 3.2s ease-out infinite;} .tk-smoke circle:nth-child(2){animation-delay:-1.1s;} .tk-smoke circle:nth-child(3){animation-delay:-2.1s;}
@keyframes tk-breathe{0%,100%{transform:translateY(0);} 50%{transform:translateY(-1.2px);}}
.tk-chef{animation:tk-breathe 3s ease-in-out infinite;}
@keyframes tk-blink{0%,93%,100%{transform:scaleY(1);} 96%{transform:scaleY(.1);}}
.tk-blink{transform-origin:center; animation:tk-blink 4.2s infinite;}
@keyframes tk-hot{0%,100%{opacity:.14;} 50%{opacity:.3;} 80%{opacity:.2;}}
.tk-hotlight{animation:tk-hot 1.3s ease-in-out infinite;} .tk-room{animation:tk-hot 1.3s ease-in-out infinite;}

/* recebido: a pizza ganha camadas em sequência (7 s) e o braço espalha os ingredientes */
@keyframes tk-l1{0%,6%{opacity:0; transform:scale(.15);} 20%,92%{opacity:1; transform:scale(1);} 100%{opacity:0;}}
@keyframes tk-l2{0%,28%{opacity:0; transform:scale(.4);} 42%,92%{opacity:1; transform:scale(1);} 100%{opacity:0;}}
@keyframes tk-l3{0%,52%{opacity:0; transform:scale(.7) translateY(-6px);} 66%,92%{opacity:1; transform:scale(1) translateY(0);} 100%{opacity:0;}}
.tk-l{transform-origin:center; animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-out;}
.tk-l1{animation-name:tk-l1;} .tk-l2{animation-name:tk-l2;} .tk-l3{animation-name:tk-l3;}
@keyframes tk-sprinkle{0%,100%{transform:rotate(-3deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-2px);}}
.tk-sprinkle{transform-origin:106px 106px; animation:tk-sprinkle 1.1s ease-in-out infinite;}
@keyframes tk-drop{0%{transform:translateY(-2px); opacity:0;} 15%{opacity:1;} 100%{transform:translateY(12px); opacity:0;}}
.tk-drops circle{animation:tk-drop .8s ease-in infinite;} .tk-drops circle:nth-child(2){animation-delay:-.27s;} .tk-drops circle:nth-child(3){animation-delay:-.53s;}
@keyframes tk-dust{0%,100%{opacity:.2; transform:translateY(0);} 50%{opacity:.8; transform:translateY(-3px);}}
.tk-flour circle{animation:tk-dust 2.4s ease-in-out infinite;} .tk-flour circle:nth-child(2){animation-delay:-.8s;} .tk-flour circle:nth-child(3){animation-delay:-1.6s;}

/* preparo: a pá entra com a pizza crua, ela assa (cor e bolhas) e sai dourada (9 s) */
@keyframes tk-peel9{0%{transform:translateX(0);} 12%,16%{transform:translateX(50px);} 24%,62%{transform:translateX(0);} 72%,76%{transform:translateX(50px);} 92%,100%{transform:translateX(0);}}
@keyframes tk-arm9{0%{transform:scaleX(1);} 12%,16%{transform:scaleX(2.67);} 24%,62%{transform:scaleX(1);} 72%,76%{transform:scaleX(2.67);} 92%,100%{transform:scaleX(1);}}
.tk-preparo .tk-peel{animation:tk-peel9 9s ease-in-out infinite;}
.tk-preparo .tk-arm{transform-origin:138px 106px; animation:tk-arm9 9s ease-in-out infinite;}
@keyframes tk-raw{0%,14%{opacity:1;} 16%,99%{opacity:0;} 100%{opacity:1;}}
@keyframes tk-done{0%,74%{opacity:0;} 77%,99%{opacity:1;} 100%{opacity:0;}}
.tk-pz-raw{animation:tk-raw 9s linear infinite;} .tk-pz-done{animation:tk-done 9s linear infinite;}
@keyframes tk-oraw{0%,14%{opacity:0;} 16%,34%{opacity:1;} 50%,100%{opacity:0;}}
@keyframes tk-ocook{0%,30%{opacity:0;} 54%,74%{opacity:1;} 76%,100%{opacity:0;}}
.tk-oven-raw{animation:tk-oraw 9s linear infinite;} .tk-oven-cooked{animation:tk-ocook 9s linear infinite;}
@keyframes tk-bub{0%,24%{opacity:0; transform:scale(.4);} 34%,40%{opacity:.9; transform:scale(1.2);} 46%{opacity:.2; transform:scale(.6);} 54%,60%{opacity:.9; transform:scale(1.25);} 68%,100%{opacity:0;}}
.tk-bubbles circle{transform-origin:center; animation:tk-bub 9s ease-in-out infinite;} .tk-bubbles circle:nth-child(2){animation-delay:-.4s;} .tk-bubbles circle:nth-child(3){animation-delay:-.9s;}
@keyframes tk-steam-peel{0%,76%{opacity:0; transform:translateY(6px);} 86%{opacity:.85;} 100%{opacity:0; transform:translateY(-10px);}}
.tk-preparo .tk-steam{animation:tk-steam-peel 9s ease-out infinite;}

/* saiu para entrega: cidade em camadas (profundidade), poste, carro, moto */
@keyframes tk-pan{from{transform:translateX(0);} to{transform:translateX(-320px);}}
.tk-far{animation:tk-pan 46s linear infinite;} .tk-mid{animation:tk-pan 15s linear infinite;} .tk-near{animation:tk-pan 5.2s linear infinite;}
@keyframes tk-cloud{from{transform:translateX(0);} to{transform:translateX(34px);}}
.tk-cloud{animation:tk-cloud 40s ease-in-out infinite alternate;}
@keyframes tk-dashmove{to{stroke-dashoffset:-46;}}
.tk-dash{animation:tk-dashmove .42s linear infinite;}
@keyframes tk-carpass{0%{transform:translateX(350px);} 100%{transform:translateX(-80px);}}
.tk-car{animation:tk-carpass 8.5s linear infinite;}
@keyframes tk-bob{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-2px) rotate(-.7deg);}}
.tk-bike{transform-origin:50% 90%; animation:tk-bob .62s ease-in-out infinite;}
@keyframes tk-spin{to{transform:rotate(360deg);}}
.tk-wheel{transform-origin:center; animation:tk-spin .42s linear infinite;}
@keyframes tk-shadow{0%,100%{transform:scaleX(1);} 50%{transform:scaleX(.96);}}
.tk-shadow{transform-origin:center; animation:tk-shadow .62s ease-in-out infinite;}
@keyframes tk-puff{0%{transform:translateX(0); opacity:.7;} 100%{transform:translateX(-18px) translateY(-4px); opacity:0;}}
.tk-puff circle{animation:tk-puff 1s ease-out infinite;} .tk-puff circle:nth-child(2){animation-delay:-.33s;} .tk-puff circle:nth-child(3){animation-delay:-.66s;}
@keyframes tk-wind{0%,100%{opacity:.15; transform:translateX(0);} 50%{opacity:.6; transform:translateX(-14px);}}
.tk-wind{animation:tk-wind .9s ease-in-out infinite;}

/* retirada pronta e entregue */
@keyframes tk-lidup{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-4px) rotate(-1.6deg);}}
.tk-lid{transform-origin:50% 100%; animation:tk-lidup 3.6s ease-in-out infinite;}
@keyframes tk-steamup{0%{transform:translateY(8px); opacity:0;} 40%{opacity:.85;} 100%{transform:translateY(-10px); opacity:0;}}
.tk-ready .tk-steam path{animation:tk-steamup 2.4s ease-out infinite;} .tk-ready .tk-steam path:nth-child(2){animation-delay:-.8s;} .tk-ready .tk-steam path:nth-child(3){animation-delay:-1.6s;}
@keyframes tk-twinkle{0%,100%{opacity:.2;} 50%{opacity:1;}}
.tk-star{animation:tk-twinkle 2.2s ease-in-out infinite;} .tk-star.s2{animation-delay:-.7s;} .tk-star.s3{animation-delay:-1.4s;}
@keyframes tk-boxd{0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);}}
.tk-boxd{animation:tk-boxd 2.4s ease-in-out infinite;}
@keyframes tk-pop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;}}
.tk-check{transform-origin:center; animation:tk-pop .6s ease-out both;}
@media (prefers-reduced-motion: reduce){ .tk *{animation:none !important;} .tk-l,.tk-pz-raw{opacity:1;} .tk-pz-done,.tk-oven-cooked{opacity:0;} }

/* (vale por último) título da divisão no estilo do cardápio impresso */
.catsec .itemlist{padding:0;}
.catsec-head h2{font-size:24px; line-height:1.1;}
.catsec + .catsec{border-top-width:0; margin-top:18px;}
.catsec-head{padding-top:22px;}

/* ---------------------------------------------------------------------------
   Abertura animada (Portal > App de pedidos). Tudo em CSS: se o JavaScript
   falhar, a tela sobe sozinha e o cardápio aparece do mesmo jeito.
   Sequência: logo entra (0–0,9 s) > tela sobe como cortina (1,05–1,85 s) >
   topo, banners, busca e cardápio entram em cascata.
   --------------------------------------------------------------------------- */
.intro{display:none;}
html.intro-on .intro{
  display:grid; place-items:center; position:fixed; inset:0; z-index:9999; cursor:pointer;
  background:
    radial-gradient(120% 80% at 50% 35%, color-mix(in srgb, var(--gold) 78%, #fff) 0%, transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--gold) 88%, #fff) 0%, var(--gold) 55%, color-mix(in srgb, var(--gold) 62%, #000) 130%);
  animation:introUp .8s cubic-bezier(.76,0,.24,1) 1.05s forwards;
  will-change:transform;
}
html.intro-on .intro::after{ /* brilho suave atravessando a tela enquanto a logo assenta */
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform:translateX(-70%); animation:introShine 1.1s cubic-bezier(.4,0,.2,1) .25s forwards;
}
.intro-mark{position:relative; display:grid; place-items:center; animation:introMarkOut .55s cubic-bezier(.76,0,.24,1) 1.05s forwards;}
.intro-logo{width:min(280px,62vw); height:auto; opacity:0; transform:scale(.82); animation:introLogo .9s cubic-bezier(.34,1.45,.64,1) .05s forwards;}
.intro-logo.mono{filter:brightness(0) invert(1) blur(8px); animation-name:introLogoMono;}
.intro-logo.card{width:min(200px,48vw); border-radius:24px; background:#fff; padding:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45); filter:blur(8px);}
.intro-name{font-family:var(--font-display); font-size:clamp(34px,9vw,60px); color:#fff; letter-spacing:.01em; opacity:0; transform:scale(.82); animation:introLogo .9s cubic-bezier(.34,1.45,.64,1) .05s forwards;}
@keyframes introLogo{to{opacity:1; transform:none; filter:blur(0);}}
@keyframes introLogoMono{to{opacity:1; transform:none; filter:brightness(0) invert(1) blur(0);}}
@keyframes introShine{to{transform:translateX(70%);}}
@keyframes introMarkOut{to{opacity:0; transform:translateY(-48px) scale(.96);}}
@keyframes introUp{to{transform:translateY(-100%); visibility:hidden;}}
/* cardápio entrando em cascata, de baixo para cima (o topo desce) */
html.intro-on [data-appear]{opacity:0; transform:translateY(var(--ay,40px)); animation:appearIn .95s cubic-bezier(.22,1.25,.36,1) calc(1.3s + var(--ad,0s)) forwards;}
@keyframes appearIn{to{opacity:1; transform:none;}}

/* banners: indicador de posição (passam sozinhos, devagar) */
.bdots{display:flex; justify-content:center; gap:6px; padding:6px 0 2px;}
.bdots:empty{display:none;}
.bdots i{width:6px; height:6px; border-radius:6px; background:var(--line); transition:width .35s var(--ease-out), background .35s;}
.bdots i.on{width:18px; background:var(--gold);}
.banner{transition:transform .35s var(--ease-out), box-shadow .35s;}
.banner.is-current{transform:translateY(-2px);}
@media (prefers-reduced-motion: reduce){
  html.intro-on .intro{display:none;}
  html.intro-on [data-appear]{opacity:1; transform:none; animation:none;}
  .banner, .bdots i{transition:none;}
}

/* cadastro do cliente: foto (opcional), nome, sobrenome e endereço campo a campo */
.su-photo{display:flex; align-items:center; gap:14px; padding:20px 20px 0;}
.su-photo b{display:block; font-size:13.5px;}
.su-photo small{display:block; font-size:12px; color:var(--ink-soft); margin-top:2px;}
.su-avatar{width:68px; height:68px; flex:none; border-radius:50%; border:2px dashed var(--line); background:var(--card); color:var(--ink-soft); display:grid; place-items:center; overflow:hidden; padding:0; cursor:pointer; transition:border-color var(--t-fast);}
.su-avatar:hover, .su-avatar:focus-visible{border-color:var(--gold);}
.su-avatar img{width:100%; height:100%; object-fit:cover;}
.su-row{display:flex; gap:0; align-items:flex-end;}
.su-row > .field{flex:1; min-width:0;}
.su-row > .field + .field{padding-left:0;}
.su-row .su-cep{flex:0 0 150px;}
.su-row .su-num{flex:0 0 120px;}
.su-hint{flex:1; font-size:11.5px; color:var(--ink-soft); margin:0 20px 12px 0; line-height:1.4;}
.su-sec{font-size:13px; font-weight:700; margin:24px 20px 0; padding-top:18px; border-top:1px solid var(--line);}
.field label .opt{font-weight:500; text-transform:none; letter-spacing:0;}
.userchip .av.ph{padding:0; overflow:hidden; background:var(--line);}
.userchip .av.ph img{width:100%; height:100%; object-fit:cover;}

/* checkout: escolhido em vinho (cor principal), taxa como texto, Pix, cashback e resumo */
.addrcard.sel, .fulfillopt.active{background:var(--gold); border-color:var(--gold); color:#fff;}
.addrcard.sel div, .addrcard.sel b, .fulfillopt.active b, .fulfillopt.active span, .fulfillopt.active svg{color:#fff !important;}
.addrcard.sel .radio{border-color:#fff; background:radial-gradient(circle, #fff 42%, transparent 46%);}
.addrcard.sel .maintag{background:rgba(255,255,255,.18); color:#fff;}
.addrcard.soon{cursor:not-allowed; opacity:.6; background:var(--paper);}
.soontag{display:inline-block; margin-left:6px; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:100px; background:var(--gold-soft); color:var(--gold); vertical-align:1px;}
.quotetext{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:6px 20px 0; padding:0 2px; font-size:12.5px; color:var(--ink-soft);}
.quotetext b{color:var(--ink);}
.quotetext.warn{color:var(--wine); font-weight:600;}
.pixbox, .cbask{margin:4px 20px 12px; padding:14px; border-radius:14px; background:var(--card); border:1.4px solid var(--line);}
.pixbox-t, .cbask-t, .pixdone-t{font-size:13px; font-weight:700; color:var(--ink);}
.pixbox ol{margin:8px 0 0; padding-left:18px; font-size:12px; color:var(--ink-soft); line-height:1.6;}
.cbask p, .pixdone p{font-size:12px; color:var(--ink-soft); margin:6px 0 0; line-height:1.5;}
.cbask .cashopts{margin-top:10px;}
.pixkey{display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--paper); border:1px dashed var(--gold); text-align:left;}
.pixkey div{flex:1; min-width:0;}
.pixkey small{display:block; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.pixkey b{display:block; font-size:13px; word-break:break-all;}
.pixkey button{flex:none; border:0; border-radius:100px; padding:7px 14px; background:var(--gold); color:#fff; font-size:12px; font-weight:700; cursor:pointer;}
.sumbox{margin:4px 20px 16px; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:12.5px;}
.sumbox div{display:flex; justify-content:space-between; padding:4px 0; color:var(--ink-soft);}
.sumbox .tot{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; color:var(--ink); font-weight:700; font-size:14px;}
.pixdone{margin-top:20px; padding:16px; border-radius:16px; background:var(--card); border:1.4px solid var(--gold); text-align:left;}
.pixdone .cta.wa{display:block; text-align:center; text-decoration:none; margin-top:14px; background:#1f9d55; border-color:#1f9d55; color:#fff;}

/* conta do cliente: foto e editar dados */
.acc-head{padding:20px 20px 0; display:flex; align-items:center; gap:12px;}
.acc-av{position:relative; width:56px; height:56px; border-radius:50%; border:0; padding:0; background:var(--gold); color:#fff; display:grid; place-items:center; font-size:22px; font-weight:700; cursor:pointer; flex:none;}
.acc-av img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.acc-av i{position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; border:2px solid var(--paper);}
.acc-edit{flex:none; border:1px solid var(--line); background:var(--card); border-radius:100px; padding:8px 14px; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer;}
.acc-form{margin:12px 0 0; padding-bottom:6px;}
.acc-opt{display:flex; gap:10px; align-items:flex-start; margin:14px 20px 0; font-size:12.5px; color:var(--ink);}
.acc-opt input{width:16px; height:16px; accent-color:var(--gold); margin-top:1px;}
.acc-note{margin:8px 20px 0; font-size:11.5px; color:var(--ink-soft);}
.cashopts button.active{border-color:var(--gold); background:var(--gold); color:#fff;}
.addrline.main{background:none; box-shadow:inset 3px 0 0 var(--gold);}
.addrline.main .maintag{background:var(--gold); color:#fff;}

/* endereço pelo CEP (janela) e lista de endereços da conta */
.af-labels{display:flex; gap:8px;}
.af-labels button{flex:1; min-height:40px; border-radius:11px; border:1.5px solid var(--line); background:var(--card); font-size:13px; font-weight:600; color:var(--ink);}
.af-labels button.on{background:var(--gold); border-color:var(--gold); color:#fff;}
#af-backdrop .wiz-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper);}
#af-backdrop .wiz-foot .cta{width:100%;}
.addr-acts{display:flex; gap:6px; flex:none;}
.addrline .addr-acts .del{border-color:var(--line); color:var(--wine);}
.addr-add{display:block; width:100%; margin-top:10px; padding:11px; border-radius:12px; border:1.5px dashed var(--gold); background:transparent; color:var(--gold); font-size:12.5px; font-weight:700; cursor:pointer;}