/* === Catalog dropdown v2 === */

.mkf-cat-dd { 
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
}

.mkf-nav-item--dropdown:hover .mkf-cat-dd,
.mkf-nav-item--dropdown:focus-within .mkf-cat-dd {
  display: block;
}

.mkf-cat-dd__panel{
  position: relative;
  width: 980px;
  background: var(--mkf-surface-bg, #fff);
  border: 1px solid var(--mkf-border-subtle, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.10);
  padding: 12px;
  max-height: calc(100vh - 180px);
  overflow: hidden;
}

/* grid: left roots + right content */
.mkf-cat-dd2{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 12px;
  height: min(560px, calc(100vh - 220px));
}

/* left */
.mkf-cat-dd2__roots{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mkf-cat-dd2__root a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--mkf-text-main, #111827);
}

.mkf-cat-dd2__root.is-active a,
.mkf-cat-dd2__root a:hover{
  background: var(--mkf-chip-bg, #f3f4f6);
}

/* right cols */
.mkf-cat-dd2__cols{
  position: relative;
  overflow: hidden;
}

.mkf-cat-dd2__col{
  display: none;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--mkf-border-subtle, #e5e7eb);
  padding-left: 12px;
}

.mkf-cat-dd2__col.is-active{
  display: block;
}

.mkf-cat-dd2__col-title{
  font-weight: 700;
  margin: 6px 0 10px;
}

/* groups */
.mkf-cat-dd2__groups{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.mkf-cat-dd2__lvl1{
  font-weight: 600;
  text-decoration: none;
  color: var(--mkf-text-main, #111827);
}

.mkf-cat-dd2__lvl2{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mkf-cat-dd2__lvl2 a{
  text-decoration: none;
  color: var(--mkf-text-muted, #374151);
}

.mkf-cat-dd2__lvl2 a:hover{
  color: var(--mkf-text-main, #111827);
}

/* expand button */
.mkf-cat-dd2__lvl2-item{
  position: relative;
  padding-right: 26px;
}

.mkf-cat-dd2__exp{
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--mkf-border-subtle, #e5e7eb);
  background: var(--mkf-surface-bg, #fff);
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
  color: var(--mkf-text-muted, #374151);
}

.mkf-cat-dd2__exp:hover{
  background: var(--mkf-chip-bg, #f3f4f6);
  color: var(--mkf-text-main, #111827);
}

/* lvl4 list */
.mkf-cat-dd2__lvl3{
  list-style: none;
  margin: 6px 0 0 0;
  padding: 6px 0 0 14px;
  border-left: 1px dashed var(--mkf-border-subtle, #e5e7eb);
  display: grid;
  gap: 6px;
}

.mkf-cat-dd2__lvl3-item a{
  text-decoration: none;
  color: var(--mkf-text-muted, #374151);
  font-size: 13px;
}

.mkf-cat-dd2__lvl3-item a:hover{
  color: var(--mkf-text-main, #111827);
}

/* "more" button */
.mkf-cat-dd2__more{
  margin-top: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--mkf-accent, #2563eb);
  font-weight: 600;
}

.mkf-cat-dd2__more:hover{
  text-decoration: underline;
}