/** Shopify CDN: Minification failed

Line 226:2 Expected "{" but found "."
Line 237:0 Unexpected "}"

**/
.mega-menu {
  position: static;
}

/* UD: Invisible hover bridge that fills the gap between summary and panel.
   Prevents mouseleave from firing when cursor crosses the visual gap. */
.mega-menu[open] > summary::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 4rem;
  background: transparent;
  z-index: 5;
  pointer-events: auto;
}

/* UD: When any megamenu is open, force header icons to dark color so they
   stay visible against the white megamenu background. Without this, icons
   on transparent headers (over hero images) become invisible because they
   inherit white from the transparent state.
   Targets: search icon, cart icon, account icon, header buttons, menu items. */
/* .header-wrapper:has(.mega-menu[open]) .header__icon .icon,
.header-wrapper:has(.mega-menu[open]) .header__icon svg,
.header-wrapper:has(.mega-menu[open]) .header__icon .icon path[fill="#363636"],
.header-wrapper:has(.mega-menu[open]) .header__icon .icon path[stroke="#363636"],
[data-header-transparent="true"]:has(.mega-menu[open]) .header__icon .icon path[fill],
[data-header-transparent="true"]:has(.mega-menu[open]) .header__icon .icon path[stroke] {
  color: #1E1E1E !important;
  /* fill: #1E1E1E !important; */
  /* stroke: #1E1E1E !important;
  
}  */

/* Fallback for browsers that don't support :has() — target via JS-added class */
/* .header-wrapper.has-mega-open .header__icon .icon,
.header-wrapper.has-mega-open .header__icon svg,
.header-wrapper.has-mega-open .header__icon .icon path[fill="#363636"],
.header-wrapper.has-mega-open .header__icon .icon path[stroke="#363636"] {
  color: #1E1E1E !important;
  fill: #1E1E1E !important;
  stroke: #1E1E1E !important;
} */

/* Cart bubble count - keep readable on white bg */
.header-wrapper:has(.mega-menu[open]) .cart-count-bubble,
.header-wrapper.has-mega-open .cart-count-bubble {
  background: #1E1E1E !important;
  color: #FFFFFF !important;
}

/* Header menu item text - same logic */
.header-wrapper:has(.mega-menu[open]) .header__menu-item,
.header-wrapper:has(.mega-menu[open]) .header__menu-item span,
.header-wrapper.has-mega-open .header__menu-item,
.header-wrapper.has-mega-open .header__menu-item span {
  color: #1E1E1E !important;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 3rem;
  padding-top: 3rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  /*max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);*/
  max-height: 100vh;
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.js .mega-menu__content {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu__list {
  display: grid;
  gap: 1.8rem 4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.mega-menu__link {
  color: rgba(var(--color-foreground), 0.75);
  display: block;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
}

.mega-menu__link--level-2 {
  font-weight: bold;
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}

/* ============================================================================
   UD: Figma-accurate megamenu image sizing
   ----------------------------------------------------------------------------
   Issue: image column was too narrow (~235px) and "For Her" overlay visible.
   Figma: image takes ~40% of menu width, clean rectangle, no overlay text.
   ============================================================================ */

 

@media screen and (min-width: 990px) {

  /* Expand the image column so image is large (Figma: right ~40% of menu) */
  .mega-menu .mega-menu__list .dropdown__family.dropdown__family--child:has(.dropdown__family--image-wrapper),
  .mega-menu .mega-menu__list .dropdown__family--image-wrapper {
    flex: 0 0 38% !important;
    width: 38% !important;
    max-width: 60rem !important;
    min-width: 32rem !important;
  }

  /* Image itself — fill the wider column, taller */
  .mega-menu .mega-menu__list .dropdown__family--image-wrapper img,
  .mega-menu .mega-menu__list .dropdown__family img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 48rem !important;
    height: auto !important;
    aspect-ratio: 16 / 12 !important;
    object-fit: contain!important;
    object-position: top center !important;
    border-radius: 0 !important;   /* Figma: clean rectangle, no rounded corners */
    display: block !important;
  }

  /* Hide the "For Her / View All" overlay text - Figma doesn't show it */
  .mega-menu .dropdown__family--image-wrapper .dropdown__family--overlay-text {
    display: none !important;
  }

  /* Make the megamenu list use flex so our width override works,
     with text columns auto-sizing and image getting its 38% */
  .mega-menu .mega-menu__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    /* justify-content: flex-start !important; */
    gap: 2rem !important;
    grid-template-columns: none !important;
  }

  /* Text columns grow naturally, image column doesn't shrink */
  .mega-menu .mega-menu__list > li:not(:has(.dropdown__family--image-wrapper)) {
    flex: 0 1 auto !important;
    min-width: 12rem !important;
  }
}


@media screen and (min-width: 1350px) {
  .mega-menu .mega-menu__list {
    gap: 3rem !important;
  }
}

@media screen and (min-width: 1550px) {
  .mega-menu .mega-menu__list {
    gap: 8rem !important;
  }
}

@media screen and (max-width: 1920px) and (min-width: 1601px)

  /* Expand the image column so image is large (Figma: right ~40% of menu) */
  .mega-menu .mega-menu__list .dropdown__family.dropdown__family--child:has(.dropdown__family--image-wrapper),
  .mega-menu .mega-menu__list .dropdown__family--image-wrapper {
    flex: 0 0 38% !important;
    width: 38% !important;
    max-width: 70rem !important;
    min-width: 32rem !important;
  }
    /* .mega-menu .mega-menu__list > li:not(:has(.dropdown__family--image-wrapper)) {
        flex: 0 1 auto !important;
        min-width: 15rem !important;
    } */
}