/* Header nav — Galaxy Club style (logo left, stickers button, inverse-over-video mode) */

/* Desktop layout: logo far left, menu beside it, utilities right */
@media only screen and (min-width: 48em) {
  .header__logo {
    order: 1;
    margin-right: 1rem;
  }

  .header__menu {
    order: 2;
    flex: 1;
    justify-content: flex-start;
  }

  .header__utilities {
    order: 3;
  }
}

.header__logo {
  display: block;
  transition: transform 0.15s ease;
}

.header__logo:hover {
  transform: rotate(-2deg);
}

.header__cart {
  transition: transform 0.15s ease;
}

.header__cart:hover {
  transform: scale(1.1);
}

/* Free stickers button (a <button> — reset button defaults explicitly) */
.header__stickers {
  display: none;
  align-items: center;
  gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;

  color: #16140f;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 8px 16px;
  margin-right: 1rem;



    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 0px;
    background: linear-gradient(90deg, #ff77b0, #ffdf35 51.56%, #aaf15c);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.5rem rgba(232, 61, 167, 0.5);
    text-decoration: none;

   


}

.header__stickers:hover {
  transform: rotate(-2deg);
  text-decoration: none;
}

.header__stickers:focus-visible {
  outline: 3px solid #ffb627;
  outline-offset: 2px;
}

@media only screen and (min-width: 48em) {
  .header__stickers {
    display: inline-flex;
  }
}

/* Inverse mode — added by the video hero when it sits directly under the
   header. Only applies while the header is transparent; once the existing
   scroll handler adds .scrolled (paper background), colors revert. */
.header--inverse:not(.scrolled) {
  color: #fff;
}

.header--inverse:not(.scrolled) .logo {
  color: #fff;
}

.header--inverse:not(.scrolled) .menu-desktop__list-item__button {
  color: #fff;
}

.header--inverse:not(.scrolled) .menu-desktop__list-item__button:hover,
.header--inverse:not(.scrolled) .menu-desktop__list-item__button.is-active {
  color: #ffb627;
}

.header--inverse:not(.scrolled) .menu-desktop__list-item__button:after {
  display: none;
}

.header--inverse:not(.scrolled) .hamburger__box span {
  background-color: #fff;
}

.header--inverse:not(.scrolled) .header__cart,
.header--inverse:not(.scrolled) .header__account {
  color: #fff;
  filter: drop-shadow(2px 2px 0 rgba(22, 20, 15, 0.5));
}

/* main.min.css hard-sets fill:#000 on .header .icon-button path, which beats
   the SVGs' fill="currentColor" attribute — restore currentColor in inverse. */
.header--inverse:not(.scrolled) .icon-button path {
  fill: currentColor;
}

/* The cart count badge keeps its yellow background in inverse mode, so it
   must not inherit the white icon color. */
.header--inverse:not(.scrolled) .header__cart__count {
  color: #16140f;
}