/* catalogo.css | montado por gerar_catalogo.py a partir de 18 fragmento(s).
   Nao edite este arquivo: a proxima geracao sobrescreve.
   Edite os fragmentos em gerador/nucleo/. */
/* 00-base.css | Variaveis de raiz, reset e corpo
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   catalogo.css · Catálogo publicado BlugBox
   As cores e a grade chegam por variáveis, escritas pelo
   catalogo.js a partir do config.js. Nada aqui é fixo.
   ══════════════════════════════════════════════════════════ */

:root{
  --destaque:#f4b41a; --secundaria:#e02b2b;
  --fundo:#0b0a0a; --texto:#f7f3ea; --link:#f4b41a;
  --card-fundo:rgba(24,21,20,.82); --card-borda:rgba(255,255,255,.1); --card-raio:18px;
  --colunas:4; --colunas-tablet:2; --colunas-mobile:1;
  --escala-logo:1; --zoom:1; --vao-marca:0px;
  /* tipografia: --fonte-texto manda no corpo e --fonte-titulo nos
     títulos. As duas são gravadas pelo painel em 14-geral.js. O
     valor abaixo é só o plano B, para o caso de o catálogo abrir
     antes de o JavaScript rodar. */
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fonte-texto:var(--fonte);
  --fonte-titulo:var(--fonte);
  --largura:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:16px/1.6 var(--fonte-texto); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.travado{overflow:hidden}
.oculto{display:none !important}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}

#camadaFundo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-attachment:fixed; opacity:0;
}
.catalogo{position:relative; z-index:1; zoom:var(--zoom)}

.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ícone de categoria enviado como arquivo, no lugar do símbolo do
   sprite. Mesma caixa, mesmo alinhamento: quem troca é o desenho. */
.ic-arquivo{object-fit:contain}

/* os títulos podem ter família própria: é onde a marca aparece.
   O nome da empresa no cabeçalho entra junto, porque ele é o
   título mais importante da página. */
h1,h2,h3,h4,.marca-nome b,.sobretitulo{font-family:var(--fonte-titulo)}

/* 01-cabecalho.css | Cabecalho fixo, marca e acoes
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ cabeçalho ══════════ */

.topo-fixo{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--fundo) 88%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--card-borda);
}
.cabecalho{
  max-width:var(--largura); margin:0 auto; padding:11px 18px;
  display:flex; align-items:center; gap:14px;
}
.marca-cab{display:flex; align-items:center; gap:11px; background:none; border:0; padding:0; text-align:left}
.marca-simbolo{
  width:calc(46px * var(--escala-logo)); height:calc(46px * var(--escala-logo));
  border-radius:50%; overflow:hidden; display:grid; place-items:center;
  border:1px solid var(--card-borda); background:var(--card-fundo); flex:none;
}
.marca-simbolo img{width:100%; height:100%; object-fit:contain}
/*
   O vão entre o nome e a frase não era espaçamento declarado por
   ninguém: era entrelinha herdada do corpo. Medido na 8.9.5, o
   nome ocupava 24px de caixa para 15px de letra e a frase 18.4px
   para 11.5px, o que sobrava cerca de 8px de ar entre as duas
   linhas sem que houvesse margem nenhuma no meio.
   Agora a entrelinha é declarada aqui, e o ajuste fino fica com
   você, no painel: --vao-marca aceita valor negativo para
   aproximar ainda mais.
*/
.marca-nome b{display:block; font-size:15px; line-height:1.15; letter-spacing:.4px; text-transform:uppercase}
.marca-nome small{display:block; font-size:11.5px; line-height:1.25; opacity:.6; margin-top:var(--vao-marca)}

/*
   Aviso de estado da loja. Uma declaração só, aqui, que é onde se
   procura. O :empty é rede de proteção: se o cabeçalho for
   redesenhado e o vão vier sem texto, ele não vira uma bolinha
   vermelha solta no canto.
*/
.estado-topo{
  display:inline-block; flex:none;
  padding:3px 10px; border-radius:99px;
  background:var(--secundaria); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; white-space:nowrap; line-height:1.5;
}
.estado-topo:empty{display:none}

.acoes-cab{display:flex; align-items:center; gap:6px; margin-left:auto}
.acao-cab{
  width:36px; height:36px; display:grid; place-items:center;
  background:var(--card-fundo); border:1px solid var(--card-borda);
  border-radius:10px; opacity:.8; transition:opacity .15s,border-color .15s;
}
.acao-cab:hover{opacity:1; border-color:var(--destaque)}
.nivel-zoom{font-size:12px; opacity:.6; min-width:40px; text-align:center; font-variant-numeric:tabular-nums}
.mais-acoes{display:none}

.botao-pedido{
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--destaque); color:#12100c; border:0; border-radius:10px; font-weight:700; font-size:13.5px;
}
.botao-pedido .ic{stroke-width:2}
.botao-pedido b{
  min-width:21px; height:21px; padding:0 6px; border-radius:99px;
  background:rgba(0,0,0,.28); display:grid; place-items:center; font-size:11.5px;
}

.faixa-vendedor{
  max-width:var(--largura); margin:0 auto; padding:6px 18px;
  font-size:12px; color:var(--destaque); text-align:center;
}

.menu-categorias{position:relative; max-width:var(--largura); margin:0 auto; padding:0 18px 10px}
.trilho-categorias{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.trilho-categorias::-webkit-scrollbar{display:none}
.trilho-categorias a{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:8px 15px; border-radius:99px; text-decoration:none; color:inherit; font-size:13px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
}
.trilho-categorias a:hover{border-color:var(--destaque); color:var(--destaque)}
.trilho-categorias .ic{width:16px; height:16px; color:var(--destaque)}

/*
   Indicadores de que há mais categorias para o lado. As setas e o
   esmaecido nas bordas só aparecem quando existe conteúdo escondido
   daquele lado: o JS liga .tem-antes e .tem-depois. Sem isso o
   visitante não descobre que o trilho rola, e metade do cardápio
   fica invisível no celular.
*/
.seta-categorias{
  position:absolute; top:0; z-index:3;
  width:32px; height:38.8px; display:none; place-items:center;
  border:1px solid var(--card-borda); border-radius:99px;
  background:var(--card-fundo); color:var(--destaque);
  -webkit-appearance:none; appearance:none; padding:0;
}
.seta-categorias .ic{width:15px; height:15px}
.seta-categorias.esquerda{left:6px}
.seta-categorias.direita{right:6px}
.menu-categorias.tem-antes .seta-categorias.esquerda,
.menu-categorias.tem-depois .seta-categorias.direita{display:grid}

/* esmaecido: mostra que o conteúdo continua, sem tapar o clique */
.menu-categorias::before,
.menu-categorias::after{
  content:''; position:absolute; top:0; bottom:10px; width:44px;
  pointer-events:none; opacity:0; transition:opacity .18s; z-index:2;
}
.menu-categorias::before{left:0; background:linear-gradient(90deg,var(--fundo),transparent)}
.menu-categorias::after{right:0; background:linear-gradient(270deg,var(--fundo),transparent)}
.menu-categorias.tem-antes::before,
.menu-categorias.tem-depois::after{opacity:.95}

/* a marca sem texto não precisa do vão que separava logo e nome */
.marca-cab.so-logo{gap:0}


/* ══════════ logo ══════════
   O logo do cliente é dele. Círculo em volta recorta marca
   horizontal e briga com qualquer identidade já fechada. */
.marca-logo{
  display:block; flex:none;
  height:calc(46px * var(--escala-logo));
  max-width:calc(230px * var(--escala-logo));
}
.marca-logo img{
  height:100%; width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
}

/* ══════════ alinhamento do menu de categorias ══════════
   "safe center" centraliza enquanto cabe e volta a alinhar à
   esquerda quando estoura. Sem o safe, os primeiros itens saem
   para fora da tela e ficam inalcançáveis pela rolagem. */
.menu-categorias.alinhado-centro .trilho-categorias{justify-content:safe center}
.menu-categorias.alinhado-direita .trilho-categorias{justify-content:safe flex-end}
.menu-categorias.alinhado-esquerda .trilho-categorias{justify-content:flex-start}

/* ══════════ categorias em dropdown ══════════
   Pensado para catálogo de distribuidor, com dezenas de
   categorias: filtro, rolagem própria e sombras indicando que há
   mais conteúdo acima ou abaixo. */
.menu-categorias.dropdown{position:relative; padding-bottom:12px}
.gatilho-categorias{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:11px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
  font-size:13.5px; font-weight:600;
}
.gatilho-categorias:hover{border-color:var(--destaque)}
.gatilho-categorias b{
  padding:1px 8px; border-radius:99px;
  background:var(--destaque); color:#12100c; font-size:11px;
}
.gatilho-categorias .giro{transition:transform .18s; opacity:.6}
.gatilho-categorias[aria-expanded="true"] .giro{transform:rotate(180deg)}

.painel-categorias{
  position:absolute; z-index:40; top:calc(100% - 4px); left:18px;
  width:min(360px,calc(100vw - 36px));
  display:none; overflow:hidden;
  background:color-mix(in srgb,var(--fundo) 96%,transparent);
  backdrop-filter:blur(16px);
  border:1px solid var(--card-borda); border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
}
.painel-categorias.aberto{display:block}
.topo-painel{padding:11px; border-bottom:1px solid var(--card-borda)}
.topo-painel input{
  width:100%; padding:9px 12px; font:inherit; font-size:13px; color:var(--texto);
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:9px;
}
.topo-painel input:focus{outline:2px solid var(--destaque); outline-offset:-1px}
.rolagem-categorias{
  max-height:min(60vh,380px); overflow-y:auto; overscroll-behavior:contain;
  padding:7px; scrollbar-width:thin;
}
.rolagem-categorias a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px;
  text-decoration:none; color:inherit; font-size:13.5px;
}
.rolagem-categorias a:hover{background:var(--card-fundo); color:var(--destaque)}
.rolagem-categorias a span{flex:1}
.rolagem-categorias a i{
  font-style:normal; font-size:11px; opacity:.45; font-variant-numeric:tabular-nums;
}
.rolagem-categorias .ic{width:17px; height:17px; color:var(--destaque)}
.sem-resultado{padding:18px 12px; text-align:center; font-size:12.5px; opacity:.45}
.sombra-topo,.sombra-baixo{
  position:absolute; left:0; right:0; height:26px;
  pointer-events:none; opacity:0; transition:opacity .16s;
}
.sombra-topo{top:58px; background:linear-gradient(var(--fundo),transparent)}
.sombra-baixo{bottom:0; background:linear-gradient(transparent,var(--fundo))}
.sombra-topo.on,.sombra-baixo.on{opacity:.92}

/* 02-secoes.css | Cabeca de secao e grades
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ seções ══════════ */

main.corpo{max-width:var(--largura); margin:0 auto; padding:26px 18px 60px}
.secao{margin-bottom:52px; scroll-margin-top:120px}
.cabeca-secao{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  margin-bottom:20px; flex-wrap:wrap;
}
.sobretitulo{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:6px;
  color:var(--destaque); font-size:11px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
}
.sobretitulo .ic{width:14px; height:14px}
.cabeca-secao h2{margin:0; font-size:clamp(26px,4vw,42px); line-height:1.05; letter-spacing:-.5px; text-transform:uppercase}
.cabeca-secao p{margin:0; max-width:360px; font-size:12.5px; opacity:.55; text-align:right}
.divisoria{max-width:var(--largura); margin:0 auto 52px; height:1px; background:var(--card-borda)}
.bloco-texto .cabeca-secao p{text-align:left; max-width:640px; font-size:14px; opacity:.75}

/* ══════════ grades ══════════ */

.grade-cards{display:grid; grid-template-columns:repeat(var(--colunas),minmax(0,1fr)); gap:14px}
.grade-horizontal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.lista-simples{display:flex; flex-direction:column; gap:9px}


/* ══════════ alinhamento de tipografia por bloco ══════════ */
.cabeca-secao.alinha-centro{justify-content:center; text-align:center; flex-direction:column; gap:10px}
.cabeca-secao.alinha-centro p{text-align:center; max-width:620px; margin:0 auto}
.cabeca-secao.alinha-direita{text-align:right}
.cabeca-secao.alinha-direita .sobretitulo{flex-direction:row-reverse}
.conteudo-faixa.alinha-centro{text-align:center}
.conteudo-faixa.alinha-centro p{margin-left:auto; margin-right:auto}
.conteudo-faixa.alinha-direita{text-align:right}
.conteudo-faixa.alinha-direita p{margin-left:auto}

/* 03-cards.css | Cards, selos e botoes de adicionar
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ cards ══════════ */

/*
   overflow VISÍVEL, e é de propósito: o contador de item
   selecionado fica meio para fora do botão e seria decepado por
   um recorte no card. Quem precisa recortar é a foto, logo
   abaixo, que tem overflow e raio próprios.
*/
.card{
  position:relative; overflow:visible; cursor:pointer;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:var(--card-raio);
  transition:transform .18s,border-color .18s;
}
.card:hover{transform:translateY(-3px); border-color:var(--destaque)}
.card .foto{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:rgba(255,255,255,.03);
  border-radius:var(--card-raio) var(--card-raio) 0 0;
}
.card .foto img{width:100%; height:100%; object-fit:cover}
.card .foto.vazia{display:grid; place-items:center; opacity:.2}
.conta-midia{
  position:absolute; left:9px; bottom:9px; padding:2px 8px; border-radius:99px;
  background:rgba(0,0,0,.6); font-size:10.5px;
}
.card .corpo{
  margin:0; max-width:none; min-width:0;
  padding:13px 14px 16px; display:flex; flex-direction:column; gap:6px;
}
.topo-card{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:16px}
.codigo{font-size:10px; letter-spacing:.9px; opacity:.42; text-transform:uppercase}
.card h3{margin:0; font-size:15px; line-height:1.25; font-weight:600}
.card p{margin:0; font-size:12.5px; line-height:1.5; opacity:.6}
.base-card{margin-top:auto; padding-top:6px}
.preco{font-size:17px; font-weight:700; color:var(--destaque); font-variant-numeric:tabular-nums}
.preco s{margin-right:6px; font-size:12.5px; font-weight:400; opacity:.42; color:var(--texto)}
.preco.consulta{font-size:13px; opacity:.6; color:var(--texto); font-weight:500}

/* ── card horizontal ──
   O texto se lê da esquerda nos dois sentidos. Alinhar à direita
   no invertido fazia selo e título "andarem" de um card para o
   outro, como se o padding fosse diferente. A imagem é que troca
   de lado. O botão é filho do corpo, na linha do preço, e é isso
   que faz todos os cards terminarem no mesmo ponto. */
.card.horizontal{display:grid; grid-template-columns:38% 1fr}
.card.horizontal.invertido{grid-template-columns:1fr 38%}
.card.horizontal .foto{
  aspect-ratio:auto; height:100%; min-height:150px;
  border-radius:var(--card-raio) 0 0 var(--card-raio);
}
.card.horizontal.invertido .foto{order:2; border-radius:0 var(--card-raio) var(--card-raio) 0}
.card.horizontal .corpo,
.card.horizontal.invertido .corpo{
  text-align:left; padding:16px 18px; gap:7px;
  display:flex; flex-direction:column;
}
.card.horizontal .topo-card,
.card.horizontal.invertido .topo-card{
  flex-direction:row; justify-content:space-between; align-items:center;
}
.card.horizontal h3{margin:0}
.card.horizontal .base-card,
.card.horizontal.invertido .base-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:auto; padding:8px 0 0; min-height:0;
}
/* guarda: nenhum botão flutuante sobra no card horizontal */
.card.horizontal > .add{display:none}

/* ── produto destacado pela busca ── */
.card.destacado,.linha-item.destacado{
  border-color:var(--destaque);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--destaque) 40%,transparent);
}
.rotulo-alternativas{
  display:block; margin-bottom:8px; font-size:11px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; opacity:.6;
}

.selo{
  padding:2px 9px; border-radius:99px; font-size:9.5px; font-weight:700;
  letter-spacing:.7px; text-transform:uppercase; white-space:nowrap;
}
/* placeholder do grid da lista: existe para reservar a coluna,
   mas não pode ocupar largura nenhuma */
.selo:empty{padding:0}
.selo.neutro{background:rgba(255,255,255,.12)}
.selo.destaque{background:var(--secundaria); color:#fff}
.selo.economia{background:#2f8f45; color:#fff}
.selo.atencao{background:#c9821c; color:#fff}

/* ══════════ botões de adicionar ══════════ */
/*
   REGRA DO ARREDONDAMENTO, declarada uma vez só, aqui.

   Botão ENCOSTADO na borda do card: os dois cantos que tocam a
   borda ficam retos, o canto interno fica arredondado e o canto
   que coincide com o canto do card acompanha o raio do card.
   Sem esse último, o botão sobra para fora da curva, porque
   .card roda com overflow:visible (o contador precisa vazar), e
   não existe recorte para esconder um canto reto.

   Botão SOLTO dentro do card: os quatro cantos arredondados.

   NÃO redeclare border-radius de .add em outro arquivo. Foi assim
   que o card invertido passou três versões com dois cantos
   diferentes dos outros: uma regra morta com quatro classes
   vencia a regra viva com três.
*/

.add{position:relative; border:0; background:var(--destaque); color:#12100c; display:grid; place-items:center}
.add .ic{stroke-width:2.6; width:17px; height:17px}

/* ── encostados no canto inferior direito do card ── */
.add.canto{
  position:absolute; right:0; bottom:0;
  width:42px; height:42px;
  border-radius:18px 0 var(--card-raio) 0;
  padding:8px 0 0 8px;
}
.add.quadrado{
  position:absolute; right:0; bottom:0;
  width:38px; height:38px;
  border-radius:11px 0 var(--card-raio) 0;
}

/* ── soltos: quatro cantos iguais ── */
.add.retangulo{
  position:absolute; right:11px; bottom:11px;
  width:auto; padding:7px 15px; border-radius:9px; font-weight:700; font-size:12.5px;
}
.add.linha{
  position:static; display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:600;
}

/* ── dentro da linha do preço, no card horizontal ──
   Aqui o botão nunca encosta em borda nenhuma: é filho do corpo,
   com o padding do corpo em volta. Logo, quatro cantos iguais,
   nos dois sentidos da imagem. */
.add.na-linha{
  position:static; flex:none; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.add.retangulo.na-linha{
  width:auto; padding:9px 17px; border-radius:10px;
  font-weight:700; font-size:13px;
}
.add.quadrado.na-linha{width:36px; height:36px; border-radius:10px}
.add.na-linha .conta-item{top:-10px; right:-9px; left:auto}

/* ── contador de item já escolhido ──
   Quadrado, grande e vazando para fora do botão, com borda da cor
   do fundo fazendo o recorte. Redondo e pequeno se confundia com
   ícone; encostado no botão não se lia. */
.conta-item{
  position:absolute; top:-11px; right:-9px;
  min-width:23px; height:23px; padding:0 6px;
  border-radius:3px;
  background:var(--secundaria); color:#fff;
  font-size:13px; font-style:normal; font-weight:700;
  display:grid; place-items:center; line-height:1;
  border:2px solid var(--fundo);
  box-shadow:0 2px 7px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums;
}
.add.canto .conta-item{top:-13px; right:-7px}

/* ══════════ modos de exibição da imagem ══════════
   A categoria define o padrão, o item pode contrariar, e a classe
   chega aqui já resolvida por 03-cards.js. Só isto muda entre um
   modo e outro: a proporção da moldura e se a imagem enche ou cabe.

   'completa' é a única que não corta: a moldura solta a proporção
   e a arte manda na altura. Serve para quem padroniza as imagens
   antes de subir. Em grade com imagens de proporções diferentes,
   ela deixa a linha irregular, e isso é esperado. */
.foto.img-quadrada{aspect-ratio:1 / 1}
.foto.img-horizontal{aspect-ratio:4 / 3}
.foto.img-vertical{aspect-ratio:3 / 4}
.foto.img-completa{aspect-ratio:auto}
.foto.img-completa img{height:auto; object-fit:contain}

/* card sem imagem: o corpo assume o card inteiro e o raio de cima
   volta a ser dele, senão sobra um canto reto onde a foto estava */
.card.sem-foto .corpo{border-radius:var(--card-raio)}
.card.horizontal.sem-foto,
.card.horizontal.invertido.sem-foto{grid-template-columns:1fr}

/* no card horizontal a altura é o texto que dá, então 'completa'
   significa caber inteira dentro dessa altura, sem corte */
.card.horizontal .foto.img-completa{height:100%}
.card.horizontal .foto.img-completa img{height:100%; object-fit:contain}

/* ══════════ miniatura na linha da lista ══════════
   Não existia até a 8.9.8. Entra como PRIMEIRA coluna e só quando
   o item manda mostrar, por isso a coluna extra é declarada na
   classe .com-foto: linha sem imagem não paga vão nenhum. */
.mini-foto{
  display:block; width:52px; overflow:hidden; flex:none;
  border-radius:calc(var(--card-raio) * .4);
  background:rgba(255,255,255,.04);
}
.mini-foto img{width:100%; height:100%; object-fit:cover; display:block}
.mini-foto.img-quadrada{aspect-ratio:1 / 1}
.mini-foto.img-horizontal{aspect-ratio:4 / 3}
.mini-foto.img-vertical{aspect-ratio:3 / 4}
.mini-foto.img-completa{aspect-ratio:auto}
.mini-foto.img-completa img{height:auto; object-fit:contain}

/* preço mínimo: o rótulo entra menor e acima do número, para o
   valor continuar sendo a informação que salta primeiro */
.preco.a-partir{display:inline-flex; flex-direction:column; line-height:1.15}
.preco.a-partir small{font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.55}

/* 04-lista.css | Lista simples e bloco agrupado
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ lista simples ══════════ */

/*
   CINCO COLUNAS FIXAS, sempre, mesmo quando o item não tem selo.
   É o que faz item com selo e item sem selo terminarem no mesmo
   ponto. O selo vazio é emitido como marcador em 03-cards.js e
   .selo:empty tira a largura dele.
   overflow visível pelo mesmo motivo do card: o contador vaza.
*/
.linha-item{
  display:grid; grid-template-columns:auto 1fr auto auto minmax(0,auto);
  gap:14px; align-items:center; overflow:visible;
  padding:12px 15px; cursor:pointer;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:calc(var(--card-raio) * .6);
}
.linha-item:hover{border-color:var(--destaque)}
.linha-texto b{display:block; font-size:14px; font-weight:600}
.linha-texto small{display:block; font-size:12px; opacity:.55; margin-top:1px}
.linha-item .selo{justify-self:end}
.linha-item .preco{justify-self:end; min-width:96px; text-align:right; font-size:15px}
.linha-item .add.linha{justify-self:end; white-space:nowrap}

/* ══════════ lista unificada ══════════
   Um bloco só, itens divididos por linhas internas que não
   encostam nas bordas. Compacta cardápio longo. */
.lista-unificada{
  background:var(--card-fundo); border:1px solid var(--card-borda);
  border-radius:var(--card-raio); padding:6px 20px;
}
.lista-unificada .linha-item{
  grid-template-columns:auto 1fr auto auto minmax(0,auto);
  background:none; border:0; border-radius:0; padding:14px 0;
  box-shadow:inset 0 -1px 0 var(--card-borda);
}
.lista-unificada .linha-item:last-child{box-shadow:none}
.lista-unificada .linha-item:hover{background:none}
.lista-unificada .linha-item:hover .linha-texto b{color:var(--destaque)}

/* ══════════ bloco agrupado ══════════ */

.card-agrupado{
  display:grid; grid-template-columns:minmax(240px,38%) 1fr; gap:0; overflow:hidden;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:var(--card-raio);
}
.grupo-foto{position:relative; min-height:280px; background:rgba(255,255,255,.03); display:grid; place-items:center}
.grupo-foto img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.dica-foto{position:absolute; left:12px; bottom:12px; padding:3px 9px; border-radius:99px;
  background:rgba(0,0,0,.6); font-size:10.5px}
.grupo-corpo{padding:24px 26px}
.grupo-corpo h3{margin:0 0 5px; font-size:20px}
.grupo-corpo > p{margin:0 0 18px; font-size:13px; opacity:.6}
.lista-variacoes{display:flex; flex-direction:column}
.variacao{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center;
  overflow:visible; padding:11px 0; border-top:1px solid var(--card-borda);
}
.variacao b{font-size:13.5px; font-weight:500}
.variacao .preco{font-size:14px}
.variacao .add.quadrado{position:static; width:29px; height:29px; border-radius:8px}

/* linha com miniatura: uma coluna a mais, à frente de tudo */
.linha-item.com-foto{grid-template-columns:auto auto 1fr auto auto minmax(0,auto)}
.lista-unificada .linha-item.com-foto{grid-template-columns:auto auto 1fr auto auto minmax(0,auto)}

/* 05-banners.css | Banner de imagem inteira
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ banners ══════════ */

.abertura,.faixa{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  align-items:center; overflow:hidden; margin-bottom:52px;
  border-radius:var(--card-raio); border:1px solid var(--card-borda);
}
.abertura.imagem-esquerda .imagem-faixa,.faixa.imagem-esquerda .imagem-faixa{order:-1}
.abertura.imagem-esquerda .conteudo-faixa,.faixa.imagem-esquerda .conteudo-faixa{text-align:right}
.fundo-primaria{background:linear-gradient(105deg,color-mix(in srgb,var(--destaque) 16%,var(--fundo)),var(--fundo))}
.fundo-secundaria{background:linear-gradient(105deg,color-mix(in srgb,var(--secundaria) 62%,var(--fundo)),var(--fundo))}
.fundo-escuro{background:linear-gradient(105deg,rgba(255,255,255,.06),transparent)}
.conteudo-faixa{padding:44px 42px}
.abertura h2{margin:0 0 14px; font-size:clamp(38px,7vw,74px); line-height:.94; letter-spacing:-2px; text-transform:uppercase}
.faixa h2{margin:0 0 12px; font-size:clamp(28px,5vw,50px); line-height:1; letter-spacing:-1px; text-transform:uppercase}
.conteudo-faixa p{margin:0 0 22px; max-width:400px; font-size:13.5px; opacity:.72}
.abertura.imagem-esquerda .conteudo-faixa p,.faixa.imagem-esquerda .conteudo-faixa p{margin-left:auto}
.botao-faixa{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  background:var(--destaque); color:#12100c; border:0; border-radius:10px; font-weight:700; font-size:14px;
}
.botao-faixa .ic{width:16px; height:16px}
.imagem-faixa{height:100%; min-height:280px}
.imagem-faixa img{width:100%; height:100%; object-fit:cover}
.altura-baixa .imagem-faixa{min-height:200px}
.altura-alta .imagem-faixa{min-height:400px}

/* ── banner de imagem inteira ──
   Estava na camada 8.6 e voltou para cá, que é onde se procura.
   O vão de baixo tem quebra própria no celular, em 09-responsivo. */
.banner-imagem{
  position:relative; display:block; width:100%; margin-bottom:52px;
  /* no celular 52px viram um buraco; ver a quebra em 620px */
  overflow:hidden; border-radius:var(--card-raio); border:1px solid var(--card-borda);
  background:var(--card-fundo); line-height:0;
}
.banner-imagem picture{display:block}
.banner-imagem img{width:100%; height:auto; display:block; object-fit:fill}
.banner-imagem.inteiro-clicavel{cursor:pointer}
.banner-imagem.inteiro-clicavel:hover{border-color:var(--destaque)}
.banner-imagem.inteiro-clicavel:focus-visible{outline:3px solid var(--destaque); outline-offset:2px}


/* ══════════ botão sobre o banner ══════════
   Vive por cima da arte, com degradê garantindo leitura sobre
   qualquer imagem. */
.botao-sobre{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; padding:24px 28px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}
.botao-sobre.lado-esquerda{justify-content:flex-start}
.botao-sobre.lado-direita{justify-content:flex-end}
.botao-sobre .botao-faixa .ic{width:15px; height:15px}

/* 06-janelas.css | Janelas e ficha do produto
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ janelas ══════════ */

.janela{position:fixed; inset:0; z-index:60; display:none}
.janela.aberta{display:block}
.veu{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px)}
.folha{
  position:absolute; right:0; top:0; bottom:0; width:min(480px,100%);
  background:var(--fundo); border-left:1px solid var(--card-borda);
  display:flex; flex-direction:column;
  animation:entra .22s cubic-bezier(.2,.8,.3,1);
}
.folha.central{
  right:auto; top:50%; left:50%; bottom:auto; transform:translate(-50%,-50%);
  width:min(760px,94vw); max-height:90vh; border:1px solid var(--card-borda); border-radius:16px;
}
@keyframes entra{from{transform:translateX(100%)}}
.folha.central{animation:aparece .2s ease}
@keyframes aparece{from{opacity:0; transform:translate(-50%,-46%)}}

.cabeca-janela{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--card-borda); flex:none;
}
.cabeca-janela h2{margin:0; font-size:16px; flex:1}
/*
   Voltar para a lista de itens. Sem ele, conferir o pedido no meio
   do checkout obrigava a fechar tudo e reabrir do começo. Fica à
   esquerda do título porque é para lá que ele leva, e porque é onde
   a mão do polegar já procura.
*/
.voltar-janela{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:9px;
  color:var(--texto);
}
.voltar-janela:hover{border-color:var(--destaque); color:var(--destaque)}
.fechar-janela{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:9px;
}
.miolo-janela{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px}
.pe-janela{padding:16px 20px; border-top:1px solid var(--card-borda); background:var(--card-fundo); flex:none}

.vazio{padding:40px 20px; text-align:center; opacity:.45; font-size:13.5px}

/* ══════════ ficha do produto ══════════ */

.galeria{margin-bottom:20px}
.galeria-principal{border-radius:12px; overflow:hidden; background:rgba(255,255,255,.03); aspect-ratio:4/3}
.galeria-principal img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.galeria-tiras{display:flex; gap:8px; margin-top:8px; overflow-x:auto; scrollbar-width:none}
.galeria-tiras::-webkit-scrollbar{display:none}
.tira{
  width:66px; height:66px; flex:none; padding:0; overflow:hidden;
  border:1px solid var(--card-borda); border-radius:9px; background:none;
}
.tira.ativa{border-color:var(--destaque)}
.tira img{width:100%; height:100%; object-fit:cover}
.ficha-texto h2{margin:6px 0 8px; font-size:22px; line-height:1.2}
.ficha-texto p{margin:0 0 12px; font-size:13.5px; opacity:.68}
.ficha-texto .limite{color:var(--secundaria); font-size:12px; opacity:1}

.grupo{margin-top:22px; padding-top:16px; border-top:1px solid var(--card-borda)}
.grupo header{display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap}
.grupo header b{font-size:14.5px}
.grupo header small{font-size:11.5px; opacity:.5}
.obrigatorio{
  margin-left:auto; padding:2px 8px; border-radius:99px;
  background:var(--secundaria); color:#fff; font-size:9.5px; letter-spacing:.6px; text-transform:uppercase;
}
.opcao{
  display:flex; align-items:center; gap:11px; margin-bottom:7px; padding:10px 13px;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:10px;
}
.opcao.clicavel{cursor:pointer}
.opcao:has(input:checked){border-color:var(--destaque)}
/* :not(.amostra) porque a amostra de cor tambem e um <span> dentro
   da opcao, e este seletor (0,1,1) vence o flex:none dela (0,1,0)
   por especificidade, esticando a bolinha de 26px para a largura
   toda da linha. Medido: 26px virava 322px no desktop. */
.opcao span:not(.amostra){flex:1; font-size:13.5px}
.opcao i{font-style:normal; font-size:12.5px; color:var(--destaque); font-weight:600}
.opcao input[type=radio]{accent-color:var(--destaque); width:17px; height:17px}

.passo{display:flex; align-items:center; gap:3px; background:rgba(255,255,255,.05); border-radius:9px; padding:2px}
.passo button{
  width:29px; height:29px; display:grid; place-items:center;
  background:none; border:0; border-radius:7px; opacity:.75;
}
.passo button:hover{background:rgba(255,255,255,.1); opacity:1}
.passo b{min-width:26px; text-align:center; font-size:13.5px; font-variant-numeric:tabular-nums}

.especificacoes{margin-top:22px; padding-top:16px; border-top:1px solid var(--card-borda)}
.especificacoes b{display:block; margin-bottom:10px; font-size:14px}
.especificacoes dl{margin:0; display:flex; flex-direction:column; gap:6px}
.especificacoes div{display:flex; justify-content:space-between; gap:16px; font-size:13px; padding:5px 0; border-bottom:1px solid var(--card-borda)}
.especificacoes dt{opacity:.55}
.especificacoes dd{margin:0; text-align:right}

.pe-ficha{display:flex; align-items:center; gap:12px}
.pe-ficha .passo{background:rgba(255,255,255,.08)}
.total-ficha{margin-left:auto; text-align:right}
.total-ficha small{display:block; font-size:10.5px; opacity:.5}
.total-ficha b{font-size:17px; color:var(--destaque); font-variant-numeric:tabular-nums}
.botao-cheio{
  width:100%; padding:14px; border:0; border-radius:11px;
  background:var(--destaque); color:#12100c; font-weight:700; font-size:15px;
}
.botao-cheio:disabled{opacity:.4; cursor:not-allowed}
.pe-ficha .botao-cheio{width:auto; flex:1; padding:13px 20px; font-size:14px}


/* ══════════ limite de escolhas visível na ficha ══════════ */
.contagem-grupo{
  margin-left:auto; padding:2px 9px; border-radius:99px;
  background:rgba(255,255,255,.09); font-size:10.5px;
  font-variant-numeric:tabular-nums; opacity:.75;
}
.grupo.completo .contagem-grupo{background:var(--destaque); color:#12100c; opacity:1; font-weight:700}
.grupo.completo .obrigatorio{display:none}
.opcao.escolhida{border-color:var(--destaque)}
.passo button:disabled{opacity:.22; cursor:default}
.passo button:disabled:hover{background:none}

/* ══════════ aviso de disponibilidade no fechamento ══════════
   Discreto por padrão. Em evidência ganha a cor de destaque, para
   quando o estoque é curto e a expectativa precisa ser contida
   antes do envio, não depois. */
.aviso-disponibilidade{
  margin:14px 0 0; padding:11px 13px; border-radius:10px;
  font-size:12px; line-height:1.55; opacity:.7;
  background:var(--card-fundo); border:1px solid var(--card-borda);
}
.aviso-disponibilidade.evidencia{
  opacity:1; font-size:12.5px; font-weight:600; color:var(--texto);
  background:color-mix(in srgb,var(--destaque) 13%,transparent);
  border-color:color-mix(in srgb,var(--destaque) 55%,transparent);
}

/* ══════════ amostra de cor ou textura na opção ══════════
   A amostra fica ANTES do nome e nunca no lugar dele. Cor sem
   nome não vai para o WhatsApp, e é o nome que o vendedor lê do
   outro lado. A borda clara existe para que amostra branca ou
   quase branca continue visível sobre o card. */
.amostra{
  flex:none; width:26px; height:26px; display:block;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  overflow:hidden;
}
.amostra.circulo{border-radius:50%}
.amostra.quadrado{border-radius:5px}
.amostra img{width:100%; height:100%; object-fit:cover; display:block}
.opcao.com-amostra{display:flex; align-items:center; gap:11px}
.opcao.escolhida .amostra{
  border-color:var(--destaque);
  box-shadow:0 0 0 2px var(--destaque), inset 0 0 0 1px rgba(0,0,0,.22);
}

/* 07-carrinho.css | Carrinho e checkout
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ carrinho ══════════ */

.item-carrinho{
  display:grid; grid-template-columns:1fr auto auto auto; gap:12px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--card-borda);
}
.item-texto b{display:block; font-size:14px}
.item-texto .codigo{display:inline-block; margin-top:2px}
.item-texto small{display:block; font-size:11.5px; opacity:.55; margin-top:3px}
.item-texto em{display:block; font-size:11.5px; opacity:.5; font-style:italic; margin-top:2px}
.item-valor{font-size:13.5px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.tirar{width:30px; height:30px; display:grid; place-items:center; background:none; border:0; opacity:.4}
.tirar:hover{opacity:1; color:var(--secundaria)}

.linha-resumo{display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; opacity:.75}
.linha-resumo.total{
  margin-top:6px; padding-top:12px; border-top:1px solid var(--card-borda);
  font-size:17px; font-weight:700; opacity:1;
}
.linha-resumo.total b{color:var(--destaque)}
.aviso-minimo{margin:10px 0 0; padding:10px 12px; border-radius:9px;
  background:color-mix(in srgb,var(--secundaria) 18%,transparent);
  color:var(--secundaria); font-size:12.5px}

/* ══════════ checkout ══════════ */

.bloco{margin:0 0 18px; padding:0; border:0}
.bloco legend{padding:0; margin-bottom:10px; font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--destaque)}
#formCheckout label{display:block; margin-bottom:10px}
#formCheckout label > span{display:block; margin-bottom:5px; font-size:12px; opacity:.62}
#formCheckout input,#formCheckout select,#formCheckout textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--texto);
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:10px;
}
#formCheckout input:focus,#formCheckout select:focus,#formCheckout textarea:focus{
  outline:2px solid var(--destaque); outline-offset:-1px; border-color:transparent;
}
#formCheckout textarea{resize:vertical}
.escolhas-linha{display:flex; gap:9px}
.escolhas-coluna{display:flex; flex-direction:column; gap:8px}
.escolha{
  display:flex; align-items:center; gap:10px; flex:1; margin:0 !important;
  padding:12px 15px; cursor:pointer;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:10px;
}
.escolha:has(input:checked){border-color:var(--destaque)}
.escolha input{width:17px !important; height:17px; accent-color:var(--destaque); padding:0 !important}
.escolha span{margin:0 !important; font-size:14px; opacity:1 !important}
.aviso-caixa{
  margin:0 0 16px; padding:11px 14px; border-radius:10px; font-size:12.5px;
  background:color-mix(in srgb,var(--destaque) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--destaque) 40%,transparent);
}
.bloco-privacidade{
  margin-top:18px; padding:14px; border-radius:11px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
}
.bloco-privacidade p{margin:0; font-size:12px; line-height:1.6; opacity:.7}
.link-privacidade{
  background:none; border:0; padding:0; color:var(--link);
  text-decoration:underline; font-size:inherit;
}
.aceite{display:flex !important; align-items:flex-start; gap:10px; margin:12px 0 0 !important; cursor:pointer}
.aceite input{width:18px !important; height:18px; margin-top:1px; accent-color:var(--destaque); padding:0 !important; flex:none}
.aceite span{margin:0 !important; font-size:12.5px; opacity:.85 !important}

.total-checkout{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:13px}
.total-checkout span{opacity:.6}
.total-checkout b{font-size:19px; color:var(--destaque); font-variant-numeric:tabular-nums}


/* ══════════ esvaziar o pedido ══════════
   Discreto de propósito: é a única saída de um pedido guardado,
   e ninguém deve apertá-lo por engano. */
.esvaziar{
  display:block; width:100%; margin-top:12px; padding:9px;
  background:none; border:1px solid var(--card-borda); border-radius:9px;
  color:var(--texto); font-size:12px; opacity:.55;
}
.esvaziar:hover{opacity:1; border-color:var(--secundaria); color:var(--secundaria)}

/* ══════════ observações dentro do pedido ══════════
   O campo vive aqui, não só no checkout: é olhando o pedido
   montado que a pessoa lembra do detalhe.
   Os !important são contra o visual padrão do navegador no
   textarea, que reaparecia porque o seletor antigo não alcançava
   o campo dentro do label. */
.obs-carrinho{margin-top:18px; padding-top:16px; border-top:1px solid var(--card-borda)}
.obs-carrinho label{display:block; margin:0}
.obs-carrinho label > span{
  display:block; margin-bottom:7px; font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--destaque);
}
.obs-carrinho small{display:block; margin-top:7px; font-size:11.5px; opacity:.45}
.obs-carrinho textarea,
#obsCarrinho textarea,
#observacoesCarrinho{
  width:100% !important;
  padding:12px 14px !important;
  font:inherit !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:var(--texto) !important;
  background:var(--card-fundo) !important;
  border:1px solid var(--card-borda) !important;
  border-radius:11px !important;
  resize:vertical;
  -webkit-appearance:none; appearance:none;
  box-shadow:none;
}
#observacoesCarrinho::placeholder{color:var(--texto); opacity:.38}
#observacoesCarrinho:focus,
.obs-carrinho textarea:focus{
  outline:2px solid var(--destaque); outline-offset:-1px; border-color:transparent !important;
}

/* ══════════ cupom de desconto ══════════
   Fica depois do resumo, que é onde a pessoa olha o total e pensa
   "será que tenho desconto". O retorno é uma linha só, verde ou
   vermelha, e some sozinho quando o campo é limpo. */
.bloco-cupom{margin-top:16px; padding-top:14px; border-top:1px solid var(--card-borda)}
.bloco-cupom label{display:block; margin:0}
.bloco-cupom label > span:first-child{
  display:block; margin-bottom:7px; font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--destaque);
}
.linha-cupom{display:flex; gap:8px}
.linha-cupom input{
  flex:1; min-width:0; padding:11px 13px; font:inherit; font-size:14px;
  color:var(--texto); background:var(--card-fundo);
  border:1px solid var(--card-borda); border-radius:10px;
  text-transform:uppercase; letter-spacing:.6px;
}
.linha-cupom input::placeholder{text-transform:none; letter-spacing:0; opacity:.4}
.linha-cupom input:focus{outline:2px solid var(--destaque); outline-offset:-1px; border-color:transparent}
.btn-cupom{
  flex:none; padding:0 17px; border:0; border-radius:10px;
  background:var(--destaque); color:#12100c; font-weight:700; font-size:13px;
}
.retorno-cupom{margin:8px 0 0; font-size:12.5px; min-height:0}
.retorno-cupom:empty{display:none}
.retorno-cupom.ok{color:#4cc46a}
.retorno-cupom.erro{color:var(--secundaria)}
.bloco-cupom small{display:block; margin-top:9px; font-size:11.5px; line-height:1.55; opacity:.45}
.linha-resumo.desconto b{color:#4cc46a}

/* 08-auxiliares.css | Busca, informacoes, lupa, rodape e toast
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════ busca, informações, privacidade ══════════ */

#campoBusca{
  width:100%; padding:13px 15px; font:inherit; color:var(--texto);
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:11px;
}
.resultado{
  display:grid; grid-template-columns:52px 1fr auto; gap:13px; align-items:center; width:100%;
  padding:9px; margin-bottom:7px; text-align:left;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:11px;
}
.resultado:hover{border-color:var(--destaque)}
.resultado img,.resultado .sem-foto{
  width:52px; height:52px; border-radius:8px; object-fit:cover;
  background:rgba(255,255,255,.04); display:grid; place-items:center; opacity:.9;
}
.res-texto b{display:block; font-size:13.5px}
.res-texto small{display:block; font-size:11px; opacity:.45; margin-top:1px}

.lista-info{display:flex; flex-direction:column; gap:11px; margin:18px 0}
.lista-info div{display:flex; gap:11px; align-items:flex-start; font-size:13.5px}
.lista-info .ic{color:var(--destaque); margin-top:2px}
.slogan{margin:4px 0 0; opacity:.6; font-size:13.5px}
.estado-loja{display:inline-block; padding:5px 13px; border-radius:99px; font-size:12px; font-weight:600}
.estado-loja.aberto{background:#2f8f45; color:#fff}
.estado-loja.fechado{background:var(--secundaria); color:#fff}
.nota{margin-top:16px; font-size:12px; opacity:.5; line-height:1.6}
#textoPrivacidade{margin:0; white-space:pre-wrap; font-size:13.5px; line-height:1.75; opacity:.85}

/* ══════════ lupa ══════════ */

#lupa .veu{background:rgba(0,0,0,.93)}
.palco-lupa{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:56px 20px; pointer-events:none;
}
.palco-lupa img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; pointer-events:auto}
.nav-lupa{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:0; border-radius:50%; color:#fff;
}
#lupaAnterior{left:16px} #lupaProxima{right:16px}
#fecharLupa{position:absolute; top:16px; right:16px; z-index:2}
#contaLupa{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  padding:5px 14px; border-radius:99px; background:rgba(255,255,255,.12); font-size:12.5px; z-index:2}

/* ══════════ rodapé ══════════ */

.rodape{border-top:1px solid var(--card-borda); background:rgba(0,0,0,.28)}
.colunas-rodape,.faixa-rodape{max-width:var(--largura); margin:0 auto; padding:38px 18px}
.colunas-rodape{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px}
.faixa-rodape{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:20px 18px}
.marca-rodape{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.faixa-rodape .marca-rodape{margin:0}
.marca-rodape img{width:44px; height:44px; border-radius:50%; object-fit:contain;
  border:1px solid var(--card-borda); background:var(--card-fundo)}
.marca-rodape b{display:block; font-size:14px; text-transform:uppercase; letter-spacing:.5px}
.marca-rodape small{display:block; font-size:11.5px; opacity:.55}
.rodape h4{margin:0 0 12px; font-size:10.5px; font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--destaque)}
.rodape p{margin:0 0 7px; font-size:12.5px; opacity:.62; line-height:1.65}
.redes{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px}
.faixa-rodape .redes{margin:0; margin-left:auto}
.redes a{
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  color:var(--rede-icone,var(--destaque));
  background:var(--rede-fundo,transparent);
  border:1px solid var(--rede-borda,var(--card-borda));
  transition:transform .15s;
}
.redes a:hover{transform:translateY(-2px)}
.fim-rodape{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11.5px; opacity:.5}
.assinatura{display:block; margin-top:14px; font-size:11px; opacity:.45}

/* ══════════ toast ══════════ */

#toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,160%); z-index:80;
  max-width:min(440px,92vw); padding:13px 22px; border-radius:11px;
  background:var(--destaque); color:#12100c; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.5); transition:transform .25s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
#toast.on{transform:translate(-50%,0)}


/* ══════════ área de entrega por raio ══════════ */
.bloco-area{margin:4px 0 12px}
.verificar-area{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 15px; border-radius:11px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
}
.verificar-area span{flex:1; min-width:150px; font-size:12.5px; opacity:.75}
.btn-area{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:9px; border:0;
  background:var(--destaque); color:#12100c; font-weight:600; font-size:12.5px;
}
.btn-area:disabled{opacity:.55}
.resultado-area{margin-top:10px; padding:13px 15px; border-radius:11px}
.resultado-area.dentro{
  display:flex; align-items:center; gap:10px; font-size:12.5px;
  background:color-mix(in srgb,#2f8f45 15%,transparent);
  border:1px solid color-mix(in srgb,#2f8f45 45%,transparent);
}
.resultado-area.dentro .ic{color:#4cc46a}
.resultado-area.fora{
  background:color-mix(in srgb,var(--secundaria) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--secundaria) 45%,transparent);
}
.resultado-area.fora b{display:block; margin-bottom:5px; font-size:13.5px; color:var(--secundaria)}
.resultado-area.fora p{margin:0 0 12px; font-size:12.5px; line-height:1.6; opacity:.82}

/* ══════════ voltar ao topo ══════════ */
#voltarTopo{
  position:fixed; right:18px; bottom:22px; z-index:55;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--card-borda);
  background:color-mix(in srgb,var(--fundo) 88%,transparent);
  backdrop-filter:blur(10px); color:var(--texto);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .2s,transform .2s,border-color .15s;
}
#voltarTopo.on{opacity:.9; transform:translateY(0); pointer-events:auto}
#voltarTopo:hover{opacity:1; border-color:var(--destaque); color:var(--destaque)}
#voltarTopo .ic{transform:rotate(180deg)}
body.com-itens #voltarTopo{bottom:22px}

/* ══════════ rodapé ══════════
   Logo sem moldura, e link com a cor herdada: azul de navegador
   dentro da assinatura destoa de qualquer identidade. */
.marca-rodape img{
  width:auto; height:44px; max-width:180px;
  border:0; background:none; border-radius:0; object-fit:contain;
}
.rodape a,
.assinatura a,
.assinatura-rodape a,
.fim-rodape a{color:inherit; text-decoration:none}
.rodape .assinatura a:hover,
.assinatura-rodape a:hover,
.fim-rodape a:hover{color:var(--destaque); text-decoration:underline}
.assinatura,.fim-rodape .assinatura{opacity:.5}
.assinatura a b,.assinatura-rodape a b{font-weight:700}

/* 09-responsivo.css | Quebras de tela do nucleo
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem.

   DONO UNICO DAS QUEBRAS DE TELA. Antes da 8.9.7 havia regra de
   breakpoint espalhada por cinco camadas historicas, e varias
   delas nunca chegavam a valer: eram sobrescritas por outra
   camada mais adiante. Tudo o que responde a largura de tela
   mora aqui, e so aqui. */

/* ══════════ TABLET ══════════ */
@media (max-width:960px){
  .grade-cards{grid-template-columns:repeat(var(--colunas-tablet),minmax(0,1fr))}
  .grade-horizontal{grid-template-columns:1fr}
  .abertura,.faixa{grid-template-columns:1fr}
  .abertura.imagem-esquerda .imagem-faixa,.faixa.imagem-esquerda .imagem-faixa{order:0}
  .abertura.imagem-esquerda .conteudo-faixa,.faixa.imagem-esquerda .conteudo-faixa{text-align:left}
  .conteudo-faixa{padding:32px 26px}
  .colunas-rodape{grid-template-columns:1fr; gap:26px}
  .cabeca-secao p{text-align:left; max-width:100%}

  /* ── card horizontal: o zigue-zague some ──
     No estreito a imagem fica sempre em cima e o texto embaixo,
     o que é previsível e não quebra. */
  .card.horizontal,
  .card.horizontal.invertido{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .card.horizontal .foto,
  .card.horizontal.invertido .foto{
    order:0; aspect-ratio:16 / 9; height:auto; min-height:0;
    border-radius:var(--card-raio) var(--card-raio) 0 0;
  }
  .card.horizontal .corpo,
  .card.horizontal.invertido .corpo{order:1; text-align:left}

  /* ── bloco agrupado ──
     A foto vira uma faixa de proporção fixa e o corpo desce
     inteiro. Antes a foto tinha altura mínima e máxima brigando
     entre si, e o conteúdo escorregava por cima. */
  .card-agrupado{
    position:relative; overflow:hidden;
    grid-template-columns:1fr; grid-template-rows:auto auto;
  }
  .grupo-foto{
    position:relative; min-height:0; max-height:none;
    aspect-ratio:16 / 10; width:100%; overflow:hidden;
  }
  .grupo-foto img{width:100%; height:100%; object-fit:cover; display:block}
  .dica-foto{
    position:absolute; top:auto; left:auto; right:10px; bottom:10px;
    z-index:2; margin:0;
    background:rgba(0,0,0,.72); backdrop-filter:blur(4px);
  }
  .grupo-corpo{position:relative; z-index:1; padding:18px 16px 14px}
  .grupo-corpo h3{margin:0 0 4px; font-size:18px; line-height:1.2}
  .grupo-corpo > p{margin:0 0 14px}
  .lista-variacoes{margin:0}
}

/* ══════════ CELULAR ══════════ */
@media (max-width:620px){
  .grade-cards{grid-template-columns:repeat(var(--colunas-mobile),minmax(0,1fr))}

  /* ── CABEÇALHO ──
     Logo em cima, nome logo abaixo do logo, e esse conjunto na
     MESMA linha da busca, do menu e da sacola. Antes o nome ficava
     ao lado do logo, empurrava as ações e elas caíam para a linha
     de baixo. */
  .cabecalho{flex-wrap:wrap; row-gap:6px; align-items:center; gap:10px}
  .marca-cab{
    flex-direction:column; align-items:flex-start; gap:5px;
    min-width:0; max-width:calc(100% - 150px);
  }
  .marca-nome{min-width:0; max-width:100%}
  .marca-nome b{
    font-size:13.5px; letter-spacing:.3px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
  }
  .marca-nome small{display:none}
  .marca-logo{max-width:calc(150px * var(--escala-logo))}
  .acoes-cab{flex:none}

  /* o aviso de fechado desce para uma faixa própria, largura toda.
     flex-basis é o que força a quebra; width sozinho não força. */
  .estado-topo{
    order:5; flex:0 0 100%; width:100%; max-width:100%;
    text-align:center; padding:5px 10px; font-size:10px; border-radius:8px;
    overflow:hidden; text-overflow:ellipsis;
  }

  /* No celular o cabeçalho encolhe: as ações secundárias somem e
     voltam pelo botão de três pontos, que só aparece aqui. */
  .acao-cab.secundaria,.nivel-zoom{display:none}
  .mais-acoes{display:grid}
  body.acoes-abertas .acao-cab.secundaria{display:grid}
  body.acoes-abertas .acoes-cab{flex-wrap:wrap; justify-content:flex-end}
  .botao-pedido span{display:none}
  .botao-pedido{padding:8px 11px}

  /* ── MENU DE CATEGORIAS ──
     O trilho passa a sangrar até a borda: assim a categoria que
     está saindo aparece cortada pela metade, que é o sinal de que
     há mais coisa para o lado. As setas cuidam do resto. */
  .menu-categorias{padding:0 0 10px}
  .trilho-categorias{padding-left:18px; padding-right:18px; scroll-padding-left:18px}
  .painel-categorias{left:14px; right:14px; width:auto}

  /* ── VÃOS: no estreito, 52px viram buraco ── */
  .banner-imagem{margin-bottom:24px}
  .secao{margin-bottom:34px}
  .divisoria{margin-bottom:34px}

  /* cabeça de seção: no desktop o gap de 28px separa título e texto
     lado a lado. Ao empilhar, esse mesmo gap vira um vão vertical
     grande demais entre o nome da categoria e a descrição. */
  .cabeca-secao{gap:8px; margin-bottom:16px}
  .cabeca-secao.alinha-centro{gap:8px}

  /* ── CARDS ── */
  .card.horizontal .foto,
  .card.horizontal.invertido .foto{aspect-ratio:4 / 3}
  .card.horizontal .corpo,
  .card.horizontal.invertido .corpo{padding:14px 15px}
  .card.horizontal .base-card,
  .card.horizontal.invertido .base-card{
    flex-wrap:wrap; row-gap:10px; padding-bottom:0;
  }
  .add.retangulo.na-linha{flex:1; min-width:130px}

  /* ── LISTA SIMPLES ──
     Preço e botão em linha própria, nunca sobrepostos. As áreas
     nomeadas substituem a contagem de colunas do desktop. */
  .linha-item{
    grid-template-columns:1fr auto;
    grid-template-areas:"cod cod" "texto texto" "selo selo" "preco botao";
    row-gap:9px;
  }
  /* com miniatura, a foto ocupa a coluna da esquerda ao longo do
     código e do texto: a linha continua com quatro faixas, só que
     a imagem segura as duas primeiras */
  .linha-item.com-foto{
    grid-template-columns:auto 1fr;
    grid-template-areas:"foto cod" "foto texto" "selo selo" "preco botao";
  }
  .linha-item .mini-foto{grid-area:foto; align-self:start; width:64px}
  .linha-item > .codigo{grid-area:cod}
  .linha-item .linha-texto{grid-area:texto}
  .linha-item .selo{grid-area:selo; justify-self:start}
  .linha-item .preco{grid-area:preco; justify-self:start; text-align:left; min-width:0}
  .linha-item .add.linha{grid-area:botao}
  .lista-unificada{padding:4px 14px}

  /* ── BLOCO AGRUPADO ──
     O preço desce para a segunda linha em vez de espremer o nome. */
  .grupo-foto{aspect-ratio:3 / 2}
  .grupo-corpo{padding:16px 14px 14px}
  .dica-foto{right:8px; bottom:8px; font-size:10px}
  .variacao{
    grid-template-columns:1fr auto;
    grid-template-areas:"nome botao" "preco botao";
    row-gap:2px; column-gap:12px; align-items:center;
  }
  .variacao b{grid-area:nome}
  .variacao .preco{grid-area:preco; font-size:13px}
  .variacao .add{grid-area:botao; align-self:center}
  .variacao .codigo{display:none}

  /* ── BANNER E FICHA ── */
  .botao-sobre{padding:16px}
  .botao-sobre.lado-direita,.botao-sobre.lado-esquerda{justify-content:stretch}
  .botao-sobre .botao-faixa{width:100%; justify-content:center}
  .folha{width:100%; border-left:0}
  .folha.central{width:100%; max-height:100%; top:0; left:0; transform:none; border-radius:0; height:100%}
  .escolhas-linha{flex-direction:column}
  .pe-ficha{flex-wrap:wrap}
  .pe-ficha .botao-cheio{width:100%; flex:none; order:3}

  /* ── VOLTAR AO TOPO ── */
  #voltarTopo{right:14px; bottom:16px; width:40px; height:40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

@media print{
  .topo-fixo,.janela,#toast,.add,.botao-pedido{display:none !important}
  body{background:#fff; color:#000}
  .card{break-inside:avoid; border:1px solid #ccc}
}

/* 10-flipbook.css | Modo flipbook
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   MODO FLIPBOOK
   ══════════════════════════════════════════════════════════ */

/*
   .area-flip é o quadro fixo. Setas e zoom são filhos dela,
   não do palco, para não se mexerem quando a página é ampliada.
*/
.area-flip{
  position:relative;
  --altura-flip:calc(100vh - 270px);
  --zoom-flip:1;
  min-height:min(var(--altura-flip),86vh);
}
.palco-flip{
  position:absolute; inset:0;
  overflow:auto; overscroll-behavior:contain;
  display:flex; align-items:center; justify-content:center;
  scrollbar-width:thin;
}
.palco-flip.ampliado{cursor:grab; align-items:flex-start; justify-content:flex-start}
.palco-flip.arrastando{cursor:grabbing}
.palco-flip.arrastando *{pointer-events:none}

.tapete{
  display:flex; align-items:center; justify-content:center;
  gap:0; margin:auto; padding:4px;
  min-width:100%; min-height:100%;
}
.folha-atual{
  position:relative; flex:none;
  height:calc(min(var(--altura-flip),86vh) * var(--zoom-flip));
  transition:height .16s ease;
}
.folha-atual img{
  width:100%; height:100%; display:block; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
/* na dupla, a lombada fica no meio e as quinas externas arredondam */
.tapete .folha-atual:first-child img{border-radius:4px 0 0 4px}
.tapete .folha-atual:last-child img{border-radius:0 4px 4px 0}
.tapete .folha-atual:only-child img{border-radius:4px}

.ponto-flip{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  width:32px; height:32px; padding:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--destaque); color:#12100c; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 3px 12px rgba(0,0,0,.5);
  animation:pulsa 2.4s ease-in-out infinite;
  touch-action:manipulation;
}
.ponto-flip .ic{stroke-width:2.6; width:16px; height:16px}
.ponto-flip .conta-item{top:-10px; right:-11px; border-color:rgba(255,255,255,.85)}
.ponto-flip.destacado{
  animation:none;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--destaque) 55%,transparent),0 3px 12px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) scale(1.25);
}
@keyframes pulsa{
  0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 0 color-mix(in srgb,var(--destaque) 60%,transparent)}
  50%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 11px transparent}
}

.seta-flip{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--card-borda);
  background:color-mix(in srgb,var(--fundo) 84%,transparent);
  backdrop-filter:blur(8px); color:var(--texto); opacity:.9;
}
.seta-flip:hover:not(:disabled){opacity:1; border-color:var(--destaque); color:var(--destaque)}
.seta-flip:disabled{opacity:.2; cursor:default}
.seta-flip.esquerda{left:10px}
.seta-flip.direita{right:10px}

.controles-zoom{
  position:absolute; right:10px; top:calc(50% + 42px); z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.controles-zoom button{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px; border:1px solid var(--card-borda);
  background:color-mix(in srgb,var(--fundo) 84%,transparent);
  backdrop-filter:blur(8px); color:var(--texto); opacity:.9;
}
.controles-zoom button:hover:not(:disabled){opacity:1; border-color:var(--destaque); color:var(--destaque)}
.controles-zoom button:disabled{opacity:.25; cursor:default}
.nivel-zoom-flip{
  padding:3px 8px; border-radius:7px; font-size:11px; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--fundo) 84%,transparent);
  border:1px solid var(--card-borda); opacity:.8; white-space:nowrap;
}

.rodape-flip{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 0 4px;
}
.rodape-flip button{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--card-borda);
  background:var(--card-fundo); color:var(--texto);
}
.rodape-flip button:hover:not(:disabled){border-color:var(--destaque); color:var(--destaque)}
.rodape-flip button:disabled{opacity:.25; cursor:default}
.paginacao{font-size:13.5px; min-width:96px; text-align:center; font-variant-numeric:tabular-nums; opacity:.75}

/* ── rodapé fino do flipbook ── */
.rodape.fino{background:none; border-top:1px solid var(--card-borda)}
.linhas-rodape{
  max-width:var(--largura); margin:0 auto; padding:12px 18px 16px; text-align:center;
}
.atalhos-rodape{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; margin-bottom:6px;
}
.atalhos-rodape button{
  background:none; border:0; padding:2px 0;
  font-size:12px; color:var(--texto); opacity:.7;
}
.atalhos-rodape button:hover{opacity:1; color:var(--destaque); text-decoration:underline}
.atalhos-rodape .risco{opacity:.22; font-size:12px}
.assinatura-rodape small,.assinatura-rodape a{font-size:11px; opacity:.45; text-decoration:none; color:inherit}
.assinatura-rodape a:hover{opacity:.9; color:var(--destaque); text-decoration:underline}

/* redes dentro da janela de informações */
.redes-info{margin:16px 0 4px; justify-content:flex-start}

/* ── tela cheia: só o catálogo ── */
body.tela-cheia .rodape .colunas-rodape,
body.tela-cheia .rodape .faixa-rodape,
body.tela-cheia .menu-categorias,
body.tela-cheia .faixa-vendedor,
body.tela-cheia #voltarTopo{display:none !important}
body.tela-cheia .rodape.fino .atalhos-rodape{display:none}
body.tela-cheia .corpo{padding:4px 10px 0; max-width:100%}
body.tela-cheia .area-flip{--altura-flip:calc(100vh - 150px)}
body.tela-cheia .marca-nome small{display:none}
body.tela-cheia .rodape{border:0}
body.tela-cheia .linhas-rodape{padding:2px 18px 8px}

@media (max-width:900px){
  .area-flip{--altura-flip:calc(100vh - 250px)}
}
@media (max-width:620px){
  .area-flip{--altura-flip:calc(100vh - 230px)}
  .seta-flip{width:38px; height:38px}
  .seta-flip.esquerda{left:2px}
  .seta-flip.direita{right:2px}
  .controles-zoom{right:4px; top:auto; bottom:8px}
  .controles-zoom button{width:34px; height:34px}
  .paginacao{min-width:74px}
}

/* 11-ajustes-8-1.css | Camada historica 8.1
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   AJUSTES DA VERSÃO 8.1
   ══════════════════════════════════════════════════════════ */

/* ── logo livre, sem moldura ──
   O logo do cliente é dele. Círculo em volta recorta marca
   horizontal e briga com qualquer identidade já fechada. */
.marca-logo{
  display:block; flex:none;
  height:calc(46px * var(--escala-logo));
  max-width:calc(230px * var(--escala-logo));
}
.marca-logo img{
  height:100%; width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
}
.marca-rodape img{
  width:auto; height:44px; max-width:180px;
  border:0; background:none; border-radius:0; object-fit:contain;
}

/* ── contador de item selecionado ──
   Maior, quadrado e acima do botão, para não ser cortado pela
   borda do card e deixar claro que o item já está no pedido. */
.card,.linha-item,.variacao{overflow:visible}
.card .foto{border-radius:var(--card-raio) var(--card-raio) 0 0;overflow:hidden}
.card.horizontal .foto{border-radius:var(--card-raio) 0 0 var(--card-raio)}
.card.horizontal.invertido .foto{border-radius:0 var(--card-raio) var(--card-raio) 0}
.conta-item{
  position:absolute; top:-11px; right:-9px;
  min-width:23px; height:23px; padding:0 6px;
  border-radius:3px;
  background:var(--secundaria); color:#fff;
  font-size:13px; font-style:normal; font-weight:700;
  display:grid; place-items:center; line-height:1;
  border:2px solid var(--fundo);
  box-shadow:0 2px 7px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums;
}
.add.canto .conta-item{top:-13px; right:-7px}

/* ── alinhamento do menu de categorias ── */
.menu-categorias.alinhado-centro .trilho-categorias{justify-content:safe center}
.menu-categorias.alinhado-direita .trilho-categorias{justify-content:safe flex-end}
.menu-categorias.alinhado-esquerda .trilho-categorias{justify-content:flex-start}

/* ── categorias em dropdown ──
   Pensado para catálogo de distribuidor, com dezenas de
   categorias: filtro, rolagem própria e sombras indicando
   que há mais conteúdo acima ou abaixo. */
.menu-categorias.dropdown{position:relative; padding-bottom:12px}
.gatilho-categorias{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:11px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
  font-size:13.5px; font-weight:600;
}
.gatilho-categorias:hover{border-color:var(--destaque)}
.gatilho-categorias b{
  padding:1px 8px; border-radius:99px;
  background:var(--destaque); color:#12100c; font-size:11px;
}
.gatilho-categorias .giro{transition:transform .18s; opacity:.6}
.gatilho-categorias[aria-expanded="true"] .giro{transform:rotate(180deg)}

.painel-categorias{
  position:absolute; z-index:40; top:calc(100% - 4px); left:18px;
  width:min(360px,calc(100vw - 36px));
  display:none; overflow:hidden;
  background:color-mix(in srgb,var(--fundo) 96%,transparent);
  backdrop-filter:blur(16px);
  border:1px solid var(--card-borda); border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
}
.painel-categorias.aberto{display:block}
.topo-painel{padding:11px; border-bottom:1px solid var(--card-borda)}
.topo-painel input{
  width:100%; padding:9px 12px; font:inherit; font-size:13px; color:var(--texto);
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:9px;
}
.topo-painel input:focus{outline:2px solid var(--destaque); outline-offset:-1px}
.rolagem-categorias{
  max-height:min(60vh,380px); overflow-y:auto; overscroll-behavior:contain;
  padding:7px; scrollbar-width:thin;
}
.rolagem-categorias a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px;
  text-decoration:none; color:inherit; font-size:13.5px;
}
.rolagem-categorias a:hover{background:var(--card-fundo); color:var(--destaque)}
.rolagem-categorias a span{flex:1}
.rolagem-categorias a i{
  font-style:normal; font-size:11px; opacity:.45; font-variant-numeric:tabular-nums;
}
.rolagem-categorias .ic{width:17px; height:17px; color:var(--destaque)}
.sem-resultado{padding:18px 12px; text-align:center; font-size:12.5px; opacity:.45}
.sombra-topo,.sombra-baixo{
  position:absolute; left:0; right:0; height:26px;
  pointer-events:none; opacity:0; transition:opacity .16s;
}
.sombra-topo{top:58px; background:linear-gradient(var(--fundo),transparent)}
.sombra-baixo{bottom:0; background:linear-gradient(transparent,var(--fundo))}
.sombra-topo.on,.sombra-baixo.on{opacity:.92}

/* ── lista unificada ──
   Um bloco só, itens divididos por linhas internas que não
   encostam nas bordas. Compacta cardápio longo. */
.lista-unificada{
  background:var(--card-fundo); border:1px solid var(--card-borda);
  border-radius:var(--card-raio); padding:6px 20px;
}
.lista-unificada .linha-item{
  background:none; border:0; border-radius:0; padding:14px 0;
  box-shadow:inset 0 -1px 0 var(--card-borda);
}
.lista-unificada .linha-item:last-child{box-shadow:none}
.lista-unificada .linha-item:hover{background:none}
.lista-unificada .linha-item:hover .linha-texto b{color:var(--destaque)}

/* ── área de entrega por raio ── */
.bloco-area{margin:4px 0 12px}
.verificar-area{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 15px; border-radius:11px;
  background:var(--card-fundo); border:1px solid var(--card-borda);
}
.verificar-area span{flex:1; min-width:150px; font-size:12.5px; opacity:.75}
.btn-area{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:9px; border:0;
  background:var(--destaque); color:#12100c; font-weight:600; font-size:12.5px;
}
.btn-area:disabled{opacity:.55}
.resultado-area{margin-top:10px; padding:13px 15px; border-radius:11px}
.resultado-area.dentro{
  display:flex; align-items:center; gap:10px; font-size:12.5px;
  background:color-mix(in srgb,#2f8f45 15%,transparent);
  border:1px solid color-mix(in srgb,#2f8f45 45%,transparent);
}
.resultado-area.dentro .ic{color:#4cc46a}
.resultado-area.fora{
  background:color-mix(in srgb,var(--secundaria) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--secundaria) 45%,transparent);
}
.resultado-area.fora b{display:block; margin-bottom:5px; font-size:13.5px; color:var(--secundaria)}
.resultado-area.fora p{margin:0 0 12px; font-size:12.5px; line-height:1.6; opacity:.82}

/* ── produto destacado pela busca ── */
.card.destacado,.linha-item.destacado{
  border-color:var(--destaque);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--destaque) 40%,transparent);
}
.rotulo-alternativas{
  display:block; margin-bottom:8px; font-size:11px; font-weight:700;
  letter-spacing:1.1px; text-transform:uppercase; opacity:.6;
}

/* ── voltar ao topo ── */
#voltarTopo{
  position:fixed; right:18px; bottom:22px; z-index:55;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--card-borda);
  background:color-mix(in srgb,var(--fundo) 88%,transparent);
  backdrop-filter:blur(10px); color:var(--texto);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .2s,transform .2s,border-color .15s;
}
#voltarTopo.on{opacity:.9; transform:translateY(0); pointer-events:auto}
#voltarTopo:hover{opacity:1; border-color:var(--destaque); color:var(--destaque)}
#voltarTopo .ic{transform:rotate(180deg)}
body.com-itens #voltarTopo{bottom:22px}
@media (max-width:620px){
  #voltarTopo{right:14px; bottom:16px; width:40px; height:40px}
  .painel-categorias{left:14px; right:14px; width:auto}
  .lista-unificada{padding:4px 14px}
  .marca-logo{max-width:calc(150px * var(--escala-logo))}
}

/* ── esvaziar pedido ── */
.esvaziar{
  display:block; width:100%; margin-top:12px; padding:9px;
  background:none; border:1px solid var(--card-borda); border-radius:9px;
  color:var(--texto); font-size:12px; opacity:.55;
}
.esvaziar:hover{opacity:1; border-color:var(--secundaria); color:var(--secundaria)}

/* 14-slider.css | Banners em slider
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   BANNERS EM SLIDER
   ══════════════════════════════════════════════════════════ */

.banner-imagem.slider{position:relative}

/*
   Empilhamento por display, e so por display.
   Nada de grid-area, nada de position:absolute, nada de opacity.
   O quadro visivel ocupa o fluxo e define a altura da secao; os
   outros saem do fluxo por completo. E a unica tecnica que se
   comporta igual em Chrome de desktop e em WebView de celular.
   O JS ainda escreve display em linha, entao mesmo sem esta folha
   os banners nao empilham.
*/
.trilho-banner{position:relative; display:block}
.quadro-banner{display:block}
.banner-imagem.slider .quadro-banner{display:none}
.banner-imagem.slider .quadro-banner:first-child{display:block}
.banner-imagem.slider .quadro-banner.ativo{display:block}
.banner-imagem.slider .quadro-banner[aria-hidden="true"]{display:none}
.quadro-banner:focus-visible{outline:3px solid var(--destaque); outline-offset:-3px}
.quadro-banner picture{display:block; height:auto}
.quadro-banner img{width:100%; height:auto; display:block}

/*
   Controles: aparencia cravada, sem herdar botao do sistema.
   Sem isso o Safari e o WebView do Android desenham retangulo
   branco com borda cinza no lugar da seta e dos pontos.
*/
.seta-banner,
.ponto-banner{
  -webkit-appearance:none; appearance:none;
  background-image:none; box-shadow:none; font:inherit; margin:0;
}
.seta-banner{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.28);
  background-color:rgba(0,0,0,.42);
  backdrop-filter:blur(6px); color:#fff;
  opacity:0; transition:opacity .2s,border-color .15s;
}
.banner-imagem.slider:hover .seta-banner,
.banner-imagem.slider:focus-within .seta-banner{opacity:.92}
.seta-banner:hover{opacity:1; border-color:var(--destaque); color:var(--destaque)}
.seta-banner.esquerda{left:12px}
.seta-banner.direita{right:12px}

.pontos-banner{
  position:absolute; left:0; right:0; bottom:12px; z-index:4;
  display:flex; justify-content:center; gap:7px;
  padding:0; margin:0; list-style:none;
}
.ponto-banner{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background-color:rgba(0,0,0,.35);
  transition:width .2s,background-color .2s;
}
.ponto-banner.ativo{
  width:24px; border-radius:99px;
  background-color:var(--destaque); border-color:var(--destaque);
}

@media (max-width:620px){
  /* no toque o gesto de arrastar ja troca de banner */
  .seta-banner{display:none}
  .pontos-banner{bottom:10px}
}
@media (hover:none){
  .seta-banner{opacity:.85}
}

/* 12-correcoes-8-5.css | Camada historica 8.5
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   CORREÇÕES 8.5
   ══════════════════════════════════════════════════════════ */

/* ── limite de escolhas visível na ficha ── */
.contagem-grupo{
  margin-left:auto; padding:2px 9px; border-radius:99px;
  background:rgba(255,255,255,.09); font-size:10.5px;
  font-variant-numeric:tabular-nums; opacity:.75;
}
.grupo.completo .contagem-grupo{background:var(--destaque); color:#12100c; opacity:1; font-weight:700}
.grupo.completo .obrigatorio{display:none}
.opcao.escolhida{border-color:var(--destaque)}
.passo button:disabled{opacity:.22; cursor:default}
.passo button:disabled:hover{background:none}

/* ── bloco "uma imagem, muitas variações" no celular ──
   No estreito a foto vira uma faixa de proporção fixa e o
   corpo desce inteiro. Antes a foto ganhava altura mínima e
   máxima brigando entre si, e o conteúdo escorregava por cima. */
@media (max-width:960px){
  .card-agrupado{
    position:relative; overflow:hidden;
    grid-template-columns:1fr; grid-template-rows:auto auto;
  }
  .grupo-foto{
    position:relative; min-height:0; max-height:none;
    aspect-ratio:16 / 10; width:100%; overflow:hidden;
  }
  .grupo-foto img{width:100%; height:100%; object-fit:cover; display:block}
  .dica-foto{
    left:auto; right:10px; bottom:10px; z-index:2;
    background:rgba(0,0,0,.72); backdrop-filter:blur(4px);
  }
  .grupo-corpo{position:relative; z-index:1; padding:18px 16px 14px}
  .grupo-corpo h3{margin:0 0 4px; font-size:18px; line-height:1.2}
  .grupo-corpo > p{margin:0 0 14px}
  .lista-variacoes{margin:0}
}

@media (max-width:620px){
  .grupo-foto{aspect-ratio:3 / 2}
  .grupo-corpo{padding:16px 14px 12px}
  /* o preço desce para a segunda linha em vez de espremer o nome */
  .variacao{
    grid-template-columns:1fr auto;
    grid-template-areas:"nome botao" "preco botao";
    row-gap:2px; column-gap:12px; align-items:center;
  }
  .variacao b{grid-area:nome}
  .variacao .preco{grid-area:preco; font-size:13px}
  .variacao .add{grid-area:botao; align-self:center}
  .variacao .codigo{display:none}
}

/* 13-ajustes-8-6.css | Camada historica 8.6
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   AJUSTES 8.6
   ══════════════════════════════════════════════════════════ */

/* o modelo do botão de adicionar mudou para 03-cards.css, seu lugar */

/* ── alinhamento de tipografia por bloco ── */
.cabeca-secao.alinha-centro{justify-content:center; text-align:center; flex-direction:column; gap:10px}
.cabeca-secao.alinha-centro p{text-align:center; max-width:620px; margin:0 auto}
.cabeca-secao.alinha-direita{text-align:right}
.cabeca-secao.alinha-direita .sobretitulo{flex-direction:row-reverse}
.conteudo-faixa.alinha-centro{text-align:center}
.conteudo-faixa.alinha-centro p{margin-left:auto; margin-right:auto}
.conteudo-faixa.alinha-direita{text-align:right}
.conteudo-faixa.alinha-direita p{margin-left:auto}

/* ── banner de imagem inteira ──
   A arte manda na altura. Sem aspect-ratio e sem object-fit:cover,
   nada é cortado: a seção fica exatamente com a proporção do
   arquivo enviado. */
/* o bloco de banner mudou para 05-banners.css, seu lugar */
.botao-sobre{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; padding:24px 28px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}
.botao-sobre.lado-esquerda{justify-content:flex-start}
.botao-sobre.lado-direita{justify-content:flex-end}
.botao-sobre .botao-faixa .ic{width:15px; height:15px}

@media (max-width:620px){
  .botao-sobre{padding:16px}
  .botao-sobre.lado-direita,.botao-sobre.lado-esquerda{justify-content:stretch}
  .botao-sobre .botao-faixa{width:100%; justify-content:center}
}

/* 14-slider.css | Banners em slider
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   BANNERS EM SLIDER
   ══════════════════════════════════════════════════════════ */

.banner-imagem.slider{position:relative}

/*
   Empilhamento por display, e so por display.
   Nada de grid-area, nada de position:absolute, nada de opacity.
   O quadro visivel ocupa o fluxo e define a altura da secao; os
   outros saem do fluxo por completo. E a unica tecnica que se
   comporta igual em Chrome de desktop e em WebView de celular.
   O JS ainda escreve display em linha, entao mesmo sem esta folha
   os banners nao empilham.
*/
.trilho-banner{position:relative; display:block}
.quadro-banner{display:block}
.banner-imagem.slider .quadro-banner{display:none}
.banner-imagem.slider .quadro-banner:first-child{display:block}
.banner-imagem.slider .quadro-banner.ativo{display:block}
.banner-imagem.slider .quadro-banner[aria-hidden="true"]{display:none}
.quadro-banner:focus-visible{outline:3px solid var(--destaque); outline-offset:-3px}
.quadro-banner picture{display:block; height:auto}
.quadro-banner img{width:100%; height:auto; display:block}

/*
   Controles: aparencia cravada, sem herdar botao do sistema.
   Sem isso o Safari e o WebView do Android desenham retangulo
   branco com borda cinza no lugar da seta e dos pontos.
*/
.seta-banner,
.ponto-banner{
  -webkit-appearance:none; appearance:none;
  background-image:none; box-shadow:none; font:inherit; margin:0;
}
.seta-banner{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.28);
  background-color:rgba(0,0,0,.42);
  backdrop-filter:blur(6px); color:#fff;
  opacity:0; transition:opacity .2s,border-color .15s;
}
.banner-imagem.slider:hover .seta-banner,
.banner-imagem.slider:focus-within .seta-banner{opacity:.92}
.seta-banner:hover{opacity:1; border-color:var(--destaque); color:var(--destaque)}
.seta-banner.esquerda{left:12px}
.seta-banner.direita{right:12px}

.pontos-banner{
  position:absolute; left:0; right:0; bottom:12px; z-index:4;
  display:flex; justify-content:center; gap:7px;
  padding:0; margin:0; list-style:none;
}
.ponto-banner{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background-color:rgba(0,0,0,.35);
  transition:width .2s,background-color .2s;
}
.ponto-banner.ativo{
  width:24px; border-radius:99px;
  background-color:var(--destaque); border-color:var(--destaque);
}

@media (max-width:620px){
  /* no toque o gesto de arrastar ja troca de banner */
  .seta-banner{display:none}
  .pontos-banner{bottom:10px}
}
@media (hover:none){
  .seta-banner{opacity:.85}
}

/* 15-correcoes-8-9-1.css | Camada historica 8.9.1
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   CORREÇÕES 8.9.1 · alinhamento e comportamento em tela pequena
   ══════════════════════════════════════════════════════════ */

/* ── card horizontal ──
   O texto fica sempre alinhado à esquerda, nos dois sentidos.
   Alinhar à direita no invertido fazia selo e título "andarem"
   de um card para o outro, como se o padding fosse diferente.
   A imagem é que troca de lado; o texto se lê igual. */
.card.horizontal{grid-template-columns:38% 1fr}
.card.horizontal.invertido{grid-template-columns:1fr 38%}
.card.horizontal .corpo,
.card.horizontal.invertido .corpo{text-align:left; padding:14px 16px 18px}
.card.horizontal.invertido .topo-card{flex-direction:row}
.card.horizontal .foto{aspect-ratio:auto; height:100%; min-height:150px}

/* o botão do card horizontal virou filho do corpo na 8.9.2 e o
   seu modelo mora em 03-cards.css. As regras de lado, de canto e
   de reserva de espaço que ficavam aqui não descreviam mais nada. */

/* ── lista simples: colunas fixas, botão sempre na mesma linha ──
   Antes o selo entrava na contagem do grid e empurrava o botão,
   então itens com e sem selo terminavam em pontos diferentes. */
.linha-item{
  grid-template-columns:auto 1fr auto auto minmax(0,auto);
  column-gap:14px;
}
.linha-item .selo{justify-self:end}
.linha-item .preco{justify-self:end; min-width:96px; text-align:right}
.linha-item .add.linha{justify-self:end; white-space:nowrap}
.lista-unificada .linha-item{grid-template-columns:auto 1fr auto auto minmax(0,auto)}

/* ── observações dentro do carrinho ── */
.obs-carrinho{margin-top:18px; padding-top:16px; border-top:1px solid var(--card-borda)}
.obs-carrinho label{display:block; margin:0}
.obs-carrinho label > span{
  display:block; margin-bottom:7px; font-size:11px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--destaque);
}
.obs-carrinho textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--texto); resize:vertical;
  background:var(--card-fundo); border:1px solid var(--card-borda); border-radius:10px;
}
.obs-carrinho textarea:focus{outline:2px solid var(--destaque); outline-offset:-1px; border-color:transparent}
.obs-carrinho small{display:block; margin-top:7px; font-size:11.5px; opacity:.45}

/* ── assinatura do rodapé: cor herdada, nunca azul de link ── */
.rodape a,
.assinatura a,
.assinatura-rodape a,
.fim-rodape a{color:inherit; text-decoration:none}
.rodape .assinatura a:hover,
.assinatura-rodape a:hover,
.fim-rodape a:hover{color:var(--destaque); text-decoration:underline}
.assinatura,.fim-rodape .assinatura{opacity:.5}
.assinatura a b,.assinatura-rodape a b{font-weight:700}

/* o aviso de fechado mudou para 01-cabecalho.css */

/* ══════════ TABLET ══════════ */
@media (max-width:960px){
  /* zig-zag some: no estreito a imagem fica sempre em cima e o
     texto embaixo, o que é previsível e não quebra */
  .card.horizontal,
  .card.horizontal.invertido{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .card.horizontal .foto,
  .card.horizontal.invertido .foto{
    order:0; aspect-ratio:16 / 9; height:auto; min-height:0;
    border-radius:var(--card-raio) var(--card-raio) 0 0;
  }
  .card.horizontal .corpo,
  .card.horizontal.invertido .corpo{order:1; text-align:left}
  /* o botão e a base do card horizontal são de 03-cards.css e
     16-correcoes-8-9-2.css; aqui não se mexe mais neles */

  /* bloco agrupado: aviso de ampliar sempre no canto da foto */
  .grupo-foto{position:relative}
  .dica-foto{
    position:absolute; top:auto; left:auto; right:10px; bottom:10px;
    z-index:2; margin:0;
  }
}

/* ══════════ CELULAR ══════════ */
@media (max-width:620px){
  /* o cabeçalho no celular mudou para 09-responsivo.css */

  /* card horizontal vira vertical de verdade */
  .card.horizontal .foto,
  .card.horizontal.invertido .foto{aspect-ratio:4 / 3}
  /* lista simples: preço e botão em linha própria, nunca sobrepostos */
  .linha-item{
    grid-template-columns:1fr auto;
    grid-template-areas:"cod cod" "texto texto" "selo selo" "preco botao";
    row-gap:9px;
  }
  .linha-item > .codigo{grid-area:cod}
  .linha-item .linha-texto{grid-area:texto}
  .linha-item .selo{grid-area:selo; justify-self:start}
  .linha-item .preco{grid-area:preco; justify-self:start; text-align:left; min-width:0}
  .linha-item .add.linha{grid-area:botao}

  /* bloco agrupado: um texto só, com respiro correto */
  .grupo-corpo{padding:16px 14px 14px}
  .dica-foto{right:8px; bottom:8px; font-size:10px}
}

/* 16-correcoes-8-9-2.css | Camada historica 8.9.2
   Fragmento de catalogo.css. O gerador junta os arquivos de
   nucleo/css em ordem de nome. A ORDEM E A CASCATA: nao
   renumere sem conferir quem sobrescreve quem. */
/* ══════════════════════════════════════════════════════════
   CORREÇÕES 8.9.2 · alinhamento definitivo do card horizontal
   ══════════════════════════════════════════════════════════ */

/*
   O botão agora é filho do corpo, na mesma linha do preço.
   Some toda a lógica de "trocar o botão de lado": o texto se
   lê da esquerda e o botão fica na direita dele, em qualquer
   sentido da imagem. É o que faz todos os cards terminarem
   no mesmo ponto.
*/
.card.horizontal .corpo,
.card.horizontal.invertido .corpo{
  text-align:left; padding:16px 18px; gap:7px;
  display:flex; flex-direction:column;
}
.card.horizontal .topo-card,
.card.horizontal.invertido .topo-card{
  flex-direction:row; justify-content:space-between; align-items:center;
}
.card.horizontal h3{margin:0}
.card.horizontal .base-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:auto; padding:8px 0 0; min-height:0;
}
.card.horizontal.invertido .base-card{padding:8px 0 0; justify-content:space-between}

/* o modelo de .add.na-linha mudou para 03-cards.css, seu lugar */

/* nenhum botão flutuante sobra no card horizontal */
.card.horizontal > .add{display:none}

/* ── campo de observações: mesma identidade do resto ──
   Ele estava saindo com o visual padrão do navegador porque
   o seletor não alcançava o textarea dentro do label. */
.obs-carrinho textarea,
#obsCarrinho textarea,
#observacoesCarrinho{
  width:100% !important;
  padding:12px 14px !important;
  font:inherit !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:var(--texto) !important;
  background:var(--card-fundo) !important;
  border:1px solid var(--card-borda) !important;
  border-radius:11px !important;
  resize:vertical;
  -webkit-appearance:none; appearance:none;
  box-shadow:none;
}
#observacoesCarrinho::placeholder{color:var(--texto); opacity:.38}
#observacoesCarrinho:focus{
  outline:2px solid var(--destaque); outline-offset:-1px; border-color:transparent !important;
}

/* o aviso de fechado mudou para 01-cabecalho.css */

@media (max-width:960px){
  /* imagem em cima, texto embaixo, botão na linha do preço */
  .card.horizontal .base-card,
  .card.horizontal.invertido .base-card{padding:8px 0 0}
  .card.horizontal > .add{display:none}
}

@media (max-width:620px){
  .card.horizontal .corpo,
  .card.horizontal.invertido .corpo{padding:14px 15px}
  .card.horizontal .base-card,
  .card.horizontal.invertido .base-card{
    flex-wrap:wrap; row-gap:10px; padding-bottom:0;
  }
  /* o balão de fechado no celular mudou para 09-responsivo.css */
}