/*
 * Oferta Relâmpago (Partials/jv/pdp-countdown.template). Figma "COUNTDOWN BANNER" (1421:4701): faixa azul informativo,
 * ícone de despertador e "Oferta Relâmpago!" em branco, três caixas brancas com o número (18px) e a unidade em cinza.
 * Diferenças do Figma: caixa de 44 a 48px (47 no Figma; 44 no celular de 360px, para a faixa caber) e unidade com 14px
 * (12 no Figma; rótulo curto, regra de 15/10). No celular, respiro de 12px e espaços de 8px; no computador, 16 e 12.
 */

.jv-pdp-countdown {
  display: flex;
  align-items: center;
  gap: var(--jv-space-2);
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: var(--jv-space-3);
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-info);
  color: var(--jv-color-text-inverse);
}

/* O [hidden] perde para o display acima: o JS esconde a faixa fora do prazo da promoção. */
.jv-pdp-countdown[hidden] {
  display: none;
}

.jv-pdp-countdown__icon {
  flex: none;
}

.jv-pdp-countdown__title {
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-countdown__clock {
  display: flex;
  gap: var(--jv-space-2);
}

.jv-pdp-countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: var(--jv-size-pdp-countdown-box);
  block-size: var(--jv-size-pdp-countdown-box);
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface);
  color: var(--jv-color-text);
  line-height: var(--jv-leading-none);
}

.jv-pdp-countdown__box strong {
  font-size: var(--jv-size-countdown);
  font-weight: var(--jv-weight-bold);
  font-variant-numeric: tabular-nums;
}

.jv-pdp-countdown__box small {
  color: var(--jv-color-text-muted);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
}

@media (min-width: 1024px) {
  .jv-pdp-countdown {
    gap: var(--jv-space-3);
    padding: var(--jv-space-3) var(--jv-space-4);
  }
}