/* =========================================================
   BAAZAAR — Catalog dropdown redesign v3
   - Bigger panel for growth
   - Smaller font for dense category trees
   - Left L1 links are clickable and still preview on hover
   ========================================================= */

.catalog-dropdown{
  left: 50%;
  right: auto;
  transform: translate(-50%, -6px);
  top: calc(100% + 8px);
  width: min(1680px, 98vw);
  height: 68vh;
  max-height: 84vh;
  min-height: 520px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 24px;
  box-shadow: 0 26px 80px rgba(0,0,0,.18);
  overflow: hidden;
  z-index: 80;
}

.catalog-dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-18px;
  height:18px;
}

.catalog-dropdown-inner,
#catalogDropdown{
  height: 100%;
  overflow: auto;
  padding: 12px 12px 16px;
  font-size: 11px;
  line-height: 1.2;
}

#catalogDropdown .catalog-reset{
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: 0 0 9px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#catalogDropdown *{
  border: 0;
  box-shadow: none;
}

#catalogDropdown .catalog-reset a{
  display:inline-block;
  padding: 5px 2px;
  text-decoration:none;
  color: rgba(0,0,0,.78);
  font-size: 11px;
  font-weight: 800;
}
#catalogDropdown .catalog-reset a:hover,
#catalogDropdown .catalog-reset a.is-active{
  color: rgba(0,0,0,.92);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

#catalogDropdown .catalog-mega2{
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 14px;
  min-height: calc(68vh - 76px);
}

#catalogDropdown .catalog-mega2-left{
  min-width: 0;
  background: linear-gradient(180deg, rgba(248,249,250,.96), rgba(255,255,255,1));
  border-right: 1px solid rgba(0,0,0,.06);
  padding-right: 8px;
}

#catalogDropdown .catalog-mega2-leftlist{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#catalogDropdown a.catalog-mega2-root{
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(0,0,0,.86);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
#catalogDropdown a.catalog-mega2-root:hover,
#catalogDropdown a.catalog-mega2-root:focus,
#catalogDropdown a.catalog-mega2-root.is-active{
  background: rgba(39,199,194,.10);
  color: rgba(0,0,0,.92);
  outline: none;
}

#catalogDropdown .catalog-mega2-right{
  min-width: 0;
  padding: 2px 4px 0 4px;
}

#catalogDropdown .catalog-mega2-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#catalogDropdown .catalog-mega2-title{
  font-size: 16px;
  line-height: 1.1;
  font-weight: 1000;
  color: rgba(0,0,0,.88);
}

#catalogDropdown .cat-showall{
  display: inline-block;
  margin: 0;
  font-size: 10px;
  font-weight: 850;
  color: rgba(0,0,0,.64);
  text-decoration: none;
  white-space: nowrap;
}
#catalogDropdown .cat-showall:hover{
  text-decoration: underline;
  color: rgba(0,0,0,.84);
}

#catalogDropdown .catalog-mega2-body{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
  align-content: start;
  padding-bottom: 10px;
}

#catalogDropdown .catalog-mega2-l2block{
  min-width: 0;
}

#catalogDropdown a.catalog-mega2-l2,
#catalogDropdown a.cat-l2-link{
  display: block;
  padding: 4px 1px;
  text-decoration: none;
  color: rgba(0,0,0,.84);
  font-size: 11px;
  font-weight: 850;
}
#catalogDropdown a.catalog-mega2-l2:hover,
#catalogDropdown a.cat-l2-link:hover,
#catalogDropdown a.catalog-mega2-l2.is-active,
#catalogDropdown a.cat-l2-link.is-active{
  color: rgba(0,0,0,.92);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

#catalogDropdown .catalog-mega2-l3list{
  margin: 5px 0 10px 8px;
  padding-left: 8px;
  border-left: 2px solid rgba(39,199,194,.16);
}

#catalogDropdown a.cat-l3-link{
  display: block;
  padding: 2px 1px;
  text-decoration: none;
  color: rgba(0,0,0,.72);
  font-size: 10px;
  font-weight: 650;
}
#catalogDropdown a.cat-l3-link:hover,
#catalogDropdown a.cat-l3-link.is-active{
  color: rgba(0,0,0,.86);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (max-width: 1100px){
  .catalog-dropdown{
    width: min(1480px, 100vw);
    height: 72vh;
    min-height: 0;
    border-radius: 0 0 20px 20px;
  }
  #catalogDropdown{
    padding: 10px 10px 14px;
  }
  #catalogDropdown .catalog-mega2{
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: auto;
  }
  #catalogDropdown .catalog-mega2-body{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 920px){
  .catalog-dropdown{
    left: 0;
    right: 0;
    transform: translate(0, -6px);
    width: 100vw;
    height: 76vh;
    min-height: 0;
    border-radius: 0 0 18px 18px;
  }
  #catalogDropdown .catalog-mega2{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #catalogDropdown .catalog-mega2-left{
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding-right: 0;
    padding-bottom: 8px;
  }
  #catalogDropdown .catalog-mega2-leftlist{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px;
  }
  #catalogDropdown .catalog-mega2-body{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
  }
}

.catalog-menu.is-open .catalog-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
@media (max-width: 920px){
  .catalog-menu.is-open .catalog-dropdown{ transform: translate(0, 0); }
}