/* mute-labs – shipping promo banner (site wide) */
:root {
  --spb-h: 0px;
  --spb-cta-top-base: 0px; /* measured per page by the JS */
}

body.spb-open {
  padding-top: var(--spb-h);
}

/* --- Banner shell (matches the rotating banner) --- */
.spb {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9997;
  box-sizing: border-box;
  background: #88B78B;
  color: #fff;
  font-family: "Inter V 19 Latin", Arial, sans-serif;
  line-height: 1.4;
  padding-top: env(safe-area-inset-top);
  transform: translateY(0);
  transition: transform 220ms ease;
}

.spb.is-hidden {
  transform: translateY(-100%);
}

.spb__inner {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 10px;
  padding-inline: clamp(16px, 8vw, 20rem);
}

.spb__track {
  display: flex;
  justify-content: center;
  width: 100%;
}

.spb__item {
  flex: 0 0 auto;
  display: inline-flex;
}

.spb__item--clone {
  display: none;
}

.spb__content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: clamp(13px, 1.1vw, 15px);
}

.spb__bold {
  font-weight: 700;
}

.spb__icon {
  flex: 0 0 auto;
  width: clamp(14px, 1.3vw, 18px);
  height: clamp(14px, 1.3vw, 18px);
  filter: brightness(1.2) saturate(0) contrast(1.2);
  opacity: .9;
}

/* --- Horizontal scroll when the text doesn't fit (toggled by JS) --- */
.spb--scroll .spb__inner {
  padding-inline: 0;
}

.spb--scroll .spb__track {
  width: max-content;
  justify-content: flex-start;
  animation: spb-marquee var(--spb-duration, 20s) linear infinite;
}

.spb--scroll .spb__item {
  padding-inline: 2rem;
}

.spb--scroll .spb__item--clone {
  display: inline-flex;
}

.spb--scroll:hover .spb__track {
  animation-play-state: paused;
}

@keyframes spb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Mobile (≤479px): fixed 36px height --- */
@media (max-width: 479px) {
  .spb__inner {
    box-sizing: border-box;
    min-height: 36px;
    padding-block: 4px;
  }

  .spb__content {
    font-size: 13px;
  }

  .spb__icon {
    width: 16px;
    height: 16px;
  }
}

/* --- Reduced motion: no animation, swipe instead --- */
@media (prefers-reduced-motion: reduce) {
  .spb {
    transition: none;
  }
  .spb--scroll .spb__inner {
    overflow-x: auto;
  }
  .spb--scroll .spb__track {
    animation: none;
  }
  .spb--scroll .spb__item--clone {
    display: none;
  }
}

/* --- Offset mobile navs while banner is visible --- */
body.spb-open .c-nav-mobile,
body.spb-open .c-nav-mobile-new {
  top: calc(var(--spb-h) + env(safe-area-inset-top)) !important;
}

/* --- Sticky mobile CTA follows banner visibility --- */
html body.spb-open .primary-button-mobile.z-index-9999 {
  top: calc(var(--spb-cta-top-base) + var(--spb-h) + env(safe-area-inset-top)) !important;
}

html body.spb-mounted:not(.spb-open) .primary-button-mobile.z-index-9999 {
  top: var(--spb-cta-top-base) !important;
}