/* =====================================================================
   SilkCat — ajustes próprios, por cima da Base Visual (silk-ui.css, silk-fx.css)
   e das classes do Tailwind. Sem build. Cores da marca: navy #072A40, navy escuro
   #031C26, dourado #D2B87D, dourado escuro #A9823C, laranja #D98032. Verde, amarelo e
   vermelho só como cores de estado (estoque, situação do pedido).
   Portal de compras (0.11.0): cabeçalho com uma busca, Pedido e conta; Departamentos em menu
   grande; cards do início; produtos em retrato 3:4 sem borda nem card; página do produto; painel do
   pedido; telas de entrar.
   0.12.0: rolos horizontais no início e o coração dos Curtidos no cabeçalho. 0.12.1: os rolos viram
   carrossel infinito com setas redondas na borda; "Seus curtidos" saiu do início. 0.20.0: o banner saiu do
   início e os departamentos viraram uma grade de cards com a esteira dos subgrupos.
   ===================================================================== */

/* Tela de carregamento só na primeira página da visita (ver base.html) */
html.sem-splash body::before, html.sem-splash body::after { display: none !important; }

.rolagem-oculta { scrollbar-width: none; }
.rolagem-oculta::-webkit-scrollbar { display: none; }

/* ---------- cabeçalho ---------- */
.faixa-topo { background: #031C26; color: #E8DCB8; }
.faixa-botao { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; border-radius: 12px;
  color: #E8DCB8; transition: background .15s, color .15s; }
.faixa-botao:hover { background: rgba(255,255,255,.08); color: #fff; }
.faixa-pedido { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 12px; border-radius: 12px;
  background: #D2B87D; color: #031C26; transition: background .15s, transform .1s; }
.faixa-pedido:hover { background: #E8DCB8; }
.faixa-pedido:active { transform: scale(.98); }
.faixa-pedido .si { width: 20px; height: 20px; }
.conta-iniciais { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px;
  background: rgba(210,184,125,.22); color: #E8DCB8; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.faixa-botao-admin { background: rgba(210,184,125,.18); color: #E8DCB8; }
/* 1.15: a barra da equipe no "Ver como cliente" fica no canto de baixo, à direita (o topo é o do cliente) */
.barra-equipe { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: flex;
  align-items: center; gap: 8px; }
.barra-equipe .faixa-botao-admin { gap: 6px; padding: 0 14px; background: #031C26; color: #E8DCB8; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(3,28,38,.6); }
.barra-equipe .faixa-botao-admin:hover { background: #D2B87D; color: #031C26; }
/* 1.29: na prévia do editor das páginas o botão da equipe some (ficava por cima do lápis dos blocos); o editor tem a seta dele.
   Sem citar o nome do botão: os arquivos do portal não falam da área da equipe (test_web) */
html.editor-previa .barra-equipe { display: none; }
.barra-equipe .aviso-previa { background: #031C26; color: #E8DCB8; }
.faixa-botao-admin:hover { background: #D2B87D; color: #031C26; }
.aviso-previa { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; height: 26px; padding: 0 9px; border-radius: 9999px;
  background: rgba(242,179,61,.16); color: #F2B33D; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.selo-homolog { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px;
  background: rgba(217,128,50,.2); color: #F2B33D; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.contador-selecao { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D98032; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.contador-selecao.hidden { display: none; }

/* busca do cabeçalho */
.campo-busca { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0 46px 0 40px; border-radius: 12px; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(232,220,184,.25); transition: background .15s, border-color .15s; }
.campo-busca::placeholder { color: rgba(232,220,184,.7); }
/* 0.48.0: a busca do topo menor, no canto; a lista de grupos (o menu grande) abre embaixo dela, com o título e o link */
.busca-topo .campo-busca { height: 40px; font-size: 14px; padding-left: 38px; }
.busca-topo .campo-busca-botao { left: 4px; }
.busca-topo .mega { top: calc(100% + 8px); border-radius: 18px; }
.mega-ranking-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px 8px; margin-bottom: 4px;
  border-bottom: 1px solid #f1ece2; }
.mega-ranking-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #A9823C; }
.campo-busca:focus { outline: none; background: rgba(255,255,255,.16); border-color: #D2B87D; }
.campo-busca::-webkit-search-cancel-button { display: none; }
.campo-busca-botao { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #E8DCB8; }
.campo-busca-botao:hover { color: #fff; background: rgba(255,255,255,.08); }
[data-busca-celular] .campo-busca { height: 46px; font-size: 16px; color: #031C26; background: #f5f5f4; border-color: #e7e5e4; }
[data-busca-celular] .campo-busca::placeholder { color: #a8a29e; }
[data-busca-celular] .campo-busca:focus { background: #fff; border-color: #072A40; }
[data-busca-celular] .campo-busca-botao { color: #78716c; }

/* sugestões da busca (abaixo do campo) */
.sugestoes { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  overflow: auto; border-radius: 16px; background: #fff; border: 1px solid #ece4d4; box-shadow: 0 24px 48px -20px rgba(3,28,38,.45);
  color: #031C26; text-transform: none; letter-spacing: normal; padding: 6px 0; text-align: left; }
.sugestoes.hidden { display: none; }
[data-busca-celular] .sugestoes { position: static; width: 100%; margin-top: 8px; max-height: 65vh; box-shadow: none; }
.sugestoes.sugestoes-painel { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - var(--altura-topo, 120px) - 16px); }
[data-busca-celular] .sugestoes.sugestoes-painel { width: 100%; max-height: 70vh; }
.grade-painel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 4px; }
@media (min-width: 768px) { .grade-painel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 4px; } }
@media (min-width: 1100px) { .grade-painel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sugestoes .cartao-produto .codigo-vitrine { font-size: 12.5px; }
.sugestoes-titulo { padding: 10px 16px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #A9823C; }
.sugestao { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 16px; font-size: 14px; color: #031C26; }
.sugestao:hover, .sugestao:focus { background: #faf5ea; outline: none; }
.sugestao-produto { min-height: 60px; }
.sugestao-foto { flex: none; width: 40px; height: 52px; border-radius: 6px; background: #f4efe6; padding: 2px; overflow: hidden; }
.sugestao-todos { border-top: 1px solid #f5f5f4; margin-top: 4px; font-weight: 600; color: #072A40; }

/* barra clara: Departamentos (menu grande) e atalhos */
.menu-dep { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border-radius: 10px; white-space: nowrap;
  color: #031C26; transition: background .15s, color .15s; }
.menu-dep:hover, [data-departamento]:hover > .menu-dep, [data-departamento]:focus-within > .menu-dep { background: #faf5ea; color: #D98032; }
.menu-dep.on { color: #D98032; box-shadow: inset 0 -2px 0 #D98032; border-radius: 10px 10px 0 0; }
.menu-atalho .si { color: #A9823C; }
.mega { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 320px; max-width: min(960px, calc(100vw - 32px)); padding: 18px 20px 16px;
  border-radius: 0 18px 18px 18px; background: #fff; border: 1px solid #ece4d4; box-shadow: 0 30px 60px -28px rgba(3,28,38,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
[data-departamento]:hover > .mega, [data-departamento]:focus-within > .mega, .mega.aberta { opacity: 1; visibility: visible; transform: none; }
/* 0.20.0: com os dados reais um departamento tem até 56 subgrupos; o menu escondido (só invisível, não fora da página)
   ficava com milhares de px e esticava a página: o espaço em branco depois do rodapé. Altura limitada à tela, com
   rolagem por dentro quando aberto. */
.mega { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
/* 0.21.0 (decisão do solicitante; estrutura da referência "Termos mais buscados" e do menu da Leroy Merlin, visual da Base
   Visual): à esquerda os GRUPOS em ranking (o selo 1º, 2º... em azul-marinho, o nome e o número), a lista rola por
   dentro; à direita, os subgrupos principais do grupo com o mouse (ou o foco) em cima e "Ver todos de [GRUPO]"; sem
   nenhum, os do 1º. 0.48.1 (o solicitante: "a segunda aba some quando eu mudo de grupo, fica travado no Natal"): o
   grupo sob o mouse (ou com o foco) ganha `.ativa` pelo silkcat.js e o painel dele FICA até outro grupo ser apontado:
   cruzar o espaço entre a lista e o painel, ou entre duas linhas, não volta ao 1º (antes era só :hover, e o vão entre
   a lista e o painel perdia o grupo). */
.mega-ranking { padding: 10px; overflow: visible; max-height: none; }
.mega-ranking-grade { position: relative; display: flex; width: 640px; max-width: calc(100vw - 48px); min-height: 360px; }
.mega-ranking-lista { width: 300px; flex: none; max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 6px 0 0; list-style: none; border-right: 1px solid #f1ece2; }
.mega-ranking-grupo { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; color: #031C26; }
.mega-ranking-pos { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 6px;
  border-radius: 6px; background: #072A40; color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mega-ranking-nome { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-ranking-n { flex: none; font-size: 11.5px; color: #a8a29e; font-variant-numeric: tabular-nums; }
.mega-ranking-linha:hover > .mega-ranking-grupo, .mega-ranking-linha.ativa > .mega-ranking-grupo, .mega-ranking-grupo:focus-visible { background: #faf5ea; color: #D98032; }
.mega-ranking-sub { position: absolute; top: 0; left: 316px; right: 0; bottom: 0; display: none; flex-direction: column; overflow-y: auto; padding: 4px 6px; }
.mega-ranking-linha.ativa > .mega-ranking-sub, .mega-ranking-linha:focus-within > .mega-ranking-sub { display: flex; z-index: 2; background: #fff; }
.mega-ranking-sub-titulo { padding: 4px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid #f1ece2;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; color: #031C26; }
.mega-ranking-todos { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px; font-size: 13.5px; font-weight: 700; color: #072A40; }
.mega-ranking-todos:hover { color: #D98032; }
.menu-celular-item .mega-ranking-pos { min-width: 30px; height: 24px; font-size: 11.5px; }
html.silk-dark .mega-ranking-grupo, html.silk-dark .mega-ranking-sub-titulo, html.silk-dark .mega-ranking-todos { color: var(--e-texto); }
html.silk-dark .mega-ranking-linha:hover > .mega-ranking-sub, html.silk-dark .mega-ranking-linha:focus-within > .mega-ranking-sub { background: var(--e-superficie); }
html.silk-dark .mega-ranking-linha:hover > .mega-ranking-grupo { background: var(--e-superficie-2); }
html.silk-dark .mega-ranking-lista, html.silk-dark .mega-ranking-sub-titulo { border-color: var(--e-borda); }
.mega-item { display: block; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; color: #44403c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-item:hover { background: #faf5ea; color: #031C26; }

/* menu da conta */
.menu-conta { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 280px; border-radius: 16px; background: #fff; border: 1px solid #ece4d4;
  box-shadow: 0 24px 48px -20px rgba(3,28,38,.45); color: #031C26; text-transform: none; letter-spacing: normal; padding: 4px 0 6px; text-align: left; }
.menu-conta.hidden { display: none; }
.menu-conta-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 16px; font-size: 14px; color: #031C26; text-align: left; }
.menu-conta-item .si, .menu-conta-item .coracao { color: #A9823C; }
.menu-conta-item:hover { background: #faf5ea; }
.menu-celular-item { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 12px;
  color: #031C26; font-weight: 600; font-size: 15px; }
.menu-celular-item .si { color: #A9823C; }
.menu-celular-item:hover { background: #faf5ea; }
/* 1.19: os grupos da gaveta do menu em sanfona (a gaveta só existe abaixo de 1280 px; no computador, nada muda): linhas
   finas entre os grupos, a seta gira ao abrir, os subgrupos ali mesmo e "Ver todos de [GRUPO]" */
.menu-grupos { border-top: 1px solid #ece4d4; }
.menu-grupo, .menu-grupos > a { border-bottom: 1px solid #ece4d4; }
.menu-grupo > summary { list-style: none; cursor: pointer; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupos .menu-celular-item { height: 52px; border-radius: 0; }
.menu-grupo .menu-grupo-seta { color: #78716c; transition: transform .2s ease; }
.menu-grupo[open] .menu-grupo-seta { transform: rotate(180deg); }
.menu-grupo[open] > summary { background: #faf5ea; }
.menu-grupo-subs { display: flex; flex-direction: column; padding: 4px 0 12px 50px; }
.menu-grupo-sub { padding: 9px 10px; font-size: 14px; color: #44403c; }
.menu-grupo-sub:hover { color: #031C26; background: #faf5ea; border-radius: 10px; }
.menu-grupo-todos { display: inline-flex; align-items: center; gap: 6px; padding: 10px 10px 2px; font-size: 13.5px; font-weight: 700; color: #072A40; }
.menu-grupo-todos .si { color: #A9823C; }
html.silk-dark .menu-grupos, html.silk-dark .menu-grupo, html.silk-dark .menu-grupos > a { border-color: var(--e-borda, #233d52); }
html.silk-dark .menu-grupo[open] > summary, html.silk-dark .menu-grupo-sub:hover { background: var(--e-superficie, #112334); }
html.silk-dark .menu-grupo-sub { color: var(--e-texto-2, #b9b2a5); }
html.silk-dark .menu-grupo-todos, html.silk-dark .menu-grupo-sub:hover { color: var(--e-texto, #e6e1d6); }
@media (prefers-reduced-motion: reduce) { .menu-grupo .menu-grupo-seta { transition: none; } }

.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #78716c; }
.migalhas a:hover { color: #072A40; text-decoration: underline; }
.migalhas > span { color: #031C26; font-weight: 600; }
.migalhas .si { color: #a8a29e; }

/* ---------- pílulas (Base Visual) ---------- */
.pilula { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 9999px; padding: 7px 16px;
  font-size: 14px; font-weight: 600; border: 1px solid #e7e5e4; background: #fff; color: #031C26; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; }
.pilula:hover { border-color: #D2B87D; }
.pilula.ativa { background: #072A40; border-color: #072A40; color: #fff; }
.pilula-n { font-weight: 500; font-size: 12.5px; color: #a8a29e; }
.pilula.ativa .pilula-n { color: #E8DCB8; }
.pilula-sm { padding: 4px 11px; font-size: 12.5px; }
.pilula.hidden { display: none; }
/* linhas de pílulas das listas (0.12.2): quebram linha no computador ("+ N" para as que sobram); no celular,
   cada linha desliza para o lado, sem quebrar, para a faixa presa no topo não crescer */
.pilulas-linha { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 639px) {
  .pilulas-linha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 -8px; padding: 0 8px; scroll-padding-inline: 8px; }
  .pilulas-linha::-webkit-scrollbar { display: none; }
  .pilulas-linha .pilula.hidden { display: inline-flex; }
  .pilulas-linha [data-acao="mais-pilulas"] { display: none; }
}

/* ---------- selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 4px; border-radius: 9999px; padding: 3px 10px; font-size: 11.5px;
  font-weight: 600; line-height: 1.3; white-space: nowrap; }
.selo-ok { background: #e6f2eb; color: #1c7a4a; }
.selo-atencao { background: #fbf0dd; color: #a86a12; }
.selo-erro { background: #fbe9e6; color: #b3392f; }
.selo-escuro { background: rgba(3,28,38,.82); color: #fff; }
.selo-claro { background: rgba(255,255,255,.92); color: #031C26; border: 1px solid #e7e5e4; }
.selo-bege { background: #f4ecd9; color: #6b5220; }
.selo-cinza { background: #f0efed; color: #57534e; }
.selo-encomenda { background: #072A40; color: #E8DCB8; }
.selo-pronta { background: #fff; color: #072A40; border: 1px solid #d6d3d1; }
.selo .si-sm { width: 12px; height: 12px; }
/* selos no canto da foto (0.12.2): em cima à esquerda, um embaixo do outro; o coração fica em cima à direita */
.selos-foto { position: absolute; top: 8px; left: 8px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; max-width: calc(100% - 56px); pointer-events: none; }
.selos-foto .selo { box-shadow: 0 1px 4px -1px rgba(3,28,38,.25); white-space: nowrap; }

/* ---------- código do produto ---------- */
.codigo-vitrine { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #A9823C; text-transform: uppercase; }
.sugestao .codigo-vitrine { font-size: 12.5px; }
.codigo-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: #f4ecd9;
  color: #031C26; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.chip-codigo { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #f4ecd9; color: #3a2d0a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------- preço, estoque e quantidade ---------- */
.preco { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.preco-final { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1; color: #031C26; }
.preco-cheio { font-size: 12.5px; color: #a8a29e; }
.preco-grande .preco-final { font-size: 34px; }   /* 0.49.0: 44 → 34 (a página do produto compacta) */
.preco-grande .preco-cheio { font-size: 15px; }
.preco-sem { font-size: 13px; font-weight: 600; color: #78716c; }
/* 0.19.0: "inclui IPI de X%" fica inteiro (quebra antes dele, nunca no meio) e o aviso do valor estimado quebra à vontade */
.inclui-ipi { white-space: nowrap; }
.texto-estimado { font-size: 12.5px; line-height: 1.45; color: #57534e; }
html.silk-dark .texto-estimado { color: var(--e-texto-2); }
.estoque { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.estoque::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estoque-ok { color: #1c7a4a; }
.estoque-poucas { color: #a86a12; }
.estoque-esgotado { color: #b3392f; }
.estoque-encomenda { color: #072A40; }
.stepper { display: inline-flex; align-items: center; height: 44px; border-radius: 12px; border: 1px solid #e7e5e4; background: #fff; overflow: hidden; }
.stepper-bt { width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; color: #072A40; background: #faf8f3; }
.stepper-bt:hover { background: #f4ecd9; }
.stepper-campo { width: 64px; height: 100%; text-align: center; font-weight: 700; font-size: 15px; color: #031C26; border: 0; background: #fff;
  -moz-appearance: textfield; appearance: textfield; }
.stepper-campo::-webkit-outer-spin-button, .stepper-campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-campo:focus { outline: none; background: #fffaf0; }
.stepper-compacto { height: 34px; }
.stepper-compacto .stepper-bt { width: 30px; }
.stepper-compacto .stepper-campo { width: 48px; font-size: 14px; }

/* ---------- Início: cards ---------- */
.card-tipo { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid #ece4d4;
  box-shadow: 0 1px 2px rgba(7,42,64,.05); transition: box-shadow .2s, transform .2s, border-color .2s; }
.card-tipo:hover { border-color: #D2B87D; box-shadow: 0 20px 40px -28px rgba(7,42,64,.55); transform: translateY(-2px); }
.card-tipo-icone { flex: none; width: 56px; height: 56px; border-radius: 16px; background: #f4ecd9; color: #A9823C; display: flex; align-items: center; justify-content: center; }
.card-tipo-icone .si { width: 26px; height: 26px; }
.card-tipo-titulo { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1; color: #031C26; }
.card-tipo-texto { display: block; margin-top: 6px; font-size: 13.5px; color: #78716c; }
.card-tipo-seta { flex: none; color: #A9823C; }
.card-tipo-escuro { background: linear-gradient(160deg, #0b3550, #031C26); border-color: #072A40; }
.card-tipo-escuro .card-tipo-icone { background: rgba(210,184,125,.18); color: #E8DCB8; }
.card-tipo-escuro .card-tipo-titulo { color: #fff; }
.card-tipo-escuro .card-tipo-texto { color: #cfd8de; }
.card-tipo-escuro .card-tipo-seta { color: #E8DCB8; }
/* ---------- rolos do início (0.12.1): Novidades, Mais vendidos (e qualquer rolo futuro; os Departamentos viraram grade na 0.20.0)
   Carrossel infinito (macro `rolo`, silkcat.js). Todos os cards inteiros e do mesmo tamanho, sem pedaço
   nem esmaecido nas pontas: --rolo-n por vez (produtos 2 · 3 · 5; o tipo departamentos, 2 · 3 · 4) e um fio de
   espaço entre as fotos. Encaixe card a card (scroll-snap, parando em cada um, também com o dedo).
   Setas: botão redondo branco com sombra leve, na borda do rolo, metade para fora, no meio da altura
   da foto (--rolo-meio, medido pelo JS); só aparecem quando o rolo gira (.gira) e há mouse. */
.rolo { position: relative; --rolo-n: 2; --rolo-vao: 2px; }
@media (min-width: 640px) { .rolo { --rolo-n: 3; } }
@media (min-width: 1024px) { .rolo-produtos { --rolo-n: 5; } .rolo-departamentos { --rolo-n: 4; } }
/* Grupos do início (0.21.0; em volta infinita desde a 1.15): o vão; o card inteiro é o item, então a seta fica no meio */
.rolo-departamentos { --rolo-vao: 8px; --rolo-meio: 50%; }
@media (min-width: 640px) { .rolo-departamentos { --rolo-vao: 12px; } }
@media (min-width: 1024px) { .rolo-departamentos { --rolo-vao: 16px; } }
@media (min-width: 1280px) { .rolo-departamentos { --rolo-vao: 20px; } }
.rolo-departamentos .rolo-item > .dep-card { height: 100%; }
/* 1.15: os grupos numa fileira em volta infinita (as duas fileiras da 0.23.0 saíram): o trilho de sempre do .rolo */
.rolo-trilho { position: relative; display: flex; gap: var(--rolo-vao); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.rolo-item { flex: 0 0 calc((100% - var(--rolo-vao) * (var(--rolo-n) - 1)) / var(--rolo-n)); min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always; }
.rolo .fx-reveal { opacity: 1; transform: none; transition: none; }   /* no rolo, o card não "sobe" ao aparecer de lado */
.rolo.gira .rolo-trilho { cursor: grab; }
.rolo.arrastando .rolo-trilho { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.rolo.arrastando .rolo-trilho a { pointer-events: none; }
.rolo-seta { position: absolute; top: var(--rolo-meio, 40%); z-index: 10; width: 44px; height: 44px; display: none;
  align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: #fff; color: #031C26;
  box-shadow: 0 2px 10px -2px rgba(7,42,64,.28), 0 0 0 1px rgba(7,42,64,.06); cursor: pointer;
  transition: box-shadow .15s, transform .15s, background-color .15s; }
.rolo-seta::before { content: ""; position: absolute; inset: -8px; border-radius: 9999px; }   /* área de clique maior, só da seta */
.rolo-seta .si { width: 20px; height: 20px; stroke-width: 2.2; }
.rolo-seta-esq { left: 0; transform: translate(-50%, -50%); }
.rolo-seta-dir { right: 0; transform: translate(50%, -50%); }
.rolo-seta:hover { box-shadow: 0 4px 16px -4px rgba(7,42,64,.4), 0 0 0 1px rgba(7,42,64,.08); }
.rolo-seta-esq:hover { transform: translate(-50%, -50%) scale(1.06); }
.rolo-seta-dir:hover { transform: translate(50%, -50%) scale(1.06); }
.rolo-seta:focus-visible { outline: 2px solid #D2B87D; outline-offset: 2px; }
.rolo-seta[hidden] { display: none !important; }
@media (min-width: 640px) and (hover: hover) and (pointer: fine) { .rolo.gira .rolo-seta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .rolo-seta { transition: none; } }
html.silk-dark .rolo-seta { background: var(--e-superficie); color: var(--e-texto); box-shadow: 0 2px 12px -2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
/* coração dos Curtidos no cabeçalho, ao lado do Pedido */
.faixa-curtidos { position: relative; }
.faixa-curtidos.on .coracao, .faixa-curtidos:hover .coracao { fill: currentColor; }
.contador-curtidos { background: #D2B87D; color: #031C26; }

/* ---------- departamentos (0.20.0, rascunho R13 "Início do portal sem banner"; o banner saiu do início) ----------
   Grade `.grade-dep`: 2 por linha no celular, 3 de 640 a 1279 px, 4 a partir de 1280 px. No início (`.grade-dep-inicio`),
   no máximo 2 linhas: o servidor manda até 8 e o CSS esconde o que passa (4 · 6 · 8); o resto em /departamentos.
   Card deitado 4:3 (quadrado no celular), cantos de 12 px: a imagem do grupo preenche; a foto de um produto fica inteira,
   acima do nome; sem nenhuma, o fundo de "Foto em breve" com a folha e o selo no canto de cima, à direita. Degradê
   embaixo, o nome na serifada e a quantidade de produtos (0.39.0; antes, a esteira dos subgrupos). Letras pela largura do
   card (cqi). Nome em maiúsculas só pela tela (o dado não muda). O nome se estica por cima do card (o card todo leva ao
   grupo). */
.grade-dep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .grade-dep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .grade-dep { gap: 16px; } }
@media (min-width: 1280px) { .grade-dep { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.grade-dep-inicio > .dep-card:nth-child(n+5) { display: none; }
@media (min-width: 640px) { .grade-dep-inicio > .dep-card:nth-child(n+5) { display: flex; } .grade-dep-inicio > .dep-card:nth-child(n+7) { display: none; } }
@media (min-width: 1280px) { .grade-dep-inicio > .dep-card:nth-child(n+7) { display: flex; } }
.dep-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 12px; background: #f4efe6; color: #fbf5e8; isolation: isolate; container-type: inline-size; }
/* 0.25.2 (pedido do solicitante: "mais retangular para baixo, não para os lados"): o card em pé, 4:5, no computador e no
   celular (era 4:3 no computador e quadrado no celular; 3:2 na 0.23.0) */
.dep-card-fundo { position: absolute; inset: 0; z-index: -1; }
.dep-card-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.dep-card:hover .dep-card-imagem { transform: scale(1.03); }
.dep-card-produto { position: absolute; inset: 7% 12% 42%; display: block; }
.dep-card-folha { position: absolute; left: 50%; top: 32%; width: 13%; aspect-ratio: 430 / 660; transform: translate(-50%, -50%);
  color: #A9823C; opacity: .5; }
.dep-card-sombra { position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none;
  background: linear-gradient(to top, rgba(3,20,28,.86) 0%, rgba(3,20,28,.5) 45%, rgba(3,20,28,0) 100%); }
.dep-card-selo { position: absolute; top: 10px; right: 10px; z-index: 3; pointer-events: none; padding: 3px 9px; border-radius: 9999px;
  background: rgba(255,255,255,.9); color: #3f4a52; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .01em;
  box-shadow: 0 1px 3px rgba(3,20,28,.15); }
.dep-card-texto { min-width: 0; padding: 0 clamp(12px, 5.5cqi, 24px) clamp(10px, 4.5cqi, 20px); }
.dep-card-nome { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.05;
  font-size: clamp(17px, 8cqi, 34px); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: break-word;
  text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.dep-card-nome::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.dep-card-nome:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: #D2B87D; }
.dep-card-nome:focus-visible { outline: none; }
.dep-card-nome:focus-visible::after { outline: 3px solid #D2B87D; outline-offset: -3px; }
/* 0.39.0 (pedido do solicitante): embaixo do nome, a quantidade de produtos (a esteira dos subgrupos, que passava sem
   parar, saiu; os subgrupos ficam na página do departamento). A `esteira-anda` abaixo continua: é a da página aberta. */
.dep-card-info { position: relative; z-index: 2; pointer-events: none; margin-top: clamp(3px, 1.6cqi, 8px); font-size: clamp(10.5px, 3cqi, 12.5px);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88); }
@keyframes esteira-anda { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .dep-card-imagem { transition: none; }
  .dep-card:hover .dep-card-imagem { transform: none; }
}

/* ---------- produtos: a foto é o cartão, retrato 3:4, sem borda, 5 por linha ---------- */
.cartao-produto { position: relative; display: flex; flex-direction: column; }
.quadro-retrato { position: relative; aspect-ratio: 3 / 4; background: #f5f3ef; overflow: hidden; }
.quadro-retrato img { transition: transform .35s ease; }
.cartao-produto:hover .quadro-retrato img { transform: scale(1.02); }
.cartao-info { display: flex; align-items: flex-start; gap: 8px; padding: 10px 4px 0 6px; }
.cartao-mais { flex: none; margin-top: 12px; }
.botao-mais { position: relative; width: 34px; height: 34px; border-radius: 9999px; background: #072A40; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s; }
.botao-mais:hover { background: #031C26; }
.botao-mais:active { transform: scale(.94); }
.botao-mais .si { width: 18px; height: 18px; }
.botao-mais.ok { background: #1c7a4a; }
.botao-mais:disabled { opacity: .6; }
.sel-btn { position: absolute; top: 8px; right: 8px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.88); color: #072A40; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 10px -6px rgba(7,42,64,.45); transition: background .15s, color .15s, transform .1s, opacity .15s; opacity: 0; }
.cartao-produto:hover .sel-btn, .sel-btn.on, .sel-btn:focus-visible { opacity: 1; }
@media (hover: none) { .sel-btn { opacity: 1; } }
.sel-btn .si, .sel-btn .coracao { width: 17px; height: 17px; stroke-width: 2.2; }
.sel-btn:active { transform: scale(.94); }
.coracao { flex: none; display: inline-block; transition: fill .15s, transform .15s; }
.sel-btn.on .coracao, .botao-curtir.on .coracao { fill: currentColor; }
.sel-btn.on { background: #fff; color: #D98032; }
.grade-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2px; row-gap: 22px; }
@media (min-width: 768px) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-produtos { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 28px; } }
@media (min-width: 1024px) { .grade-produtos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; } }
/* 0.47.0 (pedido do solicitante, com o desenho aprovado: "uma caixinha que aparece"): no computador e no tablet, a mesma
   caixa dos filtros do celular (`.filtros-celular`, publico/listagem.html) vira uma CAIXINHA embaixo do botão "Filtrar":
   Tipo em cima (largura toda), Grupo e Subgrupos em duas colunas que rolam; cada pílula vira uma linha com o quadradinho
   (marcado = o filtro atual) e a quantidade à direita; o rodapé com "Limpar filtros" e "Ver N produtos". Fechada, nada
   aparece (sem JavaScript, a caixa fica à vista embaixo da linha). As etiquetas (`.etiqueta-filtro`) mostram o que está
   escolhido ao lado do botão, cada uma tirando o próprio filtro. */
.etiqueta-filtro { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 9999px; background: #f6edd6;
  color: #3a2d0a; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.etiqueta-filtro .si { color: #A9823C; }
.etiqueta-filtro:hover { background: #efe1bd; }
.etiqueta-filtro:hover .si { color: #b3392f; }
.filtros-vazio { padding: 8px 6px; font-size: 13px; color: #78716c; }
@media (max-width: 767.98px) { .etiqueta-filtro { display: none; } }
@media (min-width: 768px) {
  html.js .filtros-celular:not(.aberto) { display: none; }
  .filtros-celular { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: min(560px, calc(100vw - 32px));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; padding: 14px 16px 12px;
    border-radius: 16px; background: #fff; border: 1px solid #e7e5e4; box-shadow: 0 18px 40px -22px rgba(7,42,64,.45); }
  .filtros-bloco { min-width: 0; }
  .filtros-bloco-largo { grid-column: 1 / -1; }
  .filtros-celular .filtros-secao { margin: 0 0 4px; }
  .filtros-celular .pilulas-linha { flex-direction: column; flex-wrap: nowrap; gap: 1px; max-height: 300px; overflow-y: auto; }
  .filtros-bloco-largo .pilulas-linha { flex-direction: row; flex-wrap: wrap; gap: 6px; max-height: none; }
  .filtros-celular .pilula { border: 0; border-radius: 8px; padding: 6px 8px; background: transparent; font-weight: 500; font-size: 13px; }
  .filtros-celular .pilula::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #c9c2b4; background: #fff; }
  .filtros-celular .pilula:hover { background: #faf5ea; }
  .filtros-celular .pilula.ativa { background: #f6edd6; color: #031C26; font-weight: 600; }
  .filtros-celular .pilula.ativa::before { border-color: #072A40; background: #072A40; }
  .filtros-celular .pilula.ativa .pilula-n { color: #78716c; }
  .filtros-celular .pilula .pilula-n { margin-left: auto; }
  .filtros-bloco-largo .pilula { border: 1px solid #e7e5e4; border-radius: 9999px; padding: 4px 11px; }
  .filtros-bloco-largo .pilula::before { display: none; }
  .filtros-bloco-largo .pilula.ativa { background: #072A40; color: #fff; }
  .filtros-bloco-largo .pilula.ativa .pilula-n { color: #E8DCB8; }
  .filtros-celular .filtros-rodape { grid-column: 1 / -1; position: static; display: flex; align-items: center; gap: 12px;
    margin-top: 2px; padding: 10px 0 0; border-top: 1px solid #ece4d4; background: none; }
}

/* página do produto: foto grande e miniaturas em retrato, sem borda */
.carrossel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
.carrossel-item { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.quadro-produto { aspect-ratio: 3 / 4; background: #f5f3ef; }
/* 05/11/2026 (pedido do solicitante: "Faça o fundo ficar branco no mesmo tom que essas vieram"): a foto de produto
   (`foto-produto`, o macro `foto` de _macros.html, no portal e na área da empresa) tem fundo branco puro, o mesmo das
   fotos tratadas: a sobra do quadro 3:4 numa foto de outra proporção (4:5, 1600 x 2000) fica branca, sem a faixa bege.
   O fundo vale só para a caixa da própria foto: o quadro sem foto ("Foto em breve") continua como era, e a foto
   continua inteira, sem cortar (object-contain). */
.foto-produto { background: #fff; }
/* Zoom da foto do produto (0.27.1; 0.27.2, pedido do solicitante: liga com um clique na foto e desliga com outro; o
   movimento no silkcat.js): só com mouse (computador); ligado, a foto aumenta 2,2× dentro do próprio quadro, seguindo o
   mouse, e desliga ao clicar de novo, ao tirar o mouse da foto ou ao trocar de foto. Desligado, ela continua inteira no
   quadro (regra da foto inteira); no celular e no tablet, como antes. */
@media (hover: hover) and (pointer: fine) {
  .quadro-produto[data-zoom] { position: relative; overflow: hidden; cursor: zoom-in; }
  .quadro-produto[data-zoom].ampliada { cursor: zoom-out; }
  .quadro-produto[data-zoom] img { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform .18s ease-out; }
  .quadro-produto[data-zoom].ampliada img { transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) { .quadro-produto[data-zoom] img { transition: none; } }
.miniatura { display: block; width: 100%; border-radius: 4px; border: 2px solid transparent; background: #f5f3ef; overflow: hidden; cursor: pointer; }
.miniatura.on { border-color: #072A40; }
.ponto { width: 7px; height: 7px; border-radius: 9999px; background: #d6d3d1; transition: width .2s, background .2s; }
.ponto.on { width: 20px; background: #072A40; }
/* 1.15: Curtir e "Compartilhar no WhatsApp" da página do produto como botões (antes, links pequenos em linha) */
.acao-produto { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px;
  font-weight: 600; color: #072A40; background: #fff; border: 1px solid #e7dcc4; cursor: pointer; transition: background .15s, border-color .15s; }
.acao-produto:hover { background: #faf5ea; border-color: #d2b87d; }
.acao-produto .coracao, .acao-produto .si { width: 19px; height: 19px; }
.acao-wpp { color: #1c7a4a; }
/* 1.15: "Entenda os tipos de compra" como um link discreto embaixo das Informações do produto */
.entenda-tipos { font-size: 13.5px; color: #57534e; }
.entenda-tipos summary { cursor: pointer; width: max-content; font-weight: 600; color: #072A40; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: #d2b87d; }

/* ---------- filtros e ordenação (menus suspensos da linha de ferramentas) ---------- */
.painel-suspenso { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(400px, calc(100vw - 24px)); padding: 14px;
  border-radius: 16px; background: #fff; border: 1px solid #ece4d4; box-shadow: 0 24px 48px -20px rgba(3,28,38,.45); }
.painel-suspenso.hidden { display: none; }
.painel-suspenso-curto { width: 240px; padding: 6px; }
.opcao-cor { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 10px; border-radius: 10px; font-size: 14px;
  color: #031C26; border: 1px solid transparent; }
.opcao-cor:hover { background: #faf5ea; }
.opcao-cor.ativa { border-color: #072A40; background: #f7f9fb; font-weight: 600; }
.amostra { flex: none; display: inline-block; width: 16px; height: 16px; border-radius: 9999px; border: 1px solid rgba(3,28,38,.18); }
.amostra-transparente { background: repeating-conic-gradient(#d6d3d1 0 25%, #fff 0 50%) 50% / 8px 8px; }
.amostra-multicolorido { background: conic-gradient(#b3262e, #f2c53d, #5d8a5a, #2f5f8a, #7a4f93, #b3262e); }
.pilula .amostra { width: 13px; height: 13px; margin-right: -2px; }

/* ---------- pedido: painel lateral e linhas ---------- */
.painel-pedido-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(3,28,38,.5); backdrop-filter: blur(2px); }
.painel-pedido-fundo.hidden { display: none; }
.painel-pedido { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #fff; color: #031C26;
  box-shadow: -24px 0 60px -30px rgba(3,28,38,.6); display: flex; flex-direction: column; animation: painel-entra .22s ease-out; }
@keyframes painel-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .painel-pedido { animation: none; } }
.painel-pedido-corpo { flex: 1; overflow: auto; }
.linha-pedido { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.linha-pedido-grande { gap: 14px; padding: 12px 16px; align-items: center; }
.linha-pedido-foto { flex: none; width: 60px; aspect-ratio: 3 / 4; border-radius: 6px; background: #f5f3ef; overflow: hidden; }
.linha-pedido-grande .linha-pedido-foto { width: 56px; }
/* 1.14 (o solicitante: "compacte de uma maneira melhor"): na página do pedido, cada item numa linha baixa (foto, nome e
   preço, a quantidade e o total lado a lado) e o resumo (totais, observação, Finalizar) numa coluna ao lado, presa ao
   rolar; no celular, um embaixo do outro */
.linha-pedido-qtd { flex: none; }
.linha-pedido-total { min-width: 110px; }
.linha-pedido-grande .line-clamp-2 { -webkit-line-clamp: 1; }
@media (max-width: 639.98px) { .linha-pedido-grande { flex-wrap: wrap; } .linha-pedido-qtd { margin-left: 70px; } }
.pedido-pagina-itens, .pedido-pagina-resumo { background: #fff; border: 1px solid #e7e5e4; border-radius: 20px; overflow: hidden; }
.pedido-pagina-resumo { margin-top: 16px; }
.pedido-pagina-resumo .totais-pedido { margin: 16px; }
@media (min-width: 1024px) {
  .pedido-pagina-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  .pedido-pagina-resumo { margin-top: 0; position: sticky; top: calc(var(--altura-topo, 120px) + 16px); }
}
html.silk-dark .pedido-pagina-itens, html.silk-dark .pedido-pagina-resumo { background: var(--e-superficie); border-color: var(--e-borda); }
.totais-pedido { margin: 8px 16px 16px; padding: 14px 16px; border-radius: 16px; background: #faf8f3; border: 1px solid #ece4d4; font-size: 14.5px; color: #44403c; display: flex; flex-direction: column; gap: 6px; }
.totais-pedido b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #031C26; }
.linha-pedido-grande ~ .totais-pedido { margin: 8px 20px 16px; }

/* ---------- telas de entrar ---------- */
.bloco-entrar { background: #fff; border: 1px solid #e7e5e4; border-radius: 24px; padding: 26px; box-shadow: 0 1px 2px rgba(7,42,64,.05); }
@media (min-width: 640px) { .bloco-entrar { padding: 30px; } }
.bloco-entrar-claro { background: #fbf7ee; border-color: #ead9b3; }
.barra-entrar { background: #072A40; }

/* ---------- títulos das seções ---------- */
.titulo-secao { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 32px; line-height: 1.05; color: #031C26; text-align: center; }
.titulo-secao em { font-style: normal; font-weight: 600; }
@media (min-width: 640px) { .titulo-secao { font-size: 38px; } }

/* ---------- coleções (catálogos temáticos: fora do menu; a página continua abrindo por link) ---------- */
/* 1.16: no tamanho dos cards dos grupos do início (2 · 3 · 4 por linha), para a capa caber inteira na tela */
.grade-catalogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .grade-catalogos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1024px) { .grade-catalogos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.catalogo-capa { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #1d2a30;
  box-shadow: 0 1px 2px rgba(7,42,64,.08); transition: box-shadow .3s ease; isolation: isolate; }
.catalogo-capa:hover, .catalogo-capa:focus-visible { box-shadow: 0 24px 44px -22px rgba(3,28,38,.6); }
.catalogo-capa:focus-visible { outline: 3px solid #D2B87D; outline-offset: 2px; }
.catalogo-capa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.catalogo-capa:hover .catalogo-capa-img { transform: scale(1.04); }
.catalogo-capa-vazia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #D2B87D;
  background: linear-gradient(160deg, #0b3550, #031C26); }
.catalogo-capa-sombra { position: absolute; inset: auto 0 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(to top, rgba(3,20,28,.86) 0%, rgba(3,20,28,.55) 38%, rgba(3,20,28,0) 100%); }
.catalogo-capa-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 15px; color: #fbf5e8; }
@media (min-width: 1024px) { .catalogo-capa-texto { padding: 20px 22px 18px; } }
/* 1.16: o nome no tamanho do card (a largura do card, não a da tela; o card ficou menor) */
.catalogo-capa { container-type: inline-size; }
.catalogo-capa-nome { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.02;
  font-size: clamp(20px, 9cqi, 38px); letter-spacing: -.005em; text-shadow: 0 2px 18px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.catalogo-capa-qtd { display: block; margin-top: 8px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #E8DCB8; }
@media (prefers-reduced-motion: reduce) { .catalogo-capa-img { transition: none; } .catalogo-capa:hover .catalogo-capa-img { transform: none; } }

/* ---------- linha de ferramentas das listagens: presa logo abaixo do cabeçalho ---------- */
html { scroll-padding-top: calc(var(--altura-topo, 120px) + 64px); }
.linha-ferramentas { position: sticky; top: var(--altura-topo, 0px); z-index: 20; margin: 8px -8px 0; padding: 8px 9px;
  background: rgba(250,248,243,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #ece4d4; }
@media (min-width: 640px) { .linha-ferramentas { margin-left: -12px; margin-right: -12px; padding-left: 13px; padding-right: 13px; } }
@media (min-width: 1024px) { .linha-ferramentas { margin-left: -16px; margin-right: -16px; padding-left: 17px; padding-right: 17px; } }

/* Dica flutuante encostada na borda direita da tela */
.tip.tip-direita::after { left: auto; right: 0; transform: translateY(-3px); }
.tip.tip-direita:hover::after, .tip.tip-direita:focus-visible::after { transform: translateY(0); }
html, body { overflow-x: clip; }

/* ---------- campos ---------- */
.caixa { width: 18px; height: 18px; accent-color: #072A40; cursor: pointer; }
.campo-texto { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border-radius: 12px; border: 1px solid #e7e5e4; background: #fafaf9;
  font-size: 15px; color: #031C26; }
.campo-texto:focus { outline: none; border-color: #072A40; background: #fff; }

/* ---------- modo escuro (o dark-mode.js cuida das classes do Tailwind) ---------- */
html.silk-dark .pilula { background: var(--e-afundado); border-color: var(--e-borda); color: var(--e-texto); }
html.silk-dark .pilula.ativa { background: #0e3a55; border-color: #0e3a55; }
html.silk-dark .quadro-retrato, html.silk-dark .quadro-produto, html.silk-dark .miniatura, html.silk-dark .linha-pedido-foto,
html.silk-dark .dep-card { background: var(--e-superficie); border-color: var(--e-borda); }
html.silk-dark .dep-card-folha { color: var(--e-acento); opacity: .35; }
html.silk-dark .dep-card-selo { background: rgba(18,30,39,.88); color: var(--e-texto); }
html.silk-dark .codigo-chip, html.silk-dark .chip-codigo, html.silk-dark .selo-bege { background: color-mix(in srgb, var(--e-acento) 18%, transparent); color: var(--e-creme); }
html.silk-dark .sel-btn { background: var(--e-superficie); border-color: var(--e-borda); color: var(--e-texto); }
html.silk-dark .sel-btn.on { background: var(--e-superficie); color: #F2B33D; }
html.silk-dark .menu-celular-item, html.silk-dark .migalhas > span, html.silk-dark .menu-dep, html.silk-dark .mega-item, html.silk-dark .menu-conta-item,
html.silk-dark .mega-grupo, html.silk-dark .preco-final, html.silk-dark .card-tipo-titulo, html.silk-dark .stepper-campo, html.silk-dark .totais-pedido b,
html.silk-dark .titulo-secao, html.silk-dark .acao-produto { color: var(--e-texto); }
html.silk-dark .menu-dep:hover, html.silk-dark [data-departamento]:hover > .menu-dep, html.silk-dark .mega-item:hover, html.silk-dark .menu-conta-item:hover,
html.silk-dark .acao-produto:hover { background: var(--e-superficie); color: #F2B33D; }
html.silk-dark .mega, html.silk-dark .menu-conta, html.silk-dark .sugestoes, html.silk-dark .painel-suspenso, html.silk-dark .painel-pedido,
html.silk-dark .bloco-entrar, html.silk-dark .card-tipo, html.silk-dark .stepper, html.silk-dark .stepper-campo,
html.silk-dark .campo-texto { background: var(--e-afundado); border-color: var(--e-borda); color: var(--e-texto); }
html.silk-dark .stepper-bt, html.silk-dark .totais-pedido { background: var(--e-superficie); border-color: var(--e-borda); color: var(--e-texto); }
html.silk-dark .sugestao, html.silk-dark .sugestao-todos { color: var(--e-texto); }
html.silk-dark .sugestao:hover, html.silk-dark .sugestao:focus { background: var(--e-superficie); }
html.silk-dark .sugestao-foto { background: var(--e-superficie); border-color: var(--e-borda); }
html.silk-dark [data-busca-celular] .campo-busca { background: var(--e-afundado); border-color: var(--e-borda); color: var(--e-texto); }
html.silk-dark .linha-ferramentas { background: rgba(14,25,32,.94); border-color: var(--e-borda); }
html.silk-dark .opcao-cor { color: var(--e-texto); }
html.silk-dark .opcao-cor:hover, html.silk-dark .opcao-cor.ativa { background: var(--e-superficie); }
html.silk-dark .card-tipo-icone { background: color-mix(in srgb, var(--e-acento) 16%, transparent); }
/* 0.31.1 (pedido do solicitante: no claro os dois cards têm cores diferentes, no escuro ficavam iguais): o claro na
   superfície de cima; o escuro (Importar planilha, Sob encomenda) num marinho mais fundo e saturado, com a borda dourada */
html.silk-dark .card-tipo:not(.card-tipo-escuro) { background: var(--e-superficie-2); }
html.silk-dark .card-tipo-escuro { background: linear-gradient(160deg, #0d3a57, #06202f); border-color: color-mix(in srgb, var(--e-acento) 45%, transparent); }
html.silk-dark .card-tipo-escuro .card-tipo-titulo { color: var(--e-creme); }
html.silk-dark .card-tipo-escuro .card-tipo-texto { color: var(--e-texto-2); }
html.silk-dark .card-tipo-escuro .card-tipo-icone { background: color-mix(in srgb, var(--e-acento) 22%, transparent); color: var(--e-creme); }
/* 0.32.1: os textos cinza e marinho que não tinham a cor do escuro (as migalhas, a frase dos cards de tipo, o preço sem
   valor, o sob encomenda do card) */
html.silk-dark .migalhas, html.silk-dark .card-tipo-texto, html.silk-dark .preco-sem { color: var(--e-texto-3); }
html.silk-dark .migalhas a:hover { color: var(--e-texto); }
html.silk-dark .estoque-encomenda { color: var(--e-texto-2); }
html.silk-dark .bloco-entrar-claro { background: var(--e-fundo); }

/* aviso flutuante sobe quando há painel aberto */
body:has(.painel-pedido-fundo:not(.hidden)) #toast { z-index: 70; }

/* =====================================================================
   Página aberta (0.16.0): referência aprovada, na Base Visual Silk. Fundo creme claro, marca no centro,
   banner de ponta a ponta com o nome do grupo por cima, botões retos (navy cheio e contorno), rodapé navy fino.
   ===================================================================== */
body.aberta { background: #faf8f4 !important; }
.aberta-topo { background: #faf8f4; border-bottom: 1px solid #ece4d4; }
.aberta-menu a { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #031C26; }
.aberta-menu a:hover { color: #A9823C; }
.aberta-menu-destaque { padding-bottom: 3px; border-bottom: 1px solid #031C26; }
/* 0.25.2 (pedido do solicitante): o banner saiu; o vídeo do showroom fica no topo, centralizado, num quadro de player:
   16:9, até 900 px, cantos arredondados, sombra suave e, com o link do YouTube, o botão de play no meio (abre em outra
   aba: nada da internet é carregado na página) e "Assistir no YouTube" no canto. */
.aberta-player { position: relative; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 18px; background: #081d27; box-shadow: 0 28px 60px -30px rgba(3, 28, 38, .65); }
.aberta-player-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(3, 20, 28, .55), rgba(3, 20, 28, .05) 55%); }
.aberta-player-play { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 56px; border-radius: 16px;
  background: rgba(255, 255, 255, .94); color: #031C26; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55); transition: transform .15s, background .15s; }
.aberta-player-play .si { width: 26px; height: 26px; margin-left: 3px; }
.aberta-player-link:hover .aberta-player-play, .aberta-player-link:focus-visible .aberta-player-play { transform: scale(1.06); background: #fff; }
.aberta-player-rotulo { position: absolute; left: 18px; bottom: 14px; font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .85); }
@media (max-width: 639px) { .aberta-player { border-radius: 12px; } .aberta-player-play { width: 64px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .aberta-player-play { transition: none; } }
.aberta-botao { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.aberta-botao.escuro { background: #072A40; color: #fff; border: 1px solid #072A40; }
.aberta-botao.escuro:hover { background: #031C26; }
.aberta-botao.claro { background: transparent; color: #072A40; border: 1px solid #072A40; }
.aberta-botao.claro:hover { background: #072A40; color: #fff; }
.aberta-rede { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #c9bfae; display: inline-flex; align-items: center; justify-content: center; color: #072A40; }
.aberta-rede:hover { background: #072A40; color: #fff; border-color: #072A40; }
.aberta-rodape { background: #031C26; }
/* Página aberta: sem o fundo animado (aurora) da Base Visual. As manchas desfocadas, desenhadas por cima de uma
   página tão clara, apareciam como um bloco quadriculado sobre o texto no Chrome (visto em 29/09/2026). */
body.aberta .silk-aurora { display: none !important; }
/* "Quero ser cliente" da página aberta (0.20.0): o botão principal da seção, um pouco maior que os de contato */
.aberta-botao.destaque { padding: 13px 26px; font-size: 14.5px; }
/* A página aberta no celular (1.21, pedido do solicitante com uma referência de outro site: "centralizado, clean e
   fácil de navegar"; "não copie, só absorva como base"). Só abaixo de 768 px: o topo preso no alto, com a marca à
   esquerda e o botão do menu à direita (o <details> de _aberta_topo.html: as seções e "Já sou cliente" em lista, com
   alvos grandes); as seções, os textos e os botões no meio; os botões na largura do dedo. Do tablet para cima, nada muda. */
@media (max-width: 767.98px) {
  html:has(body.aberta) { scroll-padding-top: 72px; }                 /* o título da seção não some atrás do topo preso */
  .aberta-topo { position: sticky; top: 0; z-index: 30; }
  /* a barra justa no alto (pedido do solicitante: "a barra de cima fixa está com espaço em cima dela ainda"): 6 px em
     cima e embaixo, e o selo de teste da homologação pequeno, no alto, no meio, sem formar uma faixa por cima dela */
  .aberta-topo .aberta-topo-linha { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
  body.aberta [data-faixa-homolog] { padding: 0 6px; font-size: 7.5px; line-height: 12px; letter-spacing: .14em; border-radius: 0 0 6px 6px; }
  .aberta-topo .aberta-marca { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
    justify-items: start; text-align: left; }
  .aberta-topo .aberta-marca .pavao { grid-row: 1 / span 2; height: 34px; }
  .aberta-topo .aberta-marca > span { grid-column: 2; margin-top: 0; }
  .aberta-topo .aberta-marca > span:first-of-type { font-size: 24px; align-self: end; }
  .aberta-topo .aberta-marca > .aberta-slogan { margin-top: 4px; align-self: start; font-size: 7.5px; letter-spacing: .18em; }
  .aberta-menu-celular > summary { list-style: none; }
  .aberta-menu-celular > summary::-webkit-details-marker { display: none; }
  .aberta-menu-botao { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 12px; background: #072A40; color: #fff; cursor: pointer; }
  .aberta-menu-botao .si { width: 22px; height: 22px; }
  .aberta-menu-painel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column;
    align-items: center; padding: 6px 24px 24px; background: #faf8f4; border-bottom: 1px solid #ece4d4;
    box-shadow: 0 18px 30px -18px rgba(3,28,38,.35); }
  .aberta-menu-painel a { width: 100%; max-width: 360px; padding: 16px 0; text-align: center; font-size: 12.5px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: #031C26; border-bottom: 1px solid #ece4d4; }
  .aberta-menu-painel a.aberta-menu-entrar { margin-top: 18px; padding: 15px 0; border: 0; border-radius: 12px; background: #072A40; color: #fff; }

  /* os números de Quem somos no meio: dois por linha, e o que sobra sozinho (um número só, ou o terceiro) no centro;
     antes, a grade de duas colunas deixava um número só na metade da esquerda (print do solicitante, 21/10/2026) */
  #quem-somos [data-numeros-aberta] { display: flex; flex-wrap: wrap; justify-content: center; }
  #quem-somos [data-numeros-aberta] > div { flex: 0 0 50%; }

  /* as seções no meio: Como trabalhamos, Quero ser cliente, Showroom e o rodapé (Quem somos já era) */
  .aberta .aberta-traco { margin-left: auto; margin-right: auto; }
  #como-trabalhamos > div { text-align: center; row-gap: 34px; }
  #como-trabalhamos > div > div { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .aberta-cliente, .aberta-showroom { text-align: center; }
  .aberta-cliente > p { margin-left: auto; margin-right: auto; }
  .aberta-cliente > div { display: flex; flex-direction: column; align-items: center; }
  .aberta-cliente .aberta-botao { width: 100%; max-width: 340px; min-height: 52px; justify-content: center; }
  .aberta-showroom > p { justify-content: center; }
  .aberta-rodape-linha { align-items: center; text-align: center; }
  .aberta-rodape-linha > p { justify-content: center; }
}
/* Esteira de fotos "Um pouco de nós" da página aberta (0.20.0, Entrega C, rascunho R16; publico/_esteira_aberta.html, o
   movimento no silkcat.js): o título na serifada, no meio; embaixo, uma fileira de fotos em retrato 3:4, todas do mesmo
   tamanho (220 px de altura no celular, até 340 px no computador), cantos arredondados, saindo pelas bordas da tela; a
   etiqueta clara embaixo, à esquerda, só com legenda (quebra em linhas, nunca corta). Com o JavaScript (`.anda`), a faixa
   anda devagar da direita para a esquerda em volta contínua (a mesma `esteira-anda` dos departamentos, só transform) e
   roda sem parar (0.21.0: o mouse e o toque não param); só para fora da tela (`.fora`) e com o foco do teclado. Sem o JavaScript, ou
   para quem pediu menos movimento, fica parada (no meio, se couber) e rola para o lado por dentro dela; a página nunca
   (html, body: overflow-x clip). O vão entre as fotos mora dentro de cada volta (padding à direita), para a emenda não
   saltar. */
.esteira-fotos-secao { padding-top: clamp(40px, 4.4vw, 56px); }
.esteira-fotos { --esteira-foto-altura: clamp(220px, 25vw, 340px); --esteira-foto-vao: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(18px, 2.2vw, 28px); padding: 2px var(--esteira-foto-vao); overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(3,28,38,.25) transparent; }
.esteira-fotos:focus-visible { outline: 2px solid #D2B87D; outline-offset: -2px; }
.esteira-fotos-faixa { display: flex; width: max-content; margin-inline: auto; }
.esteira-fotos-volta { display: flex; flex: none; gap: var(--esteira-foto-vao); margin: 0; padding: 0; list-style: none; }
.esteira-foto { position: relative; flex: none; width: calc(var(--esteira-foto-altura) * 3 / 4); height: var(--esteira-foto-altura);
  overflow: hidden; border-radius: clamp(10px, 1vw, 14px); background: #ece4d4; }
.esteira-foto img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.esteira-foto-legenda { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: #031C26; font-size: 11.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere;
  box-shadow: 0 1px 4px rgba(3,20,28,.18); pointer-events: none; }
@media (min-width: 1024px) { .esteira-foto-legenda { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 11px; font-size: 12.5px; } }
.esteira-fotos.anda { padding-inline: 0; overflow: hidden; }
.esteira-fotos.anda .esteira-fotos-volta { padding-right: var(--esteira-foto-vao); }
.esteira-fotos.anda .esteira-fotos-faixa { animation: esteira-anda var(--esteira-duracao, 90s) linear infinite; }
.esteira-fotos.anda.fora .esteira-fotos-faixa,
.esteira-fotos.anda:focus-visible .esteira-fotos-faixa { animation-play-state: paused; }   /* 0.21.0: sem parar no mouse/toque */
.esteira-fotos.arrasta { cursor: grab; }
.esteira-fotos.arrastando { cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: reduce) { .esteira-fotos-faixa { animation: none !important; } }
html.silk-dark .esteira-foto { background: var(--e-superficie); }
html.silk-dark .esteira-foto-legenda { background: rgba(18,30,39,.88); color: var(--e-texto); }
html.silk-dark .esteira-fotos { scrollbar-color: rgba(230,237,242,.25) transparent; }

/* =====================================================================
   Rodapé fino do portal (0.20.0, cliente logado e a equipe como o SILKFLOWER): no estilo do rodapé da página aberta
   (navy, "Silk Flower" na Cormorant). O corpo do portal vira uma coluna e o rodapé vai para o fim da tela: sem a sobra
   em branco de baixo (o pb-10 do corpo) nem o rodapé no meio da tela nas páginas curtas. O <main> e o aviso de ajuste
   ganham a largura toda (numa coluna flexível, o mx-auto encolheria a caixa). O rodapé não é fixo: não cobre nada.
   ===================================================================== */
body.silkcat-publico { display: flex; flex-direction: column; padding-bottom: 0; }
body.silkcat-publico > main, body.silkcat-publico > [data-aviso-ajuste] { width: 100%; }
body.silkcat-publico > main { margin-bottom: 16px; }
.rodape-portal { margin-top: auto; background: #031C26; color: #fff; }
/* 0.39.0: o tipo de compra na página do produto (publico/produto.html): a caixa com o nome e a condição; pronta entrega
   em bege, reencomenda e sob encomenda em azul-claro (como o selo "Sob encomenda") */
.tipo-compra { border-radius: 12px; border: 1px solid #ead9b3; background: #fbf7ee; padding: 7px 12px; }   /* 0.49.0: mais fina */
.tipo-compra-reencomenda, .tipo-compra-sob_encomenda { border-color: #c8d6e1; background: #f1f6f9; }
.tipo-compra-nome { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #031C26; }
.tipo-compra-nome .si { color: #A9823C; }
.tipo-compra-reencomenda .tipo-compra-nome .si, .tipo-compra-sob_encomenda .tipo-compra-nome .si { color: #072A40; }
.tipo-compra-condicao { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: #57534e; }
/* 1.15: as Informações do produto numa tabela só, com o tipo de compra na primeira linha (o nome numa etiqueta com a
   cor do tipo e a condição embaixo) */
.info-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; align-items: baseline; }
@media (min-width: 640px) { .info-linha { grid-template-columns: 180px minmax(0, 1fr); } }
.info-linha dt { color: #78716c; }
.info-linha dd { color: #031C26; font-weight: 500; }
.tipo-compra-linha { border: 0; background: none; padding: 0; }
.tipo-compra-linha .tipo-compra-nome { display: inline-flex; padding: 3px 11px; border-radius: 9999px; border: 1px solid #ead9b3;
  background: #fbf7ee; font-size: 13.5px; }
.tipo-compra-linha.tipo-compra-reencomenda .tipo-compra-nome, .tipo-compra-linha.tipo-compra-sob_encomenda .tipo-compra-nome {
  border-color: #c8d6e1; background: #f1f6f9; }
.tipo-compra-linha .tipo-compra-condicao { margin-top: 6px; font-size: 14px; font-weight: 400; color: #44403c; }
/* 0.39.0: no celular, as pílulas da listagem ficam atrás do botão "Filtrar" (publico/listagem.html); sem JavaScript, à vista.
   0.40.0 (referência do solicitante, o site Sunpan): aberto, os filtros ocupam a tela inteira, com o topo e o rodapé
   presos. A faixa de ferramentas (sticky, com backdrop-filter) seria a caixa do `position: fixed`: aberto, ela perde o
   desfoque e passa por cima do cabeçalho (`html.filtros-abertos`, posto pelo silkcat.js, que também trava a rolagem). */
@media (max-width: 767.98px) {
  html.js .filtros-celular:not(.aberto) { display: none !important; }
  .filtros-celular.aberto { position: fixed; inset: 0; z-index: 90; margin: 0 !important; padding: 0 16px 96px !important;
    display: flex; flex-direction: column; background: #fff; overflow-y: auto; overscroll-behavior: contain; gap: 8px !important; }
  .filtros-celular.aberto .pilulas-linha { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .filtros-celular.aberto .pilula.hidden { display: inline-flex; }
  .filtros-celular.aberto [data-acao="mais-pilulas"] { display: none; }
  html.filtros-abertos { overflow: hidden; }
  html.filtros-abertos .linha-ferramentas { z-index: 90; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.filtros-topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 0 -16px 4px;
  padding: 12px 10px 12px 16px; background: #fff; border-bottom: 1px solid #ece4d4; }
.filtros-topo-titulo { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #031C26; }
.filtros-limpar { font-size: 13px; color: #A9823C; text-decoration: underline; text-underline-offset: 3px; }
.filtros-secao { margin-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #A9823C; }
.filtros-rodape { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #ece4d4; }
/* 0.40.0: "Topo" no celular (publico/_layout.html), redondo, embaixo à esquerda; aparece depois de rolar um pouco */
.botao-topo { position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 999px;
  border: 1px solid #D2B87D; background: rgba(255,255,255,.96); color: #A9823C; box-shadow: 0 6px 18px -8px rgba(3,28,38,.35);
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.botao-topo[hidden] { display: none; }
/* 0.39.0: o rodapé com a empresa, o showroom e o contato (publico/_layout.html), em colunas no computador */
.rodape-portal-titulo { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #D2B87D; }
/* 1.16: "Fale conosco" é o link do WhatsApp comercial (Dados da empresa) */
.rodape-fale-conosco { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.rodape-fale-conosco:hover { color: #E8DCB8; text-decoration: underline; text-underline-offset: 4px; }
.rodape-portal-item { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); }
.rodape-portal-item .si { flex: none; margin-top: 2px; color: #D2B87D; }
.rodape-portal-rede { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); color: #D2B87D; }
.rodape-portal-rede:hover { border-color: #F2B33D; color: #F2B33D; }
.rodape-portal-contato { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.85); }
.rodape-portal-contato b { font-weight: 600; color: #fff; white-space: nowrap; }
.rodape-portal-contato .si { flex: none; color: #D2B87D; }
.rodape-portal-contato:hover, .rodape-portal-contato:hover b { color: #F2B33D; }
html.silk-dark .rodape-portal { background: var(--e-fundo-baixo); border-top: 1px solid var(--e-borda); }

/* ======================================================================
   O pavão da Silk Flower (0.28.0, pedido do solicitante: saiu a folha; templates/_macros.html, macro pavao, e o
   silk-rail.js). Duas versões, nunca esticadas nem recoloridas (a largura sai da altura): a azul com a caixa dourada no
   tema claro e a de bege e dourado no modo escuro; onde o fundo é sempre escuro (cabeçalho do portal, capa vazia de
   catálogo), só a de bege e dourado. A tela de carregamento (fundo creme, também no modo escuro) usa a azul.
   ====================================================================== */
.pavao { display: inline-block; flex: none; width: auto; max-width: none; object-fit: contain; }
.pavao-escuro { display: none; }
html.silk-dark .pavao-claro { display: none; }
html.silk-dark .pavao-escuro { display: inline-block; }
/* no quadro "Foto em breve" (claro também no modo escuro) o pavão azul é um fundo do CSS, não uma imagem: o quadro de
   produto sem foto nunca tem <img> (nada que pareça uma foto quebrada) */
.pavao-fundo { display: inline-block; flex: none; aspect-ratio: 494 / 441; background: url("../assets/silk-pavao.png") center / contain no-repeat; }
.dep-card-folha { aspect-ratio: 494 / 441; width: 24%; }
.dep-card-folha .pavao { width: 100%; height: auto; }
body::after { width: clamp(150px, 20vw, 210px); height: clamp(134px, 17.9vw, 188px);
  background-image: url("../assets/silk-pavao.png"); }


/* ============================================================== o portal no celular (1.19)
   Pedido do solicitante (20/10/2026): "precisamos mudar algumas coisas no layout para celular, pois aposto que será onde
   mais os clientes vão querer utilizar"; "IMPORTANTE: essas mudanças de layout se aplicam somente ao modo de
   visualização no celular. Não deve ser mudado nada no computador." Por isso TUDO aqui fica abaixo de 768 px (e os
   botões presos embaixo somem do tablet para cima). O topo: o menu à esquerda, a marca no meio, os curtidos à direita
   (o Pedido do topo sai: fica o preso embaixo) e a barra da busca embaixo; o Pedido e o WhatsApp presos embaixo; o
   "Topo" à direita, acima do WhatsApp; no card, o coração ao lado do "+"; a foto do produto até uns 58% da altura da
   tela; um respiro entre as fotos da grade; o resumo do pedido arrumado e o "Finalizar pedido" inteiro. */
.pedido-flutuante, .whatsapp-flutuante { display: none; }
.cartao-acoes { flex: none; display: flex; align-items: center; }
.curtir-celular { display: none; }
@media (max-width: 767.98px) {
  /* o topo: o menu à esquerda, a marca no meio, os curtidos à direita; o Pedido do topo sai (fica o preso embaixo) */
  [data-cabecalho] .faixa-topo-linha { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; height: 60px; }
  [data-cabecalho] .faixa-topo-linha [data-acao="abrir-menu"] { justify-self: start; margin-left: -4px; }
  [data-cabecalho] .marca-topo { justify-self: center; }
  [data-cabecalho] .faixa-topo-linha > :last-child { justify-self: end; margin-left: 0; }
  .marca-topo .marca-pavao { height: 28px; width: auto; }
  .marca-topo .marca-nome { font-size: 20px; }
  .marca-topo .marca-sub { font-size: 7px; letter-spacing: .2em; margin-top: 3px; }
  [data-cabecalho] .faixa-botao { min-width: 36px; }
  [data-cabecalho] .faixa-pedido { display: none; }
  /* a barra da busca, sempre à mostra, na mesma faixa escura do topo */
  [data-cabecalho] [data-busca-celular] { background: #031C26; border-top-color: transparent; padding: 0 12px 10px; }
  [data-cabecalho] [data-busca-celular] .campo-busca { height: 42px; background: #fff; border-color: transparent; }
  [data-cabecalho] [data-busca-celular] .campo-busca:focus { border-color: #D2B87D; }
  .selo-homolog { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); height: 14px; padding: 0 6px;
    font-size: 8.5px; letter-spacing: .08em; }

  /* presos embaixo: o Pedido à esquerda, o WhatsApp à direita e o Topo acima dele (abaixo da gaveta do menu, z 40) */
  .pedido-flutuante { position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35;
    display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 14px; border-radius: 9999px;
    background: #031C26; color: #fff; box-shadow: 0 10px 24px -10px rgba(3,28,38,.6); }
  .pedido-flutuante[hidden] { display: none; }
  .pedido-flutuante .si { width: 22px; height: 22px; }
  .pedido-flutuante-texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
  .pedido-flutuante-texto b { font-size: 13px; font-weight: 700; }
  .pedido-flutuante-texto [data-pedido-total] { font-size: 11.5px; font-weight: 600; color: #E8DCB8; }
  .pedido-flutuante:active { transform: scale(.97); }
  .whatsapp-flutuante { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35;
    display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 9999px;
    background: #1c7a4a; color: #fff; box-shadow: 0 10px 24px -10px rgba(3,28,38,.6); }
  .whatsapp-flutuante .si { width: 26px; height: 26px; }
  .whatsapp-flutuante:active { transform: scale(.96); }
  .whatsapp-flutuante.com-barra { bottom: calc(72px + env(safe-area-inset-bottom)); }   /* acima do botão da equipe */
  .botao-topo { left: auto; right: 14px; z-index: 35; }
  .botao-topo.com-barra { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .whatsapp-flutuante + .botao-topo { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .whatsapp-flutuante.com-barra + .botao-topo { bottom: calc(138px + env(safe-area-inset-bottom)); }
  .espaco-flutuantes { height: 80px; }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }                          /* o aviso acima dos botões */

  /* o card: o coração ao lado do "+", os dois fáceis de tocar; o da foto sai */
  .cartao-produto .quadro-retrato [data-form-curtir] { display: none; }
  .cartao-acoes { flex-direction: column; gap: 8px; }
  .curtir-celular { display: block; margin-top: 10px; }
  .curtir-celular + .cartao-mais { margin-top: 0; }
  .botao-mais { width: 38px; height: 38px; }
  .botao-curtir-cartao { width: 38px; height: 38px; border-radius: 9999px; display: flex; align-items: center;
    justify-content: center; border: 1px solid #e7e0d0; background: #fff; color: #072A40; }
  .botao-curtir-cartao .coracao { width: 18px; height: 18px; stroke-width: 2.2; }
  .botao-curtir-cartao.on { color: #D98032; border-color: #f0c99f; }
  .botao-curtir-cartao.on .coracao { fill: currentColor; }

  /* as fotos: um respiro entre as duas da grade; a do produto até uns 58% da altura da tela */
  .grade-produtos { column-gap: 8px; }
  .quadro-produto { aspect-ratio: auto; height: min(133.33vw, 58vh); }

  /* o resumo do pedido (no painel e na página): o total em destaque, os avisos embaixo de uma linha; o "Finalizar pedido"
     inteiro (com flex-1 numa coluna ele encolhia); os avisos do fim centralizados e menores */
  .totais-pedido { margin: 6px 16px 14px; padding: 14px 16px 12px; gap: 4px; font-size: 14px; }
  .totais-pedido [data-total-tipo] { align-items: baseline; }
  .totais-pedido [data-total-tipo] > span { font-weight: 600; color: #031C26; }
  .totais-pedido b { font-size: 24px; line-height: 1.1; }
  .totais-pedido [data-ipi-tipo] { margin-top: 0; font-size: 12px; }
  .totais-pedido > p { margin-top: 0; font-size: 12px; line-height: 1.45; }
  .totais-pedido > p:first-of-type { margin-top: 8px; padding-top: 10px; border-top: 1px solid #ece4d4; }
  form[data-form-finalizar] { padding: 0 16px 20px; }
  form[data-form-finalizar] label { font-size: 13px; }
  form[data-form-finalizar] textarea { padding: 10px 14px; }
  form[data-form-finalizar] [data-enviar-pedido] { flex: none; width: 100%; height: 54px; font-size: 16.5px; }
  form[data-form-finalizar] [data-acao="fechar-pedido"] { height: 44px; }
  p[data-aviso-teste], p[data-aviso-demonstracao] { margin-top: 14px; padding: 8px 12px; border-radius: 10px; background: #fdf6e7; font-size: 12px; text-align: center; }
  p[data-texto-pagamento] { margin-top: 10px; font-size: 11.5px; line-height: 1.5; text-align: center; color: #78716c; }
  html.silk-dark .totais-pedido [data-total-tipo] > span { color: var(--e-texto, #e6e1d6); }
  html.silk-dark .totais-pedido > p:first-of-type { border-top-color: var(--e-borda, #233d52); }
  html.silk-dark p[data-aviso-teste], html.silk-dark p[data-aviso-demonstracao] { background: rgba(217,128,50,.12); }
}
html.silk-dark .botao-curtir-cartao { background: var(--e-superficie, #112334); border-color: var(--e-borda, #233d52); color: var(--e-texto, #e6e1d6); }


/* ============================================================== o Início do portal no celular (1.34)
   Etapa 1 do plano do celular, aprovada pelo solicitante (04/11/2026): "no celular o cliente não vai ficar clicando em
   botões pequenos e escondidos, por isso ele deve entrar e navegar apenas rolando para baixo, com todas as sessões e
   categorias"; "o modo celular não pode ser copiado no estilo do que é de PC". Como na 1.19, TUDO aqui fica abaixo de
   768 px: do tablet para cima o Início continua o mesmo (publico/inicio.html). Fora da @media, só o que esconde no
   computador: os blocos que só o celular tem (os de cada grupo e os Catálogos, que chegam pelo HTMX quando a rolagem
   fica a uma tela deles; escondidos, nunca são pedidos) e os botões grandes de "Ver todos". */
.inicio-so-celular, .inicio-ver-todos { display: none; }
@media (max-width: 767.98px) {
  /* 1. Pronta entrega e Sob encomenda lado a lado, menores: o ícone em cima, o nome, a frase em até 2 linhas e a seta no
     canto (div.inicio-tipos: mais forte que o grid-cols-1 do Tailwind, que vem depois) */
  div.inicio-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inicio-tipos .card-tipo { position: relative; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 13px; border-radius: 16px; }
  .inicio-tipos .card-tipo-icone { width: 38px; height: 38px; border-radius: 11px; }
  .inicio-tipos .card-tipo-icone .si { width: 19px; height: 19px; }
  .inicio-tipos .card-tipo-titulo { font-size: 21px; line-height: 1.05; }
  .inicio-tipos .card-tipo-texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin-top: 5px; font-size: 11.5px; line-height: 1.35; }
  .inicio-tipos .card-tipo-seta { position: absolute; top: 14px; right: 12px; }
  .inicio-tipos .card-tipo-seta .si { width: 18px; height: 18px; }

  /* 2, 3 e 5. Grupos, Novidades e Mais vendidos em grade de 2 por linha, no lugar da fileira que anda para o lado: o mesmo
     HTML e o mesmo .rolo do computador; com o --rolo-n bem alto o silkcat.js não gira (sem cópias, sem setas, sem mexer
     na rolagem) e o trilho vira grade. Os Grupos, todos; Novidades e Mais vendidos, os 6 primeiros (as fotos dos outros,
     escondidas, não são baixadas) e o "Ver todos" grande embaixo, no lugar do pequeno ao lado do título. */
  .inicio-portal .rolo { --rolo-n: 9999; }
  .inicio-portal .rolo-trilho { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible;
    scroll-snap-type: none; padding-bottom: 0; }
  .inicio-portal .rolo-produtos .rolo-trilho { row-gap: 22px; }
  .inicio-portal .rolo-produtos .rolo-trilho > .rolo-item:nth-child(n+7) { display: none; }
  .inicio-portal .rolo-trilho > [data-rolo-clone], .inicio-portal .rolo .rolo-seta, .inicio-portal [data-rolo-ver-todos] { display: none; }

  /* 4 e 6. Um bloco por grupo e os Catálogos, só no celular. O marcador do HTMX (hx-trigger "intersect once") vai de uma
     tela acima do bloco até o fim dele: o pedido sai quando a rolagem chega a uma tela (o intersect do HTMX não tem
     margem); não pega clique. O lugar reservado tem o tamanho de 2 × 2 cartões (ou capas), só com o JavaScript ligado
     (sem ele, ficam o título e o botão); se o pedido falhar, o silkcat.js o tira. */
  .inicio-so-celular { display: block; }
  .inicio-bloco { position: relative; margin-top: 40px; }
  .inicio-bloco-gatilho { position: absolute; left: 0; right: 0; top: -100vh; bottom: 0; pointer-events: none; }
  .inicio-bloco-grade { margin-top: 20px; }
  .inicio-bloco .grade-catalogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inicio-lugar { display: none; }
  html.js .inicio-lugar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 22px; margin-top: 20px; }
  .inicio-lugar-cartao::before { content: ''; display: block; aspect-ratio: 3 / 4; background: #f5f3ef; }
  .inicio-lugar-cartao::after { content: ''; display: block; width: 62%; height: 12px; margin: 14px 0 94px 6px; border-radius: 6px; background: #efeae1; }
  html.js .inicio-lugar-capas { row-gap: 8px; }
  .inicio-lugar-capas .inicio-lugar-cartao::before { aspect-ratio: 4 / 5; border-radius: 12px; }
  .inicio-lugar-capas .inicio-lugar-cartao::after { display: none; }

  /* o "Ver todos" grande, na largura toda, fácil de tocar (o nome do grupo quebra a linha, nunca passa da tela) */
  .inicio-ver-todos { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px;
    margin-top: 18px; padding: 12px 18px; border-radius: 14px; border: 1px solid #D2B87D; background: #fff; color: #072A40;
    font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(7,42,64,.05); -webkit-tap-highlight-color: transparent; }
  .inicio-ver-todos .si { flex: none; width: 18px; height: 18px; color: #A9823C; }
  .inicio-ver-todos:active { background: #faf5ea; }
  .inicio-ver-todos:focus-visible { outline: 2px solid #D2B87D; outline-offset: 2px; }
  html.silk-dark .inicio-ver-todos { background: var(--e-superficie, #112334); border-color: var(--e-borda, #233d52); color: var(--e-texto, #e6e1d6); }
  html.silk-dark .inicio-lugar-cartao::before, html.silk-dark .inicio-lugar-cartao::after { background: var(--e-superficie, #112334); }
}


/* ============================================================== a lista e o produto no celular (1.34)
   Etapa 2 do plano do celular, aprovada pelo solicitante (04/11/2026), no mesmo espírito do Início: no celular o cliente
   navega rolando, com botões grandes, nada pequeno nem escondido. Como na 1.19, TUDO aqui fica abaixo de 768 px: do
   tablet para cima a lista e a página do produto continuam as mesmas. Fora da @media, só o que esconde no computador: a
   faixa dos subgrupos em botões grandes (publico/listagem.html), o marcador que pede a próxima página sozinho
   (publico/_cartoes.html; escondido, nunca é pedido) e o preço repetido na barra presa (publico/produto.html). Os
   seletores são só das telas do portal (o app.css também carrega nas outras). */
.atalhos-lista, .mais-produtos-gatilho, .compra-presa-preco { display: none; }
@media (max-width: 767.98px) {
  /* 1. A lista: os produtos chegam sozinhos ao rolar, até uns 100 (as páginas 2 a 4, de 24), e depois o "Carregar mais
     produtos" de sempre. O marcador do HTMX ("intersect once") vai de uma tela acima do fim da grade até o botão: o
     pedido sai quando a rolagem chega a uma tela do fim (o intersect do HTMX não tem margem); não pega clique. Enquanto
     a página chega, o botão fica mais claro, e um toque nele não pede a mesma página de novo (hx-sync). */
  .mais-sozinho { position: relative; }
  .mais-produtos-gatilho { display: block; position: absolute; left: 0; right: 0; top: -100vh; bottom: 0; pointer-events: none; }
  .mais-sozinho.htmx-request .sbtn { opacity: .5; cursor: progress; }

  /* 2. No alto da lista, os subgrupos (ou os grupos, antes de escolher um) em botões grandes, numa faixa que desliza para
     o lado (a página nunca rola para o lado); o escolhido em azul-marinho, e tocar de novo nele tira o filtro (o mesmo
     link das pílulas do "Filtrar"); o grupo escolhido vem primeiro, em bege com o X, e tocar nele tira o grupo. */
  .atalhos-lista { position: relative; display: flex; gap: 8px; margin: 12px -8px 0; padding: 2px 8px 4px; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: 8px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .atalhos-lista::-webkit-scrollbar { display: none; }
  .atalho-lista { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
    border-radius: 9999px; border: 1px solid #e7dcc4; background: #fff; color: #072A40; font-size: 14.5px; font-weight: 600;
    white-space: nowrap; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
  .atalho-lista:active { background: #faf5ea; }
  .atalho-lista:focus-visible { outline: 2px solid #D2B87D; outline-offset: 2px; }
  .atalho-lista.ativa { background: #072A40; border-color: #072A40; color: #fff; }
  .atalho-lista-grupo { padding: 0 14px 0 18px; background: #f6edd6; border-color: #ead9b3; color: #3a2d0a; }
  .atalho-lista-grupo .si { width: 16px; height: 16px; color: #A9823C; }
  html.silk-dark .atalho-lista { background: var(--e-afundado, #0e1920); border-color: var(--e-borda, #233d52); color: var(--e-texto, #e6e1d6); }
  html.silk-dark .atalho-lista.ativa { background: #0e3a55; border-color: #0e3a55; }
  html.silk-dark .atalho-lista-grupo { background: rgba(210,184,125,.16); border-color: rgba(210,184,125,.35); color: #E8DCB8; }

  /* 3. A página do produto: as fotos passam com o dedo, uma de cada vez (o carrossel de sempre, com as bolinhas; as
     miniaturas são do computador), sem puxar a página para trás no fim da fileira */
  [data-galeria] .carrossel { overscroll-behavior-x: contain; }
  [data-galeria] .carrossel-item { scroll-snap-stop: always; }
  [data-pontos] .ponto { width: 8px; height: 8px; }
  [data-pontos] .ponto.on { width: 22px; }

  /* 4. O preço e o "Adicionar ao pedido" presos embaixo, sempre à vista: o MESMO formulário (a quantidade, o botão e o
     subtotal do servidor) vira a barra; o preço da barra é o mesmo do alto da página (a macro preco). O formulário sai do
     desenho (display: contents) para os pedaços dele entrarem na barra: em cima o preço e o subtotal, embaixo a
     quantidade e o botão (o ::after quebra a linha), e o aviso do máximo quando vem. */
  .compra-presa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #ece4d4;
    box-shadow: 0 -12px 28px -20px rgba(3,28,38,.45); }
  .compra-presa::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .compra-presa > form[data-form-adicionar] { display: contents; }
  .compra-presa-preco { order: 1; display: flex; align-items: baseline; gap: 6px; flex: none; white-space: nowrap; }
  .compra-presa-preco .preco-final { font-size: 24px; }
  .compra-presa-unidade { font-size: 12.5px; font-weight: 500; color: #57534e; }
  .compra-presa [data-subtotal-produto] { order: 2; flex: 1 1 0; min-width: 0; margin: 0; text-align: right; font-size: 12.5px;
    line-height: 1.3; color: #57534e; }
  .compra-presa .stepper { order: 4; flex: none; margin-top: 8px; }
  .compra-presa .stepper-bt { width: 40px; }
  .compra-presa .stepper-campo { width: 52px; }
  .compra-presa button.sbtn { order: 5; flex: 1 1 0; min-width: 0; height: 44px; margin-top: 8px; padding: 0 12px; }
  .compra-presa [data-aviso-quantidade] { order: 6; flex-basis: 100%; margin: 6px 0 0; font-size: 12.5px; }
  html.silk-dark .compra-presa { background: var(--e-superficie, #112334); border-color: var(--e-borda, #233d52); }
  html.silk-dark .compra-presa-unidade, html.silk-dark .compra-presa [data-subtotal-produto] { color: var(--e-texto, #e6e1d6); }

  /* os botões presos que já existiam sobem acima da barra (Ver pedido, WhatsApp, Topo e o botão da equipe), o aviso fica
     acima deles e o espaço do fim da página cresce com ela (a barra nunca cobre o rodapé). A altura vem do silkcat.js
     (--altura-compra-presa, medida); sem JavaScript, uma altura de reserva. As distâncias entre eles são as da 1.19. */
  body:has([data-compra-presa]) { --base-presos: calc(var(--altura-compra-presa, 104px) + 12px); }
  body:has([data-compra-presa]) .pedido-flutuante, body:has([data-compra-presa]) .whatsapp-flutuante,
  body:has([data-compra-presa]) .botao-topo, body:has([data-compra-presa]) .barra-equipe { bottom: var(--base-presos); }
  body:has([data-compra-presa]) .whatsapp-flutuante.com-barra,
  body:has([data-compra-presa]) .botao-topo.com-barra { bottom: calc(var(--base-presos) + 56px); }
  body:has([data-compra-presa]) .whatsapp-flutuante + .botao-topo { bottom: calc(var(--base-presos) + 66px); }
  body:has([data-compra-presa]) .whatsapp-flutuante.com-barra + .botao-topo { bottom: calc(var(--base-presos) + 122px); }
  body:has([data-compra-presa]) #toast { bottom: calc(var(--base-presos) + 68px); }
  body:has([data-compra-presa]) .espaco-flutuantes { height: calc(var(--altura-compra-presa, 104px) + 80px); }
}
@media (max-width: 380px) { .compra-presa button.sbtn .si { display: none; } }   /* 360 px: o botão cabe sem o ícone */