.sort-direction-btn {
	 grid-area: direction;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 padding: 11px 18px;
	 min-height: 37px;
	 max-height: 37px;
	 max-width: 38px;
	 border: 1px solid var(--border);
	 border-radius: 12px;
	 background: var(--app);
	 color: var(--font);
	 cursor: pointer;
	 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	 box-shadow: 0 2px 6px var(--shadow-black-05);
	 min-width: 35px;
}
 .sort-direction-btn svg {
	 min-width: 20px;
	 min-height: 20px;
	 fill: var(--font);
	 transition: all 0.3s ease;
}
 .sort-direction-btn:hover {
	 transform: translateY(-2px);
	 box-shadow: 0 6px 16px var(--shadow-black-10);
	 border-color: var(--link-active);
}
 .sort-direction-btn:hover svg {
	 fill: var(--link-active);
	 transform: rotate(180deg);
}
 .sort-direction-btn:active {
	 transform: translateY(0);
	 box-shadow: 0 2px 8px var(--shadow-black-10);
}

/* Skeleton/inline styles */
.skel {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--border) 25%, var(--hbs) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 2.1s ease-in-out infinite;
}
.skel-sort {
  height: 36px;
  width: 36px;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}