@charset "UTF-8";
/* ===========================================================================
   Menuxy — Vitrine publica de delivery
   ---------------------------------------------------------------------------
   Folha unica do cardapio publico. Nao carrega Bootstrap: a pagina e servida
   para clientes em rede movel, entao tudo aqui e escrito a mao e sem framework.

   A cor primaria muda por restaurante (empresas.cor_cardapio_primaria). Por
   isso o PHP injeta os canais separados em --marca-rgb e a folha deriva todos
   os tons com rgba(var(--marca-rgb), a): color-mix() resolveria o mesmo, mas
   ainda falha em Android/WebView antigo, que e metade do publico da vitrine.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
:root {
    /* Injetados pelo PHP: --marca-rgb, --marca, --marca-forte, --sobre-marca,
       --piso, --tinta, --tinta-rgb, --capa-sombra */

    /* Superficies. O "piso" vem do banco; os degraus acima dele sao neutros
       quentes fixos para o cartao nunca sumir contra um fundo claro demais. */
    --papel: #FFFFFF;
    --papel-fundo: #F4EFE8;
    /* --forca-linha vem do PHP: sobe quando o lojista escolhe fundo branco
       puro, para o cartao branco nao sumir dentro do piso branco. */
    --forca-linha: .10;
    --linha: rgba(var(--tinta-rgb), var(--forca-linha));
    --linha-forte: rgba(var(--tinta-rgb), calc(var(--forca-linha) + .06));

    /* Texto */
    --tinta-2: rgba(var(--tinta-rgb), .64);
    --tinta-3: rgba(var(--tinta-rgb), .46);

    /* Tons da marca */
    --marca-lavagem: rgba(var(--marca-rgb), .10);
    --marca-lavagem-forte: rgba(var(--marca-rgb), .16);
    --marca-anel: rgba(var(--marca-rgb), .28);
    --marca-borda: rgba(var(--marca-rgb), .38);

    /* Semantico */
    --positivo: #157F4B;
    --positivo-lavagem: rgba(21, 127, 75, .10);
    --alerta: #B4531B;

    /* Sombras em camadas: uma rasante para assentar a peca e uma difusa e
       deslocada para dar altura. Uma sombra unica achata tudo. */
    --sombra-carta:
        0 1px 2px rgba(var(--tinta-rgb), .05),
        0 4px 10px -4px rgba(var(--tinta-rgb), .10);
    --sombra-alta:
        0 2px 4px rgba(var(--tinta-rgb), .05),
        0 14px 30px -14px rgba(var(--tinta-rgb), .22);
    --sombra-folha:
        0 -1px 0 rgba(var(--tinta-rgb), .06),
        0 -20px 52px -18px rgba(var(--tinta-rgb), .34);
    --sombra-marca:
        0 2px 5px -2px rgba(var(--marca-rgb), .34),
        0 12px 22px -12px rgba(var(--marca-rgb), .48);

    /* Raios */
    --r-folha: 24px;
    --r-carta: 16px;
    --r-imagem: 13px;
    --r-campo: 14px;
    --r-pilula: 999px;

    /* Movimento */
    --mov-fisico: cubic-bezier(.2, .8, .2, 1);
    --mov-saida: cubic-bezier(.4, 0, 1, 1);
    --t-rapido: 160ms;
    --t-base: 220ms;

    /* Tipografia */
    --face-titulo: "Outfit", "Segoe UI", system-ui, sans-serif;
    --face-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Medidas */
    --largura: 1180px;
    --respiro: 18px;
    --altura-trilha: 60px;
}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-trilha) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--face-corpo);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--piso);
    overflow-x: hidden;
    min-height: 100dvh;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* A folha guarda a posicao e devolve no fechar. position:fixed e o unico
   travamento que o Safari do iOS respeita; overflow:hidden ele ignora. */
body.esta-travado {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: var(--face-titulo);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    touch-action: manipulation;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Anel de foco proprio. O outline do navegador e cinza e quadrado; este
   acompanha a marca do restaurante e o raio da peca focada. */
:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection { background: var(--marca-lavagem-forte); }

.so-leitor {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.envelope {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--respiro);
}

/* ---------------------------------------------------------------------------
   3. Preco — o destaque tipografico da vitrine
   O "R$" recua para um grau menor e mais leve, e o numero fica em tabular para
   os precos de uma coluna alinharem virgula com virgula.
   ------------------------------------------------------------------------ */
.preco {
    font-weight: 800;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}
.preco__moeda {
    font-size: .68em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tinta-3);
    margin-right: .16em;
}
.preco__unidade {
    font-size: .68em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tinta-3);
    margin-left: .1em;
}

/* ---------------------------------------------------------------------------
   11. Sacola fixa
   ------------------------------------------------------------------------ */
.sacola {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    transform: translateY(130%);
    transition: transform 300ms var(--mov-fisico);
    padding: 10px var(--respiro) calc(10px + env(safe-area-inset-bottom));
    background: rgba(var(--piso-rgb), .88);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 -1px 0 var(--linha);
}
.sacola.esta-visivel { transform: none; }

.sacola__botao {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding: 11px 18px 11px 13px;
    border-radius: var(--r-campo);
    background: var(--marca);
    color: var(--sobre-marca);
    box-shadow: var(--sombra-marca);
    transition: transform var(--t-rapido) var(--mov-fisico);
}
.sacola__botao:active { transform: scale(.98); }

.sacola__contador {
    position: relative;
    min-width: 30px; height: 30px;
    padding-inline: 8px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pilula);
    background: rgba(255, 255, 255, .2);
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sobre-marca-escura .sacola__contador { background: rgba(0, 0, 0, .12); }

@keyframes pulinho {
    0%   { transform: translateY(0)     scale(1); }
    30%  { transform: translateY(-5px)  scale(1.09); }
    58%  { transform: translateY(0)     scale(.97); }
    100% { transform: translateY(0)     scale(1); }
}
.sacola__contador.esta-pulando { animation: pulinho 420ms var(--mov-fisico); }

.sacola__rotulo {
    display: block;
    text-align: left;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
}
.sacola__total {
    display: block;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.sacola__acao { font-size: .92rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   11b. Voltar ao topo
   Sobe junto com a barra da sacola para nao cobrir o total do pedido.
   ------------------------------------------------------------------------ */
.ao-topo {
    position: fixed;
    right: 14px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 90;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 0 0 1px var(--linha), var(--sombra-alta);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    pointer-events: none;
    transition: opacity var(--t-base) var(--mov-fisico),
                transform var(--t-base) var(--mov-fisico),
                bottom var(--t-base) var(--mov-fisico);
}
.ao-topo.esta-visivel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ao-topo:active { transform: scale(.9); }
body.tem-sacola .ao-topo { bottom: calc(88px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------------------
   12. Folha inferior (bottom sheet)
   ------------------------------------------------------------------------ */
.folha {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
}
.folha.esta-aberta { visibility: visible; }

.folha__veu {
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 8, .48);
    opacity: 0;
    transition: opacity var(--t-base) ease;
    -webkit-tap-highlight-color: transparent;
}
.folha.esta-aberta .folha__veu { opacity: 1; }

.folha__painel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border-radius: var(--r-folha) var(--r-folha) 0 0;
    box-shadow: var(--sombra-folha);
    transform: translateY(100%);
    transition: transform 320ms var(--mov-fisico);
    will-change: transform;
}
.folha.esta-aberta .folha__painel { transform: translateY(var(--arrasto, 0px)); }
/* Durante o arrasto o dedo manda: transicao aqui atrasaria o painel. */
.folha.esta-arrastando .folha__painel { transition: none; }

.folha__puxador {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 0 6px;
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
}
.folha__puxador::before {
    content: "";
    width: 38px; height: 4px;
    border-radius: var(--r-pilula);
    background: var(--linha-forte);
}

.folha__fechar {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--papel-fundo);
    color: var(--tinta-2);
}
.folha__fechar:active { transform: scale(.9); }

.folha__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 18px;
}

.folha__rodape {
    flex: 0 0 auto;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    background: var(--papel);
    box-shadow: 0 -1px 0 var(--linha), 0 -10px 24px -18px rgba(var(--tinta-rgb), .5);
}

.folha__titulo {
    font-size: 1.24rem;
    font-weight: 700;
    padding-right: 34px;
    text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   13. Conteudo da folha de produto
   ------------------------------------------------------------------------ */
.folha__foto {
    /* Sangra os 18px de padding de cada lado do corpo. O max-width:100% do
       reset global travaria a largura no content box e deixaria uma faixa
       branca a direita, entao aqui ele precisa ser desligado. */
    max-width: none;
    width: calc(100% + 36px);
    margin: -4px -18px 16px;
    /* Sem aspect-ratio fixo: com height auto a foto abre na proporcao em que
       foi enviada, que e como o lojista a enquadrou. O teto de altura existe so
       para uma foto em pe nao empurrar os opcionais para fora da tela. */
    height: auto;
    max-height: 44dvh;
    object-fit: cover;
    object-position: var(--enquadramento, center);
    background: var(--papel-fundo);
    cursor: zoom-in;
}

.folha__descricao {
    margin-top: 8px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.opcoes { margin-top: 22px; }

.opcoes__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.opcoes__nome { font-size: .98rem; font-weight: 700; }
.opcoes__regra { font-size: .775rem; color: var(--tinta-2); margin-top: 1px; }

.selo {
    flex: 0 0 auto;
    padding: .2rem .52rem;
    border-radius: var(--r-pilula);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.selo--exigido { background: var(--marca-lavagem-forte); color: var(--marca-forte); }
.selo--livre  { background: var(--papel-fundo); color: var(--tinta-2); }
.selo--pronto { background: var(--positivo-lavagem); color: var(--positivo); }

.opcoes__lista {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--r-carta);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--linha);
    background: var(--linha);
}

.opcao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--papel);
    cursor: pointer;
    transition: background-color var(--t-rapido) ease;
}
.opcao:has(input:checked) { background: var(--marca-lavagem); }
.opcao:has(input:disabled) { opacity: .42; cursor: not-allowed; }

.opcao__nome { font-size: .89rem; font-weight: 500; line-height: 1.3; }
.opcao__descricao {
    margin-top: 2px;
    font-size: .765rem;
    line-height: 1.35;
    color: var(--tinta-3);
    overflow-wrap: anywhere;
}
.opcao__preco {
    font-size: .82rem;
    font-weight: 700;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.opcao__preco--gratis { color: var(--positivo); }

/* Marcador desenhado a mao: o controle nativo nao aceita a cor da marca de
   forma consistente entre iOS e Android. */
.opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.opcao__marca {
    width: 21px; height: 21px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1.5px var(--linha-forte);
    color: var(--sobre-marca);
    transition: background-color var(--t-rapido) var(--mov-fisico),
                box-shadow var(--t-rapido) var(--mov-fisico);
}
.opcao__marca--unica { border-radius: 50%; }
.opcao__marca svg { opacity: 0; transform: scale(.5); transition: all var(--t-rapido) var(--mov-fisico); }
.opcao input:checked ~ .opcao__marca {
    background: var(--marca);
    box-shadow: inset 0 0 0 1.5px var(--marca);
}
.opcao input:checked ~ .opcao__marca svg { opacity: 1; transform: none; }
.opcao input:focus-visible ~ .opcao__marca { box-shadow: inset 0 0 0 1.5px var(--marca), 0 0 0 4px var(--marca-anel); }

/* Contador de quantidade */
.contador {
    display: inline-grid;
    grid-template-columns: 40px 46px 40px;
    align-items: center;
    border-radius: var(--r-pilula);
    background: var(--papel-fundo);
    padding: 4px;
}
.contador__botao {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-carta);
    transition: transform var(--t-rapido) var(--mov-fisico), opacity var(--t-rapido) ease;
}
.contador__botao:active { transform: scale(.9); }
.contador__botao:disabled { opacity: .35; box-shadow: none; background: transparent; }
.contador__valor {
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.contador__campo {
    min-width: 64px;
    display: grid;
    grid-template-columns: minmax(36px, 1fr) auto;
    align-items: baseline;
    gap: 3px;
    padding: 0 6px;
    color: var(--tinta-2);
    font-size: .72rem;
    font-weight: 700;
}
.contador__entrada {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tinta);
    text-align: right;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.contador__entrada:focus,
.contador__entrada:focus-visible { box-shadow: none; outline: 0; }

/* O número da quantidade é um campo de verdade: tem caixa, borda e cursor de
   texto, para ninguém achar que só dá para usar o − e o +. */
.contador__campo {
    min-height: 40px;
    margin: 0 6px;
    padding: 0 10px;
    border: 1.5px solid var(--linha-forte);
    border-radius: 12px;
    background: var(--papel);
    cursor: text;
    transition: border-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.contador__campo:hover { border-color: var(--marca-borda); }
.contador__campo:focus-within { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-anel); }
.contador__campo .contador__entrada { font-size: 1.3rem; font-weight: 800; text-align: center; }
.contador__campo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.contador__campo .contador__entrada { line-height: 1; }
.contador__unidade { color: var(--tinta-2); font-size: .78rem; font-weight: 700; }
.quantidade-compra { display: grid; justify-items: center; gap: 7px; }
.quantidade-compra .contador { grid-template-columns: 40px minmax(96px, auto) 40px; }
.quantidade-previa { max-width: 250px; color: var(--tinta-2); font-size: .68rem; text-align: center; line-height: 1.25; }
.visualmente-oculto { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

/* ---------------------------------------------------------------------------
   14. Botoes
   ------------------------------------------------------------------------ */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 13px 20px;
    border-radius: var(--r-campo);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.005em;
    text-decoration: none;
    transition: transform var(--t-rapido) var(--mov-fisico),
                background-color var(--t-rapido) ease,
                box-shadow var(--t-rapido) ease;
}
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .55; pointer-events: none; }
.botao--largo { width: 100%; }

.botao--marca {
    background: var(--marca);
    color: var(--sobre-marca);
    box-shadow: var(--sombra-marca);
}
.botao--suave {
    background: var(--marca-lavagem);
    color: var(--marca-forte);
}
.botao--contorno {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 0 0 1px var(--linha-forte);
}
.botao--enviar {
    background: #128C4A;
    color: #fff;
    box-shadow: 0 2px 5px -2px rgba(18, 140, 74, .4),
                0 12px 22px -12px rgba(18, 140, 74, .55);
}

/* O preco viaja junto com o rotulo do botao, alinhado a direita. */
.botao__preco {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    opacity: .92;
}

.girando {
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: girar 640ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   15. Formulario do pedido
   ------------------------------------------------------------------------ */
.campo { margin-top: 12px; }

.campo__rotulo {
    display: block;
    margin-bottom: 5px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tinta-2);
}

.campo__entrada,
.campo__lista {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--r-campo);
    background: var(--papel-fundo);
    box-shadow: inset 0 0 0 1px transparent;
    font-size: 16px;
    font-weight: 500;
    transition: box-shadow var(--t-rapido) ease, background-color var(--t-rapido) ease;
    -webkit-appearance: none;
    appearance: none;
}
.campo__entrada::placeholder { color: var(--tinta-3); font-weight: 400; }
.campo__entrada:focus,
.campo__lista:focus {
    outline: 0;
    background: var(--papel);
    box-shadow: inset 0 0 0 1px var(--marca-borda), 0 0 0 4px var(--marca-anel);
}
.campo__entrada[aria-invalid="true"],
.campo__lista[aria-invalid="true"] {
    box-shadow: inset 0 0 0 1.5px var(--alerta);
}
.campo__entrada:read-only { color: var(--tinta-2); }

/* Seta propria: a nativa muda de forma em cada sistema e denuncia o select. */
.campo__lista {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5' stroke='%23000' stroke-opacity='.45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.campo__erro {
    display: none;
    margin-top: 5px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--alerta);
}
.campo.tem-erro .campo__erro { display: block; }

.malha { display: grid; gap: 10px; }
.malha--dupla { grid-template-columns: 1fr 1fr; }

.grupo-campos { margin-top: 20px; }
.grupo-campos__titulo {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Alternador entrega / retirada */
.alternador {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-campo);
    background: var(--papel-fundo);
}
.alternador__opcao { position: relative; }
.alternador__opcao input { position: absolute; opacity: 0; pointer-events: none; }
.alternador__face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 11px 8px;
    border-radius: 11px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tinta-2);
    cursor: pointer;
    transition: all var(--t-rapido) var(--mov-fisico);
}
.alternador__opcao input:checked ~ .alternador__face {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-carta);
}
.alternador__opcao input:focus-visible ~ .alternador__face {
    box-shadow: 0 0 0 3px var(--marca-anel);
}

.nota {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--r-carta);
    background: var(--marca-lavagem);
    font-size: .845rem;
    line-height: 1.45;
    color: var(--tinta);
}
.nota strong { font-weight: 700; }
.nota__link {
    font-weight: 700;
    color: var(--marca-forte);
    text-underline-offset: 3px;
    white-space: nowrap;
}
.nota svg { flex: 0 0 auto; margin-top: 2px; color: var(--marca-forte); }

/* ---------------------------------------------------------------------------
   16. Itens da sacola
   ------------------------------------------------------------------------ */
.linha-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px 0;
    box-shadow: 0 1px 0 var(--linha);
}
.linha-item:last-of-type { box-shadow: none; }

.linha-item__nome { font-size: .93rem; font-weight: 600; line-height: 1.3; }
.linha-item__extras {
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    font-size: .785rem;
    line-height: 1.45;
    color: var(--tinta-2);
}
.linha-item__extras li::before { content: "+ "; color: var(--tinta-3); }
.linha-item__obs {
    margin-top: 5px;
    font-size: .78rem;
    font-style: italic;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}
.linha-item__acoes {
    display: flex;
    gap: 14px;
    margin-top: 9px;
}
.linha-item__acao {
    padding: 2px 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--marca-forte);
    transition: color var(--t-rapido) ease;
}
.linha-item__acao--sair { color: var(--tinta-3); }
.linha-item__acao--sair:hover { color: var(--alerta); }

.linha-item__lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.linha-item__preco { font-size: .95rem; white-space: nowrap; }
.linha-item__medida { margin: 3px 0 0; color: var(--tinta-2); font-size: .72rem; }

.contador--miudo { grid-template-columns: 30px 34px 30px; padding: 3px; }
.contador--miudo .contador__botao { width: 30px; height: 30px; }
.contador--miudo .contador__valor { font-size: .88rem; }
.contador--miudo { grid-template-columns: 30px 64px 30px; }
.contador__valor--editavel {
    width: 58px;
    min-width: 0;
    height: 30px;
    margin: 0 3px;
    padding: 0 2px;
    border: 1.5px solid var(--linha-forte);
    border-radius: 9px;
    background: var(--papel);
    color: var(--tinta);
    font-family: inherit;
    cursor: text;
    outline: 0;
}
.contador__valor--editavel:focus-visible { outline: 0; }
.contador__valor--editavel:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-anel); }

/* O iPhone 16 Pro Max tem viewport CSS de 440px. O limite anterior de 430px
   deixava o grid inline do rodape em duas colunas: o contador consumia quase
   toda a largura e o botao de adicionar ficava espremido/cortado. */
@media (max-width: 480px) {
    .folha__rodape .malha--dupla {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .quantidade-compra { width: 100%; }
    .folha__rodape [data-confirmar] {
        min-width: 0;
        min-height: 48px;
        padding: 12px 16px;
    }
    .folha__rodape [data-confirmar] [data-rotulo] { min-width: 0; }
    .folha__rodape .botao__preco { white-space: nowrap; }
}

.conta { margin-top: 18px; }
.conta__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .89rem;
    color: var(--tinta-2);
}
.conta__linha span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); }
.conta__linha--gratis span:last-child { color: var(--positivo); }
.conta__linha--desconto span:last-child { color: var(--positivo); font-weight: 800; }
.conta__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 13px;
    box-shadow: inset 0 1px 0 var(--linha);
    font-size: .95rem;
    font-weight: 700;
}
.conta__total .preco { font-size: 1.34rem; }

.cupom-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.cupom-form input { min-width:0; min-height:48px; padding:.7rem .85rem; border:1px dashed var(--marca); border-radius:13px; color:var(--tinta); background:var(--piso); outline:0; font:800 .82rem/1 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.cupom-form input:focus { border-style:solid; box-shadow:0 0 0 4px rgba(var(--marca-rgb),.12); }
.cupom-form button { padding:0 1rem; border:0; border-radius:13px; color:var(--sobre-marca); background:var(--marca); font-weight:800; }
.cupom-form button.is-loading { cursor:wait; opacity:.72; }
.cupom-retorno { min-height:1rem; margin:.45rem 0 0; color:var(--alerta); font-size:.74rem; }
.cupom-aplicado { position:relative; isolation:isolate; display:grid; grid-template-columns:38px minmax(0,1fr) 36px; align-items:center; gap:11px; overflow:hidden; padding:.7rem .75rem; border:1px solid color-mix(in srgb,var(--positivo),transparent 35%); border-radius:13px; background:color-mix(in srgb,var(--positivo),transparent 92%); animation:cupom-entra .48s cubic-bezier(.2,.85,.35,1.2) both; }
.cupom-aplicado::after { content:""; position:absolute; z-index:-1; inset:-40% auto -40% -35%; width:22%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:cupom-brilho .8s .16s ease-out both; }
.cupom-aplicado__selo { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:var(--positivo); box-shadow:0 5px 16px color-mix(in srgb,var(--positivo),transparent 68%); animation:cupom-check .42s .12s cubic-bezier(.2,.9,.35,1.35) both; }
.cupom-aplicado__selo svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cupom-aplicado__texto { display:grid; min-width:0; line-height:1.15; }
.cupom-aplicado__texto small { color:var(--positivo); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.cupom-aplicado__texto strong { overflow:hidden; margin-top:.1rem; font-family:ui-monospace,monospace; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; }
.cupom-aplicado__texto em { margin-top:.12rem; color:var(--tinta-2); font-size:.7rem; font-style:normal; }
.cupom-aplicado button { width:36px; height:36px; border:0; border-radius:50%; color:var(--tinta-2); background:transparent; font-size:1.4rem; transition:color .18s,background-color .18s; }
.cupom-aplicado button:hover,.cupom-aplicado button:focus-visible { color:var(--tinta); background:color-mix(in srgb,var(--positivo),transparent 86%); }
@keyframes cupom-entra { from{opacity:0;transform:translateY(8px) scale(.94)} 65%{opacity:1;transform:translateY(-1px) scale(1.012)} to{opacity:1;transform:none} }
@keyframes cupom-check { from{opacity:0;transform:scale(.35) rotate(-20deg)} to{opacity:1;transform:none} }
@keyframes cupom-brilho { from{left:-35%} to{left:125%} }
@media (prefers-reduced-motion:reduce) { .cupom-aplicado,.cupom-aplicado::after,.cupom-aplicado__selo { animation:none; } }
.pix-pedido { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:18px; background:rgba(12,8,5,.84); backdrop-filter:blur(10px); }
.pix-pedido__cartao { width:min(100%,420px); padding:24px; text-align:center; color:var(--tinta); background:var(--piso); border:1px solid var(--linha); border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.pix-pedido__cartao h2{margin:.55rem 0 .35rem;font-size:1.45rem}.pix-pedido__cartao p{margin:0 0 1rem;color:var(--tinta-2)}.pix-pedido__selo{display:inline-flex;padding:.35rem .6rem;border-radius:999px;color:var(--sobre-marca);background:var(--marca);font-size:.72rem;font-weight:800}.pix-pedido__qr{display:grid;place-items:center;width:244px;height:244px;margin:0 auto 1rem;padding:12px;border-radius:18px;background:#fff}.pix-pedido__qr img,.pix-pedido__qr canvas{max-width:100%;height:auto}.pix-pedido__fechar{margin-top:.75rem;padding:.5rem 1rem;border:0;color:var(--tinta-2);background:transparent;font-weight:700}
.pix-pedido__copia{display:block;margin:0 0 .65rem;text-align:left}.pix-pedido__copia span{display:block;margin-bottom:.3rem;font-size:.75rem;font-weight:800;color:var(--tinta-2)}.pix-pedido__copia textarea{width:100%;resize:none;padding:.65rem;border:1px solid var(--linha);border-radius:10px;color:var(--tinta-2);background:var(--piso-2);font:600 .72rem/1.3 monospace}.pix-pedido__cartao [data-pix-copiar]{margin-bottom:.55rem}

.sacola-vazia { padding: 42px 12px; text-align: center; color: var(--tinta-2); }

/* Local da entrega (modo por distância). O cliente não vê zonas: diz onde
   está (GPS ou marcação no mapa), confere o pino e recebe o preço
   calculado pelo servidor. */
.local { margin-bottom: 12px; }
/* `hidden` vence o display das classes (.malha é grid): sem isso o bloco some
   só no atributo e continua na tela. */
.local [hidden], .local__campos [hidden], .local__campos[hidden] { display: none !important; }
.local__gps {
    display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 15px; border: 0; border-radius: var(--r-carta);
    background: var(--marca); color: var(--sobre-marca); text-align: left; cursor: pointer;
    box-shadow: var(--sombra-marca); transition: transform var(--t-rapido) var(--mov-fisico);
}
.local__gps:active { transform: scale(.985); }
.local__gps:disabled { cursor: wait; opacity: .82; }
.local__gps.is-buscando .local__gps-icone { animation: local-pulso 1.1s ease-in-out infinite; }
.local__gps-icone { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.sobre-marca-escura .local__gps-icone { background: rgba(0, 0, 0, .1); }
.local__gps-texto strong { display: block; font: 700 1rem/1.2 var(--face-titulo); letter-spacing: -.01em; }
.local__gps-texto small { display: block; margin-top: 2px; font-size: .76rem; opacity: .82; }
.local__manual { display: block; width: 100%; margin-top: 9px; padding: 10px 14px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: transparent; color: var(--tinta); font-size: .8rem; font-weight: 700; cursor: pointer; }
.local__achado { overflow: hidden; border: 1px solid var(--linha); border-radius: var(--r-carta); background: var(--papel); }
.local__mapa { height: 190px; background: var(--papel-fundo); z-index: 0; transition: height var(--t-base) var(--mov-fisico); }
.local__mapa.is-minimizado { height: 0; }
/* Palco do mapa: ferramentas por cima, tela cheia para o ajuste fino. */
.local__palco { position: relative; }
.local__palco.is-minimizado .local__ferramentas, .local__palco.is-minimizado .local__cheio-topo { display: none; }
.local__ferramentas {
    position: absolute; top: 10px; right: 10px; z-index: 900;
    display: grid; gap: 1px; overflow: hidden; border-radius: 12px;
    background: var(--linha); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.local__ferramentas button {
    display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0;
    background: var(--papel); color: var(--tinta); cursor: pointer;
}
.local__ferramentas button:hover { background: var(--papel-fundo); }
.local__ferramentas button:focus-visible { outline: 2px solid var(--marca); outline-offset: -3px; }
.local__ferramentas [aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }
/* Pequeno, o mapa mostra só o essencial: tela cheia e satélite. */
.local__achado:not(.is-tela-cheia) .local__ferramentas [data-mapa-zoom],
.local__achado:not(.is-tela-cheia) .local__ferramentas [data-mapa-rota] { display: none; }
.local__ico-fechar, .is-tela-cheia .local__ico-abrir { display: none; }
.is-tela-cheia .local__ico-fechar { display: contents; }
.local__cheio-topo, .local__confirmar { display: none; }
.local__mapa--satelite .leaflet-tile-pane { filter: none; }

html.mapa-cheio { overflow: hidden; }
html.mapa-cheio .folha__painel { transform: none !important; will-change: auto; }
.local__achado.is-tela-cheia {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: mapa-cheio-entra 220ms var(--mov-fisico);
}
.is-tela-cheia .local__palco { flex: 1 1 auto; min-height: 0; }
.is-tela-cheia .local__mapa, .is-tela-cheia .local__mapa.is-minimizado { height: 100%; }
.is-tela-cheia .local__ferramentas { top: calc(66px + env(safe-area-inset-top)); }
.is-tela-cheia .local__ferramentas button { width: 44px; height: 42px; }
.is-tela-cheia .local__cheio-topo {
    position: absolute; top: 0; left: 0; right: 0; z-index: 900;
    display: grid; gap: 2px; padding: calc(12px + env(safe-area-inset-top)) 16px 14px;
    background: linear-gradient(var(--papel) 55%, transparent); color: var(--tinta); pointer-events: none;
}
.local__cheio-topo strong { font: 800 1.02rem/1.2 var(--face-titulo); letter-spacing: -.01em; }
.local__cheio-topo small { color: var(--tinta-2); font-size: .76rem; font-weight: 600; }
.is-tela-cheia [data-local-mapa], .is-tela-cheia .local__refazer { display: none; }
.is-tela-cheia .local__confirmar {
    display: block; margin: 0 10px 12px; padding: 13px 16px; border: 0; border-radius: var(--r-pilula);
    background: var(--marca); color: var(--sobre-marca); font: 800 .95rem/1 var(--face-corpo); cursor: pointer;
}
@keyframes mapa-cheio-entra { from { opacity: 0; transform: scale(.985); } }
.local__loja {
    display: grid; place-items: center; width: 40px; height: 22px; border-radius: var(--r-pilula);
    background: var(--tinta); color: var(--piso); font: 800 .62rem/1 var(--face-corpo); letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.local__refazer { display: block; margin: -2px auto 10px; padding: 4px 10px; border: 0; background: none; color: var(--tinta-2); font-size: .74rem; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Busca por endereço dentro do mapa de entrega: permite ir direto à rua e
   ajustar o ponto com precisão, sem depender da permissão de GPS. */
.local__palco:not(.is-minimizado) .local__cheio-topo,.is-tela-cheia .local__cheio-topo{position:absolute;top:0;left:0;right:0;z-index:850;display:grid;gap:5px;padding:9px 12px 16px;background:linear-gradient(var(--papel) 92%,transparent);color:var(--tinta);pointer-events:none}
.is-tela-cheia .local__cheio-topo{padding:calc(12px + env(safe-area-inset-top)) 16px 18px;background:linear-gradient(var(--papel) 92%,transparent)}
.local__busca-endereco{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:calc(100% - 52px);max-width:680px;margin-top:8px;pointer-events:auto}
.local__busca-endereco input{display:block;width:100%;min-width:0;height:44px;padding:0 14px;border:1px solid var(--linha-forte);border-radius:12px;background:var(--papel);color:var(--tinta);font:600 .9rem/1 var(--face-corpo);box-shadow:0 4px 16px #1d140d17}
.local__busca-endereco input:focus-visible{outline:3px solid color-mix(in srgb,var(--marca) 36%,transparent);outline-offset:1px}
.local__busca-endereco button{min-width:88px;min-height:44px;padding:0 15px;border:0;border-radius:12px;background:var(--marca);color:var(--sobre-marca);font:800 .86rem/1 var(--face-corpo);white-space:nowrap;cursor:pointer;pointer-events:auto}
.local__busca-endereco button:disabled{opacity:.65;cursor:wait}
.local__busca-resultados{position:absolute;top:calc(100% - 4px);left:12px;width:min(680px,calc(100% - 64px));max-height:min(34svh,300px);overflow:auto;border:1px solid var(--linha);border-radius:12px;background:var(--papel);color:var(--tinta);box-shadow:0 12px 32px #1d140d25;pointer-events:auto}
.local__busca-resultados[hidden]{display:none}
.local__busca-resultados button{display:grid;gap:3px;width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--linha);background:transparent;color:inherit;text-align:left;cursor:pointer}
.local__busca-resultados button:last-child{border-bottom:0}
.local__busca-resultados button:hover,.local__busca-resultados button:focus-visible{background:var(--papel-fundo);outline:0}
.local__busca-resultados strong{font-size:.86rem;line-height:1.25}
.local__busca-resultados span,.local__busca-resultados p{margin:0;font-size:.74rem;color:var(--tinta-2)}
@media(max-width:600px){.local__cheio-topo{padding-inline:10px!important}.local__busca-endereco{grid-template-columns:minmax(0,1fr) auto;width:calc(100% - 46px);max-width:none;gap:7px;margin-top:7px}.local__busca-endereco input{height:42px;padding-inline:12px;font-size:.86rem}.local__busca-endereco button{min-width:70px;min-height:42px;padding-inline:12px}.local__busca-resultados{left:10px;width:calc(100% - 58px)}}
.local__ajuda { display: grid; gap: 6px; margin-top: 10px; padding: 12px 13px; border-radius: var(--r-carta); background: rgba(180, 83, 27, .1); color: var(--alerta); font-size: .8rem; line-height: 1.4; }
.local__ajuda strong { font-size: .88rem; }
.local__ajuda span { color: var(--tinta-2); }
.local__ajuda div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.local__ajuda button { padding: 8px 13px; border: 0; border-radius: var(--r-pilula); background: var(--tinta); color: var(--piso); font-size: .78rem; font-weight: 700; cursor: pointer; }
.local__ajuda button + button { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.local__cotacao b { display: block; font-weight: 700; }
.local__cotacao small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600; opacity: .85; }
.local__mapa--escuro .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
.local__mapa .leaflet-control-attribution { font-size: 8px; background: rgba(255, 255, 255, .6); }
.local__marcador {
    position: relative; display: block; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--marca); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.local__marcador::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.local__cartao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 13px 10px; }
.local__pino { width: 10px; height: 10px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 4px var(--marca-anel); }
.local__texto strong { display: block; overflow: hidden; color: var(--tinta); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.local__texto small { display: block; color: var(--tinta-2); font-size: .75rem; }
.local__trocar { padding: 6px 11px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: none; color: var(--tinta); font-size: .76rem; font-weight: 700; cursor: pointer; }
.local__cotacao {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 10px 10px; padding: 11px 13px;
    border-radius: 12px; background: var(--papel-fundo); color: var(--tinta-2); font-size: .82rem; font-weight: 600; line-height: 1.3;
}
.local__cotacao:empty { display: none; }
.local__cotacao strong { color: var(--tinta); font: 800 1.15rem/1 var(--face-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.local__cotacao.is-carregando { justify-content: flex-start; }
.local__cotacao.is-manual { justify-content: flex-start; border: 1px dashed var(--linha-forte); }
.local__cotacao.is-ok { background: var(--positivo-lavagem); color: var(--positivo); }
.local__cotacao.is-ok strong { color: var(--positivo); }
.local__cotacao.is-fora { background: rgba(180, 83, 27, .1); color: var(--alerta); }
.local__cotacao button { flex: 0 0 auto; padding: 7px 12px; border: 0; border-radius: var(--r-pilula); background: var(--tinta); color: var(--piso); font-size: .76rem; font-weight: 700; cursor: pointer; }
.local__campos { margin-bottom: 4px; }
.local__campos .malha .campo { margin-bottom: 0; }
.malha--tripla { grid-template-columns: 1fr .8fr .8fr; }
/* Número com a opção S/N (casa sem número) dentro do próprio campo. */
.local__numeracao { margin-bottom: 10px; align-items: start; }
.local__numeracao .campo { margin-bottom: 0; }
.local__numero { position: relative; }
.local__numero .campo__entrada { padding-right: 58px; }
.local__numero .campo__entrada:disabled { opacity: .6; }
.local__sn { position: absolute; top: 8px; right: 7px; margin: 0; cursor: pointer; }
.local__sn input { position: absolute; opacity: 0; pointer-events: none; }
.local__sn span {
    display: grid; place-items: center; height: 32px; padding: 0 9px; border-radius: 9px;
    box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--tinta-2); font-size: .72rem; font-weight: 800; letter-spacing: .03em;
}
.local__sn input:checked + span { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.local__sn input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (max-width: 380px) {
    .malha--tripla { grid-template-columns: 1fr 1fr; }
    .malha--tripla input:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .local__gps, .local__mapa { transition: none; }
    .local__achado.is-tela-cheia { animation: none; }
    .local__gps.is-buscando .local__gps-icone { animation: none; }
}
@keyframes local-pulso { 50% { transform: scale(.88); opacity: .65; } }

/* ---------------------------------------------------------------------------
   16b. Visor de imagem
   ------------------------------------------------------------------------ */
.visor {
    position: fixed;
    inset: 0;
    /* Acima das folhas (200) e dos avisos (300): quando esta aberto, e a
       unica coisa que interessa na tela. */
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 8, 5, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) ease, visibility var(--t-base) ease;
    -webkit-tap-highlight-color: transparent;
}
.visor.esta-aberto { opacity: 1; visibility: visible; }

.visor__foto {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* Sem corte nenhum: e a foto inteira, como o lojista enviou. */
    object-fit: contain;
    border-radius: 10px;
    transform: scale(.94);
    transition: transform var(--t-base) var(--mov-fisico);
}
.visor.esta-aberto .visor__foto { transform: none; }

.visor__fechar {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.visor__fechar:active { transform: scale(.9); }

/* ---------------------------------------------------------------------------
   17. Avisos flutuantes
   ------------------------------------------------------------------------ */
.avisos {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 300;
    width: min(420px, calc(100vw - 28px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-carta);
    background: rgba(26, 17, 13, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3),
                0 18px 36px -16px rgba(0, 0, 0, .55);
    animation: aviso-entra 320ms var(--mov-fisico);
}
.aviso.esta-saindo { animation: aviso-sai 200ms var(--mov-saida) forwards; }
.aviso__icone {
    flex: 0 0 auto;
    width: 21px; height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #35D07F;
    color: #0B2E1C;
}
.aviso--erro .aviso__icone { background: #FF6B4A; color: #3B1006; }

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes aviso-sai {
    to { opacity: 0; transform: translateY(8px) scale(.98); }
}
/* ---------------------------------------------------------------------------
   19. Telas maiores
   A vitrine (capa, trilha, cartoes, rodape) tem os proprios pontos de quebra
   em menu-cinematico.css, que e a camada dona do catalogo. Aqui ficam apenas
   os ajustes da folha, da sacola e do formulario, que continuam sendo desta
   camada de interacao.
   ------------------------------------------------------------------------ */
@media (min-width: 600px) {
    :root { --respiro: 24px; }
}

@media (max-width: 420px) {
    .sacola__botao { gap: 9px; padding-inline: 11px 13px; }
}

@media (max-width: 350px) {
    :root { --respiro: 12px; }
    .sacola__acao { display: none; }
    .folha__corpo { padding-inline: 14px; }
    .folha__rodape { padding-inline: 14px; }
    .malha--dupla { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
    body { font-size: 15.5px; }

    /* No desktop a folha deixa de ser gaveta e vira dialogo centrado: subir do
       rodape numa tela de 1400px seria imitar o celular sem motivo. */
    .folha { align-items: center; padding: 24px; }
    .folha__painel {
        border-radius: 22px;
        max-height: 86dvh;
        transform: translateY(18px) scale(.98);
        opacity: 0;
        transition: transform 260ms var(--mov-fisico), opacity 200ms ease;
    }
    .folha.esta-aberta .folha__painel { transform: none; opacity: 1; }
    .folha__puxador { display: none; }
    .folha__corpo { padding-top: 20px; }
    .folha__foto { margin-top: -20px; border-radius: 22px 22px 0 0; }

    .produto__add:hover { background: var(--marca-forte); }
    .botao--marca:hover { background: var(--marca-forte); }
    .botao--contorno:hover { background: var(--surface-2); }
}

/* ---------------------------------------------------------------------------
   20. Preferencias do sistema
   ------------------------------------------------------------------------ */
@media (hover: none) {
    .produto:hover, .destaque:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .folha__painel, .sacola { transform: none !important; }
    .folha__painel { opacity: 1 !important; }
}

@media print {
    .sacola, .folha, .avisos, .trilha, .busca { display: none !important; }
    body { padding-bottom: 0; background: #fff; }
}

/* Busca de bairro: nomes e cidade; cobrança no resumo do pedido. */
.bairro-busca { position: relative; }
.bairro-busca > label { display: block; margin-bottom: 4px; font-weight: 700; }
.bairro-busca__cidade { margin: 0 0 10px; color: var(--tinta-2); font-size: 13px; }
.bairro-busca__entrada { position: relative; display: flex; align-items: center; }
.bairro-busca__entrada > svg { position: absolute; left: 14px; color: var(--tinta-2); pointer-events: none; }
.bairro-busca__entrada input { padding-left: 42px; padding-right: 46px; min-height: 48px; width: 100%; }
.bairro-busca__entrada input::-webkit-search-cancel-button { display: none; }
.bairro-busca__entrada button { position: absolute; right: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tinta-2); font-size: 24px; border-radius: 8px; cursor: pointer; }
.bairro-busca__lista { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; padding: 5px; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-carta); }
.bairro-busca__opcao { padding: 12px; min-height: 48px; border-radius: 8px; cursor: pointer; }
.bairro-busca__opcao span { display: block; font-size: 14px; font-weight: 650; color: var(--tinta); }
.bairro-busca__opcao small { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 12px; }
.bairro-busca__opcao:hover, .bairro-busca__opcao.is-focado, .bairro-busca__opcao[aria-selected=true] { background: var(--marca-lavagem); }
.bairro-busca__opcao--outro { border-top: 1px solid var(--linha); margin-top: 4px; border-radius: 0 0 8px 8px; }
.bairro-busca__ajuda, .bairro-busca__vazio { color: var(--tinta-2); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.bairro-busca__vazio { padding: 8px 12px; margin: 0; }
.bairro-busca__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bairro-escolha > select[hidden], .bairro-busca [hidden] { display: none !important; }
.bairro-busca button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.cupom-telefone{margin-bottom:12px}.cupom-telefone[hidden]{display:none}

/* ---------------------------------------------------------------------------
   Categorias em bolinhas (foto da categoria ou do primeiro produto)
   Ficam acima da trilha de categorias: a trilha continua marcando a seção
   visível ao rolar; as bolinhas são o atalho visual de entrada.
   ------------------------------------------------------------------------ */
.cat-bolinhas { max-width: var(--largura); margin: 18px auto 4px; padding: 0 var(--respiro); }
.cat-bolinhas__lista {
    display: flex; gap: 14px; margin: 0; padding: 6px 2px 10px; list-style: none;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cat-bolinhas__lista::-webkit-scrollbar { display: none; }
.cat-bolinhas__lista > li { flex: 0 0 auto; scroll-snap-align: start; animation: cat-bolinha-entra .5s var(--mov-fisico) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes cat-bolinha-entra { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.cat-bolinha { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 88px; color: var(--tinta); text-decoration: none; }
.cat-bolinha__foto {
    width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: var(--marca-lavagem); color: var(--marca); font: 700 1.6rem/1 var(--face-titulo);
    box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--marca-anel), var(--sombra-carta);
    transition: transform var(--t-base) var(--mov-fisico), box-shadow var(--t-base) var(--mov-fisico);
}
.cat-bolinha__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--mov-fisico); }
.cat-bolinha__nome { max-width: 100%; font: 600 .82rem/1.2 var(--face-corpo); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cat-bolinha:hover .cat-bolinha__foto, .cat-bolinha:focus-visible .cat-bolinha__foto { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--marca), var(--sombra-alta); }
.cat-bolinha:hover .cat-bolinha__foto img { transform: scale(1.08); }
.cat-bolinha:focus-visible { outline: none; }
.cat-bolinha:focus-visible .cat-bolinha__nome { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
    .cat-bolinha { width: 100px; }
    .cat-bolinha__foto { width: 86px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-bolinhas__lista > li { animation: none; }
    .cat-bolinha__foto, .cat-bolinha__foto img { transition: none; }
}
/* Loop: bordas esfumadas; a bolinha de Favoritos é botão e herda o mesmo visual. */
.cat-bolinhas__lista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); scroll-snap-type: none; }
button.cat-bolinha { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.cat-bolinha__foto--icone { color: var(--marca); background: var(--marca-lavagem-forte); }
.cat-bolinha__foto--icone svg { width: 30px; height: 30px; }
.cat-bolinhas__clone { animation: none !important; }
/* Enquadramento escolhido no painel (arrastar e zoom). */
.cat-bolinha__foto img { object-position: var(--foco, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--foco, 50% 50%); }
.cat-bolinha:hover .cat-bolinha__foto img { transform: scale(calc(var(--zoom, 1) * 1.08)); }

/* Janela "Categorias" (botão do rodapé): todas as categorias em grade com foto. */
.cat-janela { width: min(560px, calc(100vw - 24px)); max-height: 82dvh; padding: 0; border: 0; border-radius: var(--r-folha); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-folha); overflow: auto; }
.cat-janela[open] { animation: cat-janela-entra .32s var(--mov-fisico); }
@keyframes cat-janela-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.cat-janela::backdrop { background: rgba(10, 10, 10, .45); backdrop-filter: blur(3px); }
.cat-janela__topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.cat-janela__topo h2 { margin: 0; font: 700 1.2rem/1.2 var(--face-titulo); }
.cat-janela__fechar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--marca-lavagem); color: var(--marca); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cat-janela__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 10px; margin: 0; padding: 18px; list-style: none; }
.cat-janela__grade > li { display: flex; justify-content: center; animation: cat-bolinha-entra .4s var(--mov-fisico) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.cat-janela .cat-bolinha { width: 96px; }
@media (prefers-reduced-motion: reduce) { .cat-janela[open], .cat-janela__grade > li { animation: none; } }