/* Kits (/kits). Os cartões do painel de Natal vêm de natalKitCard (natal-ui.js): estas regras estilizam as classes que ele gera. */
.pg-kits__natal-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (min-width: 1000px) { .pg-kits__natal-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-kits .natal-card { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border-radius: var(--raio-cartao); background: var(--branco); color: var(--tinta); }
.pg-kits .natal-card > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-foto); background: var(--foto-fundo); }
.pg-kits .natal-card h3 { font: 600 16px/1.3 var(--sans); }
.pg-kits .quiet { font: 400 14px/1.4 var(--sans); color: var(--suave); }
.pg-kits .natal-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1); font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.pg-kits .natal-price s { font-weight: 400; color: var(--suave); }
.pg-kits .natal-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: auto; min-height: 48px; padding: 0 var(--e4); border: 1px solid transparent; border-radius: var(--raio-pilula); background: var(--oliva); color: var(--branco); font: 600 15px/1 var(--sans); cursor: pointer; }
.pg-kits .natal-button:active { background: var(--oliva-escuro); }
@media (hover: hover) { .pg-kits .natal-button:hover { background: var(--oliva-escuro); } }
.pg-kits .field-error { font: 400 14px/1.4 var(--sans); color: var(--natal); }

.pg-kits__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (min-width: 1000px) { .pg-kits__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Cartão de kit: o base.css põe o texto em grade (display: contents), então cada linha ocupa a largura toda e a seta vai para a última linha, à direita. */
.pg-kits .cartao-mosaico__linha { grid-column: 1 / -1; }
.pg-kits .cartao-mosaico .botao-seta { grid-column: 2; }
/* Kit com foto própria: uma imagem só, na largura do cartão. */
.pg-kits .cartao-mosaico__grade > img:only-child { grid-column: 1 / -1; }