.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:1500px;
  height:86px;
  margin:0 auto;
  padding:0 42px;
}

.pill{
  gap:3px;
  padding:5px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 36px rgba(0,0,0,.2);
}

.pill a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 18px;
  white-space:nowrap;
  line-height:1;
}

.nav-right{
  position:absolute;
  right:42px;
  display:flex;
  align-items:center;
  gap:20px;
}

.bag{
  display:block;
  width:21px;
  height:22px;
  border:2px solid #fff;
  border-radius:4px;
  font-size:0;
}

.bag::before{
  content:"";
  position:absolute;
  left:4px;
  top:-7px;
  width:9px;
  height:8px;
  border:2px solid #fff;
  border-bottom:0;
  border-radius:7px 7px 0 0;
}

.bag small{top:-10px;right:-10px;font-size:9px}

@media (max-width:1250px){
  .nav{justify-content:flex-start;padding:0 24px}
  .nav-right{right:24px}
  .pill a{padding:8px 12px;font-size:11px}
}

@media (max-width:1000px){
  .nav{justify-content:space-between;height:72px;padding:0 22px}
  .pill{display:none}
  .mobile{display:block;font-size:25px;line-height:1}
  .nav-right{position:static;margin-left:auto}
}

@media (max-width:580px){
  .nav{height:68px;padding:0 18px}
  .nav-right{gap:12px}
  .bag{width:20px;height:21px}
}