/*
 * ShopPilot categories megamenu (REHub primary desktop navigation).
 * Scoped to the known "Alle Kategorier" menu item #487; all other menus,
 * the original purple trigger and REHub's mobile off-canvas are untouched.
 *
 * Single continuous white surface: 250px first and second columns, zero gap,
 * square touching edges, purple text and chevrons, soft lavender hover only.
 */
@media (min-width: 1025px) {
  .main-nav.white_style nav.top_menu #menu-item-487 {
    --sp-mega-width: 250px;
    --sp-mega-accent: #6B3BC5;
    --sp-mega-hover: #F3EEFA;
    --sp-mega-ink: #4F2494;
  }

  /* Remove the old rounded, floating "card" treatment on all levels. */
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu {
    width: var(--sp-mega-width) !important;
    min-width: var(--sp-mega-width) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    overflow: visible !important;
    clip-path: none !important;
    transform: translateY(0) !important;
    z-index: 9999999;
  }

  /* The first column is exactly as wide as the purple trigger. */
  .main-nav.white_style nav.top_menu #menu-item-487 > ul.sub-menu {
    top: 100% !important;
    left: 0 !important;
    box-shadow: 0 18px 36px -13px rgba(39, 22, 65, .20) !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }

  /* Each subsequent column joins at x=100%, y=0: no seam or hover gap. */
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu ul.sub-menu {
    top: 0 !important;
    left: 100% !important;
    box-shadow: inset 1px 0 0 #F0EAF7, 15px 19px 32px -17px rgba(39, 22, 65, .20) !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }

  .main-nav.white_style nav.top_menu #menu-item-487:hover > ul.sub-menu,
  .main-nav.white_style nav.top_menu #menu-item-487.hovered > ul.sub-menu,
  .main-nav.white_style nav.top_menu #menu-item-487:focus-within > ul.sub-menu,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu > li:hover > ul.sub-menu,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu > li.hovered > ul.sub-menu,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu > li:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Flat white rows: no purple blocks, no individually rounded items. */
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li > a,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li.current-menu-item > a,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li.current-menu-ancestor > a,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li.current-menu-parent > a {
    display: flex !important;
    align-items: center !important;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    min-height: 49px;
    padding: 12px 17px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline-offset: -3px;
    background: #fff !important;
    background-image: none !important;
    color: var(--sp-mega-accent) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
  }

  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li > a i {
    color: var(--sp-mega-accent) !important;
    margin-right: 3px;
  }

  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li:is(:hover, .hovered, :focus-within) > a,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li.current-menu-item:hover > a,
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li > a:focus-visible {
    background: var(--sp-mega-hover) !important;
    background-image: none !important;
    color: var(--sp-mega-ink) !important;
    box-shadow: none !important;
  }

  /* Use a plain purple chevron at the far right to advertise a subcategory. */
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li.menu-item-has-children > a::before {
    content: "›" !important;
    order: 2;
    flex: 0 0 auto;
    float: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 0 0 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--sp-mega-accent) !important;
  }

  /* REHub's top-edge speech bubble arrow otherwise creates a white notch. */
  .main-nav.white_style nav.top_menu #menu-item-487 > ul.sub-menu > li:first-child > a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu a:focus-visible {
    outline: 2px solid #9F7BDA !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav.white_style nav.top_menu #menu-item-487 ul.sub-menu li > a {
    transition: none !important;
  }
}

/* Third-level perfume categories are a nested branch in column two.
 * They must NEVER become a third flyout column. */
@media (min-width: 1025px) {
  .main-nav.white_style nav.top_menu #menu-item-487 #menu-item-3190 > ul.sub-menu {
    position: static !important;
    display: block !important;
    box-sizing: border-box;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    z-index: auto !important;
  }

  /* Parent remains a normal category link; the chevron points down. */
  .main-nav.white_style nav.top_menu #menu-item-487 #menu-item-3190 > a {
    font-weight: 750 !important;
  }
  .main-nav.white_style nav.top_menu #menu-item-487 #menu-item-3190 > a::before {
    content: "⌄" !important;
    font-size: 19px !important;
  }
  .main-nav.white_style nav.top_menu #menu-item-487 #menu-item-3190 > ul.sub-menu > li > a {
    min-height: 40px !important;
    padding: 8px 18px 8px 33px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B3BC5 !important;
    border-left: 2px solid #E9DCF8 !important;
    border-radius: 0 !important;
  }
  .main-nav.white_style nav.top_menu #menu-item-487 #menu-item-3190 > ul.sub-menu > li > a:is(:hover, :focus-visible) {
    background: #F3EEFA !important;
    color: #4F2494 !important;
  }
}