/* Shared nav: Lat/Ćir, cart, burger, categories mega-menu */
.nav{
  align-items:stretch;
  position:relative;
}
.nav-mega{
  position:static;
  display:flex;
  align-items:stretch;
}
.nav-mega-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.06em;
  color:var(--bone);
  padding:.8rem 1.4rem;
  text-transform:uppercase;
  background:transparent;
  border:none;
  border-right:1px solid var(--red-deep);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-mega-btn:hover,
.nav-mega.is-open .nav-mega-btn{
  background:var(--black);
  color:var(--yellow);
}
.nav-mega-caret{
  width:0;height:0;
  border-left:.35rem solid transparent;
  border-right:.35rem solid transparent;
  border-top:.4rem solid currentColor;
  opacity:.85;
  transition:transform .15s;
}
.nav-mega.is-open .nav-mega-caret{transform:rotate(180deg)}
.nav-mega-panel{
  position:absolute;
  left:0;right:0;top:100%;
  z-index:80;
  width:100%;
  background:#F2EDE3;
  color:var(--ink);
  border:3px solid var(--black);
  border-top:none;
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}
.nav-mega-inner{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  align-items:stretch;
  width:100%;
  min-height:0;
  max-height:min(58vh,420px);
}
.nav-mega-l1{
  background:#5A5046;
  display:flex;
  flex-direction:column;
  overflow:auto;
  border-right:3px solid var(--black);
}
.nav-mega-l1-btn{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  border-left:3px solid transparent;
  color:#F4EFE6;
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.55rem .75rem .55rem .65rem;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.nav-mega-l1-btn:hover{
  background:#6B6054;
  color:var(--yellow);
}
.nav-mega-l1-btn.is-on{
  background:#F2EDE3;
  color:var(--black);
  border-left-color:var(--red);
}
.nav-mega-panels{
  padding:.7rem .85rem .85rem;
  overflow:auto;
  min-width:0;
}
.nav-mega-pane[hidden]{display:none !important}
.nav-mega-pane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.65rem;
  padding-bottom:.45rem;
  border-bottom:1px solid rgba(0,0,0,.14);
}
.nav-mega-pane-title{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-width:0;
}
.nav-mega-pane-title img{
  width:28px;height:21px;
  object-fit:cover;
  background:#E8E2D6;
  border:1px solid var(--black);
  flex:0 0 auto;
}
.nav-mega-pane-title strong{
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.1;
}
.nav-mega-all{
  flex:0 0 auto;
  font-family:var(--label);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:.05rem;
}
.nav-mega-all:hover{border-bottom-color:var(--red)}
.nav-mega-subs{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.5rem;
}
.nav-mega-subs li{min-width:0}
.nav-mega-subs a{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:.3rem;
  background:#fff;
  border:1px solid #1a1a1a;
  color:var(--ink);
  text-decoration:none;
  padding:.35rem;
  transition:background .12s, border-color .12s;
}
.nav-mega-subs a:hover{
  background:var(--yellow);
  border-color:var(--black);
}
.nav-mega-thumb{
  display:block;
  aspect-ratio:1;
  max-height:72px;
  margin:0 auto;
  width:100%;
  overflow:hidden;
  background:#E8E2D6;
}
.nav-mega-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nav-mega-sub-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
  min-height:1.7em;
}
.nav-mega-empty{
  margin:.25rem 0 0;
  font-family:var(--label);
  font-size:.8rem;
  color:#6e665c;
}
@media (max-width:1180px){
  .nav-mega-subs{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-mega-inner{grid-template-columns:180px minmax(0,1fr)}
  .nav-mega-subs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px) and (min-width:821px){
  .nav-mega-subs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:3.1rem;
  padding:.85rem 1rem;
  background:var(--black);
  border:none;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-burger span{
  display:block;
  height:2px;
  width:100%;
  background:var(--bone);
  transition:transform .18s, opacity .18s;
}
.nav.is-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-burger span:nth-child(2){opacity:0}
.nav.is-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links{display:contents}
.nav .lat{
  margin-left:auto;
  background:var(--black);
  color:var(--bone);
  border-right:none;
  cursor:pointer;
  border:none;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.06em;
  padding:.8rem 1.6rem;
  text-transform:uppercase;
  transition:color .15s, background .15s;
}
.nav .lat:hover{color:var(--yellow)}
.nav-cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  background:var(--black);
  color:var(--bone);
  border:none;
  cursor:pointer;
  padding:.75rem 1.35rem;
  transition:color .15s, background .15s;
}
.nav-cart:hover{color:var(--yellow)}
.nav-cart .n{
  background:var(--yellow);
  color:var(--black);
  font-family:var(--label);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.04em;
  min-width:1.45em;
  text-align:center;
  padding:.12em .35em;
  line-height:1.2;
}

@media (max-width:820px){
  .nav{
    flex-wrap:wrap;
    justify-content:flex-start !important;
  }
  .nav-burger{display:inline-flex}
  .nav-links{
    display:none;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    order:10;
    background:var(--red);
    border-top:3px solid var(--red-deep);
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links > a{
    border-right:none !important;
    border-bottom:1px solid var(--red-deep);
    padding:1rem 1.4rem !important;
    width:100%;
  }
  .nav-links > a:last-child{border-bottom:none}
  .nav-mega{
    flex-direction:column;
    width:100%;
    order:-1;
  }
  .nav-mega-btn{
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--red-deep);
    justify-content:space-between;
    padding:1rem 1.4rem;
  }
  .nav-mega.is-open .nav-mega-btn{
    background:var(--black);
    color:var(--yellow);
  }
  .nav-mega-panel{
    position:static;
    width:100%;
    border:none;
    border-bottom:3px solid var(--black);
    box-shadow:none;
  }
  .nav-mega-inner{
    grid-template-columns:1fr;
    min-height:0;
    max-height:none;
  }
  .nav-mega-l1{
    max-height:200px;
    border-right:none;
    border-bottom:3px solid var(--black);
  }
  .nav-mega-l1-btn{
    font-size:.76rem;
    padding:.6rem 1rem;
  }
  .nav-mega-panels{
    padding:.7rem .75rem .9rem;
  }
  .nav-mega-pane-head{
    flex-wrap:wrap;
    gap:.4rem .65rem;
  }
  .nav-mega-pane-title strong{font-size:.9rem}
  .nav-mega-subs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem;
  }
  .nav-mega-thumb{max-height:56px}
  .nav-mega-sub-name{font-size:.62rem}
  .nav .lat{margin-left:auto}
  .topbar{
    justify-content:center;
    text-align:center;
    gap:1rem;
  }
  .topbar .bolt-img,
  .topbar .moto-img{display:none}
  .badge-img{
    position:static !important;
    transform:none !important;
  }
}