/* hk-june-discount-top-banner.css */
#top-banner {
  width: 100%;
}

/* Banner root */
.hk-june-discount-banner {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  text-align: center;
  background: linear-gradient(270deg, #A2790D 13.99%, #EBD197 48.81%, #A2790D 84.32%); 
  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-june-discount-banner strong {
  font-weight: 700;
}

/* Countdown style */
.hk-june-discount-countdown {
  font-weight: 700;
  color: #181818;
}

.hk-june-discount-code {
  background: #181818;
  color: #CEAE61;
  border-radius: 50px;
  padding: 4px 16px;
}

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

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