/* Floating two-capsule navigation, following the supplied Seed reference. */
/*
 * Home has two deliberately different header states:
 * 1. At the top, the announcement and unframed navigation sit directly over
 *    the hero artwork. The header itself must not reserve a pale strip.
 * 2. Once the page moves, the header becomes fixed and the two dark glass
 *    capsules below provide their own contrast.
 */
html body.home #tbp_header.sunday-universal-header {
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.home #tbp_header.sunday-universal-header:not(.is-scrolled) {
  position: absolute !important;
  top: 0 !important;
}

html body.home #tbp_header.sunday-universal-header.is-scrolled {
  position: fixed !important;
  top: 0 !important;
}

/* Use the same black announcement bar on every route. */
html body #tbp_header.sunday-universal-header .tb_iywl685 {
  background: #000 !important;
  color: #fff !important;
}

html body #tbp_header.sunday-universal-header .tb_iywl685 :is(p, span, strong, a) {
  color: #fff !important;
}

/* Keep the header out of its own transformed compositor layer. A transformed
   ancestor prevents the dropdown's backdrop-filter from sampling the page. */
html body.sunday-motion-ready #tbp_header.sunday-universal-header,
html body.sunday-motion-ready #tbp_header.sunday-universal-header.is-motion-visible {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

html body.home #tbp_header.sunday-universal-header:not(.is-scrolled) .tb_7zb8427,
html body.home #tbp_header.sunday-universal-header:not(.is-scrolled) .tb_7zb8427 > .row_inner[data-sunday-amai-header="true"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* At the top, retain the complete light header row and its subtle divider.
   The row disappears visually only after the sticky state is activated. */
html body:not(.home) #tbp_header.sunday-universal-header:not(.is-scrolled) .tb_7zb8427 {
  border: 0 !important;
  border-bottom: 1px solid rgba(22,14,37, .12) !important;
  background: rgba(246,244,249, .97) !important;
  box-shadow: 0 8px 24px rgba(32,19,47, .07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #tbp_header.sunday-universal-header:not(.is-scrolled) .tb_7zb8427 > .row_inner[data-sunday-amai-header="true"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tbp_header .tb_7zb8427 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #tbp_header.sunday-universal-header.is-scrolled .tb_7zb8427 {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Scrolled state is only the floating capsules. Remove the legacy sticky
   header rule that draws a full-width divider/drop shadow below them. */
html body #tbp_header.sunday-universal-header.is-scrolled,
html body #tbp_header.sunday-universal-header.is-scrolled .tb_7zb8427,
html body #tbp_header.sunday-universal-header.is-scrolled .tb_7zb8427 > .row_inner[data-sunday-amai-header="true"] {
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tbp_header .row_inner[data-sunday-amai-header="true"] {
  width: min(1600px, calc(100vw - 48px)) !important;
  max-width: 1600px !important;
  min-height: 76px !important;
  gap: 18px !important;
}

html body #tbp_header.sunday-universal-header .tb_7zb8427 > .row_inner[data-sunday-amai-header="true"] {
  width: min(1600px, calc(100vw - 48px)) !important;
  max-width: 1600px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#tbp_header .sunday-amai-left,
#tbp_header .sunday-amai-actions {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease !important;
}

#tbp_header .sunday-amai-left {
  position: relative !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 5px 7px 5px 15px !important;
  border-radius: 999px !important;
}

/* The capsule glass lives on a sibling layer, not on the ancestor that owns
   the mega menu. This keeps both backdrop filters sampling the real page. */
#tbp_header .sunday-amai-left::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  border: 1px solid rgba(255,255,255, .24) !important;
  border-radius: inherit !important;
  background: rgba(83,78,89, .42) !important;
  box-shadow: 0 12px 32px rgba(17,11,23, .12), inset 0 1px rgba(255,255,255, .16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(92%) !important;
  backdrop-filter: blur(14px) saturate(92%) !important;
  content: "" !important;
  pointer-events: none !important;
}

/* Internal routes only: at the very top, keep Shop / Learn / About visually
   unframed like the icon group on the right. The glass capsule returns from
   the existing .is-scrolled rules below. Home is deliberately excluded. */
html body:not(.home) #tbp_header.sunday-universal-header:not(.is-scrolled) .sunday-amai-left::before {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tbp_header .sunday-amai-left > .sunday-amai-logo,
#tbp_header .sunday-amai-left > .sunday-amai-navlinks {
  z-index: 1 !important;
}

#tbp_header .sunday-amai-left > .sunday-amai-logo {
  position: relative !important;
}

#tbp_header .sunday-amai-left > .sunday-amai-navlinks {
  position: static !important;
}

#tbp_header .sunday-amai-actions {
  gap: 1px !important;
  padding: 5px 6px !important;
  border-radius: 999px !important;
}

#tbp_header .sunday-amai-logo {
  width: 96px !important;
  height: 30px !important;
  margin-right: 5px !important;
  flex: 0 0 96px !important;
}

#tbp_header .sunday-amai-logo svg {
  display: block !important;
  width: 96px !important;
  height: auto !important;
  max-height: 30px !important;
}

#tbp_header .sunday-amai-navlinks {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

@media (min-width: 901px) {
  #tbp_header .sunday-amai-left {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    padding: 5px 18px !important;
    box-sizing: border-box !important;
  }

  #tbp_header .sunday-amai-logo {
    margin-right: 0 !important;
  }

  #tbp_header .sunday-amai-navlinks {
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-left: 14px !important;
  }

  #tbp_header .sunday-amai-navlink {
    min-width: 64px !important;
    padding-inline: 10px !important;
    justify-content: center !important;
  }
}

#tbp_header .sunday-amai-navlink {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease !important;
}

#tbp_header .sunday-amai-navlink::after { display: none !important; }

#tbp_header .sunday-amai-navlink.is-active::after,
#tbp_header .sunday-amai-navlink[aria-current="page"]::after {
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #844ac6 !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}
#tbp_header .sunday-amai-chev { display: none !important; }
#tbp_header .sunday-amai-navlink:hover,
#tbp_header .sunday-amai-navlink:focus-visible {
  color: #251636 !important;
  border-color: transparent !important;
  background: rgba(255,255,255, .42) !important;
}

html body #tbp_header:not(.is-scrolled) .sunday-amai-navlink[aria-current="page"] {
  border-color: transparent !important;
  background: transparent !important;
}

html body #tbp_header.sunday-universal-header:not(.is-scrolled) .sunday-amai-navlink:hover,
html body #tbp_header.sunday-universal-header:not(.is-scrolled) .sunday-amai-navlink:focus-visible {
  color: #251636 !important;
  border-color: rgba(255,255,255, .26) !important;
  background: rgba(255,255,255, .48) !important;
}

#tbp_header .sunday-amai-navlink:hover { transform: translateY(-1px); }

#tbp_header .sunday-amai-icon,
#tbp_header .sunday-amai-cart {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  transition: background-color .2s ease, transform .2s ease !important;
}

#tbp_header .sunday-amai-icon svg,
#tbp_header .sunday-amai-cart svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.65 !important;
}

#tbp_header .sunday-amai-icon:hover,
#tbp_header .sunday-amai-cart:hover {
  background: rgba(255,255,255, .42) !important;
  transform: translateY(-1px) !important;
}

#tbp_header.is-scrolled .sunday-amai-left,
#tbp_header.is-scrolled .sunday-amai-actions {
  border-color: rgba(255,255,255, .24) !important;
  background: rgba(83,78,89, .68) !important;
  box-shadow: 0 12px 32px rgba(17,11,23, .15), inset 0 1px rgba(255,255,255, .16) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tbp_header.is-scrolled .sunday-amai-left {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tbp_header.is-scrolled .sunday-amai-logo,
#tbp_header.is-scrolled .sunday-amai-navlink,
#tbp_header.is-scrolled .sunday-amai-icon,
#tbp_header.is-scrolled .sunday-amai-cart {
  color: rgba(255,255,255, .95) !important;
}

html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-logo,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-navlink,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-icon,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-cart {
  color: rgba(255,255,255, .95) !important;
}

html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-logo svg path {
  fill: rgba(255,255,255, .95) !important;
}

#tbp_header.is-scrolled .sunday-amai-logo svg path {
  fill: rgba(255,255,255, .95) !important;
}

#tbp_header.is-scrolled .sunday-amai-navlink:hover,
#tbp_header.is-scrolled .sunday-amai-navlink:focus-visible,
#tbp_header.is-scrolled .sunday-amai-navlink[aria-current="page"],
#tbp_header.is-scrolled .sunday-amai-navlink.is-active,
#tbp_header.is-scrolled .sunday-amai-icon:hover,
#tbp_header.is-scrolled .sunday-amai-cart:hover {
  color: #fff !important;
  border-color: rgba(255,255,255, .12) !important;
  background: rgba(255,255,255, .16) !important;
}

html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-navlink:hover,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-navlink:focus-visible,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-navlink[aria-current="page"],
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-navlink.is-active,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-icon:hover,
html body #tbp_header.sunday-universal-header.is-scrolled .sunday-amai-cart:hover {
  color: #fff !important;
  border-color: rgba(255,255,255, .14) !important;
  background: rgba(255,255,255, .17) !important;
}

/* The current route should not create a second glass capsule. At rest its
   orange underline is the only active marker; glass returns on interaction. */
html body #tbp_header.sunday-universal-header.is-scrolled
  .sunday-amai-navlink[aria-current="page"]:not(:hover):not(:focus-visible),
html body #tbp_header.sunday-universal-header.is-scrolled
  .sunday-amai-navlink.is-active:not(:hover):not(:focus-visible) {
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #tbp_header.sunday-universal-header.is-scrolled
    .sunday-amai-navlink[aria-current="page"]:hover,
  html body #tbp_header.sunday-universal-header.is-scrolled
    .sunday-amai-navlink.is-active:hover {
    border-color: rgba(255,255,255, .14) !important;
    background: rgba(255,255,255, .17) !important;
  }
}

#tbp_header .sunday-amai-dropdown {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#tbp_header .sunday-amai-dropdown-panel {
  margin-top: 10px !important;
  border: 1px solid rgba(255,255,255, .28) !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: rgba(29,24,34, .78) !important;
  box-shadow: 0 24px 56px rgba(33,19,48, .20), inset 0 1px rgba(255,255,255, .14) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
}

@media (max-width: 760px) {
  #tbp_header .row_inner[data-sunday-amai-header="true"] {
    width: calc(100% - 20px) !important;
    min-height: 64px !important;
  }
  #tbp_header .sunday-amai-left { padding: 5px 12px !important; }
  #tbp_header .sunday-amai-actions { padding: 4px !important; }
  #tbp_header .sunday-amai-logo,
  #tbp_header .sunday-amai-logo svg { width: 92px !important; }
  #tbp_header .sunday-amai-logo { flex-basis: 92px !important; margin-right: 0 !important; }
  #tbp_header .sunday-amai-icon,
  #tbp_header .sunday-amai-cart { width: 38px !important; height: 38px !important; }
}

/* The promotional strip belongs only to the top-of-page header state.
   Remove the actual row after scrolling so its green background cannot
   remain behind when the announcement copy has faded out. */
html body #tbp_header.sunday-universal-header.is-scrolled .tb_iywl685 {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
