/* ==========================================================================
   site-mk-vitrine.css: mockup 'vitrine' (card da vitrine de cupons).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

.mk__vit { gap: 5px; }

.mk__vit-card { display: flex; flex-direction: column; gap: 3px; padding: 5px; }

.mk__vit-media {
  position: relative;
  display: block;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: linear-gradient(140deg, var(--mk-accent-soft), var(--bg-alt));
}

/* Loja e cupom moram DENTRO da foto, como no card do painel: em 100px de
   largura nao sobra linha para eles embaixo do preco. */
.mk__vit-store,
.mk__vit-tag {
  position: absolute;
  padding: 1px 3px;
  font-size: 6.5px;
  line-height: 1.25;
  max-width: calc(100% - 8px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Loja em cima a DIREITA e cupom embaixo a ESQUERDA: no mesmo canto os dois
   se sobrepunham e o nome da loja sumia atras do cupom. A faixa tem 32px de
   altura justamente para os dois caberem sem se tocar. */
.mk__vit-store { right: 3px; top: 3px; }

.mk__vit-tag { left: 3px; bottom: 3px; font-weight: 600; }

.mk__vit-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mk__vit-money { gap: 4px; }

.mk__vit-money .mk__price { font-size: 10px; }

.mk__vit-btn {
  display: block;
  padding: 3px 0;
  border-radius: 4px;
  background: var(--mk-accent);
  color: #fff;
  font-size: 7.5px;
  font-weight: 500;
  text-align: center;
}

/* No painel de card de 4 colunas sobram ~183px de largura: a grade de duas
   colunas espreme "R$ 191,39 R$ 550,00" em duas linhas e o mockup estoura a
   altura do painel. Ali a vitrine vira uma coluna com as duas primeiras
   ofertas, mesmo desenho, legivel. Ficam de fora as duas ultimas, inclusive a
   que entra no laco: com ela, metade do tempo o painel mostrava uma oferta so
   e um buraco embaixo. O laco continua no cupom e no cursor; a entrada do card
   novo e do hero, onde as quatro cabem. Abaixo de 1025px a malha de 4 ja vira
   de 2, o card alarga e a grade volta sozinha. */
@media (min-width: 1025px) {
  .st-grid--4 .mk[data-mk='vitrine'] .mk__vit { grid-template-columns: minmax(0, 1fr); }
  .st-grid--4 .mk[data-mk='vitrine'] .mk__vit-card:nth-child(3),
  .st-grid--4 .mk[data-mk='vitrine'] .mk__vit-card:nth-child(4) { display: none; }
  .st-grid--4 .mk[data-mk='vitrine'] .mk__vit-card { gap: 2px; padding: 4px; }
  .st-grid--4 .mk[data-mk='vitrine'] .mk__vit-media { height: 30px; }
}