/**
 * Extracted 1:1 from the Lumileve test navigation component.
 * Fallback values keep the module portable when theme tokens are unavailable.
 */

.lumileve-mega-navigation,
.lumileve-mega-navigation .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lumileve-mega-navigation {
  position: relative;
}

.lumileve-mega-navigation a {
  display: flex;
  min-block-size: var(--touch-target, 2.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  align-items: center;
  color: var(--color-text, #292324);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
}

.lumileve-mega-navigation a:hover,
.lumileve-mega-navigation a:focus-visible,
.lumileve-mega-navigation .current-menu-item > a,
.lumileve-mega-navigation .current-menu-ancestor > a {
  color: var(--color-brand, #8d4856);
}

.lumileve-mega-navigation .menu-item {
  position: relative;
}

.lumileve-mega-navigation .c-navigation__submenu-toggle {
  display: none;
  min-inline-size: var(--touch-target, 2.75rem);
  min-block-size: var(--touch-target, 2.75rem);
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  color: var(--color-text, #292324);
  cursor: pointer;
}

.lumileve-mega-navigation .c-navigation__submenu-toggle .c-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.lumileve-mega-navigation
  .c-navigation__submenu-toggle[aria-expanded="true"]
  .c-icon {
  transform: rotate(180deg);
}

.lumileve-mega-navigation .c-mega-menu__media {
  display: none;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm, 0.5rem);
  background: var(--color-surface-muted, #f5f0ed);
}

.lumileve-mega-navigation .c-mega-menu__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}

.lumileve-mega-navigation .c-mega-menu__image.is-loaded {
  opacity: 1;
}

.lumileve-mega-navigation .c-mega-menu__media--placeholder {
  background:
    radial-gradient(circle at 75% 24%, var(--color-brand-050, #f8eeee) 0 17%, transparent 18%),
    linear-gradient(145deg, var(--color-surface-muted, #f5f0ed), var(--color-cream-100, #faf7f2));
}

.lumileve-mega-navigation .c-mega-menu__title {
  display: block;
}

.lumileve-mega-navigation .c-mega-menu__description {
  display: block;
  margin-block-start: var(--space-1, 0.25rem);
  color: var(--color-text-muted, #766c6d);
  font-size: var(--font-size-caption, 0.75rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-small, 1.45);
}

@media (width < 64rem) {
  .lumileve-mega-navigation > li {
    border-block-end: 0.0625rem solid var(--color-border, #e7dfdc);
  }

  .lumileve-mega-navigation .menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lumileve-mega-navigation
    .menu-item-has-children
    > .c-navigation__submenu-toggle {
    display: grid;
  }

  .lumileve-mega-navigation .sub-menu {
    grid-column: 1 / -1;
    padding-block-end: var(--space-2, 0.5rem);
    padding-inline-start: var(--space-4, 1rem);
  }

  .lumileve-mega-navigation .sub-menu .sub-menu {
    padding-inline-start: var(--space-5, 1.25rem);
  }

  .lumileve-mega-navigation .sub-menu a {
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
  }

  .lumileve-mega-navigation .menu-item--mega-column > a {
    display: block;
    padding-block: var(--space-3, 0.75rem);
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-bold, 700);
  }

  .has-js .lumileve-mega-navigation .sub-menu[hidden] {
    display: none;
  }
}

@media (width >= 64rem) {
  /* stylelint-disable no-descending-specificity -- The native WordPress menu tree requires state selectors before layout variants. */
  .lumileve-mega-navigation {
    display: flex;
    gap: var(--space-1, 0.25rem);
    align-items: center;
  }

  .lumileve-mega-navigation > .menu-item-has-children {
    display: flex;
    align-self: stretch;
    align-items: center;
  }

  .lumileve-mega-navigation > .menu-item-has-children > a {
    block-size: 100%;
    padding-inline-end: var(--space-1, 0.25rem);
  }

  .lumileve-mega-navigation
    > .menu-item-has-children
    > .c-navigation__submenu-toggle {
    display: grid;
    block-size: 100%;
  }

  .lumileve-mega-navigation .sub-menu {
    position: absolute;
    z-index: var(--z-dropdown, 30);
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: 15rem;
    padding: var(--space-2, 0.5rem);
    border: 0.0625rem solid var(--color-border, #e7dfdc);
    border-radius: var(--radius-md, 0.75rem);
    visibility: hidden;
    pointer-events: none;
    background: var(--color-surface, #fffefd);
    box-shadow: var(--shadow-popover, 0 1rem 2.75rem rgb(74 53 57 / 12%));
    opacity: 0;
    transform: translateY(-0.375rem);
    transition:
      opacity 120ms cubic-bezier(0.2, 0, 0, 1),
      visibility 120ms cubic-bezier(0.2, 0, 0, 1),
      transform 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  .lumileve-mega-navigation
    .menu-item-has-children:focus-within
    > .sub-menu,
  .lumileve-mega-navigation
    .menu-item-has-children.is-open
    > .sub-menu,
  html:not(.has-js)
    .lumileve-mega-navigation
    .menu-item-has-children:hover
    > .sub-menu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }

  .lumileve-mega-navigation > .menu-item--mega {
    position: static;
  }

  .lumileve-mega-navigation > .menu-item--mega > .sub-menu {
    inset-inline-start: 50%;
    display: grid;
    inline-size: min(calc(100vw - (2 * var(--container-gutter, 2rem))), 63.75rem);
    min-inline-size: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
    padding: 1.5rem 0.9375rem;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    transform: translate(-50%, -0.375rem);
  }

  .lumileve-mega-navigation
    > .menu-item--mega:focus-within
    > .sub-menu,
  .lumileve-mega-navigation
    > .menu-item--mega.is-open
    > .sub-menu,
  html:not(.has-js)
    .lumileve-mega-navigation
    > .menu-item--mega:hover
    > .sub-menu {
    transform: translate(-50%, 0);
  }

  .lumileve-mega-navigation .menu-item--mega-column {
    position: static;
    display: block;
    min-inline-size: 0;
  }

  .lumileve-mega-navigation .menu-item--mega-column > a {
    display: block;
    min-block-size: 0;
    padding: 0;
    font-size: clamp(1.5rem, 2.25vw, 2rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
  }

  .lumileve-mega-navigation
    .menu-item--mega-column
    > .c-navigation__submenu-toggle,
  .lumileve-mega-navigation
    .menu-item--mega-section
    > .c-navigation__submenu-toggle {
    display: none;
  }

  .lumileve-mega-navigation .menu-item--mega-column > .sub-menu,
  .lumileve-mega-navigation .menu-item--mega-section > .sub-menu {
    position: static;
    display: block;
    min-inline-size: 0;
    margin-block-start: var(--space-2, 0.5rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .lumileve-mega-navigation .menu-item--mega-column > .sub-menu a,
  .lumileve-mega-navigation .menu-item--mega-section > .sub-menu a {
    min-block-size: 2.25rem;
    padding: var(--space-1, 0.25rem) 0;
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
  }

  .lumileve-mega-navigation .menu-item--mega-promo {
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.75rem);
    background: var(--color-brand-050, #f8eeee);
  }

  .lumileve-mega-navigation .menu-item--mega-overview {
    grid-column: 1 / -1;
    border-block-start: 0.0625rem solid var(--color-border, #e7dfdc);
  }

  .lumileve-mega-navigation .menu-item--mega-overview > a {
    min-block-size: var(--touch-target, 2.75rem);
    padding: var(--space-3, 0.75rem) 0 0;
    justify-content: flex-end;
    color: var(--color-brand, #8d4856);
    font-size: var(--font-size-small, 0.875rem);
  }

  .lumileve-mega-navigation .c-mega-menu__media {
    display: block;
    margin-block-end: 0.625rem;
    aspect-ratio: 19 / 25;
    border-radius: 0;
  }

  .lumileve-mega-navigation
    > .menu-item--mega--shop
    > .sub-menu {
    display: block;
    block-size: 31.25rem;
    padding: 1.875rem 0 1.875rem 1.875rem;
    column-count: 4;
    column-fill: auto;
    column-gap: 1.875rem;
  }

  .lumileve-mega-navigation .menu-item--mega-section {
    display: inline-block;
    inline-size: 100%;
    margin-block-end: 0.5rem;
    break-inside: avoid;
  }

  .lumileve-mega-navigation .menu-item--mega-section > a {
    display: block;
    min-block-size: 0;
    padding: 0 0 0.75rem;
    color: var(--color-text, #292324);
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.5;
    text-transform: uppercase;
  }

  .lumileve-mega-navigation .menu-item--mega-section > a::after {
    display: block;
    inline-size: 6.25rem;
    block-size: 0.25rem;
    margin-block-start: 0.375rem;
    background: var(--color-brand-200, #ddc8cb);
    content: "";
  }

  .lumileve-mega-navigation
    .menu-item--mega-section--accent
    > a {
    color: var(--color-brand, #8d4856);
  }

  .lumileve-mega-navigation
    .menu-item--mega-section--accent
    > a::after {
    background: var(--color-brand, #8d4856);
  }

  .lumileve-mega-navigation .menu-item--mega-section > .sub-menu {
    margin-block-start: 0;
  }

  .lumileve-mega-navigation .menu-item--mega-section > .sub-menu a {
    min-block-size: 1.75rem;
    padding: 0.1875rem 0;
    line-height: 1.4;
  }

  /* stylelint-enable no-descending-specificity */
}

@media (prefers-reduced-motion: reduce) {
  .lumileve-mega-navigation .sub-menu,
  .lumileve-mega-navigation .c-mega-menu__image,
  .lumileve-mega-navigation .c-navigation__submenu-toggle .c-icon {
    transition: none;
  }
}