header#main-header{align-items:center;background:var(--color-primary);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:0 var(--blockpad);transition:top 0.3s;width:100%;
  div.content{align-items:flex-start;box-sizing:border-box;display:flex;max-width:var(--block-l);justify-content:space-between;padding:var(--space-s) 0;width:100%;
    a{text-decoration:none;}
    div.logo{flex-shrink:0;text-align:left;width:186px;
      a{display:block;}
      a:after{display:none;}
      img{display:block;}
    }

    nav#nav-main ul{align-items:center;display:flex;gap:0;
      li.cta {height:48px;padding-left:var(--space-xs);
        a{background:var(--color-court);border-radius:100px;border:3px solid var(--color-court);color:var(--color-primary);display:block;font-size:var(--fs-btn);line-height:2.6em;margin-top:-5px;padding:0 var(--space-xs);vertical-align:middle;white-space:nowrap;}
        a:before{display:none;}
        a:hover{background:transparent;color:var(--color-court);}
      }

      li.icon{
        a{height:28px;margin-left:var(--space-s);padding:0;
          .cart-count-bubble{background-color:var(--color-court);bottom:16px;left:20px;}
          img{display:block;width:28px;}
          .svg-wrapper{height:28px;width:28px;}
        }
      }

      /*li:not(.cta){*/
      li.desktop{
        a{color:var(--color-court);display:block;font-size:var(--fs-s);padding:var(--space-xxxs) var(--space-xs);}
      }

      li.mobile{display:none;
        button{background:none;border:none;cursor:pointer;display:block;height:auto;line-height:1em;margin:0;padding:0;
          svg{width:32px;
            path{fill:var(--color-court);}
          }
        }
      }

      li.simple{border-top-left-radius:var(--box-radius-xs);border-top-right-radius:var(--box-radius-xs);
        a:after{content:"";background:var(--color-court);border:1px solid var(--color-ink);border:none;display:block;height:2px;margin-top:3px;transform:scale(0, 1);transition:0.3s;}
        a:hover:after{border-color:var(--color-court);transform:scale(1,1);}
      }

      li.children{
        ul.submenu{align-items:flex-start;border:1px solid transparent;border-radius:var(--box-radius-xs);display:flex;flex-direction:column;max-height:0;gap:0;margin-left:calc(0 * -1);margin-top:0;overflow:hidden;padding:0 0;position:absolute;transition: max-height .3s;
          li{width:100%;
            a{border-radius:0;color:var(--color-primary);font-size:var(--fs-s);line-height:var(--line-m);padding:var(--space-xxs) var(--space-s);}
          }
          li:hover a{background-color:var(--color-court-dark);color:var(--color-white);}
        }
      }

      li.children:hover ul.submenu{background:var(--color-court);border-color:var(--color-court-dark);display:flex;max-height:260px;}
    }

    #drawer-main-nav{background:var(--color-court);box-sizing:border-box;height:100vh;left:0;padding:var(--space-s) 7%;position:fixed;top:0;transform:translate(105vw,0);transition:0.3s;visibility:hidden;width:100vw;
      div.header{align-items:center;display:flex;justify-content:space-between;
        img{width:160px;}
        #drawer-main-nav-close{background:none;border:none;cursor:pointer;padding:0;width:32px;
          svg{width:100%;
            path{fill:var(--color-fluo);
              &:hover{fill:var(--color-white);}
            }
          }
        }
      }
      div.main{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-xs) 0;}

      section.normal{
        h3{border-bottom:2px solid var(--color-white);color:var(--color-white);font-size:var(--fs-m);margin-bottom:var(--space-xxxs);margin-top:0;padding-bottom:var(--space-xxxs);}
        ul li a{color:var(--color-white);display:block;font-size:var(--fs-s);line-height:var(--line-m);padding:var(--space-xxxs) 0;
          &:hover{color:var(--color-fluo);}
        }
      }

      div.footer{
        a.cta{width:100%;}
        ul.social{display:flex;gap:var(--space-s);justify-content:center;margin:0 auto;padding-top:var(--space-xxs);
          li a{display:block;width:24px;
            svg{width:100%;
              path{fill:var(--color-fluo);
                &:hover{fill:var(--color-white);}
              }
            }
          }
        }
      }

      &.visible{transform:translate(0,0);visibility:visible;}
    }
  }

  &.fixed{position:sticky;top:0;z-index:99;}
  &.hidden{position:sticky;top:-210px;z-index:99;}
}

@media screen and (max-width: 1050px) {
  header#main-header div.content{
    nav#nav-main{
      ul {
        li.desktop{display:none;}
        li.mobile{display:block;padding-left:var(--space-s);}
      }
    }

    #drawer-main-menu{display:block;}
  }
}

@media screen and (max-width: 700px) {
  header#main-header div.content {
    div.logo{width:140px;}
    nav#nav-main{
      ul li.cta a{display:none;}
    }
  }
}