.categorytree {
  align-self: start;
  position: sticky;
  top: 105px;
  max-height: 75vh;
  overflow: auto;
  border: 1px solid var(--line);
  background: #fff;
}
.categorytree h2 { margin: 0; padding: 16px; font-size: 16px; color: #fff; background: var(--navy); }
.categorytree details, .categorytree .leaf { border-bottom: 1px solid var(--line); }
.categorytree details details, .categorytree details .leaf { margin-left: 15px; border-bottom: 0; border-left: 1px solid var(--line); }
.categorytree summary { display: flex; align-items: center; cursor: pointer; list-style: none; padding: 12px; font-size: 14px; font-weight: 700; }
.categorytree summary::-webkit-details-marker { display: none; }
.categorytree summary::after { content: "⌄"; margin-left: auto; color: var(--muted); transition: .15s; }
.categorytree details[open] > summary::after { transform: rotate(180deg); }
.categorytree summary span { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
.categorytree a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.categorytree a:hover { color: var(--blue); background: var(--soft); }
.categorytree a span { margin-left: auto; color: var(--muted); }
.categorytree .category-all { padding-left: 26px; color: var(--blue); font-weight: 700; }
.subcategories { margin-bottom: 30px; }
.categoryhero { padding-top: 45px; }
@media (max-width: 1050px) { .categorytree { position: static; max-height: 420px; } }