/* =========================================================
   OMAX TOP GLASS MENU R1
   ========================================================= */

#omaxTopMenuButton,
#omaxTopMenuPanel{
  display:none;
}

@media(max-width:640px){

  /* Remove old bottom navigation */
  #omaxMobileFinal,
  .omaxMobileFinal,
  .bottomNav,
  .omax-bottom-nav{
    display:none!important;
  }

  main{
    padding-bottom:22px!important;
  }

  .heroBar{
    position:relative!important;
    overflow:visible!important;
    z-index:2147482000!important;
  }

  .heroState{
    gap:6px!important;
  }


  /* =======================================================
     Hamburger
     ======================================================= */

  #omaxTopMenuButton{
    width:36px;
    height:36px;

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

    gap:4px;

    padding:0;
    margin:0 0 0 1px;

    border-radius:11px;

    border:1px solid rgba(56,170,255,.40);

    background:
      linear-gradient(
        145deg,
        rgba(8,36,70,.88),
        rgba(2,12,28,.92)
      );

    box-shadow:
      inset 0 1px rgba(255,255,255,.08),
      inset 0 0 14px rgba(36,153,255,.08),
      0 0 12px rgba(29,142,255,.12);

    cursor:pointer;

    position:relative;
    z-index:2147483500;
  }

  #omaxTopMenuButton span{
    display:block;

    width:17px;
    height:1.7px;

    border-radius:3px;

    background:#65d9ff;

    box-shadow:
      0 0 5px rgba(76,205,255,.72);

    transform-origin:center;

    transition:
      transform .34s cubic-bezier(.4,0,.2,1),
      opacity .22s ease,
      width .25s ease;
  }

  #omaxTopMenuButton.open span:nth-child(1){
    transform:translateY(5.7px) rotate(45deg);
  }

  #omaxTopMenuButton.open span:nth-child(2){
    opacity:0;
    width:8px;
  }

  #omaxTopMenuButton.open span:nth-child(3){
    transform:translateY(-5.7px) rotate(-45deg);
  }


  /* =======================================================
     Drop panel
     ======================================================= */

  #omaxTopMenuPanel{
    position:fixed;

    display:block;

    width:min(330px,calc(100vw - 28px));

    opacity:0;
    visibility:hidden;

    transform:
      translateY(-14px)
      scale(.97);

    transform-origin:top right;

    transition:
      opacity .28s ease,
      transform .34s cubic-bezier(.2,.85,.2,1),
      visibility .28s;

    z-index:2147483400;

    border-radius:17px;

    border:1px solid transparent;

    background:
      linear-gradient(
        145deg,
        rgba(6,24,49,.96),
        rgba(2,8,19,.98)
      ) padding-box,

      linear-gradient(
        120deg,
        rgba(164,63,255,.92),
        rgba(75,116,255,.84) 45%,
        rgba(40,222,255,.92)
      ) border-box;

    box-shadow:
      inset 0 1px rgba(255,255,255,.10),
      inset 0 0 24px rgba(48,145,255,.06),
      -7px 0 24px rgba(165,60,255,.12),
      7px 0 24px rgba(36,210,255,.14),
      0 22px 55px rgba(0,0,0,.52);

    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);

    overflow:hidden;

    pointer-events:none;
  }

  #omaxTopMenuPanel.open{
    opacity:1;
    visibility:visible;

    transform:
      translateY(0)
      scale(1);

    pointer-events:auto;
  }


  /* glowing top edge */
  #omaxTopMenuPanel::before{
    content:"";

    position:absolute;
    top:-1px;
    left:10%;
    right:10%;
    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        #53dfff,
        #a65dff,
        transparent
      );

    box-shadow:
      0 0 12px rgba(82,211,255,.75),
      0 0 18px rgba(159,88,255,.36);

    pointer-events:none;
  }


  .omaxTopMenuHead{
    padding:15px 15px 11px;

    border-bottom:
      1px solid rgba(105,154,208,.14);
  }

  .omaxTopMenuHead b{
    display:block;

    font-size:11px;
    letter-spacing:.14em;

    color:#f3fbff;
  }

  .omaxTopMenuHead span{
    display:block;

    margin-top:4px;

    font-size:6px;
    letter-spacing:.16em;

    color:#728da9;
  }


  .omaxTopMenuList{
    padding:8px;
  }

  .omaxTopMenuItem{
    width:100%;
    height:48px;

    display:flex;
    align-items:center;

    gap:12px;

    border:0;
    outline:0;

    padding:0 12px;

    border-radius:11px;

    background:transparent;

    color:#b6c9dc;

    font:inherit;

    text-align:left;

    cursor:pointer;

    transition:
      background .2s ease,
      color .2s ease,
      transform .2s ease;
  }

  .omaxTopMenuItem + .omaxTopMenuItem{
    margin-top:2px;
  }

  .omaxTopMenuItem:active{
    transform:scale(.985);
  }

  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    background:
      linear-gradient(
        90deg,
        rgba(40,151,255,.10),
        rgba(144,68,255,.08)
      );

    color:#fff;
  }

  .omaxTopMenuIcon{
    width:30px;
    height:30px;

    min-width:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#4fd8ff;

    border:
      1px solid rgba(65,190,255,.24);

    background:
      rgba(10,39,70,.47);

    box-shadow:
      inset 0 0 12px rgba(46,179,255,.07);
  }

  .omaxTopMenuIcon svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .omaxTopMenuText b{
    display:block;

    font-size:10px;
    letter-spacing:.05em;

    color:inherit;
  }

  .omaxTopMenuText small{
    display:block;

    margin-top:2px;

    font-size:6px;
    letter-spacing:.08em;

    color:#67859f;
  }


  .omaxTopMenuItem.logout{
    margin-top:7px;

    border-top:
      1px solid rgba(111,150,190,.12);

    border-radius:0 0 10px 10px;
  }

  .omaxTopMenuItem.logout .omaxTopMenuIcon{
    color:#ff8198;

    border-color:
      rgba(255,90,118,.22);

    background:
      rgba(92,21,40,.18);
  }


  /* dark click-catcher */
  #omaxTopMenuBackdrop{
    position:fixed;
    inset:0;

    display:block;

    z-index:2147483300;

    background:
      rgba(0,5,14,.24);

    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);

    opacity:0;
    visibility:hidden;

    transition:
      opacity .25s ease,
      visibility .25s;

    pointer-events:none;
  }

  #omaxTopMenuBackdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

}

/* =========================================================
   OMAX TOP MENU GLASS CENTER DROP R2
   ========================================================= */

@media(max-width:640px){

  /* -------------------------------------------------------
     panel position:
     centered under top card, not aligned to right edge
     ------------------------------------------------------- */

  #omaxTopMenuPanel{
    left:50%!important;
    right:auto!important;

    width:calc(100vw - 38px)!important;
    max-width:650px!important;

    transform:
      translateX(-50%)
      translateY(-22px)
      scaleY(.78)
      scaleX(.96)!important;

    transform-origin:
      center top!important;

    opacity:0!important;

    border-radius:0 0 22px 22px!important;

    border:
      1px solid rgba(69,190,255,.24)!important;

    border-top:
      0!important;

    background:
      linear-gradient(
        180deg,
        rgba(7,28,52,.72) 0%,
        rgba(4,21,42,.62) 44%,
        rgba(2,14,30,.72) 100%
      )!important;

    backdrop-filter:
      blur(18px)
      saturate(145%)!important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(145%)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(63,201,255,.08),
      inset 0 0 28px rgba(36,159,255,.045),
      0 16px 34px rgba(0,0,0,.28),
      0 0 22px rgba(34,175,255,.08)!important;

    overflow:hidden!important;

    transition:
      opacity .24s ease,
      transform .38s cubic-bezier(.16,.84,.22,1),
      visibility .24s ease!important;
  }


  /* OPEN STATE */
  #omaxTopMenuPanel.open{
    opacity:1!important;
    visibility:visible!important;

    transform:
      translateX(-50%)
      translateY(0)
      scaleY(1)
      scaleX(1)!important;
  }


  /* -------------------------------------------------------
     top connection edge:
     makes it look attached to the main header card
     ------------------------------------------------------- */

  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;

    top:0!important;
    left:12%!important;
    right:12%!important;

    height:1px!important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(63,205,255,.28),
        rgba(132,88,255,.20),
        rgba(63,205,255,.28),
        transparent
      )!important;

    box-shadow:
      0 0 10px rgba(59,193,255,.24)!important;

    opacity:.85!important;
  }


  /* -------------------------------------------------------
     glass highlight
     ------------------------------------------------------- */

  #omaxTopMenuPanel::after{
    content:""!important;

    position:absolute!important;

    inset:0!important;

    pointer-events:none!important;

    background:
      linear-gradient(
        115deg,
        rgba(255,255,255,.035),
        transparent 24%,
        transparent 74%,
        rgba(82,204,255,.025)
      )!important;

    opacity:.9!important;
  }


  /* -------------------------------------------------------
     header inside panel
     ------------------------------------------------------- */

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    padding:
      20px 20px 14px!important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.025),
        transparent
      )!important;

    border-bottom:
      1px solid rgba(95,165,216,.12)!important;
  }

  .omaxTopMenuHead b{
    font-size:12px!important;
    letter-spacing:.16em!important;

    color:#ecfaff!important;
  }

  .omaxTopMenuHead span{
    margin-top:5px!important;

    font-size:6px!important;
    letter-spacing:.20em!important;

    color:#7390a8!important;
  }


  /* -------------------------------------------------------
     menu body
     ------------------------------------------------------- */

  .omaxTopMenuList{
    position:relative!important;
    z-index:2!important;

    padding:
      11px 13px 14px!important;
  }


  .omaxTopMenuItem{
    height:54px!important;

    padding:
      0 12px!important;

    border-radius:13px!important;

    background:
      rgba(7,29,53,.18)!important;

    border:
      1px solid transparent!important;

    transition:
      background .20s ease,
      border-color .20s ease,
      transform .18s ease!important;
  }


  .omaxTopMenuItem + .omaxTopMenuItem{
    margin-top:5px!important;
  }


  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    background:
      linear-gradient(
        90deg,
        rgba(32,142,228,.09),
        rgba(98,71,183,.06)
      )!important;

    border-color:
      rgba(61,185,255,.10)!important;
  }


  .omaxTopMenuItem:active{
    transform:
      scale(.988)!important;
  }


  /* -------------------------------------------------------
     icons glass style, like OMAX cards
     ------------------------------------------------------- */

  .omaxTopMenuIcon{
    width:34px!important;
    height:34px!important;

    min-width:34px!important;

    border-radius:10px!important;

    color:#52d7ff!important;

    border:
      1px solid rgba(59,193,255,.22)!important;

    background:
      linear-gradient(
        145deg,
        rgba(8,53,89,.55),
        rgba(4,27,50,.32)
      )!important;

    box-shadow:
      inset 0 0 13px rgba(40,173,255,.06),
      0 0 8px rgba(40,173,255,.05)!important;
  }


  .omaxTopMenuText b{
    font-size:11px!important;

    color:#d8e8f5!important;

    letter-spacing:.05em!important;
  }


  .omaxTopMenuText small{
    margin-top:3px!important;

    font-size:6px!important;

    color:#67839c!important;
  }


  /* -------------------------------------------------------
     logout
     ------------------------------------------------------- */

  .omaxTopMenuItem.logout{
    margin-top:10px!important;

    padding-top:4px!important;

    border-top:
      1px solid rgba(96,143,183,.10)!important;
  }

  .omaxTopMenuItem.logout .omaxTopMenuIcon{
    color:#ff8199!important;

    border-color:
      rgba(255,105,132,.16)!important;

    background:
      rgba(85,22,39,.16)!important;
  }


  /* -------------------------------------------------------
     backdrop:
     much lighter than previous version
     ------------------------------------------------------- */

  #omaxTopMenuBackdrop{
    background:
      rgba(0,8,18,.08)!important;

    backdrop-filter:
      blur(1px)!important;

    -webkit-backdrop-filter:
      blur(1px)!important;
  }


  #omaxTopMenuBackdrop.open{
    opacity:1!important;
  }

}

/* =========================================================
   OMAX TOP MENU DROP R3
   start strictly below header + faster animation
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel{
    transform:
      translateX(-50%)
      translateY(-8px)
      scaleY(.94)!important;

    transform-origin:center top!important;

    transition:
      opacity .12s ease-out,
      transform .16s cubic-bezier(.2,.8,.2,1),
      visibility .12s!important;
  }

  #omaxTopMenuPanel.open{
    transform:
      translateX(-50%)
      translateY(0)
      scaleY(1)!important;
  }

  #omaxTopMenuBackdrop{
    transition:
      opacity .12s ease-out,
      visibility .12s!important;
  }
}

/* =========================================================
   OMAX TOP MENU STYLE RESTORE R4
   CodePen-inspired floating neon window
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel{
    left:50%!important;
    right:auto!important;

    width:calc(100vw - 38px)!important;
    max-width:650px!important;

    border-radius:22px!important;

    border:1px solid transparent!important;

    background:
      linear-gradient(
        145deg,
        rgba(5,22,44,.88),
        rgba(2,12,27,.92)
      ) padding-box,

      linear-gradient(
        125deg,
        rgba(167,73,255,.96),
        rgba(79,130,255,.85) 45%,
        rgba(45,223,255,.96)
      ) border-box!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 0 28px rgba(45,170,255,.05),
      -10px 0 30px rgba(152,66,255,.16),
      10px 0 30px rgba(38,213,255,.16),
      0 24px 55px rgba(0,0,0,.42)!important;

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

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

    transform:
      translateX(-50%)
      translateY(-10px)
      scale(.985)!important;

    transform-origin:center top!important;

    opacity:0!important;

    transition:
      opacity .11s ease-out,
      transform .15s cubic-bezier(.2,.8,.2,1),
      visibility .11s!important;
  }

  #omaxTopMenuPanel.open{
    opacity:1!important;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1)!important;
  }

  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;
    top:-1px!important;
    left:8%!important;
    right:8%!important;

    height:1px!important;

    background:
      linear-gradient(
        90deg,
        transparent,
        #54ddff,
        #a95bff,
        #54ddff,
        transparent
      )!important;

    box-shadow:
      0 0 12px rgba(83,216,255,.75),
      0 0 20px rgba(165,78,255,.42)!important;
  }

  #omaxTopMenuPanel::after{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    pointer-events:none!important;

    border-radius:inherit!important;

    background:
      linear-gradient(
        120deg,
        rgba(255,255,255,.045),
        transparent 24%,
        transparent 74%,
        rgba(82,204,255,.03)
      )!important;
  }

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    padding:20px 20px 15px!important;

    border-bottom:
      1px solid rgba(112,161,210,.14)!important;
  }

  .omaxTopMenuList{
    position:relative!important;
    z-index:2!important;

    padding:11px 13px 15px!important;
  }

  .omaxTopMenuItem{
    height:54px!important;

    border-radius:13px!important;

    background:
      rgba(7,29,53,.14)!important;

    border:
      1px solid transparent!important;
  }

  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    background:
      linear-gradient(
        90deg,
        rgba(40,151,255,.10),
        rgba(144,68,255,.08)
      )!important;

    border-color:
      rgba(72,190,255,.12)!important;
  }

  .omaxTopMenuIcon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;

    border-radius:10px!important;

    background:
      linear-gradient(
        145deg,
        rgba(8,53,89,.62),
        rgba(4,27,50,.42)
      )!important;

    border:
      1px solid rgba(70,194,255,.26)!important;

    box-shadow:
      inset 0 0 13px rgba(40,173,255,.08),
      0 0 8px rgba(40,173,255,.06)!important;
  }

  #omaxTopMenuBackdrop{
    background:
      rgba(0,5,14,.14)!important;

    backdrop-filter:
      blur(2px)!important;

    -webkit-backdrop-filter:
      blur(2px)!important;
  }
}

/* =========================================================
   OMAX TOP MENU R5
   LANDING-STYLE TRUE GLASS
   ========================================================= */

@media(max-width:640px){

  /* -----------------------------------------
     DO NOT BLUR / DARKEN THE WHOLE PAGE
     ----------------------------------------- */

  #omaxTopMenuBackdrop{
    background:transparent!important;

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    opacity:0!important;
  }

  #omaxTopMenuBackdrop.open{
    background:transparent!important;
    opacity:0!important;
  }


  /* -----------------------------------------
     THE MENU CARD ITSELF IS THE GLASS
     based on OMAX landing exchange cards
     ----------------------------------------- */

  #omaxTopMenuPanel{
    border-radius:20px!important;

    border:
      1px solid rgba(79,166,255,.18)!important;

    background:
      linear-gradient(
        145deg,
        rgba(7,24,52,.38),
        rgba(2,10,24,.26)
      )!important;

    backdrop-filter:
      blur(11px)
      saturate(118%)!important;

    -webkit-backdrop-filter:
      blur(11px)
      saturate(118%)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.026),
      inset 0 0 24px rgba(25,167,255,.024),
      0 10px 30px rgba(0,0,0,.14),
      0 0 0 1px rgba(25,167,255,.035)!important;
  }


  /* soft glass light */
  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    height:auto!important;
    left:0!important;
    right:0!important;
    top:0!important;

    pointer-events:none!important;

    border-radius:inherit!important;

    background:
      radial-gradient(
        circle at 17% 5%,
        rgba(81,203,255,.085),
        transparent 35%
      ),
      radial-gradient(
        circle at 93% 92%,
        rgba(101,88,255,.065),
        transparent 38%
      )!important;

    box-shadow:none!important;
  }


  /* very subtle surface reflection */
  #omaxTopMenuPanel::after{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    border-radius:inherit!important;

    pointer-events:none!important;

    background:
      linear-gradient(
        120deg,
        rgba(255,255,255,.025),
        transparent 25%,
        transparent 75%,
        rgba(74,193,255,.018)
      )!important;
  }


  /* -----------------------------------------
     HEADER
     ----------------------------------------- */

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    background:
      rgba(3,14,29,.10)!important;

    border-bottom:
      1px solid rgba(79,166,255,.10)!important;
  }


  /* -----------------------------------------
     ITEMS ALSO GLASS, NOT SOLID BLOCKS
     ----------------------------------------- */

  .omaxTopMenuItem{
    background:
      linear-gradient(
        145deg,
        rgba(7,24,52,.20),
        rgba(2,10,24,.12)
      )!important;

    border:
      1px solid rgba(79,166,255,.055)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.012)!important;
  }


  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    background:
      linear-gradient(
        145deg,
        rgba(10,38,72,.30),
        rgba(5,18,38,.19)
      )!important;

    border-color:
      rgba(79,190,255,.13)!important;
  }


  /* -----------------------------------------
     ICON GLASS
     ----------------------------------------- */

  .omaxTopMenuIcon{
    background:
      linear-gradient(
        145deg,
        rgba(7,34,62,.36),
        rgba(2,16,33,.24)
      )!important;

    border:
      1px solid rgba(79,185,255,.18)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      inset 0 0 14px rgba(25,167,255,.028)!important;
  }


  .omaxTopMenuItem.logout .omaxTopMenuIcon{
    background:
      linear-gradient(
        145deg,
        rgba(66,19,34,.30),
        rgba(34,8,18,.20)
      )!important;

    border-color:
      rgba(255,112,139,.14)!important;
  }
}

/* =========================================================
   OMAX TOP MENU R6
   GLASS DRAWER / CLEAN ITEMS
   ========================================================= */

@media(max-width:640px){

  /* =======================================================
     WINDOW
     slides out like a drawer from under the top card
     ======================================================= */

  #omaxTopMenuPanel{
    left:50%!important;
    right:auto!important;

    width:calc(100vw - 38px)!important;
    max-width:650px!important;

    border-radius:0 0 22px 22px!important;

    border:
      1px solid rgba(74,196,255,.24)!important;

    border-top:
      1px solid rgba(122,92,255,.18)!important;

    background:
      linear-gradient(
        180deg,
        rgba(6,24,46,.20) 0%,
        rgba(3,15,32,.14) 55%,
        rgba(2,10,24,.18) 100%
      )!important;

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      inset 0 0 22px rgba(54,181,255,.025),
      0 14px 32px rgba(0,0,0,.16),
      0 0 14px rgba(46,182,255,.055)!important;

    transform:
      translateX(-50%)
      translateY(-100%)!important;

    transform-origin:center top!important;

    opacity:0!important;

    transition:
      transform .22s cubic-bezier(.22,.8,.22,1),
      opacity .12s ease-out,
      visibility .12s!important;

    overflow:hidden!important;
  }

  #omaxTopMenuPanel.open{
    transform:
      translateX(-50%)
      translateY(0)!important;

    opacity:1!important;
  }


  /* =======================================================
     WINDOW BORDER / LIGHT
     ======================================================= */

  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    pointer-events:none!important;

    border-radius:inherit!important;

    background:
      linear-gradient(
        120deg,
        rgba(154,81,255,.13),
        transparent 28%,
        transparent 72%,
        rgba(48,214,255,.12)
      )!important;

    box-shadow:
      inset 0 0 0 1px rgba(68,188,255,.045)!important;
  }

  #omaxTopMenuPanel::after{
    content:""!important;

    position:absolute!important;
    left:10%!important;
    right:10%!important;
    top:0!important;

    height:1px!important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(155,75,255,.55),
        rgba(58,215,255,.58),
        transparent
      )!important;

    box-shadow:
      0 0 8px rgba(82,205,255,.20)!important;

    pointer-events:none!important;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    background:transparent!important;

    border-bottom:
      1px solid rgba(91,168,214,.09)!important;
  }


  /* =======================================================
     MENU ITEMS
     NO BOX / NO BACKGROUND / NO BORDER
     ======================================================= */

  .omaxTopMenuItem{
    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    border-radius:0!important;

    padding-left:12px!important;
    padding-right:12px!important;
  }

  .omaxTopMenuItem + .omaxTopMenuItem{
    margin-top:0!important;
  }

  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .omaxTopMenuItem:active{
    transform:translateX(2px)!important;
  }


  /* subtle separators only */
  .omaxTopMenuItem:not(:last-child)::after{
    content:""!important;

    position:absolute!important;
    left:54px!important;
    right:12px!important;
    bottom:0!important;

    height:1px!important;

    background:
      linear-gradient(
        90deg,
        rgba(71,170,220,.07),
        transparent
      )!important;
  }

  .omaxTopMenuItem{
    position:relative!important;
  }


  /* =======================================================
     ICONS:
     keep icon glass only
     ======================================================= */

  .omaxTopMenuIcon{
    background:
      rgba(6,30,52,.20)!important;

    border:
      1px solid rgba(70,188,255,.14)!important;

    box-shadow:
      inset 0 0 10px rgba(40,170,255,.025)!important;
  }


  /* =======================================================
     BACKDROP
     completely transparent
     ======================================================= */

  #omaxTopMenuBackdrop,
  #omaxTopMenuBackdrop.open{
    background:transparent!important;

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    opacity:0!important;
  }
}

/* =========================================================
   OMAX TOP MENU R7
   TRUE UNDER-HEADER DRAWER + GRADIENT GLASS BORDER
   ========================================================= */

@media(max-width:640px){

  /* =======================================================
     MAIN DRAWER WINDOW
     ======================================================= */

  #omaxTopMenuPanel{
    left:50%!important;
    right:auto!important;

    width:calc(100vw - 38px)!important;
    max-width:650px!important;

    border:0!important;

    border-radius:0 0 22px 22px!important;

    background:
      linear-gradient(
        180deg,
        rgba(5,25,48,.18) 0%,
        rgba(3,17,35,.12) 45%,
        rgba(2,11,25,.16) 100%
      )!important;

    backdrop-filter:
      blur(7px)
      saturate(110%)!important;

    -webkit-backdrop-filter:
      blur(7px)
      saturate(110%)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      inset 0 0 22px rgba(47,188,255,.018),
      0 14px 32px rgba(0,0,0,.14)!important;


    /* IMPORTANT:
       panel stays under header.
       It does NOT move to top of screen. */
    transform:
      translateX(-50%)!important;

    transform-origin:
      center top!important;

    opacity:1!important;

    /* CLOSED DRAWER */
    clip-path:
      inset(0 0 100% 0 round 0 0 22px 22px)!important;

    -webkit-clip-path:
      inset(0 0 100% 0 round 0 0 22px 22px)!important;

    visibility:hidden!important;

    pointer-events:none!important;

    transition:
      clip-path .18s cubic-bezier(.2,.78,.24,1),
      -webkit-clip-path .18s cubic-bezier(.2,.78,.24,1),
      visibility 0s linear .18s!important;

    will-change:clip-path!important;

    overflow:hidden!important;

    z-index:2147481900!important;
  }


  /* =======================================================
     OPEN
     reveals downward from top edge
     ======================================================= */

  #omaxTopMenuPanel.open{
    clip-path:
      inset(0 0 0 0 round 0 0 22px 22px)!important;

    -webkit-clip-path:
      inset(0 0 0 0 round 0 0 22px 22px)!important;

    visibility:visible!important;

    pointer-events:auto!important;

    transition:
      clip-path .18s cubic-bezier(.2,.78,.24,1),
      -webkit-clip-path .18s cubic-bezier(.2,.78,.24,1)!important;
  }


  /* =======================================================
     REAL GRADIENT BORDER
     only around the menu window
     ======================================================= */

  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    padding:1px!important;

    border-radius:inherit!important;

    background:
      linear-gradient(
        125deg,
        rgba(169,75,255,.92) 0%,
        rgba(103,91,255,.78) 28%,
        rgba(54,160,255,.78) 62%,
        rgba(41,224,255,.94) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;

    pointer-events:none!important;

    z-index:5!important;

    box-shadow:
      0 0 12px rgba(58,198,255,.10)!important;
  }


  /* no old fake highlight */
  #omaxTopMenuPanel::after{
    display:none!important;
  }


  /* =======================================================
     HEADER CONTENT
     ======================================================= */

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    background:transparent!important;

    border-bottom:
      1px solid rgba(92,173,218,.07)!important;
  }


  /* =======================================================
     MENU ITEMS
     no boxes / no backgrounds / no borders
     ======================================================= */

  .omaxTopMenuItem,
  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus,
  .omaxTopMenuItem:active{
    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    border-radius:0!important;

    outline:0!important;
  }

  .omaxTopMenuItem{
    position:relative!important;

    padding-left:12px!important;
    padding-right:12px!important;
  }

  .omaxTopMenuItem + .omaxTopMenuItem{
    margin-top:0!important;
  }


  /* no separators between menu rows */
  .omaxTopMenuItem::after{
    display:none!important;
  }


  /* icons remain clean */
  .omaxTopMenuIcon{
    background:transparent!important;

    border:0!important;

    box-shadow:none!important;
  }


  .omaxTopMenuItem.logout{
    border:0!important;
    margin-top:0!important;
  }

  .omaxTopMenuItem.logout .omaxTopMenuIcon{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }


  /* =======================================================
     NO PAGE BLUR
     ======================================================= */

  #omaxTopMenuBackdrop,
  #omaxTopMenuBackdrop.open{
    background:transparent!important;

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    opacity:0!important;
  }
}

/* =========================================================
   OMAX TOP MENU R8
   LANDING GLASS + TRUE CARD DRAWER
   ========================================================= */

@media(max-width:640px){

  /* -------------------------------------------------------
     MAIN WINDOW — same material as OMAX landing cards
     ------------------------------------------------------- */

  #omaxTopMenuPanel{
    left:50%!important;
    right:auto!important;

    width:calc(100vw - 38px)!important;
    max-width:650px!important;

    border-radius:0 0 20px 20px!important;

    background:
      linear-gradient(
        145deg,
        rgba(5,14,28,.25),
        rgba(1,7,16,.12)
      )!important;

    border:
      1px solid rgba(115,177,239,.12)!important;

    border-top:
      1px solid rgba(115,177,239,.08)!important;

    backdrop-filter:
      blur(7px)
      saturate(108%)!important;

    -webkit-backdrop-filter:
      blur(7px)
      saturate(108%)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.012),
      inset 0 0 18px rgba(25,167,255,.012),
      0 7px 20px rgba(0,0,0,.06)!important;


    /*
      IMPORTANT:
      card itself never travels up the page.
      It stays anchored under the header.
    */
    transform:
      translateX(-50%)!important;

    opacity:1!important;

    transform-origin:
      center top!important;


    /*
      CLOSED:
      reveal height = 0
      exactly like a drawer/card retracting upward
    */
    clip-path:
      inset(0 0 100% 0 round 0 0 20px 20px)!important;

    -webkit-clip-path:
      inset(0 0 100% 0 round 0 0 20px 20px)!important;

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

    transition:
      clip-path .24s cubic-bezier(.22,.75,.22,1),
      -webkit-clip-path .24s cubic-bezier(.22,.75,.22,1),
      visibility 0s linear .24s!important;

    will-change:
      clip-path!important;

    overflow:hidden!important;
  }


  /* -------------------------------------------------------
     OPEN:
     card grows/reveals downward
     ------------------------------------------------------- */

  #omaxTopMenuPanel.open{
    clip-path:
      inset(0 0 0 0 round 0 0 20px 20px)!important;

    -webkit-clip-path:
      inset(0 0 0 0 round 0 0 20px 20px)!important;

    visibility:visible!important;
    pointer-events:auto!important;

    transition:
      clip-path .24s cubic-bezier(.22,.75,.22,1),
      -webkit-clip-path .24s cubic-bezier(.22,.75,.22,1)!important;
  }


  /* -------------------------------------------------------
     BORDER — subtle OMAX landing style
     ------------------------------------------------------- */

  #omaxTopMenuPanel::before{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    border-radius:inherit!important;

    pointer-events:none!important;

    background:
      radial-gradient(
        circle at 18% 10%,
        rgba(92,209,255,.06),
        transparent 40%
      )!important;

    box-shadow:none!important;

    z-index:0!important;
  }


  #omaxTopMenuPanel::after{
    content:""!important;

    display:block!important;

    position:absolute!important;

    left:12%!important;
    right:12%!important;
    top:0!important;

    height:1px!important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(110,205,255,.20),
        transparent
      )!important;

    box-shadow:none!important;

    pointer-events:none!important;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .omaxTopMenuHead{
    position:relative!important;
    z-index:2!important;

    background:transparent!important;

    border-bottom:
      1px solid rgba(115,177,239,.07)!important;
  }


  /* -------------------------------------------------------
     ITEMS
     text only — no cards
     ------------------------------------------------------- */

  .omaxTopMenuItem,
  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus,
  .omaxTopMenuItem:active{
    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    border-radius:0!important;

    outline:0!important;
  }


  .omaxTopMenuItem{
    position:relative!important;

    padding-left:12px!important;
    padding-right:12px!important;

    transition:
      opacity .12s ease,
      transform .12s ease!important;
  }


  .omaxTopMenuItem + .omaxTopMenuItem{
    margin-top:0!important;
  }


  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus{
    opacity:.82!important;
  }


  .omaxTopMenuItem:active{
    transform:
      translateX(2px)!important;
  }


  .omaxTopMenuItem::after{
    display:none!important;
  }


  /* -------------------------------------------------------
     ICONS
     also remove their mini-card boxes
     ------------------------------------------------------- */

  .omaxTopMenuIcon,
  .omaxTopMenuItem.logout .omaxTopMenuIcon{
    background:transparent!important;

    border:0!important;

    box-shadow:none!important;
  }


  .omaxTopMenuItem.logout{
    margin-top:0!important;
    border:0!important;
  }


  /* -------------------------------------------------------
     absolutely no page blur
     ------------------------------------------------------- */

  #omaxTopMenuBackdrop,
  #omaxTopMenuBackdrop.open{
    background:transparent!important;

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    opacity:0!important;
  }
}

/* =========================================================
   OMAX MENU BORDER R10
   BORDER ONLY — NO BACKGROUND CHANGE
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel{
    position:fixed!important;
    isolation:isolate!important;
  }

  /* keep existing glass surface untouched */
  #omaxTopMenuPanel::before{
    z-index:1!important;
  }

  /* gradient ONLY on the outer edge */
  #omaxTopMenuPanel::after{
    content:""!important;
    display:block!important;

    position:absolute!important;
    inset:0!important;

    padding:1.2px!important;

    border-radius:inherit!important;

    background:
      linear-gradient(
        125deg,
        rgba(169,72,255,.95) 0%,
        rgba(119,82,255,.90) 24%,
        rgba(76,111,255,.84) 48%,
        rgba(41,164,255,.88) 73%,
        rgba(36,223,255,.96) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    -webkit-mask-composite:xor!important;

    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    mask-composite:exclude!important;

    pointer-events:none!important;
    z-index:20!important;

    box-shadow:none!important;
  }

}

/* =========================================================
   OMAX MENU BORDER R11
   FIX FULL WINDOW BORDER
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel::after{
    content:""!important;
    display:block!important;

    position:absolute!important;

    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:0!important;

    width:auto!important;
    height:auto!important;

    padding:1.2px!important;

    box-sizing:border-box!important;

    border-radius:inherit!important;

    background:
      linear-gradient(
        125deg,
        rgba(169,72,255,.95) 0%,
        rgba(119,82,255,.90) 24%,
        rgba(76,111,255,.84) 48%,
        rgba(41,164,255,.88) 73%,
        rgba(36,223,255,.96) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    -webkit-mask-composite:xor!important;

    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    mask-composite:exclude!important;

    pointer-events:none!important;

    z-index:50!important;

    box-shadow:none!important;
  }

}

/* =========================================================
   OMAX MENU BORDER R12
   thinner border + hide top edge under header
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel::after{
    padding:.7px!important;
  }

  #omaxTopMenuPanel{
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
  }

}

@media(max-width:640px){

  #omaxTopMenuPanel::after{
    clip-path:polygon(
      0 0,
      0 100%,
      100% 100%,
      100% 0,
      calc(100% - .7px) 0,
      calc(100% - .7px) calc(100% - .7px),
      .7px calc(100% - .7px),
      .7px 0
    )!important;
  }

}

/* =========================================================
   OMAX MENU R13
   NO OVERLAP + COMPLETE BOTTOM CORNERS + NO TOP BORDER
   ========================================================= */

@media(max-width:640px){

  /* undo R12 overlap */
  #omaxTopMenuPanel{
    margin-top:0!important;
  }


  /* border only */
  #omaxTopMenuPanel::after{
    content:""!important;
    display:block!important;

    position:absolute!important;

    /*
      Slightly inside the panel so rounded bottom corners
      are not clipped by overflow:hidden.
    */
    inset:.6px!important;

    width:auto!important;
    height:auto!important;

    padding:.65px!important;

    box-sizing:border-box!important;

    border-radius:
      0 0 19px 19px!important;

    background:
      linear-gradient(
        125deg,
        rgba(169,72,255,.90) 0%,
        rgba(119,82,255,.84) 24%,
        rgba(76,111,255,.78) 48%,
        rgba(41,164,255,.82) 73%,
        rgba(36,223,255,.90) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    -webkit-mask-composite:xor!important;

    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    mask-composite:exclude!important;

    /*
      Remove only the upper edge.
      Left/right/bottom and rounded lower corners remain.
    */
    clip-path:
      inset(1.4px 0 0 0 round 0 0 19px 19px)!important;

    -webkit-clip-path:
      inset(1.4px 0 0 0 round 0 0 19px 19px)!important;

    opacity:.90!important;

    pointer-events:none!important;
    z-index:50!important;

    box-shadow:none!important;
  }

}

/* =========================================================
   OMAX MENU R14
   DRAWER COMES FROM BEHIND TOP CARD
   ========================================================= */

@media(max-width:640px){

  /* top card must physically cover the drawer */
  .heroBar{
    position:relative!important;
    z-index:2147483000!important;
  }

  /* drawer stays behind top card */
  #omaxTopMenuPanel{
    z-index:2147481900!important;
    margin-top:0!important;
  }

  /* backdrop also stays behind top card */
  #omaxTopMenuBackdrop{
    z-index:2147481800!important;
  }

  /* keep the full thin side/bottom border */
  #omaxTopMenuPanel::after{
    inset:.6px!important;
    padding:.65px!important;

    border-radius:
      0 0 19px 19px!important;

    /*
      top part is physically hidden behind heroBar,
      so no fake clipping is needed anymore
    */
    clip-path:none!important;
    -webkit-clip-path:none!important;
  }

}

/* =========================================================
   OMAX MENU R15
   STRICTLY BELOW HEADER
   LEFT + RIGHT + BOTTOM BORDER ONLY
   KEEP CURRENT DRAWER ANIMATION
   ========================================================= */

@media(max-width:640px){

  #omaxTopMenuPanel{
    margin-top:0!important;
  }

  /* kill all previous full-frame border attempts */
  #omaxTopMenuPanel::after{
    content:""!important;
    display:block!important;

    position:absolute!important;
    inset:0!important;

    width:auto!important;
    height:auto!important;

    padding:0!important;
    border:0!important;
    border-radius:0 0 20px 20px!important;

    /*
      NO TOP BORDER.
      Three independent lines:
      left = violet
      right = cyan
      bottom = violet -> cyan
    */
    background:
      linear-gradient(
        to bottom,
        rgba(169,72,255,.88),
        rgba(101,89,255,.72)
      ) left top / .65px calc(100% - 18px) no-repeat,

      linear-gradient(
        to bottom,
        rgba(57,160,255,.72),
        rgba(36,223,255,.90)
      ) right top / .65px calc(100% - 18px) no-repeat,

      linear-gradient(
        90deg,
        rgba(119,82,255,.82),
        rgba(72,113,255,.76) 48%,
        rgba(36,223,255,.90)
      ) left bottom / 100% .65px no-repeat!important;

    -webkit-mask:none!important;
    mask:none!important;

    clip-path:none!important;
    -webkit-clip-path:none!important;

    opacity:1!important;

    box-shadow:none!important;
    pointer-events:none!important;
    z-index:50!important;
  }

  /*
    rounded lower corners, drawn just inside the card
  */
  #omaxTopMenuPanel{
    border-left:.65px solid rgba(139,76,255,.26)!important;
    border-right:.65px solid rgba(39,211,255,.28)!important;
    border-bottom:.65px solid rgba(48,198,255,.30)!important;

    border-top:0!important;

    border-radius:0 0 20px 20px!important;
  }

}

/* =========================================================
   OMAX MENU R16
   FIX LOWER ROUNDED BORDER
   KEEP TOP OPEN
   ========================================================= */

@media(max-width:640px){

  /* Remove R15 physical borders */
  #omaxTopMenuPanel{
    border-top:0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;

    border-radius:0 0 20px 20px!important;
  }


  /* One continuous gradient ring = clean rounded corners */
  #omaxTopMenuPanel::after{
    content:""!important;
    display:block!important;

    position:absolute!important;

    inset:.7px!important;

    width:auto!important;
    height:auto!important;

    padding:.65px!important;

    box-sizing:border-box!important;

    border-radius:0 0 19.3px 19.3px!important;

    background:
      linear-gradient(
        125deg,
        rgba(169,72,255,.88) 0%,
        rgba(119,82,255,.82) 24%,
        rgba(76,111,255,.76) 48%,
        rgba(41,164,255,.80) 73%,
        rgba(36,223,255,.88) 100%
      )!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    -webkit-mask-composite:xor!important;

    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0)!important;

    mask-composite:exclude!important;

    /*
      Hide ONLY the very top horizontal edge.
      Side borders + both lower curves remain intact.
    */
    clip-path:
      polygon(
        0 2px,
        100% 2px,
        100% 100%,
        0 100%
      )!important;

    -webkit-clip-path:
      polygon(
        0 2px,
        100% 2px,
        100% 100%,
        0 100%
      )!important;

    opacity:.92!important;

    pointer-events:none!important;
    z-index:50!important;

    box-shadow:none!important;
  }

}

/* =========================================================
   OMAX R17
   STICKY HEADER + FIXED DRAWER + CLICKABLE MENU
   Keep existing glass/border/drawer visuals unchanged
   ========================================================= */

@media(max-width:640px){

  /* Top OMAX card remains visible while page content scrolls */
  .heroBar{
    position:sticky!important;
    top:0!important;
    z-index:2147483000!important;
  }

  /* Drawer remains fixed directly below header */
  #omaxTopMenuPanel{
    position:fixed!important;
    z-index:2147482800!important;
  }

  /* Backdrop below drawer and header */
  #omaxTopMenuBackdrop{
    z-index:2147482600!important;
  }

  /* Make menu content unquestionably clickable */
  #omaxTopMenuPanel.open{
    pointer-events:auto!important;
  }

  .omaxTopMenuList{
    position:relative!important;
    z-index:100!important;
    pointer-events:auto!important;
  }

  .omaxTopMenuItem{
    position:relative!important;
    z-index:101!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }

  .omaxTopMenuItem *{
    pointer-events:none!important;
  }

  /* Decorative layers must never steal taps */
  #omaxTopMenuPanel::before,
  #omaxTopMenuPanel::after{
    pointer-events:none!important;
  }
}

/* =========================================================
   OMAX MENU POLISH + MICRO SCALE
   ========================================================= */

@media(max-width:640px){

  /* remove mobile white tap flash */
  #omaxTopMenuButton,
  #omaxTopMenuPanel,
  #omaxTopMenuPanel button,
  .omaxTopMenuItem,
  .omaxTopMenuItem *,
  .omaxTopMenuIcon{
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    outline:none!important;
  }

  .omaxTopMenuItem,
  .omaxTopMenuItem:hover,
  .omaxTopMenuItem:focus,
  .omaxTopMenuItem:focus-visible,
  .omaxTopMenuItem:active{
    background:transparent!important;
    box-shadow:none!important;
    outline:none!important;
    filter:none!important;
    opacity:1!important;
  }

  /* subtle scale animation on menu items */
  .omaxTopMenuItem{
    transform:scale(1)!important;
    transform-origin:center!important;

    transition:
      transform .11s ease-out,
      opacity .11s ease-out!important;
  }

  .omaxTopMenuItem:active{
    transform:scale(.985)!important;
  }

  /* subtle scale animation on hamburger / X button */
  #omaxTopMenuButton{
    transform:scale(1)!important;

    transition:
      transform .11s ease-out!important;
  }

  #omaxTopMenuButton:active{
    transform:scale(.94)!important;
  }

}

/* =========================================================
   OMAX FIXED TOP CARD + FIXED DRAWER
   PAGE CONTENT SCROLLS UNDER THEM
   ========================================================= */

@media(max-width:640px){

  /* top OMAX card stays fixed */
  .heroBar{
    position:fixed!important;

    top:170px!important;
    left:18px!important;
    right:18px!important;

    width:auto!important;

    z-index:2147483000!important;

    margin:0!important;
  }


  /* drawer stays fixed below top card */
  #omaxTopMenuPanel{
    position:fixed!important;

    z-index:2147482800!important;
  }


  /* menu button remains above drawer */
  #omaxTopMenuButton{
    position:relative!important;

    z-index:2147483200!important;
  }


  /* page content gets room for fixed top card */
  main{
    padding-top:122px!important;
  }


  /* old bottom menu remains gone */
  #omaxMobileFinal,
  .omaxMobileFinal,
  .bottomNav,
  .omax-bottom-nav{
    display:none!important;
  }

}

/* =========================================================
   OMAX R20
   FIXED HEADER AT REAL VIEWPORT TOP
   CONTENT SCROLLS UNDER IT
   ========================================================= */

@media(max-width:640px){

  .heroBar{
    position:fixed!important;

    /* Browser chrome is OUTSIDE the webpage viewport */
    top:8px!important;

    left:18px!important;
    right:18px!important;

    width:auto!important;
    margin:0!important;

    z-index:2147483000!important;
  }

  /* drawer stays fixed below heroBar */
  #omaxTopMenuPanel{
    position:fixed!important;
    z-index:2147482800!important;
  }

  /* reserve only the real height of the fixed card */
  main{
    padding-top:122px!important;
  }

}

/* =========================================================
   OMAX R21
   REAL STICKY HEADER — NO FAKE GAP
   ========================================================= */

@media(max-width:640px){

  /*
    Header stays in normal page flow,
    but sticks to viewport while scrolling.
  */
  .heroBar{
    position:sticky!important;

    top:8px!important;

    left:auto!important;
    right:auto!important;

    width:100%!important;

    margin:0 0 7px 0!important;

    z-index:2147483000!important;
  }


  /*
    IMPORTANT:
    remove the artificial space created by R17/R20.
  */
  main{
    padding-top:10px!important;
  }


  /*
    Drawer itself remains fixed.
    Existing JS continuously anchors it
    to heroBar.getBoundingClientRect().bottom.
  */
  #omaxTopMenuPanel{
    position:fixed!important;

    z-index:2147482800!important;
  }


  #omaxTopMenuBackdrop{
    position:fixed!important;

    z-index:2147482600!important;
  }

}