/* ===========================================================================
   PDP: APERTO DE ESPACO (nosso, por cima do components.css do plugin)

   O plugin nao se edita no meio (CLAUDE.md, regra 4), entao o que e nosso
   entra aqui e este arquivo carrega DEPOIS do components.css.

   Tudo aqui e espacamento. Nenhuma regra mexe em tamanho de texto: os 15 px
   dos selos sao decisao registrada no proprio components.css ("em 12 px
   ninguem lia o que estava logo abaixo do botao"), e encolher letra para
   ganhar altura desfaria isso.
   =========================================================================== */

/* --- Fileira de selos: 87 px -> ~64 px, sem tocar no texto ----------------

   Era uma grade 2x2 em que "Frete gratis a partir de R$ 100" quebrava em
   duas linhas. Como a altura da LINHA da grade e a do item mais alto, o selo
   vizinho de uma linha so ficava com um vao enorme em volta — dai o aspecto
   espremido e esparramado ao mesmo tempo.

   A conta: a 15 px, "Frete gratis a partir de R$ 100" pede 202 px e a outra
   coluna pede 149; cabem 339. Nao existe arranjo de duas colunas alinhadas
   em que ninguem quebre. Entao, em vez de brigar com a quebra, junto numa
   linha so os dois selos que CABEM inteiros e deixo a quebra sozinha na
   outra: uma linha de 39 px e outra de 19,5 px, em vez de duas de 39.

   `order` muda so a ordem visual; a ordem de leitura continua a do HTML.
   Sao quatro selos independentes, entao a diferenca nao atrapalha quem usa
   leitor de tela. */
.cb-pdp .cb-trust {
  column-gap: var(--cb-space-xs);  /* 8 -> 12 px: as colunas se encostavam */
  row-gap: 6px;
  align-items: start;              /* selo curto nao estica ate a altura da linha */
}

/* So no celular. No desktop a lista tem 524 px e as duas colunas cabem
   inteiras (220 + 12 + 176 = 408): la a grade 2x2 original ja da duas
   linhas sem quebrar, e espalhar os longos em linha cheia so faria o bloco
   crescer de novo. */
@media (max-width: 767.98px) {
  .cb-pdp .cb-trust {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Os dois longos tomam a largura inteira e cabem numa linha cada; os dois
     curtos dividem a ultima. Tres linhas de uma linha de texto (71 px) no
     lugar de duas linhas de texto quebrado (87 px) — e, mais do que a
     altura, acaba a quebra, que era o que deixava a fileira espremida. */
  .cb-pdp .cb-trust li:nth-child(1) { order: 1; grid-column: 1 / -1; }  /* Frete gratis       */
  .cb-pdp .cb-trust li:nth-child(3) { order: 2; grid-column: 1 / -1; }  /* Envio em ate 24h   */
  .cb-pdp .cb-trust li:nth-child(2) { order: 3; }                       /* Compra 100% segura */
  .cb-pdp .cb-trust li:nth-child(4) { order: 4; }                       /* Sem gluten         */
}

/* --- Topo da pagina: a marca nao precisa de tanto ar --------------------- */
.cb-pdp-topo {
  margin-block-end: var(--cb-space-2xs);  /* 12 -> 8 px */
}