/* Halloween theme - only the .hw-bar is rendered when the theme is on; the accent
   recolour is driven by the --main-color override in the layout's inline style. */

.hw-bar {
  position: relative;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  text-align: center;
  font-family: Sora, Montserrat, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff7518, #b01e8f, #6a1b9a, #ff7518);
  background-size: 300% 100%;
  animation: hw-slide 14s linear infinite;
  box-shadow: 0 2px 14px rgba(255, 117, 24, 0.35);
  letter-spacing: .2px;
}
.hw-bar b { color: #ffe3b3; }
@keyframes hw-slide { to { background-position: 300% 0; } }

/* A spooky orange glow on the header while the theme is on. */
.hw-bar + .cart-drawer-root ~ .triplezone-header .header-splash,
.hw-bar ~ .triplezone-header .header-splash { box-shadow: inset 0 -120px 160px -60px rgba(255, 117, 24, .25); }

@media (max-width: 560px) {
  .hw-bar { font-size: 12px; padding: 8px 12px; }
}