/* ---- New main menu (Lagom menu "CMS - Website Main Menu 2026", top items carry class alx-mm) ----
   Desktop hover panels: text-only links with a hover highlight + arrow, and a feature card
   (real photo, title, text, link) built from the item's Lagom "dropdown description" + "dropdown graphic". */
@media (min-width:992px){
  .app-nav-menu li.alx-mm > .dropdown-menu{border:0;border-radius:20px;padding:0;overflow:hidden;box-shadow:0 0 0 1px rgba(16,24,40,.06), var(--ui-block-shadow)}
  .app-nav-menu li.alx-mm > .dropdown-menu > .dropdown-menu-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:stretch;padding:0;gap:0}
  .app-nav-menu li.alx-mm .dropdown-menu-content{padding:28px 28px 24px;min-width:0}
  .app-nav-menu li.alx-mm .dropdown-menu-parent{padding:0;margin:0}
  .app-nav-menu li.alx-mm .dropdown-menu-parent + .dropdown-menu-parent{margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-lighter-4,#EFEFF1)}
  .app-nav-menu li.alx-mm .nav-header{padding:0 14px;margin:0 0 10px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-primary,#1062fe)}
  .app-nav-menu li.alx-mm .dropdown-menu-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 8px;margin:0;padding:0}
  .app-nav-menu li.alx-mm .dropdown-menu-list{display:contents}
  .app-nav-menu li.alx-mm .dropdown-menu-item{margin:0;padding:0;width:auto}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a > svg,.app-nav-menu li.alx-mm .dropdown-menu-item > a > img,.app-nav-menu li.alx-mm .dropdown-menu-item > a > i{display:none}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a{position:relative;display:flex;align-items:flex-start;padding:12px 40px 12px 14px;border-radius:14px;transition:background-color .2s ease}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--brand-primary,#1062fe);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a:hover,.app-nav-menu li.alx-mm .dropdown-menu-item > a:focus-visible{background:var(--gray-faded,#F7F7F8)}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a:hover::after,.app-nav-menu li.alx-mm .dropdown-menu-item > a:focus-visible::after{opacity:1;transform:none}
  .app-nav-menu li.alx-mm .menu-item-content{display:flex;flex-direction:column;gap:3px;margin:0}
  .app-nav-menu li.alx-mm .menu-item-title{font-size:16px;line-height:22px;font-weight:600;color:var(--text-heading-color,#17191C);transition:color .2s ease}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a:hover .menu-item-title{color:var(--brand-primary,#1062fe)}
  .app-nav-menu li.alx-mm .menu-item-desc{font-size:14px;line-height:20px;color:var(--text-lighter-color,#979BA4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* lists without descriptions (domain extensions): compact 3-up chips */
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .dropdown-menu-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .dropdown-menu-item > a{padding:9px 36px 9px 14px}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .menu-item-title{font-size:15px}
  /* feature card */
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{display:flex;margin:0;padding:16px;background:var(--gray-faded,#F7F7F8);border:0;border-radius:0;width:auto;max-width:none}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-content{display:flex;flex-direction:column;gap:14px;padding:0;margin:0;background:none;border:0;width:100%}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic{margin:0;width:100%}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic img{display:block!important;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:14px}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{display:flex;flex-direction:column;gap:6px;padding:0 4px 4px;margin:0;color:var(--text-body-color,#5E636E);font-size:14px;line-height:21px}
  .app-nav-menu li.alx-mm .alx-mm-feat-title{font-size:17px;line-height:24px;font-weight:700;color:var(--text-heading-color,#17191C)}
  .app-nav-menu li.alx-mm .alx-mm-feat-link{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand-primary,#1062fe);text-decoration:none}
  .app-nav-menu li.alx-mm .alx-mm-feat-link::after{content:"\2192";transition:transform .2s ease}
  .app-nav-menu li.alx-mm .alx-mm-feat-link:hover{text-decoration:none}
  .app-nav-menu li.alx-mm .alx-mm-feat-link:hover::after{transform:translateX(4px)}
  html.lagom-dark-mode .app-nav-menu li.alx-mm > .dropdown-menu{box-shadow:0 0 0 1px rgba(255,255,255,.06), var(--ui-block-shadow)}
  @media (prefers-reduced-motion:no-preference){
    .app-nav-menu li.alx-mm.open > .dropdown-menu,.app-nav-menu li.alx-mm:hover > .dropdown-menu{animation:alx-mm-in .22s cubic-bezier(.2,.7,.2,1)}
  }
  /* Lagom's own mega-menu rules are more specific (flex rows, fixed widths): override the layout properties explicitly */
  .app-nav-menu li.alx-mm > .dropdown-menu > .dropdown-menu-body{display:grid!important;width:auto!important}
  .app-nav-menu li.alx-mm .dropdown-menu-content{display:block!important;width:auto!important;flex:none!important;max-width:none!important}
  .app-nav-menu li.alx-mm .dropdown-menu-parent{display:block!important;width:auto!important;flex:none!important;max-width:none!important}
  .app-nav-menu li.alx-mm .dropdown-menu-cols{display:grid!important;width:auto!important;flex:none!important}
  .app-nav-menu li.alx-mm .dropdown-menu-item{display:block!important;width:auto!important;max-width:none!important;flex:none!important}
  .app-nav-menu li.alx-mm .menu-item-content,.app-nav-menu li.alx-mm .menu-item-title,.app-nav-menu li.alx-mm .menu-item-desc{white-space:normal!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{width:auto!important;flex:none!important;align-self:stretch}
  .app-nav-menu li.alx-mm .nav-header,.app-nav-menu li.alx-mm .nav-header *{font-size:12px!important;line-height:16px!important;letter-spacing:.08em!important;font-weight:600!important;color:var(--brand-primary,#1062fe)!important;padding:0!important;margin:0!important}
  .app-nav-menu li.alx-mm .nav-header{padding:0 14px!important;margin:0 0 8px!important}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a{padding:11px 40px 11px 14px!important;margin:0!important;min-height:0!important}
  .app-nav-menu li.alx-mm .menu-item-desc{margin:0!important;padding:0!important}
  .app-nav-menu li.alx-mm .menu-item-title{margin:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{padding:20px!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-content{padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;height:auto!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{padding:0 2px!important;margin:0!important;max-width:none!important}
  /* extension chips: keep "name + badge" on one line in the 5-across grid */
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .dropdown-menu-item > a{padding:9px 22px 9px 12px!important}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .dropdown-menu-item > a::after{right:6px;width:13px;height:13px;margin-top:-6.5px}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .menu-item-content,.app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .menu-item-title{white-space:nowrap!important;flex-direction:row;align-items:center;gap:6px}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:not(:has(.menu-item-desc)) .label{margin-left:4px;font-size:10px;padding:2px 6px}
  /* tight panel: no outer padding, feature card fills top, bottom and right edges */
  .app-nav-menu li.alx-mm > .dropdown-menu{padding:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-content{padding:20px 24px 18px!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{padding:16px!important;margin:0!important;border-radius:0 20px 20px 0!important;align-self:stretch!important}
  .app-nav-menu li.alx-mm .dropdown-menu-parent + .dropdown-menu-parent{margin-top:12px!important;padding-top:12px!important}
  .app-nav-menu li.alx-mm .menu-item-content{margin:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-parent:has(.menu-item-desc) .dropdown-menu-item > a{padding:9px 36px 9px 14px!important}
  /* feature card = full-bleed photo with the text over it; it follows the height of the links, never sets it */
  .app-nav-menu li.alx-mm > .dropdown-menu > .dropdown-menu-body{min-height:236px}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{position:relative!important;padding:0!important;overflow:hidden!important;background:#0b1220!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-content{position:absolute!important;inset:0!important;display:block!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic{position:absolute!important;inset:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;border-radius:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{position:absolute!important;left:0;right:0;bottom:0;padding:56px 22px 20px!important;background:linear-gradient(180deg,rgba(9,12,22,0) 0%,rgba(9,12,22,.72) 45%,rgba(9,12,22,.9) 100%);color:rgba(255,255,255,.85)!important;gap:4px!important}
  .app-nav-menu li.alx-mm .alx-mm-feat-title{color:#fff!important}
  .app-nav-menu li.alx-mm .alx-mm-feat-link{color:#fff!important;margin-top:4px}
  .app-nav-menu li.alx-mm .alx-mm-feat-link:hover{color:#fff!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-content,.app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic,.app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{width:auto!important;max-width:none!important;right:0!important;left:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-graphic img{max-width:none!important;max-height:none!important}
  /* panel sits straight under the header bar (no gap), square top corners */
  .app-nav-menu li.alx-mm > .dropdown-menu{top:100%!important;margin-top:0!important;border-radius:0 0 20px 20px!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{border-radius:0 0 20px 0!important}
  /* photo fade follows the theme: white fade + dark text in light mode, dark fade + white text in dark mode */
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{background:#fff!important}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.88) 42%,#fff 100%)!important;color:var(--text-body-color,#5E636E)!important}
  .app-nav-menu li.alx-mm .alx-mm-feat-title{color:var(--text-heading-color,#17191C)!important}
  .app-nav-menu li.alx-mm .alx-mm-feat-link,.app-nav-menu li.alx-mm .alx-mm-feat-link:hover{color:var(--brand-primary,#1062fe)!important}
  /* light mode: brand-blue fade with white text (Allan) */
  html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .dropdown-menu-sidebar{background:var(--brand-primary,#1062fe)!important}
  html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{background:linear-gradient(180deg,rgba(16,98,254,0) 0%,rgba(16,98,254,.78) 45%,rgba(10,68,194,.95) 100%)!important;color:rgba(255,255,255,.9)!important}
  @supports (background:color-mix(in srgb,red 10%,white)){
    html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-primary,#1062fe) 0%,transparent) 0%,color-mix(in srgb,var(--brand-primary,#1062fe) 78%,transparent) 45%,color-mix(in srgb,var(--brand-primary,#1062fe) 90%,#000) 100%)!important}
  }
  html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .alx-mm-feat-title,html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .alx-mm-feat-link,html:not(.lagom-dark-mode) .app-nav-menu li.alx-mm .alx-mm-feat-link:hover{color:#fff!important}
  html.lagom-dark-mode .app-nav-menu li.alx-mm .dropdown-menu-sidebar{background:#0b1220!important}
  html.lagom-dark-mode .app-nav-menu li.alx-mm .dropdown-menu-sidebar-desc{background:linear-gradient(180deg,rgba(9,12,22,0) 0%,rgba(9,12,22,.72) 45%,rgba(9,12,22,.9) 100%)!important;color:rgba(255,255,255,.85)!important}
  html.lagom-dark-mode .app-nav-menu li.alx-mm .alx-mm-feat-title,html.lagom-dark-mode .app-nav-menu li.alx-mm .alx-mm-feat-link,html.lagom-dark-mode .app-nav-menu li.alx-mm .alx-mm-feat-link:hover{color:#fff!important}
  /* lighter, tighter native Lagom shadow (Allan: shadow spread too much) */
  .app-nav-menu li.alx-mm > .dropdown-menu{box-shadow:var(--box-shadow-sm,0 0 1px rgba(0,0,0,.1),0 2px 16px rgba(0,0,0,.08))!important}
  @keyframes alx-mm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* Phones and tablets: text-only rows, no feature card */
@media (max-width:991.98px){
  /* phones: small Lagom icon in front of each item (Allan) */
  .app-nav-menu li.alx-mm .dropdown-menu-item > a{display:flex!important;align-items:center;gap:12px}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a > svg,.app-nav-menu li.alx-mm .dropdown-menu-item > a > img{display:block!important;flex:0 0 22px;width:22px!important;height:22px!important;margin:0!important}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a > i{display:inline-flex!important;flex:0 0 22px;width:22px;justify-content:center;font-size:18px;margin:0!important;color:var(--brand-primary,#1062fe)}
  .app-nav-menu li.alx-mm .dropdown-menu-sidebar{display:none}
  .app-nav-menu li.alx-mm .menu-item-desc{display:none}
  /* phones: compact rows, no dropdown heading (Allan) */
  .app-nav-menu li.alx-mm .nav-header{display:none!important}
  .app-nav-menu li.alx-mm .dropdown-menu-item > a{padding:7px 16px!important;min-height:0!important}
  .app-nav-menu li.alx-mm .menu-item-content{margin:0!important;padding:0!important}
  .app-nav-menu li.alx-mm .menu-item-title,.app-nav-menu li.alx-mm .dropdown-menu-item > a{font-size:16px!important;line-height:22px!important;font-weight:500!important}
}

/* Header bar (desktop + phone) uses Lagom's small shadow too, only while the new menu is active (Allan) */
.app-nav:has(li.alx-mm),.app-nav:has(li.alx-mm) .app-nav-header,.app-nav:has(li.alx-mm) .app-nav-menu{--app-nav-top-box-shadow:var(--box-shadow-sm);--mob-app-nav-header-box-shadow:var(--box-shadow-sm);--mob-dropdown-nav-box-shadow:var(--box-shadow-sm)}
@media (min-width:992px){ .app-nav.sticky-navigation:has(li.alx-mm){box-shadow:var(--box-shadow-sm)!important} }
@media (max-width:991.98px){
  .app-nav:has(li.alx-mm) .app-nav-header,.app-nav:has(li.alx-mm) .app-nav-menu{box-shadow:var(--box-shadow-sm)!important}
}

/* Allan 2026-10-28: centre the main links between the logo and the right-hand buttons (desktop only) */
@media (min-width:992px){
  .app-nav-menu ul.menu-primary:has(> li.alx-mm){flex:1 1 auto;margin-left:32px!important}
  .app-nav-menu ul.menu-primary:has(> li.alx-mm) > li.alx-mm:first-child{margin-left:auto!important}
  .app-nav-menu ul.menu-primary:has(> li.alx-mm) > li:not(.is-right) + li.is-right{margin-left:auto!important}
}

/* Allan 2026-10-28: blue top strip (Help Centre / Blog / Contact / Cart) in light mode, desktop only. Lagom variables only. */
@media (min-width:992px){
  html:not(.lagom-dark-mode) .app-nav:has(li.alx-mm) .app-nav-header{
    background:var(--brand-primary);border-bottom:0!important;
    --top-nav-link-color:var(--cms-color-on-dark-2,rgba(255,255,255,.8));
    --top-nav-link-hover-color:var(--cms-color-on-dark,#fff);
    --top-nav-link-active-color:var(--cms-color-on-dark,#fff);
    --top-nav-link-icon-color:var(--cms-color-on-dark-2,rgba(255,255,255,.8));
    --top-nav-link-icon-hover-color:var(--cms-color-on-dark,#fff);
    --top-nav-link-icon-active-color:var(--cms-color-on-dark,#fff)
  }
}

/* Allan 2026-10-28: tighter footer link list. Lagom variable only (6px -> ui-padding-sm-v, 4px); not exposed in the Style Variables editor. */
body:has(li.alx-mm) .main-footer{--main-footer-link-padding-v:var(--ui-padding-sm-v)}

/* Allan 2026-10-28: taller main header bar (56px -> 72px). Condensed layout height = Lagom --app-nav-header-height (logo + spacing-4x); now logo + spacing-6x. Not in the Style Variables editor. */
@media (min-width:992px){
  .app-nav:has(li.alx-mm){--app-nav-header-height:calc(var(--app-nav-logo-height) + var(--spacing-6x))}
}