:root{
  --crx-paper:#F8F4E8;
  --crx-ink:#09090B;
  --crx-acid:#D2E823;
}

.crx-universal-nav{
  position:sticky;
  top:12px;
  z-index:2147480000;

  width:calc(100% - 70px);
  max-width:1650px;

  margin:12px auto 0;

  background:rgba(248,244,232,.94);
  color:var(--crx-ink);

  border:2px solid var(--crx-ink);
  border-radius:13px;

  box-shadow:5px 5px 0 var(--crx-ink);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.crx-universal-nav *{
  box-sizing:border-box;
}

.crx-universal-nav-inner{
  min-height:62px;

  padding:8px 14px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}


/* LOGO */

.crx-universal-brand{
  display:flex;
  align-items:center;

  flex:0 0 auto;

  text-decoration:none;
}

.crx-universal-logo{
  display:block;

  width:100px;
  max-width:100px;
  height:auto;

  object-fit:contain;
}


/* DESKTOP LINKS */

.crx-universal-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:7px;

  flex-wrap:nowrap;
}

.crx-universal-link{
  min-height:38px;

  padding:0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1.6px solid var(--crx-ink);
  border-radius:9px;

  background:var(--crx-paper);
  color:var(--crx-ink);

  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:11px;
  font-weight:800;
  line-height:1;

  text-decoration:none;
  white-space:nowrap;

  box-shadow:2px 2px 0 var(--crx-ink);

  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.crx-universal-link:hover{
  background:var(--crx-acid);
  transform:translateY(-1px);
}

.crx-universal-link.is-primary{
  padding-left:18px;
  padding-right:18px;

  background:var(--crx-ink);
  color:var(--crx-acid);

  border-color:var(--crx-ink);

  box-shadow:4px 4px 0 var(--crx-acid);
}

.crx-universal-link.is-primary:hover{
  background:var(--crx-acid);
  color:var(--crx-ink);

  box-shadow:4px 4px 0 var(--crx-ink);
}


/* HAMBURGER */

.crx-universal-menu-btn{
  display:none;

  width:44px;
  height:42px;

  padding:0;

  align-items:center;
  justify-content:center;

  border:2px solid var(--crx-ink);
  border-radius:9px;

  background:var(--crx-acid);
  color:var(--crx-ink);

  box-shadow:3px 3px 0 var(--crx-ink);

  cursor:pointer;
}

.crx-universal-menu-lines,
.crx-universal-menu-lines::before,
.crx-universal-menu-lines::after{
  display:block;

  width:19px;
  height:3px;

  border-radius:50px;

  background:var(--crx-ink);
}

.crx-universal-menu-lines{
  position:relative;
}

.crx-universal-menu-lines::before,
.crx-universal-menu-lines::after{
  content:"";
  position:absolute;
  left:0;
}

.crx-universal-menu-lines::before{
  top:-6px;
}

.crx-universal-menu-lines::after{
  top:6px;
}


/* MOBILE DRAWER */

.crx-universal-mobile{
  display:none;

  padding:4px 10px 12px;
}

.crx-universal-mobile.is-open{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:7px;
}

.crx-universal-mobile .crx-universal-link{
  width:100%;
  min-height:42px;

  padding:0 10px;

  font-size:10px;
}

.crx-universal-mobile .is-primary{
  grid-column:1 / -1;
}


/* Hide legacy navigation once universal nav is active */

body.crx-has-universal-nav > nav:not(.crx-universal-nav),
body.crx-has-universal-nav .site-nav:not(.crx-universal-nav),
body.crx-has-universal-nav .profile-nav,
body.crx-has-universal-nav .aff-nav,
body.crx-has-universal-nav .legal-nav,
body.crx-has-universal-nav .crx-mobile-shell{
  display:none !important;
}


/* TABLET */

@media(max-width:1180px){

  .crx-universal-nav{
    width:calc(100% - 34px);
  }

  .crx-universal-logo{
    width:86px;
  }

  .crx-universal-links{
    gap:5px;
  }

  .crx-universal-link{
    min-height:35px;

    padding-left:9px;
    padding-right:9px;

    font-size:9px;
  }

  .crx-universal-link.is-primary{
    padding-left:12px;
    padding-right:12px;
  }
}


/* MOBILE */

@media(max-width:820px){

  .crx-universal-nav{
    position:sticky;
    top:8px;

    width:calc(100% - 22px);

    margin-top:8px;

    border-radius:12px;

    box-shadow:4px 4px 0 var(--crx-ink);
  }

  .crx-universal-nav-inner{
    min-height:56px;

    padding:7px 9px;
  }

  .crx-universal-logo{
    width:78px;
    max-width:78px;
  }

  .crx-universal-links{
    display:none;
  }

  .crx-universal-menu-btn{
    display:flex;
  }
}


/* VERY SMALL */

@media(max-width:390px){

  .crx-universal-nav{
    width:calc(100% - 16px);
  }

  .crx-universal-logo{
    width:70px;
    max-width:70px;
  }

  .crx-universal-mobile{
    padding-left:8px;
    padding-right:8px;
  }

  .crx-universal-mobile .crx-universal-link{
    font-size:9px;
  }
}