.summer-hours-banner {
  position: relative;
  z-index: 90;
  width: 100%;
  min-height: 48px;
  margin-top: 86px;
  padding: 10px 20px;
  overflow: hidden;
  border-block: 1px solid rgba(236, 215, 166, .42);
  background: linear-gradient(90deg, #17130e, #2c2115 50%, #17130e);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  color: #fff;
  font-family: 'K32 Sans', Arial, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .055em;
  text-align: center;
}

body:has(.summer-hours-banner) .site-header {
  background: #090a0c;
}

.summer-hours-banner-viewport {
  width: 100%;
  overflow: hidden;
}

.summer-hours-banner-message {
  margin: 0;
  white-space: nowrap;
}

.summer-hours-banner.is-fixed .summer-hours-banner-viewport {
  display: flex;
  justify-content: center;
}

.summer-hours-banner.is-fixed .summer-hours-banner-message {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summer-hours-banner.is-scroll .summer-hours-banner-message {
  width: max-content;
  min-width: max-content;
  padding-left: 100vw;
  animation: k32-announcement-scroll var(--announcement-duration, 30s) linear infinite;
  will-change: transform;
}

.summer-hours-banner.speed-1 { --announcement-duration: 46s; }
.summer-hours-banner.speed-2 { --announcement-duration: 42s; }
.summer-hours-banner.speed-3 { --announcement-duration: 38s; }
.summer-hours-banner.speed-4 { --announcement-duration: 34s; }
.summer-hours-banner.speed-5 { --announcement-duration: 30s; }
.summer-hours-banner.speed-6 { --announcement-duration: 26s; }
.summer-hours-banner.speed-7 { --announcement-duration: 22s; }
.summer-hours-banner.speed-8 { --announcement-duration: 18s; }
.summer-hours-banner.speed-9 { --announcement-duration: 14s; }
.summer-hours-banner.speed-10 { --announcement-duration: 10s; }

@keyframes k32-announcement-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.summer-hours-banner ~ .opening-status {
  top: 148px;
}

.menu-open .summer-hours-banner {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 720px) {
  .summer-hours-banner {
    min-height: 44px;
    margin-top: 70px;
    padding: 8px 6px;
    font-size: clamp(.54rem, 2.65vw, .66rem);
  }

  .summer-hours-banner ~ .opening-status {
    top: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summer-hours-banner.is-scroll .summer-hours-banner-message {
    width: auto;
    min-width: 0;
    padding-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;
  }
}

@media print {
  .summer-hours-banner {
    display: none !important;
  }
}