/* ==========================================================================
   Ofertas Frismar — a página pública de promoções
   --------------------------------------------------------------------------
   As cores são as da ARTE das promoções (Promocoes\Arte): o azul do texto, o
   azul de destaque e o vermelho do preço. O cliente que recebeu a arte no
   WhatsApp e abriu o link tem de reconhecer a mesma oferta.

   Movimento, e onde NÃO há movimento — a regra do usuário é usabilidade:
     - busca, categoria e filtro trocam o resultado NA HORA. São ações de
       dezenas de vezes por visita; animar a grade a cada tecla faria a página
       parecer mais lenta do que é.
     - o que entra e sai da tela (barra do pedido, painéis, aviso) entra com
       curva forte de saída e sai mais rápido do que entrou: entrar é o sistema
       mostrando algo; sair é o cliente dispensando, e dispensar não espera.
     - botão afunda um pouco ao ser apertado: é a confirmação de que o toque
       foi ouvido, num celular sem retorno tátil.
   ========================================================================== */

@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    font-display: swap;
    src: url("../promocoes/arte/fontes/open-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 800;
    font-display: swap;
    src: url("../promocoes/arte/fontes/open-sans-latin-800-normal.woff2") format("woff2");
}

:root {
    --azul: #1B2A6B;
    --azul-2: #4057B5;
    --azul-claro: #EEF1FB;
    --vermelho: #E3141B;
    --ambar: #FFA003;
    --fundo: #F4F6FB;
    --cartao: #FFFFFF;
    --linha: #E2E6F1;
    --texto: #17203F;
    --mudo: #5B6582;
    --wa: #128C4B;
    --wa-hover: #0E7A41;

    --raio: 14px;
    --raio-pequeno: 10px;
    --sombra: 0 1px 2px rgba(23, 32, 63, .05), 0 6px 20px rgba(23, 32, 63, .06);
    --sombra-alta: 0 -8px 40px rgba(23, 32, 63, .18);

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-destaque: "Open Sans", var(--fonte);

    /* Curvas de UI fortes: as do CSS padrão são fracas demais e deixam o
       começo do movimento lento justo onde o olho está. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-gaveta: cubic-bezier(0.32, 0.72, 0, 1);

    --topo-altura: 0px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body.travado { overflow: hidden; }

img { display: block; max-width: 100%; }

button, input, select { font: inherit; color: inherit; }

button {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    background: var(--azul-claro);
    color: var(--azul);
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}

.btn:active:not(:disabled) { transform: scale(0.97); }

.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primario { background: var(--azul); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-claro { background: #fff; border-color: var(--linha); }
.btn-largo { width: 100%; }

@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled) { background: #E2E7F8; }
    .btn-primario:hover:not(:disabled) { background: #14205A; }
    .btn-wa:hover:not(:disabled) { background: var(--wa-hover); }
    .btn-claro:hover:not(:disabled) { background: #F7F8FC; border-color: #CDD3E6; }
}

.icone { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   Topo: a marca, a campanha e a busca
   -------------------------------------------------------------------------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--linha);
}

.topo-dentro {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 12px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.marca { height: 30px; width: auto; }

.campanha {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-align: right;
}

.campanha img { height: 44px; width: auto; max-width: 96px; object-fit: contain; }

.campanha strong {
    display: block;
    font-family: var(--fonte-destaque);
    font-weight: 800;
    font-size: 14px;
    color: var(--azul);
    letter-spacing: .02em;
    line-height: 1.15;
}

.campanha span { display: block; font-size: 12px; color: var(--mudo); line-height: 1.2; }

.busca {
    position: relative;
    margin-top: 10px;
}

.busca .icone {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mudo);
    pointer-events: none;
}

.busca input {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 42px;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: var(--fundo);
    /* 16 px: abaixo disso o iPhone dá zoom na página ao tocar no campo. */
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.busca input::-webkit-search-cancel-button { display: none; }

.busca input:focus { border-color: var(--azul-2); background: #fff; box-shadow: 0 0 0 3px rgba(64, 87, 181, .15); }

.busca-limpar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mudo);
    display: grid;
    place-items: center;
}

.busca-limpar[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Categorias: uma linha que rola de lado
   -------------------------------------------------------------------------- */

.categorias {
    position: sticky;
    top: var(--topo-altura);
    z-index: 20;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
}

.categorias-dentro {
    display: flex;
    gap: 8px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding: 16px;
}

.categorias-dentro::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
    color: var(--texto);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.chip small { font-weight: 600; font-size: 12px; color: var(--mudo); }

.chip:active { transform: scale(0.97); }

.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }

@media (hover: hover) and (pointer: fine) {
    .chip:hover:not([aria-pressed="true"]) { border-color: #C5CCE3; background: #FAFBFE; }
}

/* --------------------------------------------------------------------------
   O corpo: filtros ao lado (computador) ou num painel (celular), e a grade
   -------------------------------------------------------------------------- */

.corpo {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 120px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 12px;
}

.contagem { flex: 1; min-width: 0; font-size: 14px; color: var(--mudo); }
.contagem strong { color: var(--texto); }

.barra select {
    height: 40px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6582' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
    font-size: 14px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

.btn-filtros { min-height: 40px; padding: 8px 12px; font-size: 14px; }

.btn-filtros .marcados {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-size: 12px;
}

.btn-filtros .marcados[hidden] { display: none; }

/* --------------------------------------------------------------------------
   A grade de ofertas
   -------------------------------------------------------------------------- */

.grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1280px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    /* Cartão fora da tela não é desenhado: com 150 ofertas, rolar continua
       leve num celular modesto. */
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
    transition: border-color 150ms ease, box-shadow 200ms ease;
}

.card[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
    .card:hover { border-color: #CDD3E6; box-shadow: var(--sombra); }
}

.card-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--linha);
}

.card-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

/* A foto aparece quando terminou de chegar, em vez de surgir aos pedaços. */
.card-foto img.chegou { opacity: 1; }

.card-foto .fotos-varias { display: flex; gap: 4px; width: 100%; height: 100%; align-items: center; }
.card-foto .fotos-varias img { min-width: 0; flex: 1; }

.sem-foto {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--azul-claro), #F8F9FD);
    color: var(--azul-2);
    font-family: var(--fonte-destaque);
    font-weight: 800;
    font-size: clamp(14px, 4vw, 20px);
    text-align: center;
    padding: 12px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.selo {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--vermelho);
    color: #fff;
    font-family: var(--fonte-destaque);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .01em;
}

.selo-pedido {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
}

.selo-pedido[hidden] { display: none; }

.card-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 12px;
}

.card-marca {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--azul-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-nome {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--texto);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.card-meta { font-size: 12px; color: var(--mudo); }

.card-chamada {
    font-family: var(--fonte-destaque);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    color: var(--vermelho);
}

.card-precos { margin-top: auto; padding-top: 6px; }

.preco-de { font-size: 12px; color: var(--mudo); }
.preco-de s { text-decoration-thickness: 1px; }

.preco-por {
    font-family: var(--fonte-destaque);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.1;
    color: var(--vermelho);
    letter-spacing: -.01em;
}

.preco-por small { font-family: var(--fonte); font-weight: 600; font-size: 12px; color: var(--mudo); letter-spacing: 0; }

.card-condicao { font-size: 12px; color: var(--azul-2); font-weight: 600; }

.card-acao { margin-top: 10px; }

.card-acao .btn { width: 100%; min-height: 42px; font-size: 14px; }

.card-acao > * + * { margin-top: 6px; }

.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.esgotado .card-foto img, .esgotado .sem-foto { filter: grayscale(1); opacity: .5; }
.esgotado .preco-por { color: var(--mudo); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   O contador de quantidade (− 2 +)
   -------------------------------------------------------------------------- */

.qtd {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 42px;
    border: 1px solid var(--azul);
    border-radius: var(--raio-pequeno);
    background: #fff;
    overflow: hidden;
}

.qtd button {
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--azul);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform 160ms var(--ease-out), background-color 120ms ease;
}

.qtd button:active { transform: scale(0.92); background: var(--azul-claro); }

.qtd output {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Vazio e rodapé
   -------------------------------------------------------------------------- */

.vazio {
    padding: 48px 16px;
    text-align: center;
    color: var(--mudo);
}

.vazio[hidden] { display: none; }

.vazio strong { display: block; margin-bottom: 6px; color: var(--texto); font-size: 17px; }

.rodape {
    margin-top: 32px;
    padding: 20px 0 8px;
    border-top: 1px solid var(--linha);
    color: var(--mudo);
    font-size: 13px;
}

.rodape p { margin: 0 0 6px; }

.rodape .fones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.rodape .fones a { color: var(--azul); font-weight: 700; text-decoration: none; }

/* --------------------------------------------------------------------------
   A barra do pedido, presa no pé da tela
   -------------------------------------------------------------------------- */

.barra-pedido {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    pointer-events: none;
}

.barra-pedido button {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    min-height: 56px;
    margin: 0 auto;
    padding: 10px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--azul);
    color: #fff;
    box-shadow: 0 10px 30px rgba(27, 42, 107, .35);
    text-align: left;
    /* Entra subindo do pé e some descendo para o mesmo pé: a barra tem um
       lugar, e o movimento diz qual. */
    transform: translateY(0);
    opacity: 1;
    transition: transform 280ms var(--ease-out), opacity 200ms ease-out;
}

.barra-pedido.escondida button {
    transform: translateY(140%);
    opacity: 0;
    transition: transform 200ms var(--ease-out), opacity 150ms ease-in;
}

.barra-pedido.escondida { visibility: hidden; transition: visibility 0s 200ms; }

.barra-pedido button:active { transform: scale(0.98); }

.barra-pedido .contador {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.barra-pedido .resumo { flex: 1; min-width: 0; line-height: 1.2; }
.barra-pedido .resumo small { display: block; font-size: 12px; opacity: .8; }
.barra-pedido .resumo strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.barra-pedido .ver { font-weight: 700; font-size: 14px; }

/* --------------------------------------------------------------------------
   Painéis: o pedido, os filtros (no celular) e as opções de um produto.
   No celular sobem do pé; no computador o pedido entra pela direita.
   -------------------------------------------------------------------------- */

.veu {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(13, 19, 46, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s 200ms;
}

.veu.aberto { opacity: 1; visibility: visible; transition: opacity 240ms ease; }

.painel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    max-height: min(88dvh, 88vh);
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--sombra-alta);
    transform: translateY(100%);
    visibility: hidden;
    /* Fechar é mais rápido que abrir. */
    transition: transform 260ms var(--ease-gaveta), visibility 0s 260ms;
    overscroll-behavior: contain;
}

.painel.aberto {
    transform: translateY(0);
    visibility: visible;
    transition: transform 420ms var(--ease-gaveta), visibility 0s;
}

.painel-alca {
    width: 40px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #D5DAEA;
    flex: none;
}

.painel-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--linha);
    flex: none;
}

.painel-cabeca h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--azul); }

.fechar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mudo);
    transition: transform 160ms var(--ease-out), background-color 150ms ease;
}

.fechar:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) { .fechar:hover { background: var(--fundo); } }

.painel-corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}

.painel-pe {
    flex: none;
    display: grid;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha);
    background: #fff;
}

/* --- o pedido --- */

.linha-pedido {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linha);
}

.linha-pedido:last-child { border-bottom: 0; }

.linha-pedido .nome { font-weight: 600; font-size: 14px; line-height: 1.3; }
.linha-pedido .nome small { display: block; margin-top: 2px; font-weight: 500; color: var(--mudo); font-size: 12px; }
.linha-pedido .valor { text-align: right; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-pedido .qtd { grid-column: 1 / -1; max-width: 168px; height: 38px; }

.total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 0;
}

.total span { color: var(--mudo); font-size: 14px; }
.total strong { font-family: var(--fonte-destaque); font-weight: 800; font-size: 22px; color: var(--azul); font-variant-numeric: tabular-nums; }

.nota { margin: 0; font-size: 12px; color: var(--mudo); }

.campos { display: grid; gap: 8px; margin-top: 12px; }

.campos label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--mudo); }

.campos input {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    background: var(--fundo);
    font-size: 16px;
    outline: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.campos input:focus { border-color: var(--azul-2); background: #fff; }

.direto { font-size: 13px; color: var(--mudo); text-align: center; }
.direto a { color: var(--wa); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* --- os filtros --- */

.filtros-grupo { padding: 6px 0 14px; }
.filtros-grupo h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); }
.filtros-grupo .chips { display: flex; flex-wrap: wrap; gap: 8px; }

.marcas-busca {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    background: var(--fundo);
    font-size: 16px;
    outline: none;
}

.marcas { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }

.marca-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.marca-opcao input { width: 18px; height: 18px; accent-color: var(--azul); flex: none; }
.marca-opcao small { margin-left: auto; color: var(--mudo); }

@media (hover: hover) and (pointer: fine) { .marca-opcao:hover { background: var(--fundo); } }

.alternar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.alternar input { width: 20px; height: 20px; accent-color: var(--azul); }

/* --- as opções de um produto --- */

.opcao {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linha);
}

.opcao:last-child { border-bottom: 0; }

.opcao .nome { font-weight: 600; font-size: 14px; line-height: 1.3; }
.opcao .nome small { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--mudo); }
.opcao .precos { text-align: right; white-space: nowrap; }
.opcao .precos s { display: block; font-size: 12px; color: var(--mudo); }
.opcao .precos strong { font-family: var(--fonte-destaque); font-weight: 800; color: var(--vermelho); font-size: 17px; }
.opcao .controle { grid-column: 1 / -1; }
.opcao .controle .btn, .opcao .controle .qtd { width: 100%; max-width: 200px; min-height: 40px; height: 40px; }
.opcao.esgotada .nome, .opcao.esgotada .precos { opacity: .5; }

.kit-detalhes { margin: 0 0 12px; padding-left: 18px; color: var(--texto); font-size: 14px; }
.kit-chamada { margin: 0 0 8px; font-family: var(--fonte-destaque); font-weight: 800; font-size: 20px; color: var(--vermelho); }

/* --------------------------------------------------------------------------
   O aviso curto ("Texto copiado")
   -------------------------------------------------------------------------- */

.aviso {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 70;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--texto);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    transition: transform 180ms var(--ease-out), opacity 150ms ease, visibility 0s 180ms;
}

.aviso.visivel {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 260ms var(--ease-out), opacity 200ms ease-out, visibility 0s;
}

/* --------------------------------------------------------------------------
   "Em breve" e a prévia do painel
   -------------------------------------------------------------------------- */

.em-breve {
    max-width: 520px;
    margin: 12vh auto 0;
    padding: 32px 20px;
    text-align: center;
}

.em-breve .marca { height: 42px; margin: 0 auto 24px; }
.em-breve h1 { margin: 0 0 8px; font-family: var(--fonte-destaque); font-weight: 800; font-size: 24px; color: var(--azul); }
.em-breve p { margin: 0 0 16px; color: var(--mudo); }
.em-breve .fones { display: grid; gap: 8px; justify-items: center; }

.faixa-previa {
    position: sticky;
    top: 0;
    z-index: 35;
    padding: 8px 16px;
    background: var(--ambar);
    color: #3A2600;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Computador: filtros ao lado, pedido pela direita
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .corpo { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; padding-top: 6px; }

    .btn-filtros { display: none; }

    /* No computador os filtros não são painel: são a coluna da esquerda,
       sempre à vista. Por isso desligam TUDO o que o painel tem de abrir e
       fechar — inclusive a opacidade da regra de menos movimento, que sem esta
       linha deixava a coluna invisível para quem tem animação desligada no
       sistema (medido: opacity 0, numa máquina com Windows sem animações). */
    .painel.filtros {
        position: sticky;
        top: calc(var(--topo-altura) + 66px);
        bottom: auto;
        z-index: 1;
        align-self: start;
        max-height: calc(100vh - var(--topo-altura) - 86px);
        margin-top: 14px;
        border: 1px solid var(--linha);
        border-radius: var(--raio);
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .painel.filtros .painel-alca, .painel.filtros .fechar, .painel.filtros .painel-pe .ver-resultado { display: none; }

    .painel.pedido, .painel.opcoes {
        left: auto;
        top: 0;
        width: 440px;
        max-height: none;
        border-radius: 20px 0 0 20px;
        transform: translateX(100%);
    }

    .painel.pedido.aberto, .painel.opcoes.aberto { transform: translateX(0); }
    .painel.pedido .painel-alca, .painel.opcoes .painel-alca { display: none; }

    .barra-pedido { left: auto; right: 24px; bottom: 24px; padding: 0; width: 380px; }
}

/* --------------------------------------------------------------------------
   Menos movimento: o que se move passa a só aparecer e sumir
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .painel, .painel.aberto,
    .barra-pedido button, .barra-pedido.escondida button,
    .aviso, .aviso.visivel {
        transform: none !important;
    }

    .painel { opacity: 0; transition: opacity 160ms ease, visibility 0s 160ms; }
    .painel.aberto { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
    .aviso { left: 16px; right: 16px; max-width: none; }

    .btn:active, .chip:active, .qtd button:active, .fechar:active, .barra-pedido button:active { transform: none; }
}