/* ─────────────────────────────────────────────────────────────────────────
   Escada de descontos por quantidade

   Folha própria, e não dentro do app.css ou do editor.css, porque esses
   dois excluem-se (um por versão do editor) e esta tabela vive num
   shortcode que pode ser posto em qualquer página — inclusive numa sem
   personalizador nenhum. Mesma razão da ficha técnica.

   O MESMO desenho é produzido em dois sítios: por PHP no shortcode, para
   a primeira pintura e para quem não tem JS, e por JS no editor v5, que
   a redesenha com o acréscimo da personalização somado quando o cliente
   escolhe áreas pagas. Se mexeres num, mexe no outro.

   ESTILO (desde a 4.13.72, pedido do Rafael): um cartão por escalão — a
   quantidade em cinzento, o preço por unidade grande, a poupança em verde —
   e o escalão da quantidade escolhida destacado com o verde da marca. Era
   uma tabela; os cartões leem-se de relance.
   ───────────────────────────────────────────────────────────────────── */

.mc-ladder {
  --mcl-ink: var(--mx-global-color-primary, #0f0f0f);
  --mcl-line: var(--mx-global-color-f78bd59, #ebebeb);
  --mcl-mute: var(--mx-global-color-tinta-3, #6B6B68);
  --mcl-acento: var(--mx-global-color-accent, #4a7259);
  font-family: var(--mx-global-typography-text-font-family, "Plus Jakarta Sans"), sans-serif;
  color: var(--mcl-ink);
}

/* Um cartão por escalão, lado a lado (2 × 2 no telemóvel). O número de cartões vem do servidor
   em --mcl-n, porque os escalões são os do admin e podem ser 3, 4 ou 5. */
.mc-ladder .mc-ladder__cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--mcl-n, 4), minmax(0, 1fr));
  gap: 10px;
}
.mc-ladder .mc-ladder__cartao {
  margin: 0;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--mcl-line);
  border-radius: 12px;
  transition: border-color .2s ease, background-color .2s ease;
}
.mc-ladder .mc-ladder__cartao::before { content: none; }  /* o tema põe marcas nos <li> */
.mc-ladder__qtd {
  font-size: 13px;
  line-height: 1.3;
  color: var(--mcl-mute);
}
.mc-ladder__preco {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  /* os algarismos alinham-se de cartão para cartão */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.mc-ladder__nota {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mcl-acento);
}
/* O escalão da quantidade escolhida (com o que já está no carrinho). */
.mc-ladder .mc-ladder__cartao.is-atual {
  border-color: var(--mcl-acento);
  background: #f3f6f4;
}

@media (max-width: 600px) {
  .mc-ladder .mc-ladder__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-ladder__preco { font-size: 19px; }
}