/* ---------- Catálogo em cards de produto ---------- */

.capa-piloto { min-height: auto; padding: 56px 24px 64px; }

.categoria-cards { padding: 46px 20px 10px; }
.categoria-cards:nth-of-type(even) { background: var(--branco); }

.categoria-cards .categoria-head {
  max-width: 1180px;
  margin: 0 auto 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--azul-suave);
}

.categoria-cards .categoria-head h2 {
  font-size: var(--t-h3);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
}

.categoria-cards .categoria-head p { color: var(--texto-fraco); font-size: var(--t-body); margin-top: 3px; }

/* stretch iguala a fileira; 1fr iguala também entre fileiras,
   para o bloco inteiro sair simétrico */
.grade-cards {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;

  /* Sem `grid-auto-rows: 1fr`, e o motivo é grave.
     Aquela linha dava a TODAS as linhas da grade a altura da mais alta.
     Ficava simétrico com tudo fechado, mas amarrava a grade inteira: ao
     abrir a lista de modelos de UM card, todas as linhas cresciam junto.
     Medido em 9 de agosto de 2026, no celular: o card cresceu 543px e a
     PÁGINA cresceu 5.471px — dez vezes mais. Como as linhas acima do card
     também esticavam, ele descia da tela, e o cliente perdia de vista
     justamente o produto que acabou de abrir.
     Sem ela, cada linha tem a própria altura. A simetria dentro de cada
     linha continua (os cards ainda esticam até o mais alto DA LINHA), e
     abrir um card mexe só na linha dele. */
  align-items: stretch;
}

/* ---------- redes sociais (topo e rodapé) ---------- */
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 22px auto 0;
}

.rede {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: var(--branco);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}

/* ícone na cor real da rede; ao passar o mouse o botão assume a cor
   e o ícone vira branco para não sumir contra o próprio fundo */
.rede svg { width: 19px; height: 19px; fill: var(--cor); flex-shrink: 0; }
/* --grad vem inline com o id único daquela inserção (topo ou rodapé) */
.rede svg.grad path { fill: var(--grad); }

.rede:hover {
  background: var(--cor);
  border-color: var(--cor);
  color: var(--contraste, #fff);   /* âmbar precisa de texto escuro */
  transform: translateY(-2px);
}

.rede:hover svg,
.rede:hover svg.grad path { fill: var(--contraste, #fff); }

/* setores dentro da categoria — as faixas do catálogo impresso */
.setor + .setor { margin-top: 30px; }

.setor-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: 1180px;
  margin: 0 auto 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid #dfe6f1;
  color: var(--azul);
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-titulo);
  /* sem caixa alta: a faixa precisa poder escrever "iPhone" e "MagSafe"
     na grafia da marca, e caixa alta apagaria isso */
}

.setor-titulo span { position: relative; padding-left: 13px; }

.setor-titulo span::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  background: var(--azul-claro);
  border-radius: 50%;
}

/* logo recortada da faixa do catálogo — o fundo azul dela some contra o chip */
.setor-logo {
  height: 26px;
  width: auto;
  align-self: center;
  background: var(--azul);
  border-radius: 4px;
  object-fit: contain;
}

.setor-titulo:has(.setor-logo) span { padding-left: 0; }
.setor-titulo:has(.setor-logo) span::before { display: none; }

.setor-titulo small {
  margin-left: auto;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: 0;
  text-transform: none;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--branco);
  border: 2px solid var(--azul);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* o miolo (descrição ou lista) absorve a sobra, então o bloco de preço
   de todos os cards da fileira fica na mesma linha */
.card > .card-specs,
.card > .modelos { flex: 1 1 auto; }

.card > .card-marcas { flex: 0 0 auto; }

/* foto */
.card-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-bottom: 2px solid var(--azul);
  cursor: zoom-in;
  overflow: hidden;
}

/* âmbar em vez de vermelho: vermelho lê como aviso/erro; âmbar diz oferta
   e ainda chama o olho. --promo concentra o tom num lugar só. */
:root {
  --promo: #e9a13b;
  --promo-escuro: #8a5a12;
}

.selo-promo {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--promo);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(138, 90, 18, .35);
  color: #3d2a00;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* moldura e um fio no topo do nome: sinaliza sem repintar o card inteiro */
/* ---------- card em promoção ----------
   Antes era um card azul com um filete âmbar encaixado dentro da faixa do
   nome: lia como adesivo colado por cima, não como um card diferente. Aqui
   as faixas azuis do card viram bronze — a mesma escala do cabeçalho de
   Promoção na página de pedido —, e o card inteiro passa a ser de
   promoção, em vez de um card comum com um enfeite. */
.card.em-promocao { border-color: var(--promo-forte); }

/* as faixas cheias trocam de cor */
.card.em-promocao .card-nome,
.card.em-promocao .preco-unidade .rotulo,
.card.em-promocao .caixa-titulo {
  background: linear-gradient(168deg, var(--promo-forte) 0%, var(--promo-escuro) 100%);
  border-color: var(--promo-forte);
}

/* e os fios que separavam em azul */
.card.em-promocao .card-foto,
.card.em-promocao .preco-unidade strong { border-color: var(--promo-forte); }

/* "Ver preços dos N modelos" é texto, não faixa: só a cor da letra — e a
   moldura do pulso de clique, que também nasce azul */
.card.em-promocao .modelos summary { color: var(--promo-escuro); }
.card.em-promocao .modelos summary.piscando { border-color: var(--promo); }

.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .2s;
}

.card-foto:hover img { transform: scale(1.04); }

/* ---------- galeria e vídeo (prontos, hoje com 1 mídia por card) ---------- */
.card-foto video { width: 100%; height: 100%; object-fit: contain; }

.selo-video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--g-g);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.conta-midia {
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 2;
  padding: 2px 8px;
  background: rgba(10, 18, 38, .72);
  border-radius: 999px;
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
}

/* setas sobre a foto: sempre visíveis, para o cliente notar que há mais de uma */
.seta-foto {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 30px; height: 30px;
  margin-top: -15px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(26, 47, 92, .18);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  color: var(--azul);
  font-size: var(--g-p);
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.seta-foto.esq { left: 6px; }
.seta-foto.dir { right: 6px; }
.seta-foto:hover { background: #fff; transform: scale(1.1); }

/* navegação do lightbox */
.lb-midia { max-width: 100%; max-height: 88vh; border-radius: 10px; }
video.lb-midia { background: #000; }

.lb-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.lb-nav button {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font-size: var(--g-m);
  line-height: 1;
  cursor: pointer;
}

.lb-nav button:hover { background: rgba(255, 255, 255, .26); }
.lb-conta { color: rgba(255, 255, 255, .8); font-size: var(--t-sm); font-weight: var(--p-forte); font-variant-numeric: tabular-nums; }

.sem-foto {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f4f6fa, #f4f6fa 10px, #eaeff7 10px, #eaeff7 20px);
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* nome em faixa azul, como no card impresso.
   é o título do produto: 600 basta — a faixa azul já dá o destaque,
   e 800 aqui competia com o preço, que é quem deve puxar o olho. */
.card-nome {
  padding: 10px 12px;
  background: var(--azul);
  border-top: 2px solid var(--azul);
  color: var(--branco);
  font-size: var(--t-h4);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
  text-align: center;
}

.card-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px 0;
}

.ref-tag {
  padding: 3px 9px;
  border: 1px solid #f0b96a;
  border-radius: 999px;
  color: #a35c08;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
}

/* modelos compatíveis */
.modelos { flex: 1; padding: 0 12px 10px; }

/* O navegador esconde o conteúdo do <details> fechado com uma regra fraca:
   qualquer filho com `display` próprio (a lista é grid, a tabela é table)
   passa por cima e fica visível. Esconde explicitamente. */
.modelos:not([open]) > *:not(summary) { display: none; }

.modelos summary {
  padding: 9px 0;
  color: var(--azul);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  cursor: pointer;
  list-style: none;
}

.modelos summary::-webkit-details-marker { display: none; }
.modelos summary::before { content: '▸ '; }
.modelos[open] summary::before { content: '▾ '; }

/* chama atenção para o clique sem virar pisca-pisca: pulso suave que para
   assim que a lista abre e ao passar o mouse */
.modelos summary.piscando {
  padding: 7px 10px;
  border: 1.5px solid var(--azul-claro);
  border-radius: 7px;
  animation: pulsa-clique 1.9s ease-in-out infinite;
}

.modelos[open] summary.piscando,
.modelos summary.piscando:hover {
  animation: none;
  background: var(--azul-suave);
}

@keyframes pulsa-clique {
  0%, 100% { background: transparent;        box-shadow: 0 0 0 0 rgba(93, 154, 214, .45); }
  50%      { background: var(--azul-suave);  box-shadow: 0 0 0 6px rgba(93, 154, 214, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .modelos summary.piscando { animation: none; background: var(--azul-suave); }
}

/* Fechar pelo fim da lista: há cards com 60 modelos, e sem isto o cliente
   precisa rolar tudo de volta até o resumo só para recolher. */
.fechar-lista {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #e3e9f2;
  border-radius: 7px;
  background: var(--cinza);
  color: var(--azul);
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  cursor: pointer;
}

.fechar-lista:hover { background: #e6eefb; }

.modelo-marca + .modelo-marca { margin-top: 14px; }
.modelo-marca .marca-tag { margin-bottom: 6px; }

/* aviso explicando a coluna de caixa fechada — antes era só "Caixa 100un" */
.aviso-caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 11px;
  background: #eaf7ef;
  border: 1px solid #bfe3cd;
  border-left: 4px solid #2f7d4f;
  border-radius: 0 6px 6px 0;
  color: #1f5e3a;
  font-size: var(--t-xs);
  line-height: var(--lh-densa);
}

.aviso-caixa .icone-caixa { width: 26px; height: auto; flex-shrink: 0; }
.aviso-caixa b { display: block; font-weight: var(--p-forte); }

/* cabeçalho da coluna de caixa, com o desenho sempre presente */
.th-caixa { white-space: nowrap; }

.th-caixa .icone-caixa {
  width: 15px; height: auto;
  vertical-align: -3px;
  margin-right: 4px;
  filter: brightness(0) invert(1);   /* sobre a faixa azul do cabeçalho */
}

.th-caixa span { display: inline-block; vertical-align: middle; }
/* o cabeçalho já está no piso da escala: distingue por opacidade, não por corpo.
   `inherit` é obrigatório — sem ele o navegador aplica 0.83em em <small>
   e o texto cai para 8px. */
.th-caixa small { display: block; font-size: inherit; font-weight: var(--p-normal); opacity: .78; }

/* tabela clássica (tablet): mesmos fios finos da grade, sem agrupar por preço */
.modelo-marca table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfe6f1;
  border-radius: 5px;
  overflow: hidden;
  font-size: var(--t-sm);
}

.modelo-marca th {
  padding: 5px 7px;
  background: var(--azul);
  border-right: 1px solid rgba(255, 255, 255, .18);
  color: var(--branco);
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-align: left;
  text-transform: uppercase;
}

.modelo-marca th:last-child { border-right: none; }
.modelo-marca th:not(:first-child) { text-align: right; white-space: nowrap; }

.modelo-marca td {
  padding: 4px 7px;
  border-right: 1px solid #e8eef7;
  border-bottom: 1px solid #e8eef7;
  line-height: var(--lh-densa);
}

.modelo-marca td:last-child { border-right: none; }
.modelo-marca tbody tr:last-child td { border-bottom: none; }
.modelo-marca .preco { text-align: right; font-weight: var(--p-bold); white-space: nowrap; }
.modelo-marca .caixa { color: #2f7d4f; }

/* modelos agrupados pelo preço, em colunas — lista de 60 vira poucas linhas */
.grupo-preco + .grupo-preco { margin-top: 10px; }

.grupo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 5px 8px;
  background: #eaf1fa;
  border-left: 3px solid var(--azul);
  border-radius: 0 4px 4px 0;
}

.grupo-valor { color: var(--azul-escuro); font-size: var(--t-preco-sm); font-weight: var(--p-bold); }

.grupo-caixa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  background: #eaf7ef;
  border: 1px solid #bfe3cd;
  border-radius: 999px;
  color: #1f5e3a;
  font-size: var(--t-2xs);
  font-weight: var(--p-normal);
}

.grupo-caixa .icone-caixa { width: 15px; height: auto; flex-shrink: 0; }
.grupo-caixa b { font-weight: var(--p-bold); }

.grupo-qtd {
  margin-left: auto;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* grade com fios finos: separa visualmente cada modelo sem gastar uma linha por item */
.lista-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0;
  margin-top: 6px;
  border: 1px solid #dfe6f1;
  border-radius: 5px;
  overflow: hidden;
  list-style: none;
}

/* guarda o termo de busca do produto de variação única, sem aparecer */
.item-modelo.oculto { display: none; }

.item-modelo {
  padding: 4px 7px;
  border-right: 1px solid #e8eef7;
  border-bottom: 1px solid #e8eef7;
  font-size: var(--t-sm);
  line-height: var(--lh-densa);
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* poucos modelos: em linha, sem grade. a grade deixaria célula sobrando
   e o bloco saía torto — só compensa quando a lista é longa. */
.lista-modelos.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.lista-modelos.inline .item-modelo {
  padding: 3px 10px;
  background: var(--cinza);
  border: 1px solid #dfe6f1;
  border-radius: 999px;
  font-size: var(--t-xs);
  /* herda `overflow-wrap: anywhere` de .item-modelo de propósito.
     `break-word` não serve aqui: ele não reduz a largura mínima intrínseca,
     então a pílula não encolhe dentro do flex e cadeias longas
     ("MacBook Air Pro 13.3 A1706/A1708/…") vazavam para fora do card. */
}

/* produto que serve um aparelho só: o modelo precisa aparecer no card */
.compativel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  text-align: center;
}

.compativel span {
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.compativel b {
  color: var(--azul-escuro);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  line-height: var(--lh-densa);
}

/* produto de aparelho único: mesmo visual dos demais cards, sem destaque */
.compativel.exclusivo { gap: 7px; }

.cores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.cores i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 5px;
  background: var(--cinza);
  border: 1px solid #dde5f0;
  border-radius: 999px;
  color: var(--texto);
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: var(--p-forte);
  letter-spacing: 0;
  text-transform: none;
}

/* cores de fábrica anunciadas no card, logo abaixo do nome: separa do bloco
   de preço que vem em seguida, sem virar mais uma faixa */
.card-cores { margin: 2px 0 8px; }

/* bolinha no tom real do aparelho; sem tom conhecido, a pílula fica lisa */
.cores i[style]::before {
  content: '';
  width: 11px; height: 11px;
  flex-shrink: 0;
  background: var(--tom);
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}

/* ---------- venda só em pacote fechado ----------
   fica dentro da lista: aparece quando o cliente abre os modelos */
.pacote {
  margin-bottom: 12px;
  border: 2px solid var(--azul);
  border-radius: 8px;
  overflow: hidden;
}

.pacote-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-2xs);
  line-height: var(--lh-densa);
}

.pacote-topo .icone-caixa { width: 26px; height: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.pacote-topo b { display: block; font-size: var(--t-xs); font-weight: var(--p-forte); }

.pacote-precos { display: grid; grid-template-columns: 1fr 1fr; }

.pacote-precos span {
  padding: 8px 6px;
  text-align: center;
}

.pacote-precos span + span { border-left: 1px solid #dbe3ef; }

.pacote-precos small {
  display: block;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pacote-precos strong { display: block; font-size: var(--t-preco-md); font-weight: var(--p-bold); margin-top: 3px; }

.pacote-precos .destaque { background: #fff6e9; }
.pacote-precos .destaque strong { color: #a35c08; font-size: var(--t-preco-lg); }

/* bloco de preços — réplica do card impresso */
.preco-unidade { margin-top: auto; text-align: center; }

.preco-unidade .rotulo {
  display: block;
  padding: 6px;
  background: var(--azul);
  border-top: 2px solid var(--azul);
  color: var(--branco);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* o maior número do card: é o que o cliente compara entre produtos */
.preco-unidade strong {
  display: block;
  padding: 10px 6px;
  border-bottom: 2px solid var(--azul);
  font-size: var(--t-preco-xl);
  font-weight: var(--p-bold);
  line-height: var(--lh-justa);
  color: var(--texto);
}

/* faixa "Caixa | PREÇO POR UNIDADE NA CAIXA FECHADA" */
.caixa-titulo {
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: center;
  background: var(--azul);
  color: var(--branco);
}

.caixa-titulo span:first-child {
  padding: 7px 4px;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-align: center;
  text-transform: uppercase;
}

.caixa-titulo span:last-child {
  padding: 5px 6px;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-titulo);
  text-align: center;
  text-transform: uppercase;
}

.caixa-titulo b { display: block; color: #f7a13d; }

.preco-caixa {
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: stretch;
  border-bottom: 2px solid var(--azul);
}

/* ícone à esquerda e, ao lado, número com "unidades" embaixo — como no impresso.
   em linha única o conteúdo estourava a célula e o ícone saía da borda */
.caixa-qtd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 5px;
  border-right: 2px solid var(--azul);
  color: var(--texto);
  text-align: center;
  overflow: hidden;
}

.qtd-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: var(--lh-aperta);
}

.icone-caixa { width: 26px; height: auto; flex-shrink: 0; object-fit: contain; }
.caixa-qtd b { font-size: var(--t-preco-lg); font-weight: var(--p-bold); line-height: 1; }

.caixa-qtd small {
  color: #d9660a;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.caixa-valor { padding: 6px 8px; text-align: center; }
.caixa-valor strong { display: block; font-size: var(--t-preco-lg); font-weight: var(--p-bold); line-height: var(--lh-justa); }

.caixa-valor small {
  display: block;
  color: #d9660a;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.economia {
  padding: 6px 4px;
  background: var(--branco);
  color: var(--azul-escuro);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: 0;
  line-height: var(--lh-densa);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;        /* uma linha só, como no impresso */
}

.economia b { color: #d9660a; font-weight: var(--p-bold); }

/* inline para o texto quebrar como frase, sem o negrito virar item solto */
.cifrao {
  display: inline-grid;
  place-items: center;
  width: 13px; height: 13px;
  margin-right: 3px;
  vertical-align: -2px;
  background: #f08c1f;
  border-radius: 50%;
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
}

/* descrição em tópicos, como no card impresso */
.card-specs {
  flex: 1;
  min-height: 34px;
  padding: 8px 12px 8px 28px;
  color: var(--texto);
  font-size: var(--t-sm);
  line-height: var(--lh-corpo);
}

.card-specs li { margin-bottom: 1px; }
.card-specs.vazia { padding: 10px 12px; }   /* card sem tópicos no impresso */

@media (max-width: 560px) {
  .grade-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .categoria-cards { padding: 36px 12px 8px; }
  /* no celular só o que é grande encolhe — um degrau, nunca abaixo de 10px.
     texto de 7px cabia na célula mas não se lê; quem perde espaço é o
     espaçamento entre letras e o ícone, não o tamanho da fonte. */
  .card-nome { padding: 8px; font-size: var(--t-body); }
  .card-specs { padding: 7px 8px 7px 22px; font-size: var(--t-xs); }
  .preco-unidade strong { padding: 8px 4px; font-size: var(--t-preco-lg); }
  .caixa-valor strong { font-size: var(--t-preco-md); }
  .caixa-qtd b { font-size: var(--t-preco-md); }
  .modelo-marca table { font-size: var(--t-xs); }

  /* célula estreita: alarga a coluna, zera o tracking e encolhe o ícone */
  .caixa-titulo, .preco-caixa { grid-template-columns: 46% 1fr; }
  .caixa-titulo span:first-child,
  .caixa-titulo span:last-child { letter-spacing: .02em; }
  .caixa-qtd { gap: 3px; padding: 5px 2px; }
  .caixa-qtd small { letter-spacing: 0; }
  .icone-caixa { width: 15px; }

  /* card estreito demais para o aviso numa linha */
  .economia { white-space: normal; }

  /* A tabela clássica do tablet tem 3 colunas e precisa de ~222px. Em card de
     170px ela estourava, e como o card é `overflow: hidden` a coluna da caixa
     fechada ficava inteira fora — o cliente não via o preço de atacado.
     Esses cards passam a ocupar a fileira toda no celular. */
  .card:has(.modelo-marca table) { grid-column: 1 / -1; }

  /* o pacote fechado também tem 2 colunas de preço: em card estreito
     elas viram uma embaixo da outra */
  .pacote-precos { grid-template-columns: 1fr; }
  .pacote-precos span + span { border-left: none; border-top: 1px solid #dbe3ef; }
}