/* =========================================================
   MICRORETAILX — PREMIUM NAVIGATION V2
   Centered floating desktop panels + full-screen mobile sheets.
   Loaded after the existing navigation styles as the final visual layer.
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP — centered, quieter and more deliberate
   --------------------------------------------------------- */
@media (min-width:1101px){
  #mx-header .verticals-menu,
  #mx-header .info-menu{
    position:fixed !important;
    top:calc(var(--mx-header-bottom) + 12px) !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;

    width:min(1120px, calc(100vw - 56px)) !important;
    max-width:1120px !important;
    min-height:0 !important;

    padding:0 !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:18px !important;

    background:
      radial-gradient(900px 220px at 50% -40%, rgba(255,255,255,.055), transparent 66%),
      rgba(4,4,4,.965) !important;

    box-shadow:
      0 34px 100px rgba(0,0,0,.68),
      inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:blur(24px) saturate(112%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(112%) !important;

    overflow:hidden !important;

    transform:translate(-50%, -8px) scale(.992) !important;
    transform-origin:top center !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transition:
      opacity 190ms ease,
      transform 220ms cubic-bezier(.2,.8,.2,1),
      visibility 190ms ease !important;
  }

  #mx-header .verticals.is-open > .verticals-menu,
  #mx-header .info-dropdown.is-open > .info-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(-50%, 0) scale(1) !important;
  }

  #mx-header .verticals-menu{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  #mx-header .info-menu{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  #mx-header .verticals-menu .v-item,
  #mx-header .verticals-menu .v-item:first-child,
  #mx-header .info-menu .v-item,
  #mx-header .info-menu .v-item:first-child{
    position:relative !important;
    min-height:174px !important;
    margin:0 !important;
    padding:30px 24px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    text-decoration:none !important;
    transform:none !important;

    transition:
      background 190ms ease,
      opacity 190ms ease !important;
  }

  #mx-header .info-menu .v-item{
    min-height:160px !important;
  }

  #mx-header .verticals-menu .v-item + .v-item::before,
  #mx-header .info-menu .v-item + .v-item::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:25% !important;
    bottom:25% !important;
    width:1px !important;
    background:linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.13) 22%,
      rgba(255,255,255,.13) 78%,
      transparent
    ) !important;
  }

  #mx-header .verticals-menu .v-item:hover,
  #mx-header .verticals-menu .v-item:focus-visible,
  #mx-header .info-menu .v-item:hover,
  #mx-header .info-menu .v-item:focus-visible{
    background:
      radial-gradient(240px 120px at 50% 35%, rgba(255,255,255,.055), transparent 72%) !important;
    outline:none !important;
  }

  #mx-header .verticals-menu:has(.v-item:hover) .v-item:not(:hover),
  #mx-header .info-menu:has(.v-item:hover) .v-item:not(:hover){
    opacity:.48 !important;
  }

  #mx-header .verticals-menu .v-index,
  #mx-header .info-menu .v-index{
    margin:0 0 14px !important;
    color:rgba(255,255,255,.28) !important;
    font-size:8px !important;
    font-weight:650 !important;
    line-height:1 !important;
    letter-spacing:.22em !important;
    text-align:center !important;
  }

  #mx-header .verticals-menu .v-main,
  #mx-header .info-menu .v-main{
    width:100% !important;
    color:rgba(255,255,255,.96) !important;
    font-size:clamp(14px,1vw,17px) !important;
    font-weight:760 !important;
    line-height:1.1 !important;
    letter-spacing:.19em !important;
    text-align:center !important;
    text-transform:uppercase !important;
    transform:none !important;

    transition:
      color 190ms ease,
      transform 220ms cubic-bezier(.2,.8,.2,1),
      letter-spacing 190ms ease !important;
  }

  #mx-header .verticals-menu .v-sub{
    width:100% !important;
    margin-top:9px !important;
    color:rgba(255,255,255,.40) !important;
    font-size:8.5px !important;
    font-weight:550 !important;
    line-height:1.15 !important;
    letter-spacing:.20em !important;
    text-align:center !important;
    text-transform:uppercase !important;
  }

  #mx-header .verticals-menu .v-item:hover .v-main,
  #mx-header .verticals-menu .v-item:focus-visible .v-main,
  #mx-header .info-menu .v-item:hover .v-main,
  #mx-header .info-menu .v-item:focus-visible .v-main{
    transform:translateY(-2px) !important;
    letter-spacing:.215em !important;
  }

  #mx-header .verticals-menu .v-item:hover .v-index,
  #mx-header .info-menu .v-item:hover .v-index{
    color:rgba(255,255,255,.62) !important;
  }

  #mx-header .verticals-menu .v-item:hover .v-sub{
    color:rgba(255,255,255,.66) !important;
  }

  /* Arabic joins naturally; Chinese keeps restrained spacing. */
  html[lang="ar"] #mx-header .verticals-menu .v-main,
  html[lang="ar"] #mx-header .verticals-menu .v-sub,
  html[lang="ar"] #mx-header .info-menu .v-main{
    letter-spacing:0 !important;
    line-height:1.35 !important;
  }

  html[lang="zh"] #mx-header .verticals-menu .v-main,
  html[lang="zh"] #mx-header .verticals-menu .v-sub,
  html[lang="zh"] #mx-header .info-menu .v-main{
    letter-spacing:.07em !important;
    line-height:1.3 !important;
  }
}


/* ---------------------------------------------------------
   MOBILE — full viewport sheet below the live header
   --------------------------------------------------------- */
@media (max-width:760px){
  body.mx-sheet-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  /* INFO + VERTICALS become true full-screen navigation surfaces. */
  #mx-header .nav-dropdown.is-open > .nav-dropdown-menu,
  #mx-header .verticals.is-open > .verticals-menu,
  #mx-header .info-dropdown.is-open > .info-menu{
    position:fixed !important;
    z-index:60000 !important;

    top:var(--mx-header-bottom) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:
      clamp(18px,4.5dvh,34px)
      18px
      calc(22px + env(safe-area-inset-bottom)) !important;

    border:0 !important;
    border-top:1px solid rgba(255,255,255,.09) !important;
    border-radius:0 !important;

    background:
      radial-gradient(700px 360px at 50% 0%, rgba(255,255,255,.055), transparent 68%),
      rgba(2,2,2,.988) !important;

    box-shadow:none !important;
    backdrop-filter:blur(24px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(110%) !important;

    overflow-y:auto !important;
    overscroll-behavior:contain !important;

    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #mx-header .verticals.is-open > .verticals-menu{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
  }

  #mx-header .info-dropdown.is-open > .info-menu{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
  }

  #mx-header .verticals-menu .v-item,
  #mx-header .info-menu .v-item{
    position:relative !important;
    min-height:0 !important;
    margin:0 !important;
    padding:18px 14px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    text-align:center !important;
  }

  #mx-header .verticals-menu .v-item + .v-item,
  #mx-header .info-menu .v-item + .v-item{
    border-top:1px solid rgba(255,255,255,.075) !important;
    border-left:0 !important;
  }

  #mx-header .verticals-menu .v-index,
  #mx-header .info-menu .v-index{
    margin-bottom:10px !important;
    color:rgba(255,255,255,.28) !important;
    font-size:8px !important;
    letter-spacing:.18em !important;
    text-align:center !important;
  }

  #mx-header .verticals-menu .v-main,
  #mx-header .info-menu .v-main{
    width:100% !important;
    color:#fff !important;
    font-size:clamp(15px,4.4vw,19px) !important;
    font-weight:760 !important;
    line-height:1.15 !important;
    letter-spacing:.17em !important;
    text-align:center !important;
  }

  #mx-header .verticals-menu .v-sub{
    width:100% !important;
    margin-top:8px !important;
    color:rgba(255,255,255,.42) !important;
    font-size:9px !important;
    letter-spacing:.16em !important;
    text-align:center !important;
  }

  html[lang="ar"] #mx-header .verticals-menu .v-main,
  html[lang="ar"] #mx-header .verticals-menu .v-sub,
  html[lang="ar"] #mx-header .info-menu .v-main{
    letter-spacing:0 !important;
    line-height:1.45 !important;
  }

  html[lang="zh"] #mx-header .verticals-menu .v-main,
  html[lang="zh"] #mx-header .verticals-menu .v-sub,
  html[lang="zh"] #mx-header .info-menu .v-main{
    letter-spacing:.06em !important;
    line-height:1.35 !important;
  }

  /* Languages use the same full-screen surface, with touch-friendly cards. */
  #lang-switch.is-open > #lang-rail{
    position:fixed !important;
    z-index:60000 !important;

    top:var(--mx-header-bottom) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:
      clamp(22px,5dvh,38px)
      18px
      calc(24px + env(safe-area-inset-bottom)) !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(74px,1fr) !important;
    gap:10px !important;

    border:0 !important;
    border-top:1px solid rgba(255,255,255,.09) !important;
    border-radius:0 !important;

    background:
      radial-gradient(700px 360px at 50% 0%, rgba(255,255,255,.055), transparent 68%),
      rgba(2,2,2,.988) !important;

    box-shadow:none !important;
    backdrop-filter:blur(24px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(110%) !important;

    overflow-y:auto !important;
    overscroll-behavior:contain !important;

    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill{
    position:relative !important;
    min-width:0 !important;
    min-height:74px !important;
    height:auto !important;
    margin:0 !important;
    padding:14px 12px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.025) !important;

    color:#fff !important;
    opacity:1 !important;
    transform:none !important;

    transition:
      background 150ms ease,
      border-color 150ms ease,
      transform 120ms ease !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill:hover,
  #lang-switch.is-open #lang-rail .lang-pill:focus-visible{
    background:rgba(255,255,255,.065) !important;
    border-color:rgba(255,255,255,.20) !important;
    outline:none !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill:active{
    transform:scale(.975) !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill-code{
    color:#fff !important;
    font-size:14px !important;
    font-weight:760 !important;
    line-height:1 !important;
    letter-spacing:.16em !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill::after{
    content:attr(data-label) !important;
    position:static !important;
    display:block !important;

    max-width:100% !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;

    color:rgba(255,255,255,.48) !important;
    font-size:9px !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    letter-spacing:.035em !important;
    text-transform:none !important;
    text-align:center !important;
    white-space:normal !important;

    opacity:1 !important;
    transform:none !important;
    pointer-events:none !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }

  html[lang="ar"] #lang-switch.is-open #lang-rail .lang-pill-code,
  #lang-switch.is-open #lang-rail .lang-pill[lang="ar"]::after{
    letter-spacing:0 !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill[lang="zh"]::after{
    letter-spacing:.02em !important;
  }
}


/* =========================================================
   INFO > VERTICALS SUBMENU
   Deliberately scoped: no changes to the base dropdown system.
   ========================================================= */
@media (min-width:1101px){
  #mx-header .info-menu .info-verticals-entry{
    position:relative !important;
  }

  #mx-header .info-menu .info-verticals-entry::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:18px;
    width:7px;
    height:7px;
    border-right:1px solid rgba(255,255,255,.42);
    border-bottom:1px solid rgba(255,255,255,.42);
    transform:translateX(-50%) rotate(45deg);
    opacity:.58;
    transition:transform 180ms ease, opacity 180ms ease;
  }

  #mx-header .info-menu .info-verticals-entry.is-active{
    background:
      radial-gradient(260px 120px at 50% 42%, rgba(255,255,255,.065), transparent 72%) !important;
  }

  #mx-header .info-menu .info-verticals-entry.is-active::after{
    transform:translateX(-50%) rotate(225deg);
    opacity:.95;
  }

  #mx-header .verticals-proxy.is-open > .verticals-menu{
    top:calc(var(--mx-info-bottom, var(--mx-header-bottom)) + 8px) !important;
    width:min(980px, calc(100vw - 96px)) !important;
    max-width:980px !important;
    min-height:0 !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:15px !important;

    background:
      linear-gradient(
        112deg,
        rgba(255,255,255,.075) 0%,
        rgba(255,255,255,.018) 28%,
        rgba(255,255,255,.050) 52%,
        rgba(255,255,255,.012) 76%,
        rgba(255,255,255,.060) 100%
      ),
      rgba(4,4,4,.68) !important;

    box-shadow:
      0 24px 70px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.10) !important;

    backdrop-filter:blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(135%) !important;

    overflow:hidden !important;
  }

  #mx-header .verticals-proxy.is-open > .verticals-menu::after{
    content:"";
    position:absolute;
    z-index:3;
    top:-45%;
    bottom:-45%;
    width:28%;
    left:-34%;
    pointer-events:none;
    transform:skewX(-18deg);
    background:linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.04),
      rgba(255,255,255,.18),
      rgba(255,255,255,.04),
      transparent
    );
    animation:mxChromePass 780ms cubic-bezier(.16,1,.3,1) 1 both;
  }

  #mx-header .verticals-proxy .verticals-menu .v-item,
  #mx-header .verticals-proxy .verticals-menu .v-item:first-child{
    min-height:104px !important;
    padding:20px 22px !important;
    background:rgba(0,0,0,.04) !important;
  }

  #mx-header .verticals-proxy .verticals-menu .v-main{
    order:2;
    margin-top:8px !important;
    color:rgba(255,255,255,.42) !important;
    font-size:8px !important;
    font-weight:620 !important;
    letter-spacing:.18em !important;
  }

  #mx-header .verticals-proxy .verticals-menu .v-sub{
    order:1;
    margin-top:0 !important;
    color:transparent !important;
    font-size:clamp(12px,.95vw,15px) !important;
    font-weight:760 !important;
    letter-spacing:.14em !important;
    background:linear-gradient(
      90deg,
      #f5f5f5 0%,
      #9a9a9a 30%,
      #ffffff 52%,
      #8b8b8b 74%,
      #f4f4f4 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
  }

  #mx-header .verticals-proxy .verticals-menu .v-index{
    position:absolute !important;
    top:16px !important;
    left:18px !important;
    margin:0 !important;
  }

  #mx-header .verticals-proxy .verticals-menu .v-item:hover{
    background:
      linear-gradient(115deg, rgba(255,255,255,.065), rgba(255,255,255,.012)) !important;
  }

  @keyframes mxChromePass{
    from{ left:-34%; opacity:0; }
    16%{ opacity:1; }
    to{ left:112%; opacity:0; }
  }
}

@media (prefers-reduced-motion:reduce){
  #mx-header .verticals-proxy.is-open > .verticals-menu::after{
    animation:none !important;
    display:none !important;
  }
}


/* =========================================================
   WATCH-LIKE POINTER RESPONSE
   A restrained watchOS/GARFIX-style hover: local light,
   slight magnetic lift and quick elastic return.
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (min-width:1101px){
  #mx-header .info-menu > .v-item,
  #mx-header .verticals-proxy .verticals-menu > .v-item{
    --watch-x:0px;
    --watch-y:0px;
    --watch-gx:50%;
    --watch-gy:50%;
    --watch-scale:1;

    isolation:isolate;
    overflow:hidden !important;
    will-change:transform;
    transform:
      translate3d(var(--watch-x),var(--watch-y),0)
      scale(var(--watch-scale)) !important;

    transition:
      transform 280ms cubic-bezier(.16,1,.3,1),
      box-shadow 220ms ease,
      background 220ms ease,
      opacity 190ms ease !important;
  }

  #mx-header .info-menu > .v-item::after,
  #mx-header .verticals-proxy .verticals-menu > .v-item::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:
      radial-gradient(
        180px circle at var(--watch-gx) var(--watch-gy),
        rgba(255,255,255,.145),
        rgba(255,255,255,.052) 30%,
        rgba(255,255,255,.012) 55%,
        transparent 74%
      );
    transition:opacity 180ms ease;
  }

  #mx-header .info-menu > .v-item:hover,
  #mx-header .info-menu > .v-item:focus-visible,
  #mx-header .verticals-proxy .verticals-menu > .v-item:hover,
  #mx-header .verticals-proxy .verticals-menu > .v-item:focus-visible{
    --watch-scale:1.018;
    z-index:4;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -1px 0 rgba(255,255,255,.035),
      0 14px 34px rgba(0,0,0,.28) !important;
  }

  #mx-header .info-menu > .v-item:hover::after,
  #mx-header .info-menu > .v-item:focus-visible::after,
  #mx-header .verticals-proxy .verticals-menu > .v-item:hover::after,
  #mx-header .verticals-proxy .verticals-menu > .v-item:focus-visible::after{
    opacity:1;
  }

  #mx-header .info-menu > .v-item:active,
  #mx-header .verticals-proxy .verticals-menu > .v-item:active{
    --watch-scale:.985;
    transition-duration:90ms !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #mx-header .info-menu > .v-item,
  #mx-header .verticals-proxy .verticals-menu > .v-item{
    --watch-x:0px !important;
    --watch-y:0px !important;
    --watch-scale:1 !important;
    transform:none !important;
  }
}


/* Keep the mobile language name above the animated flag layer. */
@media (max-width:760px){
  #lang-switch.is-open #lang-rail .lang-pill::after{
    position:relative !important;
    z-index:2 !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.94),
      0 0 8px rgba(0,0,0,.68);
  }

}