/** Shopify CDN: Minification failed

Line 783:1 Expected "}" to go with "{"

**/
.mega-menu-v2__grid {
  --width: 6px;
  --scrollbar-thumb-color: rgba(var(--color-foreground), 0.08);
  --scrollbar-thumb-color-hover: rgba(var(--color-foreground), 0.12);
}

/* Exactly two centered rows with no horizontal scrolling or edge clipping. */
.mega-menu-v2__grid--flavors {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  padding: 1.2rem 0.4rem 2.4rem;
  box-sizing: border-box;
}

.mega-menu-v2__row--flavors {
  display: grid;
  grid-template-columns: repeat(var(--row-count), minmax(0, 10.3rem));
  justify-content: center;
  align-items: start;
  gap: clamp(0.6rem, 1.15vw, 2rem);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mega-menu-v2__item--flavor {
  width: 100%;
  min-width: 0;
  align-self: start;
}

.mega-menu-v2__card {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.mega-menu-v2__img--flavor {
  display: block;
  width: 100%;
  aspect-ratio: 103 / 178;
  margin: 0;
  overflow: hidden;
  position: relative;
  line-height: 0;
  border-radius: 1rem;
  background: transparent;
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.10);
  transform: translateY(0);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mega-menu-v2__img--flavor:hover img,
.mega-menu-v2__card:hover .mega-menu-v2__img--flavor img {
  transform: none;
}

.mega-menu-v2__img--flavor .xo-image,
.mega-menu-v2__img--flavor picture,
.mega-menu-v2__img--flavor img,
.mega-menu-v2__img--flavor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mega-menu-v2__img--flavor img {
  object-fit: contain;
  object-position: center;
  transition: none;
}

.mega-menu-v2__img--flavor .placeholder-svg {
  background: rgba(var(--color-foreground), 0.04);
}

.mega-menu-v2__link--flavor {
  display: block;
  width: 100%;
  margin: 0.9rem 0 0;
  padding: 0;
  color: rgb(var(--color-foreground));
  font-size: calc(var(--font-body-scale) * 1.45rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.mega-menu-v2__link--flavor::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .mega-menu-v2__card:hover .mega-menu-v2__img--flavor,
  .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
    transform: translateY(-0.45rem);
    box-shadow: 0 1.1rem 2.5rem rgba(0, 0, 0, 0.15);
  }

  .mega-menu-v2__card:hover .mega-menu-v2__link--flavor {
    color: rgba(var(--color-foreground), 0.65);
  }
}

.mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.3rem;
}

@media (max-width: 1199px) {
  .mega-menu-v2__row--flavors {
    gap: 0.6rem;
  }

  .mega-menu-v2__link--flavor {
    font-size: calc(var(--font-body-scale) * 1.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu-v2__img--flavor,
  .mega-menu-v2__link--flavor {
    transition: none;
  }
}

/* Mobile drawer: full-width, five cards per row, and natural vertical expansion. */
@media (max-width: 767px) {
  /* Expand the menu drawer/panel when this mega menu is present. */
  :where(
    xo-menu-hamburger,
    xo-drawer,
    .xo-menu-hamburger,
    .xo-menu-hamburger__content,
    .xo-drawer,
    .xo-drawer__content,
    .menu-drawer,
    .drawer,
    .drawer__inner
  ):has(.mega-menu-v2__grid--flavors) {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .section-mega-menu:has(.mega-menu-v2__grid--flavors),
  .section-mega-menu:has(.mega-menu-v2__grid--flavors) > *,
  .section-mega-menu:has(.mega-menu-v2__grid--flavors) xo-container {
    width: 100% !important;
    max-width: none !important;
  }

  .mega-menu-v2__grid--flavors {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0.8rem;
    row-gap: 1.6rem;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 1.2rem 1.6rem 2.4rem;
  }

  /* Flatten the two desktop rows so all blocks flow into the mobile grid. */
  .mega-menu-v2__row--flavors {
    display: contents;
  }

  .mega-menu-v2__item--flavor {
    width: 100%;
    min-width: 0;
  }

  .mega-menu-v2__img--flavor {
    width: 100%;
    border-radius: 0.7rem;
    box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.09);
  }

  .mega-menu-v2__link--flavor {
    margin-top: 0.55rem;
    font-size: clamp(0.95rem, 2.7vw, 1.2rem);
    line-height: 1.15;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* Mobile drawer gutter correction: retain five columns while using nearly all viewport width. */
@media (max-width: 767px) {
  .menu-hamburger-drawer-mobile__collapse-content .mega-menu-v2__grid--flavors {
    width: calc(100% + 2.4rem);
    max-width: calc(100% + 2.4rem);
    margin-inline: -1.2rem;
    padding: 1.2rem 1rem 2.4rem;
    column-gap: clamp(0.45rem, 1.6vw, 0.8rem);
    box-sizing: border-box;
  }

  .menu-hamburger-drawer-mobile__collapse-content .mega-menu-v2__item--flavor,
  .menu-hamburger-drawer-mobile__collapse-content .mega-menu-v2__card,
  .menu-hamburger-drawer-mobile__collapse-content .mega-menu-v2__img--flavor {
    min-width: 0;
    max-width: 100%;
  }
}


/* Every desktop artwork treatment uses the exact same visible height.
   Width may vary by block, but mixed artwork always aligns top and bottom. */
@media (min-width: 768px) {
  .mega-menu-v2__grid--flavors .mega-menu-v2__img--flavor {
    height: 17.8rem;
    min-height: 17.8rem;
    aspect-ratio: auto;
  }

  .mega-menu-v2__grid--flavors .mega-menu-v2__img--flavor > *,
  .mega-menu-v2__grid--flavors .mega-menu-v2__img--flavor .xo-image,
  .mega-menu-v2__grid--flavors .mega-menu-v2__img--flavor picture {
    height: 100% !important;
    min-height: 100% !important;
  }
}

/* Natural-width and silhouette items share the established 17.8rem image
   height. Their widths follow the uploaded artwork, so mixed rows stay aligned. */
@media (min-width: 768px) {
  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette,
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--natural_width),
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--silhouette)
  ) .mega-menu-v2__row--flavors {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette,
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--natural_width),
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--silhouette)
  ) .mega-menu-v2__item--flavor {
    flex: 0 0 10.3rem;
    width: 10.3rem;
    max-width: none;
  }

  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__item--flavor,
  .mega-menu-v2__item--natural_width,
  .mega-menu-v2__item--silhouette {
    flex-basis: calc(17.8rem * var(--flavor-image-ratio, 0.5787));
    width: calc(17.8rem * var(--flavor-image-ratio, 0.5787));
  }

  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__img--flavor,
  .mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor,
  .mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor {
    width: 100%;
    height: 17.8rem;
    aspect-ratio: auto;
  }
}

/* Override intrinsic sizing emitted by the theme image snippet only for the
   two proportional modes. */
:is(
  .mega-menu-v2__grid--natural_width,
  .mega-menu-v2__grid--silhouette
) .mega-menu-v2__img--flavor,
:is(
  .mega-menu-v2__grid--natural_width,
  .mega-menu-v2__grid--silhouette
) .mega-menu-v2__img--flavor > *,
:is(
  .mega-menu-v2__grid--natural_width,
  .mega-menu-v2__grid--silhouette
) .mega-menu-v2__img--flavor .xo-image,
:is(
  .mega-menu-v2__grid--natural_width,
  .mega-menu-v2__grid--silhouette
) .mega-menu-v2__img--flavor picture,
.mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor,
.mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor > *,
.mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor .xo-image,
.mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor picture,
.mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor,
.mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor > *,
.mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor .xo-image,
.mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor picture {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  aspect-ratio: auto !important;
}

:is(
  .mega-menu-v2__grid--natural_width,
  .mega-menu-v2__grid--silhouette
) .mega-menu-v2__img--flavor img,
.mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor img,
.mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Transparent artwork mode: remove the rectangular card shadow and let the
   image alpha channel define a natural silhouette shadow. */
:is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__img--flavor {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__img--flavor img {
  filter: drop-shadow(0 0.65rem 0.9rem rgba(0, 0, 0, 0.22));
  transition: filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:hover .mega-menu-v2__img--flavor,
  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
    box-shadow: none !important;
  }

  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:hover .mega-menu-v2__img--flavor img,
  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor img {
    filter: drop-shadow(0 1rem 1.35rem rgba(0, 0, 0, 0.28));
  }
}

@media (max-width: 767px) {
  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette,
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--natural_width),
    .mega-menu-v2__grid--flavors:has(.mega-menu-v2__item--silhouette)
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__img--flavor,
  .mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor,
  .mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor {
    aspect-ratio: var(--flavor-image-ratio, 0.5787) !important;
    height: auto !important;
  }

  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__img--flavor > *,
  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__img--flavor .xo-image,
  :is(
    .mega-menu-v2__grid--natural_width,
    .mega-menu-v2__grid--silhouette
  ) .mega-menu-v2__img--flavor picture,
  .mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor > *,
  .mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor .xo-image,
  .mega-menu-v2__item--natural_width .mega-menu-v2__img--flavor picture,
  .mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor > *,
  .mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor .xo-image,
  .mega-menu-v2__item--silhouette .mega-menu-v2__img--flavor picture {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* Preserve the established desktop hover interaction. */
@media (min-width: 1200px) {
  .mega-menu-v2__card:hover .mega-menu-v2__img--flavor,
  .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
    transform: translateY(-0.45rem) !important;
    box-shadow: 0 1.1rem 2.5rem rgba(0, 0, 0, 0.15) !important;
  }

  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:hover .mega-menu-v2__img--flavor,
  :is(.mega-menu-v2__grid--silhouette, .mega-menu-v2__item--silhouette) .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
    box-shadow: none !important;
  }
}

/* Standard flavor pouch containment refinement.
   Keep the existing card size and treatment, but inset only the uploaded pouch
   artwork slightly so its outer edges cannot be clipped in dense 13-item rows. */
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor {
  box-sizing: border-box;
  padding: 0.22rem;
}

.mega-menu-v2__item--standard .mega-menu-v2__img--flavor > *,
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor .xo-image,
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor picture {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

.mega-menu-v2__item--standard .mega-menu-v2__img--flavor img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Four-item mobile menus use the full available width instead of retaining an
   empty fifth column. Other mobile item counts keep the existing five-column flow. */
@media (max-width: 767px) {
  .mega-menu-v2__grid--flavors.mega-menu-v2__grid--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mega-menu-v2__item--standard .mega-menu-v2__img--flavor {
    padding: 0.18rem;
  }
}


/* Standard flavor pouch — remove the visible rectangular card surface and
   let the uploaded PNG itself define the visible edge and shadow. */
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor {
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mega-menu-v2__item--standard .mega-menu-v2__img--flavor > *,
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor .xo-image,
.mega-menu-v2__item--standard .mega-menu-v2__img--flavor picture {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mega-menu-v2__item--standard .mega-menu-v2__img--flavor img {
  display: block;
  object-fit: contain !important;
  filter: drop-shadow(0 0.6rem 1rem rgba(0, 0, 0, 0.14));
  transition: filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .mega-menu-v2__item--standard .mega-menu-v2__card:hover .mega-menu-v2__img--flavor,
  .mega-menu-v2__item--standard .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor {
    box-shadow: none !important;
  }

  .mega-menu-v2__item--standard .mega-menu-v2__card:hover .mega-menu-v2__img--flavor img,
  .mega-menu-v2__item--standard .mega-menu-v2__card:focus-visible .mega-menu-v2__img--flavor img {
    filter: drop-shadow(0 1rem 1.45rem rgba(0, 0, 0, 0.19));
  }
}












/* Keep sparse mega menus active across their full panel width */
.xo-menu-horizontal__mega-menu > template + *,
.xo-menu-horizontal__mega-menu > [data-id] {
  width: 100%;
}

/* Ensure the section itself owns the full hoverable panel */
.xo-menu-horizontal__mega-menu [data-id] {
  width: 100%;
  min-width: 100%;
  background: white;
  position: relative;
  top: 60px; 
}

/* Keep the visible product grid unchanged */
.xo-menu-horizontal__mega-menu .mega-menu-v2__grid {
  width: 100%;
}
/* Premium corner ribbon — isolated overlay only. Artwork sizing, shadows,
   hover movement, layout, and image treatment remain unchanged. */
.mega-menu-v2__ribbon {
  --ribbon-surface: var(--ribbon-color, #1d1d1f);
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.8rem;
  min-height: 0.1rem;
  padding: 0.35rem 0.7rem;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  color: #fff;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.28rem;
  box-shadow:
    0 0.45rem 0.9rem rgba(0, 0, 0, 0.18),
    inset 0 0.1rem 0 rgba(255, 255, 255, 0.22),
    inset 0 -0.1rem 0 rgba(0, 0, 0, 0.12);
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.28);
  -webkit-font-smoothing: antialiased;
}

/* The satin surface is kept on its own layer so theme image/background rules
   cannot make the ribbon transparent while leaving its text visible. */
.mega-menu-v2__ribbon::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -0.1rem;
  background: var(--ribbon-surface, #1d1d1f);
}

.mega-menu-v2__ribbon--gradient {
  --ribbon-surface: linear-gradient(
    180deg,
    var(--ribbon-gradient-start, #3a3a3c) 0%,
    var(--ribbon-gradient-end, #161617) 100%
  );
}

.mega-menu-v2__ribbon::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(105deg, transparent 16%, rgba(255, 255, 255, 0.13) 43%, transparent 68%);
}

.mega-menu-v2__ribbon-text {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mega-menu-v2__ribbon--top_left {
  top: 0.15rem;
  left: -2.1rem;
  transform: rotate(-45deg);
}

.mega-menu-v2__ribbon--top_right {
  top: -5.15rem;
  right: -1.1rem;
  transform: rotate(45deg);
}

.mega-menu-v2__ribbon--bottom_left {
  bottom: 1.25rem;
  left: -2.1rem;
  transform: rotate(45deg);
}

.mega-menu-v2__ribbon--bottom_right {
  right: -2.1rem;
  bottom: 1.25rem;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .mega-menu-v2__ribbon {
    width: .5rem;
    min-height: .65rem;
    padding: 0.26rem 0.45rem;
    border-radius: 0.22rem;
  }

  .mega-menu-v2__ribbon-text {
    font-size: 0.72rem;
    letter-spacing: 0.035em;
  }

  .mega-menu-v2__ribbon--top_left {
    top: 0.1rem;
    left: -1.65rem;
  }

  .mega-menu-v2__ribbon--top_right {
    top: 0.1rem;
    right: -5.65rem;
  }

  .mega-menu-v2__ribbon--bottom_left {
    bottom: 0.9rem;
    left: -1.65rem;
  }

  .mega-menu-v2__ribbon--bottom_right {
    right: -1.65rem;
    bottom: 0.9rem;
  }
}




















/* Premium ribbon — finalized dimensions */
.mega-menu-v2__ribbon {
  height: 2.5rem !important;
  min-height: 0 !important;
  max-height: 2.5rem !important;

  width: 11.5rem !important;
  min-width: 0 !important;
  max-width: 11.5rem !important;

  inline-size: 11.5rem !important;
  min-inline-size: 0 !important;
  max-inline-size: 11.5rem !important;

  flex: 0 0 11.5rem !important;
  flex-basis: 11.5rem !important;

  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  box-sizing: border-box !important;
}

.mega-menu-v2__ribbon--top_right {
  top: 1.45rem !important;
  right: -2.35rem !important;

clip-path: polygon(
  2.4rem 0,
  calc(100% - 2.4rem) 0,
  100% 2.4rem,
  100% 100%,
  0 100%,
  0 2.4rem
);


















.xo-menu-horizontal__mega-menu {
  top: 100%;
  background: rgb(var(--color-background, 255 255 255));
}

/* Non-sticky desktop mega-menu correction.
   The host remains in its original hover/listener position. The added top
   padding is part of that same hoverable element, so no pointer gap is
   introduced. The visible injected section receives the configured submenu
   background after the offset. Sticky positioning is intentionally untouched. */
@media (min-width: 1200px) {
  .header-v1 xo-sticky:not([xo-is-sticky]) .xo-menu-horizontal__mega-menu:not(:empty) {
    padding-top: 60px;
    box-sizing: border-box;
  }

  .header-v1 xo-sticky:not([xo-is-sticky]) .xo-menu-horizontal__mega-menu > [data-id] {
    background-color: var(--submenu-bg-color, rgb(var(--color-background)));
    background-image: var(--submenu-bg-gradient);
  }
}



















/* Ensure the section itself owns the full hoverable panel */
.xo-menu-horizontal__mega-menu [data-id] {
  display: block;
  width: 100%;
  min-width: 100%;
  background: white;
  position: relative;
  top: 60px;

  /* Keep the entire panel above neighboring header hover listeners. */
  pointer-events: auto;
  z-index: 2;
  isolation: isolate;
}