/* ==========================================================================
   site-mk-vitrine-viva.css: cena do hero 'vitrine-viva' (prateleira 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).
   ========================================================================== */

/* --- 12.2 Cena do hero: a prateleira da vitrine de cupons -------------- */
/* Segunda cena da familia .mkc (moldura inteira do hero, e nao miniatura de
   240px). Vive em app/views/site/mockups/vitrine-viva.php e tem laco proprio em
   site.js, sob o nome 'vitrine-viva'. O mini mockup 'vitrine' (.mk__vit*, mais
   abaixo) continua existindo: ele e quem serve os cards das secoes internas. */
.mkv {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: var(--bg-card);
  font-family: var(--font-sans);
}

.mkv__stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 32px;
}

/* Barra da vitrine: o ponto ao vivo e o nome a esquerda, a ordenacao e a janela
   de 24h a direita. E a mesma barra da tela de verdade (Vitrine de cupons, "Ao
   vivo", "Maior desconto", "24h na vitrine"). */
.mkv__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.mkv__marca { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.mkv__titulo { font-size: 14px; font-weight: 500; color: var(--text-1); white-space: nowrap; }

.mkv__pills { display: inline-flex; align-items: center; gap: 8px; }

.mkv__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.mkv__pill svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* A prateleira. Os cards tem base zero e crescem juntos, entao no desktop as
   quatro ofertas dividem a largura sem sobrar vao; a largura MINIMA e o que faz
   a fileira transbordar no celular em vez de espremer o preco em duas linhas. O
   que transborda e cortado pela moldura (.mkv tem overflow: hidden) e o laco
   corre o trilho ate a oferta da vez. */
.mkv__trilho {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 18px 0;
  flex: 1 1 auto;
}

/* A luz: halo largo e baixo na cor da marca atras da fileira. Parado, e o unico
   enfeite da cena (o hero e branco e a fileira precisa de chao). */
.mkv__luz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 740px;
  height: 300px;
  margin: -150px 0 0 -370px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 13%, transparent), transparent);
  pointer-events: none;
}

.mkv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 186px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

/* Anel de destaque: camada por cima da borda cinza, para a oferta em foco
   acender por opacidade em vez de animar cor. */
.mkv__ring {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
}

/* A foto e a peca ELASTICA do card: ela cresce e encolhe com a altura da
   moldura, e todo o resto tem altura fixa. E o que faz a mesma marcacao caber
   nos quatro tamanhos de cena (380 / 330 / 288 / 246) sem conta de altura. */
.mkv__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--primary-subtle), var(--bg-alt));
}

.mkv__ico { display: inline-flex; color: var(--primary-line); }

.mkv__ico svg { width: 30px; height: 30px; stroke-width: 1.5; }

/* A faixa de desconto e o unico bloco cheio da cor da marca no card parado: e o
   numero que faz a pessoa parar na oferta. */
.mkv__off {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.mkv__cat {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mkv__nome {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mkv__precos { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }

.mkv__preco { font-size: 15px; font-weight: 600; color: var(--text-1); }

.mkv__antes { font-size: 11px; color: var(--text-muted); text-decoration: line-through; }

/* A linha existe para o chip do cupom nao esticar na largura do card (num
   flex em coluna, o item estica sozinho). */
.mkv__cupons { display: flex; align-items: center; margin-top: 8px; }

.mkv__cupom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-xs);
  background: var(--primary-subtle);
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-text);
}

.mkv__cupom svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* 7ch reservados: o codigo se escreve letra a letra no laco, e sem a reserva o
   chip mudaria de largura a cada letra. Codigo de ate 7 caracteres, portanto. */
.mkv__codigo { min-width: 7ch; letter-spacing: .02em; }

/* O selo de copiado na quina de cima da foto, do lado oposto ao do desconto:
   fora do fluxo, entao ele nao empurra nem o cupom nem o preco quando aparece,
   e ainda cabe no card estreito do celular. */
.mkv__copiado {
  position: absolute;
  right: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--primary-line);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 10px;
  line-height: 1.3;
  color: var(--primary-text);
  white-space: nowrap;
  opacity: 0;
}

.mkv__copiado svg { width: 11px; height: 11px; stroke-width: 1.8; }

.mkv__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin-top: 10px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-text);
}

/* Camada "apertado": o mesmo botao cheio da cor da marca por cima do suave. */
.mkv__btn-on {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  opacity: 0;
}

.mkv__rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.mkv__nota,
.mkv__fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.mkv__nota svg,
.mkv__fila svg { width: 13px; height: 13px; stroke-width: 1.8; flex: 0 0 auto; }

.mkv__num { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .mkv { height: 330px; }

  .mkv__stack { padding: 24px; }

  .mkv__trilho { margin: 14px 0; gap: 12px; }

  .mkv__card { min-width: 168px; }

  .mkv__luz { width: 620px; margin-left: -310px; }
}

@media (max-width: 768px) {
  .mkv { height: 288px; }

  .mkv__stack { padding: 20px 16px; }

  .mkv__titulo { font-size: 13px; }

  /* Numa tela de 390px a barra nao cabe com as duas pilulas. Sai a ordenacao e
     fica a janela de 24h, que e a que conta uma coisa do produto (a oferta
     vence). Pelo mesmo motivo a fila sai do rodape e fica a promessa do link,
     que e a frase que esta pagina inteira vende. */
  .mkv__pill { height: 22px; padding: 0 8px; font-size: 10px; }

  .mkv__pill--ordem,
  .mkv__fila { display: none; }

  .mkv__trilho { margin: 12px 0; gap: 10px; }

  .mkv__card { min-width: 150px; padding: 8px; }

  .mkv__foto { min-height: 48px; }

  .mkv__ico svg { width: 24px; height: 24px; }

  .mkv__off { font-size: 10px; padding: 1px 5px; }

  /* Daqui para baixo a foto fica com ~40px de altura e nao cabem tres selos
     dentro dela. Sai a categoria: o desconto e o selo de copiado ficam em
     quinas opostas, e o nome da oferta logo abaixo ja diz do que se trata. */
  .mkv__cat { display: none; }

  .mkv__copiado { right: 5px; top: 5px; font-size: 9px; padding: 1px 5px; }

  .mkv__nome { margin-top: 6px; font-size: 12px; }

  .mkv__preco { font-size: 14px; }

  .mkv__antes { font-size: 10px; }

  .mkv__cupons { margin-top: 6px; }

  .mkv__cupom { padding: 2px 6px; font-size: 10px; }

  .mkv__btn { height: 24px; margin-top: 8px; font-size: 11px; }

  .mkv__nota { font-size: 11px; }

  .mkv__luz { width: 460px; height: 240px; margin: -120px 0 0 -230px; }
}

@media (max-width: 480px) {
  .mkv { height: 246px; }

  .mkv__stack { padding: 16px 14px; }

  .mkv__trilho { margin: 10px 0; }

  .mkv__card { min-width: 142px; padding: 7px; }

  .mkv__foto { min-height: 40px; }

  .mkv__ico svg { width: 20px; height: 20px; }

  .mkv__nome { margin-top: 5px; }

  .mkv__cupons { margin-top: 5px; }

  .mkv__btn { height: 22px; margin-top: 6px; }
}