/* =====================================================================
   Catálogo público. Usa as cores e o traço da página inicial (home.css),
   mas com o layout de prateleira: foto, preço e botão de adicionar.
   ===================================================================== */

/* O carrinho, a gaveta e os contadores nascem com [hidden]. Sem esta regra os
   display:flex daqui de baixo ganhariam do atributo e tudo apareceria aberto. */
[hidden] { display: none !important; }

.cat-topo {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(251,247,240,.94);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--traco);
}

.cat-topo .h-cont {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-block: 14px;
    flex-wrap: wrap;
}

.cat-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }

.cat-marca img {
    width: 48px; height: 48px;
    border: 2px solid var(--traco);
    border-radius: 13px;
    object-fit: contain;
    background: #fff;
    box-shadow: 3px 3px 0 var(--traco);
}

.cat-inicial {
    width: 48px; height: 48px;
    border: 2px solid var(--traco);
    border-radius: 13px;
    background: var(--verde);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 900;
    box-shadow: 3px 3px 0 var(--traco);
}

.cat-marca strong { display: block; font-size: 17px; letter-spacing: -.015em; }
.cat-marca span { display: block; font-size: 12.5px; color: var(--tinta-2); }

.cat-busca { display: flex; margin-left: auto; flex: 1 1 240px; max-width: 380px; }

.cat-busca input {
    flex: 1;
    padding: 11px 14px;
    border: 2px solid var(--traco);
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: var(--papel);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--tinta);
    min-width: 0;
}

.cat-busca input:focus { outline: none; background: #fff; }

.cat-busca button {
    border: 2px solid var(--traco);
    border-radius: 0 12px 12px 0;
    background: var(--verde);
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
    font-size: 15px;
}

.cat-recado {
    background: var(--amarelo);
    border-bottom: 2px solid var(--traco);
    padding: 11px 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta);
}

/* --------------------------------------------------------- Categorias */
.cat-categorias {
    border-bottom: 2px solid var(--traco);
    background: var(--papel-2);
    overflow-x: auto;
}

.cat-categorias .h-cont { display: flex; gap: 8px; padding-block: 12px; width: max-content; min-width: 100%; }

.cat-categorias a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border: 2px solid var(--traco);
    border-radius: 999px;
    background: var(--papel);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.cat-categorias a small { opacity: .55; font-weight: 600; }
.cat-categorias a.ativa { background: var(--verde); color: #fff; }
.cat-categorias a:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------ Produtos */
.cat-corpo { padding-block: 34px 120px; }

.cat-secao { margin-bottom: 44px; }

.cat-secao h2 {
    font-size: 22px;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cat-secao h2 small { font-size: 13px; font-weight: 600; color: var(--tinta-3); }

.cat-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.cat-item {
    border: 2px solid var(--traco);
    border-radius: 18px;
    background: var(--papel);
    box-shadow: 4px 4px 0 var(--traco);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}

.cat-item:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--traco); }
.cat-item.esgotado { opacity: .62; }

.cat-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--papel-3);
    border-bottom: 2px solid var(--traco);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-sem-foto { font-size: 40px; opacity: .35; }

.cat-fita {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--tinta);
    color: var(--papel);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 800;
}

.cat-info { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.cat-info h3 { font-size: 15px; margin: 0 0 3px; line-height: 1.3; letter-spacing: -.01em; }
.cat-marca-item { font-size: 12px; color: var(--tinta-3); margin: 0 0 8px; }

.cat-preco { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 5px; }
.cat-preco strong { font-size: 21px; font-weight: 850; letter-spacing: -.03em; }
.cat-preco span { font-size: 12px; color: var(--tinta-3); }
.cat-consulte { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.cat-atacado { font-size: 12px; color: var(--verde); margin: 0 0 6px; }

.cat-controle { margin-top: auto; padding-top: 10px; }

.cat-botao {
    width: 100%;
    padding: 11px;
    border: 2px solid var(--traco);
    border-radius: 11px;
    background: var(--verde);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.cat-botao:hover { filter: brightness(1.08); }
.cat-botao:disabled { background: var(--papel-3); color: var(--tinta-3); cursor: not-allowed; }

.cat-quantidade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid var(--traco);
    border-radius: 11px;
    overflow: hidden;
    background: var(--verde-claro);
}

.cat-quantidade button {
    width: 42px;
    padding: 11px 0;
    border: none;
    background: var(--verde);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}

.cat-quantidade button:hover { filter: brightness(1.1); }
.cat-quantidade span { font-weight: 850; font-size: 16px; color: var(--verde-escuro); }

/* -------------------------------------------------------------- Vazio */
.cat-vazio { text-align: center; padding: 70px 20px; }
.cat-vazio span { font-size: 46px; display: block; margin-bottom: 12px; }
.cat-vazio h2 { font-size: 22px; margin: 0 0 8px; }
.cat-vazio p { color: var(--tinta-2); margin: 0; }
.cat-vazio a { color: var(--verde); font-weight: 800; text-decoration: underline; }

/* ------------------------------------------------------------- Rodapé */
.cat-rodape {
    background: var(--tinta);
    color: #9b9287;
    padding: 30px 0;
    font-size: 13px;
}

.cat-rodape .h-cont { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cat-rodape strong { color: var(--papel); }

/* ------------------------------------------------------- Barra fixa */
.cat-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--papel) 62%, transparent);
    display: flex;
    justify-content: center;
}

.cat-barra-info {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(560px, 100%);
    padding: 15px 20px;
    border: 2px solid var(--traco);
    border-radius: 16px;
    background: var(--verde);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 5px 5px 0 var(--traco);
}

.cat-barra-info:hover { filter: brightness(1.07); }
.cat-barra-info strong { margin-left: auto; font-size: 17px; }

.cat-bolha {
    background: #fff;
    color: var(--verde-escuro);
    border-radius: 999px;
    min-width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    font-size: 13.5px;
    font-weight: 900;
    padding: 0 7px;
}

/* -------------------------------------------------------- Gaveta */
.cat-gaveta { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.cat-gaveta-fundo { position: absolute; inset: 0; background: rgba(22,18,13,.55); }

.cat-gaveta-caixa {
    position: relative;
    width: min(430px, 100%);
    height: 100%;
    background: var(--papel);
    border-left: 2px solid var(--traco);
    display: flex;
    flex-direction: column;
    animation: cat-desliza .25s cubic-bezier(.2,.9,.3,1);

    /* A gaveta inteira é que rola — ver o comentário em .cat-lista. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes cat-desliza {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.cat-gaveta-caixa header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 2px solid var(--traco);

    /* Grudado no topo: rolando a gaveta inteira, o botão de fechar não
       pode subir para fora da tela — no celular ele é a única saída. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--papel);
}

.cat-gaveta-caixa header h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }

.cat-gaveta-caixa header button {
    border: 2px solid var(--traco);
    background: var(--papel-2);
    border-radius: 10px;
    width: 36px; height: 36px;
    cursor: pointer;
    font-size: 15px;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  O PEDIDO NÃO ROLAVA ATÉ O FIM  (6.0.0)                          ║
   ╚══════════════════════════════════════════════════════════════════╝

   A gaveta era uma coluna flex de altura fixa com três partes:

       header       título e fechar
       .cat-lista   os itens — flex:1, overflow-y:auto
       footer       total, entrega/retirada e TODO o formulário

   Só a lista rolava. O rodapé não tinha rolagem nenhuma — e é ele que
   leva nome, telefone, CEP, número, rua, bairro, cidade, pagamento e
   troco. Com o formulário aberto, a parte de baixo ficava cortada fora
   da gaveta e NÃO HAVIA COMO CHEGAR NELA: o cliente via o campo "Rua"
   pela metade e parava ali.

   Era pior ainda no celular, onde a tela é baixa e o teclado come metade
   do que sobra.

   Agora quem rola é a gaveta inteira, com o cabeçalho grudado no topo
   para o botão de fechar nunca sumir. A lista deixa de ter rolagem
   própria: duas barras de rolagem dentro da mesma caixa é o que fazia
   aparecer aquele pedacinho de barra no alto, sem levar a lugar nenhum. */
.cat-lista { flex: 0 1 auto; padding: 14px 20px; }
.cat-lista-vazia { text-align: center; color: var(--tinta-3); padding: 40px 0; }

.cat-linha {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1.5px dashed var(--tinta-3);
}

.cat-linha strong { font-size: 14px; display: block; }
.cat-linha span { font-size: 12px; color: var(--tinta-3); }
.cat-linha-total { font-size: 15px; white-space: nowrap; }

.cat-linha-qtd {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1.5px solid var(--traco);
    border-radius: 9px;
    overflow: hidden;
}

.cat-linha-qtd button {
    width: 30px; height: 30px;
    border: none;
    background: var(--papel-3);
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.cat-linha-qtd span { min-width: 26px; text-align: center; font-weight: 800; font-size: 13.5px; }

/* O rodapé leva o formulário inteiro e precisa poder crescer: travado em
   altura, ele cortava os últimos campos (ver o comentário em .cat-lista). */
.cat-gaveta-caixa footer {
    flex: 0 0 auto;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    border-top: 2px solid var(--traco);
}

.cat-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cat-total strong { font-size: 26px; font-weight: 850; letter-spacing: -.03em; }
.cat-minimo { font-size: 12.5px; color: var(--tinta-2); margin: 0 0 10px; }

.cat-campo { display: block; margin-bottom: 11px; }
.cat-campo span { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-bottom: 5px; }

.cat-campo input {
    width: 100%;
    padding: 11px 13px;
    border: 2px solid var(--traco);
    border-radius: 11px;
    background: var(--papel-2);
    font-family: inherit;
    font-size: 14px;
    color: var(--tinta);
}

.cat-campo input:focus { outline: none; background: #fff; }

/* Campo-isca contra robô de formulário — fora da tela, não display:none
   (alguns robôs pulam campo escondido assim; deslocado, eles ainda acham). */
.cat-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cat-fechar {
    width: 100%;
    margin-top: 8px;
    padding: 15px;
    border: 2px solid var(--traco);
    border-radius: 13px;
    background: #1faa54;
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--traco);
}

.cat-fechar:hover { filter: brightness(1.07); }

.cat-limpar {
    width: 100%;
    margin-top: 9px;
    padding: 10px;
    border: none;
    background: none;
    color: var(--tinta-3);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 620px) {
    .cat-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .cat-topo .h-cont { gap: 12px; }
    .cat-busca { max-width: none; }
    .cat-secao h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-gaveta-caixa { animation: none; }
    .cat-item:hover { transform: none; }
}

/* ------------------------------------------------------- Peças novas (4.0.5) */
.cat-compartilhar {
    border: 2px solid var(--traco);
    border-radius: 12px;
    background: var(--papel);
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.cat-compartilhar:hover { background: #fff; }

/* As categorias grudam logo abaixo do topo (a altura dele vem do JS) */
.cat-categorias { position: sticky; top: var(--cat-topo-altura, 76px); z-index: 35; }

/* A prateleira da frente: os mais pedidos, com fundo próprio */
.cat-destaque {
    background: var(--amarelo-claro, #fff4cf);
    border: 2px solid var(--traco);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 4px 4px 0 var(--traco);
}

.cat-destaque .cat-grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.cat-barra-texto { display: grid; text-align: left; line-height: 1.2; }
.cat-barra-texto small { font-size: 11.5px; font-weight: 700; opacity: .9; }

.cat-minimo.ok { color: var(--verde); font-weight: 800; }

/* Entrega ou retirada: dois botões grandes, não um select */
.cat-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

.cat-entrega label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 8px;
    border: 2px solid var(--traco);
    border-radius: 11px;
    background: var(--papel-2);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.cat-entrega input { position: absolute; opacity: 0; pointer-events: none; }
.cat-entrega label:has(input:checked) { background: var(--verde); color: #fff; }
.cat-entrega label:has(input:focus-visible) { outline: 3px solid var(--amarelo); outline-offset: 2px; }

@media (max-width: 620px) {
    /* Busca e compartilhar dividem a mesma linha; o botão vira só o ícone */
    .cat-marca { flex: 1 1 100%; }
    .cat-busca { flex: 1 1 0; min-width: 0; }
    .cat-compartilhar { padding: 0 14px; font-size: 18px; align-self: stretch; }
    .cat-comp-texto { display: none; }
    .cat-destaque { padding: 14px; border-radius: 16px; }
}

/* =====================================================================
   A VITRINE PERSONALIZADA E O FECHAMENTO COMPLETO  (4.7.0)

   A cor da loja já chega por --verde, redefinida na própria página. O que
   vem abaixo é o que não existia: capa, selo de destaque, descrição no
   cartão, modo lista, e o fechamento com endereço separado.
   ===================================================================== */

/* ---------------------------------------------------------- A capa */
.cat-capa { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.cat-capa img {
    width: 100%;
    height: clamp(120px, 26vw, 240px);
    object-fit: cover;
    border: 2px solid var(--traco, #16120d);
    border-radius: 16px;
    display: block;
}

/* ------------------------------------------- O que a loja escolheu */
.cat-selo {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    border-radius: 20px;
    background: var(--verde);
    color: #fff;
}

.cat-escolhidos h2 small { opacity: .75; font-weight: 600; }

/* Duas linhas e corta. Um texto longo aqui empurraria o botão de comprar
   para fora da tela do celular — e o botão é o ponto da página. */
.cat-descricao {
    font-size: 12px;
    line-height: 1.35;
    opacity: .72;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------- Modo lista
   Uma linha por produto, para quem tem muito item parecido (parafuso 3mm,
   4mm, 5mm…), onde a foto grande atrapalha mais do que ajuda. */
.cat-modo-lista .cat-grade { grid-template-columns: 1fr; }

.cat-modo-lista .cat-item {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    align-items: center;
}

.cat-modo-lista .cat-foto { height: 76px; border-radius: 12px; }
.cat-modo-lista .cat-descricao { -webkit-line-clamp: 1; }
.cat-modo-lista .cat-info { padding: 0 12px 0 0; }

/* --------------------------------------------- O fechamento do pedido */

/* Duas colunas para os campos curtos: CEP e número, bairro e cidade.
   Em pé, no celular, cada um sozinho ocuparia uma tela de rolagem.

   Chama-se "dupla" e não "linha" porque .cat-linha já era o item do
   carrinho, dentro desta mesma gaveta — reusar o nome teria quebrado a
   lista de itens sem aparecer em lugar nenhum do código novo. */
.cat-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cat-campo-cep input { letter-spacing: .04em; }

.cat-cep-aviso {
    margin: -4px 0 8px;
    font-size: 12px;
    opacity: .8;
}

/* O frete como linha separada do subtotal. Um total único que "engorda"
   ao escolher entrega parece cobrança escondida — e o cliente desiste na
   última tela, que é a pior hora para desistir. */
.cat-soma {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 2px 0;
    opacity: .85;
}

.cat-frete-gratis {
    margin: 4px 0 0;
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--verde-claro);
    text-align: center;
}

.cat-frete-gratis.ok { font-weight: 800; }

/* Os pagamentos como botões grandes, não como <select>: no celular a
   lista suspensa abre uma roleta que esconde a tela inteira, e a pessoa
   perde de vista o que está comprando. */
.cat-pagamentos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.cat-pagamentos label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--traco, #16120d);
    border-radius: 11px;
    cursor: pointer;
    background: var(--papel, #fff);
}

.cat-pagamentos label:has(input:checked) {
    background: var(--verde-claro);
    border-color: var(--verde);
}

.cat-pagamentos input { accent-color: var(--verde); }

@media (max-width: 380px) {
    .cat-pagamentos { grid-template-columns: 1fr; }
}
/* =====================================================================
   OS TRÊS ESTILOS DA VITRINE  (5.1.0)

   ╔══════════════════════════════════════════════════════════════════╗
   ║  A DIFERENÇA É ESTRUTURAL, NÃO É SÓ A COR                        ║
   ╚══════════════════════════════════════════════════════════════════╝

   A cor da marca já era escolhível, e mudava botões e preços. Mas uma
   loja de roupa com borda preta de 2px continuava parecendo um aviso de
   feira, por mais bonita que fosse a cor.

   O que separa os três aqui é borda, sombra, canto e fundo — o que faz
   uma vitrine parecer de mercearia, de boutique ou de delivery noturno.
   A cor da loja continua valendo por cima dos três.
   ===================================================================== */

/* ------------------------------------------------------------- LIMPO
   Sem borda, sombra difusa, canto macio. É a linguagem de loja de
   roupa, cosmético e presente — onde a foto é o produto e a moldura
   atrapalha. */
.cat-estilo-limpo {
    --cat-borda-largura: 0px;
    --cat-raio: 18px;
}

.cat-estilo-limpo .cat-item,
.cat-estilo-limpo .cat-gaveta-caixa,
.cat-estilo-limpo .cat-capa img {
    border: none;
    border-radius: var(--cat-raio);
    box-shadow: 0 3px 14px rgba(20, 16, 12, .1);
}

.cat-estilo-limpo .cat-botao,
.cat-estilo-limpo .cat-fechar,
.cat-estilo-limpo .cat-pagamentos label,
.cat-estilo-limpo .cat-campo input {
    border: 1px solid rgba(20, 16, 12, .16);
    border-radius: 12px;
    box-shadow: none;
}

.cat-estilo-limpo .cat-botao,
.cat-estilo-limpo .cat-fechar { border: none; }

.cat-estilo-limpo .cat-categorias a { border-radius: 999px; }

/* ------------------------------------------------------------ ESCURO
   Fundo escuro com a foto acesa por cima. É como todo aplicativo de
   delivery que o cliente já usa se parece — e parecer com o que ele
   conhece é o que faz ele entender a tela em dois segundos.

   O fundo do CARTÃO é mais claro que o da página, e não mais escuro:
   assim a foto do produto fica sobre uma base neutra e não parece suja,
   que é o erro mais comum de vitrine escura. */
.cat-estilo-escuro {
    --papel: #14120f;
    --papel-2: #1d1a16;
    --papel-3: #2a2520;
    --tinta: #f2ece3;
    --tinta-2: #b9b0a2;
    --tinta-3: #8b8377;
    --traco: #3d372e;

    background: var(--papel);
    color: var(--tinta);
}

.cat-estilo-escuro .cat-item,
.cat-estilo-escuro .cat-gaveta-caixa { background: var(--papel-2); }

.cat-estilo-escuro .cat-foto { background: #ffffff; }
.cat-estilo-escuro .cat-topo { background: var(--papel-2); border-bottom-color: var(--traco); }
.cat-estilo-escuro .cat-campo input { background: var(--papel-3); color: var(--tinta); }
.cat-estilo-escuro .cat-pagamentos label { background: var(--papel-3); }
.cat-estilo-escuro .cat-credito,
.cat-estilo-escuro .cat-soma { opacity: .82; }

/* A sombra dura some no escuro: sombra preta sobre fundo preto não
   separa nada, só engrossa a borda. */
.cat-estilo-escuro .cat-item,
.cat-estilo-escuro .cat-botao { box-shadow: none; }

/* ------------------------------------------------- Fechada agora */
.cat-fechada {
    max-width: 1100px;
    margin: 12px auto 0;
    padding: 13px 16px;
    border: 2px solid var(--traco, #16120d);
    border-radius: 13px;
    background: #2a2520;
    color: #ffe9c7;
    text-align: center;
}

.cat-fechada strong { display: block; font-size: 15px; margin-bottom: 2px; }
.cat-fechada span { font-size: 13px; opacity: .88; }

@media (max-width: 420px) {
    .cat-fechada { margin-left: 14px; margin-right: 14px; }
}
/* =====================================================================
   OS TRÊS ESTILOS NOVOS E O TAMANHO DA LETRA  (6.0.0)

   ╔══════════════════════════════════════════════════════════════════╗
   ║  ESTILO QUE SÓ MUDA COR NÃO É OPÇÃO, É ENFEITE                   ║
   ╚══════════════════════════════════════════════════════════════════╝

   A cor já é um ajuste à parte (catalogo_cor). O que faltava eram
   formatos diferentes de cartão — e formato é o que faz um ramo
   funcionar e outro não:

     Lista     foto pequena ao lado. Mercado com 400 itens não cabe numa
               grade de fotos grandes: o cliente rola para sempre.
     Cardápio  sem foto nenhuma, preço à direita. Restaurante não
               fotografa marmita, e a foto ruim vende menos que nenhuma.
     Vitrine   uma foto grande por linha. Roupa e bolo são vendidos pela
               foto; miniatura de 190px joga fora o produto.
   ===================================================================== */

/* ---------------------------------------------------------- Lista */
.cat-estilo-lista .cat-grade { grid-template-columns: 1fr; gap: 10px; }

.cat-estilo-lista .cat-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--traco);
}

.cat-estilo-lista .cat-foto { aspect-ratio: 1 / 1; border-right: 2px solid var(--traco); }
.cat-estilo-lista .cat-corpo { padding: 10px 12px 10px 0; }
.cat-estilo-lista .cat-item:hover { transform: none; box-shadow: 5px 5px 0 var(--traco); }

/* -------------------------------------------------------- Cardápio */
.cat-estilo-cardapio .cat-grade { grid-template-columns: 1fr; gap: 0; }

/* Sem foto: num cardápio ela não ajuda, e a foto ruim vende menos que
   nenhuma. O que importa é achar o item e ver o preço. */
.cat-estilo-cardapio .cat-foto { display: none; }

.cat-estilo-cardapio .cat-item {
    display: block;
    border: 0;
    border-bottom: 2px dotted var(--traco);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.cat-estilo-cardapio .cat-item:hover { transform: none; box-shadow: none; }
.cat-estilo-cardapio .cat-corpo { padding: 13px 4px; }

/* Nome à esquerda, preço à direita, como no cardápio impresso. */
.cat-estilo-cardapio .cat-corpo { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; }
.cat-estilo-cardapio .cat-nome { grid-column: 1; }
.cat-estilo-cardapio .cat-preco { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
.cat-estilo-cardapio .cat-desc { grid-column: 1 / -1; }
.cat-estilo-cardapio .cat-acao { grid-column: 1 / -1; margin-top: 8px; }

/* --------------------------------------------------------- Vitrine */
.cat-estilo-vitrine .cat-grade { grid-template-columns: 1fr; gap: 14px; }

.cat-estilo-vitrine .cat-item { border-radius: 20px; }

/* 16/9 e não 4/3: a foto é o produto, e aqui ela tem a tela inteira. */
.cat-estilo-vitrine .cat-foto { aspect-ratio: 16 / 9; }

@media (min-width: 720px) {
    .cat-estilo-vitrine .cat-grade { grid-template-columns: 1fr 1fr; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  O TAMANHO DA LETRA É UM MULTIPLICADOR, NÃO TRÊS FOLHAS          ║
   ╚══════════════════════════════════════════════════════════════════╝

   A farmácia do bairro e o mercadinho que entrega para quem não sai de
   casa têm cliente que não enxerga letra de 14px — e o catálogo é a tela
   que essa pessoa usa sozinha, sem ninguém do lado.

   --cat-escala sai do PHP e multiplica só o texto. A estrutura não muda:
   o que funciona em Normal continua funcionando em Enorme. */
.cat-estilo-papel,
.cat-estilo-limpo,
.cat-estilo-escuro,
.cat-estilo-lista,
.cat-estilo-cardapio,
.cat-estilo-vitrine { font-size: calc(15px * var(--cat-escala, 1)); }

.cat-nome { font-size: calc(15px * var(--cat-escala, 1)); }
.cat-preco { font-size: calc(18px * var(--cat-escala, 1)); }
.cat-desc { font-size: calc(13px * var(--cat-escala, 1)); }
.cat-botao, .cat-fechar { font-size: calc(15px * var(--cat-escala, 1)); }

/* Alvo cresce junto com a letra: letra grande em botão pequeno é pior
   que letra pequena, porque convida a tocar e erra. */
.cat-botao, .cat-fechar { min-height: calc(46px * var(--cat-escala, 1)); }
.cat-campo input, .cat-campo select, .cat-campo textarea { min-height: calc(46px * var(--cat-escala, 1)); }
/* =====================================================================
   Vitrine completa: cartão da loja, barra de ferramentas, favoritos,
   pedir de novo, ficha do produto, foto ampliada e "Sobre a loja".
   (assets/js/catalogo-vitrine.js)
   ===================================================================== */
.cat-loja-info { display: grid; gap: 12px; margin-top: 16px; margin-bottom: 4px; }
.cat-loja-linha, .cat-loja-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 2px solid var(--traco); border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--papel); }
.cat-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cat-status.aberta { color: #0b6b3f; } .cat-status.fechada { color: #b42318; }
.cat-chip { padding: 7px 12px; border-radius: 999px; background: var(--papel-2, #f4ece0); border: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); font-size: 12.5px; font-weight: 650; color: var(--tinta-2); }
.cat-chip-pagamento { max-width: 100%; line-height: 1.5; }
.cat-atalho { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 2px solid var(--traco); border-radius: 12px; background: var(--papel); color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 var(--traco); }
.cat-atalho:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--traco); }

.cat-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 22px; }
.cat-ordenar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.cat-ordenar select { min-height: 40px; padding: 0 12px; border: 2px solid var(--traco); border-radius: 11px; background: var(--papel); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 650; }
.cat-alternar { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 2px solid var(--traco); border-radius: 11px; background: var(--papel); color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cat-alternar input { width: 17px; height: 17px; accent-color: var(--verde); }
.cat-so-favoritos[aria-pressed="true"] { background: #e11d48; border-color: #e11d48; color: #fff; }
.cat-vista { display: inline-flex; margin-left: auto; border: 2px solid var(--traco); border-radius: 11px; overflow: hidden; }
.cat-vista button { width: 42px; min-height: 36px; border: none; background: var(--papel); color: var(--tinta-2); font-size: 17px; cursor: pointer; }
.cat-vista button + button { border-left: 2px solid var(--traco); }
.cat-vista button[aria-pressed="true"] { background: var(--verde); color: #fff; }
body.cat-so-fav main.cat-corpo > .cat-secao:not(.cat-favoritos), body.cat-so-fav .cat-sobre { display: none; }

.cat-item { position: relative; }
.cat-foto[data-abrir], .cat-info h3[data-abrir] { cursor: pointer; }
.cat-info h3[data-abrir]:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-foto img { transition: transform .35s ease; }
.cat-item:hover .cat-foto img { transform: scale(1.04); }
.cat-favorito { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border: 2px solid var(--traco); border-radius: 50%; background: color-mix(in srgb, var(--papel) 92%, transparent); color: var(--tinta); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cat-favorito.ativo { color: #e11d48; background: #fff; }
.cat-favorito:active { transform: scale(.9); }
.cat-selo-novo { background: #fde68a; color: #713f12; }
.cat-item.cat-no-pedido { outline: 3px solid var(--verde); outline-offset: -1px; }
.cat-item.cat-realce { animation: catRealce 1.6s ease 2; }
@keyframes catRealce { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--verde) 45%, transparent); } }
.cat-bolha.cat-pulo { animation: catPulo .45s ease; }
@keyframes catPulo { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }

.cat-repetir-caixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px; border: 2px dashed var(--traco); border-radius: 18px; background: var(--verde-claro); }
.cat-repetir-caixa strong { display: block; font-size: 16px; }
.cat-repetir-caixa span { font-size: 13px; color: var(--tinta-2); }
.cat-repetir-caixa .cat-botao { width: auto; padding-inline: 18px; }
.cat-linha-obs { display: block; font-size: 12px; font-style: normal; color: var(--tinta-2); margin-top: 2px; }

/* ---- ficha do produto ---- */
body.cat-ficha-aberta { overflow: hidden; }
.cat-ficha { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cat-ficha-fundo { position: absolute; inset: 0; background: rgba(22,18,13,.6); animation: catSurge .2s ease; }
.cat-ficha-caixa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(940px, 100%); max-height: min(92vh, 760px); overflow: auto; border: 2px solid var(--traco); border-radius: 22px; background: var(--papel); color: var(--tinta); box-shadow: 8px 8px 0 var(--traco); animation: catSobe .25s ease; }
.cat-ficha-fechar { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border: 2px solid var(--traco); border-radius: 50%; background: var(--papel); color: var(--tinta); font-size: 17px; cursor: pointer; }
.cat-ficha-foto { position: relative; min-height: 320px; background: var(--papel-3, #ede2d2); border-right: 2px solid var(--traco); display: grid; place-items: center; overflow: hidden; }
.cat-ficha-foto.tem-foto { cursor: zoom-in; }
.cat-ficha-foto img { width: 100%; height: 100%; max-height: 760px; object-fit: contain; background: #fff; }
.cat-ficha-foto .cat-sem-foto { font-size: 72px; }
.cat-ficha-corpo { display: grid; align-content: start; gap: 12px; padding: 28px 26px 26px; min-width: 0; }
.cat-ficha-categoria { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.cat-ficha-corpo h2 { margin: 0; padding-right: 40px; font-size: calc(26px * var(--cat-escala, 1)); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cat-ficha-preco { font-size: calc(28px * var(--cat-escala, 1)); font-weight: 900; color: var(--verde-escuro, var(--verde)); }
.cat-ficha-descricao { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); white-space: pre-line; }
.cat-ficha-compra { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.cat-ficha-qtd { display: flex; align-items: center; border: 2px solid var(--traco); border-radius: 12px; overflow: hidden; background: var(--papel); }
.cat-ficha-qtd button { width: 46px; height: 100%; min-height: 48px; border: none; background: var(--verde-claro); color: var(--verde-escuro, var(--verde)); font-size: 22px; font-weight: 800; cursor: pointer; }
.cat-ficha-qtd span { min-width: 42px; text-align: center; font-weight: 900; font-size: 17px; }
.cat-ficha-adicionar { flex: 1; min-height: 50px; font-size: 15px; }
.cat-ficha-esgotado { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--papel-3, #ede2d2); font-weight: 700; }
.cat-ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-ficha-parecidos h3 { margin: 6px 0 8px; font-size: 15px; }
.cat-ficha-trilho { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.cat-mini { flex: 0 0 132px; display: grid; gap: 4px; padding: 0 0 8px; border: 2px solid var(--traco); border-radius: 14px; background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; overflow: hidden; scroll-snap-align: start; }
.cat-mini img, .cat-mini .cat-sem-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; background: var(--papel-3, #ede2d2); font-size: 28px; }
.cat-mini strong { padding: 0 8px; font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-mini small { padding: 0 8px; font-size: 12px; font-weight: 800; color: var(--verde); }
@keyframes catSurge { from { opacity: 0; } }
@keyframes catSobe { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.cat-zoom { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.92); cursor: zoom-out; }
.cat-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }

.cat-zap-flutuante { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 55; width: 56px; height: 56px; border: 2px solid var(--traco); border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 25px; text-decoration: none; box-shadow: 3px 3px 0 var(--traco); transition: bottom .2s ease; }
body.cat-com-pedido .cat-zap-flutuante { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.cat-ficha-aberta .cat-zap-flutuante { display: none; }

/* ---- sobre a loja ---- */
.cat-sobre { margin: 10px auto 48px; }
.cat-sobre h2 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 14px; }
.cat-sobre-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cat-sobre-bloco { padding: 18px; border: 2px solid var(--traco); border-radius: 18px; background: var(--papel); box-shadow: 3px 3px 0 var(--traco); }
.cat-sobre-bloco h3 { margin: 0 0 8px; font-size: 16px; }
.cat-sobre-bloco p { margin: 0 0 6px; line-height: 1.55; font-size: 14px; }
.cat-sobre-bloco a { color: var(--verde-escuro, var(--verde)); font-weight: 700; }
.cat-sobre-nota { color: var(--tinta-2); font-size: 13px !important; }
.cat-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.cat-contatos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.cat-contatos a { text-decoration: none; }

/* ---- escuro ---- */
.cat-estilo-escuro .cat-ficha-foto img, .cat-estilo-escuro .cat-zoom img { background: #1c1a17; }
.cat-estilo-escuro .cat-favorito.ativo { background: #2a2622; }

@media (max-width: 720px) {
    .cat-ficha { padding: 0; align-items: flex-end; }
    .cat-ficha-caixa { grid-template-columns: 1fr; max-height: 94vh; border-radius: 22px 22px 0 0; border-bottom: none; box-shadow: none; animation: catSobeCelular .28s ease; }
    .cat-ficha-foto { min-height: 0; aspect-ratio: 4 / 3; border-right: none; border-bottom: 2px solid var(--traco); }
    .cat-ficha-corpo { padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); }
    .cat-ficha-corpo h2 { padding-right: 0; }
    .cat-vista { margin-left: 0; }
    .cat-ferramentas { gap: 8px; }
    .cat-ordenar span { display: none; }
    .cat-loja-acoes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .cat-atalho { flex: none; }
    .cat-favorito { width: 34px; height: 34px; font-size: 17px; }
    .cat-zap-flutuante { width: 50px; height: 50px; right: 14px; }
}
@keyframes catSobeCelular { from { transform: translateY(40%); } }
@media (prefers-reduced-motion: reduce) {
    .cat-ficha-caixa, .cat-ficha-fundo, .cat-bolha.cat-pulo, .cat-item.cat-realce { animation: none; }
    .cat-foto img { transition: none; }
}

/* =====================================================================
   PERSONALIZAR A VITRINE  (Configurações → Catálogo)
   Cada escolha é uma classe no <body>, saída de lista fechada em
   includes/catalogo.php (classesDaVitrine). Sem escolha, nada muda.
   ===================================================================== */

/* ---- formato e ajuste da foto */
.cat-foto-quadrada .cat-foto { aspect-ratio: 1 / 1; }
.cat-foto-retrato .cat-foto { aspect-ratio: 3 / 4; }
.cat-foto-inteira .cat-foto { background: #fff; }
.cat-foto-inteira .cat-foto img { object-fit: contain; padding: 6px; }
.cat-foto-inteira .cat-item:hover .cat-foto img { transform: none; }
.cat-foto-inteira .cat-ficha-foto img { padding: 10px; }

/* ---- cantos */
.cat-cantos-retos .cat-item, .cat-cantos-retos .cat-destaque, .cat-cantos-retos .cat-sobre-bloco,
.cat-cantos-retos .cat-ficha-caixa, .cat-cantos-retos .cat-capa img, .cat-cantos-retos .cat-repetir-caixa { border-radius: 4px; }
.cat-cantos-retos .cat-botao, .cat-cantos-retos .cat-quantidade, .cat-cantos-retos .cat-atalho, .cat-cantos-retos .cat-alternar,
.cat-cantos-retos .cat-ordenar select, .cat-cantos-retos .cat-categorias a, .cat-cantos-retos .cat-busca input,
.cat-cantos-retos .cat-busca button, .cat-cantos-retos .cat-ficha-qtd, .cat-cantos-retos .cat-mini { border-radius: 3px; }
.cat-cantos-redondos .cat-item, .cat-cantos-redondos .cat-destaque, .cat-cantos-redondos .cat-sobre-bloco,
.cat-cantos-redondos .cat-ficha-caixa, .cat-cantos-redondos .cat-capa img, .cat-cantos-redondos .cat-repetir-caixa { border-radius: 28px; }
.cat-cantos-redondos .cat-botao, .cat-cantos-redondos .cat-quantidade, .cat-cantos-redondos .cat-atalho, .cat-cantos-redondos .cat-alternar,
.cat-cantos-redondos .cat-ordenar select, .cat-cantos-redondos .cat-ficha-qtd { border-radius: 999px; }
.cat-cantos-redondos .cat-mini { border-radius: 20px; }

/* ---- letra (visual.css lê --fonte-interface: basta trocar a variável) */
.cat-fonte-classica { --fonte-interface: Georgia, "Times New Roman", "Book Antiqua", serif; }
.cat-fonte-arredondada { --fonte-interface: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif; }
.cat-fonte-condensada { --fonte-interface: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; }
.cat-fonte-condensada .cat-info h3, .cat-fonte-condensada .cat-secao h2 { letter-spacing: -.01em; }

/* ---- seções desligadas */
.cat-sem-favoritos .cat-favorito, .cat-sem-favoritos #catSoFavoritos { display: none !important; }
.cat-sem-descricao .cat-item .cat-descricao { display: none; }
.cat-sobre-texto { max-width: 760px; margin: -4px 0 16px; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

/* =====================================================================
   CELULAR: cartões compactos em duas colunas (ou uma, se a loja quiser),
   iguais em todas as prateleiras — antes os destaques saíam com um
   produto por linha e o resto com dois.
   ===================================================================== */
@media (max-width: 620px) {
    .cat-secao { margin-bottom: 30px; }
    .cat-secao h2 { font-size: 18px; line-height: 1.25; }
    .cat-secao h2 small { display: block; margin-top: 2px; font-size: 12px; }

    .cat-cel-2col:not(.cat-modo-lista):not(.cat-estilo-lista):not(.cat-estilo-cardapio) .cat-grade,
    .cat-cel-2col:not(.cat-modo-lista):not(.cat-estilo-lista):not(.cat-estilo-cardapio) .cat-destaque .cat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat-cel-1col:not(.cat-modo-lista):not(.cat-estilo-lista):not(.cat-estilo-cardapio) .cat-grade,
    .cat-cel-1col:not(.cat-modo-lista):not(.cat-estilo-lista):not(.cat-estilo-cardapio) .cat-destaque .cat-grade { grid-template-columns: 1fr; gap: 14px; }

    .cat-cel-2col .cat-item { border-radius: 14px; box-shadow: 3px 3px 0 var(--traco); }
    .cat-cel-2col .cat-info { padding: 10px; }
    .cat-cel-2col .cat-info h3 { font-size: calc(13.5px * var(--cat-escala, 1)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
    .cat-cel-2col .cat-marca-item { margin-bottom: 4px; font-size: 11px; }
    .cat-cel-2col .cat-descricao { font-size: 11.5px; }
    .cat-cel-2col .cat-preco { flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; }
    .cat-cel-2col .cat-preco strong { font-size: calc(17px * var(--cat-escala, 1)); }
    .cat-cel-2col .cat-preco span { font-size: 11px; }
    .cat-cel-2col .cat-atacado { font-size: 11px; }
    .cat-cel-2col .cat-controle { padding-top: 8px; }
    .cat-cel-2col .cat-botao { min-height: calc(40px * var(--cat-escala, 1)); padding: 8px 6px; font-size: calc(13.5px * var(--cat-escala, 1)); border-radius: 10px; }
    .cat-cel-2col .cat-quantidade button { width: 36px; padding: 9px 0; }
    .cat-cel-2col .cat-selo, .cat-cel-2col .cat-fita { top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; }
    .cat-cel-2col .cat-favorito { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 15px; border-width: 1.5px; }
    .cat-cel-2col .cat-sem-foto { font-size: 30px; }

    .cat-destaque { padding: 14px 10px; box-shadow: 3px 3px 0 var(--traco); }
    .cat-destaque h2 { padding: 0 4px; }

    /* barra de ferramentas: ordenar ocupa a linha; o resto embaixo */
    .cat-ferramentas { gap: 8px; margin-bottom: 18px; }
    .cat-ordenar { flex: 1 1 100%; }
    .cat-ordenar select { flex: 1; width: 100%; min-width: 0; }
    .cat-alternar { min-height: 38px; padding: 0 11px; font-size: 13px; }
    .cat-vista { margin-left: auto; }

    /* cartão da loja: chips em fila que rola, sem quebrar em várias linhas */
    .cat-loja-info { gap: 10px; margin-top: 12px; }
    .cat-loja-linha { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .cat-loja-linha::-webkit-scrollbar, .cat-loja-acoes::-webkit-scrollbar { display: none; }
    .cat-loja-linha > * { flex: none; white-space: nowrap; }
    .cat-chip-pagamento { white-space: nowrap; }
    .cat-loja-acoes { scrollbar-width: none; }
    .cat-atalho { min-height: 38px; padding: 7px 12px; font-size: 13px; }

    .cat-sobre { margin-bottom: 110px; }
    .cat-sobre-bloco { padding: 15px; }
    .cat-rodape .h-cont { font-size: 12.5px; }
}

@media (max-width: 370px) {
    .cat-cel-2col:not(.cat-modo-lista):not(.cat-estilo-lista):not(.cat-estilo-cardapio) .cat-grade { gap: 8px; }
    .cat-cel-2col .cat-info { padding: 8px; }
    .cat-cel-2col .cat-quantidade button { width: 32px; }
    .cat-vista button { width: 38px; }
}