:root {
  --sale-countdown-height: 62px;
}

.sale-countdown {
  align-items: center;
  background: #171316;
  box-shadow: 0 8px 24px #12101426;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: var(--sale-countdown-height);
  justify-content: center;
  left: 0;
  padding: 7px 18px 6px;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 2000;
}

.sale-countdown-main {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  gap: 3px 8px;
  justify-content: center;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.sale-countdown-main strong {
  color: #f1a9bf;
  font-weight: 800;
}

.sale-countdown-main time {
  color: #ffc0d3;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 135px;
}

.sale-countdown small {
  color: #ffffffa8;
  font-size: 9px;
  letter-spacing: .08em;
  margin-top: 3px;
}

.site-header {
  top: var(--sale-countdown-height);
}

.hero {
  padding-top: calc(78px + var(--sale-countdown-height));
}

@media (width <= 760px) {
  :root {
    --sale-countdown-height: 70px;
  }

  .sale-countdown {
    padding: 6px 10px 5px;
  }

  .sale-countdown-main {
    font-size: 9px;
    gap: 2px 5px;
  }

  .sale-countdown-main strong {
    flex-basis: 100%;
  }

  .sale-countdown-separator {
    display: none;
  }

  .sale-countdown-main time {
    min-width: 105px;
  }

  .sale-countdown small {
    font-size: 8px;
    margin-top: 2px;
  }

  .hero {
    padding-top: calc(64px + var(--sale-countdown-height));
  }
}