/* hk-10y-top-banner.css */

/* Base container (uses existing #top-banner wrapper from Magento blocks) */
#top-banner {
  width: 100%;
}

/* Banner root */
.hk-10y-banner {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  text-align: center;
  background: #EA474A; 
  color: #181818;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the “|” layout clean */
.hk-10y-banner strong {
  font-weight: 700;
}

/* Countdown style */
.hk-10y-countdown {
  font-weight: 700;
  color: #FFFFFF;
}

/* Mobile: allow wrapping so text doesn’t clip */
@media (max-width: 767px) {
  .hk-10y-banner {
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* Desktop: compact height similar to your header bar styling */
@media (min-width: 768px) {
  .hk-10y-banner {
    padding: 0 16px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}