/*
 * ZiggyZog Custom CSS Override
 *
 * Designer-safe visual CSS file.
 * This file loads at the very end of the page head so it can override
 * the Kidz theme and most plugin styles across the full website.
 *
 * Edit this file for layout, spacing, colours, typography and responsive polish.
 * Do not edit the Kidz parent theme or /wp-content/uploads/kidz/min.css.
 *
 * If a theme rule still wins, use a more specific selector first.
 * Use !important only when overriding an existing !important theme rule.
 */

/* Header / Logo / Menu */
/* Site-wide scrolling announcement bar */
.zz-site-announcement {
  position: relative;
  z-index: 60;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(52, 67, 94, 0.12);
  color: var(--text-color, #404e65);
  box-shadow: 0 6px 16px rgba(47, 66, 91, 0.06);
}

.zz-site-announcement__viewport {
  overflow: hidden;
  white-space: nowrap;
}

.zz-site-announcement__track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  animation: zz-announcement-scroll 34s linear infinite;
}

.zz-site-announcement__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px;
  font: 900 14px/1.2 var(--font-header), sans-serif;
  letter-spacing: 0.02em;
}

.zz-site-announcement__item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-color, #2aaee8);
  box-shadow: 0 0 0 4px rgba(42, 174, 232, 0.14);
  flex: 0 0 auto;
}

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

.zz-site-announcement:hover .zz-site-announcement__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .zz-site-announcement__track {
    animation: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
}

/* Sticky header logo: keep full header logo size after scroll. */
body.sticky #header .main-menu .logo,
.sticky #header .main-menu .logo {
  max-width: 155px !important;
  max-height: 135px !important;
  width: 155px !important;
  height: 135px !important;
}

body.sticky #header .main-menu .logo img,
.sticky #header .main-menu .logo img {
  max-height: 135px !important;
  width: auto !important;
  height: auto !important;
}


/* Homepage */

/* Category Pages */

/* Product Cards */

/* Product Pages */

/* Cart and Checkout visual polish only */

/* Mobile */
@media (max-width: 767px) {
  .zz-site-announcement__track {
    animation-duration: 24s;
  }

  .zz-site-announcement__item {
    padding: 9px 22px;
    font-size: 12px;
  }
}