:root {
    --vinho: #751A12;
    --ouro: #8D5014;
    --areia: #E7D0A7;
    --taupe: #A18869;
    --cafe: #493221;
    --fundo: #FDF0E0;
    --linha: #e3cfae;
}

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

/* Celular: toque duplo não dá zoom (o zoom de pinça continua funcionando) */
/* o Safari do iPhone só respeita isto em cada elemento, por isso vale para todos */
*,
*::before,
*::after {
    touch-action: manipulation;
}

/* Sacola/Perfil abertos: as telas são cheias e opacas; a página de trás não é mexida
   (sem congelar o body nem esconder nada: isso travava o Safari do iPhone) */

#sheet,
#sheet-perfil {
    overscroll-behavior: contain;
}

.box {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: "Cormorant Garamond", Georgia, serif;
    background: var(--fundo);
    color: var(--cafe);
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    font-size: 18px;
}

.faixa {
    max-width: 640px;
    margin: 0 auto;
    padding: 26px 22px 10px;
}

.faixa small {
    display: block;
    font: 600 11px Montserrat, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ouro);
}

.faixa h1 {
    font: 700 42px/1.05 "Cormorant Garamond", Georgia, serif;
    color: var(--vinho);
    margin: 4px 0 0;
}

.faixa span {
    display: block;
    font: italic 500 20px/1.25 "Cormorant Garamond", serif;
    color: var(--taupe);
    margin-top: 2px;
}

nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    background: #fbf1e3;
    border-bottom: .5px solid var(--linha);
    z-index: 5;
    scrollbar-width: none;
}

nav::-webkit-scrollbar {
    display: none;
}

nav button {
    font: 500 13px Montserrat, sans-serif;
    white-space: nowrap;
    border: .5px solid var(--linha);
    background: #fffcf7;
    color: var(--cafe);
    padding: 9px 16px;
    border-radius: 99px;
}

nav button.on {
    background: var(--vinho);
    color: #fbe9cf;
    border-color: var(--vinho);
}

main {
    padding: 4px 16px;
    max-width: 640px;
    margin: auto;
}

h2 {
    font-size: 27px;
    font-weight: 700;
    color: var(--vinho);
    margin: 24px 6px 8px;
    scroll-margin-top: 70px;
    line-height: 1.1;
}

.nota {
    font-style: italic;
    color: var(--ouro);
    font-size: 16px;
    margin: 0 6px 8px;
}

.item {
    position: relative;
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 0 10px;
}

.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.nm {
    font-weight: 700;
    font-size: 21px;
    line-height: 1.12;
}

.dots {
    display: none;
}

.pr {
    font: 600 14px Montserrat, sans-serif;
    color: var(--vinho);
    white-space: nowrap;
}

.pr.c {
    font: italic 500 16px "Cormorant Garamond", serif;
    color: var(--ouro);
}

.ds {
    font-size: 16.5px;
    color: var(--taupe);
    font-style: italic;
    line-height: 1.25;
    margin-top: 2px;
}

.bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    min-height: 34px;
}

.vars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vb {
    font: 500 12px Montserrat, sans-serif;
    border: .5px solid var(--linha);
    background: #f4e7d3;
    color: var(--cafe);
    padding: 7px 13px;
    border-radius: 99px;
}

.vb.on {
    background: var(--vinho);
    color: #fbe9cf;
    border-color: var(--vinho);
}

.qty {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font: 600 15px Montserrat, sans-serif;
}

.item.tem .qty {
    background: #f4e7d3;
    border-radius: 99px;
    padding: 2px;
}

.qty button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: var(--vinho);
    color: #fbe9cf;
    font-size: 21px;
    line-height: 1;
}

.item.tem .qty button {
    background: transparent;
    color: var(--vinho);
    font-size: 22px;
}

.qty button.minus,
.item:not(.tem) .qty span {
    display: none;
}

.item.tem .qty button.minus {
    display: block;
}

.qty span {
    min-width: 22px;
    text-align: center;
    color: var(--vinho);
}

footer {
    margin: 36px auto 0;
    max-width: 640px;
    padding: 0 18px;
    text-align: center;
}

.enc {
    background: #f6e3c9;
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    text-align: left;
}

.enc img {
    width: 84px;
    height: 84px;
    flex: none;
}

.enc h3 {
    color: var(--vinho);
    font-size: 22px;
}

.enc p {
    font-size: 16px;
    line-height: 1.3;
    margin-top: 2px;
}

.ender {
    font: 500 13px Montserrat, sans-serif;
    color: var(--ouro);
    margin-top: 14px;
}

.amor {
    font: 500 22px "Dancing Script", cursive;
    color: var(--ouro);
    margin-top: 10px;
}

#bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--fundo);
    border-top: 1px solid var(--linha);
    z-index: 6;
    transform: translateZ(0);
}

#bar button {
    position: relative;
    flex: 1;
    max-width: 213px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    gap: 3px;
    padding: 9px 4px 8px;
    border: 0;
    background: none;
    color: var(--taupe);
    font: 600 11px Montserrat, sans-serif;
}

#bar button .ico {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.i-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17 21V3c-2.2 1.2-3.5 3.6-3.5 7v3h3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4.5 3v5a2.5 2.5 0 0 0 5 0V3M7 11v10M17 21V3c-2.2 1.2-3.5 3.6-3.5 7v3h3.5'/%3E%3C/svg%3E");
}
.i-bag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3L5 8zM8.5 8V6.5a3.5 3.5 0 0 1 7 0V8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3L5 8zM8.5 8V6.5a3.5 3.5 0 0 1 7 0V8'/%3E%3C/svg%3E");
}
.i-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.4a3.6 3.6 0 1 0 0 7.2 3.6 3.6 0 0 0 0-7.2zM4.5 20.5c.6-3.9 3.7-6 7.5-6s6.9 2.1 7.5 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.4a3.6 3.6 0 1 0 0 7.2 3.6 3.6 0 0 0 0-7.2zM4.5 20.5c.6-3.9 3.7-6 7.5-6s6.9 2.1 7.5 6'/%3E%3C/svg%3E");
}

#bar button.on {
    color: var(--vinho);
}

#bar button.on::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--vinho);
}

#badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--vinho);
    color: #fff;
    font: 600 11px/18px Montserrat, sans-serif;
    text-align: center;
}

/* ===== Boas-vindas ===== */
#boas-vindas {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
    background: #eed4b3;   /* mesma cor do fundo da logo */
    text-align: center;
    overflow: auto;
}

#boas-vindas img {
    width: min(62vw, 250px);
    height: auto;
}

#boas-vindas h1 {
    font-size: 32px;
    line-height: 1.1;
    color: var(--vinho);
}

#boas-vindas p {
    font: 15px/1.5 Montserrat, sans-serif;
    max-width: 320px;
}

#boas-vindas .send,
#boas-vindas .google {
    width: 100%;
    max-width: 360px;
    margin-top: 6px;
}

.google {
    padding: 14px;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: #fff;
    color: var(--cafe);
    font: 600 14px Montserrat, sans-serif;
}

.google b {
    color: #4285F4;
    margin-right: 8px;
    font-size: 17px;
}

.link-simples {
    border: 0;
    background: none;
    color: var(--vinho);
    font: 600 14px Montserrat, sans-serif;
    text-decoration: underline;
    padding: 8px;
}

#boas-vindas small {
    font: italic 14px/1.4 "Cormorant Garamond", serif;
    color: var(--ouro);
    max-width: 300px;
}

#sheet {
    position: fixed;
    inset: 0 0 calc(58px + env(safe-area-inset-bottom)) 0;   /* deixa a barra de baixo livre */
    background: rgba(40, 20, 10, .55);
    display: none;
    align-items: flex-end;
    z-index: 10;
}

#sheet.open {
    display: flex;
}

.box {
    background: var(--fundo);
    width: 100%;
    max-width: 640px;
    margin: auto;
    max-height: calc(100% - 16px);   /* não usa vh: no Safari ele passa por cima da barra de baixo */
    overflow: auto;
    border-radius: 18px 18px 0 0;
    padding: 20px 18px;
    border-top: 6px solid var(--vinho);
}

.box h3 {
    font-size: 26px;
    color: var(--vinho);
    margin-bottom: 8px;
}

.line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font: 14px Montserrat, sans-serif;
    padding: 6px 0;
}

.total {
    font-weight: 600;
    border-top: 2px solid var(--vinho);
    margin-top: 6px;
    padding-top: 10px;
}

.aviso {
    font-style: italic;
    font-size: 16px;
    color: var(--ouro);
    margin-top: 6px;
}

label {
    display: block;
    font: 600 12px Montserrat, sans-serif;
    margin: 14px 0 5px;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--taupe);
    border-radius: 10px;
    font: 16px Montserrat, sans-serif;
    background: #fffaf2;
    color: var(--cafe);
}

.duo {
    display: flex;
    gap: 8px;
}

.row {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
}

.row button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--taupe);
    background: transparent;
    color: var(--cafe);
    font: 500 14px Montserrat, sans-serif;
}

.row button.on {
    background: var(--vinho);
    color: var(--areia);
    border-color: var(--vinho);
}

.send {
    margin-top: 18px;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 12px;
    background: var(--vinho);
    color: var(--areia);
    font: 600 14px Montserrat, sans-serif;
}

.close {
    background: none;
    border: 0;
    font: 500 13px Montserrat, sans-serif;
    color: var(--ouro);
    margin-top: 8px;
    width: 100%;
    padding: 10px;
}

.hide {
    display: none !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ouro);
    outline-offset: 2px;
}

.privacidade {
    font: 12px/1.5 Montserrat, sans-serif;
    color: var(--cafe);
    margin-top: 12px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    padding: 8px 12px;
}

.privacidade summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ouro);
}

.privacidade p {
    margin-top: 6px;
}

.privacidade-nota {
    font: 11px Montserrat, sans-serif;
    color: var(--taupe);
    margin-top: 6px;
    text-align: center;
}

/* ---- Tela de agradecimento ---- */
#ok-resumo {
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: #fff8ee;
}

.zap-link {
    display: block;
    text-align: center;
    text-decoration: none;
    background: none;
    border: 2px solid var(--vinho);
    color: var(--vinho);
}

/* Carrinho: tirar / adicionar unidades */
.item-carrinho {
    align-items: center;
}

.item-carrinho .ctl {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.item-carrinho .rm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--vinho);
    background: #fff;
    color: var(--vinho);
    font: 600 16px/1 Montserrat, sans-serif;
    cursor: pointer;
    padding: 0;
}

/* Carrinho vazio */
#vazio {
    text-align: center;
}

#vazio p {
    font-size: 19px;
    line-height: 1.35;
    margin: 6px 0 10px;
}

#vazio .send {
    margin-top: 12px;
}

.google {
    width: 100%;
}

/* ===== Endereço salvo no carrinho ===== */
.end-salvo {
    font: 14px/1.4 Montserrat, sans-serif;
    padding: 10px 12px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: #fff;
}

.check {
    display: flex;
    gap: 8px;
    align-items: center;
    font: 13px Montserrat, sans-serif;
    margin-top: 10px;
}

.check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

#end-wrap .link-simples {
    display: block;
    margin-top: 6px;
    padding: 6px 0;
    text-align: left;
}

/* ===== Perfil (estilo iOS, em seções) ===== */
#bar {
    z-index: 11;
}

#sheet-perfil {
    position: fixed;
    inset: 0 0 calc(40px + env(safe-area-inset-bottom)) 0;   /* termina por baixo da barra (que fica por cima) */
    background: var(--fundo);
    display: none;
    z-index: 10;
    overscroll-behavior: contain;
}

#sheet-perfil.open {
    display: block;
}

#sheet-perfil .box {
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 0 16px 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-y: auto;
}

.p-barra {
    display: flex;
    justify-content: flex-end;
    padding: 6px 0 0;
}

#sheet-perfil .p-fechar {
    background: none;
    border: 0;
    width: auto;
    margin: 0;
    padding: 10px 4px;
    font: 500 14px Montserrat, sans-serif;
    color: var(--vinho);
}

.p-texto {
    font-size: 19px;
    line-height: 1.3;
    margin: 4px 0 12px;
    font-style: italic;
    color: var(--taupe);
}

.nota {
    font: italic 15px/1.35 "Cormorant Garamond", serif;
    color: var(--ouro);
    margin: 10px 8px;
    text-align: center;
}

/* sem login */
.p-vazio {
    text-align: center;
    padding: 24px 12px 10px;
}

.p-circ {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #F3DFC4;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-circ i {
    display: block;
    width: 50px;
    height: 50px;
    background: var(--vinho);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.p-vazio h3 {
    font-size: 32px;
    line-height: 1.05;
    color: var(--vinho);
    margin: 0;
}

#p-deslog .google {
    width: 100%;
    margin: 6px 0;
}

/* topo com avatar */
.p-cab {
    text-align: center;
    padding: 4px 0 14px;
}

.p-cab img,
.p-av {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: block;
    box-shadow: 0 0 0 4px #fffcf7, 0 6px 16px rgba(117, 26, 18, .22);
}

.p-av {
    background: linear-gradient(145deg, #8a2a1f, #5f130d);
    color: #f6dfba;
    font: 600 36px/80px "Cormorant Garamond", serif;
}

.p-cab b {
    display: block;
    font: 700 30px/1.1 "Cormorant Garamond", serif;
    color: var(--vinho);
}

.p-cab small {
    font: 12.5px Montserrat, sans-serif;
    color: var(--taupe);
}

.p-titulo {
    text-align: center;
    font-size: 28px;
    color: var(--vinho);
    margin: 0;
}

.p-intro {
    text-align: center;
}

/* abas (controle segmentado) */
.p-abas {
    display: flex;
    background: rgba(117, 26, 18, .08);
    border-radius: 11px;
    padding: 2px;
    margin: 4px 0 6px;
}

.p-abas button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 9px 0;
    border-radius: 9px;
    font: 500 13px Montserrat, sans-serif;
    color: var(--cafe);
}

.p-abas button.on {
    background: #fffcf7;
    color: var(--vinho);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

/* seções */
.p-rot {
    font: 600 11px Montserrat, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro);
    padding: 16px 8px 7px;
}

.p-grupo {
    background: #fffcf7;
    border-radius: 18px;
    border: .5px solid var(--linha);
    overflow: hidden;
}

.p-campo {
    padding: 10px 16px;
    position: relative;
}

.p-campo + .p-campo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: .5px;
    background: rgba(117, 26, 18, .14);
}

#sheet-perfil label {
    margin: 0 0 1px;
    font: 500 11.5px Montserrat, sans-serif;
    color: var(--taupe);
}

#sheet-perfil .p-campo input {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 2px 0;
    font: 500 20px "Cormorant Garamond", serif;
    color: var(--cafe);
}

#sheet-perfil .p-campo input:focus-visible {
    outline: none;
}

.p-campo:focus-within {
    background: #fff7ea;
}

.p-msg {
    font: 13px Montserrat, sans-serif;
    min-height: 18px;
    color: var(--ouro);
    text-align: center;
    margin: 0;
}

#p-salvar {
    margin-top: 6px;
}

.p-pular {
    display: block;
    margin: 4px auto 0;
    text-decoration: none;
    font-weight: 500;
}

.p-lista button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 14px 16px;
    font: 500 15px Montserrat, sans-serif;
    color: var(--vinho);
    position: relative;
}

.p-lista button + button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: .5px;
    background: rgba(117, 26, 18, .14);
}

.p-lista .perigo {
    color: #b3261e;
}

.p-atualizar {
    display: block;
    margin: 6px auto 0;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

/* pedidos */
.ped {
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 15px 16px;
    margin: 0 0 10px;
    font: 14px/1.4 Montserrat, sans-serif;
}

.ped-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ped-topo b {
    font: 700 23px/1.1 "Cormorant Garamond", serif;
}

.ped-tag {
    font: 600 11px Montserrat, sans-serif;
    background: #f3dfc4;
    color: var(--vinho);
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.ped-tag.fim {
    background: #e9efe2;
    color: #3d5a2a;
}

.ped-tag.canc {
    background: #f6e0dc;
    color: #a33;
}

.ped-itens {
    white-space: pre-line;
    margin: 6px 0 2px;
    font: italic 500 17px/1.25 "Cormorant Garamond", serif;
    color: var(--taupe);
}

.ped-info {
    color: var(--taupe);
    font-size: 12px;
}

.ped-tot {
    display: flex;
    justify-content: space-between;
    font: 500 17px "Cormorant Garamond", serif;
    margin-top: 6px;
}

.ped-tot.final {
    font: 700 21px "Cormorant Garamond", serif;
    color: var(--vinho);
    margin-top: 0;
}

.ped.antigo {
    padding: 12px 16px;
}

.ped.antigo .ped-topo b {
    font-size: 20px;
}

.passos {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 14px 0 4px;
}

.passos li {
    flex: 1;
    text-align: center;
    font: 500 9.5px Montserrat, sans-serif;
    color: #b3a28b;
    position: relative;
    padding-top: 19px;
}

.passos li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: #eadbc4;
    z-index: 1;
}

.passos li::after {
    content: "";
    position: absolute;
    top: 5.5px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #eadbc4;
}

.passos li:last-child::after {
    display: none;
}

.passos li.feito {
    color: var(--vinho);
}

.passos li.feito::before,
.passos li.feito::after {
    background: var(--vinho);
}

.passos li.atual {
    font-weight: 600;
}

.passos li.atual::after {
    background: #eadbc4;
}

.ped .ped-pix {
    display: block;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: 600 14px Montserrat, sans-serif;
    color: var(--vinho);
    text-align: left;
}

/* ===== Parte 3: barra, carrinho, Finalizar e Pedido enviado (estilo iOS) ===== */
#bar {
    background: #fffcf7;
    border-top: .5px solid rgba(117, 26, 18, .18);
}

#bar button {
    font: 500 10.5px Montserrat, sans-serif;
    color: #a69580;
}

#bar button.on {
    font-weight: 600;
}

#bar button.on::before {
    display: none;
}

#sheet {
    inset: 0 0 calc(40px + env(safe-area-inset-bottom)) 0;
    background: var(--fundo);
    display: none;
    align-items: stretch;
}

#sheet.open {
    display: block;
}

#sheet .box {
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 14px 16px 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-y: auto;
}

#sheet .box > h3 {
    font-size: 38px;
    line-height: 1;
    color: var(--vinho);
    margin: 4px 6px 12px;
}

#sheet .p-grupo {
    margin: 0 0 10px;
}

/* campos dentro dos cartões */
#sheet label,
.p-campo label {
    display: block;
    margin: 0 0 1px;
    font: 500 11.5px Montserrat, sans-serif;
    color: var(--taupe);
}

#sheet .p-campo input,
#sheet .p-campo select,
#sheet .p-campo textarea,
#end-wrap input:not([type="checkbox"]) {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 2px 0;
    font: 500 20px "Cormorant Garamond", serif;
    color: var(--cafe);
}

#sheet .p-campo textarea {
    resize: none;
}

#sheet .p-campo input:focus-visible,
#sheet .p-campo select:focus-visible,
#sheet .p-campo textarea:focus-visible,
#end-wrap input:focus-visible {
    outline: none;
}

#end-wrap,
#quando-wrap {
    padding: 10px 16px 12px;
}

#end-wrap .end-salvo {
    border: 0;
    background: transparent;
    padding: 2px 0;
    font: 500 20px/1.2 "Cormorant Garamond", serif;
    margin: 0;
}

#end-wrap .check {
    font: 500 12.5px Montserrat, sans-serif;
    color: var(--cafe);
}

#end-wrap .link-simples {
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    padding: 6px 0 0;
}

#quando-wrap .duo {
    margin-top: 6px;
}

#quando-wrap .duo input,
#quando-wrap .duo select {
    border: 0;
    border-radius: 10px;
    background: #f4e7d3;
    padding: 10px 12px;
    font: 500 15px Montserrat, sans-serif;
    color: var(--cafe);
}

#quando-wrap .aviso {
    font-size: 15px;
    margin: 8px 0 0;
}

/* Entrega / Retirada como controle segmentado */
#modo {
    background: rgba(117, 26, 18, .08);
    border-radius: 11px;
    padding: 2px;
    gap: 0;
    margin: 4px 0 10px;
}

#modo button {
    border: 0;
    background: transparent;
    padding: 9px 0;
    border-radius: 9px;
    font: 500 13px Montserrat, sans-serif;
}

#modo button.on {
    background: #fffcf7;
    color: var(--vinho);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

/* itens e totais */
#resumo {
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 4px 16px;
    margin: 0 0 10px;
}

#resumo .line,
#totais .line,
#ok-resumo .line {
    font: 500 18px "Cormorant Garamond", serif;
    padding: 8px 0;
    align-items: center;
}

#resumo .item-carrinho {
    font-weight: 700;
    font-size: 20px;
    border-bottom: .5px solid var(--linha);
}

#resumo .item-carrinho .ctl span {
    font: 600 14px Montserrat, sans-serif;
    color: var(--vinho);
}

#resumo .item-carrinho .rm {
    width: 30px;
    height: 30px;
    border: 0;
    background: #f4e7d3;
    color: var(--vinho);
    font-size: 18px;
}

#resumo .line.total,
#totais .line.total,
#ok-resumo .line.total {
    border-top: .5px solid var(--linha);
    margin-top: 2px;
    padding-top: 10px;
    font: 700 24px "Cormorant Garamond", serif;
    color: var(--vinho);
}

#resumo .aviso,
#totais .aviso {
    margin: 0 0 8px;
}

#sheet .privacidade {
    border: 0;
    background: #fffcf7;
    border-radius: 14px;
    margin-top: 4px;
}

#sheet .send {
    border-radius: 15px;
    padding: 16px;
    font-size: 15px;
}

#sheet .close {
    font-size: 14px;
    color: var(--vinho);
}

/* carrinho vazio */
#sheet #vazio:not(.hide) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 80px;
}

#vazio h3 {
    max-width: 320px;
    font-size: 32px;
    line-height: 1.05;
}

#vazio p {
    font-style: italic;
    color: var(--taupe);
    font-size: 20px;
    max-width: 330px;
}

#vazio .send {
    max-width: 330px;
}

/* pedido enviado */
#ok-titulo {
    text-align: center;
}

#ok-titulo::before {
    content: "";
    display: block;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 12px auto 12px;
    background: var(--vinho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbe9cf' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 32px no-repeat;
}

#ok-info {
    text-align: center;
    font-size: 19px;
    margin: 0 8px 12px;
}

#ok-resumo {
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 4px 16px;
    margin: 0 0 10px;
}

#pix-area {
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 16px;
    margin: 0 0 12px;
    text-align: center;
}

#pix-area h3 {
    font: 600 11px Montserrat, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro);
    margin: 0 0 6px;
}

#pix-info {
    font-size: 16.5px;
    margin: 0;
}

#pix-qr {
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    width: fit-content;
    margin: 12px auto !important;
}

#pix-area textarea {
    height: 92px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: #f4e7d3;
    border-radius: 12px;
    font: 12px/1.35 Montserrat, sans-serif;
    resize: none;
}

#pix-area .send {
    margin-top: 12px;
}

#sheet .zap-link {
    background: #fffcf7;
    border: .5px solid var(--linha);
    color: var(--vinho);
    font-weight: 500;
    font-size: 15px;
    margin-top: 0;
}

/* ===== Botão "Ver sacola" (aparece quando há itens) ===== */
#ver-sacola {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(58px + env(safe-area-inset-bottom) + 10px);
    max-width: 608px;
    margin: 0 auto;
    z-index: 7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border: 0;
    border-radius: 16px;
    background: var(--vinho);
    color: #fbe9cf;
    font: 500 13px Montserrat, sans-serif;
    box-shadow: 0 8px 22px rgba(117, 26, 18, .35);
}

#ver-sacola b {
    font: 700 16px Montserrat, sans-serif;
}

body.com-sacola {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

body.travada #ver-sacola {
    display: none;
}

#totais {
    background: #fffcf7;
    border: .5px solid var(--linha);
    border-radius: 18px;
    padding: 4px 16px;
    margin: 12px 0 8px;
}

#resumo .item-carrinho:last-child {
    border-bottom: 0;
}

/* ===== Botão voltar ao topo ===== */
#ir-topo {
    position: fixed;
    right: 16px;
    bottom: calc(58px + env(safe-area-inset-bottom) + 14px);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: .5px solid var(--linha);
    background: #fffcf7;
    color: var(--vinho);
    box-shadow: 0 6px 18px rgba(73, 50, 33, .22);
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, bottom .25s ease;
}

#ir-topo.mostra {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

body.com-sacola #ir-topo {
    bottom: calc(58px + env(safe-area-inset-bottom) + 10px + 56px + 12px);
}

#ir-topo svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* efeito de "indo para cima": a seta sai por cima e volta por baixo */
#ir-topo.subindo svg {
    animation: seta-sobe .7s ease-in-out;
}

#ir-topo.subindo {
    transform: translateY(-4px) scale(1.06);
}

@keyframes seta-sobe {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    40% {
        transform: translateY(-16px);
        opacity: 0;
    }

    41% {
        transform: translateY(16px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

body.travada #ir-topo {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #ir-topo.subindo svg {
        animation: none;
    }
}

.fin-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:4px 6px 12px}
#sheet .fin-topo h3{font-size:38px;line-height:1;color:var(--vinho);margin:0}
#limpar{font:500 13px Montserrat,sans-serif;color:var(--vinho);background:none;border:0;box-shadow:none;width:auto;text-decoration:none;white-space:nowrap;padding:6px 0;cursor:pointer}
#limpar.confirma{color:#b3261e;font-weight:600}


/* ---- animações (só opacidade e deslocamento pequeno: leves e seguras no iPhone) ---- */
:root { --suave: cubic-bezier(.32, .72, 0, 1); }

/* Trocar de tela (Cardápio / Sacola / Perfil): a nova surge por cima, subindo de leve, e a anterior
   fica por baixo até a nova terminar. Voltando ao cardápio, a tela some em fade. */
@keyframes tela-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tela-fica  { from { opacity: 1; } to { opacity: 1; } }
@keyframes tela-some  { from { opacity: 1; } to { opacity: 0; } }

#sheet.open,
#sheet-perfil.open {
    animation: tela-entra .34s var(--suave) backwards;
}
#sheet.saindo,
#sheet-perfil.saindo {
    display: block;
    pointer-events: none;
    z-index: 9;                       /* por baixo da tela que está entrando (10) */
    animation: tela-fica .36s linear forwards;
}
body[data-para="menu"] #sheet.saindo,
body[data-para="menu"] #sheet-perfil.saindo {
    animation: tela-some .26s ease-out forwards;
}
#bar button { transition: color .3s ease; }

/* Meus dados <-> Meus pedidos: marcador desliza; a aba atual some, a nova entra deslizando */
.p-abas { position: relative; }
.p-abas::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 9px;
    background: #fffcf7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    transition: transform .36s var(--suave);
}
.p-abas[data-aba="pedidos"]::before { transform: translateX(100%); }
.p-abas button { position: relative; transition: color .3s ease; }
.p-abas button.on { background: transparent; box-shadow: none; }

@keyframes aba-sai    { from { opacity: 1; } to { opacity: 0; } }
@keyframes aba-entra-d { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes aba-entra-e { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
#p-aba-dados.sai, #p-aba-pedidos.sai { animation: aba-sai .13s linear forwards; }
#p-aba-dados.entra-e, #p-aba-pedidos.entra-e { animation: aba-entra-e .3s var(--suave) both; }
#p-aba-dados.entra-d, #p-aba-pedidos.entra-d { animation: aba-entra-d .3s var(--suave) both; }

@media (prefers-reduced-motion: reduce) {
    #sheet.open,
    #sheet-perfil.open,
    #p-aba-dados.sai, #p-aba-pedidos.sai,
    #p-aba-dados.entra-e, #p-aba-pedidos.entra-e,
    #p-aba-dados.entra-d, #p-aba-pedidos.entra-d { animation: none; }
    .p-abas::before { transition: none; }
}


/* ===== Abertura (logo antes do cardápio) ===== */
#abertura {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #eed4b3;   /* mesma cor do fundo da logo */
    overflow: hidden;
    animation: ab-sai .6s ease 2.4s forwards;
}
#abertura.fim { animation: ab-sai .3s ease forwards; }
@keyframes ab-sai { to { opacity: 0; visibility: hidden; } }
@keyframes ab-entra { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }

#abertura .ab-logo {
    position: relative;
    z-index: 1;
    width: min(62vw, 250px);
    animation: ab-entra .9s var(--suave) both;
}
#abertura .ab-logo img { display: block; width: 100%; height: auto; }
#abertura .ab-touca,
#abertura .ab-natal { display: none; }

/* Mesmo estilo da tela de carregamento do painel: legenda em maiúsculas + barrinha de progresso */
#abertura .ab-sub {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    font: 600 11px Montserrat, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ouro);
    animation: ab-entra .8s var(--suave) .45s both;
}
#abertura .ab-sub::before { content: "Faça seu pedido"; }
#abertura .ab-barra {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 3px;
    margin-top: 22px;
    border-radius: 3px;
    background: rgba(117, 26, 18, .14);
    overflow: hidden;
    animation: ab-entra .8s var(--suave) .6s both;
}
#abertura .ab-barra span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--vinho);
    transform-origin: left center;
    animation: ab-enche 2.2s cubic-bezier(.4, 0, .2, 1) .5s both;
}
@keyframes ab-enche { from { transform: scaleX(.04); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    #abertura .ab-logo,
    #abertura .ab-sub,
    #abertura .ab-barra { animation: none; }
    #abertura .ab-barra span { animation: none; }
}


/* ===== Sacola: Entrega/Retirada e pedido enviado ===== */
#modo { position: relative; }
#modo::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 9px;
    background: #fffcf7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    transition: transform .36s var(--suave);
}
#modo[data-modo="ret"]::before { transform: translateX(100%); }
#modo button { position: relative; flex: 1; transition: color .3s ease; }
#modo button.on { background: transparent; box-shadow: none; }

@keyframes bloco-sai    { from { opacity: 1; } to { opacity: 0; } }
@keyframes bloco-entra  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes check-pula   { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
#end-wrap.sai   { animation: bloco-sai .13s linear forwards; }
#end-wrap.entra { animation: bloco-entra .34s var(--suave) both; }

/* formulário -> confirmação do pedido */
#caixa-pedido.conf-sai { animation: bloco-sai .17s linear forwards; }
#caixa-pedido.conf-entra #ok-titulo::before { animation: check-pula .6s cubic-bezier(.3, 1.4, .5, 1) .12s both; }
#caixa-pedido.conf-entra #ok-titulo,
#caixa-pedido.conf-entra #ok-info,
#caixa-pedido.conf-entra #ok-resumo,
#caixa-pedido.conf-entra #pix-area { animation: bloco-entra .5s var(--suave) both; }
#caixa-pedido.conf-entra #ok-info    { animation-delay: .1s; }
#caixa-pedido.conf-entra #ok-resumo  { animation-delay: .2s; }
#caixa-pedido.conf-entra #pix-area   { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    #modo::before { transition: none; }
    #end-wrap.sai, #end-wrap.entra,
    #caixa-pedido.conf-sai,
    #caixa-pedido.conf-entra #ok-titulo,
    #caixa-pedido.conf-entra #ok-titulo::before,
    #caixa-pedido.conf-entra #ok-info,
    #caixa-pedido.conf-entra #ok-resumo,
    #caixa-pedido.conf-entra #pix-area { animation: none; }
}


/* ===== Instalar o app (Perfil) ===== */
#p-instalar { margin-top: 6px; }
.inst-card { padding: 14px 16px; }
.inst-topo { display: flex; align-items: center; gap: 12px; }
.inst-txt { flex: 1; min-width: 0; }
.inst-txt b { display: block; font: 600 15px Montserrat, sans-serif; color: var(--vinho); }
.inst-txt small { display: block; margin-top: 3px; font: 12.5px/1.4 Montserrat, sans-serif; color: var(--taupe); }
#inst-btn {
    flex: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    background: var(--vinho);
    color: var(--areia);
    font: 600 13px Montserrat, sans-serif;
}
.inst-passos { margin-top: 12px; padding-top: 12px; border-top: .5px solid rgba(117, 26, 18, .14); animation: bloco-entra .3s var(--suave) both; }
.inst-passos ol { margin: 0; padding-left: 20px; font: 13.5px/1.55 Montserrat, sans-serif; color: var(--cafe); }
.inst-passos li { padding: 2px 0; }
.inst-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; color: var(--vinho); }
.inst-ico svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .inst-passos { animation: none; } }


/* ===== Produto esgotado ===== */
.item.esgotado { opacity: .6; }
.item.esgotado .qty { display: none; }
.item.esgotado .bot::after {
    content: "Esgotado";
    margin-left: auto;
    font: 600 12px Montserrat, sans-serif;
    color: var(--taupe);
    background: rgba(117, 26, 18, .08);
    border-radius: 999px;
    padding: 7px 13px;
}