/* ==========================================================================
   PROMO BARS — two slim, non-sticky bars at the very top of the page,
   above the main site header/navigation.
   ========================================================================== */

.promo-bar {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px var(--space-4);
}

/* ---- Bar 1: purple shipping announcement ---- */

.promo-bar--purple {
  background: var(--color-royal-violet);
  color: var(--color-white);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- Bar 2: support / contact ---- */

.promo-bar--support {
  background: var(--color-white);
  color: var(--color-graphite-500);
  border-bottom: 1px solid var(--color-graphite-border-light);
}

.promo-bar__phone {
  font-weight: 700;
  color: var(--color-royal-violet);
}

.promo-bar__phone:hover,
.promo-bar__phone:focus-visible {
  color: var(--color-royal-violet-hover);
}

/* ---- Responsive: allow neat wrapping, never overlap, stay slim ---- */

@media (max-width: 600px) {
  .promo-bar {
    font-size: 11px;
    padding: 8px var(--space-3);
  }
}