/** Shopify CDN: Minification failed

Line 162:30 Unexpected "3"

**/
/**
 * Homepage transparent header fix
 * At scroll top: transparent bar + light nav over hero
 * After scroll: solid white bar + dark nav (matches theme scrolled state)
 */

#header-component[transparent] .header__row--top {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* —— At top of page —— */
#header-component[transparent][data-ff-at-top] .header__row--top {
  background-color: transparent;
  background: transparent;
  box-shadow: none;
}

#header-component[transparent][data-ff-at-top] .header__row--top .menu-list__link,
#header-component[transparent][data-ff-at-top] .header__row--top .menu-list__item,
#header-component[transparent][data-ff-at-top] .header__row--top .header-actions__action,
#header-component[transparent][data-ff-at-top] .header__row--top .dropdown-localization__button,
#header-component[transparent][data-ff-at-top] .header__row--top .search-action {
  color: #ffffff;
}

#header-component[transparent][data-ff-at-top] .header__row--top .menu-list__link:hover,
#header-component[transparent][data-ff-at-top] .header__row--top .header-actions__action:hover {
  color: rgba(255, 255, 255, 0.85);
}

#header-component[transparent][data-ff-at-top] .header__row--top .svg-wrapper,
#header-component[transparent][data-ff-at-top] .header__row--top svg {
  color: #ffffff;
}

/* —— At top + menu open (white underlay): dark nav — data-ff-menu-open set by ff-header-home.js —— */
#header-component[transparent][data-ff-at-top][data-ff-menu-open] .header__row--top {
  background-color: #ffffff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

#header-component[transparent][data-ff-at-top][data-ff-menu-open]
  .header__row--top
  :is(
    .menu-list__link,
    .menu-list__link-title,
    .menu-list__item,
    .header-actions__action,
    .dropdown-localization__button,
    .search-action,
    .svg-wrapper,
    svg
  ) {
  color: #2c2420 !important;
}

#header-component[transparent][data-ff-at-top][data-ff-menu-open]
  .header__row--top
  :is(.menu-list__link:hover, .header-actions__action:hover) {
  color: #000000 !important;
}

/* Fallback without JS: :has() for hover-only browsers */
#header-component[transparent][data-ff-at-top]:is(
    :has(header-menu:hover),
    :has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    :has(.mega-menu__list:hover)
  )
  .header__row--top
  :is(.menu-list__link, .menu-list__link-title, .menu-list__item) {
  color: #2c2420 !important;
}

#header-component[transparent][data-ff-at-top][data-ff-menu-open]
  .header__column:has(header-menu:hover)
  header-menu:not(:hover)
  .menu-list__link,
#header-component[transparent][data-ff-at-top][data-ff-menu-open]
  .header__column:has(header-menu:hover)
  .header-actions__action:not(:hover) {
  color: rgb(44 36 32 / 0.55) !important;
  opacity: 1 !important;
}

/* —— Scrolled —— */
#header-component[transparent]:not([data-ff-at-top]) .header__row--top {
  background-color: #ffffff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

#header-component[transparent]:not([data-ff-at-top]) .header__row--top .menu-list__link,
#header-component[transparent]:not([data-ff-at-top]) .header__row--top .menu-list__item,
#header-component[transparent]:not([data-ff-at-top]) .header__row--top .header-actions__action,
#header-component[transparent]:not([data-ff-at-top]) .header__row--top .dropdown-localization__button,
#header-component[transparent]:not([data-ff-at-top]) .header__row--top .search-action {
  color: #2c2420;
}

#header-component[transparent]:not([data-ff-at-top]) .header__row--top .svg-wrapper,
#header-component[transparent]:not([data-ff-at-top]) .header__row--top svg {
  color: #2c2420;
}

/* Push the entire main (banner image + content) below the transparent header.
   #header-group physical height = announcement bar height only (transparent header
   is position:absolute so it's excluded from flow). We offset main by
   (header-height − announcement-height) so the banner starts exactly at the header bottom. */
body:has(#header-component[transparent]) main#MainContent {
  padding-top: max(0px, calc(var(--header-height, 60px) - var(--header-group-height, 0px)));
}

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  /*
   * Sticky header sets data-sticky-state="active" at page top, which turns on
   * --closed-underlay-height: 100% (solid white) while icons stay white → invisible.
   * At scroll top, force hero-style transparent header regardless of sticky state.
   */
  #header-component.header[transparent][data-ff-at-top] {
    --closed-underlay-height: 0px !important;
    --header-logo-display: none !important;
    --header-logo-inverse-display: block !important;
  }

  #header-component[transparent][data-ff-at-top] .header__underlay-closed,
  #header-component[transparent][data-ff-at-top] .header__underlay-open {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }

  #header-component[transparent][data-ff-at-top] .header__row--top,
  #header-component[transparent][data-ff-at-top] .header__row--top .header__columns,
  #header-component[transparent][data-ff-at-top] .header__row--top.color-scheme-2 {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .cart-bubble__background{
    background: #000000 !important;
  }
  .cart-bubble__text-count{
    color: #ffffff !important;
  }

  /* Top row: light icons + inverse logo over hero */
  #header-component[transparent][data-ff-at-top]
    .header__row--top
    :is(
      .header-logo,
      .header-actions__action,3
      .dropdown-localization__button,
      .search-action,
      .header__icon--menu,
      .header__icon--summary,
      .svg-wrapper,
      svg
    ) {
    color: #000000 !important;
  }

  #header-component[transparent][data-ff-at-top] .header-logo__image-container--inverse {
    display: block !important;
  }

  #header-component[transparent][data-ff-at-top] .header-logo__image-container--original {
    display: none !important;
  }

  /* Horizontal nav bar */
  #header-component[transparent] .header__navigation-bar-row {
    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  #header-component[transparent][data-ff-at-top] .header__navigation-bar-row {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #header-component[transparent][data-ff-at-top]
    .header__navigation-bar-row
    :is(.menu-list__item, .menu-list--mobile a, .menu-list--mobile .menu-list__list a) {
    color: #ffffff !important;
  }

  /* Scrolled: solid white header + dark content (both rows) */
  #header-component[transparent]:not([data-ff-at-top]) {
    --closed-underlay-height: 100% !important;
    --header-logo-display: unset !important;
    --header-logo-inverse-display: unset !important;
  }

  #header-component[transparent]:not([data-ff-at-top]) .header__row--top,
  #header-component[transparent]:not([data-ff-at-top]) .header__navigation-bar-row {
    background-color: #ffffff !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  }

  #header-component[transparent]:not([data-ff-at-top])
    .header__row--top
    :is(
      .header-logo,
      .header-actions__action,
      .dropdown-localization__button,
      .search-action,
      .header__icon--menu,
      .header__icon--summary,
      .svg-wrapper,
      svg
    ),
  #header-component[transparent]:not([data-ff-at-top])
    .header__navigation-bar-row
    :is(.menu-list__item, .menu-list--mobile a, .menu-list--mobile .menu-list__list a) {
    color: #2c2420 !important;
  }

  #header-component[transparent]:not([data-ff-at-top]) .header-logo__image-container--inverse {
    display: none !important;
  }

  #header-component[transparent]:not([data-ff-at-top]) .header-logo__image-container--original {
    display: block !important;
  }

  /* Desktop menu-open must not break mobile at-top state */
  #header-component[transparent][data-ff-at-top][data-ff-menu-open] .header__row--top {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}